dyqc_hdapp/packageA/my/orderList.vue

<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.list = [];
		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;

			.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: 100%;
			margin-left: 30rpx;
			margin-top: 30rpx;
			position: fixed;
			top: 80rpx;

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