<template>
	<view class="page">
		<view class="fenlei-container fixed-container" :class="{'fade-in': fixedTabVisible && !isHiding, 'fade-out': isHiding}" v-show="fixedTabVisible || isAnimating">
			<scroll-view class="fenlei-scroll" style="height: 400rpx;"
			 scroll-x="true"
			 :scroll-with-animation="true"
			 show-scrollbar="false">
			    <view class="serach">
			    	<view class="touxiang">
			            <image style="width: 100%;height: 100%;border-radius: 50%;" src="https://api.ccttiot.com/21zwLDYqBJaa6b68ccc6ea37c67c785fa46193ba46c2.png" mode="aspectFill"></image>
			    	</view>
			    	<view class="shuru">
			    		<input type="text" placeholder="搜索景区、酒店" disabled="true" @click="btnsousuo"/>
			    		<image src="https://api.ccttiot.com/smartmeter/img/static/uAO3fdmrrHTzqbVx9hYd" mode=""></image>
			    	</view>
			    </view>
				<view class="fenlei" style="height: 360rpx;padding-top: 100rpx;gap: 16rpx;">
					<view class="icon" @click="btnpage(1)">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uNvp27XBB0SGRJdwBatm" mode="">
						</image>
					</view> <!-- 导览 -->
					<view class="icon" @click="btnpage(2)">
						<image src="https://api.ccttiot.com/smartmeter/img/static/ujtaJ9yoGaSoU2y7d8o0" mode="">
						</image> <!-- 攻略 -->
					</view>
					<view class="icon" @click="btnpage(3)">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uW4U5tAEwKWIF0xk6lD3" mode="">
						</image> <!-- 住宿 -->
					</view>
					<view class="icon" @click="btnpage(4)">
						<image src="https://api.ccttiot.com/smartmeter/img/static/upFUu8oBSir5xouB7iMV" mode="">
						</image> <!-- 美食 -->
					</view>
					<view class="icon" @click="btnpage(5)">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uMOF8Waum001gWd4IQeh" mode="">
						</image> <!-- 文化 -->
					</view>
					<view class="icon" @click="btnpage(6)">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uwj8jsmFgQn0Hqh7DsAI" mode="">
						</image> <!-- 导游 -->
					</view>
					<view class="icon" @click="btnpage(7)">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uHuu33MlQ9uLbTESJkCB" mode="">
						</image> <!-- 停车 -->
					</view>
					<view class="icon" @click="btnpage(8)">
						<image src="https://api.ccttiot.com/smartmeter/img/static/utxraBecHOvUZBeWk9pb" mode="">
						</image> <!-- 特产 -->
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- https://api.ccttiot.com/21zwLDYqBJaa6b68ccc6ea37c67c785fa46193ba46c2.png -->
		
		<!-- <image  v-if="!fixedTabVisible" src="https://api.ccttiot.com/smartmeter/img/static/uK1w7pSC1LqpVtZLz2Gc" class="topimg" mode=""></image> -->
		<!-- 滚动部分内容 -->
		<scroll-view class="bdbox" 
		  scroll-y
		  @scroll="handleScroll" 
		  @scrolltolower="handqixing"
		  :scroll-top="scrollTop">
		  <u-swiper class="topimg" :height="588" bg-color="#fff"  :list="lists" @click="btnlb"></u-swiper>
		  <!-- 头部搜索 -->
		  <view class="serach">
		  	<view class="touxiang">
		  	    <image style="width: 100%;height: 100%;border-radius: 50%;" src="https://api.ccttiot.com/21zwLDYqBJaa6b68ccc6ea37c67c785fa46193ba46c2.png" mode="aspectFill"></image>
		  	</view>
		  	<view class="shuru">
		  		<input type="text" placeholder="搜索景区、酒店" disabled="true" @click="btnsousuo"/>
		  		<image src="https://api.ccttiot.com/smartmeter/img/static/uAO3fdmrrHTzqbVx9hYd" mode=""></image>
		  	</view>
		  </view>
			<view class="fenlei-container" style="height: 320rpx;">
				<scroll-view class="fenlei-scroll"
				 scroll-x="true"
				 :scroll-with-animation="true"
				 show-scrollbar="false">
				    <view class="gonggao" @click="btngg">
				    	<image src="https://api.ccttiot.com/da9WHV7kufhA4c0a87936f08d8bf839b28e2f027fca6.png" mode=""></image>
				    	<view class="gonggao-text-wrapper">
				    		<view class="gonggao-text-content" :class="{ 'no-transition': noTransition }" :style="{ transform: `translateY(-${scrollIndex * 50}%)` }">
				    			<text class="gonggao-text-item">{{formatGonggaoTitle(ggobj[0] && ggobj[0].title)}}</text>
				    			<text class="gonggao-text-item">{{formatGonggaoTitle(ggobj[0] && ggobj[0].title)}}</text>
				    		</view>
				    	</view>
				    </view>
					<view class="fenlei">
						<view class="icon" @click="btnpage(1)" style="margin-top: 80rpx;">
							<image src="https://api.ccttiot.com/smartmeter/img/static/uNvp27XBB0SGRJdwBatm" mode="">
							</image> 
						</view><!-- 导览 -->
						<view class="icon" @click="btnpage(2)" style="margin-top: 80rpx;">
							<image src="https://api.ccttiot.com/smartmeter/img/static/ujtaJ9yoGaSoU2y7d8o0" mode="">
							</image> <!-- 攻略 -->
						</view>
						<view class="icon" @click="btnpage(3)" style="margin-top: 80rpx;">
							<image src="https://api.ccttiot.com/smartmeter/img/static/uW4U5tAEwKWIF0xk6lD3" mode="">
							</image> <!-- 住宿 -->
						</view>
						<view class="icon" @click="btnpage(4)" style="margin-top: 80rpx;">
							<image src="https://api.ccttiot.com/smartmeter/img/static/upFUu8oBSir5xouB7iMV" mode="">
							</image> <!-- 美食 -->
						</view>
						<view class="icon" @click="btnpage(5)" style="margin-top: 80rpx;">
							<image src="https://api.ccttiot.com/smartmeter/img/static/uMOF8Waum001gWd4IQeh" mode="">
							</image> <!-- 文化 -->
						</view>
						<view class="icon" @click="btnpage(6)" style="margin-top: 80rpx;">
							<image src="https://api.ccttiot.com/smartmeter/img/static/uwj8jsmFgQn0Hqh7DsAI" mode="">
							</image> <!-- 导游 -->
						</view>
						<view class="icon" @click="btnpage(7)" style="margin-top: 80rpx;">
							<image src="https://api.ccttiot.com/smartmeter/img/static/uHuu33MlQ9uLbTESJkCB" mode="">
							</image> <!-- 停车 -->
						</view>
						<view class="icon" @click="btnpage(8)" style="margin-top: 80rpx;">
							<image src="https://api.ccttiot.com/smartmeter/img/static/utxraBecHOvUZBeWk9pb" mode="">
							</image> <!-- 特产 -->
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 视频介绍 -->
			<view class="videoxc">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uKX1Cv1H2ZjWi4y03xU4" mode=""></image>
				<swiper class="swiper" :current="currentIndex" :indicator-dots="true" :autoplay="false" circular @change="onSwiperChange">
					<swiper-item v-for="(item, idx) in video" :key="idx" @click="playVideo">
						<view class="media-wrap">
							<video
								:id="'swiper-video-' + idx"
								:src="item"
								:muted="true"
								:autoplay="idx === currentIndex"
								:loop="true"
								playsinline
								webkit-playsinline
								x5-playsinline
								controls
								objectFit="cover"
								@play="handleVideoPlay(idx)"
								@pause="handleVideoPause(idx)"
							></video>
							<!-- 播放按钮覆盖层，点击跳转到横屏播放 -->
							<!-- <view class="play-overlay" v-if="!videoPlaying[idx]" @click="playVideo">
								<view class="play-icon">
									<text>▶</text>
								</view>
							</view> -->
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 热门推荐 -->
			<view class="remen">
				<view class="rementitle">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uQfz6J8VHnar8K3BwFlD" mode=""></image>
				</view>
				<view class="rmtopimg" @click="btnremen">
					<view class="rmltimg" v-if="hotAreaImages[0]">
						<view class="rm-card" style="padding-left:0;">
							<image style="border-radius: 16rpx;" :src="hotAreaImages[0] + '?imageView2/2/w/750/format/png'" mode="aspectFill"></image>
							<view class="rm-bottom-mask">
								<text class="name">{{ hotAreaNames[0] && hotAreaNames[0].length > 9 ? hotAreaNames[0].slice(0, 8) + '...' : hotAreaNames[0] }}</text>
								<text class="jianjie">{{ hotAreaDescriptions[0] }}</text>
							</view>
						</view>
					</view>
					<view class="rmrtimg">
						<view class="rm-card" v-if="hotAreaImages[1]">
							<image style="border-radius: 16rpx;" :src="hotAreaImages[1] + '?imageView2/2/w/750/format/png'" mode="aspectFill">
							</image>
							<view class="rm-bottom-mask">
								<text class="name">{{ hotAreaNames[1] && hotAreaNames[1].length > 9 ? hotAreaNames[1].slice(0, 8) + '...' : hotAreaNames[1] }}</text>
								<text class="jianjie">{{ hotAreaDescriptions[1] }}</text>
							</view>
						</view>
						<view class="rm-card" v-if="hotAreaImages[2]">
							<image style="border-radius: 16rpx;" :src="hotAreaImages[2] + '?imageView2/2/w/750/format/png'" mode="aspectFill">
							</image>
							<view class="rm-bottom-mask">
								<text class="name">{{ hotAreaNames[2] && hotAreaNames[2].length > 9 ? hotAreaNames[2].slice(0, 8) + '...' : hotAreaNames[2] }}</text>
								<text class="jianjie">{{ hotAreaDescriptions[2] }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="meishi" style="margin-top:30rpx;">
					<view class="meishilt" @click="btnpage(4)">
						<view class="meishitop">
							<image class="dibiaoimg"
								src="https://api.ccttiot.com/smartmeter/img/static/u1emV89uj8AQR1i5MfPs" mode="">
							</image>
							<image class="jiantou"
								src="https://api.ccttiot.com/smartmeter/img/static/uxhocoNzXasArlGLa2j5" mode="">
							</image>
						</view>
						<image class="daimg" v-if="dishImages[0]" :src="dishImages[0]"
							mode="aspectFill"></image>
						<view class="meishibot">
							<image v-if="dishImages[1]" :src="dishImages[1] + '?imageView2/2/w/750/format/png'" mode="aspectFill">
							</image>
							<image v-if="dishImages[2]" :src="dishImages[2] + '?imageView2/2/w/750/format/png'" mode="aspectFill">
							</image>
						</view>
					</view>
					<view class="meishirt"  @click="btnitem">
						<view class="meishitop">
							攻略推荐
							<image class="jiantou"
								src="https://api.ccttiot.com/smartmeter/img/static/uLbDD7xYvH9mgoM9yqXH" mode="">
							</image>
						</view>
						<view class="mieshilist">
							<view class="meishiitem" v-for="(item,index) in strategyList" :key="index">
								<image :src="getFirstPhoto(item.photo)" mode="aspectFill" style="margin-right: 10rpx;"></image>
								<view class="wz" style="width: 168rpx;">
									<text class="tit" v-if="item.name">{{item.name.length > 7 ? item.name.slice(0,6) + '...' : item.name}}</text>
									<text class="tits" style="display: block;width: 168rpx;" v-if="item.description">{{item.description.length > 15 ? item.description.slice(0,15) + '...' : item.description}}</text>
									<!-- <text class="dz" v-if="item.areaAddress">{{item.areaAddress.length > 10 ? item.areaAddress.slice(0,9) + '...' : item.areaAddress}}</text> -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 游玩推荐 @click="btnremen" -->
			<view class="youwan">
				<scroll-view class="ywtab" scroll-x="true" show-scrollbar="false" enhanced="true">
					<view class="ywcontent">
						<view class="ywitem" :class="{ 'active': selectedLocationValue === null }" @click="handleLocationClick(null)">
							游玩推荐
						</view>
						<view class="ywitem" v-for="(item,index) in locationList" :key="index" 
							:class="{ 'active': selectedLocationValue === item.value }" 
							@click="handleLocationClick(item.value)">
							{{ item.location }}
						</view>
					</view>
				</scroll-view>
				<view class="ywimg" v-if="recommendAreaHero && !loadingLocation" @click="btnyouwan(recommendAreaHero, 1)">
					<image :src="recommendAreaHero.image + '?imageView2/2/w/750/format/png'" mode="aspectFill" class="img-fade-in"></image>
					<view class="ywimg-text">
						<text class="ywimg-text-inner">{{ recommendAreaHero.name }}</text>
					</view>
				</view>
				<!-- 加载状态 -->
				<view class="ywimg loading-placeholder" v-if="loadingLocation">
					<view class="loading-skeleton"></view>
					<view class="loading-text">加载中...</view>
				</view>
				<!-- 没有数据提示 -->
				<view class="no-data-tip" v-if="!loadingLocation && !recommendAreaHero && recommendAreaCards.length === 0">
					<view class="no-data-icon">📭</view>
					<view class="no-data-text">该区域暂无推荐景区</view>
				</view>
				<view class="ywlist">
					<view class="" v-for="(it, idx) in recommendAreaCards" :key="idx" @click="btnyouwan(it, 2)" v-show="!loadingLocation">
						<image :src="it.image + '?imageView2/2/w/750/format/png'" mode="aspectFill" class="img-fade-in"></image>
						<text>{{ it.name.length > 7 ? it.name.slice(0,7) + '...' : it.name }}</text>
					</view>
					<!-- 小图加载状态 -->
					<template v-if="loadingLocation">
						<view class="loading-skeleton-small" v-for="n in 3" :key="'loading-' + n">
							<view class="skeleton-img"></view>
							<view class="skeleton-text"></view>
						</view>
					</template>
				</view>
			</view>
			<!-- 精品路线 -->
			<view class="wenhua">
				<scroll-view class="ywtab" scroll-x="true" show-scrollbar="false" enhanced="true">
					<view class="ywcontent">
						<view class="ywitem" :class="{ 'active': selectedTabValue === null }" @click="handleTabClick(null)">
							精品路线
						</view>
						<view class="ywitem" v-for="(item,index) in glflbq" :key="index" 
							:class="{ 'active': selectedTabValue === item.dictValue }" 
							@click="handleTabClick(item.dictValue)">
							{{ item.dictLabel }}
						</view>
					</view>
				</scroll-view>
				
				<view class="wrap">
					<!-- 加载状态 -->
					<view class="waterfall-loading" v-if="loadingTab">
						<view class="loading-item" v-for="n in 6" :key="'loading-' + n">
							<view class="skeleton-img-large"></view>
							<view class="skeleton-title"></view>
							<view class="skeleton-desc"></view>
						</view>
					</view>
					<view class="waterfall-container" v-show="!loadingTab">
						<view class="waterfall-left">
							<view class="demo-warter item-fade-in" v-for="(item, index) in flowList.filter((_, i) => i % 2 === 0)" :key="index" @click="btngonglue(item)">
								<u-lazy-load threshold="-450" border-radius="10" :image="getFirstPhoto(item.photo)"
									:index="index"></u-lazy-load>
								<view class="dizhi">
									{{item.name && item.name.length > 10 ? item.name.slice(0,10) + '...' : item.name}}
								</view>
								<view class="cont">
									{{!item.description ? '暂无简介' : (item.description.length > 26 ? item.description.slice(0,26) + '...' : item.description)}}
								</view>
							</view>
						</view>
						<view class="waterfall-right">
							<view class="demo-warter item-fade-in" v-for="(item, index) in flowList.filter((_, i) => i % 2 === 1)" :key="index" @click="btngonglue(item)">
								<u-lazy-load threshold="-450" border-radius="10" :image="getFirstPhoto(item.photo)"
									:index="index"></u-lazy-load>
								<view class="dizhi">
									{{item.name && item.name.length > 10 ? item.name.slice(0,10) + '...' : item.name}}
								</view>
								<view class="cont">
									{{!item.description ? '暂无简介' : (item.description.length > 26 ? item.description.slice(0,26) + '...' : item.description)}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<tab-bar :indexs='0'></tab-bar>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "",
				},
				loadStatus: 'loadmore',
				flowList: [],
				list: [],
				fixedTabVisible:false,
				isAnimating: false,
				isHiding: false,
				video:[],
				currentIndex: 0, // 当前轮播图索引
				videoPlaying: {}, // 记录每个视频的播放状态
				lists:[],
				hotAreaList:[],// 热门景点
				recommendAreaList:[],// 推荐景点 
				strategyList:[],// 攻略
				dishList:[],// 美食
				pageNum:1,
				total:0,
				ggobj:[],
				ver:false,
				scrollIndex: 0, // 当前滚动索引
				scrollTimer: null, // 滚动定时器
				noTransition: false ,// 是否禁用过渡动画（用于无缝重置）
				glflbq:[],
				selectedTabValue: null, // 当前选中的tab值，null表示"全部"
				locationList:[], // 位置列表
				selectedLocationValue: null, // 当前选中的位置值，null表示"全部"
				loadingLocation: false, // 位置数据加载状态
				loadingTab: false ,// 攻略数据加载状态
				linshi:[]
			}
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '玩转福鼎',
				path: '/pages/index/index'
			}
		},
		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '玩转福鼎',
				query: '',
				path: '/pages/index/index'
			}
		},
		onShow() {
			this.getyinc()
		},
		onLoad() {
			this.getgonggao()
			this.getinfo()
			this.gethome()
			this.getlunbos()
			this.getlunbo()
			this.addRandomData()
			this.getglfl()
			this.getLocationList()
			uni.getLocation({
			    type: 'gcj02', // 国内地图更兼容
				isHighAccuracy: true,
				accuracy:'best',
			    success: (res) => {
			        console.log('精确坐标:', res)
			    },
			    fail: (err) => {
			        console.error('获取位置失败:', err)
			    }
			})
		},
		onReady() {
			// 启动分段滚动
			this.startScroll()
		},
		onUnload() {
			// 清除定时器
			if (this.scrollTimer) {
				clearInterval(this.scrollTimer)
				this.scrollTimer = null
			}
		},
		onReachBottom() {
			// 检查是否还有更多数据
			if(this.flowList.length >= this.total){
				return
			}
			this.loadStatus = 'loading'
			this.addRandomData()
			// 延迟重置加载状态
			setTimeout(() => {
				this.loadStatus = 'loadmore'
			}, 500)
		},
		computed: {
			// 热门推荐
			hotAreaImages() {
				const list = Array.isArray(this.hotAreaList) ? this.hotAreaList : []
				const pick = (itemIndex, pictureIndex) => {
					const item = list[itemIndex]
					if (!item || !item.picture) return ''
					const parts = String(item.picture).split(',').filter(Boolean)
					return parts[pictureIndex] || parts[0] || ''
				}
				return [
					pick(0, 0),
					pick(1, 1),
					pick(2, 2)
				].filter(Boolean)
			},
			// 热门推荐名称（与图片索引对齐）
			hotAreaNames() {
				const list = Array.isArray(this.hotAreaList) ? this.hotAreaList : []
				const nameAt = (idx) => {
					const item = list[idx]
					return item && item.name ? String(item.name) : ''
				}
				return [nameAt(0), nameAt(1), nameAt(2)]
			},
			// 热门推荐简介（与图片索引对齐，超10字截断）
			hotAreaDescriptions() {
				const list = Array.isArray(this.hotAreaList) ? this.hotAreaList : []
				const descAt = (idx) => {
					const item = list[idx]
					const raw = item && item.description ? String(item.description) : ''
					if (!raw) return ''
					return raw.length > 10 ? (raw.slice(0, 10) + '...') : raw
				}
				return [descAt(0), descAt(1), descAt(2)]
			},
			// 推荐景点小图（第2-4项，最多三项）
			recommendAreaCards() {
				const list = Array.isArray(this.recommendAreaList) ? this.recommendAreaList : []
				return list.slice(1, 4).map(it => {
					const src = (it && it.picture) ? String(it.picture) : ''
					const img = src ? src.split(',').filter(Boolean)[0] || '' : ''
					return { 
						image: img, 
						name: (it && it.name) ? it.name : '',
						id: (it && it.id) ? it.id : ''
					}
				}).filter(it => it.image && it.name && it.id)
			},
			// 推荐景点大图（取第一项）
			recommendAreaHero() {
				const list = Array.isArray(this.recommendAreaList) ? this.recommendAreaList : []
				if (!list.length) return null
				const first = list[0]
				if (!first) return null
				const src = first.picture ? String(first.picture) : ''
				const img = src ? src.split(',').filter(Boolean)[0] || '' : ''
				const name = first.name || ''
				const id = first.id || ''
				if (!img || !name || !id) return null
				return { image: img, name, id }
			},
			// 美食图片（最多三张）
			dishImages() {
				const list = Array.isArray(this.dishList) ? this.dishList : []
				const firstThree = list.slice(0, 3)
				const toImage = (item) => {
					if (!item) return ''
					// 优先使用 imageUrl；若包含多图逗号分隔，取第一张；再兜底到 picture
					const primary = item.imageUrl || item.image_url || ''
					const fallback = item.picture || ''
					const src = primary || fallback
					if (!src) return ''
					const parts = String(src).split(',').filter(Boolean)
					return parts[0] || ''
				}
				return firstThree.map(toImage).filter(Boolean)
			}
		},
		methods: {
			// 请求位置列表
			getLocationList(){
				this.$u.get(`/app/scenicArea/location`).then(res =>{
					if(res.code == 200){
						this.locationList = res.data
					}
				})
			},
			// 请求攻略分类
			getglfl(){
				this.$u.get(`/system/dict/data/type/strategy_type`).then(res =>{
					if(res.code == 200){
						this.glflbq = res.data
					}
				})
			},
			
			getyinc(){
				this.$u.get(`/system/config/configKey/app.version`).then(res =>{
					if(res.code == 200){
						if(res.data == this.$store.state.ver){
							this.ver = true
						}else{
							this.ver = false
						}
					}
				})
			},
			// 格式化公告标题，超出长度显示省略号
			formatGonggaoTitle(title) {
				if (!title || title === null) {
					return '欢迎来到福鼎！'
				}
				const maxLength = 20 // 最大显示字符数，可根据实际宽度调整
				if (title.length > maxLength) {
					return title.substring(0, maxLength) + '...'
				}
				return title
			},
			// 点击查看公告列表
			btngg(){
				uni.navigateTo({
					url:'/pages/gonggao-list'
				})
			},
			btnlb(e){
				console.log(e);
				if(this.linshi[e].bstType == 2){
					uni.navigateTo({
						url:'/page_fenbao/remenxq?id=' + this.linshi[e].bstId
					})
				}else if(this.linshi[e].bstType == 1){
					uni.navigateTo({
						url:'/page_fenbao/zixunbao/huodongxq?id=' + this.linshi[e].bstId
					})
				}
			},
			// 请求公告
			getgonggao(){
				this.$u.get(`/app/article/list?pageNum=1&pageSize=1&type=6`).then(res =>{
					if(res.code == 200){
						this.ggobj = res.rows
						// 数据加载后启动滚动
						this.$nextTick(() => {
							this.startScroll()
						})
					}
				})
			},
			// 启动分段滚动
			startScroll() {
				// 清除之前的定时器
				if (this.scrollTimer) {
					clearInterval(this.scrollTimer)
				}
				// 如果只有一个文本项，不需要滚动
				if (!this.ggobj || this.ggobj.length === 0) {
					return
				}
				// 每3秒滚动一次
				this.scrollTimer = setInterval(() => {
					this.scrollIndex++
					// 当滚动到第二个文本项时，重置为0实现无缝循环
					if (this.scrollIndex >= 2) {
						setTimeout(() => {
							// 禁用过渡，瞬间重置位置
							this.noTransition = true
							this.scrollIndex = 0
							// 下一帧恢复过渡效果
							this.$nextTick(() => {
								this.noTransition = false
							})
						}, 500) // 等待过渡动画完成后再重置
					}
				}, 3000)
			},
			// 点击进行搜索
			btnsousuo(){
				this.$u.get("/getInfo").then(res =>{
					if(res.code == 200){
						uni.navigateTo({
							url:'/page_user/sousuo/index'
						})
					}else if(res.code == 401){
						uni.reLaunch({
							url:'/pages/login/login'
						})
					}
				})
			},
			// 请求个人信息
			getinfo(){
				this.$u.get("/getInfo").then(res =>{
					if(res.code == 200){
						
					}else if(res.code == 401){
						this.getlogo()
					}
				})
			},
			// 静默登录
			getlogo(){
				let taht = this
				wx.login({
					success(res) {
						if (res.code) {
							let data = {
								loginCode: res.code,
								appId:taht.$store.state.appid
							}
							taht.$u.post('/wxLogin', data).then(res => {
			                    if (res.code == 200) {
									uni.setStorageSync('token', res.token)
									taht.getinfo()
								}
							})
						}
					},
				})
			},
			// 请求首页景区
			gethome(){
				this.$u.get(`/app/home`).then(res =>{
					if(res.code == 200){
						this.hotAreaList = res.data.hotAreaList;   //热门景点
						this.recommendAreaList = res.data.recommendAreaList   //推荐景点 
						this.strategyList = res.data.strategyList   //攻略
						this.dishList = res.data.dishList   //美食
					}
				})
			},
			// 请求推荐景点列表（根据位置筛选）
			getRecommendAreaList(){
				// 构建查询参数
				let url = `/app/home`
				// 如果选中了具体的位置（不是"全部"），则添加location参数
				if(this.selectedLocationValue !== null) {
					url += `?location=${this.selectedLocationValue}`
				}
				this.$u.get(url).then(res =>{
					if(res.code == 200){
						// 只更新推荐景点数据，其他字段保持不变
						this.recommendAreaList = res.data.recommendAreaList
					}
				}).finally(() => {
					// 请求完成后关闭加载状态
					this.loadingLocation = false
				})
			},
			
			// 请求轮播图
			getlunbos(){
				this.$u.get(`/app/carousel/list?type=2`).then(res =>{
					if(res.code == 200){ 
							let arr = res.rows
							this.linshi = res.rows
							arr.forEach(item =>{
								const compressedUrl = item.imageUrl + "?imageView2/2/w/750/format/png"
								this.lists.push({
									image:compressedUrl
								})
							})
					}
				})
			},
			getlunbo(){
				this.$u.get(`/app/app/basicInfo/1`).then(res =>{
					if(res.code == 200){
						if(res.data.videoUrl){
							let arr = res.data.videoUrl.split(',')
							arr.forEach(item =>{
								// 直接 push 视频 URL 字符串，而不是对象
								if(item && item.trim()){
									this.video.push(item.trim())
								}
							})
						}
						// if(res.data.carousel){
						// 	let arr = res.data.carousel.split(',')
						// 	arr.forEach(item =>{
						// 		this.lists.push({
						// 			image:item
						// 		})
						// 	})
						// }
					}
				})
			},
			// 点击热门推荐跳转到列表
			btnitem(){
				uni.navigateTo({
					url:'/page_fenbao/gonglue/index'
				})
			},
			// 点击跳转游玩景点
			btnyouwan(item, num){
				if(!item || !item.id) {
					console.error('缺少景点ID', item)
					return
				}
				if(num == 1){
					// 点击大图跳转
					uni.navigateTo({
						url:'/page_fenbao/remenxq?id=' + item.id
					})
				}else if(num == 2){
					// 点击小图跳转
					uni.navigateTo({
						url:'/page_fenbao/remenxq?id=' + item.id
					})
				}
			},
			// 点击热门推荐页面图片跳转
			btnremen(){
				uni.navigateTo({
					url:'/page_fenbao/remen'
				})
			},
			// 点击跳转页面
			btnpage(num){
				if(num == 1){ //跳转导览
					uni.navigateTo({
						url:'/page_user/daolan'
					})
				}else if(num == 2){ //跳转攻略
					uni.navigateTo({
						url:'/page_fenbao/gonglue/index'
					})
				}else if(num == 3){ //跳转住宿
				    if(this.ver == true){
						uni.navigateTo({
							url:'/page_fenbao/jiudian/index'
						})
					}else{
						uni.navigateToMiniProgram({ //跳转到美团app预定酒店
						  appId: 'wx7649daed8f2335c4', // 目标小程序的 AppID（必须正确）
						  path: '', // 跳转路径，空字符串表示首页
						  success(res) {
						    console.log('跳转成功', res);
						  },
						  fail(err) {
						    console.error('跳转失败', err);
						    // 常见失败原因：AppID错误、用户拒绝跳转、目标小程序未上线
						  }
						})
					}
				}else if(num == 4){ //跳转美食
					uni.navigateTo({
						url:'/page_user/meishi/index'
					})
				}else if(num == 5){ //跳转文化
					uni.navigateTo({
						url:'/page_user/wenhua/index'
					})
				}else if(num == 6){ //跳转导游
					uni.navigateTo({
						url:'/page_fenbao/daoyou/index'
					})
				}else if(num == 7){ //跳转停车
					uni.navigateToMiniProgram({ //跳转到停车小程序
					    appId: 'wx2ed03cf29689fd2e', // 目标小程序的 AppID（必须正确）
					    path: '', // 跳转路径，空字符串表示首页
					    success(res) {
					      console.log('跳转成功', res);
					    },
					    fail(err) {
					      console.error('跳转失败', err);
					      // 常见失败原因：AppID错误、用户拒绝跳转、目标小程序未上线
					    }
					  })
				}else if(num == 8){
					uni.navigateTo({
						url:'/page_user/techan/index'
					})
				}
			},
		// 点击攻略跳转到攻略详情
		btngonglue(item){
			console.log(item);
			uni.navigateTo({
				url:'/page_fenbao/gonglue/gongluexq?id=' + item.id
			})
		},
		// 获取第一个图片
		getFirstPhoto(photo) {
			if (!photo) return ''
			// 如果是数组，取第一个元素
			if (Array.isArray(photo)) {
				return photo[0] || ''
			}
			// 如果是字符串，可能是逗号分隔的多个图片，取第一个
			if (typeof photo === 'string') {
				const parts = photo.split(',').filter(Boolean)
				return parts[0] + '?imageView2/2/w/300/format/png' || ' '
			}
			return ''
		},
		// 处理tab点击事件
		handleTabClick(dictValue) {
			// 更新选中的tab值
			this.selectedTabValue = dictValue
			// 重置页码
			this.pageNum = 1
			// 设置加载状态
			this.loadingTab = true
			// 重新查询数据
			this.addRandomData()
		},
		// 处理位置点击事件
		handleLocationClick(dictValue) {
			// 更新选中的位置值
			this.selectedLocationValue = dictValue
			// 设置加载状态
			this.loadingLocation = true
			// 只更新推荐景点数据
			this.getRecommendAreaList()
		},
		// 瀑布流添加数据
		addRandomData() {
			// 构建查询参数
			let url = `/app/strategy/list?pageNum=${this.pageNum}&pageSize=20`
			// 如果选中了具体的tab（不是"全部"），则添加theme参数
			if(this.selectedTabValue !== null) {
				url += `&type=${this.selectedTabValue}`
			}
			// 直接添加所有数据，确保每个数据都能显示
			this.$u.get(url).then(res => {
				if(res.code == 200){
					this.total = res.total
					if(this.pageNum == 1){
						// 第一页时清空列表
						this.flowList = []
						this.list = res.rows
					}else{
						// 后续页面追加数据
						this.list = this.list.concat(res.rows)
					}
					// 处理数据并映射字段
					res.rows.forEach((item, index) => {
						this.flowList.push(item)
					})
					// 页码自增，为下次加载做准备
					this.pageNum++
				}
			}).catch(err => {
				console.error('加载瀑布流数据失败:', err)
			}).finally(() => {
				// 请求完成后关闭加载状态
				this.loadingTab = false
			})
		},
			// 页面滚动监听
			onPageScroll(e) {
				console.log(e,'监听页面滚动数据')
				this.fixedTabVisible = e.scrollTop >= 6
				// console.log('222',this.fixedTabVisible)
			},
			// 列表容器滚动监听
			handleScroll(e) {
				// 获取滚动容器的滚动位置
				const scrollTop = e.detail.scrollTop || 0
				const shouldShow = scrollTop >= 220
				if (shouldShow !== this.fixedTabVisible && !this.isAnimating) {
					if (shouldShow) { //根据shouldShow状态来确定头部的显示与隐藏
						// 显示上下移动过渡动画
						this.isHiding = false
						this.fixedTabVisible = true
						this.isAnimating = true
						setTimeout(() => {
							this.isAnimating = false
						}, 500)
					} else {
						// 隐藏上下移动过渡动画
						this.isHiding = true
						this.isAnimating = true
						setTimeout(() => {
							this.fixedTabVisible = false
							this.isHiding = false
							this.isAnimating = false
						}, 500)
					}
				}
				console.log('111',this.fixedTabVisible, 'isHiding:', this.isHiding)
			},
			// 上拉加载更多
			handqixing(){
				console.log(this.total,this.flowList.length)
				if(this.total > this.flowList.length){
					this.addRandomData()
				}
				console.log('加载更多瀑布流数据')
			},
			// 轮播图切换事件
			onSwiperChange(e) {
				this.currentIndex = e.detail.current
				// 暂停其他视频，播放当前视频
				this.video.forEach((item, idx) => {
					if (idx !== this.currentIndex) {
						this.$set(this.videoPlaying, idx, false)
						const videoContext = uni.createVideoContext('swiper-video-' + idx)
						if (videoContext) {
							videoContext.pause()
						}
					}
				})
			},
			// 视频播放事件
			handleVideoPlay(idx) {
				// 更新播放状态
				this.$set(this.videoPlaying, idx, true)
				// 暂停其他视频
				this.video.forEach((item, index) => {
					if (index !== idx) {
						this.$set(this.videoPlaying, index, false)
						const videoContext = uni.createVideoContext('swiper-video-' + index)
						if (videoContext) {
							videoContext.pause()
						}
					}
				})
			},
			// 视频暂停事件
			handleVideoPause(idx) {
				// 更新播放状态
				this.$set(this.videoPlaying, idx, false)
			},
			// 播放视频 - 跳转到视频播放页面
			playVideo() {
				if (!this.video || this.video.length === 0) {
					uni.showToast({
						title: '视频加载中...',
						icon: 'none'
					})
					return
				}
				const currentVideo = this.video[this.currentIndex]
				if (currentVideo) {
					uni.navigateTo({
						url: `/pages/video/index?url=${encodeURIComponent(currentVideo)}`
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	::v-deep .u-swiper-wrap{
		border-radius: 0 !important;
	}
	::v-deep .u-list-image-wrap{
		border-radius: 0 !important;
	}
	page {
		background: #E5F9F3;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		top: 0;
		left: 0;
	}
	.bdbox {
		width: 100%;
		height: 88vh;
		overflow: scroll;
		box-sizing: border-box;
	}
    .bdboxs {
    	width: 100%;
    	height: 75vh;
    	overflow: scroll;
    	padding-bottom: 50rpx;
    	box-sizing: border-box;
		position: relative;
		z-index: 9;
		background: #E5F9F3;
    }
	.wenhua {
		margin-top: 26rpx;
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		.waterfall-container {
			display: flex;
			gap: 20rpx;
			.waterfall-left,
			.waterfall-right {
				flex: 1;
			}
		}
		.demo-warter {
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			background-color: #ffffff;
			padding-bottom: 10rpx;
			position: relative;
			.shuju{
				display: flex;
				align-items: center;
				margin-top: 10rpx;
				justify-content: flex-end;
				view{
					font-size: 14rpx;
					color: #3D3D3D;
					margin-left: 32rpx;
					image{
						width: 20rpx;
						height: 20rpx;
						margin-right: 4rpx;
					}
					display: flex;
					align-items: center;
				}
			}
			.cont{
				font-size: 24rpx;
				color: #3D3D3D;
				padding-left: 18rpx;
				margin-top: 10rpx;
				image{
					width: 28rpx;
					height: 28rpx;
					margin-right: 8rpx;
				}
			}
			.dizhi{
				margin-top: 16rpx;
				padding-left: 18rpx;
				
				
				font-weight: 600;
				font-size: 28rpx;
				color: #3D3D3D;
			}
		}
		.u-close {
			position: absolute;
			top: 32rpx;
			right: 32rpx;
		}
		.demo-image {
			width: 100%;
			border-radius: 4px;
		}
		.demo-title {
			font-size: 30rpx;
			margin-top: 5px;
			color: $u-main-color;
		}
		.demo-tag {
			display: flex;
			margin-top: 5px;
		}
		.demo-tag-owner {
			background-color: $u-type-error;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			padding: 4rpx 14rpx;
			border-radius: 50rpx;
			font-size: 20rpx;
			line-height: 1;
		}
		.demo-tag-text {
			border: 1px solid $u-type-primary;
			color: $u-type-primary;
			margin-left: 10px;
			border-radius: 50rpx;
			line-height: 1;
			padding: 4rpx 14rpx;
			display: flex;
			align-items: center;
			border-radius: 50rpx;
			font-size: 20rpx;
		}
		.demo-price {
			font-size: 30rpx;
			color: $u-type-error;
			margin-top: 5px;
		}
		.demo-shop {
			font-size: 22rpx;
			color: $u-tips-color;
			margin-top: 5px;
		}
		.ywtab {
			width: 100%;
			.ywcontent {
				display: flex;
				align-items: center;
				white-space: nowrap;
				padding: 20rpx 0;
			}
			.ywitem {
				font-weight: 600;
				font-size: 30rpx;
				color: #606060;
				margin-right: 46rpx;
				flex-shrink: 0;
				min-width: 120rpx;
				text-align: center;
				transition: all 0.3s;
				position: relative;
				padding: 10rpx 20rpx;
				background-repeat: no-repeat;
				&.active {
					color: #05895D;
					font-weight: 700;
					font-size: 32rpx;
					background-image: url('/static/image/two.png');
					background-size: contain;
					background-position: right center;
					padding-top: 20rpx;
					padding-bottom: 20rpx;
				}
			}
			image {
				width: 150rpx;
				height: 102rpx;
				margin-right: 46rpx;
				flex-shrink: 0;
			}
		}
	}
	.youwan {
		margin-top: 26rpx;
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		.ywlist {
			display: flex;
			margin-top: 20rpx;
			gap: 22rpx;
			view {
				width: 224rpx;
				height: 118rpx;
				border-radius: 6rpx;
				position: relative;
				padding-top: 80rpx;
				image {
					width: 224rpx;
					height: 118rpx;
					border-radius: 6rpx;
					position: absolute;
					top: 0;
					left: 0;
					z-index: -1;
				}
				text {
					font-weight: 600;
					font-size: 24rpx;
					color: #FFFFFF;
					background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
					width: 224rpx;
					display: inline-block;
					padding-left: 14rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius:0 0 8rpx 8rpx;
				}
			}
		}
		.ywimg {
			position: relative;
			width: 100%;
			height: 264rpx;
			overflow: hidden;
			image {
				width: 100%;
				height: 264rpx;
				border-radius: 6rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 0;
			}
			.ywimg-text {
				position: absolute;
				left: 0;
				bottom: 0;
				right: 0;
				padding: 24rpx 40rpx 24rpx;
				z-index: 1;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
				border-radius: 0 0 6rpx 6rpx;
				.ywimg-text-inner {
					display: block;
					font-weight: 600;
					font-size: 40rpx;
					color: #FFFFFF;
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.4);
				}
			}
		}
		.no-data-tip {
			width: 100%;
			height: 264rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: #f5f5f5;
			border-radius: 6rpx;
			margin-top: 0;
			.no-data-icon {
				font-size: 80rpx;
				margin-bottom: 20rpx;
			}
			.no-data-text {
				font-size: 28rpx;
				color: #999;
			}
		}
		.ywtab {
			width: 100%;
			.ywcontent {
				display: flex;
				align-items: center;
				white-space: nowrap;
				padding: 20rpx 0;
			}
			.ywitem {
				font-weight: 600;
				font-size: 30rpx;
				color: #606060;
				margin-right: 46rpx;
				flex-shrink: 0;
				min-width: 120rpx;
				text-align: center;
				transition: all 0.3s;
				position: relative;
				padding: 10rpx 20rpx;
				background-repeat: no-repeat;
				&.active {
					color: #05895D;
					font-weight: 700;
					font-size: 32rpx;
					background-image: url('/static/image/one.png');
					background-size: 80rpx 60rpx;
					background-position: right center;
				}
			}
			image {
				width: 150rpx;
				height: 102rpx;
				margin-right: 46rpx;
				flex-shrink: 0;
			}
		}
	}
	.meishi {
		width: 100%;
		display: flex;
		justify-content: space-between;
		.meishirt {
			width: 352rpx;
			height: 514rpx;
			background: #F7B782;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			.mieshilist {
				width: 342rpx;
				height: 456rpx;
				background: linear-gradient(153deg, #FFFFFF 20%, rgba(255, 255, 255, 0) 100%);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				margin-top: 12rpx;
				padding-top: 22rpx;
				.meishiitem {
					display: flex;
					align-items: center;
					width: 298rpx;
					height: 126rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.1);
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					padding: 12rpx;
					box-sizing: border-box;
					margin: auto;
					margin-bottom: 18rpx;
					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 6rpx;
					}
					.wz {
						.tit {
							font-weight: 600;
							font-size: 24rpx;
							color: #3D3D3D;
							display: block;
						}

						.tits {
							font-size: 20rpx;
							color: #3D3D3D;
							display: block;
							margin-top: 4rpx;
						}

						.dz {
							font-size: 16rpx;
							color: #3D3D3D;
							display: block;
							margin-top: 12rpx;
						}
					}
				}
			}
			.meishitop {
				font-weight: 600;
				font-size: 28rpx;
				color: #664608;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 24rpx;
				padding-top: 8rpx;
				box-sizing: border-box;
				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		.meishilt {
			width: 342rpx;
			height: 514rpx;
			background: linear-gradient(41deg, #82D3F7 0%, rgba(218, 190, 255, 0) 100%);
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			.daimg {
				width: 1;
				height: 278rpx;
				border-radius: 14rpx 14rpx 14rpx 14rpx;
				margin-top: 4rpx;
				margin-bottom: 14rpx;
			}
			.meishibot {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 14rpx 14rpx 14rpx 14rpx;
				}
			}
			.meishitop {
				display: flex;
				align-items: center;
				display: flex;
				justify-content: space-between;
				width: 100%;
				.dibiaoimg {
					width: 168rpx;
					height: 54rpx;
				}
				.jiantou {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
	.remen {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		.rementitle {
			image {
				width: 150rpx;
				height: 102rpx;
			}
		}
		.rmtopimg {
			margin-top: 28rpx;
			display: flex;
			justify-content: space-between;
			width: 100%;
			.rmltimg {
				image {
					width: 342rpx;
					height: 342rpx;
				}
				.rm-card {
					position: relative;
					height: 342rpx;
					width: 342rpx;
					overflow: hidden;
					border-radius: 16rpx;
					image {
						width: 342rpx;
						height: 342rpx;
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 0;
					}
					.rm-bottom-mask {
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						z-index: 1;
						width: 100%;
						min-height: 88rpx;
						box-sizing: border-box;
						padding: 24rpx 18rpx 18rpx;
						background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.8) 100%);
						border-radius: 0 0 16rpx 16rpx;
					}
					.name {
						font-weight: 600;
						font-size: 30rpx;
						color: #FFFFFF;
						display: block;
					}
					.jianjie {
						font-size: 24rpx;
						color: #FFFFFF;
						margin-top: 4rpx;
						display: block;
					}
				}
			}
			.rmrtimg {
				display: flex;
				flex-direction: column;
				gap: 14rpx;
				.rm-card {
					position: relative;
					height: 164rpx;
					width: 352rpx;
					overflow: hidden;
					border-radius: 16rpx;
					image {
						width: 352rpx;
						height: 186rpx;
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 0;
						object-fit: cover;
					}
					.rm-bottom-mask {
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						z-index: 1;
						width: 100%;
						min-height: 88rpx;
						box-sizing: border-box;
						padding: 20rpx 18rpx 18rpx;
						background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.7) 100%);
						border-radius: 0 0 16rpx 16rpx;
					}
					.name {
						font-weight: 600;
						font-size: 30rpx;
						color: #FFFFFF;
						display: block;
					}
					.jianjie {
						font-size: 24rpx;
						color: #FFFFFF;
						margin-top: 4rpx;
						display: block;
					}
				}
			}
		}
	}
	.videoxc {
		position: relative;
		    top: -40rpx;
		    width: 100%;
		    height: 440rpx;
		    background-color: #E5F9F3;
		    border-radius: 20rpx 20rpx 0 0;
		    overflow: hidden;
		    padding: 68rpx 50rpx 68rpx 60rpx;
		    box-sizing: border-box;
		image{
			position: absolute;
			    top: 18px;
			    left: 50%;
			    transform: translateX(-50%);
			    width: 720rpx;
			    height: 400rpx;
		}
		.swiper {
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
			overflow: hidden;
		}
		
		.media-wrap {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			
			video {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
			
			.play-overlay {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 1;
				/* 覆盖层可以点击，但不会阻挡 video 控件的使用 */
				/* 点击视频区域（非控件区域）时跳转 */
				
				.play-icon {
					width: 120rpx;
					height: 120rpx;
					background-color: rgba(0, 0, 0, 0.5);
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: all 0.3s;
					
					&:active {
						background-color: rgba(255, 107, 153, 0.7);
						transform: scale(0.95);
					}
					
					text {
						font-size: 48rpx;
						color: #fff;
						margin-left: 8rpx; /* 让播放图标稍微右移，看起来更居中 */
						line-height: 1;
					}
				}
			}
		}
	}
	.fenlei-container {
		margin-top: 520rpx;
		.fenlei-scroll {
			width: 100%;
			height: 288rpx;
			white-space: nowrap;
		}
		.fenlei {
			width: 750rpx;
			height: 280rpx;
			overflow: scroll;
			background: linear-gradient(17deg, #2FC1DE 0%, #9CF1BB 62%, rgba(212, 248, 174, 1) 100%), rgba(0, 0, 0, 0.1);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			gap: 30rpx;
			.icon {
				flex-shrink: 0;
				width: 104rpx;
				height: 136rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				image {
					width: 104rpx;
					height: 136rpx;
				}
			}
		}
	}
	.gonggao {
		width: 670rpx;
		height: 66rpx;
		background: linear-gradient( 90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.5) 49.7%, rgba(255,255,255,0.05) 100%);
		// border-radius: 37rpx 37rpx 37rpx 37rpx;
		display: flex;
		align-items: center;
		padding-left: 26rpx;
		padding-right: 30rpx;
		position: absolute;
		top: 26rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;
		overflow: hidden;
		image {
			width: 38rpx;
			height: 38rpx;
			margin-right: 26rpx;
			flex-shrink: 0;
		}
		.gonggao-text-wrapper {
			flex: 1;
			overflow: hidden;
			position: relative;
			height: 100%;
			display: flex;
			align-items: flex-start;
		}
		.gonggao-text-content {
			display: flex;
			flex-direction: column;
			transition: transform 0.5s ease-in-out;
			will-change: transform;
			&.no-transition {
				transition: none;
			}
		}
		.gonggao-text-item {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #05895D;
			height: 66rpx;
			flex-shrink: 0;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 100%;
		}
	}
	.serach {
		display: flex;
		align-items: center;
		position: relative;
		top: 100rpx;
		z-index: 999 !important;
		.touxiang {
			width: 60rpx;
			height: 60rpx;
			background-color: #fff;
			border-radius: 50%;
			margin-left: 24rpx;
		}
		.shuru {
			position: relative;
			margin-left: 24rpx;
			image {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				left: 38rpx;
				top: 18rpx;
			}
			input {
				width: 306rpx;
				height: 60rpx;
				background: #FFFFFF;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				padding-left: 86rpx;
			}
		}
	}
	.topimg {
		width: 750rpx;
		height: 588rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	
	/* 固定分类容器样式 */
	.fixed-container {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		margin-top: 0;
		background: linear-gradient(17deg, #2FC1DE 0%, #9CF1BB 62%, #d4f8ae 100%), rgba(0, 0, 0, 0.1);
		width: 100%;
	}
	
	/* 上下移动动画样式 */
	.fade-in {
		animation: slideDown 0.5s ease-out forwards;
	}
	
	.fade-out {
		animation: slideUp 0.5s ease-in forwards;
	}
	
	@keyframes slideDown {
		from {
			transform: translateY(-100%);
			opacity: 0;
		}
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}
	
	@keyframes slideUp {
		from {
			transform: translateY(0);
			opacity: 1;
		}
		to {
			transform: translateY(-100%);
			opacity: 0;
		}
	}
	
	/* 图片淡入动画 */
	.img-fade-in {
		animation: imgFadeIn 0.5s ease-in;
	}
	
	/* 列表项淡入动画 */
	.item-fade-in {
		animation: itemFadeIn 0.5s ease-in;
	}
	
	@keyframes imgFadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	
	@keyframes itemFadeIn {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	/* 游玩推荐加载状态 */
	.loading-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #f5f5f5;
		border-radius: 6rpx;
		.loading-skeleton {
			width: 100%;
			height: 264rpx;
			background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
			background-size: 200% 100%;
			animation: skeleton-loading 1.5s ease-in-out infinite;
			border-radius: 6rpx;
		}
		.loading-text {
			margin-top: 20rpx;
			font-size: 24rpx;
			color: #999;
		}
	}
	
	.loading-skeleton-small {
		width: 224rpx;
		height: 118rpx;
		border-radius: 6rpx;
		background: #f5f5f5;
		position: relative;
		overflow: hidden;
		.skeleton-img {
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
			background-size: 200% 100%;
			animation: skeleton-loading 1.5s ease-in-out infinite;
		}
		.skeleton-text {
			position: absolute;
			bottom: 10rpx;
			left: 14rpx;
			width: 60%;
			height: 20rpx;
			background: linear-gradient(90deg, #e0e0e0 25%, #d0d0d0 50%, #e0e0e0 75%);
			background-size: 200% 100%;
			animation: skeleton-loading 1.5s ease-in-out infinite;
			border-radius: 4rpx;
		}
	}
	
	/* 精品路线加载状态 */
	.waterfall-loading {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		.loading-item {
			width: calc(50% - 10rpx);
			background: #fff;
			border-radius: 10rpx;
			padding-bottom: 10rpx;
			overflow: hidden;
			.skeleton-img-large {
				width: 100%;
				height: 300rpx;
				background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
				background-size: 200% 100%;
				animation: skeleton-loading 1.5s ease-in-out infinite;
			}
			.skeleton-title {
				width: 70%;
				height: 30rpx;
				margin: 16rpx 0 10rpx 18rpx;
				background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
				background-size: 200% 100%;
				animation: skeleton-loading 1.5s ease-in-out infinite;
				border-radius: 4rpx;
			}
			.skeleton-desc {
				width: 85%;
				height: 24rpx;
				margin-left: 18rpx;
				background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
				background-size: 200% 100%;
				animation: skeleton-loading 1.5s ease-in-out infinite;
				border-radius: 4rpx;
			}
		}
	}
	
	/* 骨架屏加载动画 */
	@keyframes skeleton-loading {
		0% {
			background-position: 200% 0;
		}
		100% {
			background-position: -200% 0;
		}
	}
</style>