From ad2bdf98e62ba61141be9b539aa5461029dce7e5 Mon Sep 17 00:00:00 2001
From: Fdily <2949549024@qq.com>
Date: Mon, 27 Apr 2026 09:13:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 odcs2.com/src/router/index.js                 |   1 +
 odcs2.com/src/views/Home/common/knapsack.vue  | 813 ++++++++----------
 odcs2.com/src/views/Home/common/login.vue     | 133 ++-
 odcs2.com/src/views/rollHome/index.vue        |   2 +-
 .../service/impl/ApiRegisterServiceImpl.java  |  13 +-
 5 files changed, 432 insertions(+), 530 deletions(-)

diff --git a/odcs2.com/src/router/index.js b/odcs2.com/src/router/index.js
index 5143a0e..09f0617 100644
--- a/odcs2.com/src/router/index.js
+++ b/odcs2.com/src/router/index.js
@@ -44,6 +44,7 @@ const routes = [
     path: "/knapsack",
     name: "knapsack",
     component: () => import("../views/Home/common/knapsack.vue"),
+    meta: { hideHeader: true },
   },
   {
     path: "/recharge",
diff --git a/odcs2.com/src/views/Home/common/knapsack.vue b/odcs2.com/src/views/Home/common/knapsack.vue
index 015bcb0..35f7970 100644
--- a/odcs2.com/src/views/Home/common/knapsack.vue
+++ b/odcs2.com/src/views/Home/common/knapsack.vue
@@ -1,172 +1,68 @@
 <template>
-  <div class="home" @click.stop="selectlist = fasle">
-    <div class="header_top">
-      <handleback></handleback>
-      <div>我的背包</div>
-      <div>玩法说明</div>
-    </div>
-    <div class="header column">
-      <div class="header_I left">
-        <div class="header_I_I">饰品总数 : {{ totalOrnamentNumber }}</div>
-        <div class="header_I_I">饰品总价值 : {{ totalOrnamentPrice }}</div>
+  <div class="knapsack-page" @click.stop="selectlist = false">
+    <!-- 第一行：头像 + 昵称 + 退出（与 rollHome 完全一致） -->
+    <div class="page_header_user">
+      <div class="page_avatar_wrap">
+        <img :src="loginAvatar" @error="$event.target.src = defaultAvatar" alt class="page_avatar_img" />
       </div>
-      <div class="header_II left" v-if="false">
-        <div class="header_II_I">
-          已选饰品总数 : {{ isAll ? totalOrnamentNumber : recyleMoney.index }}
-        </div>
-        <div class="header_II_I">
-          已选饰品总价值 : {{ isAll ? totalOrnamentPrice : recyleMoney.money }}
+      <span class="page_nickname">{{ (USER_INFO && USER_INFO.nickName) || '' }}</span>
+      <div class="page_logout_btn" @click="handleLogout">退出</div>
+    </div>
+    <!-- 第二行：返回 + 我的背包标题 -->
+    <div class="knapsack-header">
+      <div class="knapsack-back" @click="$router.back()">
+        <span class="back-arrow">&#8592;</span> 返回
+      </div>
+      <div class="knapsack-title">我的背包</div>
+      <div style="width:60px"></div>
+    </div>
+
+    <!-- 统计信息卡片 -->
+    <div class="knapsack-stats">
+      <div class="stats-item">饰品总数：{{ totalOrnamentNumber }}</div>
+      <div class="stats-divider"></div>
+      <div class="stats-item">饰品总价值：{{ totalOrnamentPrice }}</div>
+    </div>
+
+    <!-- 工具栏：排序 + 搜索 -->
+    <div class="knapsack-toolbar">
+      <div class="sort-btn" @click.stop="selectlist = !selectlist">
+        {{ selected }}
+        <div class="sort-dropdown" v-if="selectlist">
+          <div class="sort-option" @click.stop="handlesort(0); playAudio();">默认排序</div>
+          <div class="sort-option" @click.stop="handlesort(1); playAudio();">价格从低到高</div>
+          <div class="sort-option" @click.stop="handlesort(2); playAudio();">价格从高到低</div>
         </div>
       </div>
+      <div class="search-box">
+        <input
+          type="text"
+          v-model="page.name"
+          placeholder="请输入饰品名称"
+          @keyup.enter="handlesearch"
+        />
+        <span class="search-icon" @click="handlesearch">&#128269;</span>
+      </div>
     </div>
-    <div class="main column">
-      <div class="main_I space_between">
-        <div class="main_I_I center" @click.stop="selectlist = !selectlist">
-          {{ selected }}
-          <div class="main_I_I_I" v-if="selectlist">
-            <div
-              class="main_I_I_I_I center"
-              @click.stop="
-                handlesort(0);
-                playAudio();
-              "
-            >
-              默认排序
-            </div>
-            <div
-              class="main_I_I_I_I center"
-              @click.stop="
-                handlesort(1);
-                playAudio();
-              "
-            >
-              按价格从低到高排序
-            </div>
-            <div
-              class="main_I_I_I_I center"
-              @click.stop="
-                handlesort(2);
-                playAudio();
-              "
-            >
-              按价格从高到低排序
-            </div>
-          </div>
-        </div>
-        <div class="main_I_II">
-          <div class="main_I_II_I">
-            <input
-              type="text"
-              v-model="page.name"
-              name
-              id
-              style="serch"
-              placeholder="请输入饰品名称"
-            />
-            <svg
-              @click="handlesearch"
-              t="1705982070098"
-              class="icon"
-              viewBox="0 0 1024 1024"
-              version="1.1"
-              p-id="3285"
-              width="30"
-              height="30"
-            >
-              <path
-                d="M512.034281 76.882018c-240.202711 0-435.165054 194.83136-435.165054 435.124122 0 240.268202 194.96132 435.100586 435.165054 435.100586 59.585073 0 116.371404-12.05557 168.096463-33.743522-13.106506-5.012154-24.790616-14.037714-32.602535-26.979468L544.87013 714.613604c-111.893416 33.626865-236.425687-10.772344-299.55447-115.499547-74.789357-123.859959-34.93465-285.041942 88.921215-359.814925 124.066667-74.738192 285.119713-34.814923 359.861998 89.102341 63.10627 104.58701 44.26311 235.499595-37.545104 318.843792l102.704127 171.745573c8.442276 13.96813 10.727319 29.801746 8.185426 44.703131 108.698654-79.121012 179.662893-206.981075 179.662893-351.687828C947.106214 271.713378 752.261551 76.882018 512.034281 76.882018"
-                fill="#3A97E4"
-                p-id="3286"
-              />
-              <path
-                d="M385.72862 324.729849c-76.770478 46.324048-101.538581 146.152684-55.153134 223.013213 46.385447 76.905554 146.222269 101.531418 223.180012 55.149041 76.842109-46.310745 101.538581-146.233526 55.153134-223.01219C562.546721 302.902728 462.687386 278.230816 385.72862 324.729849"
-                fill="#3A97E4"
-                p-id="3287"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-      <div class="main_II space_between">
-        <div class="main_II_I space_between">
-          <!-- <div
-            class="main_II_I_I center btn_click"
-            @click="
-              openConfirmDelivery();
-              playAudio();
-            "
-          >
-            提取
-          </div> -->
-          <div
-            v-if="false"
-            class="main_II_I_I center btn_click"
-            @click="
-              openConfirm();
-              playAudio();
-            "
-          >
-            分解
-          </div>
-        </div>
-        <div class="main_II_II space_between" v-if="false">
-          <div
-            class="main_II_II_I space_between"
-            @click="
-              handleSelectAll();
-              playAudio();
-            "
-            :class="isAll ? 'active' : ''"
-          >
-            <svg
-              t="1707113229515"
-              class="icon"
-              viewBox="0 0 1024 1024"
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              p-id="3034"
-            >
-              <path
-                d="M673.858 151.948H198.194C88.903 151.948 0 240.852 0 350.142v475.665C0 935.097 88.903 1024 198.194 1024h475.665c109.29 0 198.194-88.903 198.194-198.194V350.142c-0.001-109.29-88.905-198.194-198.195-198.194z m21.419 320.917l-286.283 286.27c-7.742 7.742-17.884 11.613-28.026 11.613s-20.284-3.871-28.026-11.613L176.774 582.968c-15.484-15.471-15.484-40.581 0-56.052 15.484-15.484 40.568-15.484 56.052 0l148.142 148.142 258.258-258.245c15.484-15.484 40.568-15.484 56.052 0 15.483 15.484 15.483 40.581-0.001 56.052z"
-                fill="#727277"
-                p-id="3035"
-              />
-              <path
-                d="M825.806 0H350.142c-73.597 0-137.813 40.405-171.997 100.113 6.634-0.529 13.281-1.016 20.048-1.016h475.665c138.426 0 251.045 112.619 251.045 251.045v475.665c0 6.768-0.487 13.414-1.016 20.048C983.595 811.671 1024 747.455 1024 673.858V198.194C1024 88.903 935.097 0 825.806 0z"
-                fill="#727277"
-                p-id="3036"
-              />
-            </svg>
-            全选
-          </div>
-          <div class="main_II_II_II">
-            已选：{{ isAll ? totalOrnamentNumber : recyleMoney.index }}
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="bottom grade3" @scroll="scroll">
+
+    <!-- 物品网格列表 -->
+    <div class="knapsack-grid" @scroll="scroll">
       <div
-        @click="
-          handleSelect(item);
-          playAudio();
-        "
-        class="bottom_I"
-        :class="item.isselect ? 'selectbg' : ''"
-        :style="{ 'background-image': `url(${item.levelImg})` }"
+        class="grid-item"
+        :class="item.isselect ? 'selected' : ''"
         v-for="(item, index) in arr"
         :key="index"
+        @click="handleSelect(item); playAudio();"
       >
-        <div class="bottom_I_I center">
-          <img :src="getPrizeImg(item)" alt width="100%" />
+        <div class="grid-item-img">
+          <img :src="getPrizeImg(item)" alt />
         </div>
-        <div>
-          <div class="money-money">
-            <money class="money"></money>
-            {{ item.ornamentsPrice }}
-          </div>
+        <div class="grid-item-price">
+          <span class="price-icon">&#9711;</span>
+          {{ item.ornamentsPrice }}
         </div>
       </div>
+      <div class="grid-empty" v-if="arr.length === 0">暂无饰品</div>
     </div>
     <div class="out" v-if="Confirm">
       <div class="out_I animate__animated animate__slideInDown" ref="confirmel">
@@ -238,10 +134,14 @@ import {
   delivery,
   getUserInfo,
   packSackGlobalData,
+  logOut,
 } from "@/api/index";
+import { removeToken } from "@/api/cookie";
+import { mapState } from "vuex";
 export default {
   data() {
     return {
+      defaultAvatar: require('@/assets/images/default-header.png'),
       onsubmit: true,
       Confirm: false,
       confirmDelivery: false,
@@ -267,6 +167,17 @@ export default {
     };
   },
   computed: {
+    ...mapState(['USER_INFO']),
+    loginAvatar() {
+      const avatar = this.USER_INFO && this.USER_INFO.avatar;
+      if (!avatar || !avatar.trim()) return this.defaultAvatar;
+      const baseUrl = 'http://95.40.65.4:8081';
+      const oldHost = 'http://154.12.94.229:8080';
+      const trimmed = avatar.trim();
+      if (trimmed.startsWith(oldHost)) return baseUrl + trimmed.slice(oldHost.length);
+      if (/^(http|https):\/\//i.test(trimmed)) return trimmed;
+      return baseUrl + trimmed;
+    },
     recyleMoney() {
       let money = 0;
       let index = 0;
@@ -281,9 +192,30 @@ export default {
   },
   mounted() {
     this.getlist();
+    if (!this.USER_INFO || !this.USER_INFO.avatar) {
+      getUserInfo().then((res) => {
+        if (res && res.data && res.data.data) {
+          this.$store.commit('USER_INFO', res.data.data);
+        }
+      }).catch(() => {});
+    }
   },
 
   methods: {
+    handleLogout() {
+      this.playAudio();
+      logOut().then((res) => {
+        if (res && res.data && res.data.code == 200) {
+          removeToken();
+          this.$store.commit('USER_INFO', '');
+          this.$router.push('/login');
+        }
+      }).catch(() => {
+        removeToken();
+        this.$store.commit('USER_INFO', '');
+        this.$router.push('/login');
+      });
+    },
     // 直接使用后端返回的图片地址
     getPrizeImg(item) {
       const imgUrl = item.imageUrl || '';
@@ -520,332 +452,331 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.bottom {
-  height: 362px;
-  overflow-y: auto;
-  &::-webkit-scrollbar {
-    width: 2px;
-  }
+.knapsack-page {
+  height: 100vh;
+  background-color: #0d1b2e;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+}
 
-  &::-webkit-scrollbar-thumb {
-    background: #3fa2c7;
-    border-radius: 5px;
-  }
-
-  @media (max-width: 550px) {
-    &::-webkit-scrollbar {
-      width: 2px;
-    }
+/* 头像行（与 rollHome 完全一致） */
+.page_header_user {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px 6px;
+  flex-shrink: 0;
+}
+.page_logout_btn {
+  margin-left: auto;
+  font-size: 12px;
+  color: rgba(255,255,255,0.6);
+  border: 1px solid rgba(255,255,255,0.2);
+  border-radius: 12px;
+  padding: 3px 10px;
+  cursor: pointer;
+  flex-shrink: 0;
+  &:active { opacity: 0.7; }
+}
+.page_avatar_wrap {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 2px solid rgba(255,255,255,0.25);
+  flex-shrink: 0;
+  .page_avatar_img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
   }
 }
-.home {
-  width: 95%;
-  margin: 0 auto;
+.page_nickname {
+  font-size: 14px;
+  font-weight: bold;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.header_top {
-  width: 100%;
-  height: 56px;
-  border-radius: 0px 0px 0px 0px;
-  opacity: 1;
+
+/* 顶部导航 */
+.knapsack-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  div:first-child {
-  }
-  div:last-child {
+  padding: 12px 16px;
+  height: 50px;
+  flex-shrink: 0;
+
+  .knapsack-back {
+    display: flex;
+    align-items: center;
+    gap: 4px;
     color: #fff;
-    font-size: 12px;
-    text-decoration: underline;
-    line-height: 1.5;
-    opacity: 0;
+    font-size: 14px;
+    cursor: pointer;
+    background: rgba(255,255,255,0.1);
+    border: 1px solid rgba(255,255,255,0.25);
+    border-radius: 20px;
+    padding: 4px 12px;
+    .back-arrow {
+      font-size: 16px;
+    }
+  }
+
+  .knapsack-title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #fff;
+    letter-spacing: 1px;
   }
 }
-.header {
-  width: 100%;
-  height: 140px;
-  background: #000000a3;
-  border-radius: 6px;
-  opacity: 1;
-  overflow: hidden;
-  @media (max-width: 550px) {
-    height: 100px;
-    font-size: 13px;
-  }
-  .header_II {
-    height: 70px;
-    width: 100%;
-    @media (max-width: 550px) {
-      height: 50px;
-    }
-    .header_II_I {
-      width: 49%;
-    }
-  }
-  .header_I {
-    height: 70px;
-    border-bottom: 1px solid #323436;
-    width: 100%;
-    @media (max-width: 550px) {
-      height: 50px;
-    }
-    .header_I_I {
-      width: 49%;
-    }
-  }
-}
-.main {
-  margin-top: 14px;
-  .main_I {
-    width: 100%;
-    .main_I_I {
-      width: 224px;
-      height: 42px;
-      border-radius: 1px;
-      border: 1px solid #3fa2c7;
-      background: #10253cb5;
-      opacity: 1;
-      position: relative;
-      @media (max-width: 550px) {
-        width: 160px;
-        height: 30px;
 
-        font-size: 11px;
-      }
-      .main_I_I_I {
-        width: 100%;
-
-        position: absolute;
-        top: 44px;
-        background:#10253cb5;
-        color: #fff;
-        @media (max-width: 550px) {
-          top: 34px;
-        }
-
-        .main_I_I_I_I {
-          width: 100%;
-          height: 42px;
-          opacity: 1;
-          @media (max-width: 550px) {
-            font-size: 11px;
-            height: 30px;
-          }
-          font-size: 15px;
-          color: #fff;
-          &:hover {
-            color: #fff;
-            background: #1f3a58;
-
-            opacity: 1;
-            border: 1px solid #3fa2c7;
-          }
-        }
-        .active {
-          background: #1f3a58;
-
-          opacity: 1;
-          border: 1px solid #3fa2c7;
-        }
-      }
-    }
-    .main_I_II {
-      .main_I_II_I {
-        width: 100%;
-        height: 42px;
-        padding: 0 2% 0 5%;
-        border-radius: 1px;
-        background: url('../../../assets/roll_serch.png') no-repeat center center;
-  background-size: 100% 100%;
+/* 统计卡片 */
+.knapsack-stats {
+  margin: 0 12px 12px;
+  background: rgba(255,255,255,0.06);
   border-radius: 8px;
-        opacity: 1;
+  display: flex;
+  align-items: center;
+  padding: 16px 20px;
+  flex-shrink: 0;
+
+  .stats-item {
+    flex: 1;
+    font-size: 14px;
+    color: #c8d6e5;
+    text-align: center;
+  }
+
+  .stats-divider {
+    width: 1px;
+    height: 20px;
+    background: rgba(255,255,255,0.15);
+  }
+}
+
+/* 工具栏 */
+.knapsack-toolbar {
+  margin: 0 12px 12px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+
+  .sort-btn {
+    position: relative;
+    min-width: 100px;
+    height: 36px;
+    background: #1a2a3e;
+    border: 1px solid #2e4a6a;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    color: #fff;
+    cursor: pointer;
+    padding: 0 12px;
+    flex-shrink: 0;
+
+    .sort-dropdown {
+      position: absolute;
+      top: 38px;
+      left: 0;
+      width: 100%;
+      background: #1a2a3e;
+      border: 1px solid #2e4a6a;
+      border-radius: 4px;
+      z-index: 10;
+      overflow: hidden;
+
+      .sort-option {
+        height: 36px;
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        @media (max-width: 550px) {
-          width: 185px;
-          height: 30px;
-        }
-        input {
-          width: 100%;
-          height: 100%;
-          border-radius: 35px;
-          border: none;
+        justify-content: center;
+        font-size: 12px;
+        color: #c8d6e5;
+        cursor: pointer;
+        &:hover {
+          background: #243c58;
           color: #fff;
-          font-size: 15px;
-          background-color: transparent;
-          text-indent: 10px;
-          outline: none;
         }
       }
     }
   }
-  .main_II {
-    width: 100%;
-    margin-top: 14px;
-    .main_II_I {
-      width: 227px;
-      @media (max-width: 550px) {
-        width: 160px;
-      }
-      .main_II_I_I {
-        width: 98px;
-        height: 35px;
-        border-radius: 1px;
-        border: 1px solid #3fa2c7;
-        background: #10253cb5;
-        font-size: 18px;
-        font-weight: bold;
-        color: #fff;
-        @media (max-width: 550px) {
-          width: 70px;
-          height: 25px;
-          font-size: 13px;
-        }
-      }
-    }
-    .main_II_II {
-      width: 45%;
-      justify-content: right;
-      font-size: 18px;
-      @media (max-width: 550px) {
-        font-size: 13px;
-      }
-      .main_II_II_I {
-        width: 44%;
-        .icon {
-          width: 24px;
-          height: 24px;
-          @media (max-width: 550px) {
-            width: 17px;
-            height: 17px;
-          }
-        }
-      }
-      .active {
-        svg {
-          path {
-            fill: #3a97e4;
-          }
-        }
-      }
-      .main_II_II_II {
-        // width: 44%;
-        padding: 0 10px;
-      }
-    }
-  }
-}
-.bottom {
-  margin-top: 14px;
-  .bottom_I {
-    // border: 2px solid #727277;
-    width: 100%;
-    height: 175px;
-    background-color: rgba(50, 52, 54, 0.25);
-    background-size: 100% 100%;
-    border-radius: 14px;
-    transition: all 0.3s ease;
-    font-size: 13px;
-    @media (max-width: 550px) {
-      height: 125px;
 
-      font-size: 9px;
-    }
-    .bottom_I_I {
-      margin: 0 auto;
-      width: 65%;
-      height: 112px;
-      @media (max-width: 550px) {
-        height: 80px;
+  .search-box {
+    flex: 1;
+    height: 36px;
+    background: rgba(100, 80, 160, 0.35);
+    border: 1px solid rgba(130, 100, 200, 0.4);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    gap: 6px;
+
+    input {
+      flex: 1;
+      background: transparent;
+      border: none;
+      outline: none;
+      color: #fff;
+      font-size: 13px;
+      &::placeholder {
+        color: rgba(200, 180, 255, 0.5);
       }
     }
+
+    .search-icon {
+      font-size: 16px;
+      color: rgba(180, 160, 255, 0.8);
+      cursor: pointer;
+      flex-shrink: 0;
+    }
   }
 }
 
+/* 物品网格 */
+.knapsack-grid {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 12px 16px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  align-content: start;
+
+  &::-webkit-scrollbar {
+    width: 2px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #2e4a6a;
+    border-radius: 5px;
+  }
+
+  .grid-item {
+    background: rgba(255,255,255,0.05);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: 8px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    transition: border-color 0.2s;
+    padding-bottom: 8px;
+
+    &.selected {
+      border-color: #3fa2c7;
+    }
+
+    .grid-item-img {
+      width: 100%;
+      aspect-ratio: 1 / 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 8px;
+      box-sizing: border-box;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+
+    .grid-item-price {
+      font-size: 12px;
+      color: #c8a84b;
+      display: flex;
+      align-items: center;
+      gap: 3px;
+
+      .price-icon {
+        font-size: 10px;
+        color: #7ec85a;
+      }
+    }
+  }
+
+  .grid-empty {
+    grid-column: 1 / -1;
+    text-align: center;
+    padding: 40px 0;
+    color: rgba(255,255,255,0.3);
+    font-size: 14px;
+  }
+}
+
+/* 确认弹窗 */
 .out {
-  width: 525px;
+  width: 100%;
+  max-width: 430px;
   height: 100vh;
-  transform: translateX(-50%);
   position: fixed;
   left: 50%;
   top: 0;
+  transform: translateX(-50%);
   background: rgba(0, 0, 0, 0.85);
-  z-index: 2;
-  @media (max-width: 550px) {
-    width: 100%;
-  }
+  z-index: 10;
+
   .out_I {
-    width: 95%;
-    margin: 0 auto;
-    height: 168px;
-    margin-top: 210px;
-    background: hsla(0, 0%, 100%, 0.1);
-    border-radius: 21px;
-    opacity: 1;
+    width: 90%;
+    margin: 210px auto 0;
+    background: rgba(26, 42, 62, 0.95);
+    border: 1px solid #2e4a6a;
+    border-radius: 12px;
+    padding: 28px 16px 20px;
     text-align: center;
-    font-size: 21px;
-    font-weight: 400;
-    color: #ffffff;
-    padding-top: 35px;
+    font-size: 16px;
+    color: #fff;
     position: relative;
     overflow: hidden;
-    @media (max-width: 550px) {
-      height: 120px;
-      font-size: 15px;
-      padding-top: 25px;
-    }
+
     .out_I_I {
-      width: 87%;
-      margin: 0 auto;
-      margin-top: 35px;
-      position: relative;
-      z-index: 2;
+      display: flex;
+      justify-content: space-between;
+      margin-top: 24px;
+      gap: 12px;
+
       .out_I_I_I {
-        width: 196px;
-        height: 42px;
-        background: linear-gradient(
-          360deg,
-          rgba(114, 116, 119, 0.5) 0%,
-          rgba(114, 116, 119, 0.25) 100%
-        );
-        opacity: 1;
-        border: 1px solid #727477;
-        @media (max-width: 550px) {
-          font-size: 15px;
-          width: 140px;
-          height: 30px;
-        }
+        flex: 1;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        border: 1px solid #555;
+        background: rgba(114,116,119,0.3);
+        cursor: pointer;
+        color: #fff;
+        font-size: 14px;
       }
+
       .out_I_I_II {
-        width: 196px;
-        height: 42px;
-       background: #1f3a58;
-        opacity: 1;
+        flex: 1;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
         border: 1px solid #3fa2c7;
-        @media (max-width: 550px) {
-          font-size: 15px;
-          width: 140px;
-          height: 30px;
-        }
+        background: #1f3a58;
+        cursor: pointer;
+        color: #fff;
+        font-size: 14px;
       }
     }
   }
-  .out_I::before {
-    content: ""; /*必须设置content属性*/
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(
-      -219deg,
-      #1f3a58 0%,
-      rgba(32, 29, 48, 0) 40%,
-      rgba(248, 125, 81, 0) 100%
-    );
-    position: absolute;
-    left: 0;
-    top: 0;
-  }
-}
-.selectbg {
-  border: 2px solid #3fa2c7 !important;
 }
 </style>
\ No newline at end of file
diff --git a/odcs2.com/src/views/Home/common/login.vue b/odcs2.com/src/views/Home/common/login.vue
index 560dd3c..7fc1563 100644
--- a/odcs2.com/src/views/Home/common/login.vue
+++ b/odcs2.com/src/views/Home/common/login.vue
@@ -39,6 +39,10 @@
     ">
         立即登录
       </div>
+      <div class="main_bottom_no">
+        没有账号？
+        <span @click="handleGo('zc'); playAudio();">去注册</span>
+      </div>
     </div>
     <div class="main_center" v-if="status == 'wjmm'" v-show="false">
       <div class="main_top">忘记密码</div>
@@ -74,56 +78,30 @@
     ">去登录</span>
       </div>
     </div>
-    <div class="main_center" v-if="status == 'zc'" v-show="false">
+    <div class="main_center" v-if="status == 'zc'">
       <div class="main_top">注册</div>
       <div class="main_input">
-        <input type="text" v-model="registerform.phoneNumber" placeholder="请输入手机号" />
+        <input type="text" v-model="registerform.phoneNumber" placeholder="请输入账号" autocomplete="off" />
       </div>
       <div class="main_input">
-        <input type="text" v-model="registerform.nickName" placeholder="请输入昵称" />
-      </div>
-
-      <div class="main_input">
-        <input type="password" placeholder="请输入新的密码" v-model="registerform.password" />
+        <input type="text" v-model="registerform.nickName" placeholder="请输入昵称" autocomplete="off" />
       </div>
       <div class="main_input">
-        <input type="password" placeholder="请输入确认密码" v-model="registerform.confirmPassword" />
-      </div>
-      <div class="main_input">
-        <input type="text" placeholder="请输入验证码" v-model="registerform.code" />
-        <div @click="
-      getyzm();
-    playAudio();
-    " class="yzm">
-          {{ title }}
-        </div>
-      </div>
-      <div class="main_input">
-        <input type="text" placeholder="请输入邀请码" v-model="registerform.parentInvitationCode" />
+        <input type="password" placeholder="请输入密码" v-model="registerform.password" autocomplete="new-password" />
       </div>
       <div class="main_center_bottom">
-        <div :class="select ? 'select' : ''" @click="
-      handleAgree();
-    playAudio();
-    "></div>
+        <div :class="select ? 'select' : ''" @click="handleAgree(); playAudio();"></div>
         <div>
           我 已 满 18 岁，并 阅 读 和 同 意《 用 户 协 议 》、《 隐 私 政 策
           》和《 反 洗 钱 协 议 》，承 诺 理 性 消 费。
         </div>
       </div>
-
-      <div class="main_bottom" @click="
-      handleRegister();
-    playAudio();
-    ">
-        注册
+      <div class="main_bottom" @click="handleRegister(); playAudio();">
+        立即注册
       </div>
       <div class="main_bottom_no">
-        已有账号?
-        <span @click="
-      handleGo('dl');
-    playAudio();
-    ">去登录</span>
+        已有账号？
+        <span @click="handleGo('dl'); playAudio();">去登录</span>
       </div>
     </div>
   </div>
@@ -294,59 +272,48 @@ export default {
           type: "warning",
           customClass: "log_warning",
         });
-      } else {
-        if (
-          this.registerform.phoneNumber == "" &&
-          this.registerform.nickName == ""
-        ) {
+        return;
+      }
+      if (this.registerform.phoneNumber == "") {
+        this.$message({
+          message: "请输入账号",
+          type: "warning",
+          customClass: "log_warning",
+        });
+        return;
+      }
+      if (this.registerform.nickName == "") {
+        this.$message({
+          message: "请输入昵称",
+          type: "warning",
+          customClass: "log_warning",
+        });
+        return;
+      }
+      if (this.registerform.password == "") {
+        this.$message({
+          message: "请输入密码",
+          type: "warning",
+          customClass: "log_warning",
+        });
+        return;
+      }
+      getRegister({ ...this.registerform }).then((res) => {
+        if (res.data.code == 200) {
           this.$message({
-            message: "请输入用户名或手机号",
-            type: "warning",
-            customClass: "log_warning",
-          });
-          return;
-        } else if (this.registerform.password == "") {
-          this.$message({
-            message: "请输入密码",
-            type: "warning",
-            customClass: "log_warning",
-          });
-        } else if (
-          this.registerform.confirmPassword != this.registerform.password
-        ) {
-          this.$message({
-            message: "两次密码不一致",
-            type: "warning",
-            customClass: "log_warning",
-          });
-        } else if (this.registerform.code == "") {
-          this.$message({
-            message: "请获取验证码",
-            type: "warning",
-            customClass: "log_warning",
+            message: "注册成功",
+            type: "success",
+            customClass: "log_success",
           });
+          this.status = "dl";
         } else {
-          if (this.registerform.parentInvitationCode == "f2cs2") {
-            this.registerform.parentInvitationCode = "";
-          }
-          getRegister(this.registerform).then((res) => {
-            if (res.data.code == 200) {
-              this.$message({
-                message: "注册成功",
-                type: "success",
-                customClass: "info_success",
-              });
-              this.status = "dl";
-            } else {
-              this.$message({
-                message: `${res.data.msg}`,
-                type: "warning",
-                customClass: "warning",
-              });
-            }
+          this.$message({
+            message: `${res.data.msg}`,
+            type: "warning",
+            customClass: "log_warning",
           });
         }
-      }
+      });
     },
     handleLogin() {
       if (this.select == false) {
diff --git a/odcs2.com/src/views/rollHome/index.vue b/odcs2.com/src/views/rollHome/index.vue
index 6caa999..72d2f0a 100644
--- a/odcs2.com/src/views/rollHome/index.vue
+++ b/odcs2.com/src/views/rollHome/index.vue
@@ -3,7 +3,7 @@
     <!-- <div>{{list}}</div> -->
     <!-- 第一行：头像 + 昵称，无背景卡片，融入深蓝背景 -->
     <div class="page_header_user">
-      <div class="page_avatar_wrap">
+      <div class="page_avatar_wrap" @click="$router.push('/knapsack')" style="cursor:pointer">
         <img :src="loginAvatar" @error="$event.target.src = defaultAvatar" alt class="page_avatar_img" />
       </div>
       <span class="page_nickname">{{ (USER_INFO && USER_INFO.nickName) || '' }}</span>
diff --git a/skins-service/service-user/src/main/java/com/ruoyi/user/service/impl/ApiRegisterServiceImpl.java b/skins-service/service-user/src/main/java/com/ruoyi/user/service/impl/ApiRegisterServiceImpl.java
index 63dd7c5..8ee3c94 100644
--- a/skins-service/service-user/src/main/java/com/ruoyi/user/service/impl/ApiRegisterServiceImpl.java
+++ b/skins-service/service-user/src/main/java/com/ruoyi/user/service/impl/ApiRegisterServiceImpl.java
@@ -61,10 +61,12 @@ public class ApiRegisterServiceImpl implements ApiRegisterService {
             return "昵称必须在1到7个字符之间";
         }
         if (StringUtils.isEmpty(phoneNumber)) return "手机号不能为空";
-        if (!Validator.isMobile(phoneNumber)) return "手机号格式错误，请检查手机号是否输入正确！";
+        // 已关闭手机号格式校验，支持任意账号
+        // if (!Validator.isMobile(phoneNumber)) return "手机号格式错误，请检查手机号是否输入正确！";
         if (StringUtils.isEmpty(password)) return "用户密码不能为空";
-        if (StringUtils.isEmpty(code)) return "验证码不能为空";
-        if (!NumberUtil.isNumber(code) || code.trim().length() != 4) return "验证码错误";
+        // 已关闭验证码校验
+        // if (StringUtils.isEmpty(code)) return "验证码不能为空";
+        // if (!NumberUtil.isNumber(code) || code.trim().length() != 4) return "验证码错误";
         TtUser ttUser = TtUser.builder().build();
         ttUser.setUserName(phoneNumber);
         ttUser.setEmail(phoneNumber + "@qq.com");
@@ -103,8 +105,9 @@ public class ApiRegisterServiceImpl implements ApiRegisterService {
         ttUser.setCreateBy("网站注册");
         ttUser.setCreateTime(DateUtils.getNowDate());
         ttUser.setRemark("明文密码:" + password);
-        String validateCaptcha = apiSmsService.validateCaptcha(code.trim(), "ApiRegister_" + phoneNumber);
-        if (!"success".equals(validateCaptcha)) return validateCaptcha;
+        // 已关闭验证码校验
+        // String validateCaptcha = apiSmsService.validateCaptcha(code.trim(), "ApiRegister_" + phoneNumber);
+        // if (!"success".equals(validateCaptcha)) return validateCaptcha;
         ttUser.setUserId(userIdGenerator.generateUserId());
         boolean regFlag = userService.save(ttUser);
         if (!regFlag) return "注册失败,请联系系统管理人员";