feat(新页面): 印度尼西亚英雄节

src/utils/routeGuard.js

@@ -395,26 +395,33 @@ class RouteGuard {
    * @returns {boolean}
    */
   isPublicPage(path) {
+    // 活动页面
+    const ACTIVITIES = [
+      '/top-list', //排行榜
+      '/weekly-star', //每周明星
+      '/ranking', //总排行榜
+      '/halloween', //万圣节活动页面
+      '/lottery', // 抽奖活动页面
+      '/recharge-reward', //充值奖励页面
+      '/invitation-to-register', //邀请新用户注册页面
+      '/revolution-unity-day', //孟加拉国民革命与团结日
+      '/heroes-day', //印度尼西亚英雄日
+    ]
+
     const publicPages = [
       PAGES.APPLY, // 申请页面 - 重要：申请页面不需要权限检查
       PAGES.NOT_APP, // 错误页面 - APP连接失败时的页面
       PAGES.MAP, // 地图选择页面
+      ...ACTIVITIES, // 活动页面
       '/404', // 404页面
       '/error', // 通用错误页面
       '/recharge',
       '/recharge-freight-agent',
       '/pay-result',
-      '/top-list', //排行榜
-      '/weekly-star', //每周明星
-      '/ranking', //总排行榜
-      '/halloween', //万圣节活动页面
       '/recharge-agency-recruit', //充值代理介绍页面
-      '/invitation-to-register', //邀请新用户注册页面
-      '/lottery', // 抽奖活动页面
       '/cash-out', // 提现页面
       '/cash-out-details', //提现详情页面
       '/KYC', //提现资料提交
-      '/recharge-reward', //充值奖励页面
     ]
     return publicPages.includes(path)
   }

src/views/Activities/heroesDay/topUser.vue

@@ -0,0 +1,193 @@
+<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: 35%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 2px;
+        "
+      >
+        <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="
+            width: 60%;
+            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: 1px 2px;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          "
+          :style="{
+            background:
+              ranking == '1'
+                ? `linear-gradient(270deg, #AD1300 0%, #FE280C 50%, #AD1300 100%)`
+                : ranking == '2'
+                ? `linear-gradient(270deg, #710F3F 0%, #CA3172 47.45%, #710F3F 100%)`
+                : `linear-gradient(270deg, #2A1A67 0%, #6959C9 47.45%, #2A1A67 100%)`,
+          }"
+        >
+          <img
+            src="/src/assets/icon/coin.png"
+            alt=""
+            style="display: block"
+            :style="{ width: isTopOne ? '20%' : '15%' }"
+          />
+          <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: '',
+  },
+
+  ranking: {
+    type: String,
+    default: '1',
+  },
+})
+
+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: 0.7em;
+}
+
+.text {
+  font-size: 0.5em;
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 16px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+</style>