个人中心

mallApp/src/pages/home/recent.vue

@@ -16,7 +16,7 @@
       <view class="main-content" v-if="!$util.isEmpty(list.data)">
         <!-- 个人中心版块 -->
         <view class="profile-section">
-          <view class="profile-header">
+          <view class="profile-header" @click="">
             <view class="avatar-container">
               <image class="avatar" src="/static/images/default-avatar.png" mode="aspectFill" />
             </view>
@@ -24,6 +24,9 @@
               <text class="username">刘小明</text>
               <text class="user-id">ID 31548</text>
             </view>
+            <view class="arrow-container">
+              <text class="arrow-icon">〉</text>
+            </view>
           </view>
           
           <view class="function-grid">
@@ -35,14 +38,17 @@
               <text class="function-icon">📍</text>
               <text class="function-text">地址</text>
             </view>
+            <view class="function-item message-item" @click="">
+              <view class="icon-container">
+                <text class="function-icon">💬</text>
+                <view class="message-dot"></view>
+              </view>
+              <text class="function-text">新消息</text>
+            </view>
             <view class="function-item" @click="">
               <text class="function-icon">📱</text>
               <text class="function-text">改号码</text>
             </view>
-            <view class="function-item" @click="logout()">
-              <text class="function-icon">🚪</text>
-              <text class="function-text">退出</text>
-            </view>
           </view>
         </view>
         
@@ -74,7 +80,7 @@
             </view>
 
             <!-- 店铺基本信息 -->
-            <view class="shop-header" @click.stop="bug(item)">
+            <view class="shop-header">
               <view class="shop-avatar">
                 <image class="shop-logo" :src="item.smallAvatar" mode="aspectFill" />
               </view>
@@ -359,6 +365,14 @@ page {
     justify-content: flex-start;
     margin-bottom: 35upx;
     padding: 0 10upx;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border-radius: 10upx;
+    
+    &:active {
+      background: rgba(255, 255, 255, 0.1);
+      transform: scale(0.98);
+    }
     
     .avatar-container {
       margin-right: 30upx;
@@ -397,20 +411,40 @@ page {
         line-height: 1.2;
       }
     }
+    
+    .arrow-container {
+      margin-left: 20upx;
+      flex-shrink: 0;
+      
+      .arrow-icon {
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 28upx;
+        font-weight: 300;
+        text-shadow: 0 1upx 2upx rgba(0, 0, 0, 0.1);
+        transition: all 0.2s ease;
+      }
+    }
+    
+    &:active .arrow-icon {
+      color: #ffffff;
+      transform: translateX(4upx);
+    }
   }
   
   .function-grid {
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
     padding: 0 10upx;
+    gap: 15upx;
     
     .function-item {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      width: 120upx;
+      width: calc(20% - 6upx);
       height: 110upx;
       background: rgba(255, 255, 255, 0.15);
       border-radius: 15upx;
@@ -438,6 +472,42 @@ page {
         text-shadow: 0 1upx 2upx rgba(0, 0, 0, 0.1);
         line-height: 1;
       }
+      
+      // 没有图标的按钮样式调整
+      &:not(.message-item):not(:has(.function-icon)) {
+        .function-text {
+          margin-top: 0;
+        }
+      }
+      
+      // 新消息按钮特殊样式
+      &.message-item {
+        .icon-container {
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-bottom: 8upx;
+          
+          .function-icon {
+            margin-bottom: 0;
+          }
+          
+          .message-dot {
+            position: absolute;
+            top: -5upx;
+            right: -10upx;
+            width: 24upx;
+            height: 24upx;
+            background: #ff3838;
+            border-radius: 12upx;
+            border: 3upx solid #ffffff;
+            box-shadow: 0 4upx 12upx rgba(255, 56, 56, 0.6), 0 0 0 4upx rgba(255, 56, 56, 0.2);
+            animation: pulse 1.5s infinite;
+            z-index: 10;
+          }
+        }
+      }
     }
   }
 }
@@ -521,29 +591,29 @@ page {
       background: #f8f9fa;
       border-radius: 12upx;
       
-      .balance-label {
-        font-size: 28upx;
-        color: #666;
-      }
-      
-      .balance-amount {
-        font-size: 32upx;
-        font-weight: 600;
-        
-        &.negative {
-          color: #ff4757;
-        }
-        
-        &.positive {
-          color: #2ed573;
-        }
-      }
-      
-      .balance-action {
-        font-size: 24upx;
-        color: #667eea;
-        text-decoration: underline;
-      }
+             .balance-label {
+         font-size: 30upx;
+         color: #666;
+       }
+       
+       .balance-amount {
+         font-size: 34upx;
+         font-weight: 600;
+         
+         &.negative {
+           color: #ff4757;
+         }
+         
+         &.positive {
+           color: #2ed573;
+         }
+       }
+       
+       .balance-action {
+         font-size: 26upx;
+         color: #667eea;
+         text-decoration: underline;
+       }
     }
   }
   
@@ -574,7 +644,7 @@ page {
       }
       
       &.tertiary {
-        background: linear-gradient(135deg, #26de81 0%, #20bf6b 100%);
+        background: #ffb3d9;
       }
       
       .btn-text {
@@ -605,7 +675,7 @@ page {
       }
       
       .record-text {
-        font-size: 24upx;
+        font-size: 26upx;
         color: #666;
       }
     }
@@ -695,4 +765,20 @@ page {
     color: #999;
   }
 }
+
+// 动画效果
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
 </style>