fix: page

components/LuckyPopup/LuckyPopup.vue

@@ -20,7 +20,7 @@
 
       <!-- 结果阶段 -->
       <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>
@@ -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">
+        <view class="bottom-actions">
-          <button class="share-btn" open-type="share">
+          <view class="action-btn" @tap="onSaveImage">
-            <uni-icons type="redo" size="18" color="#fff" style="margin-right: 8rpx;" />
+            <uni-icons type="download" size="24" color="#fff" />
-            <text>分享我的今日好运</text>
+            <text class="btn-label">保存</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>
 
-        <!-- 关闭按钮 -->
+          <button class="action-btn share-btn" open-type="share">
-        <view class="close-btn" @tap="close">
+            <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: '鸿运当头',
+  luckyWord: "鸿运当头",
-  yi: '沟通合作、尝试新事物',
+  yi: "沟通合作、尝试新事物",
-  ji: '熬夜、冲动消费',
+  ji: "熬夜、冲动消费",
-  luckyColor: '如意金',
+  luckyColor: "如意金",
-  luckyNumber: '6',
+  luckyNumber: "6",
-  luckyDirection: '东南',
+  luckyDirection: "东南",
-  quote: '今天适合向前一步，好运正在回应你的努力。'
+  quote: "今天适合向前一步，好运正在回应你的努力。",
 });
 
-const texts = [
+const texts = ["好运加载中...", "今日能量汇集中 ✨", "正在计算你的幸运指数..."];
-  '好运加载中...',
-  '今日能量汇集中 ✨',
-  '正在计算你的幸运指数...'
-];
 
 const open = () => {
   isAnimating.value = true;
@@ -174,9 +172,12 @@ const startAnimation = () => {
   }, 1800);
 };
 
-const onGetReward = () => {
+const onSaveImage = () => {
-  uni.showToast({ title: '奖励已领取', icon: 'success' });
+  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;
+    width: 100%;
-    height: 560rpx;
+    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;
@@ -238,10 +240,18 @@ defineExpose({ open, close });
         border-radius: 50%;
         animation: orbit 1.5s linear infinite;
 
-        &.p1 { animation-delay: 0s; }
+        &.p1 {
-        &.p2 { animation-delay: -0.375s; }
+          animation-delay: 0s;
-        &.p3 { animation-delay: -0.75s; }
+        }
-        &.p4 { animation-delay: -1.125s; }
+        &.p2 {
+          animation-delay: -0.375s;
+        }
+        &.p3 {
+          animation-delay: -0.75s;
+        }
+        &.p4 {
+          animation-delay: -1.125s;
+        }
       }
     }
 
@@ -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,6 +291,7 @@ defineExpose({ open, close });
 
   .lucky-card {
     width: 100%;
+    height: 850rpx;
     background: #fff;
     border-radius: 40rpx;
     overflow: hidden;
@@ -298,8 +313,12 @@ defineExpose({ open, close });
         font-size: 24rpx;
         opacity: 0.6;
 
-        &.left { left: 30rpx; }
+        &.left {
-        &.right { right: 30rpx; }
+          left: 30rpx;
+        }
+        &.right {
+          right: 30rpx;
+        }
       }
 
       .header-label {
@@ -446,85 +465,76 @@ 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;
-      align-items: center;
+    justify-content: space-around;
-      justify-content: center;
+    padding: 0 40rpx;
-      margin-bottom: 24rpx;
+    box-sizing: border-box;
-      backdrop-filter: blur(10rpx);
 
-      &::after { border: none; }
+    .action-btn {
-    }
-    
-    .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);
-      padding: 0;
-      
-      &::after { border: none; }
-      
-      .btn-content {
       display: flex;
       flex-direction: column;
       align-items: center;
+      background: none;
+      border: none;
+      padding: 0;
+      margin: 0;
+      line-height: 1.2;
 
-        .main-row {
+      &::after {
-          display: flex;
+        border: none;
-          align-items: center;
-          margin-bottom: 4rpx;
-          
-          text {
-            color: #fff;
-            font-size: 30rpx;
-            font-weight: 600;
-          }
       }
 
-        .sub-text {
+      :deep(.uni-icons) {
-          font-size: 20rpx;
+        width: 88rpx;
-          color: rgba(255, 255, 255, 0.8);
+        height: 88rpx;
-        }
+        background: rgba(255, 255, 255, 0.15);
-      }
-    }
-  }
-  
-  .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);
+        align-items: center;
+        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;
+      }
+    }
   }
 }
 
 @keyframes orbit {
-  0% { transform: rotate(0deg) translateX(40rpx) rotate(0deg); }
+  0% {
-  100% { transform: rotate(360deg) translateX(40rpx) rotate(-360deg); }
+    transform: rotate(0deg) translateX(40rpx) rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg) translateX(40rpx) rotate(-360deg);
+  }
 }
 
 @keyframes flash {
-  0% { opacity: 0; transform: scale(0.8); }
+  0% {
-  50% { opacity: 1; transform: scale(1.2); }
+    opacity: 0;
-  100% { opacity: 0; transform: scale(1.5); }
+    transform: scale(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.5);
+  }
 }
 </style>

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>