<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>
			</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"></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="gonggao">
		  	<image src="https://api.ccttiot.com/smartmeter/img/static/uumGjcsuiyoV00YMt8s9" mode=""></image>
		  	<view class="">
		  		福鼎市文化旅游地图
		  	</view>
		  </view>
			<view class="fenlei-container">
				<scroll-view class="fenlei-scroll"
				 scroll-x="true"
				 :scroll-with-animation="true"
				 show-scrollbar="false">
					<view class="fenlei">
						<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>
				</scroll-view>
			</view>
			<!-- 视频介绍 -->
			<view class="videoxc">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uKX1Cv1H2ZjWi4y03xU4" mode=""></image>
				<video :src="video"
					loop="true" autoplay="true" muted="true"></video>
			</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="">
							<image style="border-radius: 16rpx;" :src="hotAreaImages[0]" mode="aspectFill"></image>
							<text class="name">{{ hotAreaNames[0] }}</text>
							<text class="jianjie">{{ hotAreaDescriptions[0] }}</text>
						</view>
					</view>
					<view class="rmrtimg">
						<view class="" v-if="hotAreaImages[1]">
							<image style="border-radius: 16rpx;" :src="hotAreaImages[1]" mode="aspectFill">
							</image>
							<text class="name">{{ hotAreaNames[1] }}</text>
							<text class="jianjie">{{ hotAreaDescriptions[1] }}</text>
						</view>
						<view class="" v-if="hotAreaImages[2]">
							<image style="border-radius: 16rpx;" :src="hotAreaImages[2]" mode="aspectFill">
							</image>
							<text class="name">{{ hotAreaNames[2] }}</text>
							<text class="jianjie">{{ hotAreaDescriptions[2] }}</text>
						</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]" mode="aspectFill">
							</image>
							<image v-if="dishImages[2]" :src="dishImages[2]" 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="item.photo" mode="aspectFill" style="margin-right: 10rpx;"></image>
								<view class="wz">
									<text class="tit" v-if="item.name">{{item.name.length > 7 ? item.name.slice(0,6) + '...' : item.name}}</text>
									<text class="tits" v-if="item.description">{{item.description.length > 7 ? item.description.slice(0,7) + '...' : 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">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uPDjdxan6aR8Dhjwrxzn" mode=""></image>
						<!-- <view class="ywitem" v-for="(item,index) in 15" :key="index">
							{{ ['柏杨村', '太姥山', '牛郎岗', '渔井村', '白琳镇', '点头镇', '管阳镇', '磻溪镇', '叠石乡', '贯岭镇', '前岐镇', '沙埕镇', '店下镇', '龙安镇', '佳阳乡'][index] }}
						</view> -->
					</view>
				</scroll-view>
				<view class="ywimg" v-if="recommendAreaHero" @click="btnyouwan(recommendAreaHero, 1)">
					<image :src="recommendAreaHero.image" mode="aspectFill"></image>
					<view class="">
						{{ recommendAreaHero.name }}
					</view>
				</view>
				<view class="ywlist">
					<view class="" v-for="(it, idx) in recommendAreaCards" :key="idx" @click="btnyouwan(it, 2)">
						<image :src="it.image" mode="aspectFill"></image>
						<text>{{ it.name }}</text>
					</view>
				</view>
			</view>
			<!-- 精品路线 -->
			<view class="wenhua">
				<scroll-view class="ywtab" scroll-x="true" show-scrollbar="false" enhanced="true">
					<view class="ywcontent">
						<image src="https://api.ccttiot.com/smartmeter/img/static/ukcE3BtUtcWmzNPYIAOK" mode=""></image>
						<!-- <view class="ywitem" v-for="(item,index) in 5" :key="index">
							{{ ['文化之旅', '休闲之旅', '研学之旅', '渔井村', '白琳镇', '点头镇'][index] }}
						</view> -->
					</view>
				</scroll-view>
				
				<view class="wrap">
					<view class="waterfall-container">
						<view class="waterfall-left">
							<view class="demo-warter" 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="item.photo"
									:index="index"></u-lazy-load>
								<view class="dizhi">
									<image src="https://api.ccttiot.com/smartmeter/img/static/utLEbsdQEquhFgaY1awN" mode=""></image>
									{{item.areaAddress}}
								</view>
								<view class="cont">
									{{item.name && item.name.length > 10 ? item.name.slice(0,10) + '...' : item.name}}
								</view>
								<!-- <view class="shuju">
								<view class="">
									<image src="https://api.ccttiot.com/smartmeter/img/static/u0pAKdQ4zhTD4R9nSua4" mode=""></image> {{item.views}}
								</view>
								<view class="">
									<image src="https://api.ccttiot.com/smartmeter/img/static/uHzTj0AQBMfsXZsx3bH0" mode=""></image> {{item.collections}}
								</view>
								<view class="">
									<image src="https://api.ccttiot.com/smartmeter/img/static/ua4ZMQ4gPMXbXGCZXaGd" mode=""></image> {{item.forwards}}
								</view>
								</view> -->
							</view>
						</view>
						<view class="waterfall-right">
							<view class="demo-warter" 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="item.photo"
									:index="index"></u-lazy-load>
								<view class="dizhi">
									<image src="https://api.ccttiot.com/smartmeter/img/static/utLEbsdQEquhFgaY1awN" mode=""></image>
									{{item.areaAddress}}
								</view>
								<view class="cont">
									{{item.name && item.name.length > 10 ? item.name.slice(0,10) + '...' : item.name}}
								</view>
								<!-- <view class="shuju">
									<view class="">
										<image src="https://api.ccttiot.com/smartmeter/img/static/u0pAKdQ4zhTD4R9nSua4" mode=""></image> {{item.views}}
									</view>
									<view class="">
										<image src="https://api.ccttiot.com/smartmeter/img/static/uHzTj0AQBMfsXZsx3bH0" mode=""></image> {{item.collections}}
									</view>
									<view class="">
										<image src="https://api.ccttiot.com/smartmeter/img/static/ua4ZMQ4gPMXbXGCZXaGd" mode=""></image> {{item.forwards}}
									</view>
								</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:'',
				lists:[],
				hotAreaList:[],// 热门景点
				recommendAreaList:[],// 推荐景点 
				strategyList:[],// 攻略
				dishList:[],// 美食
				pageNum:1,
				total:0
			}
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '玩转福鼎',
				path: '/pages/index/index'
			}
		},
		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '玩转福鼎',
				query: '',
				path: '/pages/index/index'
			}
		},
		onLoad() {
			this.getinfo()
			this.gethome()
			this.getlunbo()
			this.addRandomData()
			uni.getLocation({
			    type: 'gcj02', // 国内地图更兼容
				isHighAccuracy: true,
				accuracy:'best',
			    success: (res) => {
			        console.log('精确坐标:', res)
			    },
			    fail: (err) => {
			        console.error('获取位置失败:', err)
			    }
			})
		},
		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: {
			// 点击进行搜索
			btnsousuo(){
				uni.navigateTo({
					url:'/page_user/sousuo/index'
				})
			},
			// 请求个人信息
			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   //美食
					}
				})
			},
			
			// 请求轮播图
			getlunbo(){
				// this.lists.push({
				// 	image:'https://api.ccttiot.com/smartmeter/img/static/u2qU0tM0WQqCfXzJO8lX'
				// })
				this.$u.get(`/app/app/basicInfo/1`).then(res =>{
					if(res.code == 200){
					    this.video = res.data.videoUrl
						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){ //跳转住宿
					// uni.navigateTo({
					// 	url:'/'
					// })
					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'
					})
				}
			},
		// 点击攻略跳转到攻略详情
		btngonglue(item){
			console.log(item);
			uni.navigateTo({
				url:'/page_fenbao/gonglue/gongluexq?id=' + item.id
			})
		},
		// 瀑布流添加数据
		addRandomData() {
			// 直接添加所有数据，确保每个数据都能显示
			this.$u.get(`/app/strategy/list?pageNum=${this.pageNum}&pageSize=20`).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) => {
						// let newItem = {
						// 	id: this.$u.guid(),
						// 	image: item.photo || '',  // 映射图片字段
						// 	title: item.name || '',   // 映射标题字段
						// 	dizhi: item.areaAddress || ''  // 映射地址字段
						// }
						this.flowList.push(item)
					})
					// 页码自增，为下次加载做准备
					this.pageNum++
				}
			}).catch(err => {
				console.error('加载瀑布流数据失败:', err)
			})
		},
			// 页面滚动监听
			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('加载更多瀑布流数据')
			},
		}
	}
