feat(活动排行榜页面): 新增返回按钮

src/views/Activities/LuckyDollars/Season5/index.vue

@@ -17,6 +17,10 @@
       />
 
       <!-- 页面内容 -->
+      <button class="activity-back-btn" @click="handlePageBack">
+        <img v-smart-img class="flipImg" :src="backIcon" alt="" />
+      </button>
+
       <div class="s4-x1" style="position: relative; z-index: 2">
         <!-- 头部动画 -->
         <!-- <img v-smart-img :src="webpUrl('pageTop')" alt="" width="100%" style="display: block" /> -->
@@ -1645,7 +1649,7 @@
 
 <script setup>
 import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
-import { viewUserInfo } from '@/utils/appBridge.js'
+import { closePage, viewUserInfo } from '@/utils/appBridge.js'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { setDocumentDirection } from '@/locales/i18n'
@@ -1693,6 +1697,7 @@ const router = useRouter()
 const route = useRoute()
 
 const langStore = useLangStore()
+const backIcon = new URL('../../../../assets/icon/Azizi/arrowBack.png', import.meta.url).href
 // 当前语言类型
 const currentLangType = computed(() => {
   return langStore.selectedLang?.type || 'en'
@@ -1702,6 +1707,11 @@ const isLoading = ref(true) // 预加载状态
 
 // 获取OSS图片URL的函数
 // const imageUrl = (filename) => getPngUrl('Activities/LuckyDollars/Season5/', filename)
+const handlePageBack = () => {
+  console.log('home back')
+  closePage()
+}
+
 const webpUrl = (filename) => getWebpUrl('Activities/LuckyDollars/Season5New/', filename)
 
 // 根据语言获取图片名
@@ -2760,6 +2770,41 @@ onUnmounted(() => {
   padding-bottom: 2vw;
 }
 
+.activity-back-btn {
+  position: fixed;
+  z-index: 9999;
+  top: calc(env(safe-area-inset-top, 0px) + 30px);
+  left: 4vw;
+  width: 10vw;
+  height: 10vw;
+  padding: 1.8vw;
+  border: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease;
+}
+
+.activity-back-btn:active {
+  transform: scale(0.9);
+}
+
+.activity-back-btn img {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  display: block;
+}
+
+[dir='rtl'] .activity-back-btn {
+  left: auto;
+  right: 4vw;
+}
+
+[dir='rtl'] .flipImg {
+  transform: scaleX(-1);
+}
+
 /* 添加加载动画样式 */
 .loading-container {
   width: 100vw;

src/views/Ranking/Couple/index.vue

@@ -23,6 +23,10 @@
       />
 
       <!-- 页面内容 -->
+      <button class="couple-back-btn" @click="handlePageBack">
+        <img v-smart-img class="flipImg" :src="backIcon" alt="" />
+      </button>
+
       <div style="position: relative; z-index: 2; margin-top: 150vw">
         <!-- 弹幕 -->
         <Barrage
@@ -1326,7 +1330,7 @@ import { useLangStore } from '@/stores/lang'
 import { useI18n } from 'vue-i18n'
 import { getWebpUrl } from '@/config/imagePaths.js'
 import { getUserId, setUserInfo } from '@/utils/userStore.js'
-import { viewUserInfo } from '@/utils/appBridge.js'
+import { closePage, gotoAppPage, viewUserInfo } from '@/utils/appBridge.js'
 import { connectToApp } from '@/utils/appConnector.js'
 import { preloadImages, preloadImagesIdle } from '@/utils/image/imagePreloader.js'
 import { formatUTCCustom } from '@/utils/utcFormat.js'
@@ -1336,7 +1340,6 @@ import { useCoupleStore } from '@/stores/couple'
 import { storeToRefs } from 'pinia'
 import { useThrottle, useDebounce } from '@/utils/useDebounce.js'
 import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
-import { gotoAppPage } from '@/utils/appBridge.js'
 
 import {
   apiGetMyLotteryTicketCount, // 获取我的剩余抽奖券数量
@@ -1361,6 +1364,7 @@ const { t } = useI18n()
 const router = useRouter()
 const route = useRoute()
 const coupleStore = useCoupleStore()
+const backIcon = new URL('../../../assets/icon/Azizi/arrowBack.png', import.meta.url).href
 
 const {
   fragmentNotEnoughShow, // 碎片不足提示
@@ -1583,6 +1587,11 @@ const currentSeasonTop1 = computed(() => {
   return seasonTop1DisplayList.value[centerIndex.value] || {}
 })
 
+const handlePageBack = () => {
+  console.log('home back')
+  closePage()
+}
+
 // 点击居中项头像
 const handleAvatarClick = (userId, event) => {
   const now = Date.now()
@@ -2140,6 +2149,41 @@ onUnmounted(() => {
   position: relative;
 }
 
+.couple-back-btn {
+  position: fixed;
+  z-index: 30;
+  top: calc(env(safe-area-inset-top, 0px) + 30px);
+  left: 4vw;
+  width: 12vw;
+  height: 12vw;
+  padding: 1.8vw;
+  border: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease;
+}
+
+.couple-back-btn:active {
+  transform: scale(0.9);
+}
+
+.couple-back-btn img {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  display: block;
+}
+
+[dir='rtl'] .flipImg {
+  transform: scaleX(-1);
+}
+
+[dir='rtl'] .couple-back-btn {
+  left: auto;
+  right: 4vw;
+}
+
 /* 添加加载动画样式 */
 .loading-container {
   width: 100vw;

src/views/Ranking/GamesKing/index.vue

@@ -32,6 +32,10 @@
         <!-- 状态栏占位区域（仅在APP中显示） -->
         <div style="height: 30px"></div>
 
+        <button class="ranking-back-btn" @click="handlePageBack">
+          <img v-smart-img class="flipImg" :src="backIcon" alt="" />
+        </button>
+
         <!-- 第一名 -->
         <div style="display: flex; justify-content: center; margin-top: 11vw">
           <TopUser
@@ -974,7 +978,7 @@
 
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { viewUserInfo } from '@/utils/appBridge.js'
+import { closePage, viewUserInfo } from '@/utils/appBridge.js'
 import { connectToApp } from '@/utils/appConnector.js'
 import { useLangStore } from '@/stores/lang'
 import { getPngUrl, getWebpUrl } from '@/config/imagePaths.js'
@@ -1003,6 +1007,7 @@ const isLoading = ref(true)
 
 const { t, locale } = useI18n()
 const langStore = useLangStore()
+const backIcon = new URL('../../../assets/icon/Azizi/arrowBack.png', import.meta.url).href
 // 当前语言类型
 const currentLangType = computed(() => {
   return langStore.selectedLang?.type || 'en'
@@ -1028,6 +1033,11 @@ const maskLayerShow = computed(() => {
   return helpShow.value || dailyPopUpShow.value
 })
 
+const handlePageBack = () => {
+  console.log('home back')
+  closePage()
+}
+
 // 打开弹窗
 const openPopup = (type) => {
   closedPopup() //先关闭其他弹窗
@@ -1469,6 +1479,37 @@ onUnmounted(() => {
 }
 
 /* 添加加载动画样式 */
+.ranking-back-btn {
+  position: fixed;
+  z-index: 9999;
+  top: calc(env(safe-area-inset-top, 0px) + 30px);
+  left: 4vw;
+  width: 12vw;
+  height: 12vw;
+  padding: 1.8vw;
+  border: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease;
+}
+
+.ranking-back-btn:active {
+  transform: scale(0.9);
+}
+
+.ranking-back-btn img {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  display: block;
+}
+
+[dir='rtl'] .ranking-back-btn {
+  left: auto;
+  right: 4vw;
+}
+
 .loading-container {
   width: 100vw;
   height: 100vh;

src/views/Ranking/KingAndQueen/TopList.vue

@@ -15,12 +15,22 @@
         <!-- 状态栏占位区域（仅在APP中显示） -->
         <div style="height: 30px"></div>
 
+        <button class="ranking-back-btn" @click="handlePageBack">
+          <img v-smart-img class="flipImg" :src="backIcon" alt="" />
+        </button>
+
         <!-- 帮助按钮 -->
         <img
           v-smart-img
           :src="webpUrl('help')"
           alt=""
-          style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4"
+          style="
+            width: 10%;
+            position: absolute;
+            top: calc(env(safe-area-inset-top, 0px) + 30px + 14vw);
+            right: 8px;
+            z-index: 4;
+          "
           @click="helpInfoShow = true"
         />
 
@@ -29,7 +39,7 @@
           v-smart-img
           :src="webpUrl('history')"
           alt=""
-          style="min-height: 17.22vw; width: 20%; margin-top: 20px"
+          style="min-height: 17.22vw; width: 20%; margin-top: 14vw"
           @click="historyShow = true"
         />
 
@@ -776,7 +786,7 @@
 
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { viewUserInfo } from '@/utils/appBridge.js'
+import { closePage, viewUserInfo } from '@/utils/appBridge.js'
 import { useLangStore } from '@/stores/lang'
 import { useThrottle } from '@/utils/useDebounce'
 import { connectToApp } from '@/utils/appConnector.js'
@@ -799,6 +809,7 @@ import itemCenter from '@/components/itemCenter.vue'
 import maskLayer from '@/components/MaskLayer.vue'
 
 const langStore = useLangStore()
+const backIcon = new URL('../../../assets/icon/Azizi/arrowBack.png', import.meta.url).href
 // 当前语言类型
 const currentLangType = computed(() => {
   return langStore.selectedLang?.type || 'en'
@@ -815,6 +826,11 @@ const getImgName = (filename) => {
 }
 
 // 使用工具函数连接APP
+const handlePageBack = () => {
+  console.log('home back')
+  closePage()
+}
+
 const connectToAppHandler = async () => {
   await connectToApp(() => {
     // 连接成功回调
@@ -1195,6 +1211,41 @@ onUnmounted(() => {
   position: relative;
 }
 
+.ranking-back-btn {
+  position: fixed;
+  z-index: 9999;
+  top: calc(env(safe-area-inset-top, 0px) + 30px);
+  left: 4vw;
+  width: 12vw;
+  height: 12vw;
+  padding: 1.8vw;
+  border: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease;
+}
+
+.ranking-back-btn:active {
+  transform: scale(0.9);
+}
+
+.ranking-back-btn img {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  display: block;
+}
+
+[dir='rtl'] .ranking-back-btn {
+  left: auto;
+  right: 4vw;
+}
+
+[dir='rtl'] .flipImg {
+  transform: scaleX(-1);
+}
+
 .time {
   font-size: 1.3em;
   position: absolute;

src/views/Ranking/WeeklyStar/WeeklyStar.vue

@@ -15,12 +15,22 @@
         <!-- 状态栏占位区域 -->
         <div style="height: 30px"></div>
 
+        <button class="ranking-back-btn" @click="handlePageBack">
+          <img v-smart-img class="flipImg" :src="backIcon" alt="" />
+        </button>
+
         <!-- 帮助按钮 -->
         <img
           v-smart-img
           src="../../../assets/icon/Azizi/helpAct.png"
           alt=""
-          style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4"
+          style="
+            width: 10%;
+            position: absolute;
+            top: calc(env(safe-area-inset-top, 0px) + 30px + 14vw);
+            right: 8px;
+            z-index: 4;
+          "
           @click="helpInfoShow = true"
         />
 
@@ -29,7 +39,7 @@
           v-smart-img
           :src="webpUrl('history')"
           alt=""
-          style="min-height: 20.66vw; width: 20%; margin-top: 20px"
+          style="min-height: 20.66vw; width: 20%; margin-top: 14vw"
           @click="historyShow = true"
         />
 
@@ -840,7 +850,7 @@
 
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { viewUserInfo } from '@/utils/appBridge.js'
+import { closePage, viewUserInfo } from '@/utils/appBridge.js'
 import { useLangStore } from '@/stores/lang'
 import { connectToApp } from '@/utils/appConnector.js'
 import { useThrottle } from '@/utils/useDebounce'
@@ -867,6 +877,7 @@ import maskLayer from '@/components/MaskLayer.vue'
 import TopUser from './components/topUser.vue'
 
 const langStore = useLangStore()
+const backIcon = new URL('../../../assets/icon/Azizi/arrowBack.png', import.meta.url).href
 // 当前语言类型
 const currentLangType = computed(() => {
   return langStore.selectedLang?.type || 'en'
@@ -883,6 +894,11 @@ const getImgName = (filename) => {
 }
 
 // 使用工具函数连接APP
+const handlePageBack = () => {
+  console.log('home back')
+  closePage()
+}
+
 const connectToAppHandler = async () => {
   await connectToApp(() => {
     // 连接成功回调
@@ -1298,6 +1314,41 @@ onUnmounted(() => {
   direction: ltr;
 }
 
+.ranking-back-btn {
+  position: fixed;
+  z-index: 9999;
+  top: calc(env(safe-area-inset-top, 0px) + 30px);
+  left: 4vw;
+  width: 12vw;
+  height: 12vw;
+  padding: 1.8vw;
+  border: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease;
+}
+
+.ranking-back-btn:active {
+  transform: scale(0.9);
+}
+
+.ranking-back-btn img {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  display: block;
+}
+
+[dir='rtl'] .ranking-back-btn {
+  left: auto;
+  right: 4vw;
+}
+
+[dir='rtl'] .flipImg {
+  transform: scaleX(-1);
+}
+
 .timeText {
   color: #fff;
   font-size: 1.3em;