feat(新页面): 孟加拉国民革命与团结日

src/router/index.js

@@ -305,6 +305,12 @@ const router = createRouter({
       component: () => import('../views/Reward/RechargeReward.vue'),
       meta: { requiresAuth: true },
     },
+    {
+      path: '/revolution-unity-day',
+      name: 'revolution-unity-day',
+      component: () => import('../views/Activities/RevolutionUnityDay/index.vue'),
+      meta: { requiresAuth: true },
+    },
   ],
 })
 

src/utils/permissionManager.js

@@ -36,6 +36,18 @@ export const PAGES = {
   MAP: '/map',
 }
 
+// 活动页面
+const ACTIVITIES = [
+  '/top-list', //排行榜
+  '/weekly-star', //每周明星
+  '/ranking', //总排行榜
+  '/halloween', //万圣节活动页面
+  '/lottery', // 抽奖活动页面
+  '/recharge-reward', //充值奖励页面
+  '/invitation-to-register', //邀请新用户注册页面
+  '/revolution-unity-day', //孟加拉国民革命与团结日
+]
+
 // 🎯 核心改变：基于身份的权限配置
 // 每个身份拥有的页面权限列表
 export const ROLE_PERMISSIONS = {
@@ -123,19 +135,13 @@ export const ROLE_PERMISSIONS = {
     PAGES.NOT_APP, // 错误页面
     PAGES.PAY_RESULT, // 支付成功页面
     PAGES.MAP, // 地图选择页面
+    ...ACTIVITIES, //活动页面
     '/recharge',
     '/recharge-freight-agent',
-    '/top-list', //排行榜
-    '/weekly-star', //每周明星
-    '/ranking', //总排行榜
-    '/halloween', //万圣节活动页面
     '/recharge-agency-recruit', //充值代理介绍页面
-    '/invitation-to-register', //邀请新用户注册页面
-    '/lottery', // 抽奖活动页面
     '/cash-out', // 提现页面
     '/cash-out-details', //提现详情页面
     '/KYC', //提现资料提交
-    '/recharge-reward', //充值奖励页面
   ],
 
   // 加载页面

src/views/Activities/RevolutionUnityDay/topUser.vue

@@ -0,0 +1,176 @@
+<template>
+  <div style="width: 100%">
+    <div style="position: relative">
+      <img
+        :src="BorderImgUrl"
+        alt=""
+        width="100%"
+        style="display: block; position: relative; z-index: 2"
+      />
+      <!-- 头像 -->
+      <div
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          z-index: 1;
+          display: flex;
+          justify-content: center;
+        "
+        :style="{ height: isTopOne ? '61%' : '58%' }"
+      >
+        <div :style="{ width: isTopOne ? '50%' : '50%', marginTop: isTopOne ? '30%' : '30%' }">
+          <img
+            :src="avatarUrl || ''"
+            alt=""
+            width="100%"
+            style="border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
+            @error="defaultAvatarUrl"
+          />
+        </div>
+      </div>
+      <!-- 用户名和贡献值 -->
+      <div
+        style="
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          z-index: 3;
+          height: 40%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 4px;
+        "
+      >
+        <div
+          style="
+            height: 30%;
+            width: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          "
+        >
+          <div style="font-weight: 860" class="showText" :class="isTopOne ? 'top1Text' : 'text'">
+            {{ name }}
+          </div>
+        </div>
+        <div
+          style="
+            border-radius: 40px;
+            border: 0.64px solid #ffdf36;
+            background: linear-gradient(
+              270deg,
+              transparent 0%,
+              rgba(255, 255, 255, 0.6) 50%,
+              transparent 100%
+            );
+            box-shadow: 0 0 2.558px 0 rgba(0, 0, 0, 0.6) inset;
+
+            padding: 2px 4px;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          "
+          :style="{ width: isTopOne ? '60%' : '50%' }"
+        >
+          <img
+            src="/src/assets/icon/coin.png"
+            alt=""
+            style="display: block"
+            :style="{ width: isTopOne ? '25%' : '35%' }"
+          />
+          <div
+            style="font-weight: 700; color: #ffe601"
+            class="showText"
+            :class="isTopOne ? 'top1Text' : 'text'"
+          >
+            {{ distributionValue }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  isTopOne: {
+    type: Boolean,
+    default: true,
+  },
+
+  avatarUrl: {
+    type: String,
+    default: '/src/assets/images/WeeklyStar/defaultAvatar.png',
+  },
+
+  BorderImgUrl: {
+    type: String,
+    required: true,
+  },
+
+  name: {
+    type: String,
+    default: '',
+  },
+
+  distributionValue: {
+    type: String,
+    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>
+* {
+  font-family: 'SF Pro';
+  color: black;
+}
+
+.showText {
+  color: #fff;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.top1Text {
+  font-size: 12px;
+}
+
+.text {
+  font-size: 10px;
+}
+
+@media screen and (min-width: 768px) {
+  .top1Text {
+    font-size: 24px;
+  }
+
+  .text {
+    font-size: 20px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .top1Text {
+    font-size: 32px;
+  }
+
+  .text {
+    font-size: 28px;
+  }
+}
+</style>