diff --git a/src/assets/images/Activities/Oman/NationalDay/RankingBottomBorder.png b/src/assets/images/Activities/Oman/NationalDay/RankingBottomBorder.png
new file mode 100644
index 0000000..cc3b266
Binary files /dev/null and b/src/assets/images/Activities/Oman/NationalDay/RankingBottomBorder.png differ
diff --git a/src/assets/images/Activities/Oman/NationalDay/RankingItem.png b/src/assets/images/Activities/Oman/NationalDay/RankingItem.png
new file mode 100644
index 0000000..1705aa6
Binary files /dev/null and b/src/assets/images/Activities/Oman/NationalDay/RankingItem.png differ
diff --git a/src/assets/images/Activities/Oman/NationalDay/RankingMain.png b/src/assets/images/Activities/Oman/NationalDay/RankingMain.png
new file mode 100644
index 0000000..110a0ac
Binary files /dev/null and b/src/assets/images/Activities/Oman/NationalDay/RankingMain.png differ
diff --git a/src/assets/images/Activities/Oman/NationalDay/bg.png b/src/assets/images/Activities/Oman/NationalDay/bg.png
new file mode 100644
index 0000000..24fa3f9
Binary files /dev/null and b/src/assets/images/Activities/Oman/NationalDay/bg.png differ
diff --git a/src/assets/images/Activities/Oman/NationalDay/giftItemBg.png b/src/assets/images/Activities/Oman/NationalDay/giftItemBg.png
new file mode 100644
index 0000000..84f38be
Binary files /dev/null and b/src/assets/images/Activities/Oman/NationalDay/giftItemBg.png differ
diff --git a/src/assets/images/Activities/Oman/NationalDay/giftsBg.png b/src/assets/images/Activities/Oman/NationalDay/giftsBg.png
new file mode 100644
index 0000000..4c23368
Binary files /dev/null and b/src/assets/images/Activities/Oman/NationalDay/giftsBg.png differ
diff --git a/src/assets/images/Activities/Oman/NationalDay/help.png b/src/assets/images/Activities/Oman/NationalDay/help.png
new file mode 100644
index 0000000..cd42167
Binary files /dev/null and b/src/assets/images/Activities/Oman/NationalDay/help.png differ
diff --git a/src/assets/images/Activities/Oman/NationalDay/helpInfo.png b/src/assets/images/Activities/Oman/NationalDay/helpInfo.png
new file mode 100644
index 0000000..ca79008
Binary files /dev/null and b/src/assets/images/Activities/Oman/NationalDay/helpInfo.png differ
diff --git a/src/assets/images/Activities/Oman/NationalDay/myRankingBg.png b/src/assets/images/Activities/Oman/NationalDay/myRankingBg.png
new file mode 100644
index 0000000..fb10bcd
Binary files /dev/null and b/src/assets/images/Activities/Oman/NationalDay/myRankingBg.png differ
diff --git a/src/assets/images/Activities/Oman/NationalDay/rankingBt.png b/src/assets/images/Activities/Oman/NationalDay/rankingBt.png
new file mode 100644
index 0000000..6d7eb00
Binary files /dev/null and b/src/assets/images/Activities/Oman/NationalDay/rankingBt.png differ
diff --git a/src/assets/images/Activities/Oman/NationalDay/rankingBtActive.png b/src/assets/images/Activities/Oman/NationalDay/rankingBtActive.png
new file mode 100644
index 0000000..49d21f1
Binary files /dev/null and b/src/assets/images/Activities/Oman/NationalDay/rankingBtActive.png differ
diff --git a/src/assets/images/Activities/Oman/NationalDay/rewardBtActive.png b/src/assets/images/Activities/Oman/NationalDay/rewardBtActive.png
new file mode 100644
index 0000000..a002674
Binary files /dev/null and b/src/assets/images/Activities/Oman/NationalDay/rewardBtActive.png differ
diff --git a/src/assets/images/Activities/Oman/NationalDay/rewardsBt.png b/src/assets/images/Activities/Oman/NationalDay/rewardsBt.png
new file mode 100644
index 0000000..5d2a4f4
Binary files /dev/null and b/src/assets/images/Activities/Oman/NationalDay/rewardsBt.png differ
diff --git a/src/assets/images/Activities/Oman/NationalDay/timeDayBg.png b/src/assets/images/Activities/Oman/NationalDay/timeDayBg.png
new file mode 100644
index 0000000..037d8eb
Binary files /dev/null and b/src/assets/images/Activities/Oman/NationalDay/timeDayBg.png differ
diff --git a/src/assets/images/Activities/Oman/NationalDay/timeHourBg.png b/src/assets/images/Activities/Oman/NationalDay/timeHourBg.png
new file mode 100644
index 0000000..812e73b
Binary files /dev/null and b/src/assets/images/Activities/Oman/NationalDay/timeHourBg.png differ
diff --git a/src/assets/images/Activities/Oman/NationalDay/timeMinBg.png b/src/assets/images/Activities/Oman/NationalDay/timeMinBg.png
new file mode 100644
index 0000000..bf1fce1
Binary files /dev/null and b/src/assets/images/Activities/Oman/NationalDay/timeMinBg.png differ
diff --git a/src/assets/images/Activities/Oman/NationalDay/timeSecBg.png b/src/assets/images/Activities/Oman/NationalDay/timeSecBg.png
new file mode 100644
index 0000000..5a111fc
Binary files /dev/null and b/src/assets/images/Activities/Oman/NationalDay/timeSecBg.png differ
diff --git a/src/assets/images/Activities/Oman/NationalDay/top1RewardBg.png b/src/assets/images/Activities/Oman/NationalDay/top1RewardBg.png
new file mode 100644
index 0000000..04e15f9
Binary files /dev/null and b/src/assets/images/Activities/Oman/NationalDay/top1RewardBg.png differ
diff --git a/src/assets/images/Activities/Oman/NationalDay/top2RewardBg.png b/src/assets/images/Activities/Oman/NationalDay/top2RewardBg.png
new file mode 100644
index 0000000..2337de6
Binary files /dev/null and b/src/assets/images/Activities/Oman/NationalDay/top2RewardBg.png differ
diff --git a/src/assets/images/Activities/Oman/NationalDay/top3RewardBg.png b/src/assets/images/Activities/Oman/NationalDay/top3RewardBg.png
new file mode 100644
index 0000000..fba4131
Binary files /dev/null and b/src/assets/images/Activities/Oman/NationalDay/top3RewardBg.png differ
diff --git a/src/assets/images/Activities/Oman/NationalDay/topOne.png b/src/assets/images/Activities/Oman/NationalDay/topOne.png
new file mode 100644
index 0000000..ca70b9f
Binary files /dev/null and b/src/assets/images/Activities/Oman/NationalDay/topOne.png differ
diff --git a/src/assets/images/Activities/Oman/NationalDay/topThree.png b/src/assets/images/Activities/Oman/NationalDay/topThree.png
new file mode 100644
index 0000000..ce1b165
Binary files /dev/null and b/src/assets/images/Activities/Oman/NationalDay/topThree.png differ
diff --git a/src/assets/images/Activities/Oman/NationalDay/topTwo.png b/src/assets/images/Activities/Oman/NationalDay/topTwo.png
new file mode 100644
index 0000000..88bd908
Binary files /dev/null and b/src/assets/images/Activities/Oman/NationalDay/topTwo.png differ
diff --git a/src/components/itemCenter.vue b/src/components/itemCenter.vue
new file mode 100644
index 0000000..79b4421
--- /dev/null
+++ b/src/components/itemCenter.vue
@@ -0,0 +1,36 @@
+<template>
+  <div style="position: relative; width: 100%">
+    <!-- 背景图 -->
+    <img :src="imgUrl" alt="" width="100%" style="display: block" />
+    <!-- 内容 -->
+    <div
+      style="
+        position: absolute;
+        inset: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      "
+      :style="contentStyle"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  imgUrl: {
+    type: String,
+    required: true,
+  },
+
+  // 内容样式
+  contentStyle: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/router/index.js b/src/router/index.js
index 92b87ac..176795b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -329,6 +329,12 @@ const router = createRouter({
       component: () => import('../views/Activities/Palestinian/IndependenceDay/index.vue'),
       meta: { requiresAuth: true },
     },
+    {
+      path: '/oman-national-day',
+      name: 'oman-national-day',
+      component: () => import('../views/Activities/Oman/NationalDay/index.vue'),
+      meta: { requiresAuth: true },
+    },
   ],
 })
 
