diff --git a/pages/index/index.vue b/pages/index/index.vue
index f145fdb..ec2ac79 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,8 +1,10 @@
 <template>
-  <view class="home-container" :style="{
-        height: navBarHeight + 'px',
-        paddingTop: statusBarHeight + 'px',
-      }">
+  <view
+    class="home-container"
+    :style="{
+      paddingTop: statusBarHeight + 12 + 'px',
+    }"
+  >
     <!-- 顶部用户信息栏 -->
     <view class="header-section">
       <view class="user-info">
@@ -12,246 +14,363 @@
           mode="aspectFill"
         />
         <view class="user-texts">
-          <text class="greeting-text">{{ greetingText }}</text>
-          <text class="user-name">{{ userInfo.nickName || '新春福星' }}</text>
+          <text class="year-info">2026 岁在丙午</text>
+          <text class="user-name"
+            >您好，{{ userInfo.nickName || "新春福星" }}</text
+          >
+        </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>
 
-    <!-- 红色 Banner 区域 (Hero) -->
-    <view v-if="!showheroSection" class="hero-section">
-      <view class="hero-card">
-        <view class="hero-tag">节日专题</view>
-        <view class="hero-content">
-          <text class="hero-title">除夕倒计时 · 团圆家宴</text>
-          <text class="hero-subtitle">定制您的专属新春祝福寄语</text>
+    <!-- 主卡片 (Lucky Status) -->
+    <view class="main-card">
+      <view class="card-bg-decor"></view>
+      <view class="card-top">
+        <view class="lucky-status">
+          <text class="status-label">LUCKY STATUS</text>
+          <text class="status-value"
+            >{{ luckyScore }}<text class="percent">%</text></text
+          >
         </view>
-        <image
-          class="hero-bg-decor"
-          src="https://file.lihailezzc.com/resource/58c8d19e5f2d9c958a7b8b9f44b8c3e3.png"
-          mode="aspectFill"
+        <view class="date-box">
+          <view class="date-row">
+            <uni-icons type="calendar" size="14" color="#8b5a5a" />
+            <text class="date-text"
+              >{{ lunarDate.year }}年-{{ lunarDate.month
+              }}{{ lunarDate.day }}</text
+            >
+          </view>
+          <view class="yi-ji-row">
+            <text class="label">宜：</text
+            ><text class="content">{{ lunarDate.yi }}</text>
+          </view>
+          <view class="yi-ji-row">
+            <text class="label">忌：</text
+            ><text class="content">{{ lunarDate.ji }}</text>
+          </view>
+        </view>
+      </view>
+
+      <view class="card-center">
+        <view class="fire-circle">
+          <image
+            src="/static/icon/fire.png"
+            mode="aspectFit"
+            class="fire-icon"
+          />
+        </view>
+        <view class="lucky-color-tag"> 幸运色：{{ luckyColor }} </view>
+      </view>
+
+      <view class="card-bottom">
+        <button class="open-lucky-btn" @tap="onOpenLucky">
+          <uni-icons
+            type="star-filled"
+            size="16"
+            color="#fff"
+            style="margin-right: 8rpx"
+          />
+          开启今日好运
+        </button>
+        <view class="progress-section">
+          <view class="progress-info">
+            <text>已开启 2026 鸿运周期</text>
+            <text>{{ progressDays }} / 15</text>
+          </view>
+          <view class="progress-bar-bg">
+            <view
+              class="progress-bar-fill"
+              :style="{ width: (progressDays / 15) * 100 + '%' }"
+            ></view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 大家都在用 -->
+    <view class="section-container">
+      <view class="section-header">
+        <view class="title-left-decor"></view>
+        <uni-icons
+          type="heart-filled"
+          size="18"
+          color="#d81e06"
+          style="margin-right: 8rpx"
         />
+        <text class="section-title">大家都在用</text>
       </view>
