<template>
	<view class="page">
		<u-navbar title="攻略详情" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='40' id="navbar" :custom-back="btnfh">
		</u-navbar>
		<view class="" v-if="dongtaiflag == false">
			<!-- 顶部大图 -->
			<view class="hero">
				<swiper 
					class="hero-swiper" 
					:indicator-dots="heroImages.length > 1" 
					:autoplay="heroImages.length > 1" 
					:interval="3000" 
					:duration="500"
					indicator-color="rgba(255,255,255,0.5)" 
					indicator-active-color="#fff"
					@tap="previewHeroImage"
				>
					<swiper-item v-for="(img, imgIndex) in heroImages" :key="imgIndex">
						<image class="hero-img" :src="img" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<image class="sc" @click="btnscqx" v-if="globj.isCollected == true" src="https://api.ccttiot.com/smartmeter/img/static/uREVO9VLwercFEWbnurd" mode=""></image>
				<image class="sc" @click="btnscqd" v-else src="https://api.ccttiot.com/smartmeter/img/static/ukfmNwl4GOF4v090KRqy" mode=""></image>
			</view>
			
			<!-- 基本信息 -->
			<view class="base-info">
				<view class="title-row">
					<view class="left">
						<view class="name" style="font-size: 36rpx;">{{globj.name}}</view>
						<!-- 标签 -->
						<view class="tags-container" v-if="globj.tags && globj.tags.length > 0">
							<view class="tag-item" v-for="(tag, index) in globj.tags" :key="index">{{tag}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 小节：核心景点/相关景区 -->
			<view class="section-block" style="padding-bottom: 0;" v-if="getDisplaySpots() && getDisplaySpots().length > 0">
				<view class="section-hd"><text class="dot"></text><text class="txt">{{ globj.isMultiArea ? '相关景区' : '核心景点' }}</text></view>
				<view class="thumbs">
					<view class="thumb-item" v-for="(item,index) in getDisplaySpots()" :key="index" @click="goToScenicSpot(item.id)">
						<image :src="getFirstPhoto(item.picture)" mode="aspectFill" class="thumb-img" style="width: 204rpx; height: 204rpx;"></image>
						<view class="thumb-name">{{item.name}}</view>
					</view>
				</view>
			</view>
			
			<!-- 小节：行程概览 -->
			<view class="section-block">
				<view class="section-hd"><text class="dot"></text><text class="txt">行程概览</text></view>
				<view class="facts list">
					<view class="fact"> <image src="https://api.ccttiot.com/smartmeter/img/static/unOeWhbxfVsgh2jXJ0si" mode=""></image> <text class="f-t">行程天数：{{globj.days}}天</text></view>
					<view class="fact" v-if="getDisplaySpots().length > 0"> <image src="https://api.ccttiot.com/smartmeter/img/static/uEz1yLuz7ID5iHVqGnfe" style="width: 40rpx;" mode=""></image>
					 <text class="f-t" v-if="getDisplaySpots().length > 0">游玩景点：{{getDisplaySpots().length}}个 </text>
					 </view>
				</view>
			</view>
			
			<!-- 行程推荐（黑灰系时间轴） -->
			<view class="section-block">
				<view class="timeline4">
					<view class="row" v-for="(day, dIndex) in itinerary" :key="dIndex">
						<view class="left">
							<view class="n">{{ (dIndex+1).toString().padStart(2,'0') }}</view>
							<view class="d">Day</view>
							<view class="vl"></view>
						</view>
					<view class="right">
						<view class="poi-card4" v-for="(poi, pIndex) in day.items" :key="pIndex">
							<view class="poi-hd">
								<text class="sq"></text>
								<text 
									class="t" 
									:class="{ 'link-text': poi.bstId && (poi.bstType == 2 || poi.bstType == 3) }"
									@click="handlePoiClick(poi)"
								>{{ poi.title }}</text>
							</view>
							<view class="poi-desc">
								<u-parse :html="poi.desc"></u-parse>
							</view>
							<view class="grid-3">
								<image v-for="(img, iidx) in poi.photos" :key="iidx" :src="img" mode="aspectFill" class="gimg" style="width: 200rpx; height: 200rpx;" @click="previewImage(img, poi.photos)" />
							</view>
						</view>
					</view>
					</view>
				</view>
			</view> 
		</view>
		<image v-else style="width: 100%;height: 100vh;position: fixed;top: 160rpx;left: 0;z-index: 999;" src="https://api.ccttiot.com/mgV9maxWGSQb6aa145cf863980513eecdf75080f75a0.png" mode=""></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#fff",
                },
				itinerary: [
					{
					 items: []
					},{
						items: []
					},
				],
				id:'',
				globj:{},
				strategyDetails:[],
				// 按天数分组的数据对象
				groupedStrategyDetails: {},
				dongtaiflag:false,
				fanhui:''
			}
		},
		onLoad(option) {
			console.log(option,'555');
            this.id = option.id
			this.getxq()
			if(option.fanhui){
				this.fanhui = option.fanhui
			}
			console.log(this.fanhui,'111');
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
		  // 先打印调试，看参数拼接结果
		  const sharePath = '/page_fenbao/gonglue/gongluexq?id=' + this.id + '&fanhui=1';
		  console.log('分享路径：', sharePath); // 重点看是否有 &fanhui=1
		  return {
		    title: '玩转福鼎',
		    path: sharePath
		  }
		},
		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '玩转福鼎',
				query: '',
				path: '/page_fenbao/gonglue/gongluexq?id=' + this.id + '&fanhui=1'
			}
		},
		computed: {
			// 处理顶部轮播图图片数组
			heroImages() {
				if (!this.globj.photo) {
					return []
				}
				// 如果是字符串，按逗号分割；如果是数组，直接使用
				if (typeof this.globj.photo === 'string') {
					const images = this.globj.photo.split(',').map(url => url.trim()).filter(url => url)
					return images.length > 0 ? images : []
				}
				return Array.isArray(this.globj.photo) ? this.globj.photo : []
			}
		},
		methods: {
			btnfh(){
				console.log(this.fanhui,'000');
				if(this.fanhui == 1){
					uni.switchTab({
						url:'/pages/index/index'
					})
				}else{
					uni.navigateBack()
				}
			},
			// 根据isMultiArea获取要显示的景点数据
			getDisplaySpots() {
				if (this.globj.isMultiArea === true) {
					// isMultiArea为true时，取areas
					return this.globj.areas || []
				} else {
					// isMultiArea为false时，取coreSpots
					return this.globj.coreSpots || []
				}
			},
			// 预览顶部轮播图
			previewHeroImage() {
				if (this.heroImages.length === 0) return
				uni.previewImage({
					current: this.heroImages[0], // 当前显示第一张
					urls: this.heroImages, // 所有图片列表
					success: function (res) {
						console.log('预览图片成功')
					},
					fail: function (err) {
						console.log('预览图片失败', err)
					}
				})
			},
			// 获取第一个图片
			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] || ''
				}
				return ''
			},
			// 点击进行收藏
			btnscqd(){
				let data = {
					bstType:1,
					bstId:this.id
				}
				this.$u.post(`/app/favorite/add`,data).then(res =>{
					if(res.code == 200){
						uni.showToast({
							title: '收藏成功',
							icon: 'success',
							duration:3000
						})
						this.globj.isCollected = true
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration:3000
						})
					}
				})
			},
			// 点击进行取消收藏
			btnscqx(){
				this.$u.delete(`/app/favorite/cancel/${this.id}?bstType=1`).then(res =>{
					if(res.code == 200){
						uni.showToast({
							title: '取消收藏成功',
							icon: 'success',
							duration:3000
						})
						this.globj.isCollected = false
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration:3000
						})
					}
				})
			},
			// 点击更多介绍进行跳转
			btnjieshao(){
				uni.navigateTo({
					url:'/page_fenbao/remenxq?id=' + this.globj.areaId
				})
			},
			// 点击拨打电话
			btntel(){
				uni.makePhoneCall({
					phoneNumber: this.globj.areaPhone,
					success: function(res) {
						console.log('拨打电话成功', res)
					},
					fail: function(err) {
						console.error('拨打电话失败', err)
					}
				})
			},
			// 点击进行导航
			btndh(){
				// 检查坐标数据是否存在
				if (!this.globj.areaLat || !this.globj.areaLon) {
					uni.showToast({
						title: '坐标数据不完整',
						icon: 'none',
						duration:3000
					})
					return
				}
				// 先申请位置权限
				uni.getSetting({
					success: (res) => {
						if (res.authSetting['scope.userLocation'] === false) {
							// 用户拒绝了位置权限，引导用户开启
							uni.showModal({
								title: '位置权限',
								content: '需要获取您的位置信息才能进行导航，请在设置中开启位置权限',
								confirmText: '去设置',
								success: (modalRes) => {
									if (modalRes.confirm) {
										uni.openSetting()
									}
								}
							})
							return
						}
						// 权限正常，打开地图
						this.openMap()
					}
				})
			},
			// 打开地图
			openMap() {
				uni.openLocation({
					latitude: parseFloat(this.globj.areaLat), // 确保是数字类型
					longitude: parseFloat(this.globj.areaLon), // 确保是数字类型
					name: this.globj.areaName || '目的地', // 地点名称
					success: function(res) {
						console.log('打开地图成功', res);
					},
					fail: function(err) {
						console.error('打开地图失败', err);
						uni.showToast({
							title: '打开地图失败: ' + (err.errMsg || '未知错误'),
							icon: 'none',
							duration: 3000
						})
					}
				})
			},
			// 请求攻略详情
			getxq(){
				this.$u.get(`/app/strategy/detail/${this.id}?assembleDetail=true`).then((res) => {
					if(res.code == 200){
						this.globj = res.data
						this.dongtaiflag = false
						// 按dayNumber分组strategyDetails
						this.groupedStrategyDetails = this.groupStrategyDetailsByDay(res.data.strategyDetails)
						// 更新itinerary数据，使用分组后的数据
						this.updateItinerary(this.groupedStrategyDetails)
					}else if(res.msg == '攻略不存在'){
						this.dongtaiflag = true
					}
				})
			},
			// 按天数分组策略详情数据
			groupStrategyDetailsByDay(strategyDetails) {
				const grouped = {}
				strategyDetails.forEach(item => {
					const dayNumber = item.dayNumber
					if (!grouped[dayNumber]) {
						grouped[dayNumber] = []
					}
					grouped[dayNumber].push(item)
				})
				// 按天数排序
				const sortedGrouped = {}
				Object.keys(grouped).sort((a, b) => parseInt(a) - parseInt(b)).forEach(dayNumber => {
					sortedGrouped[dayNumber] = grouped[dayNumber]
				})
				return sortedGrouped
			},
			// 获取指定天数的数据
			getDayData(dayNumber) {
				return this.groupedStrategyDetails[dayNumber] || []
			},
			// 获取所有天数
			getAllDays() {
				return Object.keys(this.groupedStrategyDetails).map(day => parseInt(day)).sort((a, b) => a - b)
			},
			// 更新itinerary数据
			updateItinerary(groupedDetails) {
				this.itinerary = Object.keys(groupedDetails).map(dayNumber => {
					return {
						dayNumber: parseInt(dayNumber),
						items: groupedDetails[dayNumber].map(item => ({
							title: item.name || '景点',
							desc: item.description || '暂无描述',
							photos: item.photo ? item.photo.split(',').map(url => url.trim()) : [],
							bstId: item.bstId, // 保留 bstId 用于跳转
							bstType: item.bstType // 保留 bstType 用于判断类型
						}))
					}
				}).sort((a, b) => a.dayNumber - b.dayNumber)
			},
			// 预览图片
			previewImage(current, urls) {
				uni.previewImage({
					current: current, // 当前显示图片的http链接
					urls: urls, // 需要预览的图片http链接列表
					success: function (res) {
						console.log('预览图片成功')
					},
					fail: function (err) {
						console.log('预览图片失败', err)
					}
				})
			},
			// 跳转到景点详情页
			goToScenicSpot(id) {
				if (this.globj.isMultiArea == true) {
					uni.navigateTo({
						url: '/page_fenbao/remenxq?id=' + id
					})
				}else{
					uni.navigateTo({
						url: '/page_fenbao/gonglue/jingdianxq?id=' + id
					})
				}
			},
			// 处理景点/酒店点击跳转
			handlePoiClick(poi) {
				// 只有 bstType 为 2（景点）或 3（酒店）且有 bstId 时才跳转
				if (!poi.bstId) {
					return
				}
				if (poi.bstType == 2) {
					// 跳转到景点详情
					uni.navigateTo({
						url: '/page_fenbao/gonglue/jingdianxq?id=' + poi.bstId
					})
				} else if (poi.bstType == 3) {
					// 跳转到酒店详情
					uni.navigateTo({
						url: '/page_fenbao/jiudian/jiudianxq?id=' + poi.bstId
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page { background: #fff; }
	.page { background: #fff; min-height: 100vh; }
	/* 顶部大图 */
	.hero { 
		width: 100%; 
		height: 420rpx; 
		overflow: hidden;
		position: relative;
		.hero-swiper {
			width: 100%;
			height: 100%;
		}
		.hero-img { 
			width: 100%; 
			height: 100%; 
		}
		.sc {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			z-index: 10;
		}
	}
	/* 基本信息 */
	.base-info {
		padding: 30rpx;
		padding-bottom: 0;
		.title-row {
			display: flex; align-items: center; justify-content: space-between;
			.left {
				.name { font-size: 52rpx; font-weight: 700; color: #262B37; }
				.meta { margin-top: 8rpx; font-size: 28rpx; color: #3D3D3D; }
			}
			.actions { display: flex; gap: 30rpx;align-items: flex-end; }
			.act { padding: 8rpx 16rpx; border: 1rpx solid #e6e6e6; border-radius: 28rpx; font-size: 28rpx; color: #333; }
		}
		.tags {
			margin-top: 20rpx; display: flex; gap: 16rpx; flex-wrap: wrap;
			.tag { padding: 8rpx 18rpx; background: #f6f7f9; color: #555; font-size: 26rpx; border-radius: 28rpx; }
		}
		.tags-container {
			margin-top: 20rpx;
			display: flex;
			gap: 16rpx;
			flex-wrap: wrap;
		}
		.tag-item {
			padding: 8rpx 20rpx;
			background: #e8f5e9;
			color: #10b981;
			font-size: 26rpx;
			border-radius: 20rpx;
			border: 1rpx solid #a5d6a7;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}
		.gallery { margin-top: 20rpx; white-space: nowrap; height: 140rpx; 
			.g-img { width: 200rpx; height: 140rpx; border-radius: 12rpx; margin-right: 16rpx; }
		}
	}
	/* 区块标题 */
	.section { padding: 10rpx 30rpx 40rpx; }
	.sec-title { font-size: 32rpx; font-weight: 700; color: #262B37; padding: 20rpx 0; }
	/* 简介 */
	.intro .intro-text { font-size: 26rpx; color: #555; line-height: 1.8; background: #f8f9fb; padding: 28rpx; border-radius: 16rpx; }
	/* 精选景点 */
	.picks .picks-scroll { white-space: nowrap; }
	.pick-item { display: inline-flex; flex-direction: column; margin-right: 20rpx; }
	.pick-img { border-radius: 12rpx; }
	.pick-name { margin-top: 10rpx; font-size: 26rpx; color: #666; text-align: center; }
	/* 行程概览 */
	.overview .overview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16rpx; }
	.ov-item { background: #f6f7f9; border-radius: 12rpx; padding: 18rpx; }
	.ov-k { font-size: 26rpx; color: #7a7f8a; }
	.ov-v { margin-top: 6rpx; font-size: 28rpx; color: #262B37; font-weight: 600; }
	/* Day tabs */
	.day-tabs { display: flex; gap: 20rpx; padding-top: 0; }
	.day-tabs .tab { padding: 10rpx 26rpx; border-radius: 999rpx; background: #f2fbf6; color: #20b26b; font-size: 28rpx; }
	.day-tabs .tab.active { background: #20b26b; color: #fff; }
	/* 时间轴 */
	.timeline { position: relative; }
	.day-block { position: relative; padding-left: 90rpx; }
	.day-block:before { content: ''; position: absolute; left: 40rpx; top: 0; bottom: 0; width: 2rpx; background: #e0f3e9; }
	.day-head { display: flex; align-items: center; margin: 10rpx 0 20rpx; }
	.day-num { width: 64rpx; height: 64rpx; border-radius: 8rpx; background: #20b26b; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; left: 8rpx; box-shadow: 0 4rpx 12rpx rgba(32,178,107,0.3); }
	.day-num .big { font-size: 26rpx; line-height: 26rpx; }
	.day-num .small { font-size: 18rpx; opacity: 0.9; }
	.day-text { margin-left: 10rpx; }
	.d-title { font-size: 30rpx; font-weight: 600; color: #262B37; }
	.d-sub { font-size: 28rpx; color: #7a7f8a; margin-top: 6rpx; }
	.day-list { display: flex; flex-direction: column; gap: 26rpx; margin-bottom: 36rpx; }
	.poi { display: flex; gap: 16rpx; position: relative; }
	.poi-icon { position: absolute; left: 18rpx; top: 18rpx; font-size: 26rpx; color: #20b26b; }
	.poi-card { flex: 1; background: #fff; border-radius: 16rpx; padding: 20rpx; box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06); }
	.poi-title { font-size: 28rpx; font-weight: 600; color: #262B37; }
	.poi-desc { margin-top: 8rpx; font-size: 28rpx; color: #666; line-height: 1.6; }
	.poi-photos { margin-top: 12rpx; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12rpx; }
	.pimg { width: 100%; height: 160rpx; border-radius: 10rpx; }
	/* 信息卡 */
	.info-card { padding: 18rpx 26rpx; background: #fff; border-radius: 16rpx; margin: -40rpx 20rpx 6rpx; box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.06); border: 2rpx solid #eef0f3; }
	.info-card.float { position: relative; z-index: 2; }
	.title-wrap { display: flex; justify-content: space-between; align-items: center; }
	.title-left .cn { font-size: 32rpx; font-weight: 800; color: #1f2a37; }
	.title-left .en { margin-top: 6rpx; font-size: 20rpx; color: #9aa4b2; letter-spacing: 2rpx; }
	.title-left .sub { margin-top: 8rpx; font-size: 26rpx; color: #8a949e; }
	.title-right { display: flex; gap: 12rpx; }
	.ic { width: 48rpx; height: 48rpx; border-radius: 10rpx; background: #f3f4f6; border: 2rpx solid #eef0f3; display: flex; align-items: center; justify-content: center; color: #374151; }
	/* 小节标题 */
	.section-block { padding: 10rpx 20rpx 20rpx; }
	.section-hd { display: flex; align-items: center; gap: 12rpx; margin: 18rpx 2rpx; }
	.section-hd .dot { width: 8rpx; height: 28rpx; background: #111827; border-radius: 4rpx; }
	.section-hd .txt { font-size: 36rpx; font-weight: 800; color: #111827; }
	.section-hd .more { margin-left: auto; font-size: 26rpx; color: #3D3D3D; }
	.para { font-size: 28rpx; color: #4b5563; line-height: 1.8; }
	/* 精选景点 */
	.thumbs { display: flex; gap: 16rpx; overflow: scroll;padding-bottom: 20rpx;}
	.thumb-item { width: 210rpx; cursor: pointer; }
	.thumb-img { border-radius: 12rpx; border: 2rpx solid #eef0f3; }
	.thumb-name { margin-top: 8rpx; text-align: center; color: #6b7280; font-size: 26rpx; }
	/* 行程概览 */
	.kv-row { display: flex; align-items: center; background: #f1f6ff; border-radius: 12rpx; padding: 16rpx; margin-bottom: 10rpx; border: 2rpx solid #cfe0ff; }
	.kv { flex: 1; display: flex; justify-content: space-between; align-items: baseline; }
	.k { font-size: 26rpx; color: #6f7c96; }
	.v { font-size: 26rpx; color: #24324a; font-weight: 700; }
	.divider { width: 1rpx; height: 28rpx; background: #ccd9f5; margin: 0 16rpx; }
	.facts { margin-top: 10rpx; display: grid; grid-template-columns: 1fr; gap: 10rpx; }
	.fact { display: flex; align-items: center; gap: 10rpx; color: #405072; font-size: 28rpx; }
	.fact image{ width: 28rpx; height: 28rpx; }
	.f-ic { color: #3a6fd9; }
	/* Day tabs 下划线风格 */
	.day-tabs.underline { display: flex; gap: 40rpx; padding: 4rpx 26rpx 8rpx; }
	.day-tabs.underline .tab { font-size: 26rpx; color: #6f7c96; padding-bottom: 10rpx; }
	.day-tabs.underline .tab.active { color: #24324a; font-weight: 700; border-bottom: 4rpx solid #3a6fd9; }
	/* 新版时间轴（蓝色） */
	.timeline3 { padding-top: 8rpx; }
	.timeline3 .row { display: flex; }
	.timeline3 .left { width: 120rpx; align-items: center; display: flex; flex-direction: column; }
	.timeline3 .n { font-size: 40rpx; font-weight: 800; color: #3a6fd9; }
	.timeline3 .d { font-size: 20rpx; color: #3a6fd9; margin-top: -6rpx; }
	.timeline3 .vl { width: 2rpx; flex: 1; background: #d7e6ff; margin-top: 12rpx; }
	.timeline3 .right { flex: 1; padding-bottom: 26rpx; }
	.rt-title { font-size: 28rpx; font-weight: 800; color: #24324a; }
	.rt-sub { font-size: 28rpx; color: #6f7c96; margin-top: 6rpx; }
	.poi-card3 { margin-top: 18rpx; background: #fff; border-radius: 12rpx; padding: 18rpx; box-shadow: 0 4rpx 14rpx rgba(0,0,0,0.06); border: 2rpx solid #e6efff; }
	.poi-hd { display: flex; align-items: center; gap: 10rpx; }
	.poi-hd .sq { width: 16rpx; height: 16rpx; background: #3a6fd9; border-radius: 4rpx; }
	.poi-hd .t { font-size: 32rpx; font-weight: 700; color: #24324a; }
	.poi-desc { margin-top: 6rpx; font-size: 28rpx; color: #56617a; line-height: 1.8; }
	.grid-3 { margin-top: 12rpx; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10rpx; }
	.gimg { border-radius: 10rpx; border: 2rpx solid #e6efff; }
	/* 行程概览：四行列表 */
	.list { display: flex; flex-direction: column; gap: 14rpx; }
	.fact { display: flex; align-items: center; gap: 12rpx; font-size: 28rpx; color: #4b5563; }
	.f-ic { color: #10b981; }
	.f-btn { margin-left: auto; font-size: 26rpx; color: #10b981; }
	.spot-link { color: #3a6fd9; cursor: pointer; }
	/* Day tabs 绿色下划线 */
	.day-tabs.underline.g { display: flex; gap: 40rpx; padding: 6rpx 20rpx 8rpx; }
	.day-tabs.underline.g .tab { font-size: 26rpx; color: #6b7280; padding-bottom: 10rpx; }
	.day-tabs.underline.g .tab.active { color: #111827; font-weight: 700; border-bottom: 4rpx solid #10b981; }
	/* 时间轴（黑灰） */
	.timeline4 { padding-top: 6rpx; }
	.timeline4 .row { display: flex; }
	.timeline4 .left { width: 66rpx; align-items: center; display: flex; flex-direction: column; }
	.timeline4 .n { font-size: 40rpx; font-weight: 800; color: #111827; }
	.timeline4 .d { font-size: 20rpx; color: #6b7280; margin-top: -6rpx; }
	.timeline4 .vl { width: 2rpx; flex: 1; background: #e5e7eb; margin-top: 12rpx; }
	.timeline4 .right { flex: 1; padding-bottom: 26rpx; padding-left: 6rpx; }
	.rt-title { font-size: 28rpx; font-weight: 800; color: #111827; }
	.rt-sub { font-size: 28rpx; color: #6b7280; margin-top: 6rpx; }
	.poi-card4 { margin-top: 18rpx; background: #fff; border-radius: 12rpx; padding: 18rpx; }
	.poi-hd { display: flex; align-items: center; gap: 10rpx; }
	.poi-hd .sq { width: 16rpx; height: 16rpx; background: #10b981; border-radius: 4rpx; }
	.poi-hd .t { font-size: 32rpx; font-weight: 700; color: #111827; }
	.poi-hd .t.link-text { color: #10b981; text-decoration: underline; cursor: pointer; }
	.poi-desc { margin-top: 6rpx; font-size: 28rpx; color: #4b5563; line-height: 1.8; }
	.grid-3 { margin-top: 12rpx; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10rpx; }
	.gimg { border-radius: 10rpx; border: 2rpx solid #f3f4f6; }
</style>