<template>
	<view class="box flex justify-center align-items flex-column">
		<view class="con-center flex flex-column justify-center align-items">

			<view class="tabs align-items">
				<span class="s-header flex flex-column" v-for="(item, index) in headers" :key="index"
					:class="{ selected: headerSelected(item.status) }" @click="selectheader(item.status)">
					{{ item.text }}
					<span class="lines" :class="{ selected: headerSelected(item.status) }"></span>
				</span>
			</view>

			<view class="flex align-items justify-start shenhe" v-if="status == 0">
				<span :class="['span_s', { active: !auth_status }]" @click="toShlist(0)">待审核</span>
				<span :class="['span_s', { active: auth_status }]" style="margin-left: 20rpx;"
					@click="toShlist(2)">未通过</span>
			</view>

			<view class="flex align-items justify-start shenhe" v-if="status == -2">
				<span :class="['span_s', { active: server_status == 3 }]" @click="toAfter(3)">待售后</span>
				<span :class="['span_s', { active: server_status == 6 }]" style="margin-left: 20rpx;"
					@click="toAfter(6)">已售后</span>
			</view>


			<view :class="['hot', 'flex', 'flex-column', status == 0 || status == -2 ? 'wsh_hot' : '']">
				<view class="content flex align-items flex-column">
					<view class="flex flex-column w-100 bbb" style="position: relative;"
						v-for="(item, index) in hotList" :key="index">
						<view v-if="status != -2">
							<image v-if="item.auth_status == 0" src="/static/my/daishenhe.png"
								style="width: 134rpx; height: 106rpx;position: absolute;right: 0;"></image>
							<image v-if="item.auth_status == 2" src="/static/my/wtg.png"
								style="width: 134rpx; height: 106rpx;position: absolute;right: 0;"></image>
							<view class="flex" style="margin-top: 24rpx">
								<view class="right flex flex-column" style="align-items: self-start">

									<span class="title white-space">{{ item.title }}</span>
									<span class="first-image flex align-items" style="margin-top: 20rpx; width: 100%">
										<image :src="item.user.avatar" style="width: 36rpx; height: 36rpx"></image>
										<span style="color: #9c9c9c; margin-left: 10rpx; width: 35%">{{
											item.user.nickname
										}}</span>
										<view class="white-space" style="width: 60%">
											<span style="color: #0ca013; margin-left: 20rpx"
												v-for="items_t in item.classes_cate">#{{ items_t }}</span>
										</view>
									</span>

									<view class="flex flex-column" style="margin-top: 20rpx">
										<view class="time flex align-items white-space">
											<span class="time_tex" v-if="item.status == 2">{{
												"报名中"
											}}</span>
											<span style="margin: 0 8rpx">{{ dateWeeks(item.sign_start_time) }}
											</span>|<span class="white-space"
												style="margin-left: 8rpx; width: 260rpx">{{
													item.address_detail }}</span>
										</view>
									</view>

									<view class="flex align-items" style="margin-top: 20rpx">
										<image class="imgs_con" v-for="(items_img, index) in item.images.slice(0, 3)"
											:key="index" :src="items_img"></image>
									</view>
								</view>
							</view>
							<view class="bottom flex align-items" v-if="item.auth_status != 0"
								style="justify-content: space-between;padding: 0rpx 20rpx;">
								<view v-if="item.status == 1">
									<image src="/static/index/dian.png"
										style="width: 60rpx;height: 60rpx;vertical-align: middle;"></image>
									<text style="margin-left: 20rpx;vertical-align: middle;font-size: 26rpx;">未开始</text>
								</view>
								<view v-if="item.status == 2" style="display: flex;align-items: center;">
									<u-avatar-group :urls="item.join_info.users" keyName="avatar" size="30" maxCount="1"
										gap="0.4"></u-avatar-group>
									<image src="/static/index/dian.png" style="
								    width: 60rpx;
								    height: 60rpx;
								    margin-left: -20rpx;
								  "></image>
									<view style="margin-left: 20rpx;vertical-align: middle;font-size: 24rpx;">
										{{ Number(item.join_info.people_number) + "人已上车" }}
									</view>
								</view>
								<view style="font-size: 26rpx;    width: 24%;">
									<text>核销：</text>
									<text style="color: orangered;">{{ item.verification_num }}</text>
									<text>/{{ item.stock }}</text>
								</view>
								<view v-if="item.status == 3 || item.status == 4"
									class="part1 flex justify-center align-items" @click="toHexiao"> 核销 </view>
								<view class="part flex justify-center align-items" v-if="item.auth_status != 2"
									@click="detail(item.id)"> 详情 </view>
							</view>
						</view>
						<view v-if="status == -2">
							<view class="flex" style="margin-top: 24rpx">
								<view class="right flex flex-column" style="align-items: self-start">
									<view class="flex flex-column">
										<view class="time flex align-items white-space">
											<span style="color: #9C9C9C;">活动时间：{{ dateWeeks(item.detail.sign_start_time)
												}}</span>
										</view>
									</view>
									<view style="height: 1px;width: 98%;background-color: #F0F0F0;margin: 30rpx 0px;">
									</view>
									<view class="flex align-items" style="width: 100%;">
										<view>
											<image
												style="height: 130rpx;width: 130rpx;object-fit: cover;border-radius: 8rpx"
												:src="item.detail.images[0]"></image>
										</view>
										<view class="title white-space" style="padding-left: 20rpx;">
											<view>{{ item.detail.title }}</view>
											<view
												style="display: flex;justify-content: space-between;align-items: center;margin-top: 30rpx;padding-right: 30rpx;">
												<view>
													<text>退款金额：</text>
													<text v-if="server_status==3"
														style="color: #FF4810;font-weight: 600;">￥{{ item.first_refundprice }}</text>
													<text v-if="server_status==6"
														style="color: #FF4810;font-weight: 600;">￥{{ item.real_refundprice }}</text>
												</view>
												<view style="font-size: 26rpx;color: #9C9C9C;">数量：{{ item.num }}</view>
											</view>
										</view>
									</view>
									<view
										style="height: 1px;width: 98%;background-color: #F0F0F0;margin:30rpx 0px 0rpx 0px;">
									</view>
								</view>
							</view>
							<view class="flex align-items"
								style="justify-content: flex-end;padding: 0rpx 30rpx 30rpx 0rpx;">
								<view
									style="font-weight: 600;font-size: 28rpx;width: 180rpx;height: 70rpx;text-align: center;line-height: 70rpx;background: linear-gradient( 270deg, #FBF66D 0%, #9CEAA2 100%);border-radius: 276rpx;"
									@click="goAfterInfo(item.id)"> 查看详情 </view>
							</view>
						</view>
					</view>

					<view class="flex flex-column flex-start align-items" v-if="hotList.length == 0"
						style="margin-top: 300rpx;">
						<image src="/static/message/activen.png" mode="" style="width: 200rpx;height: 200rpx;">
						</image>
						<view style="margin-top: 50rpx;font-size: 36rpx;color: #323232;">暂无发布活动</view>
						<view class="tofb" @click="tofb">前往发布</view>
					</view>

				</view>
			</view>
		</view>
		<!-- 热门活动 -->

		<!-- <u-popup :show="show" mode="center" :zIndex="99999" :custom-style="popupStyle" closeable="true" @close="close"
			@open="open">
			<view class="popup flex flex-column align-items">
				<view class="pop-center flex">
					<view class="left">
						<image :src="qrcode.detail.headimage" mode="" style="width: 280rpx;height: 200rpx;"></image>
					</view>
					<view class="right flex flex-column">
						<span class="title white-space">{{qrcode.detail.title}}</span>
						<span class="hui"
							style="margin: 16rpx 0 6rpx 0;">课时:{{qrcode.detail.verification_num}}/{{qrcode.detail.limit_num}}</span>
						<span class="hui">日期:{{qrcode.detail.classes_date_text}}</span>
						<span class="hui" style="margin: 6rpx 0 6rpx 0;">时间:{{qrcode.detail.classes_time_text}}</span>
						<span class="hui" v-if="qrcode && qrcode.detail" style="margin-top: 6rpx;">开始时间:{{ formatTimestamp(qrcode.detail.start_time) }}</span>
						<span class="hui" v-if="qrcode && qrcode.detail" style="margin: 6rpx 0 6rpx 0;">结束时间:{{ formatTimestamp(qrcode.detail.end_time) }}</span>
						<span class="hui">地址:{{qrcode.detail.address_detail}}</span>
					</view>
				</view>
				<span class="line-short"></span>
				<image :src="qrcode.codeimage" mode="" style="width: 376rpx;height: 376rpx;"></image>
				<span style="margin: 24rpx 0 64rpx 0;">核销二维码</span>
			</view>
		</u-popup> -->

		<!-- <u-loadmore :status="loadStatus" /> -->

	</view>
