From 5e49b247dbe22f6f44f93144b28ad8b7bba6358e Mon Sep 17 00:00:00 2001
From: zzc <1761997216@qq.com>
Date: Tue, 24 Feb 2026 17:43:36 +0800
Subject: [PATCH] fix:  page

---
 components/LuckyPopup/LuckyPopup.vue | 318 ++++++++++++++-------------
 pages/index/index.vue                |   4 +-
 2 files changed, 166 insertions(+), 156 deletions(-)

diff --git a/components/LuckyPopup/LuckyPopup.vue b/components/LuckyPopup/LuckyPopup.vue
index 7677cd7..01fddab 100644
--- a/components/LuckyPopup/LuckyPopup.vue
+++ b/components/LuckyPopup/LuckyPopup.vue
@@ -20,19 +20,19 @@
 
       <!-- 结果阶段 -->
       <view v-else class="result-container">
-        <view class="lucky-card">
+        <view class="lucky-card" id="lucky-card">
           <!-- 头部渐变区 -->
           <view class="card-header">
             <view class="header-decor left">福</view>
             <view class="header-decor right">禧</view>
-            
+
             <text class="header-label">今日好运指数</text>
             <view class="score-wrap">
               <text class="score">{{ resultData.score }}</text>
               <text class="percent">%</text>
             </view>
             <text class="lucky-word">{{ resultData.luckyWord }}</text>
-            
+
             <view class="tag-year">2026 CNY SPECIAL</view>
           </view>
 
@@ -65,7 +65,9 @@
               <view class="elements-row">
                 <view class="el-item">
                   <text class="label">颜色</text>
-                  <text class="value color-val">{{ resultData.luckyColor }}</text>
+                  <text class="value color-val">{{
+                    resultData.luckyColor
+                  }}</text>
                 </view>
                 <view class="divider"></view>
                 <view class="el-item">
@@ -85,26 +87,26 @@
         </view>
 
         <!-- 底部按钮 -->
-        <view class="action-buttons">
-          <button class="share-btn" open-type="share">
-            <uni-icons type="redo" size="18" color="#fff" style="margin-right: 8rpx;" />
-            <text>分享我的今日好运</text>
-          </button>
-          
-          <button class="reward-btn" @tap="onGetReward">
-            <view class="btn-content">
-              <view class="main-row">
-                <uni-icons type="gift" size="18" color="#fff" style="margin-right: 8rpx;" />
-                <text>领取今日好运奖励</text>
-              </view>
-              <text class="sub-text">已解锁免费头像模板等奖励</text>
-            </view>
-          </button>
-        </view>
+        <view class="bottom-actions">
+          <view class="action-btn" @tap="onSaveImage">
+            <uni-icons type="download" size="24" color="#fff" />
+            <text class="btn-label">保存</text>
+          </view>
 
-        <!-- 关闭按钮 -->
-        <view class="close-btn" @tap="close">
-          <uni-icons type="closeempty" size="24" color="#fff" />
+          <button class="action-btn share-btn" open-type="share">
+            <uni-icons type="paperplane" size="24" color="#fff" />
+            <text class="btn-label">好友</text>
+          </button>
+
+          <view class="action-btn" @tap="onShareMoments">
+            <uni-icons type="camera" size="24" color="#fff" />
+            <text class="btn-label">朋友圈</text>
+          </view>
+
+          <view class="action-btn close-btn" @tap="close">
+            <uni-icons type="closeempty" size="24" color="#fff" />
+            <text class="btn-label">关闭</text>
+          </view>
         </view>
       </view>
     </uni-popup>
@@ -112,30 +114,26 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref } from "vue";
 
 const popup = ref(null);
 const isAnimating = ref(true);
 const isFlipping = ref(false);
 const showLight = ref(false);