-    </view>
-
-    <!-- 今日问候 -->
-    <view class="daily-greeting-bar" @tap="onDailyGreetingTap">
-      <view class="bar-left">
-        <view class="icon-box calendar-icon">📅</view>
-        <text class="bar-text">今日问候 · 传递好心情</text>
-      </view>
-      <text class="bar-arrow">›</text>
-    </view>
-
-    <!-- 今日运势 -->
-    <view class="fortune-card">
-      <view class="fortune-left">
-        <view class="fortune-icon-box">福</view>
-        <view class="fortune-texts">
-          <text class="fortune-label">今日运势</text>
-          <text class="fortune-value">大吉 · 万事如意</text>
+      <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>
+          <text class="feature-name">制作今日头像</text>
+          <text class="feature-desc">限定 · 如意边框</text>
+        </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>
+          <text class="feature-name">好运祝福壁纸</text>
+          <text class="feature-desc">高清 · 福气盈门</text>
         </view>
       </view>
-      <view class="fortune-btn" @tap="onFortuneTap">立即抽签</view>
     </view>
 
-    <!-- 快捷标签 -->
-    <!-- <view class="quick-tags">
-      <view
-        v-for="(tag, index) in quickTags"
-        :key="index"
-        class="tag-item"
-        @tap="onTagTap(tag)"
-      >
-        <text class="tag-icon">{{ tag.icon }}</text>
-        <text class="tag-text">{{ tag.text }}</text>
+    <!-- 排行榜单 -->
+    <view class="section-container">
+      <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>
       </view>
-    </view> -->
 
-    <!-- 排行榜 Tab -->
-    <view class="ranking-section">
-      <view class="tabs-header">
+      <!-- Tabs -->
+      <view class="rank-tabs">
         <view
-          v-for="(tab, index) in tabs"
-          :key="index"
-          class="tab-item"
-          :class="{ active: currentTab === index }"
-          @tap="switchTab(index)"
+          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
         >
-          {{ tab.name }}
-        </view>
       </view>
 
-      <view class="ranking-list">
+      <!-- Ranking List -->
+      <view class="rank-list">
         <view
+          class="rank-item"
           v-for="(item, index) in rankingList"
-          :key="index"
-          class="ranking-item"
-          :class="'rank-' + (index + 1)"
-          @tap="onItemTap(item)"
+          :key="item.id"
+          @tap="onRankItemTap(item)"
         >
-          <view class="rank-badge-wrap" v-if="index < 3">
-            <view class="rank-badge">Top {{ index + 1 }}</view>
+          <view class="rank-num" :class="'rank-' + (index + 1)">{{
+            index + 1
+          }}</view>
+          <image :src="item.thumb" mode="aspectFill" class="rank-thumb" />
+          <view class="rank-info">
+            <view class="rank-title-row">
+              <text class="rank-title">{{ item.title }}</text>
+            </view>
+            <view class="rank-meta">
+              <view class="tag-hot" v-if="item.isHot">HOT</view>
+              <text class="usage-count">{{ item.usageCount }} 人在用</text>
+            </view>
           </view>
-          
-          <view class="item-content">
-            <image class="item-thumb" :src="item.thumb" mode="aspectFill" />
-            <view class="item-info">
-              <text class="item-title">{{ item.title }}</text>
-              <view class="item-usage">
-                <text class="fire-icon">🔥</text>
-                <text>{{ item.usageCount }} 人已使用</text>
-              </view>
-            </view>
-            <view class="item-action">
-              <button class="use-btn" @tap.stop="onUseTap(item)">立即使用</button>
-            </view>
+          <view class="rank-likes">
+            <uni-icons type="heart-filled" size="16" color="#a85a5a" />
+            <text class="likes-num">{{ item.likes }}</text>
           </view>
         </view>
       </view>
+
+      <view class="rank-footer"> 查看前 10 名 </view>
     </view>
-    
-    <!-- 底部占位，防止被 TabBar 遮挡 -->
+
+    <!-- Floating Share Button -->
+    <button class="float-share-btn" open-type="share">
+      <uni-icons type="upload" size="18" color="#d81e06" />
+      <text>分享今日运势</text>
+    </button>
+
     <view class="bottom-spacer"></view>
   </view>
 </template>
 
 <script setup>
 import { ref, onMounted } from "vue";
