feat(游戏活动): 调整倒计时排序，并使用按需预加载和加载对应图片

src/views/Activities/Game/index.vue

@@ -18,7 +18,7 @@
       </div>
 
       <!-- 倒计时 -->
-      <div style="display: flex; justify-content: center; margin-top: 15vw">
+      <div class="timeBox">
         <div style="width: 20%">
           <itemCenter :imgUrl="imageUrl('timeBg')">
             <div class="timeText" style="">{{ Days }}D</div>
@@ -46,15 +46,12 @@
 
       <!-- 切换按钮 -->
       <div>
-        <div
+        <div style="display: flex; justify-content: space-around; margin-top: 2vw">
-          v-if="currentLangType == 'en'"
-          style="display: flex; justify-content: space-around; margin-top: 2vw"
-        >
           <!-- 排行榜按钮 -->
           <div style="width: 40%; position: relative">
             <img
               v-smart-img
-              :src="imageUrl('rankingBt')"
+              :src="imageUrl(getImgName('rankingBt'))"
               alt=""
               style="display: block; width: 100%"
               :style="{ opacity: rankingShow ? 0 : 1 }"
@@ -62,7 +59,7 @@
             />
             <img
               v-smart-img
-              :src="imageUrl('rankingBtActive')"
+              :src="imageUrl(getImgName('rankingBtActive'))"
               alt=""
               style="display: block; width: 100%; position: absolute; top: 0; left: 0"
               :style="{ opacity: rankingShow ? 1 : 0 }"
@@ -74,7 +71,7 @@
           <div style="width: 40%; position: relative">
             <img
               v-smart-img
-              :src="imageUrl('rewardsBt')"
+              :src="imageUrl(getImgName('rewardsBt'))"
               alt=""
               style="display: block; width: 100%"
               :style="{ opacity: rankingShow ? 1 : 0 }"
@@ -82,53 +79,7 @@
             />
             <img
               v-smart-img
-              :src="imageUrl('rewardBtActive')"
+              :src="imageUrl(getImgName('rewardBtActive'))"
-              alt=""
-              style="display: block; width: 100%; position: absolute; top: 0; left: 0"
-              :style="{ opacity: rankingShow ? 0 : 1 }"
-              @click="rankingShow = false"
-            />
-          </div>
-        </div>
-
-        <!-- 阿拉伯语版本 -->
-        <div
-          v-if="currentLangType == 'ar'"
-          style="display: flex; justify-content: space-around; margin-top: 2vw"
-        >
-          <!-- 排行榜按钮 -->
-          <div style="width: 40%; position: relative">
-            <img
-              v-smart-img
-              :src="imageUrl('rankingBtAr')"
-              alt=""
-              style="display: block; width: 100%"
-              :style="{ opacity: rankingShow ? 0 : 1 }"
-              @click="rankingShow = true"
-            />
-            <img
-              v-smart-img
-              :src="imageUrl('rankingBtActiveAr')"
-              alt=""
-              style="display: block; width: 100%; position: absolute; top: 0; left: 0"
-              :style="{ opacity: rankingShow ? 1 : 0 }"
-              @click="rankingShow = true"
-            />
-          </div>
-
-          <!-- 奖励按钮 -->
-          <div style="width: 40%; position: relative">
-            <img
-              v-smart-img
-              :src="imageUrl('rewardsBtAr')"
-              alt=""
-              style="display: block; width: 100%"
-              :style="{ opacity: rankingShow ? 1 : 0 }"
-              @click="rankingShow = false"
-            />
-            <img
-              v-smart-img
-              :src="imageUrl('rewardBtActiveAr')"
               alt=""
               style="display: block; width: 100%; position: absolute; top: 0; left: 0"
               :style="{ opacity: rankingShow ? 0 : 1 }"
@@ -430,16 +381,8 @@
         <!-- help弹窗 -->
         <div style="margin: 20% 0" @click.stop>
           <img
-            v-if="currentLangType == 'en'"
             v-smart-img
-            :src="imageUrl('helpInfo')"
+            :src="imageUrl(getImgName('helpInfo'))"
-            alt=""
-            style="display: block; width: 100%"
-          />
-          <img
-            v-if="currentLangType == 'ar'"
-            v-smart-img
-            :src="imageUrl('helpInfoAr')"
             alt=""
             style="display: block; width: 100%"
           />
@@ -464,18 +407,22 @@ import itemCenter from '@/components/itemCenter.vue'
 import TopUser from './components/topUser.vue'
 import maskLayer from '@/components/MaskLayer.vue'
 
-// 获取OSS图片URL的函数
-const imageUrl = (filename) => getPngUrl('Activities/Game/', filename)
-
-const isInAppEnvironment = ref(false) // 检测是否在APP环境中
-const maskLayerShow = ref(false) //帮助模块
-
 const langStore = useLangStore()
 // 当前语言类型
 const currentLangType = computed(() => {
   return langStore.selectedLang?.type || 'en'
 })
 
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Activities/Game/', filename)
+// 根据语言获取图片名
+const getImgName = (filename) => {
+  return currentLangType.value === 'ar' ? `${filename}Ar` : filename
+}
+
+const isInAppEnvironment = ref(false) // 检测是否在APP环境中
+const maskLayerShow = ref(false) //帮助模块
+
 // 倒计时
 const Days = ref(0)
 const Hours = ref(0)
@@ -619,11 +566,29 @@ const preloadCriticalImages = () => {
     imageUrl('timeBg'),
     imageUrl('rankingBt'),
     imageUrl('rankingBtActive'),
+    imageUrl('rewardBtActive'),
+    imageUrl('rewardsBt'),
+    imageUrl('RankingMain'),
+    imageUrl('topOne'),
+    imageUrl('topTwo'),
+    imageUrl('topThree'),
+    imageUrl('RankingItem'),
+    imageUrl('RankingBottomBorder'),
+    imageUrl('myRankingBg'),
+    imageUrl('helpInfo'),
+    imageUrl('helpInfoAr'),
+    imageUrl('top1RewardBg'),
+    imageUrl('top2RewardBg'),
+    imageUrl('top3RewardBg'),
+    imageUrl('giftItemBg'),
+  ]
+
+  const criticalImages_ar = [
+    imageUrl('bg'),
+    imageUrl('timeBg'),
     imageUrl('rankingBtAr'),
     imageUrl('rankingBtActiveAr'),
-    imageUrl('rewardBtActive'),
     imageUrl('rewardBtActiveAr'),
-    imageUrl('rewardsBt'),
     imageUrl('rewardsBtAr'),
     imageUrl('RankingMain'),
     imageUrl('topOne'),
@@ -640,7 +605,11 @@ const preloadCriticalImages = () => {
     imageUrl('giftItemBg'),
   ]
 
-  preloadImages(criticalImages)
+  if (currentLangType.value == 'en') {
+    preloadImages(criticalImages)
+  } else if (currentLangType.value == 'ar') {
+    preloadImages(criticalImages_ar)
+  }
 }
 
 // 使用工具函数连接APP
@@ -732,6 +701,12 @@ onUnmounted(() => {
   font-size: 0.8em;
 }
 
+.timeBox {
+  display: flex;
+  justify-content: center;
+  margin-top: 15vw;
+}
+
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;
@@ -755,4 +730,8 @@ onUnmounted(() => {
     font-size: 32px;
   }
 }
+
+[dir='rtl'] .timeBox {
+  flex-direction: row-reverse;
+}
 </style>