fix(scenic-detail): 自定义轮播圆点修复层叠遮挡问题

微信原生 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

@@ -1,19 +1,29 @@
 <template>
   <view class="page">
     <!-- 模块1：轮播大图 -->
+    <view class="hero-container">
       <swiper
         class="hero-swiper"
-      :indicator-dots="scenic.images.length > 1"
+        :indicator-dots="false"
-      indicator-color="rgba(255,255,255,0.4)"
-      indicator-active-color="#ffffff"
         :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;