-const loadingText = ref('好运加载中...');
+const loadingText = ref("好运加载中...");
 
 const resultData = ref({
   score: 88,
-  luckyWord: '鸿运当头',
-  yi: '沟通合作、尝试新事物',
-  ji: '熬夜、冲动消费',
-  luckyColor: '如意金',
-  luckyNumber: '6',
-  luckyDirection: '东南',
-  quote: '今天适合向前一步，好运正在回应你的努力。'
+  luckyWord: "鸿运当头",
+  yi: "沟通合作、尝试新事物",
+  ji: "熬夜、冲动消费",
+  luckyColor: "如意金",
+  luckyNumber: "6",
+  luckyDirection: "东南",
+  quote: "今天适合向前一步，好运正在回应你的努力。",
 });
 
-const texts = [
-  '好运加载中...',
-  '今日能量汇集中 ✨',
-  '正在计算你的幸运指数...'
-];
+const texts = ["好运加载中...", "今日能量汇集中 ✨", "正在计算你的幸运指数..."];
 
 const open = () => {
   isAnimating.value = true;
@@ -143,7 +141,7 @@ const open = () => {
   showLight.value = false;
   loadingText.value = texts[0];
   popup.value.open();
-  
+
   startAnimation();
 };
 
@@ -166,7 +164,7 @@ const startAnimation = () => {
     clearInterval(timer);
     isFlipping.value = true;
     showLight.value = true;
-    
+
     // 动画结束后显示结果
     setTimeout(() => {
       isAnimating.value = false;
@@ -174,9 +172,12 @@ const startAnimation = () => {
   }, 1800);
 };
 
-const onGetReward = () => {
-  uni.showToast({ title: '奖励已领取', icon: 'success' });
-  // 这里可以跳转到任务中心或直接发放奖励
+const onSaveImage = () => {
+  uni.showToast({ title: "保存功能开发中", icon: "none" });
+};
+
+const onShareMoments = () => {
+  uni.showToast({ title: "请点击右上角分享", icon: "none" });
 };
 
 defineExpose({ open, close });
@@ -187,7 +188,7 @@ defineExpose({ open, close });
   /* 动画容器 */
   .animation-container {
     width: 600rpx;
-    height: 800rpx;
+    height: 850rpx;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -196,23 +197,24 @@ defineExpose({ open, close });
   }
 
   .card-flip-wrapper {
-    width: 400rpx;
-    height: 560rpx;
+    width: 100%;
+    height: 100%;
     position: relative;
     transform-style: preserve-3d;
-    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
-    
+    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+
     &.flipped {
       transform: rotateY(180deg);
     }
   }
 
-  .card-front, .card-back {
+  .card-front,
+  .card-back {
     position: absolute;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
-    border-radius: 32rpx;
+    border-radius: 40rpx;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -223,13 +225,13 @@ defineExpose({ open, close });
   .card-front {
     background: linear-gradient(135deg, #2c3e50 0%, #000000 100%);
     z-index: 2;
-    
+
     .loading-circle {
       width: 120rpx;
       height: 120rpx;
       position: relative;
       margin-bottom: 40rpx;
-      
+
       .particle {
         position: absolute;
         width: 20rpx;
@@ -237,14 +239,22 @@ defineExpose({ open, close });
         background: #ffd700;
         border-radius: 50%;
         animation: orbit 1.5s linear infinite;
-        
-        &.p1 { animation-delay: 0s; }
-        &.p2 { animation-delay: -0.375s; }
-        &.p3 { animation-delay: -0.75s; }
-        &.p4 { animation-delay: -1.125s; }
+
+        &.p1 {
+          animation-delay: 0s;
+        }
+        &.p2 {
+          animation-delay: -0.375s;
+        }
+        &.p3 {
+          animation-delay: -0.75s;
+        }
+        &.p4 {
+          animation-delay: -1.125s;
+        }
       }
     }
-    
+
     .loading-text {
       color: #ffd700;
       font-size: 28rpx;
@@ -261,7 +271,11 @@ defineExpose({ open, close });
     position: absolute;
     width: 100%;
     height: 100%;
-    background: radial-gradient(circle, rgba(255, 215, 0, 0.8) 0%, transparent 70%);
+    background: radial-gradient(
+      circle,
+      rgba(255, 215, 0, 0.8) 0%,
+      transparent 70%
+    );
     opacity: 0;
     animation: flash 0.6s ease-out forwards;
     pointer-events: none;
@@ -277,11 +291,12 @@ defineExpose({ open, close });
 
   .lucky-card {
     width: 100%;
+    height: 850rpx;
     background: #fff;
     border-radius: 40rpx;
     overflow: hidden;
     margin-bottom: 40rpx;
-    
+
     .card-header {
       height: 360rpx;
       background: linear-gradient(180deg, #d84315 0%, #ffca28 100%);
@@ -291,80 +306,84 @@ defineExpose({ open, close });
       align-items: center;
       justify-content: center;
       color: #fff;
-      
+
       .header-decor {
         position: absolute;
         top: 20rpx;
         font-size: 24rpx;
         opacity: 0.6;
-        
-        &.left { left: 30rpx; }
-        &.right { right: 30rpx; }
+
+        &.left {
+          left: 30rpx;
+        }
+        &.right {
+          right: 30rpx;
+        }
       }
-      
+
       .header-label {
         font-size: 24rpx;
         margin-bottom: 16rpx;
         opacity: 0.9;
         letter-spacing: 2rpx;
       }
-      
+
       .score-wrap {
         display: flex;
         align-items: baseline;
         line-height: 1;
         margin-bottom: 16rpx;
-        
+
         .score {
           font-size: 120rpx;
           font-weight: bold;
-          text-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
+          text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
         }
-        
+
         .percent {
           font-size: 40rpx;
           margin-left: 4rpx;
           font-weight: 500;
         }
       }
-      
+
       .lucky-word {
         font-size: 48rpx;
         font-weight: bold;
         letter-spacing: 4rpx;
-        text-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
+        text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
         margin-bottom: 32rpx;
       }
-      
+
       .tag-year {
-        background: rgba(0,0,0,0.15);
+        background: rgba(0, 0, 0, 0.15);
         padding: 8rpx 24rpx;
         border-radius: 30rpx;
         font-size: 20rpx;
         letter-spacing: 2rpx;
       }
     }
-    
+
     .card-body {
       padding: 40rpx 32rpx;
-      
+
       .yi-ji-grid {
         display: flex;
         gap: 24rpx;
         margin-bottom: 32rpx;
-        
+
         .grid-item {
           flex: 1;
           background: #fbfbfb;
           border-radius: 20rpx;
           padding: 24rpx;
           border: 2rpx solid #f5f5f5;
-          
+
           .item-title {
             display: flex;
             align-items: center;
             margin-bottom: 12rpx;
-            
+
             text {
               font-size: 24rpx;
               font-weight: bold;
@@ -372,7 +391,7 @@ defineExpose({ open, close });
               margin-left: 8rpx;
             }
           }
-          
+
           .item-content {
             font-size: 22rpx;
             color: #666;
@@ -380,19 +399,19 @@ defineExpose({ open, close });
           }
         }
       }
-      
+
       .lucky-elements {
         background: #fbfbfb;
         border-radius: 20rpx;
         padding: 24rpx;
         border: 2rpx solid #f5f5f5;
         margin-bottom: 32rpx;
-        
+
         .elements-title {
           display: flex;
           align-items: center;
           margin-bottom: 20rpx;
-          
+
           text {
             font-size: 26rpx;
             font-weight: bold;
@@ -400,35 +419,35 @@ defineExpose({ open, close });
             margin-left: 8rpx;
           }
         }
-        
+
         .elements-row {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          
+
           .el-item {
             flex: 1;
             display: flex;
             flex-direction: column;
             align-items: center;
-            
+
             .label {
               font-size: 20rpx;
               color: #999;
               margin-bottom: 8rpx;
             }
-            
+
             .value {
               font-size: 26rpx;
               color: #333;
               font-weight: 600;
-              
+
               &.color-val {
                 color: #d84315;
               }
             }
           }
-          
+
           .divider {
             width: 2rpx;
             height: 40rpx;
@@ -436,7 +455,7 @@ defineExpose({ open, close });
           }
         }
       }
-      
+
       .quote-text {
         text-align: center;
         font-size: 22rpx;
@@ -445,86 +464,77 @@ defineExpose({ open, close });
       }
     }
   }
-  
-  .action-buttons {
+
+  .bottom-actions {
     width: 100%;
-    margin-bottom: 40rpx;
-    
-    .share-btn {
-      background: rgba(255, 255, 255, 0.2);
-      border: 2rpx solid rgba(255, 255, 255, 0.3);
-      color: #fff;
-      font-size: 30rpx;
-      font-weight: 600;
-      height: 96rpx;
-      border-radius: 48rpx;
+    display: flex;
+    justify-content: space-around;
+    padding: 0 40rpx;
+    box-sizing: border-box;
+
+    .action-btn {
       display: flex;
+      flex-direction: column;
       align-items: center;
-      justify-content: center;
-      margin-bottom: 24rpx;
-      backdrop-filter: blur(10rpx);
-      
-      &::after { border: none; }
-    }
-    
-    .reward-btn {
-      background: rgba(255, 255, 255, 0.2);
-      border: 2rpx solid rgba(255, 255, 255, 0.3);
-      height: 120rpx;
-      border-radius: 60rpx;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      backdrop-filter: blur(10rpx);
+      background: none;
+      border: none;
       padding: 0;
-      
-      &::after { border: none; }
-      
-      .btn-content {
+      margin: 0;
+      line-height: 1.2;
+
+      &::after {
+        border: none;
+      }
+
+      :deep(.uni-icons) {
+        width: 88rpx;
+        height: 88rpx;
+        background: rgba(255, 255, 255, 0.15);
+        border-radius: 50%;
         display: flex;
-        flex-direction: column;
+        justify-content: center;
         align-items: center;
-        
-        .main-row {
-          display: flex;
-          align-items: center;
-          margin-bottom: 4rpx;
-          
-          text {
-            color: #fff;
-            font-size: 30rpx;
-            font-weight: 600;
-          }
-        }
-        
-        .sub-text {
-          font-size: 20rpx;
-          color: rgba(255, 255, 255, 0.8);
-        }
+        backdrop-filter: blur(10rpx);
+        border: 2rpx solid rgba(255, 255, 255, 0.2);
+        margin-bottom: 12rpx;
+        transition: all 0.3s;
+      }
+
+      &:active :deep(.uni-icons) {
+        background: rgba(255, 255, 255, 0.25);
+        transform: scale(0.95);
+      }
+
+      .btn-label {
+        font-size: 24rpx;
+        color: #fff;
+        opacity: 0.9;
       }
     }
   }
-  
-  .close-btn {
-    width: 80rpx;
-    height: 80rpx;
-    border-radius: 50%;
-    border: 2rpx solid rgba(255, 255, 255, 0.3);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(0, 0, 0, 0.2);
-  }
 }
 
 @keyframes orbit {
-  0% { transform: rotate(0deg) translateX(40rpx) rotate(0deg); }
-  100% { transform: rotate(360deg) translateX(40rpx) rotate(-360deg); }
+  0% {
+    transform: rotate(0deg) translateX(40rpx) rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg) translateX(40rpx) rotate(-360deg);
+  }
 }
 
 @keyframes flash {
-  0% { opacity: 0; transform: scale(0.8); }
-  50% { opacity: 1; transform: scale(1.2); }
-  100% { opacity: 0; transform: scale(1.5); }
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.5);
+  }
 }
 </style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 3a45e77..4868044 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -193,10 +193,10 @@
     </view>
 
     <!-- Floating Share Button -->
-    <button class="float-share-btn" open-type="share">
+    <!-- <button class="float-share-btn" open-type="share">
       <uni-icons type="upload" size="18" color="#d81e06" />
       <text>分享今日运势</text>
-    </button>
+    </button> -->
 
     <view class="bottom-spacer"></view>