From 6c23726e093e20eb7f86dbf871508bd4df73bc14 Mon Sep 17 00:00:00 2001
From: zzc <1761997216@qq.com>
Date: Tue, 24 Feb 2026 15:30:03 +0800
Subject: [PATCH] fix: index page

---
 pages/index/index.vue | 256 +++++++++++++++++++++---------------------
 1 file changed, 126 insertions(+), 130 deletions(-)

diff --git a/pages/index/index.vue b/pages/index/index.vue
index ec2ac79..39f6723 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -20,14 +20,6 @@
           >
         </view>
       </view>
-      <view class="header-actions">
-        <view class="action-btn" @tap="onNoticeTap">
-          <uni-icons type="notification" size="20" color="#333" />
-        </view>
-        <view class="action-btn" @tap="onWalletTap">
-          <uni-icons type="wallet" size="20" color="#333" />
-        </view>
-      </view>
     </view>
 
     <!-- 主卡片 (Lucky Status) -->
@@ -96,7 +88,7 @@
     </view>
 
     <!-- 大家都在用 -->
-    <view class="section-container">
+    <view class="section-container compact-section">
       <view class="section-header">
         <view class="title-left-decor"></view>
         <uni-icons
@@ -107,28 +99,38 @@
         />
         <text class="section-title">大家都在用</text>
       </view>
-      <view class="feature-grid">
-        <view class="feature-card" @tap="navTo('/pages/avatar/index')">
-          <view class="icon-wrap yellow-bg">
-            <image
-              src="/static/icon/guashi.png"
-              mode="aspectFit"
-              class="feature-icon"
-            />
+      <view class="feature-row">
+        <view class="feature-item" @tap="navTo('/pages/avatar/index')">
+          <view class="left-content">
+            <view class="icon-wrap yellow-bg">
+              <image
+                src="/static/icon/guashi.png"
+                mode="aspectFit"
+                class="feature-icon"
+              />
+            </view>
+            <view class="text-content">
+              <text class="feature-name">制作今日头像</text>
+              <text class="feature-desc">限定 · 如意边框</text>
+            </view>
           </view>
-          <text class="feature-name">制作今日头像</text>
-          <text class="feature-desc">限定 · 如意边框</text>
+          <uni-icons type="right" size="14" color="#ccc" />
         </view>
-        <view class="feature-card" @tap="navTo('/pages/wallpaper/index')">
-          <view class="icon-wrap blue-bg">
-            <image
-              src="/static/icon/bizhi.png"
-              mode="aspectFit"
-              class="feature-icon"
-            />
+        <view class="feature-item" @tap="navTo('/pages/wallpaper/index')">
+          <view class="left-content">
+            <view class="icon-wrap blue-bg">
+              <image
+                src="/static/icon/bizhi.png"
+                mode="aspectFit"
+                class="feature-icon"
+              />
+            </view>
+            <view class="text-content">
+              <text class="feature-name">好运祝福壁纸</text>
+              <text class="feature-desc">高清 · 福气盈门</text>
+            </view>
           </view>
-          <text class="feature-name">好运祝福壁纸</text>
-          <text class="feature-desc">高清 · 福气盈门</text>
+          <uni-icons type="right" size="14" color="#ccc" />
         </view>
       </view>
     </view>
@@ -138,40 +140,34 @@
       <view class="section-header">
         <view class="title-left-decor"></view>
         <text class="section-title">排行榜单</text>
-        <view class="header-right">
-          <uni-icons type="refresh" size="14" color="#999" />
-          <text class="refresh-text">每小时更新</text>
+        <view class="rank-tabs-mini">
+          <view
+            class="rank-tab-mini"
+            :class="{ active: currentTab === 'all' }"
+            @tap="switchTab('all')"
+            >全部</view
+          >
+          <view
+            class="rank-tab-mini"
+            :class="{ active: currentTab === 'frame' }"
+            @tap="switchTab('frame')"
+            >头像框</view
+          >
+          <view
+            class="rank-tab-mini"
+            :class="{ active: currentTab === 'card' }"
+            @tap="switchTab('card')"
+            >贺卡</view
+          >
+          <view
+            class="rank-tab-mini"
+            :class="{ active: currentTab === 'wallpaper' }"
+            @tap="switchTab('wallpaper')"
+            >壁纸</view
+          >
         </view>
       </view>
 
