From 915dd33aac3189aa26923e15167fac62579cfdae Mon Sep 17 00:00:00 2001
From: zzc <1761997216@qq.com>
Date: Wed, 21 Jan 2026 16:50:44 +0800
Subject: [PATCH] feat: deaw page

---
 api/system.js            |  23 ++
 pages.json               |  11 +-
 pages/fortune/detail.vue | 397 ++++++++++++++++++++++++++++++++++
 pages/fortune/index.vue  | 456 ++++++++++++++++++++++++++++-----------
 4 files changed, 763 insertions(+), 124 deletions(-)
 create mode 100644 pages/fortune/detail.vue

diff --git a/api/system.js b/api/system.js
index 9875b97..4ca2c86 100644
--- a/api/system.js
+++ b/api/system.js
@@ -6,3 +6,26 @@ export const abilityCheck = async (scene) => {
     method: "GET",
   });
 };
+
+export const createShareToken = async (data) => {
+  return request({
+    url: "/api/blessing/share/token",
+    method: "POST",
+    data,
+  });
+};
+
+export const getPageDetail = async (shareToken) => {
+  return request({
+    url: "/api/blessing/page-detail?shareToken=" + shareToken,
+    method: "GET",
+  });
+};
+
+export const getShareReward = async (data) => {
+  return request({
+    url: "/api/blessing/share/reward",
+    method: "POST",
+    data,
+  });
+};
diff --git a/pages.json b/pages.json
index 5f52036..5795cb3 100644
--- a/pages.json
+++ b/pages.json
@@ -6,8 +6,7 @@
         "navigationBarTitleText": "新春祝福",
         "enablePullDownRefresh": true,
         "navigationStyle": "custom",
-        "backgroundColor": "#FFFFFF",
-        "enableShareAppMessage": true
+        "backgroundColor": "#FFFFFF"
       }
     },
     {
@@ -49,6 +48,14 @@
         "enablePullDownRefresh": false,
         "navigationStyle": "custom"
       }
