<template>
	<view class="content" v-if="isShow">
		<!-- 头部banner -->
		<view class="top-box">
			<swiper class="top-banner" :circular="true" :interval="6000"
				:duration="800" :indicator-dots="false" :autoplay="true" v-if="topBanner">
				<swiper-item v-for="(item, index) in topBanner" :key="index" @click.stop="gotoUrlNew(item)">
					<image class="top-banner" :src="showImg(item.head_img)" mode="aspectFill" lazy-load="true"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 金刚区 -->
		<view class="menu-box flex-between">
			<view v-for="(item,index) in menuList" :key="index" @click="goPath(item)">
				<image :src="item.img" mode="aspectFill" lazy-load="true"></image>
				<view>{{item.title}}</view>
			</view>
		</view>
		
		<!-- 小banner -->
		<swiper class="small-banner" :circular="true" :interval="6000"
			:duration="800" :indicator-dots="false" :autoplay="true" v-if="smallBanner">
			<swiper-item v-for="(item, index) in smallBanner" :key="index" @click.stop="gotoUrlNew(item)">
				<image class="small-banner" :src="showImg(item.head_img)" mode="aspectFill" lazy-load="true"></image>
			</swiper-item>
		</swiper>
		
		<!-- 常熟精选 -->
		<image src="https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/title1.png" mode="heightFix" class="title-img" lazy-load="true"></image>
		<view class="winnow-box">
			<view v-for="(item,index) in winnowList" :key="index">
				<view class="winnow-title flex-between">
					
					<image style="height: 32rpx;" mode="heightFix" :src="item.titleImg"></image>
					<span :style="{color: item.spanColor}" @click.stop="gotoPath(item.path)">查看更多产品 ></span>
				</view>
				<view class="winnow-item" v-for="(pItem, pIndex) in item.list" :key="pIndex" @click="gotoDetailByTypeToJdsz(pItem)">
					<image :src="showImgs(pItem.headimg)" mode="aspectFill" class="winnow-img" lazy-load="true"></image>
					<view class="winnow-content flex-column">
						<view class="title text-overflowRows">{{pItem.title}}</view>
						<view class="price-box flex-between">
							<view class="price">{{pItem.price / 100}}</view>
							<view class="btn">购买</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 周边特惠活动 -->
		<view v-if="calendarItem && calendarItem.id">
			<image src="https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/title2.png" mode="heightFix" class="title-img" lazy-load="true"></image>
			
			<view class="calendar-item" @click="gotoWebUrl(calendarItem)">
				<image :src="showImg(calendarItem.image)" mode="aspectFill" class="calendar-img" lazy-load="true"></image>
				<view class="calendar-content flex-column">
					<view class="title text-overflow">{{calendarItem.title}}</view>
					<view class="subtitle text-overflow">活动时间：{{ calendarItem.start_time }}—{{ calendarItem.end_time }}</view>
				</view>
			</view>
			
			<view class="calendar-more" @click="gotoPath('/subPackages/peripheralActivity/peripheralActivity')">查看更多</view>
		</view>
		
		<!-- 旅游助手 -->
		<image src="https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/title3.png" mode="heightFix" class="title-img" lazy-load="true"></image>
		<view class="flex-between" style="margin-top: -16rpx;">
			<image :src="item.img" mode="aspectFill" class="travel-img" v-for="(item,index) in travelList" :key="index" @click="goPath(item)" lazy-load="true"></image>
		</view>
		
		<!-- 公共服务 -->
		<image src="https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/title4.png" mode="heightFix" class="title-img" lazy-load="true"></image>
		<view class="public-box">
			<view v-for="(item,index) in publicList" :key="index" @click="goPath(item)">
				<image :src="item.img" mode="aspectFill" lazy-load="true"></image>
				<view>{{item.title}}</view>
			</view>
		</view>
		
		<!-- 热门推荐 -->
		<image src="https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/title5.png" mode="heightFix" class="title-img" lazy-load="true"></image>
		<view class="hot-type flex-between">
			<view v-for="(item,index) in hotType" :key="index" :class="index == typeIndex ? 'type-active' : ''" @click="changeType(index)">
				{{item.title}}
			</view>
		</view>
		
		<view class="hot-box">
			<view class="hot-column" v-for="(column, index) in 2" :key="index">
				<view v-for="(item,indexs) in getColumnItems(index)" :key="indexs" class="hot-item" @click="gotoHotDetail(item)">
					<view class="image-container">
						<image :src="item.src" mode="aspectFill" class="hot-img" lazy-load="true"></image>
						<image src="https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/play.png" mode="widthFix" class="play-img" v-if="typeIndex == 5" lazy-load="true"></image>
					</view>
					<view class="hot-content">
						<view class="title text-overflow">{{item.title || item.name}}</view>
						<view class="tags" v-if="item.display_tags && typeIndex == 0">
						    <view class="tag text-overflow"
						        v-for="(tags,tagsIndex) in item.display_tags.split(',').slice(0,2)"
						        :key="tagsIndex">{{tags}}</view>
						</view>
						<view class="subtitle text-overflow" v-if="typeIndex == 1">
							{{ item.start_time }}—{{ item.end_time }}
						</view>
						<view class="price" v-if="typeIndex == 2 || typeIndex == 4">
							￥{{ item.price / 100 }}
						</view>
						<view class="subtitle text-overflow" v-if="typeIndex == 3">{{item.cateType}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
	<view class="content" v-else>
		<!-- 头部banner -->
		<view class="top-box">
			<swiper class="top-banner" :circular="true" :interval="6000"
				:duration="800" :indicator-dots="false" :autoplay="true" v-if="topBanner">
				<swiper-item v-for="(item, index) in topBanner" :key="index">
					<image class="top-banner" :src="showImg(item.head_img)" mode="aspectFill" lazy-load="true"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 金刚区 -->
		<view class="menu-box flex-between">
			<view v-for="(item,index) in menuList" :key="index" @click="goPath(item)" v-if="[5,6,7].includes(index)">
				<image :src="item.img" mode="aspectFill" lazy-load="true"></image>
				<view>{{item.title}}</view>
			</view>
		</view>
		
		<!-- 小banner -->
		<swiper class="small-banner" :circular="true" :interval="6000"
			:duration="800" :indicator-dots="false" :autoplay="true" v-if="smallBanner">
			<swiper-item v-for="(item, index) in smallBanner" :key="index">
				<image class="small-banner" :src="showImg(item.head_img)" mode="aspectFill" lazy-load="true"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topBanner: [],
				menuList: [
					{
						title: '景点门票',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/jdmp.png',
						path: '',
						url: 'https://m.cloud.sz-trip.com/AttractionsTickets'
					},
					{
						title: '非遗手作',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/fysz.png',
						path: '/subPackages/other/feiyi',
					},
					{
						title: '文创特产',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/wctc.png',
						path: '',
						url: 'https://m.cloud.sz-trip.com/CulturalCreation',
					},
					{
						title: '酒店住宿',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/jdzs.png',
						path: '',
						url: 'https://m.cloud.sz-trip.com/nightMooring',
					},
					{
						title: '电影购票',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/dygp.png',
						url: 'https://m.cloud.sz-trip.com/MoviesChangShu',
					},
					{
						title: '场馆预约',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/cgyy.png',
						path: '/subPackages/venue/venueList'
					},
					{
						title: '一卡游玩',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/ykyw.png',
						path: '',
						shortLink: '#小程序://旅游年卡/bgJOy4DGeuOXBMg',
					},
					{
						title: '活动日历',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/hdrl.png',
						path: '/subPackages/eventCalendar/eventCalendar'
					},
					{
						title: '特色线路',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/tsxl.png',
						path: '',
						url: 'https://m.cloud.sz-trip.com/OneDayTravelNew',
					},
					{
						title: '常熟周边',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/cszb.png',
						path: '/subPackages/rim/rimList'
					}
				],
				smallBanner: [],
				winnowList: [
					{
						title: '景点',
						id: '5',
						spanColor: '#2260F6',
						list: [],
						titleImg: "https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/JXTitle1.png",
						path: '/subPackages/webPage/webPage?url=https://m.cloud.sz-trip.com/AttractionsTickets'
					},
					{
						title: '特产',
						id: '11',
						spanColor: '#EE710C',
						list: [],
						titleImg: "https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/JXTitle2.png",
						path: '/subPackages/webPage/webPage?url=https://m.cloud.sz-trip.com/CulturalCreation'
					}
				],
				calendarItem: {},
				travelList: [
					{
						title: '聆听常熟',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/lingting.png',
						path: '/subPackages/webPage/webPage?url='+encodeURIComponent("https://qyly1.csly-travel.com/qytshopwebchat/#/jiangKouTheme/soundNew?pageId=966&miniKey=70&source=APPLET_CHANGSHU")
					},
					{
						title: '云游常熟',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/yunyou.png',
						path: '/subPackages/other/virtual'
					},
					{
						title: '寻味常熟',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/xunwei.png',
						path: '/subPackages/other/foodList'
					}
				],
				publicList: [
					{
						title: '公共自行车',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/ggzxc.png',
						path: '/subPackages/other/gonggtcc'
					},
					{
						title: '咨询投诉',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/zxts.png',
						path: '/subPackages/other/consulting'
					},
					{
						title: '景区舒适度',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/jqssd.png',
						path: '/subPackages/other/shusd'
					},
					{
						title: '找车位',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/zcw.png',
						path: '/subPackages/other/tingchechang'
					},
					{
						title: '找厕所',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/zcs.png',
						path: '/subPackages/other/fjtcc'
					},
					{
						title: '公共交通',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/ggjt.png',
						path: '/subPackages/webPage/webPage?url='+encodeURIComponent('https://www.changshuxing.cn/csxing-h5/pages/wentilv/index.html')
						// path: '/subPackages/other/gonggjt'
					},
					{
						title: '文物资源',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/wwzy.png',
						path:'/subPackages/webPage/webPage?url=https://changshuwwaq.hwtcloud.cn/wechat/home'
					}
				],
				hotType: [
					{title: '景点', id: '25'},
					{title: '活动', id: '617'},
					{title: '文创', id: '26'},
					{title: '非遗', id: '619'},
					{title: '线路', id: '27'},
					{title: '视频', id: '18'}
				],
				typeIndex: 0,
				hotList: [],
				pageNo: 1,
				limit: 6,
				isLoading: false,
				isShow: true
			}
		},
		onLoad() {
		},
		onShow() {
			// 后台文章id 4,副标题(subtitle)和地址(address)切换
			this.Post({
				id: 4
			},'/api/article/getArticleById').then(res => {
				// this.isShow = res.data.subtitle == 1 ? true : false
				this.isShow = res.data.address == 1 ? true : false
			})
		},
		onReady() {
			this.getBanner()
			this.getWinnowList()
			this.getCalendarList()
			this.changeType(0)
			this.getLocation()
		},
		onReachBottom() {
			setTimeout(() => {
				if (!this.isLoading) this.getHotList();
			}, 1000);
		},
		methods: {
			goPath (item) {
				if (item.shortLink) {
					uni.navigateToMiniProgram({
						shortLink: item.shortLink
					})
				}
				if (item.url) {
					let isJDSZ = this.goJDSZMiniProgram(item.url)
					if (isJDSZ) return
					uni.navigateTo({
						url: '/subPackages/webPage/webPage?url=' + encodeURIComponent(item.url)
					});
				}
				
				if(item.path) {
					this.gotoPath(item.path)
				}
				
				if(!item.url && !item.path && !item.shortLink) {
					uni.showToast({
						title: '开发中',
						icon: 'none'
					})
				}
			},
			// banner跳转
			// 2是各种详情页，3是列表专题页面，4是小程序
			gotoUrlNew(item) {
				console.log(item);
				let that = this;
				let url = '';
				switch (item.jump_type) {
					case 0:
						break;
					case 2:
						uni.navigateTo({
							url: item.tdata
						});
						break;
					case 3:
						let isJDSZ = this.goJDSZMiniProgram(item.tdata)
						if (isJDSZ) return
						uni.navigateTo({
							url: '/subPackages/webPage/webPage?url=' + item.tdata
						});
						break;
					case 4:
						uni.navigateToMiniProgram({
							appId: item.tdata.appid, // 此为appid
							path: item.tdata.page, // 此为首页路径
							envVersion: 'release',
							success: res => {
								// 打开成功
								console.log('打开成功', res);
							},
							fail: err => {
								console.log(err);
							}
						});
						break;
					default:
						break;
				}
			},
			// 判断是否跳转君到苏州专题页
			goJDSZMiniProgram (tpage) {
				if (tpage.indexOf('m.cloud.sz-trip.com') > -1) {
					// 如果已登录但没有手机号，直接去授权页面
					let userInfo = null
					try {
						userInfo = JSON.parse(uni.getStorageSync('userInfo'))
						
					} catch(e) {}
					if (userInfo && userInfo.token && !userInfo.mobile) {
						uni.showToast({
							title: '未授权手机号',
							icon: 'none'
						})
						// 去登录页面授权
						setTimeout(()=>{
							uni.navigateTo({
								url: '/pages/login/login?needAuth=1'
							})
						},200)
						return true
					}
					uni.navigateTo({
						url: '/subPackages/webPage/webPage?url=' + encodeURIComponent(`${tpage}?token=2d50b941-e204-4e5d-97c9-868430711459`)
					});
					// 获取授权code
					// this.checkIsLoginJdsz().then(res => {
					// 	if(res) {
					// 		uni.navigateTo({
					// 			url: '/subPackages/webPage/webPage?url=' + encodeURIComponent(`${tpage}?token=` + res)
					// 		});
					// 	}
					// })
					return true
				}
				return false
			},
			// 瀑布流
			getColumnItems(columnIndex) {
				const columnItems = [];
				this.hotList.forEach((item, index) => {
					switch (this.typeIndex) {
					  case 1:
					    item.src = this.showImg(item.image);
					    break;
					  case 3:
						item.src = item.typeImg == '' || item.typeImg == null ? 'https://qyly1.csly-travel.com/r/cms/www/m/changshu/noimg.png' : this.$geturl480(item.typeImg)
						break
					  case 5:
					    item.src = this.showImg(item.head_img);
					    break;
					  default:
					    item.src = item.headimg;
					}
					
					if (index % 2 === columnIndex) {
						columnItems.push(item);
					}
				});
				return columnItems;
			},
			getBanner() {
				// 获取顶部banner
				this.Post({
					type_id: 3,
					position: 6,
				}, '/api/adv/getAdv').then(res => {
					if(res) {
						this.topBanner = res.data
					}
				})
				
				// 小banner
				this.Post({
					type_id: 3,
					position: 1,
				}, '/api/adv/getAdv').then(res => {
					if(res) {
						this.smallBanner = res.data
					}
				})
			},
			// 获取景点和特产
			getWinnowList() {
				this.winnowList.map((item,index) => {
					this.Post({
						apiType: 'jdsz',
						tag_id: item.id,
						offset: 0,
						limit: 3,
					}, index ? '/api/product/get_product_by_tag_partners' : '/api/scene/get_scene_by_tag_partners').then(res => {
						if(res) {
							item.list = res.data.list
						}
					})
				})
			},
			// 周边特惠活动
			getCalendarList() {
				this.Post({
					date: '',
					offset: 0,
					limit: 1,
					type_id: 6
				},'/api/activity/getActivityCalendar').then(res => {
					this.calendarItem = res.data[0]
				})
			},
			// 更改热门推荐类型
			changeType(index) {
				this.typeIndex = index
				this.pageNo = 1
				this.isLoading = false
				this.hotList = []
				this.getHotList()
			},
			getHotList() {
				if(this.typeIndex == 1) {
					this.Post({
						date: '',
						offset: this.hotList.length,
						limit:this.limit,
						type_id: 7,
					}, '/api/activity/getActivityCalendar').then(res => {
						if(res) {
							if(res.data.length < this.limit) this.isLoading = true
							this.hotList = this.hotList.concat(res.data)
						}
					})
				}else if(this.typeIndex == 3) {
					this.Post({
						apiType: 'old',
						channelIds: 76,
						first: this.hotList.length,
						count: this.limit
					}, '/json/content_list.jspx').then(res => {
						if(res) {
							if(res.length < this.limit) this.isLoading = true
							const newArr = [...this.hotList];
							for (const item of res) {
								let isDuplicate = false;
								for (const existingItem of newArr) {
									if (existingItem.id === item.id) {
										isDuplicate = true;
										break;
									}
								}
								if (!isDuplicate) {
									newArr.push(item);
								}
							}
							this.hotList = newArr
						}
					})
				}else if(this.typeIndex == 5) {
					// 视频
					this.Post({
					    tag_id: this.hotType[this.typeIndex].id,
						page: this.pageNo,
						limit: this.limit,
					}, '/api/multimedia/getMultimediaListByTag').then(res => {
					    if(res) {
							if(res.data.length < this.limit) this.isLoading = true
							this.hotList = this.hotList.concat(res.data)
							this.pageNo++
						}
					})
				}else if(this.typeIndex == 2 || this.typeIndex == 4) {
					this.Post({
						apiType: 'jdsz',
						tag_id: this.hotType[this.typeIndex].id,
						offset: this.hotList.length,
						limit: this.limit,
					}, '/api/product/get_product_by_tag_partners').then(res => {
						if(res) {
							if(res.data.list.length < this.limit) this.isLoading = true
							this.hotList = this.hotList.concat(res.data.list)
						}
					})
				}else {
					this.Post({
						apiType: 'jdsz',
						tag_id: this.hotType[this.typeIndex].id,
						offset: this.hotList.length,
						limit: this.limit,
					}, '/api/scene/get_scene_by_tag_partners').then(res => {
						if(res) {
							if(res.data.list.length < this.limit) this.isLoading = true
							this.hotList = this.hotList.concat(res.data.list)
						}
					})
				}
			},
			gotoHotDetail(item) {
				if(this.typeIndex == 1) {
					// 活动
					uni.navigateTo({
						url:'/subPackages/eventCalendar/detail?id='+item.id
					})
				}else if(this.typeIndex == 3) {
					uni.navigateTo({
						url:'/subPackages/other/foodDetail?id='+item.id
					})
				}else if(this.typeIndex == 5) {
					// 视频
					uni.navigateTo({
						url: '/subPackages/video/video?item=' + encodeURIComponent(JSON.stringify(item))
					})
				}else {
					this.gotoDetailByTypeToJdsz(item)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		overflow-x: hidden;
		// background: #F2FFFE;
		background-image: url("https://static.ticket.sz-trip.com/uploads/20250709/d12a86f95b15f73f3b8ec7784a233d11.png");
		background-size: 100% auto;
		background-repeat: repeat-y;
		padding: 0 26.67rpx 66rpx;
	}
	
	.top-box {
		margin-top: 26.67rpx;
		
		.top-banner {
			width: 100%;
			height: 367rpx;
			border-radius: 13rpx;
		}
	}
	
	.menu-box {
		margin: 40rpx 0 40rpx;
		flex-wrap: wrap;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		
		&>view {
			width: 20%;
			text-align: center;
			
			image {
				width: 93.33rpx;
				height: 93.33rpx;
				margin-bottom: 17rpx;
			}
		}
		&>view:nth-child(n+6) {
			margin-top: 24rpx;
		}
	}
	
	.small-banner {
		width: 697rpx;
		height: 153rpx;
		border-radius: 13rpx;
	}
	
	.title-img {
		// height: 66.67rpx;
		// margin: 52rpx 0 24rpx;
		height:100rpx;
		margin: 52rpx 0 0;
	}
	
	.winnow-box {
		width: calc(100vw - 26.67rpx);
		display: flex;
		overflow-x: auto;
		margin-top: -16rpx;
		
		&>view {
			width: 555.33rpx;
			height: 646.67rpx;
			// background: linear-gradient(135deg, rgba(170, 204, 250, .5), rgba(111, 163, 252, .5));
			background-image: url("https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/JXBG1.png");
			background-size: 100% 100%;
			// border-radius: 13rpx;
			padding: 38rpx 30rpx 0;
			// margin-right: 26rpx;
			flex-shrink: 0;
			
			.winnow-title {
				height: 32rpx;
				// font-weight: normal;
				// font-size: 40rpx;
				// color: #0F74D4;
				justify-content: baseline;
				margin-bottom: 29rpx;
				
				span {
					font-size: 27rpx;
				}
			}
			
			.winnow-item {
				width: 493rpx;
				height: 153rpx;
				background: #FFFFFF;
				border-radius: 13rpx;
				display: flex;
				margin-bottom: 20rpx;
				
				.winnow-img {
					width: 157rpx;
					height: 153rpx;
					border-radius: 13rpx 0rpx 0rpx 13rpx;
				}
				
				.winnow-content {
					margin-left: 13rpx;
					width: 310rpx;
					height: 153rpx;
					padding: 12rpx 0;
					justify-content: space-between;
					
					.title {
						font-weight: 500;
						font-size: 27rpx;
						color: #333333;
					}
					
					.price-box {
						.price {
							font-weight: bold;
							font-size: 30rpx;
							color: #ED1C19;
						}
						.price::before {
							content: '￥';
							font-size: 24rpx;
						}
						
						.btn {
							width: 93rpx;
							height: 37rpx;
							background: #FF984F;
							border-radius: 19rpx;
							text-align: center;
							line-height: 37rpx;
							font-weight: 500;
							font-size: 27rpx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
		&>view:nth-child(2) {
			// background: linear-gradient(135deg, rgba(253, 171, 112, .5), rgba(254, 127, 25, .5));
			background-image: url("https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/JXBG2.png");
			
			.winnow-title {
				color: #EE710C;
			}
		}
	}
	.winnow-box::-webkit-scrollbar {
		display: none;
	}
	
	.calendar-item {
		width: 718.67rpx;
		height: 439.33rpx;
		// background: rgba(255,255,255,0.6);
		// box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(89,166,160,0.32);
		background-image: url("https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/THBG.png");
		background-size: 100% 100%;
		// border-radius: 13rpx;
		overflow: hidden;
		margin-top: -16rpx;
		padding: 8rpx 11.33rpx 0 10.67rpx;
		
		.calendar-img {
			width: 100%;
			height: 300rpx;
			display: block;
			border-radius: 27rpx 27rpx 0rpx 0rpx;
		}
		
		.calendar-content {
			height: 117rpx;
			padding: 0 20rpx;
			justify-content: space-around;
			
			.title {
				font-weight: bold;
				font-size: 31rpx;
				color: #111111;
			}
			
			.subtitle {
				font-weight: 500;
				font-size: 24rpx;
				color: #111111;
			}
		}
	}
	
	.calendar-more {
		width: 240rpx;
		height: 53rpx;
		border-radius: 27rpx;
		border: 1rpx solid #fff;
		text-align: center;
		line-height: 53rpx;
		margin: 40rpx auto 0;
		font-weight: 500;
		font-size: 28rpx;
		color: #fff;
	}
	
	.travel-img {
		width: 220rpx;
		height: 173.33rpx;
	}
	
	.public-box {
		display: flex;
		flex-wrap: wrap;
		font-weight: 500;
		font-size: 25rpx;
		color: #fff;
		margin-top: -16rpx;
		
		&>view {
			width: 25%;
			text-align: center;
			
			image {
				width: 117.33rpx;
				height: 104rpx;
				margin-bottom: 6.67rpx;
			}
		}
		&>view:nth-child(n+5) {
			margin-top: 40rpx;
		}
	}
	
	.hot-type {
		margin-top: -16rpx;
		&>view{
			width: 107rpx;
			height: 60rpx;
			background: linear-gradient(180deg, #6DE1FF, #45B1FF);
			box-shadow: 0rpx 1rpx 4rpx 0rpx rgba(2,115,176,0.36);
			border-radius: 20rpx;
			text-align: center;
			line-height: 60rpx;
			box-sizing: border-box;
			font-weight: bold;
			font-size: 31rpx;
			color: #FFFFFF;
		}
		
		.type-active {
			// font-weight: bold;
			// font-size: 31rpx;
			// color: #111111;
			// position: relative;
			background: linear-gradient(180deg, #FCFBC9, #FFEF26);
			box-shadow: 0rpx 1rpx 4rpx 0rpx rgba(2,115,176,0.36);
			color: #111111;
		}
		// .type-active::after {
		// 	content: "";
		// 	position: absolute;
		// 	left: 0;
		// 	right: 0;
		// 	bottom: -10rpx;
		// 	margin: auto;
		// 	width: 35rpx;
		// 	height: 2px;
		// 	background-color: #00C1B1;
		// }
	}
	
	.hot-box {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		
		.hot-column {
		    width: 340rpx;
		    display: flex;
		    flex-direction: column;
		}
		
		.hot-item {
			width: 340rpx;
			height: 400rpx;
			background: rgba(255,255,255,0.7);
			box-shadow: 0rpx 3rpx 11rpx 0rpx rgba(1,95,145,0.39);
			// background-image: url("https://static.ticket.sz-trip.com/changshu/images/index/2025/summer/RMBG.png");
			// background-size: 100% 100%;
			border-radius: 27rpx;
			overflow: hidden;
			margin-bottom: 20rpx;
			
			.image-container {
				position: relative;
				
				.hot-img {
					width: 340rpx;
					height: 266.67rpx;
				}
				
				.play-img {
					width: 66.67rpx;
					height: 66.67rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
			
			.hot-content {
				padding: 10rpx 15rpx 20rpx;
				
				.title {
					font-weight: bold;
					font-size: 31rpx;
					color: #111111;
				}
				
				&>view:nth-child(2) {
					margin-top: 15rpx;
				}
				
				.tags {
					display: flex;
					
					.tag {
						height: 37rpx;
						border-radius: 19rpx;
						border: 1px solid #2260F6;
						padding: 0 10rpx;
						font-weight: 500;
						font-size: 24rpx;
						color: #2260F6;
						overflow-y: hidden;
					}
					.tag:nth-child(2) {
						margin-left: 10rpx;
					}
				}
				
				.subtitle {
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
				}
				
				.price {
					font-weight: bold;
					font-size: 31rpx;
					color: #ED1C18;
				}
			}
		}
	}
</style>