-      <!-- Tabs -->
-      <view class="rank-tabs">
-        <view
-          class="rank-tab"
-          :class="{ active: currentTab === 'all' }"
-          @tap="switchTab('all')"
-          >全部</view
-        >
-        <view
-          class="rank-tab"
-          :class="{ active: currentTab === 'frame' }"
-          @tap="switchTab('frame')"
-          >头像框</view
-        >
-        <view
-          class="rank-tab"
-          :class="{ active: currentTab === 'card' }"
-          @tap="switchTab('card')"
-          >贺卡</view
-        >
-        <view
-          class="rank-tab"
-          :class="{ active: currentTab === 'wallpaper' }"
-          @tap="switchTab('wallpaper')"
-          >壁纸</view
-        >
-      </view>
-
       <!-- Ranking List -->
       <view class="rank-list">
         <view
@@ -346,19 +342,19 @@ onShareTimeline(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 32rpx;
+  margin-bottom: 24rpx;
 
   .user-info {
     display: flex;
     align-items: center;
 
     .user-avatar {
-      width: 88rpx;
-      height: 88rpx;
+      width: 64rpx;
+      height: 64rpx;
       border-radius: 50%;
-      border: 4rpx solid #fff;
+      border: 2rpx solid #fff;
       box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
-      margin-right: 20rpx;
+      margin-right: 16rpx;
     }
 
     .user-texts {
@@ -366,34 +362,18 @@ onShareTimeline(() => {
       flex-direction: column;
 
       .year-info {
-        font-size: 24rpx;
+        font-size: 20rpx;
         color: #999;
-        margin-bottom: 4rpx;
+        margin-bottom: 2rpx;
       }
 
       .user-name {
-        font-size: 32rpx;
+        font-size: 26rpx;
         font-weight: bold;
         color: #333;
       }
     }
   }
-
-  .header-actions {
-    display: flex;
-    gap: 20rpx;
-
-    .action-btn {
-      width: 72rpx;
-      height: 72rpx;
-      background: #fff;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
-    }
-  }
 }
 
 /* 主卡片 (Lucky Status) */
@@ -611,76 +591,92 @@ onShareTimeline(() => {
 }
 
 /* 大家都在用 */
-.feature-grid {
+.compact-section {
+  .section-header {
+    margin-bottom: 20rpx;
+  }
+}
+
+.feature-row {
   display: flex;
-  justify-content: space-between;
-  gap: 24rpx;
+  flex-direction: column;
+  gap: 20rpx;
 
-  .feature-card {
-    flex: 1;
+  .feature-item {
     background: #fff;
-    border-radius: 32rpx;
-    padding: 32rpx;
+    border-radius: 24rpx;
+    padding: 24rpx 32rpx;
     display: flex;
-    flex-direction: column;
+    justify-content: space-between;
     align-items: center;
-    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
 
-    .icon-wrap {
-      width: 96rpx;
-      height: 96rpx;
-      border-radius: 24rpx;
+    .left-content {
       display: flex;
       align-items: center;
-      justify-content: center;
-      margin-bottom: 20rpx;
 
-      &.yellow-bg {
-        background: #fff8e1;
-      }
-      &.blue-bg {
-        background: #e3f2fd;
+      .icon-wrap {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 24rpx;
+
+        &.yellow-bg {
+          background: #fff8e1;
+        }
+        &.blue-bg {
+          background: #e3f2fd;
+        }
+
+        .feature-icon {
+          width: 40rpx;
+          height: 40rpx;
+        }
       }
 
-      .feature-icon {
-        width: 56rpx;
-        height: 56rpx;
+      .text-content {
+        display: flex;
+        flex-direction: column;
+
+        .feature-name {
+          font-size: 28rpx;
+          font-weight: bold;
+          color: #333;
+          margin-bottom: 4rpx;
+        }
+
+        .feature-desc {
+          font-size: 22rpx;
+          color: #999;
+        }
       }
     }
-
-    .feature-name {
-      font-size: 28rpx;
-      font-weight: bold;
-      color: #333;
-      margin-bottom: 8rpx;
-    }
-
-    .feature-desc {
-      font-size: 20rpx;
-      color: #999;
-    }
   }
 }
 
 /* 排行榜单 */
-.rank-tabs {
+.rank-tabs-mini {
   display: flex;
-  margin-bottom: 24rpx;
-  gap: 16rpx;
+  margin-left: auto; /* Push to right */
+  background: #eee;
+  border-radius: 30rpx;
+  padding: 4rpx;
 
-  .rank-tab {
-    padding: 10rpx 24rpx;
-    background: #fff;
-    border-radius: 30rpx;
-    font-size: 24rpx;
+  .rank-tab-mini {
+    padding: 8rpx 20rpx;
+    border-radius: 26rpx;
+    font-size: 22rpx;
     color: #666;
     transition: all 0.3s;
-    border: 2rpx solid transparent;
 
     &.active {
-      background: #a85a5a;
-      color: #fff;
-      box-shadow: 0 4rpx 12rpx rgba(168, 90, 90, 0.3);
+      background: #fff;
+      color: #333;
+      font-weight: bold;
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
     }
   }
 }