From 633bc1c814fb79b44dd69b114d38d3914c897813 Mon Sep 17 00:00:00 2001
From: zzc <1761997216@qq.com>
Date: Mon, 23 Feb 2026 22:36:31 +0800
Subject: [PATCH] feat: order page

---
 pages/home/index.vue  |  829 ++++++++++++++++++++++++++
 pages/index/index.vue | 1306 +++++++++++++++++------------------------
 2 files changed, 1377 insertions(+), 758 deletions(-)
 create mode 100644 pages/home/index.vue

diff --git a/pages/home/index.vue b/pages/home/index.vue
new file mode 100644
index 0000000..16fa21f
--- /dev/null
+++ b/pages/home/index.vue
@@ -0,0 +1,829 @@
+<template>
+  <view class="spring-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
+    <!-- 顶部 Banner -->
+    <view class="hero">
+      <view class="hero-badge">
+        <text class="badge-dot">•</text>
+        <text class="badge-text">{{ countdownText }}</text>
+      </view>
+      <view class="hero-title">
+        <text class="year">2026</text>
+        <text class="main">新春祝福</text>
+      </view>
+      <text class="hero-sub">新年快乐，万事如意!</text>
+      <!-- <image class="hero-decor" src="https://file.lihailezzc.com/resource/58c8d19e5f2d9c958a7b8b9f44b8c3e3.png" mode="aspectFill" /> -->
+    </view>
+
+    <!-- 新春提示栏 -->
+    <view v-if="noticeList && noticeList.length > 0" class="notice-bar">
+      <view class="notice-left">
+        <swiper
+          class="notice-swiper"
+          vertical
+          autoplay
+          circular
+          interval="3000"
+          duration="500"
+        >
+          <swiper-item
+            v-for="(tip, index) in noticeList"
+            :key="index"
+            class="notice-swiper-item"
+            @tap="onNoticeTap(tip)"
+          >
+            <text v-if="tip.tag" class="notice-tag">{{
+              getTagText(tip.tag)
+            }}</text>
+            <text class="notice-text">{{ tip.text }}</text>
+          </swiper-item>
+        </swiper>
+      </view>
+      <text class="notice-arrow">›</text>
+    </view>
+
+    <!-- 功能入口宫格 -->
+    <view class="feature-grid">
+      <view
+        v-for="(item, idx) in features"
+        :key="idx"
+        class="feature-item"
+        @tap="onFeatureTap(item)"
+      >
+        <image
+          class="feature-icon"
+          :src="item.icon"
+          mode="aspectFill"
+          :style="{
+            backgroundColor: idx < 2 ? '#FEF2F2' : '#FFFBEC',
+          }"
+        />
+        <view class="feature-texts">
+          <text class="feature-title">{{ item.title }}</text>
+          <text class="feature-sub">{{ item.subtitle }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 今日灵感 -->
+    <view class="daily-section">
+      <view class="daily-header">
+        <text class="daily-title">今日灵感</text>
+        <text class="daily-date">{{ todayDate }}</text>
+      </view>
+      <view class="daily-card">
+        <view class="daily-content">
+          <text class="quote-mark">“</text>
+          <text class="daily-text">{{ dailyGreeting }}</text>
+          <text class="quote-mark right">”</text>
+        </view>
+        <view class="daily-actions">
+          <!-- <view class="action-btn copy" @tap="copyGreeting">
+            <text class="icon">❐</text> 复制
+          </view> -->
+          <view class="action-btn use" @tap="useGreeting">
+            <text class="icon">✎</text> 去制作
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 大家都在用（网格布局） -->
+    <view class="section">
+      <view class="section-header">
+        <view class="section-bar"></view>
+        <text class="section-title">大家都在用</text>
+        <!-- <text class="section-more" @tap="onMore('use')">查看更多 ></text> -->
+      </view>
+      <view class="use-grid">
+        <view
+          v-for="(card, i) in recommendList"
+          :key="i"
+          class="use-card"
+          @tap="onCardClick(card)"
+        >
+          <view class="card-cover-wrap">
+            <image :src="card.imageUrl" class="card-cover" mode="aspectFill" />
+            <view v-if="card.tag" class="card-tag" :class="`tag--${card.tag}`">
+              {{ getTagText(card.tag) }}
+            </view>
+          </view>
+          <view class="card-info">
+            <view class="card-title">{{ card.title }}</view>
+            <view class="card-desc">{{ card.content }}</view>
+            <view class="card-footer">
+              <view class="cta-btn" @tap.stop="onCardClick(card)">
+                {{ getCtaText(card.type) }}
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view v-if="loading" class="loading-text">加载中...</view>
+      <view v-if="!hasMore && recommendList.length > 0" class="no-more-text"
+        >没有更多了</view
+      >
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import {
+  onPullDownRefresh,
+  onShareAppMessage,
+  onShareTimeline,
+  onReachBottom,
+  onLoad,
+  onShow,
+} from "@dcloudio/uni-app";
+import { getBavBarHeight } from "@/utils/system";
+import { getRecommendList, getRandomGreeting, getTipsList } from "@/api/system";
+import { getShareToken, saveViewRequest, trackRecord } from "@/utils/common.js";
+
+const countdownText = ref("");
+const recommendList = ref([]);
+const page = ref(1);
+const hasMore = ref(true);
+const loading = ref(false);
+
+const updateCountdown = () => {
+  const now = new Date();
+  const springFestival = new Date("2026-02-17T00:00:00"); // 2026春节
+
+  // 只比较日期，忽略时分秒
+  now.setHours(0, 0, 0, 0);
+  springFestival.setHours(0, 0, 0, 0);
+
+  const diffTime = now.getTime() - springFestival.getTime();
+  const days = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+
+  if (days < 0) {
+    countdownText.value = `距春节还有 ${Math.abs(days)} 天`;
+  } else if (days === 0) {
+    countdownText.value = "大年初一";
+  } else {
+    const cnNums = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"];
+    if (days < 10) {
+      countdownText.value = `大年初${cnNums[days]}`;
+    } else if (days < 15) {
+      const sub = days + 1 - 10;
+      const subCn = ["一", "二", "三", "四", "五"][sub - 1];
+      countdownText.value = `正月十${subCn}`;
+    } else if (days === 14) {
+      // days=14是第15天
+      countdownText.value = "元宵节";
+    } else {
+      countdownText.value = "蛇年大吉";
+    }
+  }
+};
+
+const todayDate = ref("");
+const dailyGreeting = ref("");
+
+onShow(() => {
+  updateCountdown();
+  getIndexTips();
+  const date = new Date();
+  todayDate.value = `${date.getMonth() + 1}月${date.getDate()}日`;
+});
+
+onLoad((options) => {
+  if (options.shareToken) saveViewRequest(options.shareToken, "index");
+
+  // updateCountdown();
+  getRandomGreetingText();
+  fetchRecommendList();
+  trackRecord({
+    eventName: "index_page_visit",
+    eventType: `visit`,
+  });
+  // Daily Inspiration Logic
+  // const startOfYear = new Date(date.getFullYear(), 0, 0);
+  // const diff = date - startOfYear;
+  // const oneDay = 1000 * 60 * 60 * 24;
+  // const dayOfYear = Math.floor(diff / oneDay);
+
+  // const index = dayOfYear % inspirationList.length;
+  // dailyGreeting.value = inspirationList[index];
+});
+
+onShareAppMessage(async () => {
+  const shareToken = await getShareToken("index");
+  return {
+    title: "新年好运已送达 🎊｜祝福卡·头像·壁纸",
+    path: `/pages/index/index?shareToken=${shareToken}`,
+    imageUrl:
+      "https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
+  };
+});
+
+onShareTimeline(async () => {
+  const shareToken = await getShareToken("index_timeline");
+  return {
+    title: "新年好运已送达 🎊｜祝福卡·头像·壁纸",
+    query: `shareToken=${shareToken}`,
+    imageUrl:
+      "https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
+  };
+});
+
+const getIndexTips = async () => {
+  const res = await getTipsList();
+  noticeList.value = res || [];
+};
+
+const getRandomGreetingText = async () => {
+  const content = await getRandomGreeting();
+  dailyGreeting.value =
+    content || "烟火起，照人间，举杯敬此年。烟花落，看人间，家家户户皆团圆。";
+};
+
+const useGreeting = () => {
+  trackRecord({
+    eventName: "index_goto_make",
+    eventType: "jump",
+    elementId: dailyGreeting.value,
+  });
+  uni.setStorageSync("TEMP_BLESSING_TEXT", dailyGreeting.value);
+  uni.switchTab({
+    url: "/pages/make/index",
+  });
+};
+
+const noticeList = ref([]);
+
+const onNoticeTap = (tip) => {
+  if (!tip.url) return;
+
+  if (tip.type === "path") {
+    uni.navigateTo({ url: tip.url });
+  } else if (tip.type === "switchTab") {
+    uni.switchTab({ url: tip.url });
+  } else {
+    // 默认跳转 webview (公众号文章)
+    uni.navigateTo({
+      url: "/pages/webview/index?url=" + encodeURIComponent(tip.url),
+    });
+  }
+};
+
+const features = ref([
+  {
+    title: "新春祝福卡片",
+    subtitle: "定制专属贺卡吧",
+    icon: "/static/icon/celebrate.png",
+    type: "card",
+  },
+  {
+    title: "新年运势",
+    subtitle: "抽取新年关键词",
+    icon: "/static/icon/yunshi.png",
+    type: "fortune",
+  },
+  {
+    title: "新春头像",
+    subtitle: "焕上节日新饰",
+    icon: "/static/icon/guashi.png",
+    type: "avatar_decor",
+  },
+  {
+    title: "精美壁纸",
+    subtitle: "获取精美壁纸",
+    icon: "/static/icon/bizhi.png",
+    type: "wallpaper",
+  },
+]);
+
+const fetchRecommendList = async (isRefresh = false) => {
+  if (loading.value || (!hasMore.value && !isRefresh)) return;
+  loading.value = true;
+  if (isRefresh) {
+    page.value = 1;
+    hasMore.value = true;
+  }
+  try {
+    const res = await getRecommendList(page.value);
+    const list = res?.list || [];
+    if (isRefresh) {
+      recommendList.value = list;
+    } else {
+      recommendList.value = [...recommendList.value, ...list];
+    }
+
+    if (res.hasNext !== undefined) {
+      hasMore.value = res.hasNext;
+    } else {
+      // Fallback if API doesn't return hasNext
+      if (list.length < 10) hasMore.value = false;
+    }
+
+    if (list.length > 0) {
+      page.value++;
+    } else {
+      hasMore.value = false;
+    }
+  } catch (e) {
+    console.error(e);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const getTagText = (tag) => {
+  const map = {
+    hot: "热门",
+    new: "新品",
+    featured: "精选",
+    hot2: "爆款",
+  };
+  return map[tag] || tag;
+};
+
+const getCtaText = (type) => {
+  const map = {
+    frame: "去制作",
+    decor: "去装饰",
+    avatar: "去查看",
+    card: "去写祝福",
+    fortune: "去抽取",
+  };
+  return map[type] || "立即查看";
+};
+
+const onCardClick = (card) => {
+  // 构造传递的数据
+  trackRecord({
+    eventName: "index_recommend_click",
+    eventType: `jump_${card.type}`,
+    elementId: card?.recommendId || "",
+  });
+  const query = `recommendId=${card.recommendId || ""}&type=${card.type || ""}&imageUrl=${encodeURIComponent(card.imageUrl || "")}`;
+
+  if (
+    card.scene === "avatar_download" ||
+    ["frame", "decor", "avatar"].includes(card.type)
+  ) {
+    uni.navigateTo({
+      url: `/pages/avatar/index?${query}`,
+    });
+    return;
+  }
+
+  // Default fallback based on type
+  if (card.type === "card") {
+    // 贺卡制作通常是 Tab 页，通过 Storage 传递参数
+    uni.setStorageSync("RECOMMEND_CARD_DATA", {
+      recommendId: card.recommendId,
+      imageUrl: card.imageUrl,
+      type: card.type,
+    });
+    uni.switchTab({ url: "/pages/make/index" });
+  } else if (card.type === "fortune") {
+    uni.navigateTo({ url: "/pages/fortune/index" });
+  } else {
+    // 默认跳转到头像页
+    uni.navigateTo({
+      url: `/pages/avatar/index?${query}`,
+    });
+  }
+};
+
+const onFeatureTap = (item) => {
+  trackRecord({
+    eventName: "index_function_select",
+    eventType: "jump",
+    elementId: item.type,
+  });
+  if (item.type === "fortune") {
+    uni.navigateTo({ url: "/pages/fortune/index" });
+    return;
+  }
+  if (item.type === "card") {
+    uni.switchTab({ url: "/pages/make/index" });
+    return;
+  }
+  if (item.type === "avatar_decor" || item.type === "avatar_frame") {
+    uni.navigateTo({ url: "/pages/avatar/index" });
+    return;
+  }
+  if (item.type === "wallpaper") {
+    uni.navigateTo({ url: "/pages/wallpaper/index" });
+    return;
+  }
+  uni.showToast({ title: `进入：${item.title}`, icon: "none" });
+};
+
+onReachBottom(() => {
+  fetchRecommendList();
+});
+
+onPullDownRefresh(async () => {
+  updateCountdown();
+  await Promise.all([fetchRecommendList(true), getRandomGreetingText()]);
+  uni.stopPullDownRefresh();
+  uni.showToast({ title: "已为你更新内容", icon: "success" });
+});
+</script>
+
+<style lang="scss" scoped>
+.spring-page {
+  min-height: 100vh;
+  box-sizing: border-box;
+  background: #f8f6f6;
+}
+
+/* 顶部 Banner */
+.hero {
+  position: relative;
+  margin: 24rpx auto;
+  padding: 32rpx;
+  height: 324rpx;
+  width: 92vw;
+  border-radius: 24rpx;
+  color: #fff;
+  background: url("http://file.lihailezzc.com/77ea2597-569c-4f13-b5af-22606742adcfssss.jpg");
+  background-size: cover;
+  overflow: hidden;
+
+  .hero-badge {
+    display: inline-flex;
+    align-items: center;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 999rpx;
+    padding: 8rpx 16rpx;
+    font-size: 22rpx;
+    .badge-dot {
+      margin-right: 8rpx;
+    }
+  }
+  .hero-title {
+    margin-top: 24rpx;
+    display: flex;
+    align-items: baseline;
+    .year {
+      font-size: 44rpx;
+      font-weight: 700;
+      margin-right: 12rpx;
+    }
+    .main {
+      font-size: 44rpx;
+      font-weight: 700;
+    }
+  }
+  .hero-sub {
+    margin-top: 8rpx;
+    font-size: 24rpx;
+    opacity: 0.9;
+  }
+  .hero-decor {
+    position: absolute;
+    right: 12rpx;
+    bottom: 12rpx;
+    width: 160rpx;
+    height: 160rpx;
+    opacity: 0.3;
+    border-radius: 16rpx;
+  }
+}
+
+/* 新春提示栏 */
+.notice-bar {
+  margin: 0 24rpx 20rpx;
+  padding: 16rpx 24rpx;
+  background: #fff;
+  border-radius: 16rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
+
+  .notice-left {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    height: 40rpx;
+    overflow: hidden;
+
+    .notice-tag {
+      font-size: 20rpx;
+      color: #ff3b30;
+      background: rgba(255, 59, 48, 0.1);
+      padding: 2rpx 12rpx;
+      border-radius: 6rpx;
+      margin-right: 16rpx;
+      font-weight: 700;
+      flex-shrink: 0;
+    }
+
+    .notice-swiper {
+      flex: 1;
+      height: 100%;
+
+      .notice-swiper-item {
+        display: flex;
+        align-items: center;
+        height: 100%;
+      }
+    }
+
+    .notice-text {
+      font-size: 26rpx;
+      color: #333;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .notice-arrow {
+    font-size: 32rpx;
+    color: #ccc;
+    line-height: 1;
+  }
+}
+
+/* 功能入口宫格 - 2x2 */
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 20rpx;
+  padding: 0 24rpx;
+  margin-top: 8rpx;
+
+  .feature-item {
+    position: relative;
+    display: flex;
+    align-items: left;
+    flex-direction: column;
+    padding: 20rpx;
+    border-radius: 18rpx;
+    background: #fff;
+    box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.04);
+  }
+  .feature-item::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 60rpx;
+    height: 60rpx;
+    border-bottom-left-radius: 80rpx;
+    z-index: 1;
+  }
+  .feature-item:nth-child(1)::after,
+  .feature-item:nth-child(2)::after {
+    background: #fef2f2; /* 可换成你的主题粉 */
+  }
+  .feature-item:nth-child(3)::after,
+  .feature-item:nth-child(4)::after {
+    background: #fffbec; /* 温柔一点的黄 */
+  }
+  .feature-icon {
+    width: 60rpx;
+    height: 60rpx;
+    border-radius: 50%;
+    padding: 5rpx;
+  }
+  .feature-texts {
+    margin-top: 20rpx;
+    display: flex;
+    flex-direction: column;
+    .feature-title {
+      font-size: 28rpx;
+      color: #222;
+      font-weight: 600;
+    }
+    .feature-sub {
+      font-size: 22rpx;
+      color: #888;
+      margin-top: 4rpx;
+    }
+  }
+}
+
+/* 今日灵感 */
+.daily-section {
+  margin: 24rpx 24rpx 0;
+  .daily-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16rpx;
+    .daily-title {
+      font-size: 32rpx;
+      font-weight: 700;
+      color: #333;
+    }
+    .daily-date {
+      font-size: 24rpx;
+      color: #999;
+      font-family: monospace;
+    }
+  }
+  .daily-card {
+    background: #fff;
+    border-radius: 20rpx;
+    padding: 30rpx;
+    box-shadow: 0 8rpx 24rpx rgba(255, 59, 48, 0.08);
+    position: relative;
+    overflow: hidden;
+  }
+  .daily-card::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 8rpx;
+    height: 100%;
+    background: #ff3b30;
+  }
+  .daily-content {
+    position: relative;
+    padding: 10rpx 20rpx;
+    .quote-mark {
+      font-size: 60rpx;
+      color: #ff3b30;
+      opacity: 0.2;
+      position: absolute;
+      line-height: 1;
+      font-family: serif;
+    }
+    .quote-mark:first-child {
+      top: -10rpx;
+      left: -10rpx;
+    }
+    .quote-mark.right {
+      bottom: -20rpx;
+      right: 0;
+    }
+    .daily-text {
+      font-size: 30rpx;
+      color: #444;
+      line-height: 1.8;
+      font-style: italic;
+      display: block;
+      text-align: justify;
+    }
+  }
+  .daily-actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 30rpx;
+    gap: 20rpx;
+    .action-btn {
+      display: flex;
+      align-items: center;
+      padding: 12rpx 24rpx;
+      border-radius: 999rpx;
+      font-size: 24rpx;
+      transition: all 0.2s;
+      .icon {
+        margin-right: 6rpx;
+        font-size: 26rpx;
+      }
+    }
+    .action-btn.copy {
+      background: #f5f5f5;
+      color: #666;
+    }
+    .action-btn.use {
+      background: #ff3b30;
+      color: #fff;
+      box-shadow: 0 4rpx 12rpx rgba(255, 59, 48, 0.3);
+    }
+  }
+}
+
+/* 通用区块标题 */
+.section {
+  margin-top: 28rpx;
+}
+.section-header {
+  display: flex;
+  align-items: center;
+  padding: 0 24rpx;
+  .section-bar {
+    width: 10rpx;
+    height: 30rpx;
+    border-radius: 6rpx;
+    background: #ff3b30;
+    margin-right: 12rpx;
+  }
+  .section-title {
+    font-size: 28rpx;
+    color: #222;
+    flex: 1;
+    font-weight: 600;
+  }
+  .section-more {
+    font-size: 24rpx;
+    color: #ff3b30;
+  }
+}
+
+/* 大家都在用 - 网格列表 */
+.use-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20rpx;
+  padding: 0 24rpx;
+  margin-top: 16rpx;
+  padding-bottom: 40rpx;
+}
+.use-card {
+  background: #fff;
+  border-radius: 20rpx;
+  overflow: hidden;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
+  display: flex;
+  flex-direction: column;
+}
+.card-cover-wrap {
+  position: relative;
+  width: 100%;
+  padding-bottom: 120%; /* 竖向卡片 */
+  background: #f5f5f5;
+}
+.card-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.card-tag {
+  position: absolute;
+  top: 12rpx;
+  left: 12rpx;
+  padding: 4rpx 12rpx;
+  border-radius: 8rpx;
+  font-size: 20rpx;
+  color: #fff;
+  font-weight: 500;
+  &.tag--hot {
+    background: linear-gradient(135deg, #ff3b30, #ff9500);
+  }
+  &.tag--featured {
+    background: linear-gradient(135deg, #007aff, #5ac8fa);
+  }
+  &.tag--hot2 {
+    background: linear-gradient(135deg, #ff2d55, #ff375f);
+  }
+  &.tag--new {
+    background: linear-gradient(135deg, #5856d6, #af52de);
+  }
+  &.tag--default {
+    background: rgba(0, 0, 0, 0.5);
+  }
+}
+.card-info {
+  padding: 16rpx;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.card-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.card-desc {
+  font-size: 22rpx;
+  color: #999;
+  line-height: 1.4;
+  margin-bottom: 16rpx;
+  /* 限制2行 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.card-footer {
+  margin-top: auto;
+  display: flex;
+  justify-content: flex-end;
+}
+.cta-btn {
+  font-size: 22rpx;
+  color: #ff3b30;
+  background: rgba(255, 59, 48, 0.08);
+  padding: 8rpx 20rpx;
+  border-radius: 999rpx;
+  font-weight: 500;
+}
+
+.loading-text,
+.no-more-text {
+  text-align: center;
+  font-size: 24rpx;
+  color: #999;
+  padding: 20rpx 0;
+  width: 100%;
+}
+</style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 16fa21f..f145fdb 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,829 +1,619 @@
 <template>
-  <view class="spring-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
-    <!-- 顶部 Banner -->
-    <view class="hero">
-      <view class="hero-badge">
-        <text class="badge-dot">•</text>
-        <text class="badge-text">{{ countdownText }}</text>
-      </view>
-      <view class="hero-title">
-        <text class="year">2026</text>
-        <text class="main">新春祝福</text>
-      </view>
-      <text class="hero-sub">新年快乐，万事如意!</text>
-      <!-- <image class="hero-decor" src="https://file.lihailezzc.com/resource/58c8d19e5f2d9c958a7b8b9f44b8c3e3.png" mode="aspectFill" /> -->
-    </view>
-
-    <!-- 新春提示栏 -->
-    <view v-if="noticeList && noticeList.length > 0" class="notice-bar">
-      <view class="notice-left">
-        <swiper
-          class="notice-swiper"
-          vertical
-          autoplay
-          circular
-          interval="3000"
-          duration="500"
-        >
-          <swiper-item
-            v-for="(tip, index) in noticeList"
-            :key="index"
-            class="notice-swiper-item"
-            @tap="onNoticeTap(tip)"
-          >
-            <text v-if="tip.tag" class="notice-tag">{{
-              getTagText(tip.tag)
-            }}</text>
-            <text class="notice-text">{{ tip.text }}</text>
-          </swiper-item>
-        </swiper>
-      </view>
-      <text class="notice-arrow">›</text>
-    </view>
-
-    <!-- 功能入口宫格 -->
-    <view class="feature-grid">
-      <view
-        v-for="(item, idx) in features"
-        :key="idx"
-        class="feature-item"
-        @tap="onFeatureTap(item)"
-      >
+  <view class="home-container" :style="{
+        height: navBarHeight + 'px',
+        paddingTop: statusBarHeight + 'px',
+      }">
+    <!-- 顶部用户信息栏 -->
+    <view class="header-section">
+      <view class="user-info">
         <image
-          class="feature-icon"
-          :src="item.icon"
+          class="user-avatar"
+          :src="userInfo.avatarUrl || '/static/default-avatar.png'"
           mode="aspectFill"
-          :style="{
-            backgroundColor: idx < 2 ? '#FEF2F2' : '#FFFBEC',
-          }"
         />
-        <view class="feature-texts">
-          <text class="feature-title">{{ item.title }}</text>
-          <text class="feature-sub">{{ item.subtitle }}</text>
+        <view class="user-texts">
+          <text class="greeting-text">{{ greetingText }}</text>
+          <text class="user-name">{{ userInfo.nickName || '新春福星' }}</text>
         </view>
       </view>
     </view>
 
-    <!-- 今日灵感 -->
-    <view class="daily-section">
-      <view class="daily-header">
-        <text class="daily-title">今日灵感</text>
-        <text class="daily-date">{{ todayDate }}</text>
-      </view>
-      <view class="daily-card">
-        <view class="daily-content">
-          <text class="quote-mark">“</text>
-          <text class="daily-text">{{ dailyGreeting }}</text>
-          <text class="quote-mark right">”</text>
-        </view>
-        <view class="daily-actions">
-          <!-- <view class="action-btn copy" @tap="copyGreeting">
-            <text class="icon">❐</text> 复制
-          </view> -->
-          <view class="action-btn use" @tap="useGreeting">
-            <text class="icon">✎</text> 去制作
-          </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>
         </view>
+        <image
+          class="hero-bg-decor"
+          src="https://file.lihailezzc.com/resource/58c8d19e5f2d9c958a7b8b9f44b8c3e3.png"
+          mode="aspectFill"
+        />
       </view>
     </view>
 
-    <!-- 大家都在用（网格布局） -->
-    <view class="section">
-      <view class="section-header">
-        <view class="section-bar"></view>
-        <text class="section-title">大家都在用</text>
-        <!-- <text class="section-more" @tap="onMore('use')">查看更多 ></text> -->
+    <!-- 今日问候 -->
+    <view class="daily-greeting-bar" @tap="onDailyGreetingTap">
+      <view class="bar-left">
+        <view class="icon-box calendar-icon">📅</view>
+        <text class="bar-text">今日问候 · 传递好心情</text>
       </view>
-      <view class="use-grid">
+      <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>
+      </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>
+    </view> -->
+
+    <!-- 排行榜 Tab -->
+    <view class="ranking-section">
+      <view class="tabs-header">
         <view
-          v-for="(card, i) in recommendList"
-          :key="i"
-          class="use-card"
-          @tap="onCardClick(card)"
+          v-for="(tab, index) in tabs"
+          :key="index"
+          class="tab-item"
+          :class="{ active: currentTab === index }"
+          @tap="switchTab(index)"
         >
-          <view class="card-cover-wrap">
-            <image :src="card.imageUrl" class="card-cover" mode="aspectFill" />
-            <view v-if="card.tag" class="card-tag" :class="`tag--${card.tag}`">
-              {{ getTagText(card.tag) }}
-            </view>
+          {{ tab.name }}
+        </view>
+      </view>
+
+      <view class="ranking-list">
+        <view
+          v-for="(item, index) in rankingList"
+          :key="index"
+          class="ranking-item"
+          :class="'rank-' + (index + 1)"
+          @tap="onItemTap(item)"
+        >
+          <view class="rank-badge-wrap" v-if="index < 3">
+            <view class="rank-badge">Top {{ index + 1 }}</view>
           </view>
-          <view class="card-info">
-            <view class="card-title">{{ card.title }}</view>
-            <view class="card-desc">{{ card.content }}</view>
-            <view class="card-footer">
-              <view class="cta-btn" @tap.stop="onCardClick(card)">
-                {{ getCtaText(card.type) }}
+          
+          <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>
         </view>
       </view>
-      <view v-if="loading" class="loading-text">加载中...</view>
-      <view v-if="!hasMore && recommendList.length > 0" class="no-more-text"
-        >没有更多了</view
-      >
     </view>
+    
+    <!-- 底部占位，防止被 TabBar 遮挡 -->
+    <view class="bottom-spacer"></view>
   </view>
 </template>
 
 <script setup>
-import { ref } from "vue";
-import {
-  onPullDownRefresh,
-  onShareAppMessage,
-  onShareTimeline,
-  onReachBottom,
-  onLoad,
-  onShow,
-} from "@dcloudio/uni-app";
+import { ref, onMounted } from "vue";
 import { getBavBarHeight } from "@/utils/system";
-import { getRecommendList, getRandomGreeting, getTipsList } from "@/api/system";
-import { getShareToken, saveViewRequest, trackRecord } from "@/utils/common.js";
+import { onShow, onLoad } from "@dcloudio/uni-app";
+import { useUserStore } from "@/stores/user";
+import { getTitleBarHeight } from "@/utils/system";
 
-const countdownText = ref("");
-const recommendList = ref([]);
-const page = ref(1);
-const hasMore = ref(true);
-const loading = ref(false);
+const userStore = useUserStore();
 
-const updateCountdown = () => {
-  const now = new Date();
-  const springFestival = new Date("2026-02-17T00:00:00"); // 2026春节
+const showheroSection = ref(false);
 
-  // 只比较日期，忽略时分秒
-  now.setHours(0, 0, 0, 0);
-  springFestival.setHours(0, 0, 0, 0);
-
-  const diffTime = now.getTime() - springFestival.getTime();
-  const days = Math.floor(diffTime / (1000 * 60 * 60 * 24));
-
-  if (days < 0) {
-    countdownText.value = `距春节还有 ${Math.abs(days)} 天`;
-  } else if (days === 0) {
-    countdownText.value = "大年初一";
-  } else {
-    const cnNums = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"];
-    if (days < 10) {
-      countdownText.value = `大年初${cnNums[days]}`;
-    } else if (days < 15) {
-      const sub = days + 1 - 10;
-      const subCn = ["一", "二", "三", "四", "五"][sub - 1];
-      countdownText.value = `正月十${subCn}`;
-    } else if (days === 14) {
-      // days=14是第15天
-      countdownText.value = "元宵节";
-    } else {
-      countdownText.value = "蛇年大吉";
-    }
-  }
-};
-
-const todayDate = ref("");
-const dailyGreeting = ref("");
-
-onShow(() => {
-  updateCountdown();
-  getIndexTips();
-  const date = new Date();
-  todayDate.value = `${date.getMonth() + 1}月${date.getDate()}日`;
+// 用户信息
+const userInfo = ref(userStore?.userInfo || {
+  avatarUrl: "",
+  nickName: "哎萌",
 });
+const greetingText = ref("早上好");
 
-onLoad((options) => {
-  if (options.shareToken) saveViewRequest(options.shareToken, "index");
-
-  // updateCountdown();
-  getRandomGreetingText();
-  fetchRecommendList();
-  trackRecord({
-    eventName: "index_page_visit",
-    eventType: `visit`,
-  });
-  // Daily Inspiration Logic
-  // const startOfYear = new Date(date.getFullYear(), 0, 0);
-  // const diff = date - startOfYear;
-  // const oneDay = 1000 * 60 * 60 * 24;
-  // const dayOfYear = Math.floor(diff / oneDay);
-
-  // const index = dayOfYear % inspirationList.length;
-  // dailyGreeting.value = inspirationList[index];
-});
-
-onShareAppMessage(async () => {
-  const shareToken = await getShareToken("index");
-  return {
-    title: "新年好运已送达 🎊｜祝福卡·头像·壁纸",
-    path: `/pages/index/index?shareToken=${shareToken}`,
-    imageUrl:
-      "https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
-  };
-});
-
-onShareTimeline(async () => {
-  const shareToken = await getShareToken("index_timeline");
-  return {
-    title: "新年好运已送达 🎊｜祝福卡·头像·壁纸",
-    query: `shareToken=${shareToken}`,
-    imageUrl:
-      "https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
-  };
-});
-
-const getIndexTips = async () => {
-  const res = await getTipsList();
-  noticeList.value = res || [];
-};
-
-const getRandomGreetingText = async () => {
-  const content = await getRandomGreeting();
-  dailyGreeting.value =
-    content || "烟火起，照人间，举杯敬此年。烟花落，看人间，家家户户皆团圆。";
-};
-
-const useGreeting = () => {
-  trackRecord({
-    eventName: "index_goto_make",
-    eventType: "jump",
-    elementId: dailyGreeting.value,
-  });
-  uni.setStorageSync("TEMP_BLESSING_TEXT", dailyGreeting.value);
-  uni.switchTab({
-    url: "/pages/make/index",
-  });
-};
-
-const noticeList = ref([]);
-
-const onNoticeTap = (tip) => {
-  if (!tip.url) return;
-
-  if (tip.type === "path") {
-    uni.navigateTo({ url: tip.url });
-  } else if (tip.type === "switchTab") {
-    uni.switchTab({ url: tip.url });
-  } else {
-    // 默认跳转 webview (公众号文章)
-    uni.navigateTo({
-      url: "/pages/webview/index?url=" + encodeURIComponent(tip.url),
-    });
-  }
-};
-
-const features = ref([
-  {
-    title: "新春祝福卡片",
-    subtitle: "定制专属贺卡吧",
-    icon: "/static/icon/celebrate.png",
-    type: "card",
-  },
-  {
-    title: "新年运势",
-    subtitle: "抽取新年关键词",
-    icon: "/static/icon/yunshi.png",
-    type: "fortune",
-  },
-  {
-    title: "新春头像",
-    subtitle: "焕上节日新饰",
-    icon: "/static/icon/guashi.png",
-    type: "avatar_decor",
-  },
-  {
-    title: "精美壁纸",
-    subtitle: "获取精美壁纸",
-    icon: "/static/icon/bizhi.png",
-    type: "wallpaper",
-  },
+// 快捷标签数据
+const quickTags = ref([
+  { text: "开心", icon: "😊" },
+  { text: "暴富", icon: "🧧" },
+  { text: "团圆", icon: "🏠" },
+  { text: "好运", icon: "✨" },
 ]);
 
-const fetchRecommendList = async (isRefresh = false) => {
-  if (loading.value || (!hasMore.value && !isRefresh)) return;
-  loading.value = true;
-  if (isRefresh) {
-    page.value = 1;
-    hasMore.value = true;
-  }
-  try {
-    const res = await getRecommendList(page.value);
-    const list = res?.list || [];
-    if (isRefresh) {
-      recommendList.value = list;
-    } else {
-      recommendList.value = [...recommendList.value, ...list];
-    }
+// Tab 数据
+const tabs = ref([
+  { name: "热门头像框", type: "avatar" },
+  { name: "热门模板", type: "template" },
+  { name: "热门壁纸", type: "wallpaper" },
+]);
+const currentTab = ref(0);
 
-    if (res.hasNext !== undefined) {
-      hasMore.value = res.hasNext;
-    } else {
-      // Fallback if API doesn't return hasNext
-      if (list.length < 10) hasMore.value = false;
-    }
+// 排行榜数据
+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,
+  },
+  // 更多模拟数据...
+]);
 
-    if (list.length > 0) {
-      page.value++;
-    } else {
-      hasMore.value = false;
-    }
-  } catch (e) {
-    console.error(e);
-  } finally {
-    loading.value = false;
-  }
-};
+const navBarHeight = ref(64);
+const statusBarHeight = ref(20);
 
-const getTagText = (tag) => {
-  const map = {
-    hot: "热门",
-    new: "新品",
-    featured: "精选",
-    hot2: "爆款",
-  };
-  return map[tag] || tag;
-};
-
-const getCtaText = (type) => {
-  const map = {
-    frame: "去制作",
-    decor: "去装饰",
-    avatar: "去查看",
-    card: "去写祝福",
-    fortune: "去抽取",
-  };
-  return map[type] || "立即查看";
-};
-
-const onCardClick = (card) => {
-  // 构造传递的数据
-  trackRecord({
-    eventName: "index_recommend_click",
-    eventType: `jump_${card.type}`,
-    elementId: card?.recommendId || "",
-  });
-  const query = `recommendId=${card.recommendId || ""}&type=${card.type || ""}&imageUrl=${encodeURIComponent(card.imageUrl || "")}`;
-
-  if (
-    card.scene === "avatar_download" ||
-    ["frame", "decor", "avatar"].includes(card.type)
-  ) {
-    uni.navigateTo({
-      url: `/pages/avatar/index?${query}`,
-    });
-    return;
-  }
-
-  // Default fallback based on type
-  if (card.type === "card") {
-    // 贺卡制作通常是 Tab 页，通过 Storage 传递参数
-    uni.setStorageSync("RECOMMEND_CARD_DATA", {
-      recommendId: card.recommendId,
-      imageUrl: card.imageUrl,
-      type: card.type,
-    });
-    uni.switchTab({ url: "/pages/make/index" });
-  } else if (card.type === "fortune") {
-    uni.navigateTo({ url: "/pages/fortune/index" });
-  } else {
-    // 默认跳转到头像页
-    uni.navigateTo({
-      url: `/pages/avatar/index?${query}`,
-    });
-  }
-};
-
-const onFeatureTap = (item) => {
-  trackRecord({
-    eventName: "index_function_select",
-    eventType: "jump",
-    elementId: item.type,
-  });
-  if (item.type === "fortune") {
-    uni.navigateTo({ url: "/pages/fortune/index" });
-    return;
-  }
-  if (item.type === "card") {
-    uni.switchTab({ url: "/pages/make/index" });
-    return;
-  }
-  if (item.type === "avatar_decor" || item.type === "avatar_frame") {
-    uni.navigateTo({ url: "/pages/avatar/index" });
-    return;
-  }
-  if (item.type === "wallpaper") {
-    uni.navigateTo({ url: "/pages/wallpaper/index" });
-    return;
-  }
-  uni.showToast({ title: `进入：${item.title}`, icon: "none" });
-};
-
-onReachBottom(() => {
-  fetchRecommendList();
+onMounted(() => {
+  const systemInfo = uni.getSystemInfoSync();
+  statusBarHeight.value = systemInfo.statusBarHeight || 20;
+  navBarHeight.value = statusBarHeight.value + getTitleBarHeight();
 });
 
-onPullDownRefresh(async () => {
-  updateCountdown();
-  await Promise.all([fetchRecommendList(true), getRandomGreetingText()]);
-  uni.stopPullDownRefresh();
-  uni.showToast({ title: "已为你更新内容", icon: "success" });
+const switchTab = (index) => {
+  currentTab.value = index;
+  // TODO: 切换数据逻辑
+};
+
+const onDailyGreetingTap = () => {
+  uni.showToast({ title: "今日问候", icon: "none" });
+};
+
+const onFortuneTap = () => {
+  uni.navigateTo({ url: "/pages/fortune/index" });
+};
+
+const onTagTap = (tag) => {
+  uni.showToast({ title: "点击了 " + tag.text, icon: "none" });
+};
+
+const onItemTap = (item) => {
+  console.log("Item tapped", item);
+};
+
+const onUseTap = (item) => {
+  uni.navigateTo({
+    url: `/pages/avatar/index?id=${item.id}`,
+  });
+};
+
+onLoad(() => {
+  // 初始化逻辑
 });
 </script>
 
 <style lang="scss" scoped>
-.spring-page {
+.home-container {
   min-height: 100vh;
+  background-color: #f5f7fa;
+  padding-bottom: 20rpx;
   box-sizing: border-box;
-  background: #f8f6f6;
 }
 
-/* 顶部 Banner */
-.hero {
-  position: relative;
-  margin: 24rpx auto;
-  padding: 32rpx;
-  height: 324rpx;
-  width: 92vw;
-  border-radius: 24rpx;
-  color: #fff;
-  background: url("http://file.lihailezzc.com/77ea2597-569c-4f13-b5af-22606742adcfssss.jpg");
-  background-size: cover;
-  overflow: hidden;
-
-  .hero-badge {
-    display: inline-flex;
-    align-items: center;
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 999rpx;
-    padding: 8rpx 16rpx;
-    font-size: 22rpx;
-    .badge-dot {
-      margin-right: 8rpx;
-    }
-  }
-  .hero-title {
-    margin-top: 24rpx;
-    display: flex;
-    align-items: baseline;
-    .year {
-      font-size: 44rpx;
-      font-weight: 700;
-      margin-right: 12rpx;
-    }
-    .main {
-      font-size: 44rpx;
-      font-weight: 700;
-    }
-  }
-  .hero-sub {
-    margin-top: 8rpx;
-    font-size: 24rpx;
-    opacity: 0.9;
-  }
-  .hero-decor {
-    position: absolute;
-    right: 12rpx;
-    bottom: 12rpx;
-    width: 160rpx;
-    height: 160rpx;
-    opacity: 0.3;
-    border-radius: 16rpx;
-  }
-}
-
-/* 新春提示栏 */
-.notice-bar {
-  margin: 0 24rpx 20rpx;
-  padding: 16rpx 24rpx;
-  background: #fff;
-  border-radius: 16rpx;
+/* 顶部用户信息栏 */
+.header-section {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
-
-  .notice-left {
+  align-items: center;
+  padding: 20rpx 30rpx;
+  background-color: #fff;
+  
+  .user-info {
     display: flex;
     align-items: center;
-    flex: 1;
-    height: 40rpx;
-    overflow: hidden;
-
-    .notice-tag {
-      font-size: 20rpx;
-      color: #ff3b30;
-      background: rgba(255, 59, 48, 0.1);
-      padding: 2rpx 12rpx;
-      border-radius: 6rpx;
-      margin-right: 16rpx;
-      font-weight: 700;
-      flex-shrink: 0;
+    
+    .user-avatar {
+      width: 80rpx;
+      height: 80rpx;
+      border-radius: 50%;
+      margin-right: 20rpx;
+      border: 2rpx solid #f0f0f0;
     }
-
-    .notice-swiper {
-      flex: 1;
-      height: 100%;
-
-      .notice-swiper-item {
-        display: flex;
-        align-items: center;
-        height: 100%;
+    
+    .user-texts {
+      display: flex;
+      flex-direction: column;
+      
+      .greeting-text {
+        font-size: 24rpx;
+        color: #666;
+        margin-bottom: 4rpx;
+      }
+      
+      .user-name {
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #333;
       }
     }
-
-    .notice-text {
-      font-size: 26rpx;
-      color: #333;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
   }
-
-  .notice-arrow {
-    font-size: 32rpx;
-    color: #ccc;
-    line-height: 1;
-  }
-}
-
-/* 功能入口宫格 - 2x2 */
-.feature-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-gap: 20rpx;
-  padding: 0 24rpx;
-  margin-top: 8rpx;
-
-  .feature-item {
-    position: relative;
+  
+  .header-actions {
     display: flex;
-    align-items: left;
-    flex-direction: column;
-    padding: 20rpx;
-    border-radius: 18rpx;
-    background: #fff;
-    box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.04);
-  }
-  .feature-item::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 60rpx;
-    height: 60rpx;
-    border-bottom-left-radius: 80rpx;
-    z-index: 1;
-  }
-  .feature-item:nth-child(1)::after,
-  .feature-item:nth-child(2)::after {
-    background: #fef2f2; /* 可换成你的主题粉 */
-  }
-  .feature-item:nth-child(3)::after,
-  .feature-item:nth-child(4)::after {
-    background: #fffbec; /* 温柔一点的黄 */
-  }
-  .feature-icon {
-    width: 60rpx;
-    height: 60rpx;
-    border-radius: 50%;
-    padding: 5rpx;
-  }
-  .feature-texts {
-    margin-top: 20rpx;
-    display: flex;
-    flex-direction: column;
-    .feature-title {
-      font-size: 28rpx;
-      color: #222;
-      font-weight: 600;
-    }
-    .feature-sub {
-      font-size: 22rpx;
-      color: #888;
-      margin-top: 4rpx;
-    }
-  }
-}
-
-/* 今日灵感 */
-.daily-section {
-  margin: 24rpx 24rpx 0;
-  .daily-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 16rpx;
-    .daily-title {
-      font-size: 32rpx;
-      font-weight: 700;
-      color: #333;
-    }
-    .daily-date {
-      font-size: 24rpx;
-      color: #999;
-      font-family: monospace;
-    }
-  }
-  .daily-card {
-    background: #fff;
-    border-radius: 20rpx;
-    padding: 30rpx;
-    box-shadow: 0 8rpx 24rpx rgba(255, 59, 48, 0.08);
-    position: relative;
-    overflow: hidden;
-  }
-  .daily-card::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 8rpx;
-    height: 100%;
-    background: #ff3b30;
-  }
-  .daily-content {
-    position: relative;
-    padding: 10rpx 20rpx;
-    .quote-mark {
-      font-size: 60rpx;
-      color: #ff3b30;
-      opacity: 0.2;
-      position: absolute;
-      line-height: 1;
-      font-family: serif;
-    }
-    .quote-mark:first-child {
-      top: -10rpx;
-      left: -10rpx;
-    }
-    .quote-mark.right {
-      bottom: -20rpx;
-      right: 0;
-    }
-    .daily-text {
-      font-size: 30rpx;
-      color: #444;
-      line-height: 1.8;
-      font-style: italic;
-      display: block;
-      text-align: justify;
-    }
-  }
-  .daily-actions {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 30rpx;
-    gap: 20rpx;
+    gap: 24rpx;
+    
     .action-btn {
+      width: 72rpx;
+      height: 72rpx;
+      background-color: #f5f7fa;
+      border-radius: 50%;
       display: flex;
       align-items: center;
-      padding: 12rpx 24rpx;
-      border-radius: 999rpx;
-      font-size: 24rpx;
-      transition: all 0.2s;
+      justify-content: center;
+      
       .icon {
-        margin-right: 6rpx;
-        font-size: 26rpx;
+        font-size: 36rpx;
       }
     }
-    .action-btn.copy {
-      background: #f5f5f5;
-      color: #666;
-    }
-    .action-btn.use {
-      background: #ff3b30;
-      color: #fff;
-      box-shadow: 0 4rpx 12rpx rgba(255, 59, 48, 0.3);
-    }
   }
 }
 
-/* 通用区块标题 */
-.section {
-  margin-top: 28rpx;
-}
-.section-header {
-  display: flex;
-  align-items: center;
-  padding: 0 24rpx;
-  .section-bar {
-    width: 10rpx;
-    height: 30rpx;
-    border-radius: 6rpx;
-    background: #ff3b30;
-    margin-right: 12rpx;
-  }
-  .section-title {
-    font-size: 28rpx;
-    color: #222;
-    flex: 1;
-    font-weight: 600;
-  }
-  .section-more {
-    font-size: 24rpx;
-    color: #ff3b30;
-  }
-}
-
-/* 大家都在用 - 网格列表 */
-.use-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 20rpx;
-  padding: 0 24rpx;
-  margin-top: 16rpx;
+/* 红色 Banner 区域 */
+.hero-section {
+  padding: 20rpx 30rpx;
+  background-color: #fff;
   padding-bottom: 40rpx;
-}
-.use-card {
-  background: #fff;
-  border-radius: 20rpx;
-  overflow: hidden;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
-  display: flex;
-  flex-direction: column;
-}
-.card-cover-wrap {
-  position: relative;
-  width: 100%;
-  padding-bottom: 120%; /* 竖向卡片 */
-  background: #f5f5f5;
-}
-.card-cover {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-.card-tag {
-  position: absolute;
-  top: 12rpx;
-  left: 12rpx;
-  padding: 4rpx 12rpx;
-  border-radius: 8rpx;
-  font-size: 20rpx;
-  color: #fff;
-  font-weight: 500;
-  &.tag--hot {
-    background: linear-gradient(135deg, #ff3b30, #ff9500);
+  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;
+    display: flex;
+    flex-direction: column;
+    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);
+      }
+    }
   }
-  &.tag--featured {
-    background: linear-gradient(135deg, #007aff, #5ac8fa);
-  }
-  &.tag--hot2 {
-    background: linear-gradient(135deg, #ff2d55, #ff375f);
-  }
-  &.tag--new {
-    background: linear-gradient(135deg, #5856d6, #af52de);
-  }
-  &.tag--default {
-    background: rgba(0, 0, 0, 0.5);
-  }
-}
-.card-info {
-  padding: 16rpx;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-.card-title {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 8rpx;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.card-desc {
-  font-size: 22rpx;
-  color: #999;
-  line-height: 1.4;
-  margin-bottom: 16rpx;
-  /* 限制2行 */
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-.card-footer {
-  margin-top: auto;
-  display: flex;
-  justify-content: flex-end;
-}
-.cta-btn {
-  font-size: 22rpx;
-  color: #ff3b30;
-  background: rgba(255, 59, 48, 0.08);
-  padding: 8rpx 20rpx;
-  border-radius: 999rpx;
-  font-weight: 500;
 }
 
-.loading-text,
-.no-more-text {
-  text-align: center;
-  font-size: 24rpx;
-  color: #999;
-  padding: 20rpx 0;
-  width: 100%;
+/* 今日问候条 */
+.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;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 40rpx;
+      font-weight: bold;
+      margin-right: 24rpx;
+    }
+    
+    .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;
+      }
+    }
+  }
+  
+  .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);
+  }
+}
+
+/* 快捷标签 */
+.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;
+    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-right: 12rpx;
+    }
+    
+    .tag-text {
+      font-size: 28rpx;
+      color: #555;
+      font-weight: 500;
+    }
+  }
+}
+
+/* 排行榜 */
+.ranking-section {
+  padding: 0 30rpx;
+  
+  .tabs-header {
+    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;
+        }
+      }
+    }
+  }
+  
+  .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);
+          }
+        }
+      }
+    }
+  }
+}
+
+.bottom-spacer {
+  height: 40rpx;
 }
 </style>