<template>
	<zzx-navbar :scrollable="true" :back="true" title="详情"></zzx-navbar>
	<view class="detail-header">
		<image class="header-bg"
			src="https://ts1.tc.mm.bing.net/th/id/R-C.a8553f142638e741396e386b43c2bca7?rik=dzSGk6XRsxAAsQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50062%2f5890.jpg_wh1200.jpg&ehk=BgxiqxvzoNQd0pZHWV4VPOMbYgqM76WDMt8RDzCjoYY%3d&risl=&pid=ImgRaw&r=0"
			mode="widthFix"></image>
		<view class="back-icon" :style="{paddingTop:(statusBarHeight+10)+'px'}" @click="RouterUtils.back()">
			<zzx-icon name="back"></zzx-icon>
		</view>
		<view :style="{height:(statusBarHeight+70)+'px'}"></view>
		<scroll-view class="header-swiper content" scroll-x="true" :show-scrollbar="false">
			<view class="swiper-inner">
				<video src="https://vod.v.jstv.com/2025/05/09/JSTV_JSGGNEW_1746791056693_2lBi96K_114.mp4"></video>
				<image v-for="item in 4"
					src="https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650"
					mode=""></image>
			</view>
		</scroll-view>
	</view>
	<view :style="{height:(statusBarHeight+34)+'px'}"></view>
	<view class="header-info">
		<view class="venue-name">
			<view class="name">观山湖区第十二小学</view>
			<view class="star">
				<zzx-icon name="star" size="12"></zzx-icon>
				<text>4.8</text>
			</view>
		</view>
		<view class="open-time">
			<view class="open-status">开放中</view>
			<view class="time">
				<view class="">教学日 10：00-22：00</view>
				<view class="">非教学日 10：00-22：00</view>
			</view>
		</view>
		<view class="venues-tags">
			<view class="tags-box">
				<view class="tags" v-for="item in 4">无烟环境</view>
			</view>
			<view class="more-info" @click="RouterUtils.to_page('/pages/index/basisInfo/index')">
				<text>信息/设备设施</text>
				<zzx-icon name="ashRight" size="10"></zzx-icon>
			</view>
		</view>
		<view class="venues-address">
			<view class="address">
				<zzx-icon name="location" size="14"></zzx-icon>
				<text>印象城购物中心6楼</text>
			</view>
			<view class="nav-phone">
				<view class="nav" @click="open_map">
					<zzx-icon name="navigation" size="14"></zzx-icon>
					<view class="">导航</view>
				</view>
				<view class="phone" @click="open_phone">
					<zzx-icon name="phone" size="14"></zzx-icon>
					<view class="">电话</view>
				</view>
			</view>
		</view>
	</view>
	<view class="content">
		<uv-sticky offset-top="74">
			<view class="detail-select">
				<view :class="sel_index===index?'select-text':'notsel-text'" v-for="(item,index) in selectList"
					:key="index" @click="sel_tab(index)">
					<text>{{item}}</text>
				</view>
			</view>
		</uv-sticky>
		<view id="detail">
			<view class="venue-select-card">
				<view class="v-caed-header">
					<view class="v-left">
						<zzx-icon name="venue-icon1" size="14"></zzx-icon>
						<view style="margin-bottom: 10rpx;">包场</view>
					</view>
					<view class="">
						开场前60分钟随时退
					</view>
					<view class="v-left" @click="RouterUtils.to_page('/pages/index/vr/index')">
						<zzx-icon name="venue-icon2" size="14"></zzx-icon>
						<view style="margin-bottom: 10rpx;">VR实景</view>
					</view>
				</view>
				<view class="v-select-infocard">
					<view class="select-btn">
						<view :class="sel_btn===index?'distance':'score'" v-for="(item,index) in selectList_btn"
							:key="index" @click="select_btn(index)">{{item}}</view>
					</view>
					<view class="info-card-list">
						<scroll-view scroll-x="true" class="scroll-view_H">
							<view class="item-card scroll-view-item_H" v-for="item in 6" @click="open_popup">
								<view class="today">今天(03-04)</view>
								<view class="time">最早19：00可订</view>
								<view class="price">￥58起</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			<view class="venue-card">
				<view class="card-title">
					<zzx-icon name="venue-icon3" size="14"></zzx-icon>
					<view class="">无固定场</view>
				</view>
				<view class="item-card" v-for="item in 2">
					<image src="https://img.shetu66.com/2023/06/13/1686646672844195.jpg" mode=""></image>
					<view class="venue-info">
						<view class="info-title">
							<view class="title textHidden">指定时段免费畅玩</view>
							<view class="sales">年售20</view>
						</view>
						<view class="type">
							篮球、足球、羽毛球
						</view>
						<view class="price-info">
							<view class="price">
								<view class="">￥58.9</view>
								<view class="">￥80.9</view>
							</view>
							<view class="price-btn" @click="RouterUtils.to_page('/pages/index/gymPay/index?type=1')">抢购
							</view>
						</view>
					</view>
					<view class="card-tips">
						<view class="item-tips">
							<text>购买须知</text>
							<zzx-icon name="ashRight" size="10"></zzx-icon>
						</view>
						<view class="item-tips">
							<text>服务保障</text>
							<zzx-icon name="ashRight" size="10"></zzx-icon>
						</view>
						<view class="item-tips">
							<text>用户评价</text>
							<zzx-icon name="ashRight" size="10"></zzx-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="course-card" id="notice">
			<view class="course-tips">
				<view class="">!</view>
				<view class="">全平台每种类型的运动课程只可免费试听一次</view>
			</view>
			<view class="select-btn">
				<view :class="sel_btn===index?'distance':'score'" v-for="(item,index) in selectList_btn" :key="index"
					@click="select_btn(index)">{{item}}</view>
			</view>
			<view class="venue-card" v-for="item in 2" @click="toCOurseDetail">
				<image src="https://img.keaitupian.cn/newupload/08/1629449018344288.jpg" mode=""></image>
				<view class="venue-info">
					<view class="info-title">
						<view class="title textHidden">小班体适能+篮球衔接小班体适能+篮球衔接...</view>
						<view class="sales">年售20</view>
					</view>
					<view class="type">
						篮球、足球、羽毛球
					</view>
					<view class="price">
						<view class="">￥58.9</view>
						<view class="">￥80.9</view>
					</view>
					<view class="price-info">
						<view class="sale">
							已售33 98%好评
						</view>
						<view class="price-btn" @click="RouterUtils.to_page('/pages/index/courseDetail/index?type=2')">免费试听
						</view>
					</view>
				</view>
			</view>
			<!-- <loading/> -->
			<view class="more">查看更多</view>
		</view>
		<view class="instructor-card" id="schedule">
			<view class="card-title">
				<view class="">教练(9)</view>
				<zzx-icon name="right" size="12"></zzx-icon>
			</view>
			<scroll-view class="header-swiper content" scroll-x="true" :show-scrollbar="false">
				<view class="swiper-box">
					<view class="swiper-inner" v-for="item in 12">
						<view class="header-img">
							<image src="https://img.keaitupian.cn/newupload/08/1629449018344288.jpg" mode=""></image>
							<image src="/src/static/badge.png" mode=""></image>
						</view>
						<view class="instructor-name">詹姆斯</view>
						<view class="instructor-specialty">篮球</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="appraise-card" id="appraise">
			<view class="appraise-title">
				<view class="title">评价</view>
				<view class="comments">
					<view class="a-star">
						<zzx-icon name="star" size="10"></zzx-icon>
						<text>4.8</text>
					</view>
					<view class="a-text">| 37人评论</view>
				</view>
			</view>
			<view class="appraise-info" v-for="item in 5">
				<view class="a-user-info">
					<view class="info">
						<image src="https://img.keaitupian.cn/newupload/08/1629449018344288.jpg" mode=""></image>
						<view class="name">詹姆斯</view>
					</view>
					<view class="time">03-20</view>
				</view>
				<view class="a-score">
					<text>4.0</text>
					<uni-rate :readonly="true" size="16" :value="2" />
				</view>
				<view class="a-content">
					詹姆四对孩子很有耐心，也非常照顾小朋友的情绪，
					值得推荐！
				</view>
				<scroll-view class="scroll-view_H" scroll-x="true" :show-scrollbar="false">
					<view class="scroll-view-item_H uni-bg-red" v-for="item in 5">
						<image src="https://img.keaitupian.cn/newupload/08/1629449018344288.jpg" mode=""></image>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
	<view style="position: relative;z-index: 99999;">
		<selPopup ref="openPopup" />
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, getCurrentInstance, nextTick } from 'vue';
	import { RouterUtils } from '@/utils/util';
	import zzxNavbar from '@/components/zzx-navbar/zzx-navbar.vue';
	import { onLoad, onPageScroll } from '@dcloudio/uni-app';
	import loading from '@/components/zzx-loading/zzx-loading.vue';
	import selPopup from './components/popup.vue';
	const openPopup = ref(null);
	const statusBarHeight = ref(0);
	const sectionTops = ref<number[]>([]);
	const isScrollingByTab = ref(false);
	const scrollTimer = ref<any>(null);
	const selectList = ref(['场地', '课程', '教练', '评价']);
	const sel_index = ref(0);
	const selectList_btn = ref(['篮球', '羽毛球', '乒乓球', '网球']);
	const sel_btn = ref(0);
	const instance = getCurrentInstance();
	onMounted(() => {
		get_navheight()
		nextTick(() => {
			setTimeout(() => getSectionsTop(), 300);
		});
	})
	const get_navheight = () => {
		const systemInfo = uni.getSystemInfoSync();
		statusBarHeight.value = systemInfo.statusBarHeight || 0;
	}

	// 打开选场弹窗
	const open_popup = () => {
		openPopup.value?.open()
	}

	// 获取所有模块的位置信息
	const getSectionsTop = () => {
		const ids = ['detail', 'notice', 'schedule', 'appraise'];
		const query = uni.createSelectorQuery().in(instance.proxy);
		ids.forEach(id => {
			query.select(`#${id}`).boundingClientRect();
		});
		query.exec((rects) => {
			// 计算各模块相对于页面顶部的距离
			sectionTops.value = rects.map((rect : any) => rect.top - 130);
		})
	};
	//滚动事件
	onPageScroll((e) => {
		if (isScrollingByTab.value) return;
		if (scrollTimer.value) return;
		scrollTimer.value = setTimeout(() => {
			updateActiveTab(e.scrollTop);
			scrollTimer.value = null;
		}, 100);
	});
	// 根据滚动位置更新激活的Tab
	const updateActiveTab = (scrollTop : number) => {
		const offset = 130;
		const scrollPosition = scrollTop + offset;
		let activeIndex = 0;
		for (let i = 0; i < sectionTops.value.length; i++) {
			if (scrollPosition >= sectionTops.value[i]) {
				activeIndex = i;
			} else {
				break; // 模块位置已排序，可提前结束
			}
		}
		if (sel_index.value !== activeIndex) {
			sel_index.value = activeIndex;
		}
	};

	const select_btn = (i) => {
		sel_btn.value = i
	}
	const sel_tab = async (i : number) => {
		isScrollingByTab.value = true; // 标记为Tab点击触发的滚动
		sel_index.value = i;
		const ids = ['detail', 'notice', 'schedule', 'appraise'];
		const id = ids[i];
		await scrollToTop();
		await nextTick();
		const query = uni.createSelectorQuery().in(instance.proxy);
		query.select(`#${id}`).boundingClientRect(data => {
			if (!data) return;
			uni.pageScrollTo({
				scrollTop: data.top - 130,
				duration: 500,
				complete: () => {
					setTimeout(() => {
						isScrollingByTab.value = false;
					}, 300);
				}
			});
		}).exec();
	}

	// 滚动到顶部
	const scrollToTop = () => {
		return new Promise(resolve => {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0,
				success: resolve
			});
		});
	}

	// 打开地图
	const open_map = () => {
		uni.openLocation({
			latitude: 26.616152,
			longitude: 106.598450,
			success: function () {
				console.log('success');
			}
		});
	}

	// 拨打电话
	const open_phone = () => {
		uni.makePhoneCall({
			phoneNumber: '028-87776666' //仅为示例
		})
	}