+    },
+    {
+      "path": "pages/fortune/detail",
+      "style": {
+        "navigationBarTitleText": "新年运势",
+        "enablePullDownRefresh": false,
+        "navigationStyle": "custom"
+      }
     }
   ],
   "globalStyle": {
diff --git a/pages/fortune/detail.vue b/pages/fortune/detail.vue
new file mode 100644
index 0000000..f3573c4
--- /dev/null
+++ b/pages/fortune/detail.vue
@@ -0,0 +1,397 @@
+<template>
+  <view class="fortune-detail-page">
+    <!-- 顶部导航栏 (透明) -->
+    <view class="nav-bar">
+      <view class="back-btn" @click="goHome">
+        <text class="uni-icons">🏠</text>
+      </view>
+    </view>
+
+    <!-- 顶部提示条 -->
+    <view class="top-banner" v-if="inviterName">
+      <image
+        class="avatar-icon"
+        v-if="inviterAvatar"
+        :src="inviterAvatar"
+        mode="aspectFill"
+      />
+      <text class="banner-text"
+        >你的好友 {{ inviterName }} 正在测试2026新年运势</text
+      >
+    </view>
+    <view class="top-banner" v-else>
+      <text class="banner-icon">✨</text>
+      <text class="banner-text">2026 灵马贺岁 · 开启你的新年好运</text>
+    </view>
+
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="main-title">2026 灵马贺岁</view>
+      <view class="sub-title">SPIRIT HORSE · LUNAR NEW YEAR FORTUNE</view>
+    </view>
+
+    <!-- 运势卡片 -->
+    <view class="fortune-card">
+      <view class="card-image-wrapper">
+        <image
+          class="card-image"
+          :src="fortuneData.imageUrl || defaultImage"
+          mode="widthFix"
+        />
+        <view class="tag-pill">
+          <text class="tag-text">马到成功</text>
+        </view>
+      </view>
+
+      <view class="card-content">
+        <view class="content-header">
+          <text class="content-sub">2026 灵马贺岁 · 运势卡片</text>
+        </view>
+        <view class="content-title">{{
+          fortuneData.title || "锦鲤附身 · 万事顺遂"
+        }}</view>
+        <view class="content-desc">
+          {{
+            fortuneData.desc ||
+            "灵马奔腾，瑞气盈门。此签预示您在2026年如同千里骏马，不仅拥有敏锐的洞察力，更有贵人暗中相助。事业将如破竹之势，学业更有意外惊喜，心之所向，皆能圆满。"
+          }}
+        </view>
+        <view class="lucky-score">
+          <text class="score-label">幸运指数：</text>
+          <view class="stars">
+            <text v-for="i in 5" :key="i" class="star">★</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部按钮区 -->
+    <view class="action-area">
+      <button class="primary-btn" @click="goTest">
+        我也要测运势 <text class="arrow">↗</text>
+      </button>
+      <button class="secondary-btn" @click="saveCard">
+        <text class="download-icon">📥</text> 保存好运卡片
+      </button>
+    </view>
+
+    <!-- 底部信息 -->
+    <view class="footer-info">
+      <view class="qr-box">
+        <!-- 这里放二维码图片，实际项目中可以用 canvas 生成或后端返回 -->
+        <view class="qr-placeholder"></view>
+      </view>
+      <view class="footer-text">2026 灵马贺岁 · 测出你的新年锦鲤关键词</view>
+      <view class="footer-sub"
+        >LONG-PRESS TO SAVE OR SCAN TO JOIN THE RITUAL</view
+      >
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import { getPageDetail } from "@/api/system.js";
+
+const inviterName = ref("");
+const inviterAvatar = ref("");
+
+const fortuneData = ref({
+  imageUrl: "",
+  title: "",
+  desc: "",
+});
+const defaultImage =
+  "https://file.lihailezzc.com/resource/2a30c7983af2646058a386fcc36d2ab8.png"; // 占位图，实际需替换
+
+onLoad((options) => {
+  if (options.shareToken) {
+    loadPageDetail(options.shareToken);
+  } else {
+    // 仅作演示，如果没传数据，使用默认mock数据
+    // 在实际场景中，可能需要根据 fortuneId 去后端拉取详情
+    if (options.id) {
+      // fetchFortuneDetail(options.id)
+    }
+  }
+});
+
+const loadPageDetail = async (shareToken) => {
+  const data = await getPageDetail(shareToken);
+  fortuneData.value = data;
+  inviterName.value = data?.from?.nickname || "";
+  inviterAvatar.value = data?.from?.avatar || "";
+};
+
+const goHome = () => {
+  uni.switchTab({ url: "/pages/index/index" });
+};
+
+const goTest = () => {
+  // 如果是 tabbar 页面用 switchTab，否则用 navigateTo
+  // 假设 /pages/fortune/index 不是 tabbar 页面
+  uni.reLaunch({ url: "/pages/fortune/index" });
+};
+
+const saveCard = () => {
+  // 这里应该是保存图片逻辑
+  // 由于这是一个网页展示页，如果需要保存整张卡片，通常需要 canvas 绘图
+  // 或者如果 imageUrl 本身就是合成好的海报，直接保存 imageUrl
+  // 简单起见，这里先保存 imageUrl
+  const url = fortuneData.value.imageUrl || defaultImage;
+
+  uni.downloadFile({
+    url: url,
+    success: (res) => {
+      if (res.statusCode === 200) {
+        uni.saveImageToPhotosAlbum({
+          filePath: res.tempFilePath,
+          success: () => {
+            uni.showToast({ title: "保存成功", icon: "success" });
+          },
+          fail: () => {
+            uni.showToast({ title: "保存失败", icon: "none" });
+          },
+        });
+      }
+    },
+    fail: () => {
+      uni.showToast({ title: "下载失败", icon: "none" });
+    },
+  });
+};
+</script>
+
+<style scoped>
+.fortune-detail-page {
+  min-height: 100vh;
+  background-color: #2c1e1c;
+  padding: 44px 20px 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: sans-serif;
+}
+
+.nav-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  padding-left: 16px;
+  z-index: 100;
+}
+.back-btn {
+  width: 32px;
+  height: 32px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+}
+
+.top-banner {
+  background: rgba(255, 215, 0, 0.1);
+  border: 1px solid rgba(255, 215, 0, 0.2);
+  border-radius: 20px;
+  padding: 6px 16px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  margin-top: 10px;
+}
+.banner-icon {
+  margin-right: 6px;
+  font-size: 14px;
+}
+.avatar-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  margin-right: 6px;
+}
+.banner-text {
+  font-size: 12px;
+  color: #ffd700;
+}
+
+.page-header {
+  text-align: center;
+  margin-bottom: 20px;
+}
+.main-title {
+  font-size: 28px;
+  color: #fff;
+  font-weight: bold;
+  letter-spacing: 2px;
+  margin-bottom: 4px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+}
+.sub-title {
+  font-size: 10px;
+  color: #d4af37;
+  letter-spacing: 1px;
+  opacity: 0.8;
+}
+
+.fortune-card {
+  width: 100%;
+  background: #3a2a28;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+  margin-bottom: 30px;
+  border: 1px solid #4a3a38;
+}
+
+.card-image-wrapper {
+  position: relative;
+  width: 100%;
+  /* 保持图片区域有一定高度，防止加载时塌陷 */
+  min-height: 200px;
+}
+.card-image {
+  width: 100%;
+  display: block;
+}
+.tag-pill {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  background: #ffd700; /* 黄色背景 */
+  padding: 10px 6px;
+  border-radius: 20px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+  border: 2px solid #fff;
+}
+.tag-text {
+  writing-mode: vertical-rl;
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  letter-spacing: 4px;
+}
+
+.card-content {
+  padding: 24px;
+}
+.content-header {
+  margin-bottom: 12px;
+}
+.content-sub {
+  font-size: 12px;
+  color: #d4af37;
+  opacity: 0.8;
+}
+.content-title {
+  font-size: 24px;
+  color: #fff;
+  font-weight: bold;
+  margin-bottom: 16px;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+.content-desc {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.8);
+  line-height: 1.8;
+  margin-bottom: 20px;
+  text-align: justify;
+}
+
+.lucky-score {
+  display: flex;
+  align-items: center;
+}
+.score-label {
+  font-size: 12px;
+  color: #ffd700;
+  margin-right: 8px;
+}
+.stars {
+  display: flex;
+}
+.star {
+  color: #ffd700;
+  font-size: 14px;
+  margin-right: 2px;
+}
+
+.action-area {
+  width: 100%;
+  margin-bottom: 30px;
+}
+.primary-btn {
+  background: linear-gradient(90deg, #ffd700 0%, #ffa500 100%);
+  color: #333;
+  font-weight: bold;
+  font-size: 16px;
+  height: 50px;
+  line-height: 50px;
+  border-radius: 25px;
+  margin-bottom: 16px;
+  box-shadow: 0 4px 12px rgba(255, 165, 0, 0.3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+}
+.arrow {
+  margin-left: 6px;
+  font-size: 18px;
+}
+
+.secondary-btn {
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+  font-size: 14px;
+  height: 46px;
+  line-height: 46px;
+  border-radius: 23px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+.download-icon {
+  margin-right: 6px;
+  font-size: 16px;
+}
+
+.footer-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.qr-box {
+  width: 60px;
+  height: 60px;
+  background: #fff;
+  padding: 4px;
+  border-radius: 8px;
+  margin-bottom: 12px;
+}
+.qr-placeholder {
+  width: 100%;
+  height: 100%;
+  background-color: #eee;
+  background-image: url("https://file.lihailezzc.com/resource/qr-placeholder.png");
+  background-size: cover;
+  border-radius: 4px;
+}
+.footer-text {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.6);
+  margin-bottom: 4px;
+}
+.footer-sub {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.3);
+  transform: scale(0.9);
+}
+</style>
diff --git a/pages/fortune/index.vue b/pages/fortune/index.vue
index 65ce98c..9e9793d 100644
--- a/pages/fortune/index.vue
+++ b/pages/fortune/index.vue
@@ -40,7 +40,10 @@
 
       <view class="footer-info">
         <text class="info-icon">ⓘ</text>
-        <text>今日还有 {{ remainingCount }} 次抽取机会，分享可增加次数</text>
+        <text v-if="allowShareCount - useShareCount > 0">
+          今日还有 {{ remainingCount }} 次抽取机会，分享可增加次数
+        </text>
+        <text v-else> 今日还有 {{ remainingCount }} 次抽取机会 </text>
       </view>
     </view>
 
@@ -85,7 +88,6 @@
       </view>
 
       <view class="result-actions">
-        <view class="limit-tip">● 每日仅限一次抽取</view>
         <button class="share-btn" open-type="share">
           <text class="icon">♥</text> 分享获取额外抽取机会
         </button>
@@ -98,7 +100,8 @@
           </button>
         </view>
         <view class="footer-status">
-          已分享 0/3 次 · 今日剩余机会: {{ remainingCount }}
+          已分享 {{ useShareCount }}/{{ allowShareCount }} 次 · 今日剩余机会:
+          {{ remainingCount }}
         </view>
       </view>
     </view>
@@ -109,18 +112,29 @@
       class="share-canvas"
       style="width: 300px; height: 500px; position: fixed; left: 9999px"
     ></canvas>
+
+    <LoginPopup ref="loginPopupRef" @logind="handleLogind" />
   </view>
 </template>
 
 <script setup>
-import { ref, onUnmounted } from "vue";
-import { getBavBarHeight } from "@/utils/system";
-import { onLoad, onShow } from "@dcloudio/uni-app";
+import { ref, onUnmounted, computed } from "vue";
+import { getBavBarHeight, getDeviceInfo } from "@/utils/system";
+import { onLoad, onShow, onShareAppMessage } from "@dcloudio/uni-app";
 import { abilityCheck } from "@/api/system.js";
 import { drawFortune } from "@/api/fortune.js";
+import { createShareToken, getShareReward } from "@/api/system.js";
+import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
+import { useUserStore } from "@/stores/user";
+
+const userStore = useUserStore();
+const loginPopupRef = ref(null);
+const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
 
 const status = ref("initial"); // initial, shaking, result
 const remainingCount = ref(0);
+const allowShareCount = ref(0);
+const useShareCount = ref(0);
 const canUse = ref(true);
 
 // 音效控制
@@ -141,26 +155,50 @@ onShow(() => {
   checkDrawStatus();
 });
 
-const checkDrawStatus = async () => {
-  const res = await abilityCheck("fortune_draw");
-  if (res.canUse) {
-    remainingCount.value = res.remain;
-  }
-};
-
 onUnmounted(() => {
   audioContext.destroy();
 });
 
-const fortunes = [
-  { title: "好运连连", desc: "2026年你将万事如意，惊喜不断。", icon: "☀" },
-  { title: "财源滚滚", desc: "正财偏财滚滚来，荷包满满乐开怀。", icon: "💰" },
-  { title: "事业有成", desc: "职场顺风又顺水，升职加薪在眼前。", icon: "🚀" },
-  { title: "身体健康", desc: "无病无灾身体棒，吃嘛嘛香精神爽。", icon: "💪" },
-  { title: "桃花朵朵", desc: "单身贵族遇良缘，花前月下共缠绵。", icon: "🌸" },
-];
+onShareAppMessage(async () => {
+  const deviceInfo = getDeviceInfo();
+  const shareTokenRes = await createShareToken({
+    targetId: cardId.value,
+    scene: "fortune_draw",
+    ...deviceInfo,
+  });
+  getRewardByShare();
+  return {
+    title: "新春祝福",
+    path: `${cardId.value ? `/pages/fortune/detail?shareToken=${shareTokenRes.shareToken}` : `/pages/fortune/index?shareToken=${shareTokenRes.shareToken}`}`,
+    imageUrl: "/static/images/bg.jpg",
+  };
+});
 
-const currentFortune = ref(fortunes[0]);
+const handleLogind = async () => {
+  checkDrawStatus();
+};
+
+const getRewardByShare = async () => {
+  const res = await getShareReward({ scene: "fortune_draw" });
+  if (res.success) {
+    uni.showToast({ title: "分享成功，额外抽取机会已增加" });
+    checkDrawStatus();
+  }
+};
+
+const checkDrawStatus = async () => {
+  if (!isLoggedIn.value) return;
+
+  const res = await abilityCheck("fortune_draw");
+  if (res.canUse) {
+    remainingCount.value = res.remain;
+    allowShareCount.value = res.allowShareCount || 0;
+    useShareCount.value = res.useShareCount || 0;
+  }
+};
+
+const currentFortune = ref({});
+const cardId = ref("");
 
 const goBack = () => {
   if (status.value === "result") {
@@ -171,6 +209,11 @@ const goBack = () => {
 };
 
 const startShake = async () => {
+  if (!isLoggedIn.value) {
+    loginPopupRef.value.open();
+    return;
+  }
+
   if (remainingCount.value <= 0) {
     uni.showToast({ title: "今日次数已用完", icon: "none" });
     return;
@@ -194,6 +237,7 @@ const startShake = async () => {
 
     setTimeout(() => {
       currentFortune.value = res;
+      cardId.value = res.dataId;
       status.value = "result";
       remainingCount.value--;
     }, waitTime);
@@ -245,23 +289,51 @@ const saveCard = () => {
   const ctx = uni.createCanvasContext("shareCanvas");
 
   // 绘制背景
-  ctx.setFillStyle("#FFF8F0");
+  ctx.setFillStyle("#FFFBF0");
   ctx.fillRect(0, 0, 300, 500);
 
-  // 绘制边框
+  // 绘制外边框
+  ctx.setStrokeStyle("#E6CAA0");
+  ctx.setLineWidth(1);
+  ctx.strokeRect(0, 0, 300, 500);
+
+  // 绘制内装饰边框
   ctx.setStrokeStyle("#D4AF37");
   ctx.setLineWidth(2);
   ctx.strokeRect(10, 10, 280, 480);
 
-  // 绘制内容
-  ctx.setFillStyle("#CC0000");
-  ctx.setFontSize(24);
-  ctx.setTextAlign("center");
-  ctx.fillText(currentFortune.value.title, 150, 100);
-
-  ctx.setFillStyle("#333333");
+  // 绘制年份标签
+  ctx.setFillStyle("#E63946");
+  // 圆角矩形模拟(简化)
+  ctx.fillRect(100, 40, 100, 24);
+  ctx.setFillStyle("#FFFFFF");
   ctx.setFontSize(14);
-  ctx.fillText(currentFortune.value.desc, 150, 150);
+  ctx.setTextAlign("center");
+  ctx.fillText("2026 乙巳年", 150, 57);
+
+  // 绘制标题
+  ctx.setFillStyle("#C0392B");
+  ctx.setFontSize(32);
+  ctx.font = "bold 32px serif";
+  ctx.fillText(currentFortune.value.title, 150, 120);
+
+  // 绘制分隔线
+  ctx.setStrokeStyle("#D4AF37");
+  ctx.beginPath();
+  ctx.moveTo(130, 140);
+  ctx.lineTo(170, 140);
+  ctx.stroke();
+
+  // 绘制描述
+  ctx.setFillStyle("#333333");
+  ctx.setFontSize(16);
+  // 简单换行处理(假设文字不长)
+  ctx.fillText(currentFortune.value.desc, 150, 180);
+
+  // 绘制底部文字
+  ctx.setFillStyle("#888888");
+  ctx.setFontSize(12);
+  ctx.fillText("旧岁千般皆如意，新年万事定称心。", 150, 220);
 
   ctx.draw(false, () => {
     uni.canvasToTempFilePath({
@@ -291,14 +363,45 @@ const saveCard = () => {
 <style scoped>
 .fortune-page {
   min-height: 100vh;
-  background-color: #590000; /* 深红背景 */
-  background-image: linear-gradient(180deg, #590000 0%, #3d0000 100%);
+  background: radial-gradient(
+    circle at 50% 30%,
+    #d93030 0%,
+    #8b0000 60%,
+    #4a0000 100%
+  );
   color: #ffe4c4;
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
-  overflow: hidden;
+  overflow-x: hidden;
+}
+
+/* 装饰纹理背景 */
+.fortune-page::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image:
+    repeating-linear-gradient(
+      45deg,
+      rgba(255, 215, 0, 0.03) 0,
+      rgba(255, 215, 0, 0.03) 1px,
+      transparent 1px,
+      transparent 10px
+    ),
+    repeating-linear-gradient(
+      -45deg,
+      rgba(255, 215, 0, 0.03) 0,
+      rgba(255, 215, 0, 0.03) 1px,
+      transparent 1px,
+      transparent 10px
+    );
+  pointer-events: none;
+  z-index: 0;
 }
 
 /* 导航栏 */
@@ -309,17 +412,20 @@ const saveCard = () => {
   align-items: center;
   padding: 0 16px;
   z-index: 100;
+  position: relative;
 }
 .back-btn {
-  font-size: 32px;
-  color: #ffe4c4;
+  font-size: 28px;
+  color: #ffd700;
   margin-right: 12px;
   line-height: 1;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 .nav-title {
   font-size: 18px;
   font-weight: 600;
-  color: #ffe4c4;
+  color: #ffd700;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 
 /* 初始状态 */
@@ -331,91 +437,138 @@ const saveCard = () => {
   align-items: center;
   justify-content: center;
   padding-bottom: 80px;
+  position: relative;
+  z-index: 1;
 }
 
 .header-text {
   text-align: center;
-  margin-bottom: 40px;
+  margin-bottom: 50px;
 }
 .title {
-  font-size: 20px;
-  color: #ffd700;
-  letter-spacing: 1px;
+  font-size: 22px;
+  color: #ffe4c4;
+  letter-spacing: 2px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 .year {
-  font-size: 24px;
+  font-size: 32px;
   font-weight: bold;
   color: #ffd700;
-  margin: 0 4px;
-  text-decoration: underline;
-  text-decoration-color: #d4af37;
-  text-underline-offset: 4px;
+  margin: 0 8px;
+  font-family: serif;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+  position: relative;
+}
+.year::after {
+  content: "";
+  position: absolute;
+  bottom: -4px;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: rgba(255, 215, 0, 0.6);
+  border-radius: 2px;
 }
 .underline {
-  width: 40px;
-  height: 2px;
-  background: #d4af37;
-  margin: 8px auto 0;
+  display: none;
 }
 
 /* 签筒动画 */
 .shaker-container {
-  margin-bottom: 60px;
+  margin-bottom: 70px;
   position: relative;
 }
 .shaker-body {
   width: 160px;
-  height: 240px;
-  background: linear-gradient(135deg, #8b0000 0%, #500000 100%);
+  height: 250px;
+  /* 更有质感的木纹/红漆效果 */
+  background: linear-gradient(
+    90deg,
+    #600000 0%,
+    #a00000 20%,
+    #d00000 45%,
+    #d00000 55%,
+    #a00000 80%,
+    #600000 100%
+  );
   border-radius: 20px;
-  border: 2px solid #d4af37;
+  border: 4px solid #b8860b;
+  border-top: none; /* 顶部开口 */
   position: relative;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+  box-shadow:
+    inset 0 10px 20px rgba(0, 0, 0, 0.4),
+    0 15px 35px rgba(0, 0, 0, 0.6);
   display: flex;
   justify-content: center;
   align-items: center;
 }
+/* 签筒口边缘 */
+.shaker-body::before {
+  content: "";
+  position: absolute;
+  top: -10px;
+  left: -4px;
+  right: -4px;
+  height: 20px;
+  border: 4px solid #b8860b;
+  border-radius: 50%;
+  background: #400000; /* 内部阴影 */
+  z-index: -1;
+  box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.8);
+}
+
 .label-box {
   width: 60px;
   height: 100px;
-  border: 1px solid #d4af37;
+  background: #800000;
+  border: 2px solid #ffd700;
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 4px;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 .label-text {
-  font-size: 24px;
+  font-size: 28px;
   color: #ffd700;
   writing-mode: vertical-rl;
   font-weight: bold;
-  letter-spacing: 4px;
+  letter-spacing: 6px;
+  font-family: serif;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
 }
+
 .sticks {
   position: absolute;
   top: -40px;
   left: 50%;
   transform: translateX(-50%);
-  width: 100px;
+  width: 120px;
   height: 60px;
   display: flex;
   justify-content: center;
   align-items: flex-end;
+  z-index: -2;
 }
 .stick {
-  width: 12px;
-  height: 80px;
-  background: #daa520;
+  width: 14px;
+  height: 90px;
+  background: linear-gradient(90deg, #daa520 0%, #ffd700 50%, #daa520 100%);
   margin: 0 2px;
   border-radius: 4px 4px 0 0;
   border: 1px solid #b8860b;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 .s2 {
-  height: 90px;
+  height: 110px;
 }
 .s3 {
-  height: 70px;
-  background: #ffd700;
+  height: 90px;
+  background: linear-gradient(90deg, #b8860b 0%, #ffd700 50%, #b8860b 100%);
+}
+.s4 {
+  height: 100px;
 }
 
 .shaking {
@@ -443,26 +596,44 @@ const saveCard = () => {
 }
 
 .action-btn {
-  width: 240px;
-  height: 50px;
-  line-height: 50px;
-  background: linear-gradient(90deg, #d4af37 0%, #ffd700 100%);
-  border-radius: 25px;
+  width: 260px;
+  height: 56px;
+  line-height: 56px;
+  background: linear-gradient(180deg, #ffec8b 0%, #ffd700 40%, #daa520 100%);
+  border-radius: 28px;
   color: #590000;
-  font-size: 18px;
+  font-size: 20px;
   font-weight: bold;
-  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
+  box-shadow:
+    0 6px 0 #b8860b,
+    0 15px 20px rgba(0, 0, 0, 0.4);
+  transition: all 0.1s;
+  border: none;
 }
+.action-btn:active {
+  transform: translateY(4px);
+  box-shadow:
+    0 2px 0 #b8860b,
+    0 5px 10px rgba(0, 0, 0, 0.4);
+}
+.action-btn[disabled] {
+  opacity: 0.8;
+  transform: none;
+}
+
 .footer-info {
-  margin-top: 20px;
-  font-size: 12px;
-  color: rgba(255, 228, 196, 0.6);
+  margin-top: 30px;
+  font-size: 13px;
+  color: rgba(255, 228, 196, 0.8);
   display: flex;
   align-items: center;
+  background: rgba(0, 0, 0, 0.2);
+  padding: 8px 16px;
+  border-radius: 20px;
 }
 .info-icon {
-  margin-right: 4px;
-  font-size: 14px;
+  margin-right: 6px;
+  font-size: 15px;
 }
 
 /* 结果状态 */
@@ -470,6 +641,8 @@ const saveCard = () => {
   width: 100%;
   padding: 20px 30px;
   animation: fadeIn 0.8s ease-out;
+  position: relative;
+  z-index: 1;
 }
 @keyframes fadeIn {
   from {
@@ -484,77 +657,106 @@ const saveCard = () => {
 
 .result-card {
   background: #fffbf0;
-  border-radius: 16px;
-  padding: 20px;
+  border-radius: 12px;
+  padding: 24px;
   position: relative;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
   margin-bottom: 30px;
+  border: 1px solid #e6caa0;
 }
+/* 增加卡片内边框纹理 */
+.result-card:not(.image-mode)::after {
+  content: "";
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  right: 6px;
+  bottom: 6px;
+  border: 1px solid #d4af37;
+  border-radius: 8px;
+  pointer-events: none;
+}
+
 .result-card.image-mode {
   padding: 0;
   overflow: hidden;
   background: transparent;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+  border: none;
 }
+.result-card.image-mode::after {
+  display: none;
+}
+
 .fortune-image {
   width: 100%;
   display: block;
-  border-radius: 16px;
+  border-radius: 12px;
 }
+
 .card-header {
   text-align: center;
-  margin-bottom: 30px;
+  margin-bottom: 24px;
 }
 .year-tag {
-  background: #e63946;
+  background: linear-gradient(90deg, #e63946 0%, #d62828 100%);
   color: #fff;
-  padding: 4px 16px;
+  padding: 6px 20px;
   border-radius: 20px;
   font-size: 14px;
+  font-weight: bold;
+  box-shadow: 0 4px 10px rgba(214, 40, 40, 0.3);
+  letter-spacing: 1px;
 }
 .card-body {
   text-align: center;
   margin-bottom: 40px;
 }
 .icon-circle {
-  width: 80px;
-  height: 80px;
-  background: rgba(230, 57, 70, 0.1);
+  width: 90px;
+  height: 90px;
+  background: rgba(230, 57, 70, 0.08);
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0 auto 20px;
+  border: 1px solid rgba(230, 57, 70, 0.2);
 }
 .result-icon {
-  font-size: 40px;
-  color: #e63946;
+  font-size: 48px;
 }
 .result-title {
-  font-size: 36px;
-  color: #e63946;
+  font-size: 40px;
+  color: #c0392b;
   font-weight: bold;
   display: block;
   margin-bottom: 16px;
+  font-family: serif;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 .divider {
-  width: 40px;
-  height: 2px;
-  background: #d4af37;
+  width: 60px;
+  height: 3px;
+  background: linear-gradient(90deg, transparent, #d4af37, transparent);
   margin: 0 auto 20px;
 }
 .result-desc {
-  font-size: 16px;
+  font-size: 18px;
   color: #333;
   display: block;
-  margin-bottom: 12px;
+  margin-bottom: 16px;
+  line-height: 1.6;
+  font-weight: 500;
 }
 .result-sub {
   font-size: 14px;
-  color: #666;
+  color: #888;
+  font-style: italic;
 }
 .card-footer {
-  border-top: 1px dashed #d4af37;
-  padding-top: 16px;
+  border-top: 1px dashed #e0e0e0;
+  padding-top: 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -565,67 +767,77 @@ const saveCard = () => {
 }
 .sub-en {
   font-size: 10px;
-  color: #999;
-  letter-spacing: 1px;
+  color: #aaa;
+  letter-spacing: 2px;
+  margin-bottom: 2px;
 }
 .sub-cn {
-  font-size: 14px;
+  font-size: 16px;
   font-weight: bold;
-  color: #333;
-}
-.footer-right {
-  display: flex;
-  align-items: center;
+  color: #555;
+  font-family: serif;
 }
 .scan-tip {
   font-size: 10px;
   color: #999;
   text-align: right;
-  margin-right: 8px;
+  margin-right: 10px;
+  line-height: 1.4;
 }
 .qr-code {
-  width: 40px;
-  height: 40px;
-  background: #ddd; /* 占位 */
-  background-image: url("https://file.lihailezzc.com/resource/qr-placeholder.png"); /* 替换为真实二维码 */
+  width: 48px;
+  height: 48px;
+  background: #eee;
+  background-image: url("https://file.lihailezzc.com/resource/qr-placeholder.png");
   background-size: cover;
+  border-radius: 4px;
 }
 
 .limit-tip {
   text-align: center;
-  color: rgba(255, 255, 255, 0.6);
-  font-size: 12px;
-  margin-bottom: 12px;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 13px;
+  margin-bottom: 16px;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 }
 .share-btn {
-  background: #e63946;
+  background: linear-gradient(90deg, #e63946 0%, #d62828 100%);
   color: #fff;
   border-radius: 25px;
   font-size: 16px;
+  font-weight: bold;
   margin-bottom: 16px;
   display: flex;
   justify-content: center;
   align-items: center;
+  height: 48px;
+  box-shadow: 0 4px 12px rgba(214, 40, 40, 0.4);
+  border: none;
 }
 .secondary-btns {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 16px;
+  margin-bottom: 20px;
 }
 .sec-btn {
   width: 48%;
-  background: #fff;
-  color: #333;
+  height: 44px;
+  background: rgba(255, 255, 255, 0.9);
+  color: #8b0000;
   font-size: 14px;
-  border-radius: 12px;
+  font-weight: 600;
+  border-radius: 22px;
   display: flex;
   justify-content: center;
   align-items: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  border: none;
 }
 .footer-status {
   text-align: center;
   font-size: 12px;
-  color: #d4af37;
+  color: rgba(255, 215, 0, 0.8);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 }
 .icon {
   margin-right: 6px;