From 477f7789075bae69cb77ea5a2b4b624bb80c7b84 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Wed, 27 May 2026 18:04:54 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E9=81=AE=E7=BD=A9=E5=B1=82=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97):=20=E9=92=88=E5=AF=B9=E9=81=AE=E7=BD=A9=E5=B1=82?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E5=92=8C=E9=A1=B5=E9=9D=A2=E8=BF=94=E5=9B=9E?=
 =?UTF-8?q?=E9=94=AE=E5=B1=82=E7=BA=A7=E5=86=B2=E7=AA=81=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=E8=BF=9B=E8=A1=8C=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MaskLayer.vue                  | 16 +++++-
 src/views/Activities/GulbenFestival/index.vue | 50 ++++++++++++++++++-
 .../Activities/LuckyDollars/Season4/index.vue |  2 +-
 .../Activities/LuckyDollars/Season5/index.vue |  7 +--
 src/views/Ranking/Couple/index.vue            |  5 +-
 src/views/Ranking/GamesKing/index.vue         |  5 +-
 src/views/Ranking/KingAndQueen/TopList.vue    |  5 +-
 src/views/Ranking/WeeklyStar/WeeklyStar.vue   |  5 +-
 8 files changed, 79 insertions(+), 16 deletions(-)

diff --git a/src/components/MaskLayer.vue b/src/components/MaskLayer.vue
index ff1a547..1dab4c6 100644
--- a/src/components/MaskLayer.vue
+++ b/src/components/MaskLayer.vue
@@ -1,5 +1,17 @@
 <template>
-  <div v-show="maskLayerShow" class="mask-layer" @touchmove.prevent @wheel.prevent>
+  <div
+    v-show="maskLayerShow"
+    class="mask-layer"
+    @click.stop
+    @mousedown.stop
+    @mouseup.stop
+    @pointerdown.stop
+    @pointerup.stop
+    @touchstart.stop
+    @touchend.stop
+    @touchmove.prevent
+    @wheel.prevent
+  >
     <div class="mask-layer__content" @touchmove.stop>
       <slot></slot>
     </div>
