<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="yj_box" v-if="false">
			<view class="top_txt">
				<view class="txts">
					押金
				</view>
				<view class="tips_btn">
					押金政策 <view class="iconfont icon-xiangyou1"></view>
				</view>
			</view>
			<view class="yj_line">
				<view class="yuan">
					取车前
				</view>
				<view class="line"></view>
				<view class="yuan">
					取车后
				</view>
			</view>
			<view class="txt_box">
				<view class="txt">
					押金￥199
				</view>
				<view class="txt">
					全部退还
				</view>
			</view>
			<view class="tip_box">
				<view class="tops">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/u43YAsOyDu65EK2KOFN8" mode=""></image>
					线上交押
				</view>
				<view class="words">
					押金由平台保管，安心有保障
				</view>
			</view>
			<view class="tipstxt">
				为保障您的权益，请勿与门店私下交易
			</view>
		</view>
		<view class="insurance_box" v-if="false">
			<view class="backcolor"></view>
			<view class="tit_box">
				增值服务
				<view class="txt">
					出行有保障，家人更放心
				</view>
			</view>
			<view class="info">
				<view class="left">
					骑行享权服务
					<view class="txt1">
						享权须知
					</view>
				</view>
				<view class="right_txt">
					￥10.8/天
				</view>
			</view>
			<view class="choose_insurance_box">
				<view class="insurance_li" v-for="item in 5" :key="index">

				</view>

			</view>
		</view>
		<view class="tabble_box" >
			<view class="tit">
				租车预定须知
			</view>
			<view class="tit" style="margin-top: 16rpx;">
				取车须知
			</view>
			<view class="txt2">
				请在2024-09-04 16:00:36时间前取车，超出时间将 无法保证车辆库存
			</view>
			<view class="tabble">
				<view class="tabble_top">
					<view class="tabbl_left">
						取消时间
					</view>
					<view class="tabble_right">
						扣费标准
					</view>
				</view>
				<view class="tabble_cont">
					<view class="tabbl_left">
						超过取车时间2小时内
					</view>
					<view class="tabble_right">
						扣费标准
					</view>
				</view>
				<view class="tabble_cont">
					<view class="tabbl_left">
						超过取车时间2小时内
					</view>
					<view class="tabble_right">
						扣费标准
					</view>
				</view>
			</view>
			<view class="tit" style="margin-top: 16rpx;">
				配套服务
			</view>

			<view class="tabble">
				<view class="tabble_top">
					<view class="tabbl_left">
						电池
					</view>
					<view class="tabble_right">
						其他
					</view>
				</view>

				<view class="tabble_cont">
					<view class="tabbl_left">
						超过取车时间2小时内
					</view>
					<view class="tabble_right">
						扣费标准
					</view>
				</view>
			</view>
		</view>


		<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 class="txt_li">
					<view class="txt5">
						派送费
					</view>
					<view class="txt5">
						￥{{priceInfo.deliveryFee}}
					</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: {
			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 == 'hour') {
					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) {
						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.getstoreInfo()
						this.getmodelInfo()
						this.getAgent()
						// 调用倒计时方法
						if (this.orderInfo.status == 0) {
							this.startCountdown(this.orderInfo.autoCancelTime);
						}

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			getstoreInfo() {
				let data = {
					storeId: this.orderInfo.storeId
				}
				this.$u.get(`app/getStore?`, data).then((res) => {
					if (res.code == 200) {
						this.storeInfo = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			getmodelInfo() {
				let data = {
					modelId: this.orderInfo.modelId
				}
				this.$u.get(`app/getModelById?`, data).then((res) => {
					if (res.code == 200) {
						this.modelInfo = res.data

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

				}
				this.$u.get(`app/getAgentByAgentId?`, data).then((res) => {
					if (res.code == 200) {
						this.agentInfo = 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;


		.sub_box {
			position: fixed;

			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: 0 24rpx;

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