</template>

<script>
	import {
		dateWeek
	} from "../../utils/dateFormat";
	export default {
		data() {
			return {
				popupStyle: {
					width: "690rpx",
					margin: "0 auto", // 水平居中
					display: "flex",
					justifyContent: "center",
					alignItems: "center",
					padding: "0",
					borderRadius: "20rpx",
				},
				sortList: [{
						text: "按照价格排序",
						value: ["acs", "desc"],
					},
					{
						text: "按照编号排序",
						value: ["acs", "desc"],
					},
				],
				size: 13,
				sortStyle: ["#ff557f", "#3f3f3f"],
				headers: [{
						status: "0",
						text: "活动审核",
					},
					{
						status: "1",
						text: "未开始",
					},
					{
						status: "2",
						text: "报名中",
					},
					{
						status: "3",
						text: "待开始",
					},
					{
						status: "4",
						text: "进行中",
					},
					{
						status: "5",
						text: "已结束",
					},
					{
						status: "-1",
						text: "已取消",
					},
					{
						status: "-2",
						text: "售后订单",
					}
				],
				selected: "0",
				page: 1,
				limit: 10,
				loadStatus: "loading",
				keywords: "",
				list: [],
				show: false,
				qrcode: "",
				count: 0,
				// 活动列表
				hotList: [],
				// 审核状态
				auth_status: 0,
				status: 0,
				server_status: '3'
			};
		},
		onLoad(option) {
			this.list = []
			this.page = 1
			if (option?.status) {
				this.selected = option.status
				this.getHotList(option.status);
			} else {
				this.getHotList('0');
			}

		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '加载中...'
			});
			this.page = 1;
			this.hotList = [];
			this.getHotList(this.selected);
			setTimeout(() => {
				uni.hideLoading();
				uni.stopPullDownRefresh();
			}, 2000)
		},
		onReachBottom() {
			// if (this.list.length < this.count) {
			// 	this.page++;
			// 	this.getList(this.selected);
			// }
			if (this.status == -2) {
				this.page++;
				this.getAfterList();
			} else {
				this.page++;
				this.getHotList(this.selected);
			}
		},

		methods: {
			goAfterInfo(id) {
				uni.navigateTo({
					url: "/packageA/afterSales/info?id=" + id,
				});
			},
			// 跳转详情
			detail(id) {
				uni.navigateTo({
					url: "/packageA/center/detailSys?id=" + id,
				});
			},
			tofb() {
				uni.switchTab({
					url: '/pages/center/index',
				});
			},
			//开始
			dateWeeks(e) {
				return dateWeek(e);
			},
			// 获取售后订单
			getAfterList() {
				uni.$u.http
					.get("/api/school.newworker.activity.order/order_list", {
						params: {
							page: this.page,
							limit: 20,
							server_status: this.server_status,
							status: '4,5,6',
						},
					})
					.then((res) => {
						if (res.code == 1) {
							const list = res.data.list || [];
							this.hotList.push(...list);
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 2000,
							});
						}
					})
					.catch((error) => {
						uni.showToast({
							title: "请求失败，请稍后再试",
							icon: "none",
							duration: 2000,
						});
					});
			},
			// 获取我发布的活动
			getHotList(val) {
				console.log(val);
				var auth_status = '';
				if (val == 0) {
					val = '';
					var auth_status = this.auth_status;
				} else {
					var auth_status = '1';
				}
				//let auth_status = val == '0' ? 0 : '1';
				//let vals = val == '0' ? '' : val;
				uni.$u.http
					.get("/api/school.new_activity/activity_list", {
						params: {
							page: this.page,
							limit: 20,
							order: "normal",
							my: 1,
							auth_status: auth_status,
							status: val, // 5已结束
						},
					})
					.then((res) => {
						if (res.code == 1) {
							const list = res.data.list.data || [];
							this.hotList.push(...list);
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 2000,
							});
						}
					})
					.catch((error) => {
						uni.showToast({
							title: "请求失败，请稍后再试",
							icon: "none",
							duration: 2000,
						});
					});
			},
			formatTimestamp(timestamp) {
				const date = new Date(timestamp * 1000); // 10位时间戳需要乘以1000
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, "0");
				const day = String(date.getDate()).padStart(2, "0");
				const hours = String(date.getHours()).padStart(2, "0");
				const minutes = String(date.getMinutes()).padStart(2, "0");
				const seconds = String(date.getSeconds()).padStart(2, "0");
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			// 关闭弹窗
			close() {
				this.show = false;
				// this.qrcode = ''
			},
			open() {
				this.show = true;
			},
			againBuy(id) {
				uni.navigateTo({
					url: "/packageA/center/detail?id=" + id,
				});
			},
			toHexiao() {
				// 小程序内调用扫码API
				let that = this;
				wx.scanCode({
					success(res) {
						if (res.path) { // 扫描的是小程序码
							const sceneValue = decodeURIComponent(res.path.split('=')[1]);
							that.navigateToVerifyPage(sceneValue);
						} else if (res.result.startsWith('https://wxaurl.cn')) { // 扫描短链接
							that.navigateToVerifyPage(res.result);
						}
					}
				});
			},

			// 跳转核销页面并解密场景值
			navigateToVerifyPage(e) {
				console.log(e);
				let urlParams = this.parseQueryString(e.split('?')[1]);
				console.log(urlParams);
				uni.navigateTo({
					url: '/packageA/my/cancelActivity?code=' + urlParams.code + '&id=' + urlParams.id
				});
			},
			parseQueryString(query) {
				return query.split('&').reduce((obj, pair) => {
					const [key, value] = pair.split('=');
					obj[key] = decodeURIComponent(value || ''); // 处理空值和URI编码
					return obj;
				}, {});
			},
			// 取消支付
			Cancel(order_no) {
				console.log(order_no);
				uni.$u.http
					.post("/api/school/order/cancel", {
						order_no: order_no,
					})
					.then((res) => {
						if (res.code == 1) {
							this.list = [];
							this.getList(0);
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 2000,
							});
						}
					})
					.catch((error) => {});
			},
			// 跳转预约
			toMake(id, orderId, classes_lib_id, type) {
				uni.navigateTo({
					// url: "/packageA/center/applyDetail?id=" + id + "&orderId=" + orderId + "&type=" + 2
					url: "/packageA/center/orderDetail?id=" +
						id +
						"&orderId=" +
						orderId +
						"&type=" +
						2 +
						"&classes_lib_id=" +
						classes_lib_id,
				});
			},
			toDetail(id, orderId, classes_lib_id, order_no) {
				let type = null;
				if (this.selected == 0) {
					type = 1;
				} else if (this.selected == 3) {
					type = 2;
				} else if (this.selected == 9) {
					type = 9;
				} else if (this.selected == -3) {
					type = -3;
				} else if (this.selected == 6) {
					type = 6;
				} else {
					type = 0;
				}
				uni.navigateTo({
					url: "/packageA/center/orderDetail?id=" +
						id +
						"&orderId=" +
						orderId +
						"&order_no=" +
						order_no +
						"&type=" +
						type +
						"&classes_lib_id=" +
						classes_lib_id,
				});
			},
			// 去支付
			toPay(id, orderId, classes_lib_id, order_no, type) {
				uni.navigateTo({
					url: "/packageA/center/orderDetail?id=" +
						id +
						"&orderId=" +
						orderId +
						"&order_no=" +
						order_no +
						"&type=" +
						1 +
						"&classes_lib_id=" +
						classes_lib_id,
				});
			},
			// 售后
			service(id) {
				uni.navigateTo({
					url: "/packageA/afterSales/index?id=" + id,
				});
			},
			// 核销码
			QR(id) {
				uni.$u.http
					.get("/api/school/order/detail", {
						params: {
							id: id,
						},
					})
					.then((res) => {
						if (res.code == 1) {
							this.qrcode = res.data.detail;
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 2000,
							});
						}
					})
					.catch((error) => {});
				this.show = true;
			},
			switchSort(index, value) {
				console.log(index, value);
			},
			// 搜索
			search() {
				const that = this;
				that.page = 1;
				that.list = [];
				this.getList(this.selected);
			},
			// 获取课程列表
			getList(status) {
				// if (this.loadStatus === 'nomore') return;
				uni.$u.http
					.get("/api/school/order/order_list", {
						params: {
							keywords: this.keywords,
							page: this.page,
							limit: this.limit,
							status: status,
						},
					})
					.then((res) => {
						if (res.code == 1) {
							this.count = res.data.count;
							this.list = [...this.list, ...res.data.list];
							if (this.list.length >= res.data.count) {
								this.loadStatus = "nomore";
							} else {
								this.loadStatus = "loading";
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 2000,
							});
							this.loadStatus = "loading";
						}
					})
					.catch((error) => {
						console.error("请求失败", error);
						this.loadStatus = "loading";
					});
			},
			selectheader(status) {
				this.selected = status;
				this.page = 1;
				this.hotList = [];
				this.status = status;
				if (status == -2) {
					this.getAfterList();
				} else {
					this.getHotList(status);
				}
			},
			headerSelected(status) {
				return this.selected === status;
			},
			toShlist(val) {
				this.page = 1;
				this.hotList = [];
				this.auth_status = val
				this.getHotList(this.status);
			},
			toAfter(val) {
				this.page = 1;
				this.hotList = [];
				this.server_status = val;
				this.getAfterList();
			}
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		.con-center {
			width: 100%;
			// margin-top: 25rpx;
			// overflow: hidden;
			background: #f7f7f7;

			.tabs {
				width: 750rpx;
				background: #ffffff;
				display: flex;
				overflow-x: auto;
				-webkit-overflow-scrolling: touch;
				font-family: PingFang SC, PingFang SC;
				position: fixed;
				top: 0;
				z-index: 2;
				padding-left: 60rpx;
				.s-header {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 140rpx;
					height: 80rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #9e9e9e;
					line-height: 26rpx;
					flex: 0 0 auto;
					position: relative;
				}

				.s-header.selected {
					width: 140rpx;
					height: 80rpx;
					background: #ffffff;
					font-weight: 800;
					font-size: 32rpx;
					color: #323232;
					line-height: 28rpx;
				}

				.lines {
					position: absolute;
					bottom: 0;
					width: 44rpx;
				}

				.lines.selected {
					border-bottom: #323232 solid 8rpx;
				}
			}

			.shenhe {
				width: 94%;
				position: fixed;
				top: 80rpx;
				//background: #f7f7f7;
				background: #f7f7f7;
				z-index: 100;
				padding: 30rpx 0rpx;
				.span_s {
					width: 134rpx;
					height: 60rpx;
					line-height: 60rpx;
					background: #FFFFFF;
					border-radius: 125rpx;
					color: #9C9C9C;
					text-align: center;
					font-size: 26rpx;

				}

				.span_s.active {
					color: #3D3D3D;
				}
			}
		}
	}

	.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;
	}

	.line {
		margin-top: 12rpx;
		width: 690rpx;
		height: 1rpx;
		background: #008cff;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.centerBox {
		width: 690rpx;

		.box-line {
			width: 400rpx;
			height: 1rpx;
			background: #d9d9d9;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			margin-top: 24rpx;
		}

		.center {
			margin: 32rpx 0 32rpx 0;
		}

		.rightBox {
			margin-left: 32rpx;
			width: 50%;

			.line-row {
				width: 382rpx;
				height: 1rpx;
				background: #d9d9d9;
				box-shadow: 1rpx 1rpx 0rpx 0rpx rgba(102, 102, 102, 0.25);
				margin: 14rpx 0 6rpx 0;
			}

			.name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 34rpx;
				color: #343434;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				/* 设置行数 */
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
				margin-bottom: 24rpx;
				/* 防止单词被截断 */
			}

			.minge {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #7a7a7a;
				margin-bottom: 8rpx;
			}

			.money {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #ff2323;

				span {
					font-weight: 500;
					font-size: 24rpx;
					color: #7a7a7a;
				}
			}

			.Cancel {
				width: 138rpx;
				height: 48rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 2rpx solid #008cff;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 24rpx;
				color: #008cff;
				line-height: 32rpx;
				letter-spacing: 4px;
				display: flex;
				align-items: center;
				justify-content: center;
				align-self: flex-end;
			}

			.make {
				width: 138rpx;
				height: 48rpx;
				background: #008cff;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 24rpx;
				color: #ffffff;
				line-height: 32rpx;
				letter-spacing: 4px;
				display: flex;
				align-items: center;
				justify-content: center;
				align-self: flex-end;
				margin-left: 24rpx;
			}

			.QR {
				width: 138rpx;
				height: 48rpx;
				background: #4974ff;
				box-shadow: 2rpx 2rpx 0rpx 0rpx rgba(0, 0, 0, 0.4);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #eaeaea;
				display: flex;
				align-items: center;
				justify-content: center;
				align-self: flex-end;
				margin-top: 50rpx;
			}
		}
	}

	.charge {
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 28rpx;
		color: #ff2323;
		line-height: 32rpx;
	}

	.search {
		margin-top: 24rpx;
		width: 690rpx;
		height: 64rpx;
		background: #ffffff;
		box-shadow: 2rpx 2rpx 0rpx 0rpx rgba(0, 0, 0, 0.4);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #008cff;

		.dashed {
			image {
				width: 52rpx;
				height: 52rpx;
			}
		}

		.line-search {
			width: 2rpx;
			height: 42rpx;
			background: #008cff;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}

		.input {
			// border: 4rpx solid #EAEAEA;
			padding-left: 12rpx;
			height: 100%;
			width: 100%;
		}

		::v-deep .input-placeholder {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #c0c0c0;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.searchBtn {
			width: 128rpx;
			height: 64rpx;
			background: #008cff;
			border-radius: 5rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.popup {
		.header {
			margin-left: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 42rpx;
			color: #008cff;
			margin-top: 34rpx;
			width: 690rpx;
		}

		.line-row {
			width: 690rpx;
			height: 1rpx;
			background: #d9d9d9;
			margin: 11rpx 0 31rpx 0;
		}

		.pop-center {
			margin-top: 50rpx;
			align-items: center;
			width: 650rpx;

			.left {
				image {
					border-radius: 12rpx;
				}
			}

			.right {
				margin-left: 30rpx;

				.title {
					width: 340rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 34rpx;
					color: #343434;
				}
			}
		}

		.line-short {
			width: 400rpx;
			height: 1rpx;
			background: #d9d9d9;
			margin: 24rpx 0;
		}

		.popList {
			justify-content: space-between;
			width: 600rpx;
			margin-top: 32rpx;

			.hei {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #343434;
			}
		}

		.pop-btn {
			width: 690rpx;
			margin-top: 62rpx;
			justify-content: space-around;

			.Cancel {
				width: 306rpx;
				height: 80rpx;
				border-radius: 401rpx 401rpx 401rpx 401rpx;
				border: 2rpx solid #008cff;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 34rpx;
				color: #008cff;
			}

			.Confirm {
				width: 306rpx;
				height: 80rpx;
				background: #008cff;
				border-radius: 401rpx 401rpx 401rpx 401rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 34rpx;
				color: #ffffff;
			}
		}
	}

	.hui {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #7a7a7a;
	}

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

	.hot {
		margin-top: 80rpx;
		margin-bottom: 70rpx;
		min-height: 100vh;
		width: 94%;

		.hot-top {

			// padding-bottom: 12rpx;
			// border-bottom: 2rpx solid red;
			.left {
				background-image: url("/static/footer.png");
				background-repeat: no-repeat;
				background-position: bottom;

				span {
					width: 160rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: bold;
					font-size: 40rpx;
					color: #222222;
					line-height: 47rpx;
				}
			}

			.more {
				width: 104rpx;
				height: 40rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 26rpx;
				color: #222222;
				line-height: 30rpx;
			}
		}
	}

	.wsh_hot {
		margin-top: 160rpx;
	}

	.content {

		// height: 462rpx;
		// overflow-x: auto;
		/* 允许横向滚动 */
		// white-space: nowrap;
		.bbb {
			background: #ffffff;
			margin-top: 30rpx;
			border-radius: 36rpx;
		}

		.right {
			margin-left: 24rpx;
			width: 100%;
			padding: 20rpx 0;

			.title {
				width: 95%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #323232;
			}

			.first-image {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #9c9c9c;

				span {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 26rpx;
					color: #222222;
				}
			}

			.row {
				margin: 10rpx 0 26rpx 0;

				.remen {
					// width: 136rpx;
					height: 40rpx;
					background: #ebfaf5;
					border-radius: 4rpx 4rpx 4rpx 4rpx;

					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #14bc84;
					line-height: 28rpx;
					padding: 2rpx 8rpx;
				}

				.line-colum {
					width: 1rpx;
					height: 32rpx;
					background: #7a7a7a;
					margin: 0 13rpx;
				}

				.name {
					width: 110rpx;
					height: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #7a7a7a;
					line-height: 32rpx;
					margin-left: 12rpx;
				}
			}

			.jigou {
				width: 312rpx;
				// height: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #7a7a7a;
				margin: 4rpx 0 14rpx 0;
			}

			.time {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 26rpx;
				color: #323232;
				line-height: 30rpx;

				.time_tex {
					width: 116rpx;
					height: 42rpx;
					background: #bbfc5b;
					border-radius: 159rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #323232;
					line-height: 42rpx;
					text-align: center;
				}
			}

			.imgs_con {
				width: 202rpx;
				height: 202rpx;
				margin-right: 20rpx;
				object-fit: cover;

				&:first-child {
					border-radius: 18rpx 0 0 18rpx;
				}

				&:nth-child(3) {
					border-radius: 0 18rpx 18rpx 0;
				}
			}
		}

		.bottom {
			margin: 20rpx 10rpx 30rpx 10rpx;

			.number {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 26rpx;
				color: #3d3d3d;
				line-height: 30rpx;
				width: 150rpx;
				margin-left: 20rpx;
			}

			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 26rpx;
				color: #7a7a7a;
			}

			.money {
				width: 150rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 36rpx;
				color: #ff2323;
				justify-content: flex-end;
			}
		}

		.ovr {
			width: 312rpx;
			background: #ffffff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 18rpx;
			margin-right: 24rpx;
		}
	}

	.part {
		width: 168rpx;
		height: 70rpx;
		background: url(@/static/index/shangche.png);
		background-size: 168rpx 70rpx;
		background-repeat: no-repeat;
		font-family: "YouSheBiaoTiHei";
		font-weight: 400;
		font-size: 42rpx;
		color: #bbfc5b;
	}

	.part1 {
		width: 168rpx;
		height: 70rpx;
		background: url(@/static/index/hexiao.png);
		background-size: 168rpx 70rpx;
		background-repeat: no-repeat;
		font-family: "YouSheBiaoTiHei";
		font-weight: 400;
		font-size: 42rpx;
		color: #323232;
	}

	.tofb {
		margin-top: 50rpx;
		width: 280rpx;
		height: 70rpx;
		background: #323232;
		border-radius: 198rpx;
		font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
		font-weight: 500;
		font-size: 32rpx;
		color: #BBFC5B;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>