1421 lines
27 KiB
Vue
1421 lines
27 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="fixed">
|
||
<u-navbar 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="left">
|
||
<view class="name">
|
||
全新车网红泡泡50KM续航
|
||
</view>
|
||
<view class="car_type_li">
|
||
<view class="type">
|
||
含电池
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uAIbCubNk8w9JI4DlDuX" mode=""></image>
|
||
</view>
|
||
|
||
<view class="delivery_cont">
|
||
<view class="delivery_top">
|
||
<view class="delivery_left" :class="typeidx==1?'leftact':''" @click="">
|
||
<view class="cont">
|
||
商家收费上门
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uH4UHjLW8QlIRyrroLpi" mode=""
|
||
v-if="typeidx==0"></image>
|
||
</view>
|
||
</view>
|
||
<view class="delivery_right" :class="typeidx==1?'rightact':''">
|
||
<view class="cont">
|
||
自行前往门店
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uH4UHjLW8QlIRyrroLpi" mode=""
|
||
v-if="typeidx==1"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="delivery_info">
|
||
<view class="type1" v-if="typeidx==0">
|
||
<view class="lins" :style="{ height: height + 'px' }">
|
||
|
||
</view>
|
||
<view class="getcar">
|
||
<view class="li" id="startType">
|
||
<view class="type">
|
||
取车
|
||
</view>
|
||
<view class="txt">
|
||
2024年09月04日 今天16:00
|
||
</view>
|
||
</view>
|
||
<view class="li">
|
||
<view style="width: 68rpx;">
|
||
|
||
</view>
|
||
<view class="txt" style="font-size: 28rpx;">
|
||
商家收费送车上门（服务费15元）
|
||
</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="types">
|
||
1天
|
||
</view>
|
||
<view class="tips">
|
||
取车后开始计算订单时长
|
||
</view>
|
||
</view>
|
||
|
||
<view class="li" style="margin-top: 28rpx;" id="endType">
|
||
<view class="backtype">
|
||
还车
|
||
</view>
|
||
<view class="txt">
|
||
2024年09月04日 今天16:00
|
||
</view>
|
||
</view>
|
||
<view class="li">
|
||
<view style="width: 68rpx;">
|
||
|
||
</view>
|
||
<view class="txt" style="font-size: 28rpx;">
|
||
商家收费送车上门（服务费15元）
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="type1" v-if="typeidx==1">
|
||
<view class="lins" :style="{ height: height + 'px' }">
|
||
|
||
</view>
|
||
<view class="maps">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uwTvqfidPmUFMxB5ViZa" mode=""></image>
|
||
</view>
|
||
<view class="getcar">
|
||
<view class="li" id="startType1">
|
||
<view class="type">
|
||
取车
|
||
</view>
|
||
<view class="txt">
|
||
2024年09月04日 今天16:00
|
||
</view>
|
||
</view>
|
||
<view class="li">
|
||
<view style="width: 68rpx;">
|
||
|
||
</view>
|
||
<view class="txt" style="font-size: 28rpx;width: 90%;">
|
||
自行前往门店取车 福建省宁德市福鼎市太...
|
||
门店距【福鼎太姥山...】直线距离3.8km
|
||
</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="types">
|
||
1天
|
||
</view>
|
||
<view class="tips">
|
||
取车后开始计算订单时长
|
||
</view>
|
||
</view>
|
||
|
||
<view class="li" style="margin-top: 28rpx;" id="endType1">
|
||
<view class="backtype">
|
||
还车
|
||
</view>
|
||
<view class="txt">
|
||
2024年09月04日 今天16:00
|
||
</view>
|
||
</view>
|
||
<view class="li">
|
||
<view style="width: 68rpx;">
|
||
|
||
</view>
|
||
<view class="txt" style="font-size: 28rpx;width: 90%;">
|
||
自行前往门店还车 福建省宁德市福鼎市太...
|
||
门店距【福鼎太姥山...】直线距离3.8km
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="time_card">
|
||
<view class="tit">
|
||
选择租车方案
|
||
</view>
|
||
<view class="choose_box">
|
||
<view class="choose_li act1">
|
||
<view class="time">
|
||
1小时
|
||
</view>
|
||
<view class="price">
|
||
￥ <span>58</span>
|
||
</view>
|
||
<view class="hot">
|
||
21:00前还车
|
||
</view>
|
||
</view>
|
||
<view class="choose_li ">
|
||
<view class="time">
|
||
1小时
|
||
</view>
|
||
<view class="price">
|
||
￥ <span>58</span>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="choose_li act1" v-for="item in 5" :key="item">
|
||
<view class="time">
|
||
1小时
|
||
</view>
|
||
<view class="price">
|
||
￥ <span>58</span>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="num_box">
|
||
<view class="lefttxt">
|
||
租车时长
|
||
</view>
|
||
<view class="right">
|
||
<view class="txt">
|
||
共1天
|
||
</view>
|
||
<view class="choosnum">
|
||
<view class="left">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uTAyQiL5vJLelU4MBb1D" mode="">
|
||
</image>
|
||
</view>
|
||
<view class="cont">
|
||
1
|
||
</view>
|
||
<view class="right">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/usXAYHilspF1jJeMdPIE" mode="">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="yj_box">
|
||
<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">
|
||
<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>
|
||
<u-mask :show="showtips" :z-index='100' />
|
||
<view class="tips_box">
|
||
<view class="tit">
|
||
线上交押
|
||
</view>
|
||
<view class="txt">
|
||
取车前需支付押金，在商家确认还车及无
|
||
车损，还车后立即退还全部押金。
|
||
</view>
|
||
<view class="btn">
|
||
我知道了
|
||
</view>
|
||
</view>
|
||
<view class="sub_box">
|
||
<view class="detail">
|
||
|
||
<view class="tit">
|
||
订单明细
|
||
|
||
</view>
|
||
<view class="close">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uYLkBxKrJq35FjyHy2Jr" mode=""></image>
|
||
</view>
|
||
<view class="txt_li" v-for="item in 5" :key="item">
|
||
<view class="txt5">
|
||
租金
|
||
</view>
|
||
<view class="txt5">
|
||
￥108
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bot_box">
|
||
<view class="xiey">
|
||
<view class="yuan"></view>
|
||
<!-- <image src="https://lxnapi.ccttiot.com/bike/img/static/utRg4QWBaHX4RO3tgZQW" mode=""></image> -->
|
||
<view class="txt3">
|
||
已阅读并同意
|
||
</view>
|
||
<view class="txt4">
|
||
《电动车租赁用户协议》《享权须知》
|
||
</view>
|
||
</view>
|
||
<view class="price_box">
|
||
<view class="price">
|
||
￥<span> 347.9</span>
|
||
</view>
|
||
<view class="mx">
|
||
明细 <view class="iconfont icon-xiangxia">
|
||
|
||
</view>
|
||
</view>
|
||
<view class="btn">
|
||
去支付
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
typeidx: 1,
|
||
height: 0,
|
||
showtips: true
|
||
}
|
||
},
|
||
onShow() {
|
||
this.$nextTick(() => {
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query.select('.getcar').boundingClientRect(data => {
|
||
|
||
this.height = data.height + 45
|
||
console.log('ips_box height:', this.height);
|
||
}).exec();
|
||
}, 300);
|
||
this.calculateDistance();
|
||
},
|
||
methods: {
|
||
calculateDistance() {
|
||
const query = uni.createSelectorQuery().in(this);
|
||
|
||
// 选择 "取车" 的元素
|
||
query.select('#startType1').boundingClientRect(startRect => {
|
||
|
||
// 选择 "还车" 的元素
|
||
query.select('#endType1').boundingClientRect(endRect => {
|
||
|
||
// 计算 "取车" 和 "还车" 之间的距离
|
||
this.height = endRect.top - startRect.bottom;
|
||
|
||
|
||
}).exec();
|
||
|
||
}).exec();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #F7F7F7;
|
||
}
|
||
|
||
.page {
|
||
width: 750rpx;
|
||
padding-bottom: 220rpx;
|
||
|
||
.tips_box {
|
||
padding: 48rpx 30rpx;
|
||
position: fixed;
|
||
left: 82rpx;
|
||
top: 410rpx;
|
||
width: 590rpx;
|
||
// height: 282rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||
z-index: 110;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
|
||
.tit {
|
||
font-weight: 600;
|
||
font-size: 40rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.txt {
|
||
margin-top: 32rpx;
|
||
width: 506rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.btn {
|
||
margin-top: 46rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 506rpx;
|
||
height: 78rpx;
|
||
background: #4297F3;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
/* 圆角效果，模拟弧线 */
|
||
}
|
||
|
||
.delivery_cont {
|
||
width: 696rpx;
|
||
margin: 0 auto;
|
||
margin-top: 16rpx;
|
||
// height: 488rpx;
|
||
|
||
// background: #FFFFFF;
|
||
.delivery_info {
|
||
width: 100%;
|
||
background: #fff;
|
||
padding: 30rpx 20rpx;
|
||
border-radius: 0 0 30rpx 30rpx;
|
||
|
||
@mixin same-height-as-getcar {
|
||
height: 100%; // 设置为 getcar 高度
|
||
}
|
||
|
||
.type1 {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
.lins {
|
||
position: absolute;
|
||
left: 30rpx;
|
||
top: 46rpx;
|
||
flex-grow: 1;
|
||
width: 2rpx;
|
||
|
||
border-left: 1rpx dashed #D8D8D8;
|
||
|
||
}
|
||
|
||
.maps {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 100rpx;
|
||
width: 166rpx;
|
||
height: 166rpx;
|
||
background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uiIqqyZ7lKmwHShwdb7e');
|
||
background-size: cover;
|
||
/* 背景图片等比缩放以覆盖整个容器 */
|
||
background-position: center;
|
||
|
||
image {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 30rpx;
|
||
width: 96rpx;
|
||
height: 98rpx;
|
||
}
|
||
}
|
||
|
||
.getcar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
z-index: 10;
|
||
|
||
.li {
|
||
margin-top: 8rpx;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
|
||
.type {
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 68rpx;
|
||
height: 40rpx;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
border: 2rpx solid #4297F3;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #4297F3;
|
||
}
|
||
|
||
.txt {
|
||
|
||
margin-left: 18rpx;
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.types {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 68rpx;
|
||
height: 40rpx;
|
||
background: #DCEDFF;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
font-weight: 500;
|
||
font-size: 20rpx;
|
||
color: #4297F3;
|
||
|
||
}
|
||
|
||
.backtype {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 68rpx;
|
||
height: 40rpx;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #16BC32;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
border: 2rpx solid #16BC32;
|
||
}
|
||
|
||
.tips {
|
||
|
||
margin-left: 18rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #4297F3;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.delivery_top {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
|
||
.delivery_left {
|
||
width: 50%;
|
||
height: 100rpx;
|
||
background: #EEEEEE;
|
||
border-radius: 60rpx 0 0 0;
|
||
|
||
.cont {
|
||
position: relative;
|
||
padding-top: 26rpx;
|
||
text-align: center;
|
||
width: 100%;
|
||
background: #fff;
|
||
height: 100%;
|
||
border-radius: 60rpx 60rpx 0 0;
|
||
|
||
font-weight: 600;
|
||
font-size: 40rpx;
|
||
color: #3D3D3D;
|
||
|
||
image {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 92rpx;
|
||
height: 16rpx;
|
||
left: 114rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.leftact {
|
||
background: #fff;
|
||
border-radius: 60rpx 0 0 0;
|
||
|
||
.cont {
|
||
width: 100%;
|
||
background: #eee;
|
||
height: 100%;
|
||
border-radius: 60rpx 0 60rpx 0;
|
||
color: #808080;
|
||
|
||
}
|
||
}
|
||
|
||
.rightact {
|
||
background: red;
|
||
border-radius: 0 60rpx 0 0;
|
||
|
||
.cont {
|
||
width: 100%;
|
||
background: #fff;
|
||
height: 100%;
|
||
border-radius: 60rpx 60rpx 0 0;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
|
||
.delivery_right {
|
||
width: 50%;
|
||
height: 100rpx;
|
||
background: #eee;
|
||
border-radius: 0rpx 60rpx 0 0rpx;
|
||
|
||
.cont {
|
||
position: relative;
|
||
flex-wrap: wrap;
|
||
padding-top: 26rpx;
|
||
text-align: center;
|
||
width: 100%;
|
||
background: #fff;
|
||
height: 100%;
|
||
border-radius: 60rpx 60rpx 0 0rpx;
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #808080;
|
||
|
||
image {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 92rpx;
|
||
height: 16rpx;
|
||
left: 114rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.car_info {
|
||
margin: 0 auto;
|
||
margin-top: -200rpx;
|
||
width: 698rpx;
|
||
height: 196rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 24rpx;
|
||
|
||
.left {
|
||
.name {
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.car_type_li {
|
||
margin-top: 16rpx;
|
||
display: flex;
|
||
|
||
.type {
|
||
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> |