<template>
	<view class="page">
		<view class="fixed">
			<u-navbar :custom-back='back' title="续租 " :border-bottom="false" :background="background" title-color='#000'
				title-size='36' height='45' back-icon-color='#000'></u-navbar>
		</view>
		<view class="backimg">

		</view>
		<!-- <image class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/usCZzuQpGCBUpvzCfqyE" mode=""></image> -->
		<view class="car_info">
			<view class="info_tit">
				{{ typeReturn(orderInfo.status) }}
			</view>
			<view class="box1">
				<view class="left">
					<view class="name">
						{{ modelInfo.model }}
					</view>
					<view class="car_type_li">
						<view class="type" v-for="(items, indexs) in modelInfo.accessorys" :key="indexs">
							{{ items.name }}
						</view>

					</view>
				</view>
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uAIbCubNk8w9JI4DlDuX" mode=""></image>
			</view>
			<view class="info_li">
				<view class="txt1">
					租金
				</view>
				<view class="txt2">
					￥{{ orderInfo.price }}
				</view>
			</view>

			<view class="info_li">
				<view class="txt1">
					押金
				</view>
				<view class="txt2">
					￥{{ orderInfo.deposit }}
				</view>
			</view>
			<view class="info_li" v-if="orderInfo.deliveryMethod == 3">
				<view class="txt1">
					车辆派送费
				</view>
				<view class="txt2">

					￥{{ orderInfo.deliveryFee }}
				</view>
			</view>
			<view class="info_li">
				<view class="text">
					车辆编号
				</view>
				<view class="price">

					{{ orderInfo.sn }}
				</view>
			</view>
		</view>


		<view class="time_card">
			<view class="tit">
				选择租车方案
			</view>
			<view class="choose_box">
				<view class="choose_li" v-for="(item, index) in priceList" :key="index"
					:class="index == priceIndex ? 'act1' : ''" @click="changePrice(item, index)">
					<view class="time">
						1{{ timetype(item.rentalUnit) }}
					</view>
					<view class="price">
						￥ <span>{{ item.price }}</span>
					</view>
					<!-- <view class="hot">
					21:00前还车
				</view> -->
				</view>

			</view>
			<view class="num_box">
				<view class="lefttxt">
					租车时长
				</view>
				<view class="right">
					<view class="txt">
						共{{ timenum }}{{ timetype(chosePriceInfo.rentalUnit) }}
					</view>
					<view class="choosnum">
						<view class="left" @click="subtractnum()">
							<image src="https://lxnapi.ccttiot.com/bike/img/static/uTAyQiL5vJLelU4MBb1D" mode="">
							</image>
						</view>
						<view class="cont">
							{{ timenum }}
						</view>
						<view class="right" @click="addnum()">
							<image src="https://lxnapi.ccttiot.com/bike/img/static/usXAYHilspF1jJeMdPIE" mode="">
							</image>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="comTime">
			<view class="line">

			</view>
			<view class="expiryTime">
				<view class="type1">
					续租
				</view>
				<view class="data">
					{{ formatTime(orderInfo.expiryTime) }}
				</view>

			</view>
			<view class="tip">
				<view class="type2">
					{{ timenum }}{{ timetype(chosePriceInfo.rentalUnit) }}
				</view>
				<view class="tip_txt">
					到期后开始计算订单时长
				</view>
			</view>
			<view class="backtime">
				<view class="type3">
					还车
				</view>
				<view class="data">
					{{ backTime() }}
				</view>
			</view>
		</view>
	<u-mask :show="showmx" :z-index='100' @click="showmx = false" />
		<view class="sub_box">
			<view class="detail" v-if="showmx">

				<view class="tit">
					订单明细

				</view>
				<view class="close" @click="showmx = false">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uYLkBxKrJq35FjyHy2Jr" mode=""></image>
				</view>
				<view class="txt_li">
					<view class="txt5">
						租金
					</view>
					<view class="txt5">
						￥{{ priceInfo.rent }}
					</view>
				</view>
				<view class="txt_li">
					<view class="txt5">
						押金
					</view>
					<view class="txt5">
						￥{{ priceInfo.deposit }}
					</view>
				</view>
				
			</view>
			<view class="bot_box">
				<view class="xiey">
					<view class="yuan" v-if="agree == false" @click="agree = true"></view>
					<image src="https://lxnapi.ccttiot.com/bike/img/static/utRg4QWBaHX4RO3tgZQW" mode="" v-if="agree"
						@click="agree = false"></image>
					<view class="txt3" style="margin-left: 6rpx;">
						已阅读并同意
					</view>
					<view class="txt4">
						<span @click="toWord(0)">《电动车租赁用户协议》</span> <span @click="toWord(1)">《享权须知》</span>
					</view>
				</view>
				<view class="price_box">
					<view class="price">
						￥<span>{{ priceInfo.totalFee ? priceInfo.totalFee : '--' }}</span>
					</view>
					<view class="mx" @click="showmx = true">
						明细 <view class="iconfont icon-xiangxia">
							<!-- <view class="iconfont icon-xiangshang"> -->
						</view>
					</view>
					<view class="btn" @click="sub">
						去支付
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
export default {
	data() {
		return {
			typeidx: 1,
			height: 0,
			showtips: true,
			orderNo: '',
			orderInfo: {},
			storeInfo: {},
			agentInfo: {},
			modelInfo: {},
			priceList: [],
			chosePriceInfo: {},
			priceIndex: 0,
			priceInfo: {},
			timenum: 1,
			showmx: false,
			agree: false
		}
	},
	onShow() {

	},
	onLoad(e) {
		if (e.orderNo) {
			this.orderNo = e.orderNo
			this.getOrderInfo()
		}
	},
	methods: {
		formatTime(timeStr) {
			if (!timeStr) return '';
			const date = new Date(timeStr);
			const year = date.getFullYear();
			const month = (date.getMonth() + 1).toString().padStart(2, '0');
			const day = date.getDate().toString().padStart(2, '0');
			const hours = date.getHours().toString().padStart(2, '0');
			const minutes = date.getMinutes().toString().padStart(2, '0');

			return `${year}年${month}月${day}日 ${hours}:${minutes}`;
		},
		backTime() {
			if (this.chosePriceInfo.rentalUnit) {
				// 将 this.time 转换为 Date 对象
				// const timeParts = this.orderInfo.match(/(\d{4})年(\d{2})月(\d{2})日 (\d{2}):(\d{2})/);
				const startTime = new Date(
					this.orderInfo.expiryTime);

				// 确定要增加的时间单位
				let multiplier = this.timenum;
				switch (this.chosePriceInfo.rentalUnit) {
					case 'hours':
						startTime.setHours(startTime.getHours() + multiplier);
						break;
					case 'day':
						startTime.setDate(startTime.getDate() + multiplier);
						break;
					case 'week':
						startTime.setDate(startTime.getDate() + multiplier * 7);
						break;
					case 'month':
						startTime.setMonth(startTime.getMonth() + multiplier);
						break;
					case 'quarter':
						startTime.setMonth(startTime.getMonth() + multiplier * 3);
						break;
					case 'year':
						startTime.setFullYear(startTime.getFullYear() + multiplier);
						break;
					default:
						console.error('Unknown rental unit:', this.chosePriceInfo.rentalUnit);
				}

				// 格式化返回时间
				const year = startTime.getFullYear();
				const month = (startTime.getMonth() + 1).toString().padStart(2, '0');
				const day = startTime.getDate().toString().padStart(2, '0');
				const hours = startTime.getHours().toString().padStart(2, '0');
				const minutes = startTime.getMinutes().toString().padStart(2, '0');

				// 返回归还时间
				return `${year}年${month}月${day}日 ${hours}:${minutes}`;
			}

		},
		back() {
			uni.redirectTo({
				url: '/pages/my'
			})
		},
		typeReturn(num) {
			if (num == 0) {
				return '待支付'
			} else if (num == 1) {
				return '待取车'
			} else if (num == 2) {
				return '待送车'
			} else if (num == 3) {
				return '送车中'
			} else if (num == 4) {
				return '车辆使用中'
			} else if (num == 5) {
				return '超时取消'
			} else if (num == 6) {
				return '已取消'
			} else if (num == 1) {
				return '已结束'
			}
		},
		sub() {
			// if(this.paid){
			// 	 return; // 阻止后续代码执行
			// }
			if (this.agree == false) {
				uni.showToast({
					title: '请勾选协议',
					icon: 'none',
					duration: 2000
				});
				return; // 阻止后续代码执行
			}
			let data = {
				orderNo: this.orderInfo.orderNo,
				ruleId: this.chosePriceInfo.ruleId,

				num: this.timenum,

				type: 2
			};
			this.$u.post(`appVerify/relet?`, data).then((res) => {
				if (res.code == 200) {
					uni.showLoading({
						title: '加载中'
					})
					this.paid = true
					console.log(res);
					let that = this
					// this.freList=res.rows
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.response.timeStamp,
						nonceStr: res.data.response.nonceStr,
						package: res.data.response.packageVal,
						signType: res.data.response.signType,
						paySign: res.data.response.paySign,
						success(ress) {
							// that.ispaid = false
							// console.log('支付成功');
							// // 支付成功逻辑
							// clearInterval(that.timer)
							// that.orderinfo = {}
							// that.showdevice = false
							// that.deviceIndex = 0
							uni.hideLoading()
							uni.redirectTo({
								url: '/page_user/user_order?orderNo=' + res.data.orderNo
							})
						},
						fail(err) {
							// that.ispaid = false
							console.log(res);
							// 支付失败逻辑
							uni.showToast({
								title: '支付失败',
								icon: 'none',
								duration: 1000
							});

							// setTimeout(()=>{

							// },1100)
						}
					});
					// 成功处理逻辑
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		addnum() {
			this.timenum++
			this.getPrice()
		},
		subtractnum() {
			if (this.timenum > 1) {
				this.timenum--;
				this.getPrice()
			}
		},
		timetype(time) {
			if (time == 'hours') {
				return '小时'
			} else if (time == 'day') {
				return '天'
			} else if (time == 'week') {
				return '周'
			} else if (time == 'month') {
				return '月'
			} else if (time == 'quarter') {
				return '季度'
			} else if (time == 'year') {
				return '年'
			}
		},
		changePrice(item, idx) {
			this.chosePriceInfo = item
			this.priceIndex = idx
			this.getPrice()
		},
		getPrice() {

			let data = {
				modelId: this.orderInfo.modelId,

				ruleId: this.chosePriceInfo.ruleId,
				agentId: this.agentInfo.agentId,
				num: this.timenum,
				type: '2'
			}

			if (this.typeidx == 0) {
				if (this.agentInfo.isFreeCar) {
					data.deliveryMethod = 2
				} else {
					data.deliveryMethod = 1
				}
			} else {
				data.deliveryMethod = 3
			}

			this.$u.post(`app/calculatePrice`, data).then((res) => {
				if (res.code == 200) {
					this.priceInfo = res.data

				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		getpriceList() {
			let data = {
				modelId: this.orderInfo.modelId

			}
			this.$u.get(`app/getRuleByModelId?`, data).then((res) => {
				if (res.code == 200) {
					console.log(res.data);
					this.priceList = res.data;
					this.chosePriceInfo = this.priceList[0]
					setTimeout(() => {
						this.getPrice()
					}, 300)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		getOrderInfo() {
			let data = {
				orderNo: this.orderNo
			};
			this.$u.get(`appVerify/orderInfo?`, data).then((res) => {
				if (res.code === 200) {
					this.orderInfo = res.data;
					this.getpriceList()

					this.getmodelInfo()

					// 调用倒计时方法
					if (this.orderInfo.status == 0) {
						this.startCountdown(this.orderInfo.autoCancelTime);
					}

				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},

		getmodelInfo() {
			let data = {
				modelId: this.orderInfo.modelId
			}
			this.$u.get(`appVerify/getModelById?`, data).then((res) => {
				if (res.code == 200) {
					this.modelInfo = res.data

				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},


	}
}
</script>

<style lang="scss">
page {
	background-color: #F7F7F7;
}

.page {
	width: 750rpx;
	padding-bottom: 220rpx;

	.comTime {
		position: relative;
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 38rpx 20rpx;
		width: 696rpx;
		height: 234rpx;
		background: #FFFFFF;
		border-radius: 30rpx;

		.line {
			position: absolute;
			left: 52rpx;
			top: 78rpx;
			height: 80rpx;
			width: 2rpx;
			border-left: 2rpx dashed #D8D8D8;
			z-index: 0;
		}

		.backtime {
			margin-top: 24rpx;
			position: relative; // 添加相对定位
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			z-index: 2;

			.type3 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 68rpx;
				height: 40rpx;
				background: #fff;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 3rpx solid #16BC32;
				font-weight: 700;
				font-size: 24rpx;
				color: #16BC32;
			}

			.data {

				margin-left: 18rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #3D3D3D;
			}
		}

		.expiryTime {
			position: relative; // 添加相对定位
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			z-index: 2;

			.type1 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 68rpx;
				height: 40rpx;
				background: #fff;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 3rpx solid #4297F3;
				font-weight: 700;
				font-size: 24rpx;
				color: #4297F3;
			}

			.data {
				margin-left: 18rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #3D3D3D;
			}
		}

		.tip {
			margin-left: 10rpx;
			position: relative; // 添加相对定位
			margin-top: 18rpx;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			z-index: 2;

			.type2 {
				padding: 4rpx 12rpx;
				background: #DCEDFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-weight: 700;
				font-size: 20rpx;
				color: #4297F3;
			}

			.tip_txt {
				margin-left: 24rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #4297F3;
			}
		}
	}

	.sub_box {
		position: fixed;
		z-index: 110;
		bottom: 0;

		.detail {
			position: relative;
			width: 750rpx;
			padding: 36rpx;
			border-radius: 30rpx 30rpx 0 0;
			background: #fff;


			.tit {


				width: 100%;
				text-align: center;
				font-weight: 600;
				font-size: 40rpx;
				color: #3D3D3D;

			}

			.close {
				position: absolute;
				right: 36rpx;
				top: 36rpx;
				width: 34rpx;
				height: 34rpx;
			}

			.txt_li {
				margin-top: 22rpx;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;

				.txt5 {
					font-weight: 600;
					font-size: 32rpx;
					color: #3D3D3D;
				}
			}
		}

		.bot_box {
			padding: 28rpx;
			width: 750rpx;
			height: 198rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.3);
			border-radius: 0rpx 0rpx 0rpx 0rpx;

			.price_box {
				margin-top: 20rpx;
				display: flex;
				align-items: center;

				.price {
					font-weight: 500;
					font-size: 36rpx;
					color: #FF1C1C;

					span {
						font-weight: 600;
						font-size: 52rpx;
					}
				}

				.mx {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					margin-left: 32rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #4297F3;

					.icon-xiangxia {
						font-weight: 600;
						font-size: 20rpx;
					}
				}

				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: auto;
					width: 340rpx;
					height: 84rpx;
					background: #4297F3;
					border-radius: 42rpx 42rpx 42rpx 42rpx;
					font-weight: 500;
					font-size: 36rpx;
					color: #FFFFFF;
				}
			}

			.xiey {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;

				.yuan {
					width: 32rpx;
					height: 32rpx;
					border: 1rpx solid #3D3D3D;
					border-radius: 50%;
				}

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

				.txt3,
				.txt4 {
					font-weight: 400;
					font-size: 28rpx;
					white-space: nowrap; // 防止换行
				}

				.txt3 {
					color: #3D3D3D;
				}

				.txt4 {
					color: #4297F3;
				}
			}
		}



	}

	.tabble_box {
		width: 698rpx;
		margin: 0 auto;
		margin-top: 16rpx;
		padding: 18rpx 24rpx;

		border-radius: 30rpx;
		background: #FFFFFF;

		.tit {
			width: 100%;
			font-weight: 600;
			font-size: 28rpx;
			color: #3D3D3D;
		}

		.txt2 {
			margin-top: 16rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #3D3D3D;
		}

		.tabble {
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;

			.tabble_top {
				width: 100%;
				display: flex;
				flex-wrap: nowrap;

				.tabbl_left {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50%;
					height: 93rpx;
					background: #D8D8D8;
					border-radius: 30rpx 0 0 0;
					font-weight: 600;
					font-size: 32rpx;
					color: #3D3D3D;
					border-right: 1rpx solid #fff;
					border-bottom: 1rpx solid #fff;
				}

				.tabble_right {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50%;
					height: 93rpx;
					background: #D8D8D8;
					border-radius: 0 30rpx 0 0;
					font-weight: 600;
					font-size: 32rpx;
					color: #3D3D3D;
					border-bottom: 1rpx solid #fff;
				}

			}

			.tabble_cont:last-child {
				.tabbl_left {
					border-radius: 0 0 0 30rpx;
				}

				.tabble_right {
					border-radius: 0 0 30rpx 0;
				}
			}

			.tabble_cont {
				width: 100%;
				display: flex;
				flex-wrap: nowrap;

				.tabbl_left {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50%;
					height: 93rpx;
					background: #EFEFEF;
					font-weight: 400;
					font-size: 32rpx;
					color: #3D3D3D;
					border-right: 1rpx solid #fff;
					border-bottom: 1rpx solid #fff;
				}

				.tabble_right {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50%;
					height: 93rpx;
					background: #EFEFEF;
					font-weight: 400;
					font-size: 32rpx;
					color: #3D3D3D;
					border-bottom: 1rpx solid #fff;
				}

			}
		}
	}

	.insurance_box {
		position: relative;
		width: 698rpx;
		margin: 0 auto;
		margin-top: 16rpx;
		padding: 18rpx 24rpx;

		border-radius: 30rpx;
		background: #FFFFFF;

		.choose_insurance_box::-webkit-scrollbar {
			display: none;
		}

		.choose_insurance_box {
			margin-top: 26rpx;
			display: flex;
			flex-wrap: nowrap; // 确保子元素在一行内排列

			overflow-x: auto; // 启用水平滚动条
			white-space: nowrap; // 确保子元素不换行

			.insurance_li {
				margin-right: 14rpx;
				width: 280rpx;
				height: 607rpx;
				background: #F6F6F6;
				border-radius: 20rpx;
				flex-shrink: 0; // 防止子元素缩小，确保宽度固定
			}
		}

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

			.left {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #3D3D3D;

				.txt1 {
					margin-left: 12rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #0D75E5;
				}
			}

			.right_txt {
				font-weight: 600;
				font-size: 28rpx;
				color: #3D3D3D;
			}
		}

		.backcolor {
			position: absolute;
			left: 0;
			top: 0;
			width: 698rpx;
			height: 102rpx;
			border-radius: 30rpx 30rpx 0 0;
			background: linear-gradient(180deg, rgba(158, 250, 174, 0.38) 0%, rgba(149, 244, 165, 0) 100%);
			// z-index: 0;
		}

		.tit_box {
			display: flex;
			align-items: center;
			font-weight: 600;
			font-size: 28rpx;
			color: #16BC32;

			.txt {
				margin-left: 12rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #16BC32;
			}
		}
	}

	.yj_box {
		width: 698rpx;
		margin: 0 auto;
		margin-top: 16rpx;
		padding: 18rpx 24rpx;

		border-radius: 30rpx;
		background: #FFFFFF;

		.tipstxt {
			margin-top: 18rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #808080;
		}

		.tip_box {
			margin-top: 22rpx;
			width: 100%;
			padding: 30rpx 34rpx;
			background: #EFFDF4;
			border-radius: 12rpx 12rpx 12rpx 12rpx;

			.tops {
				display: flex;
				align-items: center;
				font-weight: 600;
				font-size: 32rpx;
				color: #3D3D3D;

				image {
					margin-right: 4rpx;
					width: 42rpx;
					height: 42rpx;
				}
			}

			.words {
				margin-top: 14rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #3D3D3D;
			}
		}

		.txt_box {
			margin-top: 14rpx;
			padding: 0 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.txt {
				font-weight: 400;
				font-size: 32rpx;
				color: #3D3D3D;
			}
		}

		.yj_line {
			margin-top: 50rpx;
			padding: 0 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.yuan {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 108rpx;
				height: 42rpx;
				border-radius: 26rpx 26rpx 26rpx 26rpx;
				border: 1rpx solid #808080;
				font-weight: 400;
				font-size: 24rpx;
				color: #808080;
			}

			.line {
				flex-grow: 1;
				height: 1rpx;
				border-bottom: 1rpx dashed #80808080;
			}
		}

		.top_txt {
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;

			.txts {
				font-weight: 600;
				font-size: 28rpx;
				color: #3D3D3D;
			}

			.tips_btn {
				// width: 100%;
				display: flex;
				align-items: center;

				font-weight: 400;
				font-size: 24rpx;
				color: #3D3D3D;

				.icon-xiangyou1 {
					font-size: 20rpx;
					color: #3D3D3D;
				}
			}
		}
	}

	.time_card {
		margin: 0 auto;
		margin-top: 16rpx;
		padding: 18rpx 24rpx;
		width: 698rpx;
		border-radius: 30rpx;
		background: #FFFFFF;

		.num_box {
			margin-top: 40rpx;
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;

			.lefttxt {
				font-weight: 400;
				font-size: 28rpx;
				color: #3D3D3D;
			}

			.right {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;

				.txt {
					font-weight: 600;
					font-size: 28rpx;
					color: #3D3D3D;
				}

				.choosnum {
					margin-left: 22rpx;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;

					.left {
						display: flex;

						align-items: center;
						justify-content: center;
						width: 65rpx;
						height: 56rpx;
						border: 2rpx solid #808080;
						border-radius: 30rpx 0 0 30rpx;

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

					.cont {
						display: flex;

						align-items: center;
						justify-content: center;
						width: 99rpx;
						height: 56rpx;
						border-bottom: 2rpx solid #808080;
						border-top: 2rpx solid #808080;

					}

					.right {
						display: flex;

						align-items: center;
						justify-content: center;
						width: 65rpx;
						height: 56rpx;
						border: 2rpx solid #808080;
						border-radius: 0rpx 30rpx 30rpx 0;

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

				}
			}

		}

		.tit {
			font-weight: 600;
			font-size: 28rpx;
			color: #3D3D3D;
		}

		.choose_box {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			margin-top: 12rpx;

			.choose_li:nth-child(4n) {
				margin-right: 0;
			}

			.choose_li {
				margin-top: 16rpx;
				margin-right: 14rpx;
				position: relative;
				// display: flex;
				// flex-wrap: wrap;
				// align-items: center;
				// justify-content: center;
				width: 150rpx;
				height: 150rpx;
				background: #F0F5F6;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				padding-top: 20rpx;
				border: 2rpx solid #fff;

				.time {

					width: 100%;
					text-align: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;
				}

				.price {
					width: 100%;
					text-align: center;
					font-weight: 400;
					font-size: 32rpx;
					color: #FF1C1C;

					span {
						font-size: 44rpx;
						font-weight: 600;
					}
				}

				.hot {
					position: absolute;
					left: 0;
					bottom: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #CCE5FF;
					width: 100%;
					height: 35rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #4297F3;
					border-radius: 0 0 12rpx 12rpx;
				}
			}

			.act1 {
				border: 2rpx solid #4297F3;
				background: #DCEDFF;
			}
		}
	}

	.tab-container {
		display: flex;
		border-bottom: 2px solid #ddd;
		/* 底部边框 */
	}

	.tab-item {
		position: relative;
		padding: 10px 20px;
		cursor: pointer;
		color: #666;
		font-size: 16px;
	}

	.tab-item.active {
		color: #333;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: -2px;
		left: 0;
		width: 100%;
		height: 4px;
		background-color: #2e9afe;
		/* 下划线颜色 */
		border-radius: 50px;
		/* 圆角效果，模拟弧线 */
	}


	.car_info {
		margin: 0 auto;
		margin-top: -200rpx;
		width: 698rpx;
		// height: 196rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		display: flex;
		flex-wrap: wrap;

		padding: 24rpx 24rpx;

		.info_li {
			margin-top: 24rpx;
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;

			.txt2 {
				font-weight: 600;
				font-size: 28rpx;
				color: #6F6F6F;
			}

			.txt3 {
				font-weight: 600;
				font-size: 24rpx;
				color: #3D3D3D;
			}
		}

		.info_tit {
			margin-top: 22rpx;
			font-weight: 600;
			font-size: 36rpx;
			color: #FF8C1E;
		}

		.box1 {
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;

			.left {
				.name {
					font-weight: 600;
					font-size: 32rpx;
					color: #3D3D3D;
				}

				.car_type_li {
					margin-top: 16rpx;
					display: flex;

					.type {
						margin-right: 12rpx;
						padding: 4rpx 10rpx;
						background: #DCEDFF;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #4297F3;
					}

				}
			}

			image {
				width: 156rpx;
				height: 150rpx;
			}
		}

	}




	.fixed {
		z-index: 999;
		position: fixed;
		top: 0;
	}

	.backimg {

		// position: fixed;


		z-index: -10;
		width: 750rpx;
		height: 428rpx;
		background: linear-gradient(180deg, #CCE5FF 0%, rgba(204, 229, 255, 0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;

	}
}
</style>