-import { getBavBarHeight } from "@/utils/system";
-import { onShow, onLoad } from "@dcloudio/uni-app";
+import { getStatusBarHeight } from "@/utils/system";
+import { onShareAppMessage, onShareTimeline, onShow } from "@dcloudio/uni-app";
 import { useUserStore } from "@/stores/user";
-import { getTitleBarHeight } from "@/utils/system";
+import { getRecommendList } from "@/api/system";
 
 const userStore = useUserStore();
+const statusBarHeight = ref(getStatusBarHeight());
 
-const showheroSection = ref(false);
+const userInfo = ref(userStore?.userInfo || {});
+const luckyScore = ref(98);
+const luckyColor = ref("赤金朱红");
+const progressDays = ref(1);
+const currentTab = ref("all");
 
-// 用户信息
-const userInfo = ref(userStore?.userInfo || {
-  avatarUrl: "",
-  nickName: "哎萌",
+// 模拟农历数据
+const lunarDate = ref({
+  year: "2026",
+  month: "正月",
+  day: "初一",
+  yi: "开光、祈福、求嗣",
+  ji: "安葬、动土",
 });
-const greetingText = ref("早上好");
 
-// 快捷标签数据
-const quickTags = ref([
-  { text: "开心", icon: "😊" },
-  { text: "暴富", icon: "🧧" },
-  { text: "团圆", icon: "🏠" },
-  { text: "好运", icon: "✨" },
-]);
-
-// Tab 数据
-const tabs = ref([
-  { name: "热门头像框", type: "avatar" },
-  { name: "热门模板", type: "template" },
-  { name: "热门壁纸", type: "wallpaper" },
-]);
-const currentTab = ref(0);
-
-// 排行榜数据
-const rankingList = ref([
-  {
-    title: "马到成功金边头像框",
-    usageCount: "12.5w",
-    thumb: "https://file.lihailezzc.com/resource/avatar_frame_horse_gold.png",
-    id: 1,
-  },
-  {
-    title: "龙年大吉祥云框",
-    usageCount: "8.2w",
-    thumb: "https://file.lihailezzc.com/resource/avatar_frame_dragon_cloud.png",
-    id: 2,
-  },
-  {
-    title: "瑞雪兆丰年背景",
-    usageCount: "5.7w",
-    thumb: "https://file.lihailezzc.com/resource/wallpaper_snow_red.png",
-    id: 3,
-  },
-  // 更多模拟数据...
-]);
-
-const navBarHeight = ref(64);
-const statusBarHeight = ref(20);
+const rankingList = ref([]);
 
 onMounted(() => {
-  const systemInfo = uni.getSystemInfoSync();
-  statusBarHeight.value = systemInfo.statusBarHeight || 20;
-  navBarHeight.value = statusBarHeight.value + getTitleBarHeight();
+  fetchRankingData();
 });
 
-const switchTab = (index) => {
-  currentTab.value = index;
-  // TODO: 切换数据逻辑
+onShow(() => {
+  if (userStore.userInfo) {
+    userInfo.value = userStore.userInfo;
+  }
+});
+
+const fetchRankingData = async () => {
+  // 模拟数据或调用 API
+  // 实际项目中可以调用 getRecommendList 并根据 currentTab 筛选
+  // 这里先使用 Mock 数据展示 UI
+  rankingList.value = [
+    {
+      id: 1,
+      title: "龙马精神限定框",
+      thumb: "https://file.lihailezzc.com/resource/avatar_frame_horse_gold.png",
+      usageCount: "2.4w",
+      likes: "12.8k",
+      isHot: true,
+      type: "frame",
+    },
+    {
+      id: 2,
+      title: "锦绣江山动态壁纸",
+      thumb: "https://file.lihailezzc.com/resource/wallpaper_snow_red.png",
+      usageCount: "1.8w",
+      likes: "9.2k",
+      isHot: false,
+      type: "wallpaper",
+    },
+    {
+      id: 3,
+      title: "万事大吉贺卡模板",
+      thumb: "https://file.lihailezzc.com/resource/card_template_1.png",
+      usageCount: "9.5k",
+      likes: "4.1k",
+      isHot: false,
+      type: "card",
+    },
+  ];
 };
 
-const onDailyGreetingTap = () => {
-  uni.showToast({ title: "今日问候", icon: "none" });
+const switchTab = (tab) => {
+  currentTab.value = tab;
+  // TODO: 根据 tab 筛选或重新请求数据
+  // 此处仅做 UI 演示，实际需对接筛选逻辑
 };
 
-const onFortuneTap = () => {
+const onNoticeTap = () => {
+  uni.showToast({ title: "暂无新消息", icon: "none" });
+};
+
+const onWalletTap = () => {
+  uni.navigateTo({ url: "/pages/mine/vip" });
+};
+
+const onOpenLucky = () => {
   uni.navigateTo({ url: "/pages/fortune/index" });
 };
 
-const onTagTap = (tag) => {
-  uni.showToast({ title: "点击了 " + tag.text, icon: "none" });
+const navTo = (url) => {
+  uni.navigateTo({ url });
 };
 
-const onItemTap = (item) => {
-  console.log("Item tapped", item);
+const onRankItemTap = (item) => {
+  if (item.type === "frame") {
+    uni.navigateTo({ url: `/pages/avatar/index?id=${item.id}` });
+  } else if (item.type === "card") {
+    uni.switchTab({ url: "/pages/make/index" });
+  } else if (item.type === "wallpaper") {
+    uni.navigateTo({ url: `/pages/wallpaper/index` });
+  }
 };
 
-const onUseTap = (item) => {
-  uni.navigateTo({
-    url: `/pages/avatar/index?id=${item.id}`,
-  });
-};
+onShareAppMessage(() => {
+  return {
+    title: "开启你的2026新春好运！",
+    path: "/pages/index/index",
+  };
+});
 
-onLoad(() => {
-  // 初始化逻辑
+onShareTimeline(() => {
+  return {
+    title: "开启你的2026新春好运！",
+  };
 });
 </script>
 
 <style lang="scss" scoped>
 .home-container {
   min-height: 100vh;
-  background-color: #f5f7fa;
-  padding-bottom: 20rpx;
+  background-color: #fbfbf9; /* 柔和的米色背景 */
+  padding-left: 32rpx;
+  padding-right: 32rpx;
+  padding-bottom: 120rpx;
   box-sizing: border-box;
 }
 
-/* 顶部用户信息栏 */
+/* 顶部用户信息 */
 .header-section {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 20rpx 30rpx;
-  background-color: #fff;
-  
+  margin-bottom: 32rpx;
+
   .user-info {
     display: flex;
     align-items: center;
-    
+
     .user-avatar {
-      width: 80rpx;
-      height: 80rpx;
+      width: 88rpx;
+      height: 88rpx;
       border-radius: 50%;
+      border: 4rpx solid #fff;
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
       margin-right: 20rpx;
-      border: 2rpx solid #f0f0f0;
     }
-    
+
     .user-texts {
       display: flex;
       flex-direction: column;
-      
-      .greeting-text {
+
+      .year-info {
         font-size: 24rpx;
-        color: #666;
+        color: #999;
         margin-bottom: 4rpx;
       }
-      
+
       .user-name {
         font-size: 32rpx;
         font-weight: bold;
@@ -259,361 +378,443 @@ onLoad(() => {
       }
     }
   }
-  
+
   .header-actions {
     display: flex;
-    gap: 24rpx;
-    
+    gap: 20rpx;
+
     .action-btn {
       width: 72rpx;
       height: 72rpx;
-      background-color: #f5f7fa;
+      background: #fff;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
-      
-      .icon {
-        font-size: 36rpx;
-      }
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
     }
   }
 }
 
-/* 红色 Banner 区域 */
-.hero-section {
-  padding: 20rpx 30rpx;
-  background-color: #fff;
-  padding-bottom: 40rpx;
-  border-bottom-left-radius: 40rpx;
-  border-bottom-right-radius: 40rpx;
-  
-  .hero-card {
-    position: relative;
-    width: 100%;
-    height: 320rpx;
-    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
-    border-radius: 32rpx;
-    overflow: hidden;
-    box-shadow: 0 10rpx 30rpx rgba(211, 47, 47, 0.3);
-    padding: 40rpx;
-    box-sizing: border-box;
+/* 主卡片 (Lucky Status) */
+.main-card {
+  position: relative;
+  width: 100%;
+  height: 640rpx;
+  background: linear-gradient(180deg, #fcece8 0%, #f7dcd6 100%);
+  border-radius: 40rpx;
+  padding: 40rpx;
+  box-sizing: border-box;
+  box-shadow: 0 20rpx 40rpx rgba(189, 87, 87, 0.15);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+  margin-bottom: 48rpx;
+
+  .card-bg-decor {
+    position: absolute;
+    top: -50rpx;
+    right: -50rpx;
+    width: 300rpx;
+    height: 300rpx;
+    background: radial-gradient(
+      circle,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(255, 255, 255, 0) 70%
+    );
+    border-radius: 50%;
+  }
+
+  .card-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    z-index: 2;
+
+    .lucky-status {
+      display: flex;
+      flex-direction: column;
+
+      .status-label {
+        font-size: 22rpx;
+        color: #a85a5a;
+        letter-spacing: 2rpx;
+        font-weight: 600;
+        margin-bottom: 8rpx;
+      }
+
+      .status-value {
+        font-size: 88rpx;
+        font-weight: bold;
+        color: #a85a5a;
+        line-height: 1;
+
+        .percent {
+          font-size: 40rpx;
+          margin-left: 4rpx;
+        }
+      }
+    }
+
+    .date-box {
+      background: rgba(255, 255, 255, 0.6);
+      border-radius: 20rpx;
+      padding: 20rpx;
+      backdrop-filter: blur(10rpx);
+
+      .date-row {
+        display: flex;
+        align-items: center;
+        margin-bottom: 12rpx;
+
+        .date-text {
+          font-size: 24rpx;
+          color: #8b5a5a;
+          font-weight: bold;
+          margin-left: 8rpx;
+        }
+      }
+
+      .yi-ji-row {
+        font-size: 20rpx;
+        margin-bottom: 4rpx;
+        color: #666;
+
+        .label {
+          color: #999;
+        }
+        .content {
+          color: #555;
+        }
+      }
+    }
+  }
+
+  .card-center {
     display: flex;
     flex-direction: column;
+    align-items: center;
     justify-content: center;
-    
-    .hero-bg-decor {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      width: 100%;
-      height: 100%;
-      opacity: 0.2;
-      z-index: 1;
-    }
-    
-    .hero-tag {
-      position: absolute;
-      top: 40rpx;
-      left: 40rpx;
-      background-color: #ffca28;
-      color: #7f0000;
-      font-size: 22rpx;
-      font-weight: bold;
-      padding: 6rpx 16rpx;
-      border-radius: 8rpx;
-      z-index: 2;
-    }
-    
-    .hero-content {
-      margin-top: 40rpx;
-      z-index: 2;
-      
-      .hero-title {
-        font-size: 44rpx;
-        font-weight: bold;
-        color: #fff;
-        display: block;
-        margin-bottom: 12rpx;
-        text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
-      }
-      
-      .hero-subtitle {
-        font-size: 26rpx;
-        color: rgba(255, 255, 255, 0.8);
-      }
-    }
-  }
-}
+    flex: 1;
+    z-index: 2;
 
-/* 今日问候条 */
-.daily-greeting-bar {
-  margin: -30rpx 30rpx 0;
-  background-color: #fff;
-  border-radius: 40rpx;
-  padding: 24rpx 30rpx;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.03);
-  position: relative;
-  z-index: 10;
-  
-  .bar-left {
-    display: flex;
-    align-items: center;
-    
-    .icon-box {
-      margin-right: 20rpx;
-      font-size: 36rpx;
-    }
-    
-    .bar-text {
-      font-size: 30rpx;
-      font-weight: 600;
-      color: #333;
-    }
-  }
-  
-  .bar-arrow {
-    font-size: 36rpx;
-    color: #ccc;
-    font-weight: bold;
-  }
-}
-
-/* 今日运势卡片 */
-.fortune-card {
-  margin: 24rpx 30rpx;
-  background-color: #fff;
-  border-radius: 32rpx;
-  padding: 30rpx;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.03);
-  
-  .fortune-left {
-    display: flex;
-    align-items: center;
-    
-    .fortune-icon-box {
-      width: 80rpx;
-      height: 80rpx;
-      background-color: #ffebee;
-      color: #d32f2f;
-      border-radius: 20rpx;
+    .fire-circle {
+      width: 140rpx;
+      height: 140rpx;
+      background: rgba(255, 255, 255, 0.5);
+      border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 40rpx;
-      font-weight: bold;
-      margin-right: 24rpx;
+      margin-bottom: 24rpx;
+      box-shadow: 0 8rpx 24rpx rgba(168, 90, 90, 0.1);
+
+      .fire-icon {
+        width: 64rpx;
+        height: 64rpx;
+      }
     }
-    
-    .fortune-texts {
-      display: flex;
-      flex-direction: column;
-      
-      .fortune-label {
-        font-size: 24rpx;
-        color: #999;
-        margin-bottom: 4rpx;
-      }
-      
-      .fortune-value {
-        font-size: 32rpx;
-        font-weight: bold;
-        color: #333;
-      }
+
+    .lucky-color-tag {
+      background: #fff;
+      padding: 10rpx 32rpx;
+      border-radius: 30rpx;
+      font-size: 24rpx;
+      color: #d81e06;
+      font-weight: 600;
+      box-shadow: 0 4rpx 12rpx rgba(216, 30, 6, 0.1);
     }
   }
-  
-  .fortune-btn {
-    background-color: #d32f2f;
-    color: #fff;
-    font-size: 26rpx;
-    padding: 14rpx 32rpx;
-    border-radius: 40rpx;
-    font-weight: 600;
-    box-shadow: 0 4rpx 10rpx rgba(211, 47, 47, 0.3);
+
+  .card-bottom {
+    z-index: 2;
+
+    .open-lucky-btn {
+      width: 100%;
+      height: 96rpx;
+      background: rgba(255, 255, 255, 0.4);
+      border: 2rpx solid rgba(255, 255, 255, 0.6);
+      border-radius: 48rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      font-size: 32rpx;
+      font-weight: bold;
+      margin-bottom: 24rpx;
+      backdrop-filter: blur(5rpx);
+    }
+
+    .progress-section {
+      .progress-info {
+        display: flex;
+        justify-content: space-between;
+        font-size: 20rpx;
+        color: #a85a5a;
+        margin-bottom: 12rpx;
+        opacity: 0.8;
+      }
+
+      .progress-bar-bg {
+        width: 100%;
+        height: 8rpx;
+        background: rgba(255, 255, 255, 0.3);
+        border-radius: 4rpx;
+        overflow: hidden;
+
+        .progress-bar-fill {
+          height: 100%;
+          background: #d81e06; // 或渐变色
+          border-radius: 4rpx;
+        }
+      }
+    }
   }
 }
 
-/* 快捷标签 */
-.quick-tags {
-  display: flex;
-  justify-content: space-between;
-  margin: 0 30rpx 40rpx;
-  
-  .tag-item {
-    flex: 1;
-    background-color: #fff;
-    margin: 0 10rpx;
-    padding: 20rpx 0;
-    border-radius: 24rpx;
+/* 通用 Section 样式 */
+.section-container {
+  margin-bottom: 48rpx;
+
+  .section-header {
     display: flex;
     align-items: center;
-    justify-content: center;
-    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.02);
-    
-    &:first-child { margin-left: 0; }
-    &:last-child { margin-right: 0; }
-    
-    .tag-icon {
-      font-size: 32rpx;
+    margin-bottom: 24rpx;
+
+    .title-left-decor {
+      width: 6rpx;
+      height: 28rpx;
+      background: #d81e06;
+      border-radius: 4rpx;
       margin-right: 12rpx;
     }
-    
-    .tag-text {
-      font-size: 28rpx;
-      color: #555;
-      font-weight: 500;
+
+    .section-title {
+      font-size: 32rpx;
+      font-weight: bold;
+      color: #333;
+      flex: 1;
+    }
+
+    .header-right {
+      display: flex;
+      align-items: center;
+
+      .refresh-text {
+        font-size: 22rpx;
+        color: #999;
+        margin-left: 6rpx;
+      }
     }
   }
 }
 
-/* 排行榜 */
-.ranking-section {
-  padding: 0 30rpx;
-  
-  .tabs-header {
+/* 大家都在用 */
+.feature-grid {
+  display: flex;
+  justify-content: space-between;
+  gap: 24rpx;
+
+  .feature-card {
+    flex: 1;
+    background: #fff;
+    border-radius: 32rpx;
+    padding: 32rpx;
     display: flex;
-    justify-content: space-around;
-    background-color: #f5f7fa; /* 这里的背景色与页面一致，但可以调整 */
-    padding-bottom: 30rpx;
-    
-    .tab-item {
-      font-size: 30rpx;
-      color: #888;
-      padding: 10rpx 0;
-      position: relative;
-      font-weight: 500;
-      transition: all 0.3s;
-      
-      &.active {
-        color: #d32f2f;
-        font-weight: bold;
-        font-size: 32rpx;
-        
-        &::after {
-          content: '';
-          position: absolute;
-          bottom: -6rpx;
-          left: 50%;
-          transform: translateX(-50%);
-          width: 40rpx;
-          height: 6rpx;
-          background-color: #d32f2f;
-          border-radius: 6rpx;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
+
+    .icon-wrap {
+      width: 96rpx;
+      height: 96rpx;
+      border-radius: 24rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 20rpx;
+
+      &.yellow-bg {
+        background: #fff8e1;
+      }
+      &.blue-bg {
+        background: #e3f2fd;
+      }
+
+      .feature-icon {
+        width: 56rpx;
+        height: 56rpx;
+      }
+    }
+
+    .feature-name {
+      font-size: 28rpx;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 8rpx;
+    }
+
+    .feature-desc {
+      font-size: 20rpx;
+      color: #999;
+    }
+  }
+}
+
+/* 排行榜单 */
+.rank-tabs {
+  display: flex;
+  margin-bottom: 24rpx;
+  gap: 16rpx;
+
+  .rank-tab {
+    padding: 10rpx 24rpx;
+    background: #fff;
+    border-radius: 30rpx;
+    font-size: 24rpx;
+    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);
+    }
+  }
+}
+
+.rank-list {
+  background: #fff;
+  border-radius: 32rpx;
+  padding: 16rpx 24rpx;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
+
+  .rank-item {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 0;
+    border-bottom: 2rpx solid #f5f5f5;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .rank-num {
+      width: 40rpx;
+      height: 40rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 28rpx;
+      font-weight: bold;
+      color: #999;
+      margin-right: 24rpx;
+      border-radius: 50%;
+
+      &.rank-1 {
+        background: #ffd700;
+        color: #fff;
+      }
+      &.rank-2 {
+        background: #c0c0c0;
+        color: #fff;
+      }
+      &.rank-3 {
+        background: #cd7f32;
+        color: #fff;
+      }
+    }
+
+    .rank-thumb {
+      width: 88rpx;
+      height: 88rpx;
+      border-radius: 16rpx;
+      background: #eee;
+      margin-right: 24rpx;
+    }
+
+    .rank-info {
+      flex: 1;
+
+      .rank-title-row {
+        display: flex;
+        align-items: center;
+        margin-bottom: 8rpx;
+
+        .rank-title {
+          font-size: 28rpx;
+          font-weight: bold;
+          color: #333;
         }
       }
+
+      .rank-meta {
+        display: flex;
+        align-items: center;
+
+        .tag-hot {
+          font-size: 18rpx;
+          color: #d81e06;
+          background: #ffebee;
+          padding: 2rpx 8rpx;
+          border-radius: 8rpx;
+          margin-right: 12rpx;
+          font-weight: 600;
+        }
+
+        .usage-count {
+          font-size: 22rpx;
+          color: #999;
+        }
+      }
+    }
+
+    .rank-likes {
+      display: flex;
+      align-items: center;
+
+      .likes-num {
+        font-size: 24rpx;
+        color: #a85a5a;
+        margin-left: 8rpx;
+        font-weight: 500;
+      }
     }
   }
-  
-  .ranking-list {
-    .ranking-item {
-      background-color: #fff;
-      border-radius: 24rpx;
-      margin-bottom: 24rpx;
-      padding: 24rpx;
-      position: relative;
-      box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.03);
-      border: 2rpx solid transparent; /* 默认无边框 */
-      
-      /* Top 1 金色边框 */
-      &.rank-1 {
-        border-color: #ffca28;
-        .rank-badge-wrap .rank-badge { background-color: #ffca28; color: #7f0000; }
-      }
-      
-      /* Top 2 银色边框 */
-      &.rank-2 {
-        border-color: #cfd8dc;
-        .rank-badge-wrap .rank-badge { background-color: #b0bec5; color: #fff; }
-      }
-      
-      /* Top 3 铜色边框 */
-      &.rank-3 {
-        border-color: #ffcc80; /* 铜色近似 */
-        .rank-badge-wrap .rank-badge { background-color: #d89647; color: #fff; }
-      }
-      
-      .rank-badge-wrap {
-        position: absolute;
-        top: -16rpx;
-        left: 20rpx;
-        z-index: 10;
-        
-        .rank-badge {
-          font-size: 20rpx;
-          font-weight: bold;
-          padding: 6rpx 16rpx;
-          border-radius: 20rpx;
-          box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
-        }
-      }
-      
-      .item-content {
-        display: flex;
-        align-items: center;
-        
-        .item-thumb {
-          width: 140rpx;
-          height: 140rpx;
-          border-radius: 20rpx;
-          background-color: #eee;
-          flex-shrink: 0;
-        }
-        
-        .item-info {
-          flex: 1;
-          margin-left: 24rpx;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          
-          .item-title {
-            font-size: 32rpx;
-            font-weight: bold;
-            color: #333;
-            margin-bottom: 12rpx;
-          }
-          
-          .item-usage {
-            display: flex;
-            align-items: center;
-            font-size: 24rpx;
-            color: #999;
-            
-            .fire-icon {
-              color: #ff5722;
-              margin-right: 8rpx;
-              font-size: 26rpx;
-            }
-          }
-        }
-        
-        .item-action {
-          .use-btn {
-            background-color: #d32f2f;
-            color: #fff;
-            font-size: 24rpx;
-            padding: 0 30rpx;
-            height: 60rpx;
-            line-height: 60rpx;
-            border-radius: 30rpx;
-            font-weight: 600;
-            margin: 0;
-            box-shadow: 0 4rpx 10rpx rgba(211, 47, 47, 0.3);
-          }
-        }
-      }
-    }
+}
+
+.rank-footer {
+  text-align: center;
+  font-size: 22rpx;
+  color: #ccc;
+  padding: 24rpx 0;
+}
+
+/* 悬浮分享按钮 */
+.float-share-btn {
+  position: fixed;
+  right: 32rpx;
+  bottom: 60rpx; /* 避开 tabBar */
+  background: #fff;
+  border-radius: 40rpx;
+  padding: 16rpx 32rpx;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 8rpx 24rpx rgba(216, 30, 6, 0.2);
+  border: 2rpx solid #ffebee;
+  z-index: 100;
+
+  text {
+    font-size: 26rpx;
+    color: #d81e06;
+    font-weight: 600;
+    margin-left: 12rpx;
   }
 }
 
 .bottom-spacer {
-  height: 40rpx;
+  height: 120rpx;
 }
 </style>
diff --git a/utils/request.js b/utils/request.js
index 7d80845..fc28075 100644
--- a/utils/request.js
+++ b/utils/request.js
@@ -1,6 +1,6 @@
-const BASE_URL = "https://api.ai-meng.com";
+// const BASE_URL = "https://api.ai-meng.com";
 // const BASE_URL = 'http://127.0.0.1:3999'
-// const BASE_URL = "http://192.168.1.3:3999";
+const BASE_URL = "http://192.168.1.2:3999";
 // const BASE_URL = "http://192.168.31.253:3999";
 import { useUserStore } from "@/stores/user";
 import { getPlatform } from "./system.js";