diff --git a/src/assets/images/Activities/revolution/RankingBottomBorder.png b/src/assets/images/Activities/revolution/RankingBottomBorder.png
new file mode 100644
index 0000000..24b5d82
Binary files /dev/null and b/src/assets/images/Activities/revolution/RankingBottomBorder.png differ
diff --git a/src/assets/images/Activities/revolution/RankingItem.png b/src/assets/images/Activities/revolution/RankingItem.png
new file mode 100644
index 0000000..a4964b6
Binary files /dev/null and b/src/assets/images/Activities/revolution/RankingItem.png differ
diff --git a/src/assets/images/Activities/revolution/RankingMain.png b/src/assets/images/Activities/revolution/RankingMain.png
new file mode 100644
index 0000000..75bdede
Binary files /dev/null and b/src/assets/images/Activities/revolution/RankingMain.png differ
diff --git a/src/assets/images/Activities/revolution/backGift.png b/src/assets/images/Activities/revolution/backGift.png
new file mode 100644
index 0000000..a78a327
Binary files /dev/null and b/src/assets/images/Activities/revolution/backGift.png differ
diff --git a/src/assets/images/Activities/revolution/bg.png b/src/assets/images/Activities/revolution/bg.png
new file mode 100644
index 0000000..4e10dd9
Binary files /dev/null and b/src/assets/images/Activities/revolution/bg.png differ
diff --git a/src/assets/images/Activities/revolution/giftItemBg.png b/src/assets/images/Activities/revolution/giftItemBg.png
new file mode 100644
index 0000000..928bb07
Binary files /dev/null and b/src/assets/images/Activities/revolution/giftItemBg.png differ
diff --git a/src/assets/images/Activities/revolution/giftsBg.png b/src/assets/images/Activities/revolution/giftsBg.png
new file mode 100644
index 0000000..f6b71f3
Binary files /dev/null and b/src/assets/images/Activities/revolution/giftsBg.png differ
diff --git a/src/assets/images/Activities/revolution/help.png b/src/assets/images/Activities/revolution/help.png
new file mode 100644
index 0000000..cd42167
Binary files /dev/null and b/src/assets/images/Activities/revolution/help.png differ
diff --git a/src/assets/images/Activities/revolution/helpInfo.png b/src/assets/images/Activities/revolution/helpInfo.png
new file mode 100644
index 0000000..4507018
Binary files /dev/null and b/src/assets/images/Activities/revolution/helpInfo.png differ
diff --git a/src/assets/images/Activities/revolution/history.png b/src/assets/images/Activities/revolution/history.png
new file mode 100644
index 0000000..d997458
Binary files /dev/null and b/src/assets/images/Activities/revolution/history.png differ
diff --git a/src/assets/images/Activities/revolution/historyBg.png b/src/assets/images/Activities/revolution/historyBg.png
new file mode 100644
index 0000000..fbd9ab6
Binary files /dev/null and b/src/assets/images/Activities/revolution/historyBg.png differ
diff --git a/src/assets/images/Activities/revolution/myRankingBg.png b/src/assets/images/Activities/revolution/myRankingBg.png
new file mode 100644
index 0000000..b0eb54a
Binary files /dev/null and b/src/assets/images/Activities/revolution/myRankingBg.png differ
diff --git a/src/assets/images/Activities/revolution/nextGift.png b/src/assets/images/Activities/revolution/nextGift.png
new file mode 100644
index 0000000..2a336b6
Binary files /dev/null and b/src/assets/images/Activities/revolution/nextGift.png differ
diff --git a/src/assets/images/Activities/revolution/rankingBt.png b/src/assets/images/Activities/revolution/rankingBt.png
new file mode 100644
index 0000000..2fe3bbf
Binary files /dev/null and b/src/assets/images/Activities/revolution/rankingBt.png differ
diff --git a/src/assets/images/Activities/revolution/rankingBtActive.png b/src/assets/images/Activities/revolution/rankingBtActive.png
new file mode 100644
index 0000000..c84b7ea
Binary files /dev/null and b/src/assets/images/Activities/revolution/rankingBtActive.png differ
diff --git a/src/assets/images/Activities/revolution/rewardBtActive.png b/src/assets/images/Activities/revolution/rewardBtActive.png
new file mode 100644
index 0000000..e34a693
Binary files /dev/null and b/src/assets/images/Activities/revolution/rewardBtActive.png differ
diff --git a/src/assets/images/Activities/revolution/rewardsBt.png b/src/assets/images/Activities/revolution/rewardsBt.png
new file mode 100644
index 0000000..190c0f5
Binary files /dev/null and b/src/assets/images/Activities/revolution/rewardsBt.png differ
diff --git a/src/assets/images/Activities/revolution/timeDayBg.png b/src/assets/images/Activities/revolution/timeDayBg.png
new file mode 100644
index 0000000..c9477bd
Binary files /dev/null and b/src/assets/images/Activities/revolution/timeDayBg.png differ
diff --git a/src/assets/images/Activities/revolution/timeHourBg.png b/src/assets/images/Activities/revolution/timeHourBg.png
new file mode 100644
index 0000000..87087f3
Binary files /dev/null and b/src/assets/images/Activities/revolution/timeHourBg.png differ
diff --git a/src/assets/images/Activities/revolution/timeMinBg.png b/src/assets/images/Activities/revolution/timeMinBg.png
new file mode 100644
index 0000000..3a5b85c
Binary files /dev/null and b/src/assets/images/Activities/revolution/timeMinBg.png differ
diff --git a/src/assets/images/Activities/revolution/timeSecBg.png b/src/assets/images/Activities/revolution/timeSecBg.png
new file mode 100644
index 0000000..6adc603
Binary files /dev/null and b/src/assets/images/Activities/revolution/timeSecBg.png differ
diff --git a/src/assets/images/Activities/revolution/top1RewardBg.png b/src/assets/images/Activities/revolution/top1RewardBg.png
new file mode 100644
index 0000000..2d2f4c9
Binary files /dev/null and b/src/assets/images/Activities/revolution/top1RewardBg.png differ
diff --git a/src/assets/images/Activities/revolution/top2RewardBg.png b/src/assets/images/Activities/revolution/top2RewardBg.png
new file mode 100644
index 0000000..cd91930
Binary files /dev/null and b/src/assets/images/Activities/revolution/top2RewardBg.png differ
diff --git a/src/assets/images/Activities/revolution/top3RewardBg.png b/src/assets/images/Activities/revolution/top3RewardBg.png
new file mode 100644
index 0000000..84fc665
Binary files /dev/null and b/src/assets/images/Activities/revolution/top3RewardBg.png differ
diff --git a/src/assets/images/Activities/revolution/topOne.png b/src/assets/images/Activities/revolution/topOne.png
new file mode 100644
index 0000000..7e1d341
Binary files /dev/null and b/src/assets/images/Activities/revolution/topOne.png differ
diff --git a/src/assets/images/Activities/revolution/topOneHistory.png b/src/assets/images/Activities/revolution/topOneHistory.png
new file mode 100644
index 0000000..b1ce22d
Binary files /dev/null and b/src/assets/images/Activities/revolution/topOneHistory.png differ
diff --git a/src/assets/images/Activities/revolution/topThree.png b/src/assets/images/Activities/revolution/topThree.png
new file mode 100644
index 0000000..14b20a6
Binary files /dev/null and b/src/assets/images/Activities/revolution/topThree.png differ
diff --git a/src/assets/images/Activities/revolution/topTwo.png b/src/assets/images/Activities/revolution/topTwo.png
new file mode 100644
index 0000000..145dee1
Binary files /dev/null and b/src/assets/images/Activities/revolution/topTwo.png differ
diff --git a/src/router/index.js b/src/router/index.js
index 18d2503..e9d3118 100644
--- a/src/router/index.js
+++ b/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 },
+    },
   ],
 })
 