</script>

<style lang="less" scoped>
	.detail-header {
		position: relative;

		.header-bg {
			position: absolute;
			width: 100%;
			z-index: -100;
		}

		.back-icon {
			position: absolute;
			left: 20rpx;
			z-index: 9999;
		}

		.header-swiper {
			position: absolute;
			width: 740rpx;
			white-space: nowrap;
			overflow: hidden;

			/* 隐藏滚动条 */
			/deep/ ::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				background: transparent;
			}

			.swiper-inner {
				display: inline-flex;
				align-items: center;
				gap: 14rpx;
				height: 100%;

				&>video,
				&>image {
					width: 220rpx;
					height: 126rpx;
					border-radius: 16rpx;
					flex-shrink: 0;
				}
			}
		}
	}

	.header-info {
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 0rpx 0rpx;

		.venue-name {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.name {
				font-weight: 800;
				font-size: 32rpx;
				color: #222222;
			}

			.star {
				display: flex;
				align-items: center;
				gap: 10rpx;
				font-size: 28rpx;
				color: #FDD143;
			}
		}

		.open-time {
			display: flex;
			align-items: center;
			gap: 20rpx;
			margin-top: 20rpx;

			.open-status {
				font-size: 24rpx;
				color: #4DD951;
			}

			.time {
				display: flex;
				align-items: center;
				gap: 20rpx;
				font-size: 24rpx;
				color: #AAAAAA;
			}
		}

		.venues-tags {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;

			.tags-box {
				display: flex;
				flex-wrap: wrap;
				gap: 10rpx;

				.tags {
					padding: 8rpx 16rpx;
					font-size: 24rpx;
					color: #222222;
					background: #F5F5F5;
					border-radius: 8rpx;
				}
			}

			.more-info {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				gap: 6rpx;
				color: #AAAAAA;
			}
		}

		.venues-address {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			background: #F9F9F9;
			border-radius: 16rpx;
			padding: 20rpx;

			.address {
				display: flex;
				align-items: center;
				gap: 10rpx;
				font-weight: bold;
				font-size: 24rpx;
				color: #222222;
			}

			.nav-phone {
				display: flex;
				align-items: center;
				gap: 20rpx;
				text-align: center;

				.nav,
				.phone {
					font-size: 22rpx;
					color: #222222;
				}
			}
		}
	}

	.detail-select {
		display: flex;
		align-items: center;
		gap: 60rpx;
		margin-top: 20rpx;
		height: 80rpx;
		background-color: #F6F6F6;

		.select-text,
		.notsel-text {
			position: relative;
			transition: all 0.3s ease;
		}

		.select-text {
			font-weight: 800;
			font-size: 32rpx;
			color: #222222;
			position: relative;
		}

		.notsel-text {
			font-size: 32rpx;
			color: #AAAAAA;
		}

		.select-text::after {
			position: absolute;
			content: '';
			width: 40rpx;
			height: 20rpx;
			background-color: #C8FF0C;
			border-radius: 4rpx;
			left: 050%;
			transform: translateX(-50%);
			bottom: -16rpx;
			transition: all 0.3s ease;
			opacity: 1;
		}

		.notsel-text::after {
			content: '';
			position: absolute;
			left: 50%;
			bottom: -16rpx;
			width: 0;
			height: 20rpx;
			background-color: #C8FF0C;
			border-radius: 4rpx;
			transform: translateX(-50%);
			opacity: 0;
			transition: all 0.3s ease;
		}
	}

	.venue-select-card {
		padding: 20rpx;
		background: linear-gradient(180deg, #FCFFF1 0%, #FFFFFF 100%);
		border-radius: 32rpx;

		.v-caed-header {
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 80rpx;
			font-size: 24rpx;
			color: #AAAAAA;
			border-bottom: 2rpx solid #F0F0F0;

			.v-left {
				display: flex;
				align-items: center;
				gap: 10rpx;
			}
		}

		.v-select-infocard {
			.select-btn {
				display: flex;
				align-items: center;
				gap: 20rpx;
				margin-top: 20rpx;

				.distance {
					width: 92rpx;
					height: 36rpx;
					background: #C8FF0C;
					border-radius: 8rpx;
					font-size: 24rpx;
					color: #222222;
					line-height: 34rpx;
					text-align: center;
				}

				.score {
					width: 92rpx;
					height: 36rpx;
					background: #F5F5F5;
					border-radius: 8rpx;
					font-size: 24rpx;
					color: #AAAAAA;
					line-height: 34rpx;
					text-align: center;
				}
			}

			.info-card-list {
				margin-top: 20rpx;

				.scroll-view_H {
					white-space: nowrap;
					width: 100%;

					.item-card {
						width: 200rpx;
						height: 132rpx;
						padding: 20rpx;
						background: #F6F6F6;
						border-radius: 16rpx;
						display: inline-block;
						margin-right: 16rpx;

						.today {
							font-size: 24rpx;
							color: #222222;
						}

						.time {
							margin-top: 12rpx;
							font-size: 24rpx;
							color: #222222;
						}

						.price {
							margin-top: 12rpx;
							font-weight: bold;
							font-size: 28rpx;
							color: #FB5B5B;
						}
					}
				}
			}
		}

	}

	.venue-card {
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		margin-top: 20rpx;

		.card-title {
			display: flex;
			align-items: center;
			gap: 10rpx;
			font-size: 24rpx;
			color: #AAAAAA;

			&>view {
				margin-bottom: 10rpx;
			}
		}

		.item-card {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 20rpx;

			&>image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 32rpx;
			}

			.venue-info {
				width: 430rpx;

				.info-title {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title {
						width: 340rpx;
						font-weight: 800;
						font-size: 32rpx;
						color: #222222;
					}

					.sales {
						font-size: 22rpx;
						color: #AAAAAA;
					}
				}

				.type {
					margin-top: 16rpx;
					font-size: 24rpx;
					color: #AAAAAA;
				}

				.price-info {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 16rpx;

					.price {
						display: flex;
						align-items: center;
						gap: 20rpx;

						&>view:nth-child(1) {
							font-weight: bold;
							font-size: 28rpx;
							color: #FB5B5B;
						}

						&>view:nth-child(2) {
							font-size: 22rpx;
							color: #AAAAAA;
							text-decoration: line-through;
						}
					}

					.price-btn {
						width: 152rpx;
						height: 48rpx;
						background: #C8FF0C;
						border-radius: 8rpx;
						font-weight: bold;
						font-size: 28rpx;
						color: #222222;
						text-align: center;
						line-height: 48rpx;
					}
				}
			}

			.card-tips {
				display: flex;
				align-items: center;
				gap: 40rpx;
				flex-basis: 100%;
				height: 60rpx;
				border-bottom: 1rpx solid #F0F0F0;

				.item-tips {
					display: flex;
					align-items: center;
					gap: 10rpx;
					font-size: 22rpx;
					color: #222222;
				}
			}
		}
	}

	.course-card {
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		margin-top: 20rpx;

		.course-tips {
			display: flex;
			align-items: center;
			gap: 10rpx;
			font-size: 24rpx;
			color: #999999;

			&>view:first-child {
				width: 32rpx;
				height: 32rpx;
				background: #FFA347;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #FFFFFF;
			}
		}

		.select-btn {
			display: flex;
			align-items: center;
			gap: 20rpx;
			margin-top: 20rpx;

			.distance {
				width: 92rpx;
				height: 36rpx;
				background: #C8FF0C;
				border-radius: 8rpx;
				font-size: 24rpx;
				color: #222222;
				line-height: 34rpx;
				text-align: center;
			}

			.score {
				width: 92rpx;
				height: 36rpx;
				background: #F5F5F5;
				border-radius: 8rpx;
				font-size: 24rpx;
				color: #AAAAAA;
				line-height: 34rpx;
				text-align: center;
			}
		}

		.venue-card {
			display: flex;
			align-items: center;
			gap: 20rpx;
			margin-top: 20rpx;

			&>image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 32rpx;
			}

			.venue-info {
				width: 430rpx;
				height: 220rpx;
				border-bottom: 1rpx solid #F0F0F0;

				.info-title {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title {
						width: 340rpx;
						font-weight: 800;
						font-size: 32rpx;
						color: #222222;
					}

					.sales {
						font-size: 22rpx;
						color: #AAAAAA;
					}
				}

				.type {
					margin-top: 16rpx;
					font-size: 24rpx;
					color: #AAAAAA;
				}

				.price {
					display: flex;
					align-items: center;
					gap: 20rpx;
					margin-top: 16rpx;

					&>view:nth-child(1) {
						font-weight: bold;
						font-size: 28rpx;
						color: #FB5B5B;
					}

					&>view:nth-child(2) {
						font-size: 22rpx;
						color: #AAAAAA;
						text-decoration: line-through;
					}
				}

				.price-info {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.sale {
						font-size: 24rpx;
						color: #AAAAAA;
					}

					.price-btn {
						width: 152rpx;
						height: 48rpx;
						background: #C8FF0C;
						border-radius: 8rpx;
						font-weight: bold;
						font-size: 28rpx;
						color: #222222;
						text-align: center;
						line-height: 48rpx;
					}
				}
			}
		}

		.more {
			margin: auto;
			width: 100rpx;
			margin-top: 20rpx;
			text-align: center;
			font-size: 24rpx;
			color: #CCCCCC;
			position: relative;
		}

		.more::after {
			position: absolute;
			bottom: -10rpx;
			left: 25rpx;
			content: '';
			width: 38rpx;
			height: 4rpx;
			border-radius: 2rpx;
			background-color: #CCCCCC;
		}
	}

	.instructor-card {
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		margin-top: 20rpx;
		overflow: hidden;

		.card-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: 800;
			font-size: 32rpx;
			color: #222222;
		}

		.header-swiper {
			margin-top: 24rpx;
			width: 700rpx;
			white-space: nowrap;
			overflow: hidden;

			/* 隐藏滚动条 */
			/deep/ ::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				background: transparent;
			}

			.swiper-box {
				display: flex;
				align-items: center;
				gap: 44rpx;

				.swiper-inner {
					width: 100rpx;
					text-align: center;

					.header-img {
						position: relative;

						image {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;

							&:nth-child(2) {
								position: absolute;
								bottom: 0;
								right: 0;
								width: 36rpx;
								height: 36rpx;
							}
						}
					}

					.instructor-name {
						font-size: 28rpx;
						font-weight: 600;
					}

					.instructor-specialty {
						font-size: 22rpx;
						color: #AAAAAA;
					}
				}
			}

		}
	}

	.appraise-card {
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		margin-top: 20rpx;

		.appraise-title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				font-weight: 800;
				font-size: 32rpx;
				color: #222222;
			}

			.comments {
				display: flex;
				align-items: center;
				gap: 16rpx;

				.a-star {
					font-size: 24rpx;
					color: #FDD143;
				}

				.a-text {
					font-size: 24rpx;
					color: #AAAAAA;
				}
			}
		}

		.appraise-info {
			margin-top: 20rpx;

			.a-user-info {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.info {
					display: flex;
					align-items: center;
					gap: 20rpx;

					&>image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
					}

					.name {
						font-weight: bold;
						font-size: 24rpx;
						color: #222222;
					}
				}

				.time {
					font-size: 24rpx;
					color: #AAAAAA;
				}
			}

			.a-score {
				font-size: 24rpx;
				color: #AAAAAA;
				display: flex;
				align-items: center;
				gap: 20rpx;
				margin-top: 20rpx;
			}

			.a-content {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #222222;
			}

			.scroll-view_H {
				white-space: nowrap;
				width: 100%;
				height: 220rpx;
				margin-top: 20rpx;
				border-bottom: 1rpx solid #F0F0F0;

				.scroll-view-item_H {
					display: inline-block;
					text-align: center;
					margin-right: 14rpx;

					&>image {
						width: 202rpx;
						height: 200rpx;
						background: #D8D8D8;
						border-radius: 32rpx;
					}
				}
			}
		}
	}
</style>