@@ -110,7 +122,7 @@ onUnmounted(() => {
   background-color: #00000080;
   position: fixed;
   inset: 0;
-  z-index: 10000;
+  z-index: 10000 !important;
   overflow: hidden;
   touch-action: none;
   overscroll-behavior: none;
diff --git a/src/views/Activities/GulbenFestival/index.vue b/src/views/Activities/GulbenFestival/index.vue
index 1570089..8cec030 100644
--- a/src/views/Activities/GulbenFestival/index.vue
+++ b/src/views/Activities/GulbenFestival/index.vue
@@ -17,6 +17,10 @@
       <!-- 页面主背景：背景图内包含活动标题和顶部视觉信息 -->
       <BackgroundLayer :backgroundImages="[imageUrl('bg')]" />
 
+      <button v-show="!pageBackHidden" class="activity-back-btn" @click="handlePageBack">
+        <img v-smart-img class="flipImg" :src="backIcon" alt="" />
+      </button>
+
       <main
         style="
           position: relative;
@@ -1442,7 +1446,7 @@
       </itemCenter>
 
       <!-- 弹窗：点击遮罩关闭，规则、中奖历史和抽卡结果共用 MaskLayer -->
-      <MaskLayer :maskLayerShow="maskLayerShow">
+      <MaskLayer :maskLayerShow="maskLayerShow" @click="closePopup">
         <div
           style="
             min-height: 100%;
@@ -1857,7 +1861,7 @@ import { useLangStore } from '@/stores/lang'
 import { getWebpUrl } from '@/config/imagePaths.js'
 import { preloadImages, preloadImagesIdle } from '@/utils/image/imagePreloader.js'
 import { showError } from '@/utils/toast.js'
-import { viewUserInfo } from '@/utils/appBridge.js'
+import { closePage, viewUserInfo } from '@/utils/appBridge.js'
 import { connectToApp } from '@/utils/appConnector.js'
 import { handleAvatarImageError, handleRewardImageError } from '@/utils/image/imageHandler.js'
 import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
@@ -1887,6 +1891,7 @@ import { pageConfig } from './page.config.js'
 const { t, locale } = useI18n()
 const langStore = useLangStore()
 const coinIcon = new URL('../../../assets/icon/Azizi/coin.png', import.meta.url).href
+const backIcon = new URL('../../../assets/icon/Azizi/arrowBack.png', import.meta.url).href
 
 const gulbenActivityId = '1001'
 const templateId = ref(pageConfig.activity.templateId || '2057676469390872578')
@@ -2318,6 +2323,12 @@ const cardDrawTicketCount = computed(() => getTicketRemainingCount('CARD'))
 const maskLayerShow = computed(
   () => ruleShow.value || historyShow.value || cardDrawResultShow.value,
 )
+const pageBackHidden = computed(() => maskLayerShow.value || cardDrawAnimationShow.value)
+
+const handlePageBack = () => {
+  if (pageBackHidden.value) return
+  closePage()
+}
 
 const activeRankingLoadKey = computed(() => {
   if (isRoomRankingSection.value) {
@@ -3640,6 +3651,41 @@ onUnmounted(() => {
   -ms-overflow-style: none;
 }
 
+.activity-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;
+}
+
+.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);
+}
+
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;
diff --git a/src/views/Activities/LuckyDollars/Season4/index.vue b/src/views/Activities/LuckyDollars/Season4/index.vue
index 8652ec9..c47f4c9 100644
--- a/src/views/Activities/LuckyDollars/Season4/index.vue
+++ b/src/views/Activities/LuckyDollars/Season4/index.vue
@@ -1451,7 +1451,7 @@
       </itemCenter>
 
       <!-- 弹窗遮罩层 -->
-      <maskLayer :maskLayerShow="maskLayerShow">
+      <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
         <div
           style="
             width: 100%;
diff --git a/src/views/Activities/LuckyDollars/Season5/index.vue b/src/views/Activities/LuckyDollars/Season5/index.vue
index add85af..cb4ab33 100644
--- a/src/views/Activities/LuckyDollars/Season5/index.vue
+++ b/src/views/Activities/LuckyDollars/Season5/index.vue
@@ -17,7 +17,7 @@
       />
 
       <!-- 页面内容 -->
-      <button class="activity-back-btn" @click="handlePageBack">
+      <button v-show="!maskLayerShow" class="activity-back-btn" @click="handlePageBack">
         <img v-smart-img class="flipImg" :src="backIcon" alt="" />
       </button>
 
@@ -1455,7 +1455,7 @@
       </itemCenter>
 
       <!-- 弹窗遮罩层 -->
-      <maskLayer class="activity-popup-mask" :maskLayerShow="maskLayerShow">
+      <maskLayer class="activity-popup-mask" :maskLayerShow="maskLayerShow" @click="closedPopup">
         <div
           style="
             width: 100%;
@@ -1708,6 +1708,7 @@ const isLoading = ref(true) // 预加载状态
 // 获取OSS图片URL的函数
 // const imageUrl = (filename) => getPngUrl('Activities/LuckyDollars/Season5/', filename)
 const handlePageBack = () => {
+  if (maskLayerShow.value) return
   console.log('home back')
   closePage()
 }
@@ -2797,7 +2798,7 @@ onUnmounted(() => {
 }
 
 .activity-popup-mask {
-  z-index: 10000;
+  z-index: 10000 !important;
 }
 
 [dir='rtl'] .activity-back-btn {
diff --git a/src/views/Ranking/Couple/index.vue b/src/views/Ranking/Couple/index.vue
index cd5a32d..7aede0b 100644
--- a/src/views/Ranking/Couple/index.vue
+++ b/src/views/Ranking/Couple/index.vue
@@ -23,7 +23,7 @@
       />
 
       <!-- 页面内容 -->
-      <button class="couple-back-btn" @click="handlePageBack">
+      <button v-show="!maskLayerShow" class="couple-back-btn" @click="handlePageBack">
         <img v-smart-img class="flipImg" :src="backIcon" alt="" />
       </button>
 
@@ -1588,6 +1588,7 @@ const currentSeasonTop1 = computed(() => {
 })
 
 const handlePageBack = () => {
+  if (maskLayerShow.value) return
   console.log('home back')
   closePage()
 }
@@ -2180,7 +2181,7 @@ onUnmounted(() => {
 }
 
 .couple-popup-mask {
-  z-index: 10000;
+  z-index: 10000 !important;
 }
 
 [dir='rtl'] .flipImg {
diff --git a/src/views/Ranking/GamesKing/index.vue b/src/views/Ranking/GamesKing/index.vue
index 70b4f0d..c139141 100644
--- a/src/views/Ranking/GamesKing/index.vue
+++ b/src/views/Ranking/GamesKing/index.vue
@@ -32,7 +32,7 @@
         <!-- 状态栏占位区域（仅在APP中显示） -->
         <div style="height: 30px"></div>
 
-        <button class="ranking-back-btn" @click="handlePageBack">
+        <button v-show="!maskLayerShow" class="ranking-back-btn" @click="handlePageBack">
           <img v-smart-img class="flipImg" :src="backIcon" alt="" />
         </button>
 
@@ -1050,6 +1050,7 @@ const maskLayerShow = computed(() => {
 })
 
 const handlePageBack = () => {
+  if (maskLayerShow.value) return
   console.log('home back')
   closePage()
 }
@@ -1538,7 +1539,7 @@ onUnmounted(() => {
 }
 
 .ranking-popup-mask {
-  z-index: 10000;
+  z-index: 10000 !important;
 }
 
 [dir='rtl'] .ranking-back-btn {
diff --git a/src/views/Ranking/KingAndQueen/TopList.vue b/src/views/Ranking/KingAndQueen/TopList.vue
index f144c42..e005528 100644
--- a/src/views/Ranking/KingAndQueen/TopList.vue
+++ b/src/views/Ranking/KingAndQueen/TopList.vue
@@ -15,7 +15,7 @@
         <!-- 状态栏占位区域（仅在APP中显示） -->
         <div style="height: 30px"></div>
 
-        <button class="ranking-back-btn" @click="handlePageBack">
+        <button v-show="!maskLayerShow" class="ranking-back-btn" @click="handlePageBack">
           <img v-smart-img class="flipImg" :src="backIcon" alt="" />
         </button>
 
@@ -827,6 +827,7 @@ const getImgName = (filename) => {
 
 // 使用工具函数连接APP
 const handlePageBack = () => {
+  if (maskLayerShow.value) return
   console.log('home back')
   closePage()
 }
@@ -1238,7 +1239,7 @@ onUnmounted(() => {
 }
 
 .ranking-popup-mask {
-  z-index: 10000;
+  z-index: 10000 !important;
 }
 
 [dir='rtl'] .ranking-back-btn {
diff --git a/src/views/Ranking/WeeklyStar/WeeklyStar.vue b/src/views/Ranking/WeeklyStar/WeeklyStar.vue
index 2f2ade3..4c311bd 100644
--- a/src/views/Ranking/WeeklyStar/WeeklyStar.vue
+++ b/src/views/Ranking/WeeklyStar/WeeklyStar.vue
@@ -15,7 +15,7 @@
         <!-- 状态栏占位区域 -->
         <div style="height: 30px"></div>
 
-        <button class="ranking-back-btn" @click="handlePageBack">
+        <button v-show="!maskLayerShow" class="ranking-back-btn" @click="handlePageBack">
           <img v-smart-img class="flipImg" :src="backIcon" alt="" />
         </button>
 
@@ -895,6 +895,7 @@ const getImgName = (filename) => {
 
 // 使用工具函数连接APP
 const handlePageBack = () => {
+  if (maskLayerShow.value) return
   console.log('home back')
   closePage()
 }
@@ -1341,7 +1342,7 @@ onUnmounted(() => {
 }
 
 .ranking-popup-mask {
-  z-index: 10000;
+  z-index: 10000 !important;
 }
 
 [dir='rtl'] .ranking-back-btn {