<template>
	<view class="box flex justify-start flex-column align-items">
		<view class="swiper">
			<u-swiper :list="detail.images" indicator indicatorMode="line" height="450rpx" circular></u-swiper>
		</view>
		<view class="con-center w-100 flex justify-center flex-column align-items flex-start">
			<view class="first-box flex flex-start flex-column justify-start">
				<span class="first-name">{{detail.title}}</span>
				<view class="flex w-100  align-items" style="margin-top:28rpx;justify-content: space-between;">
					<span class="first-money" v-if="detail.feel == 0" style="font-size: 28rpx;">￥{{detail.price}}<span
							class="wangqi">(往期课程)</span></span>
					<span class="first-money" v-if="detail.feel == 1">免费<span class="wangqi">(往期课程)</span></span>

					<view class="flex align-items justify-center"
						style="width: 30%;justify-content: flex-end;margin-right: 24rpx;">
						<!-- <span
							class="first-mine">{{ Number(detail.sign_num + detail.virtual_num)}}/{{detail.limit_num}}</span> -->
							<span
								class="first-mine">{{detail.limit_num}}/{{detail.limit_num}}</span>
						<span class="first-txt">名额</span>
						<image src="../../static/center/minge.png" mode="" class="icon-size"></image>
					</view>
				</view>
				<span class="line"></span>
				<span class="first-image flex align-items"
					@click.stop="toMap(detail.latitude,detail.longitude,detail.address_detail)">
					<image src="../../static/center/address.png" mode="" class="icon-size"></image>
					{{detail.address_detail}}
				</span>
				<span class="first-image flex align-items" @click.stop="callPhone(detail.user.mobile)"
					v-if="detail.user.mobile">
					<image src="../../static/tel.png" mode="" class="icon-size"></image>
					<!-- <span>{{detail.user.realname || detail.user.nickname || '未知'}}/{{detail.user.mobile || '未知'}}</span> -->
					<span>{{mobile}}</span>
				</span>
				<span class="first-image flex align-items" @click.stop="callPhone(detail.user.mobile)">
					<span>联系客服</span>
				</span>
				<span class="line"></span>
				<view class="flex flex-column gj">
					<span class="title">
						<span style="font-size: 32rpx;">
							共计{{formattedTimeList.length}}节
						</span>
						<span style="margin-left: 12rpx;">
							({{formattedTime.formattedTime}})
						</span>
					</span>
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="flex flex-column align-items scroll">
						<span v-for="(item,index) in formattedTimeList" :key="index"> {{ item.formattedTime }}</span>
					</scroll-view>
				</view>
				<!-- <span class="first-image flex align-items">
					<image src="../../static/center/class.png" mode="" class="icon-size"></image>
					<span>课时安排</span>
					<image src="../../static/my/right.png" mode="" style="width: 24rpx;height: 24rpx;margin-left: 12rpx;"></image>
				</span> -->
			</view>
			<!-- 课程详情 -->
			<view class="six flex flex-column" style="justify-content: flex-start;">
				<view class="six-header flex align-items space-between">
					<image src="../../static/center/kecheng.png" mode="" style="width: 168rpx; height: 48rpx;"></image>
				</view>
				<view class="six-center flex first-txt  flex-column">
					<!-- <rich-text :nodes="detail.content" style="width: 100%;" :tagStyle="style"></rich-text> -->
					<u-parse :content="detail.content" :tagStyle="style"></u-parse>
					<!-- <view class="s-header flex justify-start flex-column">
						<span>单门课程报名费用：499元/10小时，共5节课</span>
						<span>上课时间：每周对应固定时间晚上19：00-21：00</span>
						<span>上课人数：每门课程10人起</span>
						<span>上课地点：</span>
						<span>洛阳市老城区同化街1654号</span>
					</view>
					<image src="../../static/center/detail.png" mode="" style="width: 644rpx; height: 1054rpx;"></image> -->
				</view>
			</view>

			<!-- 课程须知 -->
			<view class="six flex flex-column" style="justify-content: flex-start;background: white;">
				<view class="six-header flex align-items space-between">
					<image src="../../static/center/xuzhi.png" mode="" style="width: 168rpx; height: 48rpx;"></image>
				</view>
				<view class="six-center flex first-txt  flex-column">
					<u-parse :content="detail.notice" :tagStyle="style"></u-parse>
					<!-- <rich-text :nodes="detail.notice" style="width: 100%;" :tagStyle="style"></rich-text> -->

				</view>
			</view>
			<view class="four flex justify-start align-items flex-column">
				<view class="four-box flex justify-start align-items w-100" @click="toTeacher(detail.teacher.id)">
					<view class="four-header flex align-items w-100" style="justify-content: space-between;">
						<view class="flex align-items" style="justify-content: start; width: 70%;">
							<image :src="detail.teacher.head_image" mode="" style="width: 100rpx; height: 125rpx;">
							</image>
							<span class="flex justify-center flex-column"
								style="align-items: flex-start;margin-left: 18rpx;">
								<span class="four-name">{{detail.teacher.name}}</span>
								<span class="jigou">{{detail.shop.name}}</span>
								<span class="flex align-items rate">
									<u-rate :count="count" active-color="#FFBC2C" v-model="detail.teacher.teacher_star"
										allowHalf="true" readonly></u-rate>
									{{detail.teacher.teacher_star}}分
								</span>

							</span>
						</view>
						<view class="four-right flex flex-column align-items">
							<image src="../../static/center/teacher.png" mode="" style="width: 168rpx; height: 48rpx;">
							</image>
							<span class="teacher-detail flex align-items">教师详情
								<image src="../../static/center/right.png" mode="" style="width: 24rpx; height: 24rpx;">
								</image>
							</span>
						</view>

					</view>
				</view>
				<span class="line" style="width: 93%;"></span>
				<span class="tt-detail flex ">
					<span>教师简介:</span>
					<!-- <span v-html="detail.teacher.content"></span> -->
					<u-parse :content="detail.teacher.content"></u-parse>
				</span>
			</view>
			<!-- 机构 -->
			<view class="five flex align-items">
				<view class="five-box flex ">
					<view class="five-left flex align-items" style="justify-content: space-around;"
						@click="toMeDetail()">
						<image :src="detail.shop.logo" mode="" style="width: 78rpx; height: 78rpx;">
						</image>
						<span class="flex flex-column justify-center"
							style="align-items: left; margin-left: 24rpx;width: 550rpx;">
							<span class="five-name">{{detail.shop.name}}</span>
							<span class="five-address white-space">{{detail.shop.address_detail}}</span>
						</span>
					</view>
					<!-- <span class="five-right flex align-items" @click="toMeDetail()">
						更多课程
						<image src="../../static/center/right.png" mode="" style="width: 24rpx; height: 24rpx;"></image>
					</span> -->
				</view>
			</view>

		</view>

		<view class="footer flex align-items" style="justify-content: space-between;">
			<view class="footer-left">
				<view @click="toIndex">
					<image src="../../static/center/home.png" mode=""></image>
					<span>首页</span>
				</view>
				<button open-type="share" class="no-border-button" plain="true">
					<view class="">
						<image src="../../static/center/share.png" mode=""></image>
						<span>分享</span>
					</view>
				</button>
				<view v-if="is_collect == 0" @click="Collect(1)">
					<image src="../../static/center/Collect.png" mode=""></image>
					<span>收藏</span>
				</view>
				<view v-if="is_collect != 0" @click="Collect(0)">
					<image src="../../static/center/Collected.png" mode=""></image>
					<span>已收藏</span>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	// import indexBackgroundImage from "@/static/center/firstBack.png"
	import dayjs from 'dayjs';
	export default {

		computed: {
			formattedTimeList() {
				return this.timeList.map(item => {
					const startTime = dayjs.unix(item.start_time).format('YYYY-MM-DD HH:mm:ss');
					const endTime = dayjs.unix(item.end_time).format('HH:mm:ss');
					return {
						formattedTime: `${startTime}~${endTime}`
					};
				});
			},
			formattedTime() {
				const startTime = dayjs.unix(this.detail.start_time).format('YYYY-MM-DD');
				const endTime = dayjs.unix(this.detail.end_time).format('YYYY-MM-DD');
				return {
					formattedTime: `${startTime}~${endTime}`
				};
			}
		},
		data() {
			return {
				style: {
					// 字符串的形式
					img: 'width: 100%',
				},
				show: false,
				buyShow: false,
				type: 0, // 0 支付 1 立即购买 2 预约  3确认时间
				id: 1,
				count: 5,
				value: 5,
				order_no: '',
				PayPirce: 0,
				notice: '',
				detail: {},
				people: {},
				virtual_people: 0,
				popupStyle: {
					width: '100%',
					// height: '564rpx',
					margin: '0 auto', // 水平居中
					display: 'flex',
					justifyContent: 'center',
					alignItems: 'center'
				},
				timeList: [],
				selectedTime: null,
				// indexBackgroundImage: indexBackgroundImage,
				is_collect: 0,
				orderId: "",
				classes_lib_spec_id: '',
				order_no2: '',
				mobile:'',
				is_show_model: false //是否显示分享模态窗

			};
		},
		onShareTimeline() {
			return {
				title: this.detail.title,//分享的标题
				imageUrl: this.detail.headimage,//展示的图片，这里是本地路径的写法，也可以写http或https开头的图片路径
				 query: `id=${this.id}`
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getDetail()
			this.getTime()
		},

		methods: {
			// 时间转换函数
			timeago(timestamp) {
				const now = new Date().getTime(); // 当前时间（毫秒）
				const diff = (now - timestamp * 1000) / 1000; // 时间差（秒）

				if (diff < 60) {
					return `${Math.floor(diff)}秒前`;
				} else if (diff < 3600) {
					return `${Math.floor(diff / 60)}分钟前`;
				} else if (diff < 86400) {
					return `${Math.floor(diff / 3600)}小时前`;
				} else if (diff < 2592000) { // 30天
					return `${Math.floor(diff / 86400)}天前`;
				} else {
					return `${Math.floor(diff / 2592000)}个月前`;
				}
			},

			sharePoster() {
				//获取带参数二维码并传递
				this.is_show_model = false
				this.$refs.poster.showCanvas()
			},

			// 获取课时规格
			getTime() {
				uni.$u.http.get('/api/school/classes/spec', {
					params: {
						id: this.id,
					}
				}).then(res => {
					if (res.code == 1) {

						this.timeList = res.data.spec;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}).catch(error => {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none',
						duration: 2000
					});
				});
			},
			// 获取详情
			getDetail() {
				uni.$u.http.get('/api/school/classes/detail', {
					params: {
						id: this.id,
					}
				}).then(res => {
					if (res.code == 1) {
						this.detail = res.data.detail
						this.notice = res.data.detail.notice.replace(/<[^>]*>/g, '')
						this.virtual_people = res.data.detail.views
						if (res.data.detail.is_collect != 0) {
							this.is_collect = 1
						} else {
							this.is_collect = 0
						}
						if (this.detail.user.realname) {
							this.detail.user.realname = this.detail.user.realname.slice(0, 1) + 'XX';
						}
						this.mobile = this.detail.user.mobile.slice(0, 3) + 'XXXX' + this.detail.user
							.mobile.slice(7);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				}).catch(error => {});
			},
			// 教师详情
			toTeacher(id) {
				uni.navigateTo({
					url: `/pages/center/teacherDetail?id=${id}`
				})
			},
			// 导航
			toMap(latitude, longitude, name) {
				uni.openLocation({
					latitude: parseFloat(latitude),
					longitude: parseFloat(longitude),
					name: name,
					success: function() {
						console.log('success');
					}
				});
			},
			// 机构详情
			toMeDetail() {
				const jigouId = this.detail.shop.id
				uni.navigateTo({
					url: "/pages/center/MechanismDetail?id=" + jigouId
				})
			},

			// 返回首页
			toIndex() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			// 收藏和取消
			Collect(number) {
				uni.$u.http.post('/api/school/classes/collect', {
					id: this.id,
					is_collect: number
				}).then(res => {
					if (res.code == 1) {
						this.is_collect = number
						if (number == 0) {
							uni.showToast({
								title: '取消收藏',
								icon: 'none',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: '收藏成功',
								icon: 'none',
								duration: 2000
							})
						}

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
						// _this.$api.toast(res.msg);
					}
				}).catch(error => {

				});
			},
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.w-100 {
		width: 100%;
	}

	.flex {
		display: flex;
	}

	.flex-start {
		align-items: flex-start;
	}

	.justify-center {
		justify-content: center;
	}

	.align-items {
		align-items: center;
	}

	.flex-column {
		flex-flow: column;
	}

	.justify-start {
		justify-content: start;
	}

	.white-space {
		overflow: hidden;
		/* 确保超出容器的文本被隐藏 */
		white-space: nowrap;
		/* 确保文本在一行内显示 */
		text-overflow: ellipsis;
		/* 使用省略号表示被截断的文本 */
		width: 100%;
	}

	.con-center {
		background: linear-gradient(to bottom,
				#F1F2F8 0%,
				#F1F2F8 10%,
				#FFFFFF 50%,
				#FFFFFF 95%);
	}

	.swiper {
		width: 100%;
		height: 450rpx;
	}

	.box {
		position: relative;

	}

	.first-box {
		width: 90%;
		background: #FFFFFF;
		padding-left: 24rpx;
		margin-top: 24rpx;
		border-radius: 20rpx;

		.first-name {
			width: 100%;
			height: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 38rpx;
			color: #343434;
			margin-top: 32rpx;
		}

		.first-money {
			height: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 36rpx;
			color: #FF2323;
			margin-bottom: 19rpx;
		}

		.first-mine {
			height: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #7A7A7A;

		}

		.first-txt {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #7A7A7A;
			line-height: 32rpx;
			margin: 0 6rpx;
		}

		.first-image {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #7A7A7A;
			margin: 16rpx 0 16rpx 0;
		}
	}

	.second-box {
		width: 90%;
		margin-top: 42rpx;
		// background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding-left: 24rpx;
		position: relative;

		.second-title {
			// margin: 17rpx 35rpx 15rpx 0;
			position: absolute;
			top: 0;
			left: 0;
		}

		.second {
			padding: 24rpx 23rpx 0 0rpx;
			margin-top: 32rpx;

			view {
				width: 20%;
				margin: 24rpx 0 0 0;
			}

			image {
				width: 54rpx;
				height: 54rpx;
			}

			span {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #7A7A7A;
				text-align: center;
				overflow: hidden;
				white-space: nowrap;
				width: 100%;
			}

		}

		.number {
			width: 108rpx;
			color: #FF4949;
			font-size: 42rpx;
			font-weight: bold;
			text-align: center;
		}
	}

	.third {
		margin-top: 24rpx;
		width: 93%;

		.third-header {
			padding-bottom: 12rpx;
			border-bottom: 2rpx solid #008CFF;
		}

		.third-box {
			margin: 12rpx 0 0 24rpx;
		}

		.third-center {
			margin-top: 28rpx;
			width: 100%;
			height: 242rpx;
			overflow: hidden;
			position: relative;
		}

		.scroll-container {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			animation: scroll 12s linear infinite;
		}

		@keyframes scroll {
			0% {
				transform: translateX(0);
			}

			100% {
				transform: translateX(calc(-100% + 8 * 100px));
				/* 8 * 100px 是假设每个项目的宽度为 100px */
			}
		}

		.item {
			display: flex;
			width: 94%;
			align-items: center;
			justify-content: space-between;
			padding: 22rpx 24rpx 24rpx 24rpx;
			height: 32rpx;

			/* 假设每条数据的高度为60rpx */
		}

		.item image {
			margin-right: 10rpx;
		}

		.line-colum {
			margin: 0 10rpx;
			border-left: 1rpx solid #ccc;
			height: 42rpx;
		}

		.item span {
			margin-right: 10rpx;
		}

		@keyframes scroll {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(-240rpx);
				/* 总高度为 4 * 60rpx = 240rpx */
			}
		}
	}

	.four {
		margin-top: 42rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		width: 93%;
		// height: 338rpx;

		.four-box {
			.four-header {
				padding: 32rpx 34rpx 15rpx 24rpx;

				.four-name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 36rpx;
					color: #4974FF;
				}

				.jigou {
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 24rpx;
					color: #008CFF;
					line-height: 26rpx;
					margin: 8rpx 0 12rpx 0;
				}

				.rate {
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 28rpx;
					color: #FFBC2C;
					line-height: 26rpx;
				}

				.teacher-detail {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #008CFF;
					line-height: 32rpx;
				}
			}

			.four-right {
				justify-content: space-between;
				align-items: flex-end;
				height: 115rpx;
			}
		}


		.tt-detail {
			width: 93%;
			padding: 0rpx 24rpx 18rpx 24rpx;
			justify-content: flex-start;
			align-items: left;
			flex-flow: column;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #7A7A7A;

			span {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 4;
				font-size: 32rpx;
				/* 设置行数 */
				overflow: hidden;
				text-overflow: ellipsis;
				line-height: 1.5em;
				/* 根据需要调整行高 */
				max-height: 6em;
				/* 行高 * 行数 */
			}
		}

	}

	.five {
		width: 93%;
		height: 126rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-top: 24rpx;

		.five-box {
			padding: 24rpx;
			width: 100%;
			justify-content: space-between;
			align-items: center;

			.five-left {
				.five-name {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #4974FF;
				}

				.five-address {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #7A7A7A;
				}

			}

			.five-right {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #7A7A7A;
				width: 21%;
			}
		}

	}

	.six {
		margin-bottom: 106rpx;
		width: 100%;
		background: linear-gradient(to bottom, #F1F2F8 0%, #FFFFFF 20%, #FFFFFF 80%, #FFFFFF 100%);
		align-items: center;


		.six-header {
			width: 93%;
			padding-top: 64rpx;
			padding-bottom: 12rpx;
			border-bottom: 2rpx solid #008CFF;
			// background: linear-gradient(to bottom, #F1F2F8 0%, #ffffff 24%, #FFFFFF 100%);
		}

		.six-box {
			width: 93%;
			margin: 12rpx 0 0 24rpx;
		}

		.six-center {
			width: 670rpx;
			margin-top: 41rpx;


			.s-header {
				padding: 24rpx;
				width: 642rpx;

				span {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #7A7A7A;
				}
			}

			.s-footer {
				padding: 24rpx;
				width: 642rpx;

				span {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #7A7A7A;
				}
			}

			.s-footer .h4 {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #656565;
			}
		}

	}


	.line {
		width: 95%;
		height: 1rpx;
		background: #D9D9D9;
		margin: 19rpx 0 19rpx 0;
	}

	.icon-size {
		width: 36rpx;
		height: 36rpx;
	}


	.footer {
		width: 100%;
		height: 166rpx;
		background: #ffffff;
		// box-shadow: 0rpx -2rpx 0rpx 0rpx rgba(0, 0, 0, 0.4);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: sticky;
		z-index: 99;
		/* 绝对定位 */
		bottom: 0;
		/* 定位在底部 */
		left: 0;
		/* 定位在左边 */

		.footer-left {
			position: absolute;
			top: 24rpx;
			left: 60rpx;
			display: flex;

			view {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-flow: column;
				// margin-right: 42rpx;
				width: 100rpx;

				span {
					text-align: center;
					width: 100rpx;
					height: 34rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #777777;
				}
			}

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.footer-right {
			position: absolute;
			top: 27rpx;
			right: 30rpx;
			width: 250rpx;
			height: 80rpx;
			background: #008CFF;
			border-radius: 401rpx 401rpx 401rpx 401rpx;

			span {
				font-family: Kingnamype Yuanmo SC, Kingnamype Yuanmo SC;
				font-weight: 400;
				font-size: 34rpx;
				color: #FFFFFF;
				letter-spacing: 6rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}
	}



	.popupBox {
		// height: 365rpx;
		margin-top: 22rpx;
		width: 750rpx;

		.pop-header {
			width: 93%;
			padding-top: 32rpx;
			padding-bottom: 17rpx;

			border-bottom: 2rpx solid #D9D9D9;

			span {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #343434;
			}
		}

		.popup {
			display: flex;
			align-items: self-start;
			justify-content: center;
			padding-top: 21rpx;

			.popur-right {
				align-items: self-start;
				margin-left: 24rpx;
				width: 418rpx;

				.name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 28rpx;
					color: #343434;
				}

				.address {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #7A7A7A;
					line-height: 32rpx;
					margin: 16rpx 0 12rpx 0;
					overflow: hidden;
					/* 确保超出容器的文本被隐藏 */
					white-space: nowrap;
					/* 确保文本在一行内显示 */
					text-overflow: ellipsis;
					/* 使用省略号表示被截断的文本 */
					width: 100%;
				}

				.date {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #7A7A7A;
					line-height: 32rpx;
				}

				.time {
					margin: 12rpx 0 73rpx 0;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #7A7A7A;
					line-height: 32rpx;
				}

				.line-row {
					width: 418rpx;
					height: 1rpx;
					background: #008CFF;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
				}

				.price {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #7A7A7A;
					line-height: 32rpx;
					margin-top: 23rpx;
					align-self: flex-end;

					span {
						font-family: PingFang SC, PingFang SC;
						font-weight: 800;
						font-size: 36rpx;
						color: #FF2323;
						line-height: 32rpx;
					}
				}
			}

		}

		.popup-footer {
			margin-top: 42rpx;
		}


		.line {
			width: 642rpx;
			height: 1rpx;
			background: #D9D9D9;
			box-shadow: 1rpx 1rpx 0rpx 0rpx rgba(102, 102, 102, 0.25);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}

		.times {
			width: 93%;

			.selectTime {
				width: 288rpx;
				height: 50rpx;
				background: #FFFFFF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 1rpx solid #D9D9D9;
				color: #4B4B4B;
				font-family: 'PingFang SC', 'PingFang SC';
				font-weight: 500;
				font-size: 24rpx;
				padding-left: 15rpx;
				cursor: pointer;
				margin: 24rpx 32rpx 0 0;
				white-space: nowrap;
				/* 防止文本换行 */
				text-overflow: ellipsis;
				/* 超出部分显示省略号 */
				overflow: hidden;
				/* 隐藏超出部分 */
				text-align: left;
				/* 文字靠左对齐 */
				line-height: 50rpx;
				/* 垂直居中对齐 */
				box-sizing: border-box;
				/* 确保 padding 和 border 不影响宽度和高度 */
				display: inline-block;
				/* 确保容器内文字正确对齐 */
			}

		}

		.selectTime.selected {
			width: 288rpx;
			height: 50rpx;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			background: #008CFF;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 24rpx;
			color: #FFFFFF;
			cursor: pointer;
			margin: 24rpx 32rpx 0 0;

		}
	}

	.share {
		position: fixed;
		color: #FFFFFF;
		right: 0;
		bottom: 190rpx;
		background: linear-gradient(to bottom right, #FE726B, #FE956B);
		padding: 10rpx 10rpx 10rpx 20rpx;
		border-top-left-radius: 50px;
		border-bottom-left-radius: 50px;
		box-shadow: 0 0 20upx rgba(0, 0, 0, .09);
	}

	.cancel {
		width: 100vw;
		padding: 30rpx;
		text-align: center;
		background: #FFFFFF;
		color: red;
		font-weight: bold;
		font-size: 30rpx;
	}

	.md-content {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 50rpx 0;
		background-color: white;
	}

	.md-content-item {
		margin: 0 70rpx;
		position: relative;
	}

	.md-content-item image {
		width: 100rpx;
		height: 100rpx;
	}

	.md-content-item view {
		margin-top: 15rpx;
		font-size: 28rpx;
	}

	.sharebtn {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
	}

	.cu-modal {
		position: fixed;
		bottom: 166rpx;
		left: 0;
		z-index: 999999;
	}

	.gj {
		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #4B4B4B;

			span {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 24rpx;
				color: #4B4B4B;
			}
		}

		.scroll {
			width: 642rpx;
			max-height: 340rpx;

			span {
				margin: 24rpx;
				width: 600rpx;
				height: 56rpx;
				background: #E8E8E8;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #7A7A7A;
			}
		}
	}

	::v-deep ::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 4px !important;
		height: 1px !important;
		overflow: auto !important;
		background: #ccc !important;
		-webkit-appearance: auto !important;
		display: block;
	}

	::v-deep ::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 10px !important;
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
		background: #7b7979 !important;
	}

	::v-deep ::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
		// border-radius: 10px !important;
		background: #FFFFFF !important;
	}

	.no-border-button {
		background-color: transparent;
		/* 去掉背景色 */
		border: none;
		/* 去掉边框 */
		padding: 0;
		/* 去掉内边距 */
		margin: 0;
		/* 去掉外边距 */
		display: inline-flex;
		/* 使按钮内容居中 */
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
		flex-flow: column;
		height: 110rpx;
		line-height: inherit;

		span {
			text-align: center;
			width: 48rpx;
			height: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #777777;
		}
	}

	::v-deep ._root {
		padding: 0 10rpx;
	}

	.wangqi {
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 24rpx;
		color: #343434;
		margin-left: 12rpx;
	}
</style>