diff --git a/src/assets/images/Activities/Oman/NationalDay/bgRepeat.png b/src/assets/images/Activities/Oman/NationalDay/bgRepeat.png
new file mode 100644
index 0000000..7903dca
Binary files /dev/null and b/src/assets/images/Activities/Oman/NationalDay/bgRepeat.png differ
diff --git a/src/views/Activities/Oman/NationalDay/index.vue b/src/views/Activities/Oman/NationalDay/index.vue
index e0f8159..9f7260a 100644
--- a/src/views/Activities/Oman/NationalDay/index.vue
+++ b/src/views/Activities/Oman/NationalDay/index.vue
@@ -1,6 +1,9 @@
 <!-- src/views/Activities/heroesDay/index.vue -->
 <template>
   <div class="fullPage">
+    <!-- 新增的背景图层 -->
+    <div class="background-overlay"></div>
+
     <div class="bg">
       <!-- 状态栏占位区域（仅在APP中显示） -->
       <div v-if="isInAppEnvironment" style="height: 30px"></div>
@@ -94,6 +97,7 @@
       <div>
         <!-- Ranking -->
         <div v-show="rankingShow" style="position: relative; width: 100%">
+          <!-- 背景色 -->
           <div
             style="
               position: absolute;
@@ -145,78 +149,68 @@
 
             <!-- 第四名开始 -->
             <div v-if="showRanking.length > 0" style="margin-bottom: 6vw; margin-top: -10vw">
-              <div
+              <itemCenter
                 v-for="listItem in showRanking"
-                style="position: relative"
+                :imgUrl="images.RankingItem"
+                :contentStyle="`padding: 0 10%`"
                 @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="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="
-                        min-width: 0;
-                        width: calc(100% - 10% - 24%);
-                        display: flex;
-                        flex-direction: column;
+                        color: #fff;
+                        font-weight: 860;
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                        width: 100%;
                       "
+                      class="UserNickname"
                     >
-                      <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>
+                      {{ listItem?.nickname }}
                     </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 style="color: #fff; font-weight: 590" class="UserNickname">
+                      ID:{{ listItem?.account }}
                     </div>
                   </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>
+              </itemCenter>
             </div>
 
             <!-- 底框 -->
@@ -237,159 +231,119 @@
           <div
             v-for="(rewardsTop, top) in rewardsList"
             :key="top"
-            style="position: relative; width: 90%; margin: 10px 0"
+            style="position: relative; width: 100%; margin: 10px 0"
           >
-            <div style="position: relative">
-              <img
-                :src="topImg[Number(rewardsTop.rankRange) - 1]"
-                alt=""
-                style="display: block; width: 100%"
-              />
+            <itemCenter
+              :imgUrl="topImg[Number(rewardsTop.rankRange) - 1]"
+              :contentStyle="`display: grid;grid-template-columns: repeat(2, 1fr);gap: 12px;padding: 30vw 8vw 10vw;`"
+            >
               <div
-                style="
-                  position: absolute;
-                  inset: 0;
-                  display: grid;
-                  grid-template-columns: repeat(2, 1fr);
-                  gap: 12px;
-                  padding: 30vw 8vw 15vw;
-                "
+                v-for="(reward, rewardIndex) in rewardsTop.rewards"
+                :key="rewardIndex"
+                style="width: 100%"
               >
+                <itemCenter :imgUrl="images.giftItemBg">
+                  <img
+                    :src="reward.cover || ''"
+                    alt=""
+                    width="70%"
+                    style="display: block; aspect-ratio: 1/1"
+                    @error="(e) => handleImageError(e, reward.type)"
+                  />
+                </itemCenter>
                 <div
-                  v-for="(reward, rewardIndex) in rewardsTop.rewards"
-                  :key="rewardIndex"
-                  style="width: 100%"
+                  style="
+                    font-size: 1.1em;
+                    color: rgba(255, 255, 255, 1);
+                    font-weight: 590;
+                    text-align: center;
+                  "
                 >
-                  <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>
+                  {{ showDetail(reward.type, reward) }}
                 </div>
               </div>
-            </div>
+            </itemCenter>
           </div>
         </div>
       </div>
 
       <!-- 我的排名 -->
-      <div
+      <itemCenter
         style="
           position: sticky;
-          bottom: 0;
-          left: 0;
-          width: 100vw;
+          inset: 0;
           background: linear-gradient(0deg, #6e1116 0%, #6e1116 100%), #d9d9d9;
-          display: flex;
-          justify-content: center;
-          margin-top: 10px;
-          z-index: 999;
+          z-index: 2;
         "
+        :imgUrl="images.myRankingBg"
+        :contentStyle="`padding: 2% 5% 0`"
       >
-        <img :src="images.myRankingBg" alt="" style="width: 100%; display: block" />
-
         <div
           style="
-            position: absolute;
-            inset: 0;
+            width: 75%;
+            min-width: 0;
             display: flex;
+            justify-content: space-around;
             align-items: center;
-            justify-content: center;
-            padding: 2% 5% 0;
           "
         >
+          <!-- 排名 -->
+          <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="
-              width: 75%;
               min-width: 0;
+              width: calc(100% - 10% - 25%);
               display: flex;
-              justify-content: space-around;
-              align-items: center;
+              flex-direction: column;
             "
           >
-            <!-- 排名 -->
-            <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;
+                width: 100%;
+                color: #fff;
+                font-weight: 860;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
               "
+              class="UserNickname"
             >
-              <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 }}
+              {{ myRanking.nickname }}
             </div>
           </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>
+      </itemCenter>
 
       <!-- 弹窗遮罩层 -->
       <maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
@@ -586,8 +540,18 @@ onUnmounted(() => {
 }
 
 .fullPage {
-  background: linear-gradient(0deg, #6e1116 0%, #6e1116 100%), #d9d9d9;
   position: relative;
+  background: linear-gradient(0deg, #6e1116 0%, #6e1116 100%), #d9d9d9;
+}
+
+.background-overlay {
+  position: absolute;
+  inset: 0;
+  background-image: url(../../../../assets/images/Activities/Oman/NationalDay/bgRepeat.png);
+  background-repeat: repeat-y;
+  background-position: top center;
+  background-size: 100% auto;
+  z-index: 0; /* 确保在.bg之下 */
 }
 
 .bg {