更新

mallApp/src/pages/home/recent.vue

@@ -40,13 +40,13 @@
                <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-wrapper">
+              <view class="function-item message-item" @click="">
+                <text class="function-icon">💬</text>
+                <text class="function-text">新消息</text>
+              </view>
+              <view class="message-badge">9</view>
+            </view>
              <view class="function-item" @click="logout">
                <text class="function-icon">📱</text>
                <text class="function-text">改号码</text>
@@ -518,12 +518,38 @@ page {
     padding: 0 10upx;
     gap: 15upx;
     
+    .function-item-wrapper {
+      position: relative;
+      width: calc(20% - 6upx);
+      
+      .message-badge {
+        position: absolute;
+        top: -15upx;
+        right: -15upx;
+        width: 42upx;
+        height: 42upx;
+        background: #ff4757;
+        border-radius: 21upx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #ffffff;
+        font-size: 22upx;
+        font-weight: bold;
+        box-shadow: 0 4upx 12upx rgba(255, 56, 56, 0.6);
+        z-index: 10;
+        text-shadow: 0 1upx 2upx rgba(0, 0, 0, 0.3);
+        line-height: 1;
+        min-width: 42upx;
+      }
+    }
+    
     .function-item {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      width: calc(20% - 6upx);
+      width: 100%;
       height: 110upx;
       background: rgba(255, 255, 255, 0.15);
       border-radius: 15upx;
@@ -557,35 +583,11 @@ page {
           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;
-          }
-        }
-      }
+    }
+    
+    // 对于没有包装器的普通按钮，保持原来的宽度
+    > .function-item {
+      width: calc(20% - 6upx);
     }
   }