style(阿曼国庆日): 增加一个背景花纹，并使用itemCenter组件

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,20 +149,11 @@
 
             <!-- 第四名开始 -->
             <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">
@@ -215,8 +210,7 @@
                     {{ listItem?.quantity }}
                   </div>
                 </div>
-                </div>
+              </itemCenter>
-              </div>
             </div>
 
             <!-- 底框 -->
@@ -237,40 +231,18 @@
           <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">
+            <itemCenter
-              <img
+              :imgUrl="topImg[Number(rewardsTop.rankRange) - 1]"
-                :src="topImg[Number(rewardsTop.rankRange) - 1]"
+              :contentStyle="`display: grid;grid-template-columns: repeat(2, 1fr);gap: 12px;padding: 30vw 8vw 10vw;`"
-                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">
+                <itemCenter :imgUrl="images.giftItemBg">
-                    <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=""
@@ -278,44 +250,33 @@
                     style="display: block; aspect-ratio: 1/1"
                     @error="(e) => handleImageError(e, reward.type)"
                   />
-                    </div>
+                </itemCenter>
-                  </div>
+                <div
-
+                  style="
-                  <div style="color: rgba(255, 255, 255, 1); font-weight: 590; text-align: center">
+                    font-size: 1.1em;
+                    color: rgba(255, 255, 255, 1);
+                    font-weight: 590;
+                    text-align: center;
+                  "
+                >
                   {{ showDetail(reward.type, reward) }}
                 </div>
               </div>
-              </div>
+            </itemCenter>
-            </div>
           </div>
         </div>
       </div>
 
       <!-- 我的排名 -->
-      <div
+      <itemCenter
         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;
+          background: linear-gradient(0deg, #6e1116 0%, #6e1116 100%), #d9d9d9;
-            align-items: center;
+          z-index: 2;
-            justify-content: center;
-            padding: 2% 5% 0;
         "
+        :imgUrl="images.myRankingBg"
+        :contentStyle="`padding: 2% 5% 0`"
       >
         <div
           style="
@@ -371,13 +332,7 @@
 
         <!-- 贡献值 -->
         <div
-            style="
+          style="flex: 1; min-width: 0; display: flex; justify-content: center; align-items: center"
-              flex: 1;
-              min-width: 0;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-            "
         >
           <img
             src="/src/assets/icon/coin.png"
@@ -388,8 +343,7 @@
             {{ myRanking.quantity || 0 }}
           </div>
         </div>
-        </div>
+      </itemCenter>
-      </div>
 
       <!-- 弹窗遮罩层 -->
       <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 {