diff --git a/src/utils/permissionManager.js b/src/utils/permissionManager.js
index c08bd97..19da26d 100644
--- a/src/utils/permissionManager.js
+++ b/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', //充值奖励页面
   ],
 
   // 加载页面
diff --git a/src/views/Activities/RevolutionUnityDay/index.vue b/src/views/Activities/RevolutionUnityDay/index.vue
new file mode 100644
index 0000000..1fb3cda
--- /dev/null
+++ b/src/views/Activities/RevolutionUnityDay/index.vue
@@ -0,0 +1,1030 @@
+<!-- src/views/Activities/RevolutionUnityDay/index.vue -->
+<template>
+  <div class="fullPage">
+    <div class="bg">
+      <!-- 状态栏占位区域（仅在APP中显示） -->
+      <div v-if="isInAppEnvironment" style="height: 30px"></div>
+
+      <!-- 按钮 -->
+      <div
+        style="
+          margin-top: 100vw;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        "
+      >
+        <!-- 历史榜首按钮 -->
+        <img
+          :src="images.history"
+          alt=""
+          style="display: block; width: 20%"
+          @click="historyShow = true"
+        />
+
+        <!-- 帮助按钮 -->
+        <img
+          :src="images.help"
+          alt=""
+          style="display: block; width: 10%; margin-right: 8px"
+          @click="helpInfoShow = true"
+        />
+      </div>
+
+      <!-- 倒计时 -->
+      <div style="display: flex; justify-content: center; margin-top: 1vw">
+        <div style="width: 15%">
+          <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: 15%">
+          <itemCenter :imgUrl="images.timeHourBg">
+            <div class="timeText" style="margin-bottom: 20%">{{ Hours }}</div>
+          </itemCenter>
+        </div>
+        <div class="timeText timeGap">:</div>
+        <div style="width: 15%">
+          <itemCenter :imgUrl="images.timeMinBg">
+            <div class="timeText" style="margin-bottom: 20%">{{ Minutes }}</div>
+          </itemCenter>
+        </div>
+        <div class="timeText timeGap">:</div>
+        <div style="width: 15%">
+          <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">
+        <div style="width: 100%; position: relative">
+          <img :src="images.giftsBg" alt="" style="width: 100%" />
+          <div
+            style="
+              position: absolute;
+              left: 0;
+              right: 0;
+              top: 0;
+              bottom: 0;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            "
+          >
+            <div style="width: 80%; 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"
+              >
+                <div style="position: relative">
+                  <img style="" :src="images.giftItemBg" alt="" width="100%" />
+                  <div
+                    style="
+                      position: absolute;
+                      top: 0;
+                      bottom: 0;
+                      left: 0;
+                      right: 0;
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                    "
+                  >
+                    <img :src="gift.giftPhoto" alt="" width="50%" />
+                  </div>
+                </div>
+                <div style="display: flex; justify-content: center; align-items: center; gap: 5px">
+                  <img
+                    src="/src/assets/icon/coin.png"
+                    alt=""
+                    style="width: 18%; aspect-ratio: 1/1"
+                  />
+                  <div style="color: rgba(255, 255, 255, 1); font-weight: 590">
+                    {{ gift.giftCandy }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </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: 90%; left: 50%; transform: translateX(-50%)"
+        >
+          <div>
+            <!-- 前三名 -->
+            <div style="position: relative">
+              <img :src="images.RankingMain" alt="" width="100%" style="display: block" />
+              <!-- 前3名 -->
+              <div style="position: absolute; inset: 0; padding: 18% 5% 2%">
+                <div style="margin-top: 3%">
+                  <!-- 第一 -->
+                  <div style="display: flex; justify-content: center">
+                    <TopUser
+                      :BorderImgUrl="images.topOne"
+                      :avatarUrl="RankingHasTop3[0].userAvatar"
+                      :name="RankingHasTop3[0].userNickname"
+                      :distributionValue="RankingHasTop3[0].quantity"
+                      style="width: 43%"
+                      @click="viewUserInfo(RankingHasTop3[0].userId)"
+                    />
+                  </div>
+                  <!-- 第二三 -->
+                  <div style="display: flex; justify-content: space-between; margin-top: -20%">
+                    <TopUser
+                      :isTopOne="false"
+                      :BorderImgUrl="images.topTwo"
+                      :avatarUrl="RankingHasTop3[1].userAvatar"
+                      :name="RankingHasTop3[1].userNickname"
+                      :distributionValue="RankingHasTop3[1].quantity"
+                      style="width: 30%"
+                      @click="viewUserInfo(RankingHasTop3[1].userId)"
+                    />
+                    <TopUser
+                      :isTopOne="false"
+                      :BorderImgUrl="images.topThree"
+                      :avatarUrl="RankingHasTop3[2].userAvatar"
+                      :name="RankingHasTop3[2].userNickname"
+                      :distributionValue="RankingHasTop3[2].quantity"
+                      style="width: 30%"
+                      @click="viewUserInfo(RankingHasTop3[2].userId)"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 第四名开始 -->
+            <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;
+                  top: 0;
+                  bottom: 0;
+                  left: 0;
+                  right: 0;
+                  display: flex;
+                  align-items: center;
+                  padding: 0 8%;
+                "
+              >
+                <div style="width: 100%; display: flex; align-items: center">
+                  <div style="color: #edb247; font-weight: 700; width: 10%" class="UserNickname">
+                    {{ listItem.rank }}
+                  </div>
+                  <img
+                    :src="listItem.userAvatar || ''"
+                    alt=""
+                    style="
+                      width: 20%;
+                      margin: 0 2%;
+                      aspect-ratio: 1/1;
+                      border-radius: 50%;
+                      object-fit: cover;
+                    "
+                    @error="defaultAvatarUrl"
+                  />
+
+                  <div
+                    style="
+                      width: calc(100% - 10% - 28% - 16px);
+                      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.userNickname }}
+                    </div>
+                    <div style="color: #fff; font-weight: 590" class="UserNickname">
+                      ID:{{ listItem.account }}
+                    </div>
+                  </div>
+                </div>
+
+                <div style="display: flex; width: 30%; display: flex; align-items: center">
+                  <img src="/src/assets/icon/coin.png" alt="" style="width: 30%" />
+                  <div style="color: #edb247; font-weight: 700" class="UserNickname">
+                    {{ listItem.quantity }}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- 触发加载功能 -->
+            <div ref="RankingLoadmore" v-show="showRankingLoading && rankingShow"></div>
+
+            <!-- 底框 -->
+            <img
+              :src="images.RankingBottomBorder"
+              alt=""
+              width="100%"
+              style="display: block; margin-top: -20%"
+            />
+          </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-bottom: 20px"
+          >
+            <div style="position: relative">
+              <img :src="topImg[Number(top)]" alt="" style="width: 100%; margin: 24px 0" />
+              <div
+                style="
+                  position: absolute;
+                  inset: 0;
+                  display: grid;
+                  grid-template-columns: repeat(2, 1fr);
+                  gap: 8px;
+                  padding: 25vw 5vw 15vw;
+                "
+              >
+                <div
+                  v-for="(reward, rewardIndex) in rewardsTop.propsGroup.activityRewardProps"
+                  :key="rewardIndex"
+                  style="width: 100%"
+                >
+                  <div style="position: relative">
+                    <img :src="images.giftItemBg" style="" alt="" width="100%" />
+                    <div
+                      style="
+                        position: absolute;
+                        top: 0;
+                        bottom: 0;
+                        left: 0;
+                        right: 0;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                      "
+                    >
+                      <img
+                        :src="reward.cover || ''"
+                        alt=""
+                        width="50%"
+                        style="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.quantity) }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 我的排名 -->
+      <div
+        style="
+          position: sticky;
+          bottom: 0;
+          left: 0;
+          width: 100vw;
+          background-color: #053126;
+          display: flex;
+          justify-content: center;
+          margin-top: 10px;
+          z-index: 999;
+        "
+      >
+        <img :src="images.myRankingBg" alt="" style="width: calc(100% - 1px); display: block" />
+
+        <div
+          style="
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 5%;
+          "
+        >
+          <div
+            style="width: 70%; display: flex; justify-content: space-around; align-items: center"
+          >
+            <!-- 排名 -->
+            <div style="color: #edb247; font-weight: 700">{{ myRanking.rank || 999 }}</div>
+            <!-- 头像 -->
+            <img
+              :src="myRanking.userAvatar || ''"
+              alt=""
+              style="
+                width: 30%;
+                aspect-ratio: 1/1;
+                border-radius: 50%;
+                object-fit: cover;
+                margin: 0 12px;
+              "
+              @error="defaultAvatarUrl"
+            />
+            <!-- 名称 -->
+            <div style="display: flex; flex-direction: column; width: calc(70% - 24px - 20%)">
+              <div
+                style="
+                  color: #fff;
+                  font-weight: 860;
+                  overflow: hidden;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                "
+                class="UserNickname"
+              >
+                {{ myRanking.userNickname }}
+              </div>
+            </div>
+          </div>
+
+          <!-- 贡献值 -->
+          <div style="width: 30%; display: flex; justify-content: center; align-items: center">
+            <img src="/src/assets/icon/coin.png" alt="" style="width: 20%; height: 20%" />
+            <div style="color: #edb247; font-weight: 700">
+              {{ myRanking.quantity || 0 }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 弹窗遮罩层 -->
+      <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
+        <!-- help弹窗 -->
+        <div v-if="helpInfoShow" style="margin: 20% 0" @click.stop>
+          <img :src="images.helpInfo" alt="" style="width: 100%" />
+        </div>
+
+        <!-- history弹窗 -->
+        <div v-if="historyShow" style="position: relative; margin: 20% 0" @click.stop>
+          <!-- 背景图 -->
+          <img :src="images.historyBg" alt="" style="width: 100%; display: block" />
+          <!-- 内容 -->
+          <div
+            style="
+              position: absolute;
+              inset: 0;
+              padding: 17% 5% 10%;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              align-items: center;
+            "
+          >
+            <div style="position: relative; width: 75%">
+              <!-- 头像框 -->
+              <img
+                :src="images.topOneHistory"
+                alt=""
+                style="width: 100%; display: block; position: relative; z-index: 1"
+              />
+              <div style="position: absolute; inset: 0">
+                <div
+                  style="height: 100%; display: flex; justify-content: center; align-items: center"
+                >
+                  <img
+                    :src="showTopOne.userAvatar || ''"
+                    alt=""
+                    style="
+                      width: 50%;
+                      display: block;
+                      border-radius: 50%;
+                      aspect-ratio: 1/1;
+                      object-fit: cover;
+                    "
+                    @error="defaultAvatarUrl"
+                  />
+                </div>
+                <!-- 名字 -->
+                <div
+                  style="
+                    width: 100%;
+                    position: absolute;
+                    left: 0;
+                    right: 0;
+                    bottom: 10vw;
+                    z-index: 2;
+                    display: flex;
+                    justify-content: center;
+                  "
+                >
+                  <div
+                    style="
+                      width: 25%;
+                      overflow: hidden;
+                      white-space: nowrap;
+                      text-overflow: ellipsis;
+                      text-align: center;
+                    "
+                    class="history-name"
+                  >
+                    {{ showTopOne.userNickname }}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 历史时间 -->
+            <div
+              style="width: 50%; display: flex; justify-content: space-between; align-items: center"
+            >
+              <img :src="images.backGift" alt="" width="13%" @click="changeHistoryIndex(1)" />
+              <div
+                style="
+                  flex: 1;
+                  text-align: center;
+                  font-weight: 590;
+                  background: linear-gradient(180deg, #00f331 0%, #c6ffc6 100%);
+                  background-clip: text;
+                  -webkit-background-clip: text;
+                  -webkit-text-fill-color: transparent;
+                "
+                class="history-time"
+              >
+                {{ showTopOne.group }}
+              </div>
+              <img :src="images.nextGift" alt="" width="13%" @click="changeHistoryIndex(-1)" />
+            </div>
+          </div>
+        </div>
+      </maskLayer>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  connectApplication,
+  parseAccessOrigin,
+  parseHeader,
+  setHttpHeaders,
+  isInApp,
+  viewUserInfo,
+} from '@/utils/appBridge.js'
+import {
+  appConnectionManager,
+  isAppConnected,
+  getAppHeaderInfo,
+} from '@/utils/appConnectionManager.js'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import itemCenter from '@/components/WeeklyStar/itemCenter.vue'
+import TopUser from '../RevolutionUnityDay/topUser.vue'
+import maskLayer from '@/components/MaskLayer.vue'
+import { useDebounce, useThrottle } from '@/utils/useDebounce'
+import { getMemberProfile } from '@/api/wallet'
+import {
+  getWeekStarRanking,
+  getWeekRewards,
+  getWeekGifts,
+  getMyWeekStarRanking,
+  getHistoryTopOne,
+} from '@/api/weeklyStar.js'
+import { getWeekTopList, getThisWeekRewardsAndGifts } from '@/api/topList.js'
+
+// vite动态批量导入图片
+const imageModules = import.meta.glob('@/assets/images/Activities/revolution/*.{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 appConnected = ref(false)
+const headerInfo = ref({})
+
+/**
+ * 连接APP并获取认证信息（优化版 - 仅专注连接）
+ */
+const connectToApp = async () => {
+  console.group('🔗 APP Connection Process')
+  console.debug('🚀 Starting APP connection...')
+
+  try {
+    // 检查是否在APP环境中
+    if (!isInApp()) {
+      console.debug('🌐 Browser environment detected')
+      appConnected.value = true
+      console.groupEnd()
+
+      // 触发连接成功回调
+      getUserInfo()
+
+      return { success: true, environment: 'browser' }
+    }
+
+    // 检查是否已经连接且未过期
+    if (isAppConnected()) {
+      console.debug('✅ APP already connected and valid')
+      appConnected.value = true
+
+      // 使用缓存的头部信息
+      const cachedHeaderInfo = getAppHeaderInfo()
+      if (cachedHeaderInfo) {
+        headerInfo.value = cachedHeaderInfo
+        console.debug('🔧 Using cached HTTP headers')
+      }
+
+      console.groupEnd()
+
+      // 触发连接成功回调
+      getUserInfo()
+
+      return { success: true, environment: 'app', fromCache: true }
+    }
+
+    // 检查是否有正在进行的连接
+    if (appConnectionManager.isConnecting()) {
+      console.debug('⏳ Connection already in progress, waiting...')
+      await appConnectionManager.getConnectionPromise()
+      appConnected.value = true
+      console.debug('✅ Connected via existing process')
+      console.groupEnd()
+
+      // 触发连接成功回调
+      getUserInfo()
+
+      return { success: true, environment: 'app', fromCache: true }
+    }
+
+    // 建立新的APP连接
+    console.debug('📱 Establishing new APP connection...')
+
+    const connectionResult = await new Promise((resolve, reject) => {
+      const connectionPromise = new Promise((connectResolve, connectReject) => {
+        connectApplication(async (access) => {
+          try {
+            const result = parseAccessOrigin(access)
+
+            if (result.success) {
+              // 解析头部信息
+              headerInfo.value = parseHeader(result.data)
+
+              // 设置HTTP请求头
+              console.debug('🔧 Setting HTTP headers...')
+              await setHttpHeaders(headerInfo.value)
+
+              // 标记连接成功
+              appConnected.value = true
+              appConnectionManager.setConnected(headerInfo.value)
+
+              console.debug('🎉 APP connection established successfully')
+              connectResolve({ success: true, environment: 'app', fromCache: false })
+            } else {
+              console.error('❌ Failed to parse access origin:', result.error)
+              appConnectionManager.reset()
+              connectReject(new Error(result.error))
+            }
+          } catch (error) {
+            console.error('❌ Connection process failed:', error)
+            appConnectionManager.reset()
+            connectReject(error)
+          }
+        })
+      })
+
+      // 设置连接状态
+      appConnectionManager.setConnecting(connectionPromise)
+
+      connectionPromise.then(resolve).catch(reject)
+    })
+
+    console.debug('✅ Connection completed successfully')
+    console.groupEnd()
+
+    // 触发连接成功回调
+    getUserInfo()
+
+    return connectionResult
+  } catch (error) {
+    console.error('❌ Connection failed:', error)
+    appConnected.value = false
+    console.groupEnd()
+
+    // 连接失败的特殊处理
+    if (error.message && error.message.includes('parse access')) {
+      // router.push({ path: '/not_app', query: { message: error.message } })
+    }
+
+    return { success: false, error: error.message }
+  }
+}
+
+const userInfo = ref({})
+
+const isInAppEnvironment = ref(false) // 检测是否在APP环境中
+const helpInfoShow = ref(false) //帮助模块
+const historyShow = ref(false) //历史模块
+
+// 展示遮罩层
+const maskLayerShow = computed(() => {
+  return helpInfoShow.value || historyShow.value
+})
+
+// 倒计时
+const Days = ref(0)
+const Hours = ref(0)
+const Minutes = ref(0)
+const Second = ref(0)
+let timer = null
+
+// 模块切换展示
+const rankingShow = ref(true) //排行榜
+
+const current = ref(1) //排行榜第几页
+const RankingLoadmore = ref(null) //触底模块
+const showRankingLoading = ref(true) //触底加载功能
+const Ranking = ref([]) // 排行榜
+
+const RankingLoadParams = computed(() => {
+  return {
+    type: 'THIS_WEEK',
+    current: current.value,
+    size: 10,
+  }
+})
+
+const myRanking = ref([]) // 我的排名
+const rewardsList = ref([]) // 奖励列表
+const gifts = ref([]) // 本周礼物
+
+const historyRankingTop1 = ref([]) // 历史榜首
+const historyIndex = ref(0)
+const showTopOne = computed(() => {
+  return historyRankingTop1.value[historyIndex.value] || {}
+})
+
+const topImg = ref([images.top1RewardBg, images.top2RewardBg, images.top3RewardBg]) // top图片
+
+const changeHistoryIndex = (num) => {
+  let targetIndex = historyIndex.value + num
+  let length = historyRankingTop1.value.length
+  if (targetIndex >= 0 && targetIndex < length) {
+    historyIndex.value = targetIndex
+  }
+}
+
+// 处理排行榜小于3人时的情况
+const RankingHasTop3 = computed(() => {
+  let RankingShow = [...Ranking.value]
+  if (Ranking.value.length < 3) {
+    let addNullUser = Array.from({ length: 3 - Ranking.value.length }, () => ({
+      userAvatar: '',
+      userNickname: '',
+      quantity: '',
+    }))
+    RankingShow.push(...addNullUser)
+  }
+  return RankingShow
+})
+
+// 展示用的榜单
+const showRanking = computed(() => {
+  return Ranking.value.filter((_, index) => index >= 3)
+})
+
+// 奖励图片资源出错处理
+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
+}
+
+// 关闭弹窗
+const closedPopup = () => {
+  helpInfoShow.value = false
+  historyShow.value = false
+}
+
+// 获取沙特下周一早上六点的时间戳
+const getNextMondayInSaudi = () => {
+  const now = new Date()
+  const utcDay = now.getUTCDay() //获取UTC星期几，0(周日)-6(周六)
+
+  // 计算到下周一的所需天数
+  const daysToAdd = utcDay === 1 ? 7 : (1 + 7 - utcDay) % 7
+  const nextMondayUTC = new Date(now) //以当前UTC时间为基准，而不是重新获取
+
+  nextMondayUTC.setUTCDate(now.getUTCDate() + daysToAdd) //增加到下周一那天
+  nextMondayUTC.setUTCHours(3, 0, 0, 0) // 设置为沙特下周一当天早上6点（北京时间3点）
+  return nextMondayUTC.getTime() //得到下周一00:00:00.000的时间戳
+}
+
+const targetTime = ref(getNextMondayInSaudi()) // 闭包保存目标时间 (核心修正)
+
+// 格式化时间
+const formatTime = (value) => {
+  return value < 10 ? `0${value}` : value
+}
+
+// 倒计时
+const getCountdown = () => {
+  const now = Date.now()
+  let diff = targetTime.value - now
+
+  if (diff <= 0) {
+    // 初始化数据
+    getUserInfo()
+    resetPage()
+    targetTime.value += 7 * 86400000 // +7天 (更新闭包变量)
+    diff = targetTime.value - now
+  }
+
+  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 resetPage = () => {
+  current.value = 1 //排行榜第几页
+  showRankingLoading.value = true //触底加载功能
+  Ranking.value = [] // 排行榜
+
+  historyIndex.value = 0 //历史榜首重置展示当前
+
+  updatePageData() // 刷新页面数据
+}
+
+// 格式化奖励的展示信息
+const showDetail = (type, quantity) => {
+  let showamount = ['GOLD', 'DIAMOND', 'GIFT', 'FRAGMENTS']
+  if (showamount.includes(type)) {
+    return quantity
+  } else {
+    return `${quantity}Days`
+  }
+}
+
+//获取用户信息
+const getUserInfo = async () => {
+  if (Object.keys(userInfo.value).length === 0) {
+    const resUserInfo = await getMemberProfile()
+    if (resUserInfo.status && resUserInfo.body) {
+      userInfo.value = resUserInfo.body
+    }
+  }
+  getMyThisWeekRanking() // 获取本周我的排名
+}
+
+// 获取本周排名
+const getThisWeekRanking = async () => {
+  const resWeekStarRanking = await getWeekStarRanking(RankingLoadParams.value)
+  console.log('resWeekStarRanking:', resWeekStarRanking)
+  if (
+    resWeekStarRanking.status &&
+    resWeekStarRanking.body &&
+    resWeekStarRanking.body.rankUsers?.records
+  ) {
+    let rankUsers = resWeekStarRanking.body.rankUsers
+    Ranking.value.push(...rankUsers.records)
+    if (current.value * rankUsers.size >= rankUsers.total) {
+      showRankingLoading.value = false
+    }
+  }
+}
+
+// 获取历史榜首
+const getHistoryRankingTop1 = async () => {
+  const resHistoryTopOne = await getHistoryTopOne()
+  console.log('resHistoryTopOne:', resHistoryTopOne)
+  if (resHistoryTopOne.status && resHistoryTopOne.body) {
+    historyRankingTop1.value = resHistoryTopOne.body
+  }
+}
+
+// 获取本周我的排名
+const getMyThisWeekRanking = async () => {
+  let data = {
+    userId: userInfo.value.id,
+    type: 'THIS_WEEK',
+  }
+  const resMyWeekStarRanking = await getMyWeekStarRanking(data)
+  console.log('resMyWeekStarRanking:', resMyWeekStarRanking)
+  if (resMyWeekStarRanking.status && resMyWeekStarRanking.body) {
+    myRanking.value = resMyWeekStarRanking.body
+  }
+}
+
+// 获取本周奖励
+// const getThisWeekRewards = async () => {
+//   const resThisWeekRewardsAndGifts = await getThisWeekRewardsAndGifts()
+//   console.log('resThisWeekRewardsAndGifts:', resThisWeekRewardsAndGifts)
+//   if (resThisWeekRewardsAndGifts.status && resThisWeekRewardsAndGifts.body) {
+//     rewardsList.value = [
+//       {
+//         rankRange: '1',
+//         rewards: resThisWeekRewardsAndGifts.body.butOneRewards || [],
+//       },
+//       {
+//         rankRange: '2',
+//         rewards: resThisWeekRewardsAndGifts.body.butTwoRewards || [],
+//       },
+//       {
+//         rankRange: '3',
+//         rewards: resThisWeekRewardsAndGifts.body.butThreeRewards || [],
+//       },
+//     ]
+//   }
+// }
+
+// 获取本周礼物
+const getThisWeekGifts = async () => {
+  const resThisWeekGifts = await getWeekGifts('THIS_WEEK')
+  console.log('resThisWeekGifts:', resThisWeekGifts)
+  if (resThisWeekGifts.status && resThisWeekGifts.body) {
+    gifts.value = resThisWeekGifts.body
+  }
+}
+
+// 获取本周奖励
+const getThisWeekRewards = async () => {
+  const resThisWeekRewards = await getWeekRewards()
+  console.log('resThisWeekRewards:', resThisWeekRewards)
+  if (resThisWeekRewards.status && resThisWeekRewards.body) {
+    rewardsList.value = resThisWeekRewards.body
+  }
+}
+
+// 刷新页面数据
+const updatePageData = () => {
+  getThisWeekRanking() // 获取本周排名
+  getHistoryRankingTop1() // 获取历史top1
+  getThisWeekRewards() // 获取本周奖励
+  getThisWeekGifts() //获取礼物
+}
+
+const debouceGetThisWeekRanking = useThrottle(() => {
+  getThisWeekRanking()
+}, 1000)
+
+// IntersectionObserver配置
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach((entry) => {
+    if (entry.intersectionRatio > 0 && Ranking.value.length != 0) {
+      console.log('触发RankingLoadmore加载')
+      current.value++
+      debouceGetThisWeekRanking()
+    }
+  })
+})
+
+// 组件挂载时检测环境
+onMounted(() => {
+  connectToApp()
+  isInAppEnvironment.value = isInApp()
+
+  getCountdown()
+  timer = setInterval(getCountdown, 1000) //每秒更新
+
+  updatePageData() // 刷新页面数据
+
+  // 监听加载模块
+  if (RankingLoadmore.value) {
+    observer.observe(RankingLoadmore.value)
+  }
+})
+
+onUnmounted(() => {
+  clearInterval(timer) //摧毁计时器
+})
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: #fff;
+  font-family: 'SF Pro';
+}
+
+.fullPage {
+  background: linear-gradient(0deg, #053126 0%, #053126 100%);
+  position: relative;
+}
+
+.bg {
+  width: 100vw;
+  min-height: 100vh;
+  background-image: url(../../../assets/images/Activities/revolution/bg.png);
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+}
+
+.timeText {
+  color: #fff;
+  font-weight: 860;
+}
+
+.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: 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/RevolutionUnityDay/topUser.vue b/src/views/Activities/RevolutionUnityDay/topUser.vue
new file mode 100644
index 0000000..feea752
--- /dev/null
+++ b/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>