From 968eabcd07fc4accb67f0a566399ca77081aa70e Mon Sep 17 00:00:00 2001
From: jacobxu666 <jacobxu666@gmail.com>
Date: Thu, 25 Jun 2026 16:50:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=99=AF=E5=8C=BA=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E9=A1=B5=E9=87=8D=E6=9E=84=20+=20=E5=88=97=E8=A1=A8=E9=A1=B5?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=20+=20=E9=A6=96=E9=A1=B5=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 景区详情页：原生导航、双卡种权益卡片、Lucide图标、字体4档规范
- 景区列表页：uni-popup筛选弹窗、单列卡片、吸顶搜索栏、标签居中
- 首页热门景点点击跳转景区详情页
- 替换失效unsplash图片URL
- pages.json：详情页改用原生导航
---
 src/pages.json                            |   3 +-
 src/pages/index/index.vue                 |   2 +-
 src/pages/scenic-detail/scenic-detail.vue | 969 ++++++++++------------
 src/pages/scenic-list/scenic-list.vue     |  31 +-
 4 files changed, 476 insertions(+), 529 deletions(-)

diff --git a/src/pages.json b/src/pages.json
index 2b1b2aa..9db5d59 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -40,8 +40,7 @@
     {
       "path": "pages/scenic-detail/scenic-detail",
       "style": {
-        "navigationStyle": "custom",
-        "navigationBarTitleText": ""
+        "navigationBarTitleText": "景区详情"
       }
     }
   ],
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 8c5dbc1..7c69c72 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -180,7 +180,7 @@ function goCardDetail() {
 }
 
 function goSpot(spot: ScenicSpotItem) {
-  uni.showToast({ title: `${spot.name} 详情开发中`, icon: 'none' })
+  uni.navigateTo({ url: `/pages/scenic-detail/scenic-detail?id=${spot.id}` })
 }
 
 function goMore() {
diff --git a/src/pages/scenic-detail/scenic-detail.vue b/src/pages/scenic-detail/scenic-detail.vue
index 58dc6f4..d0eccba 100644
--- a/src/pages/scenic-detail/scenic-detail.vue
+++ b/src/pages/scenic-detail/scenic-detail.vue
@@ -1,303 +1,266 @@
 <template>
   <view class="page">
-    <!-- 自定义导航栏 -->
-    <view class="nav-bar">
-      <view class="nav-back" @click="goBack">
-        <view class="back-arrow" />
+    <!-- 模块1：轮播大图 -->
+    <swiper
+      class="hero-swiper"
+      :indicator-dots="true"
+      indicator-color="rgba(255,255,255,0.4)"
+      indicator-active-color="#ffffff"
+      autoplay
+      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>
+
+    <!-- 模块2：基础信息卡片 -->
+    <view class="info-card">
+      <!-- 标题行 -->
+      <view class="title-row">
+        <text class="scenic-name">{{ scenic.name }}</text>
+        <view v-if="scenic.freeCount > 0" class="free-badge">
+          <text>免{{ scenic.freeCount }}次/年</text>
+        </view>
+      </view>
+
+      <!-- 预约提醒横幅 -->
+      <view v-if="scenic.needReservation" class="notice-banner">
+        <view class="icon-wrap icon-alert" />
+        <text class="notice-text">需预约后出行，未预约无法入园</text>
+      </view>
+
+      <!-- 特色标签行 -->
+      <view class="tags-row" v-if="scenic.tags && scenic.tags.length">
+        <view class="feature-tag" v-for="tag in scenic.tags" :key="tag">
+          <text>{{ tag }}</text>
+        </view>
+      </view>
+
+      <!-- 预约时限 -->
+      <view v-if="scenic.needReservation && scenic.bookingDeadline" class="info-line">
+        <text class="text-assist">{{ scenic.bookingDeadline }}</text>
+      </view>
+
+      <!-- 开放时间 -->
+      <view class="info-line" @click="onHoursClick">
+        <view class="icon-wrap icon-clock" />
+        <text class="text-body">{{ scenic.hours }}</text>
+      </view>
+
+      <!-- 联系电话 -->
+      <view class="info-line clickable" @click="onPhoneClick">
+        <view class="icon-wrap icon-phone" />
+        <text class="text-body">{{ scenic.phone }}</text>
+        <view class="icon-wrap icon-chevron" />
+      </view>
+
+      <!-- 地址 -->
+      <view class="info-line clickable" @click="onMapClick">
+        <view class="icon-wrap icon-map-pin" />
+        <text class="text-body address-text">{{ scenic.address }}</text>
+        <view class="map-btn" @click.stop="onMapClick">
+          <text>地图</text>
+        </view>
       </view>
-      <text class="nav-title">{{ scenic?.name || '景区详情' }}</text>
-      <view class="nav-placeholder" />
     </view>
 
-    <!-- 内容区 -->
-    <scroll-view scroll-y class="detail-scroll" v-if="scenic">
-      <!-- 封面图 -->
-      <view class="cover-section">
-        <image class="cover-img" :src="scenic.image" mode="aspectFill" />
-        <view class="region-tag">
-          <view class="tag-dot" />
-          <text>萍乡</text>
+    <!-- 模块3：卡种权益卡片（独立白卡，无绑定自动隐藏） -->
+    <view
+      class="benefit-card"
+      v-for="card in scenic.cards"
+      :key="card.type"
+    >
+      <view class="benefit-top">
+        <view class="card-type-tag" :class="card.type">
+          <text>{{ card.type === 'super' ? '超级玩家卡' : '赣湘全域旅游年卡' }}</text>
+        </view>
+        <text v-if="scenic.price > 0" class="ticket-price">¥{{ scenic.price }}</text>
+      </view>
+      <view class="benefit-mid">
+        <text class="ticket-label">首道门票</text>
+        <view class="member-row">
+          <view class="icon-wrap icon-crown" />
+          <text class="member-text">持卡用户免费</text>
         </view>
       </view>
-
-      <!-- 信息卡片 -->
-      <view class="info-card">
-        <!-- 标题行 -->
-        <view class="title-row">
-          <text class="scenic-name">{{ scenic.name }}</text>
-          <view v-if="scenic.level" class="level-tag" :class="`level-${scenic.level}`">
-            <text>{{ scenic.level }}</text>
-          </view>
-        </view>
-
-        <!-- 营业状态 -->
-        <view class="info-row">
-          <view class="status-icon" :class="scenic.status === '正常营业' ? 'open' : 'closed'" />
-          <text class="status-text" :class="scenic.status === '正常营业' ? 'open' : 'closed'">
-            {{ scenic.status }}
-          </text>
-        </view>
-
-        <!-- 营业时间 -->
-        <view class="info-row">
-          <view class="time-icon" />
-          <text class="time-text">{{ scenic.hours }}</text>
-        </view>
-
-        <!-- 价格区域 -->
-        <view class="price-section">
-          <view class="price-label">挂牌价</view>
-          <view class="price-group">
-            <text v-if="scenic.price === 0" class="price-free">免费</text>
-            <template v-else>
-              <text class="price-symbol">¥</text>
-              <text class="price-value">{{ scenic.price }}</text>
-            </template>
-          </view>
-        </view>
-
-        <!-- 权益信息 -->
-        <view class="benefit-section">
-          <view class="benefit-card">
-            <text class="benefit-title">持卡权益</text>
-            <text class="benefit-desc">
-              {{ scenic.freeCount > 0 ? `全年免${scenic.freeCount}次首道门票` : '免费入园' }}
-            </text>
-          </view>
-          <view class="benefit-card" :class="scenic.needReservation ? 'warning' : 'success'">
-            <text class="benefit-title">预约要求</text>
-            <text class="benefit-desc">{{ scenic.needReservation ? '需提前预约' : '无需预约' }}</text>
-          </view>
-        </view>
-
-        <!-- 温馨提示 -->
-        <view v-if="scenic.tips" class="tips-section">
-          <view class="section-title">温馨提示</view>
-          <view class="tips-content">
-            <view class="tips-icon">!</view>
-            <text class="tips-text">{{ scenic.tips }}</text>
-          </view>
-        </view>
-
-        <!-- 景区类型 -->
-        <view class="type-section">
-          <view class="section-title">景区类型</view>
-          <view class="type-tag">
-            <text>{{ scenic.type }}</text>
-          </view>
-        </view>
+      <text class="remaining-text">当前卡剩余可使用 {{ card.remaining }} 次</text>
+      <view class="book-btn" @click="onBookClick(card.type)">
+        <text>立即预约</text>
       </view>
-
-      <!-- 底部操作栏 -->
-      <view class="bottom-bar">
-        <view class="action-btn primary" @click="onBookClick">
-          <text>立即预约</text>
-        </view>
-        <view class="action-btn secondary" @click="onCallClick">
-          <text>咨询客服</text>
-        </view>
-      </view>
-    </scroll-view>
-
-    <!-- 加载中 -->
-    <view v-else class="loading-state">
-      <view class="loading-spinner" />
-      <text class="loading-text">加载中...</text>
     </view>
+
+    <!-- 模块4：Tab切换栏 -->
+    <view class="tab-bar">
+      <view
+        class="tab-item"
+        :class="{ active: activeTab === 'notice' }"
+        @click="activeTab = 'notice'"
+      >
+        <text>预约须知</text>
+        <view v-if="activeTab === 'notice'" class="tab-indicator" />
+      </view>
+      <view
+        class="tab-item"
+        :class="{ active: activeTab === 'intro' }"
+        @click="activeTab = 'intro'"
+      >
+        <text>景区介绍</text>
+        <view v-if="activeTab === 'intro'" class="tab-indicator" />
+      </view>
+    </view>
+
+    <!-- 模块5：Tab内容区域 -->
+    <view class="tab-content">
+      <view v-if="activeTab === 'notice'" class="content-section">
+        <view class="content-block" v-for="(item, idx) in scenic.bookingNotice" :key="idx">
+          <text class="block-title">{{ item.title }}</text>
+          <view class="divider" />
+          <text class="block-text">{{ item.content }}</text>
+        </view>
+      </view>
+      <view v-if="activeTab === 'intro'" class="content-section">
+        <text class="intro-text">{{ scenic.introduction }}</text>
+      </view>
+    </view>
+
+    <!-- 底部安全区 -->
+    <view class="safe-bottom" />
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 
-interface ScenicItem {
-  id: number
-  name: string
-  price: number
-  freeCount: number
-  level: '5A' | '4A' | '3A' | '2A' | 'A' | ''
-  status: '正常营业' | '暂停营业'
-  hours: string
-  needReservation: boolean
-  tips: string
-  type: string
-  image: string
+interface NoticeItem { title: string; content: string }
+interface CardBenefit { type: 'super' | 'annual'; remaining: number }
+interface ScenicDetail {
+  id: number; name: string; price: number; freeCount: number; level: string
+  hours: string; needReservation: boolean; bookingDeadline: string
+  phone: string; address: string; tags: string[]; images: string[]
+  introduction: string; bookingNotice: NoticeItem[]; cards: CardBenefit[]
 }
 
-const scenicList: ScenicItem[] = [
-  { id: 1, name: '武功山金顶景区', price: 70, freeCount: 1, level: '5A', status: '正常营业', hours: '08:00-18:00', needReservation: true, tips: '建议提前1天预约，山顶温差大请备好外套', type: '自然风光', image: 'https://images.unsplash.com/photo-1513415564515-763d91423bdd?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 2, name: '杨岐山孽龙洞景区', price: 68, freeCount: 6, level: '4A', status: '正常营业', hours: '08:30-17:30', needReservation: false, tips: '洞内温度恒定18℃，建议携带薄外套', type: '自然风光', image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 3, name: '仙凤三宝景区', price: 50, freeCount: 6, level: '4A', status: '正常营业', hours: '09:00-17:00', needReservation: false, tips: '适合亲子游玩，园内有小动物喂养体验', type: '乡村田园', image: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 4, name: '武功山君澜温泉', price: 228, freeCount: 6, level: '4A', status: '正常营业', hours: '10:00-22:00', needReservation: true, tips: '需提前预约，请自备泳衣泳帽', type: '休闲娱乐', image: 'https://images.unsplash.com/photo-1433086966358-54859d0ed716?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 5, name: '凯光新天地生态旅游区', price: 90, freeCount: 6, level: '4A', status: '正常营业', hours: '08:00-18:00', needReservation: false, tips: '园区较大，建议穿舒适运动鞋', type: '休闲娱乐', image: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 6, name: '和平农场·哎马乐园', price: 79, freeCount: 6, level: '3A', status: '正常营业', hours: '09:00-17:30', needReservation: false, tips: '亲子乐园，周末人流较多建议错峰', type: '乡村田园', image: 'https://images.unsplash.com/photo-1501854140801-50d01698950b?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 7, name: '武功山滑草场', price: 60, freeCount: 6, level: '3A', status: '正常营业', hours: '09:00-17:00', needReservation: false, tips: '雨天暂停开放，请关注天气', type: '休闲娱乐', image: 'https://images.unsplash.com/photo-1551632811-561732d1e306?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 8, name: '芦溪仙凤三宝农业休闲观光园', price: 50, freeCount: 6, level: '3A', status: '正常营业', hours: '08:30-17:30', needReservation: false, tips: '可体验采摘，季节性水果品种丰富', type: '乡村田园', image: 'https://images.unsplash.com/photo-1500382017468-9049fed747ef?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 9, name: '麻山幸福村', price: 40, freeCount: 6, level: '3A', status: '正常营业', hours: '08:00-18:00', needReservation: false, tips: '乡村旅游景区，可体验农家生活', type: '乡村田园', image: 'https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 10, name: '东桥双月湾', price: 38, freeCount: 6, level: '3A', status: '正常营业', hours: '08:00-18:00', needReservation: false, tips: '临水景区，请注意安全', type: '自然风光', image: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 11, name: '上栗花炮文化博览园', price: 45, freeCount: 6, level: '3A', status: '正常营业', hours: '09:00-17:00', needReservation: false, tips: '了解花炮历史文化，适合研学', type: '文化古迹', image: 'https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 12, name: '杨岐普通寺', price: 30, freeCount: 6, level: '3A', status: '正常营业', hours: '08:00-17:00', needReservation: false, tips: '佛教圣地，请保持安静', type: '文化古迹', image: 'https://images.unsplash.com/photo-1518241353330-0f7941c2d9b5?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 13, name: '孽龙洞漂流', price: 88, freeCount: 6, level: '3A', status: '暂停营业', hours: '暂停开放', needReservation: false, tips: '季节性项目，预计6月开放', type: '休闲娱乐', image: 'https://images.unsplash.com/photo-1504280390367-361c6d9f38f4?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 14, name: '安源路矿工人运动纪念馆', price: 0, freeCount: 0, level: '4A', status: '正常营业', hours: '09:00-16:30', needReservation: false, tips: '红色教育基地，周一闭馆', type: '红色教育', image: 'https://images.unsplash.com/photo-1565008576549-57569a49371d?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 15, name: '莲花荷博园', price: 35, freeCount: 6, level: '3A', status: '正常营业', hours: '08:00-18:00', needReservation: false, tips: '夏季荷花盛开时最佳观赏期', type: '自然风光', image: 'https://images.unsplash.com/photo-1490750967868-88aa4486c946?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 16, name: '山口岩水利风景区', price: 25, freeCount: 6, level: '3A', status: '正常营业', hours: '08:00-18:00', needReservation: false, tips: '水利工程景观，可了解水利知识', type: '自然风光', image: 'https://images.unsplash.com/photo-1439066615861-d1af74d74000?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 17, name: '宣风三宝水上乐园', price: 65, freeCount: 6, level: '3A', status: '暂停营业', hours: '暂停开放', needReservation: false, tips: '夏季开放，请关注开园公告', type: '休闲娱乐', image: 'https://images.unsplash.com/photo-1519750013994-3d27cd3f7f49?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 18, name: '万龙山温泉', price: 168, freeCount: 6, level: '4A', status: '正常营业', hours: '10:00-22:00', needReservation: true, tips: '需提前预约，温泉养生好去处', type: '休闲娱乐', image: 'https://images.unsplash.com/photo-1545569341-9eb8b30979d9?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 19, name: '杨岐山野生动物科普园', price: 42, freeCount: 6, level: '3A', status: '正常营业', hours: '09:00-17:00', needReservation: false, tips: '适合亲子科普教育', type: '乡村田园', image: 'https://images.unsplash.com/photo-1474511320723-9a56873571b7?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 20, name: '鸡冠山森林步道', price: 0, freeCount: 0, level: '3A', status: '正常营业', hours: '全天开放', needReservation: false, tips: '森林氧吧，适合徒步健身', type: '自然风光', image: 'https://images.unsplash.com/photo-1551632811-561732d1e306?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 21, name: '赤山杨岐山民宿集群配套景区', price: 28, freeCount: 6, level: '2A', status: '正常营业', hours: '08:00-20:00', needReservation: false, tips: '可体验民宿住宿，感受乡村风情', type: '乡村田园', image: 'https://images.unsplash.com/photo-1510798831971-661eb04b3739?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 22, name: '湘东傩文化园', price: 32, freeCount: 6, level: '3A', status: '正常营业', hours: '09:00-17:00', needReservation: false, tips: '了解傩文化，感受非遗魅力', type: '文化古迹', image: 'https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 23, name: '广寒寨四季花海', price: 36, freeCount: 6, level: '3A', status: '正常营业', hours: '08:00-18:00', needReservation: false, tips: '四季花卉轮番绽放，拍照打卡好去处', type: '自然风光', image: 'https://images.unsplash.com/photo-1490750967868-88aa4486c946?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 24, name: '上栗泉水湾度假村', price: 58, freeCount: 6, level: '3A', status: '正常营业', hours: '09:00-18:00', needReservation: false, tips: '休闲度假好去处，可垂钓烧烤', type: '休闲娱乐', image: 'https://images.unsplash.com/photo-1571896349842-33c89424de2d?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 25, name: '莲花棋盘山', price: 22, freeCount: 6, level: '2A', status: '正常营业', hours: '08:00-18:00', needReservation: false, tips: '登山步道完善，适合休闲健身', type: '自然风光', image: 'https://images.unsplash.com/photo-1444464666168-49d633b86797?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 26, name: '芦溪东阳古村', price: 26, freeCount: 6, level: '3A', status: '正常营业', hours: '08:30-17:30', needReservation: false, tips: '古建筑群保存完好，可感受传统村落文化', type: '文化古迹', image: 'https://images.unsplash.com/photo-1528181304800-259b08848526?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 27, name: '安源欢乐谷', price: 72, freeCount: 6, level: '3A', status: '正常营业', hours: '09:00-18:00', needReservation: false, tips: '游乐设施丰富，适合亲子游玩', type: '休闲娱乐', image: 'https://images.unsplash.com/photo-1513407030348-c9836fb1966d?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 28, name: '湘东太阳广场游乐区', price: 48, freeCount: 6, level: '2A', status: '正常营业', hours: '09:00-21:00', needReservation: false, tips: '夜间灯光秀值得一看', type: '休闲娱乐', image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 29, name: '长平养生谷', price: 52, freeCount: 6, level: '3A', status: '正常营业', hours: '08:00-18:00', needReservation: false, tips: '养生休闲好去处，空气清新', type: '自然风光', image: 'https://images.unsplash.com/photo-1518241353330-0f7941c2d9b5?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 30, name: '坊楼红色文化园', price: 0, freeCount: 0, level: '3A', status: '正常营业', hours: '09:00-17:00', needReservation: false, tips: '红色教育基地，免费参观', type: '红色教育', image: 'https://images.unsplash.com/photo-1565008576549-57569a49371d?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 31, name: '高坑生态采摘园', price: 33, freeCount: 6, level: '2A', status: '正常营业', hours: '08:00-18:00', needReservation: false, tips: '季节性水果采摘，体验田园乐趣', type: '乡村田园', image: 'https://images.unsplash.com/photo-1500382017468-9049fed747ef?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 32, name: '源南田园综合体', price: 39, freeCount: 6, level: '3A', status: '正常营业', hours: '08:30-17:30', needReservation: false, tips: '田园风光优美，可体验农耕文化', type: '乡村田园', image: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 33, name: '下埠陶瓷文化小镇', price: 29, freeCount: 6, level: '3A', status: '正常营业', hours: '09:00-17:00', needReservation: false, tips: '可体验陶瓷制作，了解陶瓷文化', type: '文化古迹', image: 'https://images.unsplash.com/photo-1528181304800-259b08848526?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 34, name: '桐木水上乐园', price: 66, freeCount: 6, level: '3A', status: '暂停营业', hours: '暂停开放', needReservation: false, tips: '夏季开放，请关注开园时间', type: '休闲娱乐', image: 'https://images.unsplash.com/photo-1519750013994-3d27cd3f7f49?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 35, name: '东源温泉度假村', price: 138, freeCount: 6, level: '4A', status: '正常营业', hours: '10:00-22:00', needReservation: true, tips: '需提前预约，温泉品质优良', type: '休闲娱乐', image: 'https://images.unsplash.com/photo-1545569341-9eb8b30979d9?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 36, name: '长丰山水景区', price: 24, freeCount: 6, level: '2A', status: '正常营业', hours: '08:00-18:00', needReservation: false, tips: '山水相依，适合休闲散步', type: '自然风光', image: 'https://images.unsplash.com/photo-1439066615861-d1af74d74000?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 37, name: '白竺青草湖', price: 27, freeCount: 6, level: '3A', status: '正常营业', hours: '08:00-18:00', needReservation: false, tips: '湖光山色，可垂钓泛舟', type: '自然风光', image: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 38, name: '荷尧古渡口', price: 0, freeCount: 0, level: '2A', status: '正常营业', hours: '全天开放', needReservation: false, tips: '古渡口遗址，感受历史文化', type: '文化古迹', image: 'https://images.unsplash.com/photo-1504280390367-361c6d9f38f4?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 39, name: '新泉红色研学基地', price: 31, freeCount: 6, level: '3A', status: '正常营业', hours: '09:00-17:00', needReservation: true, tips: '研学活动需提前预约', type: '红色教育', image: 'https://images.unsplash.com/photo-1565008576549-57569a49371d?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 40, name: '张佳坊山地乐园', price: 55, freeCount: 6, level: '3A', status: '正常营业', hours: '09:00-17:30', needReservation: false, tips: '山地运动项目丰富，注意安全', type: '休闲娱乐', image: 'https://images.unsplash.com/photo-1551632811-561732d1e306?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 41, name: '南坑户外拓展基地', price: 44, freeCount: 6, level: '3A', status: '正常营业', hours: '08:30-18:00', needReservation: true, tips: '团队拓展需提前预约', type: '休闲娱乐', image: 'https://images.unsplash.com/photo-1501854140801-50d01698950b?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-  { id: 42, name: '老关荷花景区', price: 34, freeCount: 6, level: '2A', status: '正常营业', hours: '08:00-18:00', needReservation: false, tips: '夏季荷花盛开，景色宜人', type: '自然风光', image: 'https://images.unsplash.com/photo-1490750967868-88aa4486c946?fm=jpg&q=80&w=1200&h=600&fit=crop' },
-]
+const scenic = ref<ScenicDetail>({ tags: [], images: [], cards: [], bookingNotice: [] } as unknown as ScenicDetail)
+const activeTab = ref<'notice' | 'intro'>('notice')
 
-const scenic = ref<ScenicItem | null>(null)
+// 双卡种数据：超级玩家卡 remaining 与 freeCount 一致，年卡 remaining 稍多
+function buildCards(freeCount: number): CardBenefit[] {
+  if (freeCount <= 0) return []
+  return [
+    { type: 'super', remaining: freeCount },
+    { type: 'annual', remaining: freeCount + 2 },
+  ]
+}
+
+const scenicData: ScenicDetail[] = [
+  { id: 1, name: '武功山金顶景区', price: 70, freeCount: 1, level: '5A', hours: '08:00-18:00', needReservation: true, bookingDeadline: '游玩当日16:00前预约', phone: '0799-7636666', address: '江西省萍乡市芦溪县东南边境', tags: ['5A景区', '高山草甸', '日出云海', '徒步圣地'], images: ['https://images.unsplash.com/photo-1513415564515-763d91423bdd?fm=jpg&q=80&w=750&h=500&fit=crop', 'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?fm=jpg&q=80&w=750&h=500&fit=crop', 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?fm=jpg&q=80&w=750&h=500&fit=crop'], introduction: '武功山位于江西省萍乡市东南边缘，主峰白鹤峰海拔1918.3米，为江西省第一高峰。武功山以壮观的高山草甸、日出云海和千年古祭坛群著称，被誉为"云中草原、户外天堂"。景区内有金顶、羊狮幕、发云界等核心景观，四季景色各异，春赏杜鹃、夏避酷暑、秋观红叶、冬看雾凇，是徒步露营和摄影爱好者的理想目的地。', bookingNotice: [{ title: '预约方式', content: '需提前通过小程序在线预约，预约成功后凭二维码入园。每日限流5000人，建议提前1-3天预约。' }, { title: '入园须知', content: '请携带身份证原件，配合工作人员核验健康码。山顶温差较大，建议携带防风保暖衣物。雷雨天气请勿登顶。' }, { title: '退改规则', content: '预约成功后如需取消，请至少提前24小时操作。逾期未使用视为自动放弃，不予退款。' }], cards: buildCards(1) },
+  { id: 2, name: '杨岐山孽龙洞景区', price: 68, freeCount: 6, level: '4A', hours: '08:30-17:30', needReservation: false, bookingDeadline: '', phone: '0799-3862888', address: '江西省萍乡市上栗县杨岐山', tags: ['4A景区', '溶洞奇观', '地质公园', '天然氧吧'], images: ['https://images.unsplash.com/photo-1506905925346-21bda4d32df4?fm=jpg&q=80&w=750&h=500&fit=crop', 'https://images.unsplash.com/photo-1519681393784-d120267933ba?fm=jpg&q=80&w=750&h=500&fit=crop'], introduction: '孽龙洞位于杨岐山风景名胜区内，是一个形成于1.8亿年前的天然溶洞。洞内全长4公里，已开发游览线路2.8公里，洞内常年恒温18℃，钟乳石形态各异，有"地下艺术长廊"之美誉。', bookingNotice: [{ title: '入园方式', content: '持惠民卡直接到景区售票处验证入园，无需预约。' }, { title: '游览提示', content: '洞内温度恒定18℃，建议携带薄外套。洞内道路湿滑，请穿防滑鞋，老人和儿童需有成人陪同。' }], cards: buildCards(6) },
+  { id: 3, name: '仙凤三宝景区', price: 50, freeCount: 6, level: '4A', hours: '09:00-17:00', needReservation: false, bookingDeadline: '', phone: '0799-7558888', address: '江西省萍乡市芦溪县宣风镇', tags: ['4A景区', '亲子乐园', '萌宠互动', '田园体验'], images: ['https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?fm=jpg&q=80&w=750&h=500&fit=crop'], introduction: '仙凤三宝景区是一个集生态农业、亲子游乐、休闲度假于一体的综合性旅游景区。园内有萌宠乐园、花海观赏、果蔬采摘等特色项目，适合全家出行。', bookingNotice: [{ title: '入园方式', content: '持惠民卡直接到景区售票处验证入园，无需预约。' }, { title: '游玩提示', content: '适合亲子游玩，园内有小动物喂养体验，请勿投喂自带食物。' }], cards: buildCards(6) },
+  { id: 4, name: '武功山君澜温泉', price: 228, freeCount: 6, level: '4A', hours: '10:00-22:00', needReservation: true, bookingDeadline: '游玩当日12:00前预约', phone: '0799-7639999', address: '江西省萍乡市芦溪县武功山景区内', tags: ['4A景区', '温泉养生', '度假休闲', '山间秘境'], images: ['https://images.unsplash.com/photo-1433086966358-54859d0ed716?fm=jpg&q=80&w=750&h=500&fit=crop', 'https://images.unsplash.com/photo-1545569341-9eb8b30979d9?fm=jpg&q=80&w=750&h=500&fit=crop'], introduction: '武功山君澜温泉坐落于武功山脚下，依山傍水，环境优美。温泉水取自地下1500米深层矿泉，富含多种对人体有益的微量元素。', bookingNotice: [{ title: '预约方式', content: '需提前通过小程序预约，建议提前1天。请自备泳衣泳帽。' }, { title: '退改规则', content: '提前24小时可免费取消。' }], cards: buildCards(6) },
+  { id: 5, name: '凯光新天地生态旅游区', price: 90, freeCount: 6, level: '4A', hours: '08:00-18:00', needReservation: false, bookingDeadline: '', phone: '0799-6881888', address: '江西省萍乡市安源区高坑镇', tags: ['4A景区', '生态观光', '户外拓展', '花卉园林'], images: ['https://images.unsplash.com/photo-1441974231531-c6227db76b6e?fm=jpg&q=80&w=750&h=500&fit=crop'], introduction: '凯光新天地生态旅游区是集生态观光、休闲娱乐、户外运动于一体的大型生态旅游综合体。', bookingNotice: [{ title: '入园方式', content: '持惠民卡直接到景区售票处验证入园，无需预约。' }], cards: buildCards(6) },
+  { id: 14, name: '安源路矿工人运动纪念馆', price: 0, freeCount: 0, level: '4A', hours: '09:00-16:30', needReservation: false, bookingDeadline: '', phone: '0799-6832001', address: '江西省萍乡市安源区安源镇', tags: ['4A景区', '红色教育', '免费参观', '爱国主义基地'], images: ['https://images.unsplash.com/photo-1565008576549-57569a49371d?fm=jpg&q=80&w=750&h=500&fit=crop'], introduction: '安源路矿工人运动纪念馆是全国重点文物保护单位，全面展示了安源路矿工人大罢工的光辉历史。', bookingNotice: [{ title: '参观须知', content: '免费参观，周一闭馆。请携带身份证原件入馆。' }], cards: buildCards(0) },
+  { id: 30, name: '坊楼红色文化园', price: 0, freeCount: 0, level: '3A', hours: '09:00-17:00', needReservation: false, bookingDeadline: '', phone: '0799-7220000', address: '江西省萍乡市莲花县坊楼镇', tags: ['3A景区', '红色教育', '免费参观', '革命历史'], images: ['https://images.unsplash.com/photo-1565008576549-57569a49371d?fm=jpg&q=80&w=750&h=500&fit=crop'], introduction: '坊楼红色文化园展示了莲花县丰富的革命历史，是重要的红色教育基地。', bookingNotice: [{ title: '参观须知', content: '免费参观，请保持安静。' }], cards: buildCards(0) },
+  { id: 38, name: '荷尧古渡口', price: 0, freeCount: 0, level: '2A', hours: '全天开放', needReservation: false, bookingDeadline: '', phone: '0799-3377200', address: '江西省萍乡市湘东区荷尧镇', tags: ['2A景区', '古渡口遗址', '免费开放', '历史文化'], images: ['https://images.unsplash.com/photo-1504280390367-361c6d9f38f4?fm=jpg&q=80&w=750&h=500&fit=crop'], introduction: '荷尧古渡口是一处保存完好的古渡口遗址，见证了千年的交通商贸历史。', bookingNotice: [{ title: '游览提示', content: '免费开放，全天可参观。临水区域请注意安全。' }], cards: buildCards(0) },
+]
 
 onLoad((options) => {
   const id = parseInt(options?.id || '0')
-  scenic.value = scenicList.find(s => s.id === id) || null
+  const found = scenicData.find(s => s.id === id)
+  if (found) {
+    scenic.value = found
+    uni.setNavigationBarTitle({ title: found.name })
+  } else {
+    scenic.value = scenicData[0]
+    uni.setNavigationBarTitle({ title: scenicData[0].name })
+  }
 })
 
-function goBack() {
-  uni.navigateBack()
+function onHoursClick() {
+  uni.showToast({ title: '营业时间仅供参考', icon: 'none' })
 }
-
-function onBookClick() {
-  uni.showToast({
-    title: '预约功能开发中',
-    icon: 'none',
-  })
+function onPhoneClick() {
+  uni.showToast({ title: '联系电话功能开发中', icon: 'none' })
 }
-
-function onCallClick() {
-  uni.showToast({
-    title: '客服功能开发中',
-    icon: 'none',
-  })
+function onMapClick() {
+  uni.showToast({ title: '地图导航开发中', icon: 'none' })
+}
+function onBookClick(cardType: string) {
+  const label = cardType === 'super' ? '超级玩家卡' : '赣湘全域旅游年卡'
+  uni.showToast({ title: `${label}预约功能开发中`, icon: 'none' })
 }
 </script>
 
 <style lang="scss" scoped>
+/* Lucide 图标 data URI — 统一 28rpx、stroke-width:2 */
+$icon-size: 28rpx;
+$icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ff7d00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
+$icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
+$icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
+$icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
+$icon-map-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
+$icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f9ae3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 4 3 12h14l3-12-6 7-4-7-4 7-6-7zm3 16h14'/%3E%3C/svg%3E");
+
 .page {
   min-height: 100vh;
   background: $color-background;
-  display: flex;
-  flex-direction: column;
 }
 
-/* 导航栏 */
-.nav-bar {
-  height: 88rpx;
-  background: $color-card;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 $spacing-3;
-  box-shadow: $shadow-sm;
-  position: sticky;
-  top: 0;
-  z-index: 10;
+/* ====== 图标基础 ====== */
+.icon-wrap {
+  width: $icon-size;
+  height: $icon-size;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  flex-shrink: 0;
+}
+.icon-alert { background-image: $icon-alert; }
+.icon-clock { background-image: $icon-clock; }
+.icon-phone { background-image: $icon-phone; }
+.icon-chevron { background-image: $icon-chevron; }
+.icon-map-pin { background-image: $icon-map-pin; }
+.icon-crown { background-image: $icon-crown; }
+
+/* ====== 字体层级 ====== */
+.text-title {
+  font-size: 36rpx;
+  font-weight: $font-weight-bold;
+  color: #111111;
+  line-height: 48rpx;
+}
+.text-body {
+  font-size: 28rpx;
+  color: #333333;
+  line-height: 40rpx;
+}
+.text-assist {
+  font-size: 24rpx;
+  color: #666666;
+  line-height: 32rpx;
+}
+.text-hint {
+  font-size: 22rpx;
+  color: #999999;
+  line-height: 32rpx;
 }
 
-.nav-back {
-  width: 60rpx;
-  height: 60rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: $radius-base;
-  transition: background $transition-fast;
-
-  &:active {
-    background: $color-muted;
-  }
-}
-
-.back-arrow {
-  width: 20rpx;
-  height: 20rpx;
-  border-left: 4rpx solid $color-foreground;
-  border-bottom: 4rpx solid $color-foreground;
-  transform: rotate(45deg);
-  margin-left: 6rpx;
-}
-
-.nav-title {
-  font-size: $font-size-lg;
-  font-weight: $font-weight-semibold;
-  color: $color-foreground;
-}
-
-.nav-placeholder {
-  width: 60rpx;
-}
-
-/* 滚动区域 */
-.detail-scroll {
-  flex: 1;
-}
-
-/* 封面图 */
-.cover-section {
-  position: relative;
+/* ====== 模块1：轮播大图 ====== */
+.hero-swiper {
   width: 100%;
   height: 480rpx;
-  background: $color-muted;
 }
-
-.cover-img {
+.hero-img {
   width: 100%;
-  height: 100%;
+  height: 480rpx;
 }
 
-.region-tag {
-  position: absolute;
-  top: $spacing-3;
-  left: $spacing-3;
-  display: flex;
-  align-items: center;
-  gap: 8rpx;
-  background: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(8rpx);
-  border-radius: $radius-sm;
-  padding: 8rpx $spacing-2;
-
-  text {
-    font-size: $font-size-sm;
-    color: #fff;
-  }
-}
-
-.tag-dot {
-  width: 10rpx;
-  height: 10rpx;
-  border-radius: 50%;
-  background: #fff;
-}
-
-/* 信息卡片 */
+/* ====== 模块2：基础信息卡片 ====== */
 .info-card {
   background: $color-card;
-  margin: -60rpx $spacing-3 $spacing-3;
+  margin: -40rpx $spacing-3 0;
   padding: $spacing-3;
   border-radius: $radius-lg;
   box-shadow: $shadow-base;
@@ -305,328 +268,306 @@ function onCallClick() {
   z-index: 5;
 }
 
-/* 标题行 */
 .title-row {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
-  margin-bottom: $spacing-3;
+  margin-bottom: $spacing-2;
 }
 
 .scenic-name {
-  font-size: $font-size-xl;
-  font-weight: $font-weight-bold;
-  color: $color-foreground;
+  @extend .text-title;
   flex: 1;
   margin-right: $spacing-2;
 }
 
-.level-tag {
-  padding: 6rpx $spacing-2;
+.free-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6rpx 16rpx;
+  background: $uv-primary;
+  border-radius: $radius-sm;
+  flex-shrink: 0;
+  min-height: 40rpx;
+
+  text {
+    font-size: 22rpx;
+    color: #fff;
+    font-weight: $font-weight-semibold;
+    line-height: 1;
+  }
+}
+
+.notice-banner {
+  display: flex;
+  align-items: center;
+  background: $uv-warning-light;
+  border-radius: $radius-base;
+  padding: $spacing-2;
+  margin-bottom: $spacing-2;
+  gap: 12rpx;
+}
+
+.notice-text {
+  font-size: 24rpx;
+  color: #ff7d00;
+  font-weight: $font-weight-medium;
+}
+
+.tags-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12rpx;
+  margin-bottom: $spacing-2;
+}
+
+.feature-tag {
+  padding: 4rpx 16rpx;
+  border: $border-width solid rgba($uv-primary, 0.3);
+  border-radius: $radius-sm;
+
+  text {
+    font-size: 24rpx;
+    color: $uv-primary;
+  }
+}
+
+.info-line {
+  display: flex;
+  align-items: center;
+  min-height: 64rpx;
+  padding: 16rpx 0;
+  gap: 12rpx;
+  border-bottom: $border-width solid rgba($uv-border-color, 0.3);
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &.clickable {
+    min-height: 88rpx;
+    transition: background $transition-fast;
+
+    &:active {
+      background: $color-muted;
+      margin: 0 (-$spacing-3);
+      padding-left: $spacing-3;
+      padding-right: $spacing-3;
+    }
+  }
+}
+
+.address-text {
+  flex: 1;
+  line-height: 1.5;
+}
+
+.map-btn {
+  padding: 8rpx 20rpx;
+  background: $uv-primary-light;
   border-radius: $radius-sm;
   flex-shrink: 0;
 
   text {
-    font-size: $font-size-sm;
+    font-size: 24rpx;
+    color: $uv-primary;
+    font-weight: $font-weight-medium;
+  }
+
+  &:active { opacity: 0.7; }
+}
+
+/* ====== 模块3：卡种权益卡片 ====== */
+.benefit-card {
+  background: $color-card;
+  margin: 0 $spacing-3 $spacing-2;
+  padding: $spacing-3;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-sm;
+}
+
+.benefit-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: $spacing-2;
+}
+
+.card-type-tag {
+  padding: 4rpx 16rpx;
+  border-radius: $radius-sm;
+
+  text {
+    font-size: 22rpx;
     color: #fff;
     font-weight: $font-weight-semibold;
   }
 
-  &.level-5A {
-    background: #EF4444;
+  &.super {
+    background: #f9ae3d;
   }
 
-  &.level-4A {
-    background: #F59E0B;
-  }
-
-  &.level-3A,
-  &.level-2A,
-  &.level-A {
+  &.annual {
     background: $uv-success;
   }
 }
 
-/* 信息行 */
-.info-row {
+.ticket-price {
+  font-size: 28rpx;
+  color: #999999;
+  text-decoration: line-through;
+}
+
+.benefit-mid {
   display: flex;
   align-items: center;
-  margin-bottom: $spacing-2;
+  justify-content: space-between;
+  margin-bottom: 12rpx;
 }
 
-.status-icon {
-  width: 20rpx;
-  height: 20rpx;
-  border-radius: 50%;
-  margin-right: $spacing-2;
-
-  &.open {
-    background: $uv-success;
-  }
-
-  &.closed {
-    background: $uv-error;
-  }
-}
-
-.status-text {
-  font-size: $font-size-base;
+.ticket-label {
+  font-size: 28rpx;
+  color: #333333;
   font-weight: $font-weight-medium;
-
-  &.open {
-    color: $uv-success;
-  }
-
-  &.closed {
-    color: $uv-error;
-  }
 }
 
-.time-icon {
-  width: 24rpx;
-  height: 24rpx;
-  border: 3rpx solid $uv-tips-color;
-  border-radius: 50%;
-  margin-right: $spacing-2;
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: 3rpx;
-    height: 10rpx;
-    background: $uv-tips-color;
-    top: 5rpx;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    width: 8rpx;
-    height: 3rpx;
-    background: $uv-tips-color;
-    top: 50%;
-    left: 50%;
-    transform: translateY(-50%);
-  }
-}
-
-.time-text {
-  font-size: $font-size-base;
-  color: $uv-content-color;
-}
-
-/* 价格区域 */
-.price-section {
-  background: $uv-warning-light;
-  border-radius: $radius-base;
-  padding: $spacing-3;
-  margin-bottom: $spacing-3;
-}
-
-.price-label {
-  font-size: $font-size-sm;
-  color: $uv-content-color;
-  margin-bottom: $spacing-1;
-}
-
-.price-group {
+.member-row {
   display: flex;
-  align-items: baseline;
+  align-items: center;
+  gap: 8rpx;
 }
 
-.price-symbol {
-  font-size: $font-size-lg;
-  color: $uv-warning-dark;
-  font-weight: $font-weight-bold;
+.member-text {
+  font-size: 24rpx;
+  color: #f9ae3d;
+  font-weight: $font-weight-semibold;
 }
 
-.price-value {
-  font-size: $font-size-3xl;
-  color: $uv-warning-dark;
-  font-weight: $font-weight-bold;
-  line-height: 1;
-}
-
-.price-free {
-  font-size: $font-size-xl;
+.remaining-text {
+  font-size: 22rpx;
   color: $uv-success;
-  font-weight: $font-weight-bold;
-}
-
-/* 权益信息 */
-.benefit-section {
-  display: flex;
-  gap: $spacing-2;
-  margin-bottom: $spacing-3;
-}
-
-.benefit-card {
-  flex: 1;
-  background: $uv-primary-light;
-  border-radius: $radius-base;
-  padding: $spacing-2;
-
-  &.warning {
-    background: $uv-warning-light;
-  }
-
-  &.success {
-    background: $uv-success-light;
-  }
-}
-
-.benefit-title {
-  font-size: $font-size-sm;
-  color: $uv-content-color;
-  margin-bottom: $spacing-1;
   display: block;
-}
-
-.benefit-desc {
-  font-size: $font-size-base;
-  color: $color-foreground;
-  font-weight: $font-weight-semibold;
-  display: block;
-}
-
-/* 分区标题 */
-.section-title {
-  font-size: $font-size-base;
-  font-weight: $font-weight-semibold;
-  color: $color-foreground;
   margin-bottom: $spacing-2;
 }
 
-/* 温馨提示 */
-.tips-section {
-  margin-bottom: $spacing-3;
-}
-
-.tips-content {
-  display: flex;
-  align-items: flex-start;
-  background: rgba(249, 174, 61, 0.08);
-  border-radius: $radius-base;
-  padding: $spacing-2;
-}
-
-.tips-icon {
-  width: 36rpx;
-  height: 36rpx;
-  background: $uv-warning;
-  color: #fff;
-  border-radius: 50%;
+.book-btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: $font-size-base;
-  font-weight: $font-weight-bold;
-  margin-right: $spacing-2;
-  flex-shrink: 0;
-}
-
-.tips-text {
-  font-size: $font-size-base;
-  color: $uv-content-color;
-  line-height: 1.6;
-}
-
-/* 景区类型 */
-.type-section {
-  margin-bottom: 120rpx;
-}
-
-.type-tag {
-  display: inline-flex;
-  padding: $spacing-1 $spacing-3;
-  background: $color-muted;
-  border-radius: $radius-full;
-
-  text {
-    font-size: $font-size-base;
-    color: $uv-content-color;
-  }
-}
-
-/* 底部操作栏 */
-.bottom-bar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: $color-card;
-  padding: $spacing-3;
-  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
-  display: flex;
-  gap: $spacing-2;
-  z-index: 20;
-}
-
-.action-btn {
-  flex: 1;
   height: 88rpx;
+  background: linear-gradient(135deg, $uv-primary, $uv-primary-dark);
   border-radius: $radius-full;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  box-shadow: 0 4rpx 16rpx rgba($uv-primary, 0.3);
   transition: transform $transition-fast;
 
   text {
-    font-size: $font-size-base;
+    font-size: 28rpx;
+    color: #fff;
     font-weight: $font-weight-semibold;
   }
 
   &:active {
-    transform: scale(0.98);
-  }
-
-  &.primary {
-    background: $uv-primary;
-
-    text {
-      color: #fff;
-    }
-  }
-
-  &.secondary {
-    background: $color-muted;
-
-    text {
-      color: $uv-content-color;
-    }
+    transform: scale(0.97);
+    opacity: 0.9;
   }
 }
 
-/* 加载中 */
-.loading-state {
+/* ====== 模块4：Tab切换栏 ====== */
+.tab-bar {
+  display: flex;
+  background: $color-card;
+  margin: 0 $spacing-3;
+  border-radius: $radius-lg $radius-lg 0 0;
+  box-shadow: $shadow-sm;
+  overflow: hidden;
+}
+
+.tab-item {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-}
+  padding: $spacing-3 0 $spacing-2;
+  position: relative;
 
-.loading-spinner {
-  width: 64rpx;
-  height: 64rpx;
-  border: 6rpx solid $color-muted;
-  border-top-color: $uv-primary;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-  margin-bottom: $spacing-3;
-}
+  text {
+    font-size: 28rpx;
+    color: #999999;
+    font-weight: $font-weight-normal;
+  }
 
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
+  &.active text {
+    color: $uv-primary;
+    font-weight: $font-weight-semibold;
+  }
+
+  &:active {
+    background: $color-muted;
   }
 }
 
-.loading-text {
-  font-size: $font-size-base;
-  color: $uv-tips-color;
+.tab-indicator {
+  width: 48rpx;
+  height: 6rpx;
+  background: $uv-primary;
+  border-radius: $radius-full;
+  margin-top: 8rpx;
+}
+
+/* ====== 模块5：Tab内容 ====== */
+.tab-content {
+  background: $color-card;
+  margin: 0 $spacing-3;
+  border-radius: 0 0 $radius-lg $radius-lg;
+  box-shadow: $shadow-sm;
+  padding: $spacing-3;
+}
+
+.content-section {
+  animation: fadeIn 200ms ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.content-block {
+  margin-bottom: $spacing-3;
+  &:last-child { margin-bottom: 0; }
+}
+
+.block-title {
+  font-size: 28rpx;
+  font-weight: $font-weight-bold;
+  color: #333333;
+  display: block;
+  margin-bottom: 8rpx;
+}
+
+.divider {
+  height: $border-width;
+  background: rgba($uv-border-color, 0.4);
+  margin-bottom: $spacing-2;
+}
+
+.block-text {
+  font-size: 26rpx;
+  color: #666666;
+  line-height: 1.8;
+  display: block;
+}
+
+.intro-text {
+  font-size: 26rpx;
+  color: #666666;
+  line-height: 2;
+  display: block;
+}
+
+/* ====== 底部安全区 ====== */
+.safe-bottom {
+  height: calc(40rpx + env(safe-area-inset-bottom));
 }
 </style>
diff --git a/src/pages/scenic-list/scenic-list.vue b/src/pages/scenic-list/scenic-list.vue
index 008ee31..8d20138 100644
--- a/src/pages/scenic-list/scenic-list.vue
+++ b/src/pages/scenic-list/scenic-list.vue
@@ -171,7 +171,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, getCurrentInstance } from 'vue'
+import { ref, computed } from 'vue'
 
 interface ScenicItem {
   id: number
@@ -225,13 +225,8 @@ const stickyHeaderHeight = ref(96) // 预估，onMounted 后精确测量
   // #endif
 })()
 
-// 测量吸顶筛选区实际高度
-onMounted(() => {
-  const query = uni.createSelectorQuery().in(getCurrentInstance())
-  query.select('.sticky-header').boundingClientRect((rect: any) => {
-    if (rect) stickyHeaderHeight.value = Math.ceil(rect.height)
-  }).exec()
-})
+// 吸顶筛选区高度（搜索框72rpx + 下拉行约72rpx + padding 32rpx ≈ 176rpx ≈ 88px）
+stickyHeaderHeight.value = 88
 
 // ========== 数据 ==========
 const scenicList: ScenicItem[] = [
@@ -251,9 +246,9 @@ const scenicList: ScenicItem[] = [
   { id: 14, name: '安源路矿工人运动纪念馆', price: 0, freeCount: 0, level: '4A', status: '正常营业', hours: '09:00-16:30', needReservation: false, tips: '红色教育基地，周一闭馆', type: '红色教育', region: '安源区', image: 'https://images.unsplash.com/photo-1565008576549-57569a49371d?fm=jpg&q=80&w=800&h=400&fit=crop' },
   { id: 15, name: '莲花荷博园', price: 35, freeCount: 6, level: '3A', status: '正常营业', hours: '08:00-18:00', needReservation: false, tips: '夏季荷花盛开时最佳观赏期', type: '自然风光', region: '莲花县', image: 'https://images.unsplash.com/photo-1490750967868-88aa4486c946?fm=jpg&q=80&w=800&h=400&fit=crop' },
   { id: 16, name: '山口岩水利风景区', price: 25, freeCount: 6, level: '3A', status: '正常营业', hours: '08:00-18:00', needReservation: false, tips: '水利工程景观，可了解水利知识', type: '自然风光', region: '芦溪县', image: 'https://images.unsplash.com/photo-1439066615861-d1af74d74000?fm=jpg&q=80&w=800&h=400&fit=crop' },
-  { id: 17, name: '宣风三宝水上乐园', price: 65, freeCount: 6, level: '3A', status: '暂停营业', hours: '暂停开放', needReservation: false, tips: '夏季开放，请关注开园公告', type: '休闲娱乐', region: '芦溪县', image: 'https://images.unsplash.com/photo-1519750013994-3d27cd3f7f49?fm=jpg&q=80&w=800&h=400&fit=crop' },
+  { id: 17, name: '宣风三宝水上乐园', price: 65, freeCount: 6, level: '3A', status: '暂停营业', hours: '暂停开放', needReservation: false, tips: '夏季开放，请关注开园公告', type: '休闲娱乐', region: '芦溪县', image: 'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?fm=jpg&q=80&w=800&h=400&fit=crop' },
   { id: 18, name: '万龙山温泉', price: 168, freeCount: 6, level: '4A', status: '正常营业', hours: '10:00-22:00', needReservation: true, tips: '需提前预约，温泉养生好去处', type: '休闲娱乐', region: '芦溪县', image: 'https://images.unsplash.com/photo-1545569341-9eb8b30979d9?fm=jpg&q=80&w=800&h=400&fit=crop' },
-  { id: 19, name: '杨岐山野生动物科普园', price: 42, freeCount: 6, level: '3A', status: '正常营业', hours: '09:00-17:00', needReservation: false, tips: '适合亲子科普教育', type: '乡村田园', region: '上栗县', image: 'https://images.unsplash.com/photo-1474511320723-9a56873571b7?fm=jpg&q=80&w=800&h=400&fit=crop' },
+  { id: 19, name: '杨岐山野生动物科普园', price: 42, freeCount: 6, level: '3A', status: '正常营业', hours: '09:00-17:00', needReservation: false, tips: '适合亲子科普教育', type: '乡村田园', region: '上栗县', image: 'https://images.unsplash.com/photo-1518241353330-0f7941c2d9b5?fm=jpg&q=80&w=800&h=400&fit=crop' },
   { id: 20, name: '鸡冠山森林步道', price: 0, freeCount: 0, level: '3A', status: '正常营业', hours: '全天开放', needReservation: false, tips: '森林氧吧，适合徒步健身', type: '自然风光', region: '上栗县', image: 'https://images.unsplash.com/photo-1551632811-561732d1e306?fm=jpg&q=80&w=800&h=400&fit=crop' },
   { id: 21, name: '赤山杨岐山民宿集群配套景区', price: 28, freeCount: 6, level: '2A', status: '正常营业', hours: '08:00-20:00', needReservation: false, tips: '可体验民宿住宿，感受乡村风情', type: '乡村田园', region: '上栗县', image: 'https://images.unsplash.com/photo-1510798831971-661eb04b3739?fm=jpg&q=80&w=800&h=400&fit=crop' },
   { id: 22, name: '湘东傩文化园', price: 32, freeCount: 6, level: '3A', status: '正常营业', hours: '09:00-17:00', needReservation: false, tips: '了解傩文化，感受非遗魅力', type: '文化古迹', region: '湘东区', image: 'https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?fm=jpg&q=80&w=800&h=400&fit=crop' },
@@ -261,14 +256,14 @@ const scenicList: ScenicItem[] = [
   { id: 24, name: '上栗泉水湾度假村', price: 58, freeCount: 6, level: '3A', status: '正常营业', hours: '09:00-18:00', needReservation: false, tips: '休闲度假好去处，可垂钓烧烤', type: '休闲娱乐', region: '上栗县', image: 'https://images.unsplash.com/photo-1571896349842-33c89424de2d?fm=jpg&q=80&w=800&h=400&fit=crop' },
   { id: 25, name: '莲花棋盘山', price: 22, freeCount: 6, level: '2A', status: '正常营业', hours: '08:00-18:00', needReservation: false, tips: '登山步道完善，适合休闲健身', type: '自然风光', region: '莲花县', image: 'https://images.unsplash.com/photo-1444464666168-49d633b86797?fm=jpg&q=80&w=800&h=400&fit=crop' },
   { id: 26, name: '芦溪东阳古村', price: 26, freeCount: 6, level: '3A', status: '正常营业', hours: '08:30-17:30', needReservation: false, tips: '古建筑群保存完好，可感受传统村落文化', type: '文化古迹', region: '芦溪县', image: 'https://images.unsplash.com/photo-1528181304800-259b08848526?fm=jpg&q=80&w=800&h=400&fit=crop' },
-  { id: 27, name: '安源欢乐谷', price: 72, freeCount: 6, level: '3A', status: '正常营业', hours: '09:00-18:00', needReservation: false, tips: '游乐设施丰富，适合亲子游玩', type: '休闲娱乐', region: '安源区', image: 'https://images.unsplash.com/photo-1513407030348-c9836fb1966d?fm=jpg&q=80&w=800&h=400&fit=crop' },
+  { id: 27, name: '安源欢乐谷', price: 72, freeCount: 6, level: '3A', status: '正常营业', hours: '09:00-18:00', needReservation: false, tips: '游乐设施丰富，适合亲子游玩', type: '休闲娱乐', region: '安源区', image: 'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?fm=jpg&q=80&w=800&h=400&fit=crop' },
   { id: 28, name: '湘东太阳广场游乐区', price: 48, freeCount: 6, level: '2A', status: '正常营业', hours: '09:00-21:00', needReservation: false, tips: '夜间灯光秀值得一看', type: '休闲娱乐', region: '湘东区', image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?fm=jpg&q=80&w=800&h=400&fit=crop' },
   { id: 29, name: '长平养生谷', price: 52, freeCount: 6, level: '3A', status: '正常营业', hours: '08:00-18:00', needReservation: false, tips: '养生休闲好去处，空气清新', type: '自然风光', region: '上栗县', image: 'https://images.unsplash.com/photo-1518241353330-0f7941c2d9b5?fm=jpg&q=80&w=800&h=400&fit=crop' },
   { id: 30, name: '坊楼红色文化园', price: 0, freeCount: 0, level: '3A', status: '正常营业', hours: '09:00-17:00', needReservation: false, tips: '红色教育基地，免费参观', type: '红色教育', region: '莲花县', image: 'https://images.unsplash.com/photo-1565008576549-57569a49371d?fm=jpg&q=80&w=800&h=400&fit=crop' },
   { id: 31, name: '高坑生态采摘园', price: 33, freeCount: 6, level: '2A', status: '正常营业', hours: '08:00-18:00', needReservation: false, tips: '季节性水果采摘，体验田园乐趣', type: '乡村田园', region: '安源区', image: 'https://images.unsplash.com/photo-1500382017468-9049fed747ef?fm=jpg&q=80&w=800&h=400&fit=crop' },
   { id: 32, name: '源南田园综合体', price: 39, freeCount: 6, level: '3A', status: '正常营业', hours: '08:30-17:30', needReservation: false, tips: '田园风光优美，可体验农耕文化', type: '乡村田园', region: '芦溪县', image: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?fm=jpg&q=80&w=800&h=400&fit=crop' },
   { id: 33, name: '下埠陶瓷文化小镇', price: 29, freeCount: 6, level: '3A', status: '正常营业', hours: '09:00-17:00', needReservation: false, tips: '可体验陶瓷制作，了解陶瓷文化', type: '文化古迹', region: '湘东区', image: 'https://images.unsplash.com/photo-1528181304800-259b08848526?fm=jpg&q=80&w=800&h=400&fit=crop' },
-  { id: 34, name: '桐木水上乐园', price: 66, freeCount: 6, level: '3A', status: '暂停营业', hours: '暂停开放', needReservation: false, tips: '夏季开放，请关注开园时间', type: '休闲娱乐', region: '上栗县', image: 'https://images.unsplash.com/photo-1519750013994-3d27cd3f7f49?fm=jpg&q=80&w=800&h=400&fit=crop' },
+  { id: 34, name: '桐木水上乐园', price: 66, freeCount: 6, level: '3A', status: '暂停营业', hours: '暂停开放', needReservation: false, tips: '夏季开放，请关注开园时间', type: '休闲娱乐', region: '上栗县', image: 'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?fm=jpg&q=80&w=800&h=400&fit=crop' },
   { id: 35, name: '东源温泉度假村', price: 138, freeCount: 6, level: '4A', status: '正常营业', hours: '10:00-22:00', needReservation: true, tips: '需提前预约，温泉品质优良', type: '休闲娱乐', region: '上栗县', image: 'https://images.unsplash.com/photo-1545569341-9eb8b30979d9?fm=jpg&q=80&w=800&h=400&fit=crop' },
   { id: 36, name: '长丰山水景区', price: 24, freeCount: 6, level: '2A', status: '正常营业', hours: '08:00-18:00', needReservation: false, tips: '山水相依，适合休闲散步', type: '自然风光', region: '莲花县', image: 'https://images.unsplash.com/photo-1439066615861-d1af74d74000?fm=jpg&q=80&w=800&h=400&fit=crop' },
   { id: 37, name: '白竺青草湖', price: 27, freeCount: 6, level: '3A', status: '正常营业', hours: '08:00-18:00', needReservation: false, tips: '湖光山色，可垂钓泛舟', type: '自然风光', region: '湘东区', image: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?fm=jpg&q=80&w=800&h=400&fit=crop' },
@@ -682,8 +677,12 @@ function onCardClick(scenic: ScenicItem) {
   position: absolute;
   top: $spacing-2;
   right: $spacing-2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 6rpx $spacing-2;
   border-radius: $radius-sm;
+  min-height: 36rpx;
 
   text {
     font-size: $font-size-xs;
@@ -826,9 +825,13 @@ function onCardClick(scenic: ScenicItem) {
 }
 
 .remaining-tag {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 4rpx $spacing-2;
   background: rgba($uv-success, 0.1);
   border-radius: $radius-sm;
+  min-height: 36rpx;
 
   text {
     font-size: $font-size-xs;
@@ -839,8 +842,12 @@ function onCardClick(scenic: ScenicItem) {
 }
 
 .benefit-tag {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 4rpx $spacing-2;
   border-radius: $radius-sm;
+  min-height: 36rpx;
 
   text {
     font-size: $font-size-xs;