我的页面 更新

pages/mine/index.vue

@@ -1,5 +1,15 @@
 <template>
   <view class="mine-container">
+    <!-- 顶部渐变背景 -->
+    <view class="top-gradient">
+    <!-- 页面背景图 -->
+    <view class="page-bg">
+      <image src="/static/mine/minebg.png" class="bg-image" mode="aspectFit"></image>
+    </view>
+    </view>
+
+
+
     <!-- 自定义导航栏 -->
     <view class="custom-navbar" :style="{paddingTop: statusBarHeight + 'px'}">
       <view class="navbar-content">
@@ -8,7 +18,7 @@
     </view>
 
     <!-- 用户登录/注册卡片 -->
-    <view class="login-card" :style="{marginTop: navbarHeight + 'rpx'}" @click="handleLoginCardClick">
+    <view class="login-card" :style="{marginTop: navbarHeight+50 + 'rpx'}" @click="handleLoginCardClick">
       <view class="login-card-content">
         <view class="avatar-section">
           <view v-if="!avatar" class="avatar-placeholder">
@@ -22,9 +32,6 @@
           <view v-if="!name" class="login-desc">登录后获取更多功能信息</view>
         </view>
       </view>
-      <view class="login-card-bg">
-        <!-- 背景装饰图案 -->
-      </view>
     </view>
 
     <!-- 第一个菜单卡片 -->
@@ -32,7 +39,7 @@
       <view class="menu-item" @click="handleToInfo">
         <view class="menu-item-left">
           <view class="menu-icon-wrapper account-icon">
-            <view class="iconfont icon-user menu-icon"></view>
+            <image src="/static/mine/account.png" class="menu-icon-image" mode="aspectFit"></image>
           </view>
           <text class="menu-text">账号信息</text>
         </view>
@@ -42,7 +49,7 @@
       <view class="menu-item" @click="handleToOrderRevenue">
         <view class="menu-item-left">
           <view class="menu-icon-wrapper revenue-icon">
-            <text class="revenue-symbol">¥</text>
+            <image src="/static/mine/order.png" class="menu-icon-image" mode="aspectFit"></image>
           </view>
           <text class="menu-text">订单收益</text>
         </view>
@@ -55,7 +62,7 @@
       <view class="menu-item" @click="handleClearCache">
         <view class="menu-item-left">
           <view class="menu-icon-wrapper cache-icon">
-            <view class="iconfont icon-clean menu-icon"></view>
+            <image src="/static/mine/local.png" class="menu-icon-image" mode="aspectFit"></image>
           </view>
           <text class="menu-text">本地缓存</text>
         </view>
@@ -64,7 +71,7 @@
       <view class="menu-item" @click="handleAbout">
         <view class="menu-item-left">
           <view class="menu-icon-wrapper about-icon">
-            <view class="iconfont icon-help menu-icon"></view>
+            <image src="/static/mine/about.png" class="menu-icon-image" mode="aspectFit"></image>
           </view>
           <text class="menu-text">关于我们</text>
         </view>
@@ -74,7 +81,7 @@
       <view class="menu-item" @click="handleLogout">
         <view class="menu-item-left">
           <view class="menu-icon-wrapper logout-icon">
-            <view class="iconfont icon-logout menu-icon"></view>
+            <image src="/static/mine/exit.png" class="menu-icon-image" mode="aspectFit"></image>
           </view>
           <text class="menu-text">退出登录</text>
         </view>
@@ -83,6 +90,17 @@
 
     <!-- 底部导航栏 -->
     <bar-navigasi-handap></bar-navigasi-handap>
+
+    <!-- 退出登录确认对话框 -->
+    <view v-if="showLogoutDialog" class="logout-dialog-mask" @click="closeLogoutDialog">
+      <view class="logout-dialog" @click.stop>
+        <view class="dialog-title">确认退出该账号吗?</view>
+        <view class="dialog-buttons">
+          <view class="dialog-btn logout-btn" @click="confirmLogout">退出登录</view>
+          <view class="dialog-btn cancel-btn" @click="closeLogoutDialog">取消</view>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -96,7 +114,8 @@
     data() {
       return {
         name: this.$store.state.user.name,
-        statusBarHeight: 0
+        statusBarHeight: 0,
+        showLogoutDialog: false
       }
     },
     onLoad() {
@@ -150,10 +169,15 @@
           this.$tab.reLaunch('/pages/login')
           return
         }
-        this.$modal.confirm('确定注销并退出系统吗？').then(() => {
-          this.$store.dispatch('LogOut').then(() => {}).finally(() => {
-            this.$tab.reLaunch('/pages/index')
-          })
+        this.showLogoutDialog = true
+      },
+      closeLogoutDialog() {
+        this.showLogoutDialog = false
+      },
+      confirmLogout() {
+        this.showLogoutDialog = false
+        this.$store.dispatch('LogOut').then(() => {}).finally(() => {
+          this.$tab.reLaunch('/pages/index')
         })
       }
     }
@@ -170,6 +194,35 @@
     min-height: 100vh;
     padding-bottom: 120rpx;
     background-color: #f5f5f5;
