feat(新页面): 充值奖励展示页

src/router/index.js

@@ -299,6 +299,12 @@ const router = createRouter({
       component: () => import('../views/BDCenter/policy.vue'),
       meta: { requiresAuth: true },
     },
+    {
+      path: '/recharge-reward',
+      name: 'recharge-reward',
+      component: () => import('../views/Reward/RechargeReward.vue'),
+      meta: { requiresAuth: true },
+    },
   ],
 })
 

src/utils/permissionManager.js

@@ -135,6 +135,7 @@ export const ROLE_PERMISSIONS = {
     '/cash-out', // 提现页面
     '/cash-out-details', //提现详情页面
     '/KYC', //提现资料提交
+    '/recharge-reward', //充值奖励页面
   ],
 
   // 加载页面

src/utils/routeGuard.js

@@ -414,6 +414,7 @@ class RouteGuard {
       '/cash-out', // 提现页面
       '/cash-out-details', //提现详情页面
       '/KYC', //提现资料提交
+      '/recharge-reward', //充值奖励页面
     ]
     return publicPages.includes(path)
   }

src/views/Reward/RechargeReward.vue

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <!-- Rewards0.png 使用相对定位容器 -->
+    <div style="position: relative">
+      <img :src="images.Rewards0" alt="" style="width: 100%; display: block" />
+      <!-- 绝对定位的覆盖层，与 Rewards0.png 同级 -->
+      <div
+        style="
+          position: absolute;
+          inset: 35% 20%;
+          height: 19%;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          align-items: center;
+        "
+      >
+        <div style="display: grid; grid-template-columns: repeat(2, 1fr)">
+          <div style="width: 100%; aspect-ratio: 1/1; position: relative">
+            <img
+              :src="images.frame"
+              alt=""
+              style="width: 100%; display: block; aspect-ratio: 1/1; position: relative; z-index: 1"
+            />
+            <div
+              style="
+                position: absolute;
+                inset: 0;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                z-index: 0;
+              "
+            >
+              <img
+                :src="''"
+                alt=""
+                style="
+                  display: block;
+                  width: 60%;
+                  border-radius: 50%;
+                  aspect-ratio: 1/1;
+                  object-fit: cover;
+                "
+                @error="defaultAvatarUrl"
+              />
+            </div>
+          </div>
+          <div
+            style="
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              align-items: center;
+            "
+          >
+            <div style="font-weight: 700">Nanfangjian</div>
+            <div style="font-weight: 700">ID:123456789</div>
+          </div>
+        </div>
+        <div class="textGold" style="font-size: 0.9em; font-weight: 700">
+          Accumulated recharge:$999
+        </div>
+        <div class="textGold" style="font-size: 0.8em; font-weight: 700">
+          *Each user can only claim the reward for this event once.
+        </div>
+      </div>
+    </div>
+
+    <!-- 其他图片直接引入 -->
+    <img :src="images.Rewards1" alt="" style="width: 100%; display: block" />
+    <img :src="images.Rewards2" alt="" style="width: 100%; display: block" />
+    <img :src="images.Rewards3" alt="" style="width: 100%; display: block" />
+    <img :src="images.Rewards4" alt="" style="width: 100%; display: block" />
+    <img :src="images.Rewards5" alt="" style="width: 100%; display: block" />
+  </div>
+</template>
+
+<script setup>
+// 使用与Lottery.vue相同的方式导入图片
+const imageModules = import.meta.glob('@/assets/images/RechargeReward/*.{jpg,png,svg}', {
+  eager: true,
+})
+// 生成文件名映射对象（自动移除路径和扩展名）
+const images = Object.fromEntries(
+  Object.entries(imageModules).map(([path, module]) => {
+    const fileName = path.split('/').pop().split('.')[0]
+    return [fileName, module.default]
+  })
+)
+
+// 出错头像
+const defaultAvatarUrl = (e) => {
+  console.log('头像资源出错')
+  e.target.onerror = null //防止循环
+  e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
+}
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: white;
+  font-family: 'SF Pro Text';
+}
+
+.textGold {
+  background: linear-gradient(
+    255deg,
+    #b77c44 28.08%,
+    #fee5bb 46.5%,
+    #bf854a 67.95%,
+    #fcdfb3 85.67%,
+    #c0864b 102.89%,
+    #fbe8d4 122.57%
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 14px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+</style>