Merge branch 'milestone-20250826-财富金轮' into dev

src/router/index.js

@@ -68,7 +68,14 @@ const routes = [
         name: 'marketTemperature',
         component: () => import('@/views/components/marketTemperature.vue')
 
-    }
+    },
+    {
+
+        path: '/goldenWheel',
+        name: 'goldenWheel',
+        component: () => import('@/views/wealth/goldenWheel.vue')
+
+    },
 
 ]
 // 创建路由实例

src/views/wealth/goldenWheel.vue

@@ -0,0 +1,343 @@
+<template>
+    <div class="app-container">
+      <!-- 背景图 -->
+      <img class="bg-image" src="@/assets/img/wealth/bg.png" alt="背景">
+      
+      <!-- 顶部栏 -->
+      <div class="header">
+        <div class="expire-time">到期时间: 2023-12-31</div>
+        <div class="icons">
+          <div class="icon-btn">
+            <img src="@/assets/img/wealth/history.png" alt="历史记录">
+          </div>
+          <div class="icon-btn">
+            <img src="@/assets/img/wealth/rule.png" alt="规则">
+          </div>
+          <div class="icon-btn">
+            <img src="@/assets/img/wealth/home.png" alt="首页">
+          </div>
+        </div>
+      </div>
+      
+      <!-- 标题图片 -->
+      <img class="title-image" src="@/assets/img/wealth/text.png" alt="转动财富金轮 开启财富人生">
+      
+      <!-- 转盘区域 -->
+      <div class="wheel-container">
+        <img class="pointer-cover" src="@/assets/img/wealth/gai.png" alt="指针盖">
+        <img class="pointer" src="@/assets/img/wealth/zhizhen.png" alt="指针">
+        <img class="wheel" :style="{ transform: `rotate(${wheelRotation}deg)` }" src="@/assets/img/wealth/wheel.png" alt="财富金轮">
+      </div>
+      
+      <!-- 底部区域 -->
+      <div class="bottom-section">
+        <img class="popup-image" src="@/assets/img/wealth/tanchuang.png" alt="弹出窗口">
+        <button class="spin-button" @click="spinWheel">开始抽奖</button>
+      </div>
+      
+      <!-- 中奖弹窗 -->
+      <div class="prize-popup" :class="{ active: showPrizePopup }">
+        <div class="popup-content">
+          <span class="close-popup" @click="showPrizePopup = false">×</span>
+          <h2 class="prize-title">恭喜您获得大奖!</h2>
+          <p class="prize-desc">您已获得888元现金红包</p>
+          <button class="claim-btn" @click="claimPrize">立即领取</button>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { ref } from 'vue';
+  
+  export default {
+    name: 'App',
+    setup() {
+      const wheelRotation = ref(0);
+      const showPrizePopup = ref(false);
+      const isSpinning = ref(false);
+      
+      const spinWheel = () => {
+        if (isSpinning.value) return;
+        
+        isSpinning.value = true;
+        // 随机旋转角度 (至少5圈以上)
+        const rounds = 5 + Math.floor(Math.random() * 5);
+        const extraDegrees = Math.floor(Math.random() * 360);
+        const totalRotation = rounds * 360 + extraDegrees;
+        
+        wheelRotation.value = totalRotation;
+        
+        // 模拟抽奖过程，4秒后显示结果
+        setTimeout(() => {
+          showPrizePopup.value = true;
+          isSpinning.value = false;
+        }, 4000);
+      };
+      
+      const claimPrize = () => {
+        alert('奖品领取成功！');
+        showPrizePopup.value = false;
+      };
+      
+      return {
+        wheelRotation,
+        showPrizePopup,
+        spinWheel,
+        claimPrize
+      };
+    }
+  }
+  </script>
+  
+    
+  <style>
+  * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      -webkit-tap-highlight-color: transparent;
+  }
+  
+  body {
+      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
+      background: linear-gradient(135deg, #2c3e50 0%, #1a1a2e 100%);
+      color: #fff;
+      overflow: hidden;
+      height: 100vh;
+  }
+  
+  #app {
+      width: 100vw;
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      overflow: hidden;
+  }
+  
+  .bg-image {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      z-index: -1;
+  }
+  
+  .header {
+      display: flex;
+      justify-content: space-between;
+      padding: 15px 20px;
+      width: 100%;
+      z-index: 10;
+  }
+  
+  .expire-time {
+      font-size: 14px;
+      background: rgba(0, 0, 0, 0.3);
+      padding: 6px 12px;
+      border-radius: 15px;
+      backdrop-filter: blur(5px);
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  }
+  
+  .icons {
+      display: flex;
+      gap: 15px;
+  }
+  
+  .icon-btn {
+      width: 30px;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(255, 215, 0, 0.8);
+      border-radius: 50%;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  }
+  
+  .icon-btn img {
+      width: 18px;
+      height: 18px;
+  }
+  
+  .title-image {
+      width: 80%;
+      max-width: 300px;
+      margin: 10px auto 0;
+      z-index: 5;
+  }
+  
+  .wheel-container {
+      position: relative;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      margin-top: 10px;
+      z-index: 5;
+  }
+  
+  .wheel {
+      width: 300px;
+      height: 300px;
+      position: relative;
+      transition: transform 4s cubic-bezier(0.17, 0.67, 0.21, 0.99);
+  }
+  
+  .pointer {
+      position: absolute;
+      top: -15px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 40px;
+      height: 60px;
+      z-index: 20;
+  }
+  
+  .pointer-cover {
+      position: absolute;
+      top: -40px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 60px;
+      height: 60px;
+      z-index: 25;
+  }
+  
+  .bottom-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-top: 30px;
+      width: 100%;
+      z-index: 5;
+  }
+  
+  .popup-image {
+      width: 90%;
+      max-width: 320px;
+      margin-bottom: 20px;
+  }
+  
+  .spin-button {
+      width: 180px;
+      height: 60px;
+      background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
+      border: none;
+      border-radius: 30px;
+      color: #8B4513;
+      font-size: 20px;
+      font-weight: bold;
+      box-shadow: 0 4px 15px rgba(255, 215, 0, 0.5);
+      cursor: pointer;
+      margin-bottom: 30px;
+      transition: all 0.3s;
+  }
+  
+  .spin-button:active {
+      transform: scale(0.95);
+      box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
+  }
+  
+  .prize-popup {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.8);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 100;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.5s;
+  }
+  
+  .prize-popup.active {
+      opacity: 1;
+      pointer-events: all;
+  }
+  
+  .popup-content {
+      background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
+      width: 80%;
+      max-width: 300px;
+      border-radius: 20px;
+      padding: 30px;
+      text-align: center;
+      box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
+      position: relative;
+  }
+  
+  .close-popup {
+      position: absolute;
+      top: 10px;
+      right: 15px;
+      font-size: 24px;
+      color: #8B4513;
+      cursor: pointer;
+  }
+  
+  .prize-title {
+      color: #8B4513;
+      font-size: 22px;
+      margin-bottom: 15px;
+  }
+  
+  .prize-desc {
+      color: #8B4513;
+      font-size: 16px;
+      margin-bottom: 20px;
+  }
+  
+  .claim-btn {
+      background: #8B4513;
+      color: #FFD700;
+      border: none;
+      padding: 10px 25px;
+      border-radius: 20px;
+      font-size: 16px;
+      cursor: pointer;
+  }
+  
+  @media (max-height: 700px) {
+      .wheel {
+          width: 250px;
+          height: 250px;
+      }
+      
+      .title-image {
+          max-width: 250px;
+      }
+      
+      .spin-button {
+          width: 160px;
+          height: 50px;
+          font-size: 18px;
+      }
+  }
+  
+  @media (max-height: 600px) {
+      .wheel {
+          width: 220px;
+          height: 220px;
+      }
+      
+      .title-image {
+          max-width: 220px;
+      }
+      
+      .spin-button {
+          width: 140px;
+          height: 45px;
+          font-size: 16px;
+      }
+  }
+</style>