feat: 钱包

src/router/system.js

@@ -4,7 +4,7 @@ export const systemRoutes = [
   {
     path: "/",
     name: "main",
-    redirect: "login",
+    redirect: "wallet",
     component: LAYOUT,
     children: [
       {

src/views/wallet/index.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="container">
-      <div class="bg-img"></div>
+      <!-- <div class="bg-img"></div> -->
+      <svg-icon name="wallet-bg" class="bg-img" />
       <div class="user-info-body">
         <div class="user-info-lf">
           <van-image
@@ -26,17 +27,17 @@
         </div>
       </div>
       <div class="amount">
-        <div>
+        <div class="amount-item-box">
           <div>Total assets</div>
           <div class="amount-item">
             <div class="item-text">
               <svg-icon class="my" style="width: 28px; height: 28px;" name="my" />
               <div>{{isShow?'2,536.00':'****'}}</div>
             </div>
-            <svg-icon style="width: 16px; height: 16px;" :name="isShow?'eyes':'seyes'" @click="isShow = !isShow"/>
+            <svg-icon  style="width: 16px; height: 16px;" :name="isShow?'eyes':'seyes'" @click="isShow = !isShow"/>
           </div>
         </div>
-        <svg-icon style="width: 24px; height: 24px;" name="right" @click="goDetail"/>
+        <svg-icon style="width: 24px; height: 24px; margin-right: 27px;" name="right" @click="goDetail"/>
       </div>
       <div class="card-box">
         <div class="box-cont" @click="goToPage('exchange')">
@@ -180,12 +181,11 @@
     display: flex;
     flex-direction: column;
     height: calc(100vh - 50px);
-    .bg-img{
-      background: url('@/assets/img/wallet-bg.png') no-repeat;
-      background-size: 100% 100%;
-      height: 284px;
+    .bg-img{ 
+      height: 286px;
       width: 100%;
       position: absolute;
+      left: 0;
       z-index: -1;
     }
     .user-info-body{
@@ -237,15 +237,12 @@
     }
     .amount{ 
       height: 102px;
-      background-color: rgb(242 242 242 / 31%);
-      backdrop-filter: blur(2px);  
-      -webkit-backdrop-filter: blur(2px);  
+      background-color: rgba(242, 242, 242, 0.2);
+      backdrop-filter: blur(3px);  
+      -webkit-backdrop-filter: blur(3px);  
       border-radius: 15px;
-      box-shadow: 0 10px -1px rgba(247, 247, 247, 0.663);
-      border: 1px solid rgb(242 242 242 / 31%);
-      // background-size: 100% 100%;
       margin: 0 17px 23px;
-      padding: 21px 21px 27px 27px;
+      box-shadow:0 7px 10px #15277031;
       box-sizing: border-box;
       display: flex;
       align-items: center;
@@ -254,6 +251,27 @@
       font-weight: 400;
       font-size: 15px;
       color: #FFFFFF;
+      &:before { 
+        height: calc(100% - 4px);
+        width: calc(100% - 4px);
+        content: "";
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        padding: 2px; /* 边框宽度 */
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.1) 50%,  rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.6) 100%);//linear-gradient(135deg, #ffffff64, #ffffff2e); /* 渐变方向可调 */
+        -webkit-mask: 
+          linear-gradient(#fff 0 0) content-box, 
+          linear-gradient(#fff 0 0);
+        -webkit-mask-composite: xor;
+        mask-composite: exclude;
+        border-radius: 15px; /* 必须和父元素一致 */
+        pointer-events: none; /* 避免遮挡点击 */
+
+      }
+      .amount-item-box{
+        margin: 21px 21px 27px 27px;
+      }
       .amount-item{
         margin-top: 7px;
         font-weight: 600;
@@ -271,6 +289,8 @@
         }
       }
     }
+
+  
     .card-box{
       background: #FFFFFF;
       box-shadow: 0px 4px 8px -2px rgba(25,75,137,0.25);