diff --git a/src/utils/permissionManager.js b/src/utils/permissionManager.js
index 3beacfc..f8d1d8c 100644
--- a/src/utils/permissionManager.js
+++ b/src/utils/permissionManager.js
@@ -48,6 +48,7 @@ const ACTIVITIES = [
   '/revolution-unity-day', //孟加拉国民革命与团结日
   '/heroes-day', //印度尼西亚英雄日
   '/independence-day', //巴勒斯坦独立日
+  '/oman-national-day', //阿曼国庆日
 ]
 
 // 🎯 核心改变：基于身份的权限配置
diff --git a/src/utils/routeGuard.js b/src/utils/routeGuard.js
index a67b70b..34c4540 100644
--- a/src/utils/routeGuard.js
+++ b/src/utils/routeGuard.js
@@ -407,6 +407,7 @@ class RouteGuard {
       '/revolution-unity-day', //孟加拉国民革命与团结日
       '/heroes-day', //印度尼西亚英雄日
       '/independence-day', //巴勒斯坦独立日
+      '/oman-national-day', //阿曼国庆日
     ]
 
     const publicPages = [
diff --git a/src/views/Activities/Oman/NationalDay/components/topUser.vue b/src/views/Activities/Oman/NationalDay/components/topUser.vue
new file mode 100644
index 0000000..6372975
--- /dev/null
+++ b/src/views/Activities/Oman/NationalDay/components/topUser.vue
@@ -0,0 +1,192 @@
+<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;
+          align-items: center;
+        "
+        :style="{ height: isTopOne ? '73%' : '68%' }"
+      >
+        <div :style="{ width: isTopOne ? '31%' : '58%' }">
+          <img
+            :src="avatarUrl || ''"
+            alt=""
+            width="100%"
+            style="display: block; 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;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 2px;
+        "
+        :style="{ height: ranking == '1' ? '34%' : ranking == '2' ? '34%' : '34%' }"
+      >
+        <div
+          style="
+            height: 30%;
+            width: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          "
+        >
+          <div style="font-weight: 700" class="showText" :class="isTopOne ? 'top1Text' : 'text'">
+            {{ name }}
+          </div>
+        </div>
+        <div
+          style="
+            border-radius: 40px;
+            box-shadow: 0 0 2.558px 0 rgba(0, 0, 0, 0.4) inset;
+            border: 0.64px solid #ffdf36;
+            padding: 1px 2px;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          "
+          :style="{
+            width: ranking == '1' ? `30%` : ranking == '2' ? `50%` : `50%`,
+            background:
+              ranking == '1'
+                ? `linear-gradient(270deg, #AD1300 0%, #FE280C 50%, #AD1300 100%)`
+                : ranking == '2'
+                ? `linear-gradient(270deg, #A3FDF9 0%, #1D7BBD 50%, #A3FDF9 100%)`
+                : `linear-gradient(270deg, #F5EAE4 0%, #F9C29E 50%, #F5EAE4 100%)`,
+          }"
+        >
+          <img
+            src="/src/assets/icon/coin.png"
+            alt=""
+            style="display: block"
+            :style="{ width: isTopOne ? '20%' : '15%' }"
+          />
+          <div
+            style="font-weight: 590"
+            class="showText"
+            :class="isTopOne ? 'top1Text' : 'text'"
+            :style="{
+              color: ranking == '1' ? `#FFE601` : '#FFF',
+            }"
+          >
+            {{ distributionValue }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  isTopOne: {
+    type: Boolean,
+    default: true,
+  },
+
+  avatarUrl: {
+    type: String,
+    default: '',
+  },
+
+  BorderImgUrl: {
+    type: String,
+    required: true,
+  },
+
+  name: {
+    type: String,
+    default: '',
+  },
+
+  distributionValue: {
+    type: String,
+    default: '',
+  },
+
+  ranking: {
+    type: String,
+    default: '1',
+  },
+})
+
+import defaultAvatar from '@/assets/images/WeeklyStar/defaultAvatar.png'
+
+const defaultAvatarUrl = (e) => {
+  console.log('头像资源出错')
+  e.target.onerror = null //防止循环
+  e.target.src = defaultAvatar
+}
+</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.75em;
+}
+
+.text {
+  font-size: 0.6em;
+}
+
+@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>
diff --git a/src/views/Activities/Oman/NationalDay/index.vue b/src/views/Activities/Oman/NationalDay/index.vue
new file mode 100644
index 0000000..e0f8159
--- /dev/null
+++ b/src/views/Activities/Oman/NationalDay/index.vue
@@ -0,0 +1,657 @@
+<!-- src/views/Activities/heroesDay/index.vue -->
+<template>
+  <div class="fullPage">
+    <div class="bg">
+      <!-- 状态栏占位区域（仅在APP中显示） -->
+      <div v-if="isInAppEnvironment" style="height: 30px"></div>
+
+      <!-- 按钮 -->
+      <div style="margin-top: 80vw; display: flex; justify-content: flex-end; align-items: center">
+        <!-- 帮助按钮 -->
+        <img
+          :src="images.help"
+          alt=""
+          style="display: block; position: relative; width: 10%; margin-right: 8px"
+          @click="maskLayerShow = true"
+        />
+      </div>
+
+      <!-- 倒计时 -->
+      <div style="display: flex; justify-content: center; gap: 4px; margin-top: 1vw">
+        <div style="width: 20%">
+          <itemCenter :imgUrl="images.timeDayBg">
+            <div class="timeText" style="margin-bottom: 20%">{{ Days }}D</div>
+          </itemCenter>
+        </div>
+        <div class="timeText timeGap" style="width: 6px"></div>
+        <div style="width: 20%">
+          <itemCenter :imgUrl="images.timeHourBg">
+            <div class="timeText" style="margin-bottom: 20%">{{ Hours }}</div>
+          </itemCenter>
+        </div>
+        <div class="timeText timeGap">:</div>
+        <div style="width: 20%">
+          <itemCenter :imgUrl="images.timeMinBg">
+            <div class="timeText" style="margin-bottom: 20%">{{ Minutes }}</div>
+          </itemCenter>
+        </div>
+        <div class="timeText timeGap">:</div>
+        <div style="width: 20%">
+          <itemCenter :imgUrl="images.timeSecBg">
+            <div class="timeText" style="margin-bottom: 20%">{{ Second }}</div>
+          </itemCenter>
+        </div>
+      </div>
+
+      <!-- 每周礼物 -->
+      <div style="display: flex; justify-content: center; margin-top: 10px">
+        <itemCenter :imgUrl="images.giftsBg" :contentStyle="'paddingTop: 10%;'">
+          <div style="width: 85%; display: flex; justify-content: space-around; margin-top: 10%">
+            <div
+              v-for="(gift, index) in gifts"
+              :key="index"
+              style="width: 30%; display: flex; flex-direction: column"
+            >
+              <itemCenter :imgUrl="images.giftItemBg"
+                ><img
+                  :src="gift.giftPhoto"
+                  alt=""
+                  width="70%"
+                  style="display: block; object-fit: cover"
+              /></itemCenter>
+              <div style="display: flex; justify-content: center; align-items: center; gap: 5px">
+                <img
+                  src="/src/assets/icon/coin.png"
+                  alt=""
+                  style="display: block; width: 25%; aspect-ratio: 1/1"
+                />
+                <div style="color: rgba(255, 255, 255, 1); font-weight: 590">
+                  {{ gift.giftCandy }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </itemCenter>
+      </div>
+
+      <!-- 切换按钮 -->
+      <div style="display: flex; justify-content: space-around">
+        <img
+          :src="rankingShow ? images.rankingBtActive : images.rankingBt"
+          alt=""
+          style="display: block; width: 40%"
+          @click="rankingShow = true"
+        />
+        <img
+          :src="!rankingShow ? images.rewardBtActive : images.rewardsBt"
+          alt=""
+          style="display: block; width: 40%"
+          @click="rankingShow = false"
+        />
+      </div>
+
+      <!-- 展示内容 -->
+      <div>
+        <!-- Ranking -->
+        <div v-show="rankingShow" style="position: relative; width: 100%">
+          <div
+            style="
+              position: absolute;
+              inset: 15vw 2% 3vw;
+              background: linear-gradient(180deg, #3b0001 0%, #aa0408 100%);
+              z-index: 1;
+            "
+          ></div>
+          <div style="position: relative; z-index: 1">
+            <!-- 前三名 -->
+            <itemCenter :imgUrl="images.RankingMain" :contentStyle="`padding: 25% 7% 10%`">
+              <div style="margin-top: 13%">
+                <!-- 第一 -->
+                <div style="display: flex; justify-content: center">
+                  <TopUser
+                    :BorderImgUrl="images.topOne"
+                    :avatarUrl="RankingHasTop3[0].avatar"
+                    :name="RankingHasTop3[0].nickname"
+                    :distributionValue="RankingHasTop3[0].quantity"
+                    style="width: 85%"
+                    @click="viewUserInfo(RankingHasTop3[0].userId)"
+                  />
+                </div>
+                <!-- 第二三 -->
+                <div style="display: flex; justify-content: space-between; margin-top: -5%">
+                  <TopUser
+                    :isTopOne="false"
+                    ranking="2"
+                    :BorderImgUrl="images.topTwo"
+                    :avatarUrl="RankingHasTop3[1].avatar"
+                    :name="RankingHasTop3[1].nickname"
+                    :distributionValue="RankingHasTop3[1].quantity"
+                    style="width: 40%"
+                    @click="viewUserInfo(RankingHasTop3[1].userId)"
+                  />
+                  <TopUser
+                    :isTopOne="false"
+                    ranking="3"
+                    :BorderImgUrl="images.topThree"
+                    :avatarUrl="RankingHasTop3[2].avatar"
+                    :name="RankingHasTop3[2].nickname"
+                    :distributionValue="RankingHasTop3[2].quantity"
+                    style="width: 40%"
+                    @click="viewUserInfo(RankingHasTop3[2].userId)"
+                  />
+                </div>
+              </div>
+            </itemCenter>
+
+            <!-- 第四名开始 -->
+            <div v-if="showRanking.length > 0" style="margin-bottom: 6vw; margin-top: -10vw">
+              <div
+                v-for="listItem in showRanking"
+                style="position: relative"
+                @click="viewUserInfo(listItem.userId)"
+              >
+                <img :src="images.RankingItem" alt="" width="100%" style="display: block" />
+                <div
+                  style="
+                    position: absolute;
+                    inset: 0;
+                    display: flex;
+                    align-items: center;
+                    padding: 0 10%;
+                  "
+                >
+                  <div style="width: 75%; min-width: 0; display: flex; align-items: center">
+                    <div style="color: #edb247; font-weight: 700; width: 10%" class="UserNickname">
+                      {{ listItem?.rank }}
+                    </div>
+                    <img
+                      :src="listItem?.avatar || ''"
+                      alt=""
+                      style="
+                        display: block;
+                        width: 20%;
+                        margin: 0 2%;
+                        aspect-ratio: 1/1;
+                        border-radius: 50%;
+                        object-fit: cover;
+                      "
+                      @error="defaultAvatarUrl"
+                    />
+
+                    <div
+                      style="
+                        min-width: 0;
+                        width: calc(100% - 10% - 24%);
+                        display: flex;
+                        flex-direction: column;
+                      "
+                    >
+                      <div
+                        style="
+                          color: #fff;
+                          font-weight: 860;
+                          overflow: hidden;
+                          white-space: nowrap;
+                          text-overflow: ellipsis;
+                          width: 100%;
+                        "
+                        class="UserNickname"
+                      >
+                        {{ listItem?.nickname }}
+                      </div>
+                      <div style="color: #fff; font-weight: 590" class="UserNickname">
+                        ID:{{ listItem?.account }}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div style="flex: 1; min-width: 0; display: flex; align-items: center">
+                    <img
+                      src="/src/assets/icon/coin.png"
+                      alt=""
+                      style="display: block; width: 30%; aspect-ratio: 1/1; object-fit: cover"
+                    />
+                    <div style="color: #edb247; font-weight: 700" class="UserNickname">
+                      {{ listItem?.quantity }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 底框 -->
+            <img
+              :src="images.RankingBottomBorder"
+              alt=""
+              width="100%"
+              style="display: block; margin-top: -22vw; position: relative; z-index: 9"
+            />
+          </div>
+        </div>
+
+        <!-- Rewards -->
+        <div
+          v-show="!rankingShow"
+          style="display: flex; flex-direction: column; align-items: center"
+        >
+          <div
+            v-for="(rewardsTop, top) in rewardsList"
+            :key="top"
+            style="position: relative; width: 90%; margin: 10px 0"
+          >
+            <div style="position: relative">
+              <img
+                :src="topImg[Number(rewardsTop.rankRange) - 1]"
+                alt=""
+                style="display: block; width: 100%"
+              />
+              <div
+                style="
+                  position: absolute;
+                  inset: 0;
+                  display: grid;
+                  grid-template-columns: repeat(2, 1fr);
+                  gap: 12px;
+                  padding: 30vw 8vw 15vw;
+                "
+              >
+                <div
+                  v-for="(reward, rewardIndex) in rewardsTop.rewards"
+                  :key="rewardIndex"
+                  style="width: 100%"
+                >
+                  <div style="position: relative">
+                    <img :src="images.giftItemBg" style="display: block" alt="" width="100%" />
+                    <div
+                      style="
+                        position: absolute;
+                        inset: 0;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                      "
+                    >
+                      <img
+                        :src="reward.cover || ''"
+                        alt=""
+                        width="70%"
+                        style="display: block; aspect-ratio: 1/1"
+                        @error="(e) => handleImageError(e, reward.type)"
+                      />
+                    </div>
+                  </div>
+
+                  <div style="color: rgba(255, 255, 255, 1); font-weight: 590; text-align: center">
+                    {{ showDetail(reward.type, reward) }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 我的排名 -->
+      <div
+        style="
+          position: sticky;
+          bottom: 0;
+          left: 0;
+          width: 100vw;
+          background: linear-gradient(0deg, #6e1116 0%, #6e1116 100%), #d9d9d9;
+          display: flex;
+          justify-content: center;
+          margin-top: 10px;
+          z-index: 999;
+        "
+      >
+        <img :src="images.myRankingBg" alt="" style="width: 100%; display: block" />
+
+        <div
+          style="
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 2% 5% 0;
+          "
+        >
+          <div
+            style="
+              width: 75%;
+              min-width: 0;
+              display: flex;
+              justify-content: space-around;
+              align-items: center;
+            "
+          >
+            <!-- 排名 -->
+            <div style="color: #edb247; font-weight: 700; width: 10%">
+              {{ myRanking.rank || 999 }}
+            </div>
+            <!-- 头像 -->
+            <img
+              :src="myRanking.avatar || ''"
+              alt=""
+              style="
+                display: block;
+                width: 25%;
+                aspect-ratio: 1/1;
+                border-radius: 50%;
+                object-fit: cover;
+                margin: 0 12px;
+              "
+              @error="defaultAvatarUrl"
+            />
+            <!-- 名称 -->
+            <div
+              style="
+                min-width: 0;
+                width: calc(100% - 10% - 25%);
+                display: flex;
+                flex-direction: column;
+              "
+            >
+              <div
+                style="
+                  width: 100%;
+                  color: #fff;
+                  font-weight: 860;
+                  overflow: hidden;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                "
+                class="UserNickname"
+              >
+                {{ myRanking.nickname }}
+              </div>
+            </div>
+          </div>
+
+          <!-- 贡献值 -->
+          <div
+            style="
+              flex: 1;
+              min-width: 0;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            "
+          >
+            <img
+              src="/src/assets/icon/coin.png"
+              alt=""
+              style="display: block; width: 30%; aspect-ratio: 1/1; object-fit: cover"
+            />
+            <div style="color: #edb247; font-weight: 700">
+              {{ myRanking.quantity || 0 }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 弹窗遮罩层 -->
+      <maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
+        <!-- help弹窗 -->
+        <div style="margin: 20% 0" @click.stop>
+          <img :src="images.helpInfo" alt="" style="display: block; width: 100%" />
+        </div>
+      </maskLayer>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { isInApp, viewUserInfo } from '@/utils/appBridge.js'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import itemCenter from '@/components/itemCenter.vue'
+import TopUser from './components/topUser.vue'
+import maskLayer from '@/components/MaskLayer.vue'
+import { getThisWeekRewardsAndGifts, getRankingListAndMyRanking } from '@/api/activity.js'
+import { connectToApp } from '@/utils/appConnector.js'
+
+// vite动态批量导入图片
+const imageModules = import.meta.glob(
+  '@/assets/images/Activities/Oman/NationalDay/*.{png,jpg,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 isInAppEnvironment = ref(false) // 检测是否在APP环境中
+const maskLayerShow = ref(false) //帮助模块
+
+// 倒计时
+const Days = ref(0)
+const Hours = ref(0)
+const Minutes = ref(0)
+const Second = ref(0)
+let timer = null
+
+// 模块切换展示
+const rankingShow = ref(true) //排行榜
+
+const Ranking = ref([]) // 排行榜
+const myRanking = ref({}) // 我的排名
+const rewardsList = ref([]) // 奖励列表
+const gifts = ref([]) // 本周礼物
+
+const topImg = ref([images.top1RewardBg, images.top2RewardBg, images.top3RewardBg]) // top图片
+
+// 处理排行榜小于3人时的情况
+const RankingHasTop3 = computed(() => {
+  let RankingShow = [...Ranking.value]
+  if (Ranking.value.length < 3) {
+    let addNullUser = Array.from({ length: 3 - Ranking.value.length }, () => ({
+      avatar: '',
+      nickname: '',
+      quantity: '',
+    }))
+    RankingShow.push(...addNullUser)
+  }
+  return RankingShow
+})
+
+// 展示用的榜单
+const showRanking = computed(() => {
+  return Ranking.value.filter((_, index) => index >= 3)
+  // return []
+})
+
+// 奖励图片资源出错处理
+const handleImageError = (e, type) => {
+  console.log('图片资源出错')
+  e.target.onerror = null //防止循环
+  if ((type = 'GOLD')) {
+    e.target.src = new URL('/src/assets/icon/coin.png', import.meta.url).href
+  }
+}
+
+// 头像资源出错处理
+const defaultAvatarUrl = (e) => {
+  console.log('头像资源出错')
+  e.target.onerror = null //防止循环
+  e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
+}
+
+// 获取2025年11月25日上午10点的时间戳（北京时间）
+const getTargetTime = () => {
+  const targetDate = new Date(2025, 10, 25, 10, 0, 0) // 月份从0开始，10代表11月
+  return targetDate.getTime()
+}
+
+const targetTime = ref(getTargetTime())
+
+// 格式化时间
+const formatTime = (value) => {
+  return value < 10 ? `0${value}` : value
+}
+
+// 倒计时
+const getCountdown = () => {
+  const now = Date.now()
+  let diff = targetTime.value - now
+
+  // 如果已过期，显示全零
+  if (diff <= 0) {
+    Days.value = 0
+    Hours.value = '00'
+    Minutes.value = '00'
+    Second.value = '00'
+
+    // 清除定时器
+    if (timer) {
+      clearInterval(timer)
+      timer = null
+    }
+    return
+  }
+
+  const totalSeconds = Math.floor(diff / 1000)
+  Days.value = Math.floor(totalSeconds / (24 * 3600))
+  Hours.value = formatTime(Math.floor((totalSeconds % (24 * 3600)) / 3600))
+  Minutes.value = formatTime(Math.floor((totalSeconds % 3600) / 60))
+  Second.value = formatTime(Math.floor(totalSeconds % 60))
+}
+
+// 格式化奖励的展示信息
+const showDetail = (type, reward) => {
+  let showamount = ['GOLD', 'DIAMOND', 'GIFT', 'FRAGMENTS']
+  if (showamount.includes(type)) {
+    return reward.content
+  } else {
+    return `${reward.quantity}Days`
+  }
+}
+
+// 获取排行榜和我的排名
+const getListAndMy = async () => {
+  const resMyWeekStarRanking = await getRankingListAndMyRanking(3)
+  console.log('resMyWeekStarRanking:', resMyWeekStarRanking)
+  if (resMyWeekStarRanking.status && resMyWeekStarRanking.body) {
+    myRanking.value = resMyWeekStarRanking.body.currentUserRank
+    Ranking.value = resMyWeekStarRanking.body.rankingList
+  }
+}
+
+// 获取每周奖励列表和礼物
+const getRewardsAndGifts = async () => {
+  const resRewardsAndGifts = await getThisWeekRewardsAndGifts('1989220558472130561')
+  if (resRewardsAndGifts.status && resRewardsAndGifts.body) {
+    gifts.value = resRewardsAndGifts.body.gifts
+    rewardsList.value = resRewardsAndGifts.body.butOneRewards
+  }
+}
+
+// 刷新页面数据
+const initData = () => {
+  getListAndMy() // 获取排行榜和我的排名
+  getRewardsAndGifts() //获取本周的礼物和奖励列表
+}
+
+// 使用工具函数连接APP
+const connectToAppHandler = async () => {
+  await connectToApp(() => {
+    // 连接成功回调
+    initData() //初始化数据
+  })
+}
+
+// 组件挂载时检测环境
+onMounted(() => {
+  connectToAppHandler()
+  isInAppEnvironment.value = isInApp()
+
+  getCountdown()
+  timer = setInterval(getCountdown, 1000) //倒计时每秒更新
+})
+
+onUnmounted(() => {
+  clearInterval(timer) //摧毁计时器
+})
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: #fff;
+  font-family: 'SF Pro';
+}
+
+.fullPage {
+  background: linear-gradient(0deg, #6e1116 0%, #6e1116 100%), #d9d9d9;
+  position: relative;
+}
+
+.bg {
+  width: 100vw;
+  min-height: 100vh;
+  background-image: url(../../../../assets/images/Activities/Oman/NationalDay/bg.png);
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+}
+
+.timeText {
+  color: #fff;
+  font-weight: 590;
+  font-size: 1.3em;
+}
+
+.timeGap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btTitle {
+  color: #fff;
+  font-weight: 700;
+}
+
+.topTitle {
+  font-size: 1.5em;
+}
+
+.history-name {
+  font-size: 0.8em;
+}
+
+.history-time {
+  font-size: 0.8em;
+}
+
+.UserNickname {
+  font-size: 0.8em;
+}
+
+@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>