chuangte/CarRental
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
38c586d74f
CarRental/page_user/renewCar.vue

1055 lines
19 KiB
Vue
Raw Normal View History

111
2024-09-19 17:33:39 +08:00
<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="info_tit">
待还车
</view>
<view class="box1">
<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="info_li">
<view class="txt1">
租金
</view>
<view class="txt2">
￥108
</view>
</view>
<view class="info_li">
<view class="txt1">
租金
</view>
<view class="txt2">
￥108
</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>
<view class="sub_box">
<view class="detail" v-if="false">
<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() {
},
methods: {
}
}
</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 {
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>
Reference in New Issue Copy Permalink