+    position: relative;
+
+    // 顶部渐变背景
+    .top-gradient {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 800rpx;
+      background: linear-gradient(180deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 197, 253, 0.05) 50%, transparent 100%);
+      z-index: 0;
+      pointer-events: none;
+    }
+
+    // 页面背景图
+    .page-bg {
+      position: fixed;
+      right: -60rpx;
+      pointer-events: none;
+      width: 400rpx;
+      height: 600rpx;
+      z-index: 0;
+
+      .bg-image {
+        width: 100%;
+        height: 100%;
+        opacity: 0.6;
+      }
+    }
 
     // 自定义导航栏
     .custom-navbar {
@@ -179,12 +232,14 @@
       right: 0;
       z-index: 999;
       background-color: transparent;
+      pointer-events: none;
 
       .navbar-content {
         display: flex;
         align-items: center;
         justify-content: center;
         height: 88rpx;
+        pointer-events: auto;
 
         .navbar-title {
           font-size: 36rpx;
@@ -196,21 +251,27 @@
 
     // 登录卡片
     .login-card {
+      min-height: 200rpx;
       position: relative;
       margin: 0 30rpx 40rpx 30rpx;
-      padding: 40rpx 30rpx;
-      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+      padding: 30rpx 30rpx;
+      background-color: rgba(255, 255, 255, 0.4);
       border-radius: 24rpx;
-      overflow: hidden;
+      overflow: visible;
       box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+      z-index: 10;
 
       .login-card-content {
         display: flex;
-        align-items: center;
         position: relative;
         z-index: 2;
 
         .avatar-section {
+          position: relative;
+          width: 160rpx;
+          height: 160rpx;
+          flex-shrink: 0;
+
           .avatar-placeholder {
             width: 120rpx;
             height: 120rpx;
@@ -219,6 +280,9 @@
             display: flex;
             align-items: center;
             justify-content: center;
+            position: absolute;
+            top: -100rpx;
+            left: 0;
 
             .avatar-icon {
               font-size: 60rpx;
@@ -227,15 +291,20 @@
           }
 
           .avatar-image {
-            width: 120rpx;
-            height: 120rpx;
+            width: 160rpx;
+            height: 160rpx;
             border-radius: 50%;
+            position: absolute;
+            top: -80rpx;
+            left: 0;
           }
         }
 
         .login-info {
           margin-left: 30rpx;
           flex: 1;
+          display: flex;
+          flex-direction: column;
 
           .login-text {
             font-size: 36rpx;
@@ -262,29 +331,28 @@
         position: absolute;
         right: -60rpx;
         top: -60rpx;
-        width: 240rpx;
-        height: 240rpx;
-        background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(147, 197, 253, 0.15) 100%);
-        border-radius: 50%;
-        z-index: 1;
+        width:400rpx;
+        height: 600rpx;
         opacity: 0.6;
       }
     }
 
     // 菜单卡片
     .menu-card {
+      position: relative;
       margin: 0 30rpx 30rpx 30rpx;
-      background-color: #ffffff;
+      background-color: rgba(255, 255, 255, 0.4);
       border-radius: 24rpx;
       overflow: hidden;
       box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+      z-index: 10;
 
       .menu-item {
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 32rpx 30rpx;
-        background-color: #ffffff;
+        background-color: rgba(255, 255, 255, 0.4);
 
         .menu-item-left {
           display: flex;
@@ -299,53 +367,11 @@
             align-items: center;
             justify-content: center;
             margin-right: 24rpx;
+            background-color: transparent;
 
-            &.account-icon {
-              background-color: #e3f2fd;
-
-              .menu-icon {
-                color: #1976d2;
-              }
-            }
-
-            &.revenue-icon {
-              background-color: #fff3e0;
-              position: relative;
-
-              .revenue-symbol {
-                font-size: 32rpx;
-                font-weight: 600;
-                color: #ff9800;
-              }
-            }
-
-            &.cache-icon {
-              background-color: #f3e5f5;
-
-              .menu-icon {
-                color: #9c27b0;
-              }
-            }
-
-            &.about-icon {
-              background-color: #e8f5e9;
-
-              .menu-icon {
-                color: #4caf50;
-              }
-            }
-
-            &.logout-icon {
-              background-color: #ffebee;
-
-              .menu-icon {
-                color: #f44336;
-              }
-            }
-
-            .menu-icon {
-              font-size: 36rpx;
-              color: #333333;
+            .menu-icon-image {
+              width: 40rpx;
+              height: 40rpx;
             }
           }
 
@@ -367,5 +393,64 @@
         margin: 0 30rpx;
       }
     }
+
+    // 退出登录对话框
+    .logout-dialog-mask {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.5);
+      z-index: 9999;
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+    }
+
+    .logout-dialog {
+      width: 100%;
+      background-color: #ffffff;
+      border-radius: 32rpx 32rpx 0 0;
+      padding: 40rpx 30rpx;
+      padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
+      box-sizing: border-box;
+
+      .dialog-title {
+        font-size: 24rpx;
+        font-weight: 400;
+        color: #666666;
+        text-align: center;
+        margin-bottom: 60rpx;
+        line-height: 1.5;
+      }
+
+      .dialog-buttons {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .dialog-btn {
+          width: 100%;
+          height: 100rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 34rpx;
+          font-weight: 400;
+          background-color: transparent;
+          border: none;
+
+          &.logout-btn {
+            color: #EF2C54;
+            margin-bottom: 40rpx;
+          }
+
+          &.cancel-btn {
+            color: #333333;
+          }
+        }
+      }
+    }
   }
 </style>