1388 lines
26 KiB
Vue
1388 lines
26 KiB
Vue
<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> |