From 77c177bfa9fc8dafa7a7f7291255f361202e2cf6 Mon Sep 17 00:00:00 2001
From: jacobxu666 <jacobxu666@gmail.com>
Date: Fri, 26 Jun 2026 13:52:41 +0800
Subject: [PATCH] =?UTF-8?q?fix(scenic-detail):=20=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E8=BD=AE=E6=92=AD=E5=9C=86=E7=82=B9=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=B1=82=E5=8F=A0=E9=81=AE=E6=8C=A1=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

微信原生 swiper 组件为独立渲染层，内置 indicator-dots 无法通过
z-index 突破到外部元素上方。改为在 swiper 外渲染自定义圆点：
- hero-container z-index:4（低于 info-card）
- info-card z-index:5（遮住 swiper 底部）
- hero-dots z-index:6（显示在 info-card 上方 12px）

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/packages/content/pages/scenic-detail.vue | 96 +++++++++++++-------
 1 file changed, 63 insertions(+), 33 deletions(-)

diff --git a/src/packages/content/pages/scenic-detail.vue b/src/packages/content/pages/scenic-detail.vue
index e5e5816..16a22e8 100644
--- a/src/packages/content/pages/scenic-detail.vue
+++ b/src/packages/content/pages/scenic-detail.vue
@@ -1,19 +1,29 @@
 <template>
   <view class="page">
     <!-- 模块1：轮播大图 -->
-    <swiper
-      class="hero-swiper"
-      :indicator-dots="scenic.images.length > 1"
-      indicator-color="rgba(255,255,255,0.4)"
-      indicator-active-color="#ffffff"
-      :autoplay="scenic.images.length > 1"
-      circular
-      :interval="4000"
-    >
-      <swiper-item v-for="(img, idx) in scenic.images" :key="idx">
-        <image class="hero-img" :src="img" mode="aspectFill" />
-      </swiper-item>
-    </swiper>
+    <view class="hero-container">
+      <swiper
+        class="hero-swiper"
+        :indicator-dots="false"
+        :autoplay="scenic.images.length > 1"
+        circular
+        :interval="4000"
+        @change="onSwiperChange"
+      >
+        <swiper-item v-for="(img, idx) in scenic.images" :key="idx">
+          <image class="hero-img" :src="img" mode="aspectFill" />
+        </swiper-item>
+      </swiper>
+      <!-- 自定义圆点（脱离 swiper 渲染层，z-index 高于 info-card） -->
+      <view v-if="scenic.images.length > 1" class="hero-dots">
+        <view
+          v-for="(_, idx) in scenic.images"
+          :key="idx"
+          class="hero-dot"
+          :class="{ active: currentSlide === idx }"
+        />
+      </view>
+    </view>
 
     <!-- 模块2：基础信息卡片 -->
     <view class="info-card">
@@ -146,6 +156,11 @@ interface ScenicDetail {
 
 const scenic = ref<ScenicDetail>({ tags: [], images: [], cards: [], bookingNotice: [] } as unknown as ScenicDetail)
 const activeTab = ref<'notice' | 'intro'>('notice')
+const currentSlide = ref(0)
+
+function onSwiperChange(e: any) {
+  currentSlide.value = e.detail.current
+}
 
 /** 根据营业时间判断运营状态 */
 const isOpen = computed(() => {
@@ -268,35 +283,50 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
 }
 
 /* ====== 模块1：轮播大图 ====== */
+.hero-container {
+  position: relative;
+  z-index: 4; /* 低于 info-card(5)，让 info-card 遮住底部一部分 */
+}
+
 .hero-swiper {
   width: 100%;
   height: 480rpx;
-  position: relative;
-  z-index: 6;
-
-  :deep(.uni-swiper-dots) {
-    z-index: 10;
-    bottom: 64rpx !important;
-  }
-
-  :deep(.uni-swiper-dot) {
-    width: 16rpx;
-    height: 16rpx;
-    border-radius: 50%;
-    margin: 0 8rpx !important;
-    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
-  }
-
-  :deep(.uni-swiper-dot-active) {
-    width: 32rpx;
-    border-radius: 8rpx;
-  }
 }
+
 .hero-img {
   width: 100%;
   height: 480rpx;
 }
 
+/* 自定义圆点：脱离 swiper 渲染层，置于 info-card 之上 */
+.hero-dots {
+  position: absolute;
+  bottom: 64rpx; /* 比 info-card 重叠区（40rpx）高 24rpx = 12px */
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16rpx;
+  z-index: 6; /* 高于 info-card(5) */
+  pointer-events: none;
+}
+
+.hero-dot {
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.4);
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
+  transition: width 0.2s, background 0.2s;
+
+  &.active {
+    width: 32rpx;
+    border-radius: 8rpx;
+    background: #ffffff;
+  }
+}
+
 /* ====== 模块2：基础信息卡片 ====== */
 .info-card {
   background: $color-card;