</script>

<style lang="scss">
	::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: 8px;
			margin-bottom: 20rpx;
			background-color: #ffffff;
			padding: 8px;
			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;
			}
			.dizhi{
				margin-top: 16rpx;
				padding-left: 18rpx;
				
				image{
					width: 28rpx;
					height: 28rpx;
					margin-right: 8rpx;
				}
				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;
			}
			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: 42rpx;
			gap: 28rpx;
			view {
				width: 224rpx;
				height: 118rpx;
				border-radius: 6rpx;
				position: relative;
				padding-top: 78rpx;
				padding-left: 14rpx;
				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;
				}
			}
		}
		.ywimg {
			position: relative;
			width: 100%;
			height: 264rpx;
			padding-top: 182rpx;
			padding-left: 40rpx;
			view {
				font-weight: 600;
				font-size: 40rpx;
				color: #FFFFFF;
			}
			image {
				width: 100%;
				height: 264rpx;
				border-radius: 6rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}
		}
		.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;
			}
			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;
				}
				view {
					position: relative;
					height: 342rpx;
					width: 342rpx;
					padding-top: 256rpx;
					padding-left: 18rpx;
					image {
						width: 342rpx;
						height: 342rpx;
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						z-index: -1;
					}
					.name {
						font-weight: 600;
						font-size: 32rpx;
						color: #FFFFFF;
						display: block;
					}
					.jianjie {
						font-size: 24rpx;
						color: #FFFFFF;
						margin-top: 4rpx;
						display: block;
					}
				}
			}
			.rmrtimg {
				view {
					position: relative;
					height: 186rpx;
					width: 352rpx;
					padding-top: 56rpx;
					padding-left: 18rpx;
					image {
						width: 352rpx;
						height: 156rpx;
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						z-index: -1;
					}
					.name {
						font-weight: 600;
						font-size: 32rpx;
						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;
		image {
			width: 706rpx;
			height: 420rpx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 20rpx;
		}
		video {
			width: 622rpx;
			height: 320rpx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 56rpx;
		}
	}
	.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: #E8FFFB;
		border-radius: 37rpx 37rpx 37rpx 37rpx;
		display: flex;
		align-items: center;
		padding-left: 26rpx;
		position: absolute;
		top: 554rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;
		image {
			width: 38rpx;
			height: 38rpx;
			margin-right: 26rpx;
		}
		view {
			font-size: 30rpx;
			color: #3D3D3D;
		}
	}
	.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;
		}
	}
</style>