490 lines
10 KiB
Vue
490 lines
10 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="fixed">
|
||
<u-navbar title="租车" :border-bottom="false" :background="background" title-color='#fff' title-size='36' height='45' back-icon-color='#fff'></u-navbar>
|
||
</view>
|
||
<image class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/uSCRH3mWfzIsDjQ3jGvy" mode=""></image>
|
||
<view class="statusBar" :style="{ paddingTop:statusBarHeight+'px' }"></view>
|
||
<view class="statusBars" :style="{ height:navBarHeight+'px' }"></view>
|
||
<view class="store_info">
|
||
<view class="left">
|
||
<view class="store_tit">
|
||
云行租车（汇丰公寓）
|
||
</view>
|
||
<view class="address">
|
||
天目山路148号
|
||
</view>
|
||
<view class="time">
|
||
营业时间 | 06:00 - 23:00
|
||
|
||
</view>
|
||
<view class="type_li">
|
||
<view class="type1">
|
||
3辆可租
|
||
</view>
|
||
<view class="type2">
|
||
免费送取车
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<image class="img1" src="https://lxnapi.ccttiot.com/bike/img/static/uG86Af90zSFQz9rZwgKb" mode=""></image>
|
||
<image class="img2" src="https://lxnapi.ccttiot.com/bike/img/static/uetWl3PLcTTOM3GYN6EW" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="ips_box">
|
||
<view class="ipt">
|
||
<view class="left">
|
||
<view class="txt">
|
||
取车时间
|
||
</view>
|
||
<view class="words">
|
||
09月2日
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uJkuBFsHACP6tnUo5nYm" mode="">
|
||
</image>
|
||
</view>
|
||
<view class="txt" style="margin-left: 58rpx;">
|
||
租车周期
|
||
</view>
|
||
<view class="words">
|
||
日租
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uJkuBFsHACP6tnUo5nYm" mode="">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
<view class="right" @click="showchoose=true">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uukFtL3r4DCAYPcUPsK0" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="car_card">
|
||
<view class="car_img">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uelru5qMK9hwbWMd2gQb" mode=""></image>
|
||
</view>
|
||
<view class="car_info">
|
||
<view class="info_top">
|
||
<view class="txt">
|
||
全新车网红泡泡50KM...
|
||
</view>
|
||
<view class="red1">
|
||
剩余
|
||
</view>
|
||
</view>
|
||
<view class="info_cont">
|
||
<view class="txt">
|
||
手机开关锁 | 定位防盗
|
||
</view>
|
||
<view class="red1">
|
||
<span>9</span>辆
|
||
</view>
|
||
</view>
|
||
<view class="info_bot">
|
||
<view class="price">
|
||
日租￥<span>9</span>
|
||
</view>
|
||
<view class="btn">
|
||
立即租
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tip">
|
||
没有更多了哦
|
||
</view>
|
||
<u-mask :show="showkf" :z-index='100' />
|
||
<view class="kfbox">
|
||
<view class="tit">
|
||
请选择您要联系的客服
|
||
</view>
|
||
<view class="words">
|
||
我们根据选择为您提供服务
|
||
</view>
|
||
<view class="phone_box">
|
||
<view class="img">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uwiRmed6Kz4OUJh00HBD" mode=""></image>
|
||
</view>
|
||
<view class="info">
|
||
<view class="name">
|
||
官方客服
|
||
</view>
|
||
<view class="phone">
|
||
000-260-1559
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="phone_box">
|
||
<view class="img">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/unsZOLTPuYrpQKF8MpFt" mode=""></image>
|
||
</view>
|
||
<view class="info">
|
||
<view class="name">
|
||
官方客服
|
||
</view>
|
||
<view class="phone">
|
||
000-260-1559
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<image class="close" src="https://lxnapi.ccttiot.com/bike/img/static/ulwJylk0JSmOdmU3FnnG" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
background: {
|
||
backgroundColor: 'transparent'
|
||
},
|
||
statusBarHeight:0,
|
||
navBarHeight:0,
|
||
showkf:true
|
||
|
||
}
|
||
},
|
||
onLoad() {
|
||
//获取手机状态栏高度
|
||
this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
|
||
|
||
// #ifdef MP-WEIXIN
|
||
// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
|
||
const custom = wx.getMenuButtonBoundingClientRect()
|
||
|
||
|
||
// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
|
||
this.navBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2
|
||
|
||
|
||
// #endif
|
||
|
||
},
|
||
methods: {
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #F7F7F7;
|
||
}
|
||
|
||
.page{
|
||
.kfbox{
|
||
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;
|
||
.close{
|
||
position: relative;
|
||
bottom: -124rpx;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
.phone_box{
|
||
margin-top:32rpx;
|
||
width: 528rpx;
|
||
height: 144rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0,0,0,0.1);
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
.img{
|
||
width: 86rpx;
|
||
height: 86rpx;
|
||
image{
|
||
width: 86rpx;
|
||
height: 86rpx;
|
||
}
|
||
}
|
||
.info{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-left: 34rpx;
|
||
.name{
|
||
width: 100%;
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
.phone{
|
||
width: 100%;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
}
|
||
.tit{
|
||
font-weight: 600;
|
||
font-size: 40rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
.words{
|
||
margin-bottom: 42rpx;
|
||
margin-top: 16rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
.tip{
|
||
margin-top: 30rpx;
|
||
width: 100;
|
||
text-align: center;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
.car_card{
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
margin: 0 auto;
|
||
margin-top: 16rpx;
|
||
width: 676rpx;
|
||
// height: 260rpx;
|
||
padding: 22rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
.car_img{
|
||
width: 216rpx;
|
||
height: 216rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
background: #EFEFEF;
|
||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||
image{
|
||
width: 172rpx;
|
||
height: 132rpx;
|
||
}
|
||
}
|
||
.car_info{
|
||
margin-left: 16rpx;
|
||
width: 70%;
|
||
// display: flex;
|
||
// flex-wrap: wrap;
|
||
|
||
.info_top{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
height: 38rpx;
|
||
.txt{
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
.red1{
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #FF1C1C;
|
||
}
|
||
}
|
||
.info_cont{
|
||
width: 100%;
|
||
height: 66rpx;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.txt{
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
.red1{
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #FF1C1C;
|
||
span{
|
||
font-size: 48rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
.info_bot{
|
||
margin-top: 56rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.price{
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #FF1C1C;
|
||
span{
|
||
font-size: 44rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
.btn{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 138rpx;
|
||
height: 50rpx;
|
||
background: #F14C4C;
|
||
border-radius: 31rpx 31rpx 31rpx 31rpx;
|
||
font-weight: 600;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
.ips_box {
|
||
margin-top: 16rpx;
|
||
padding: 22rpx 38rpx;
|
||
width: 750rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||
|
||
.ipt {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx 30rpx;
|
||
width: 100%;
|
||
background: #EFEFEF;
|
||
border-radius: 39rpx 39rpx 39rpx 39rpx;
|
||
|
||
.left {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
|
||
.txt {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #6F6F6F;
|
||
}
|
||
.words{
|
||
margin-left: 12rpx;
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
image{
|
||
width: 40rpx;
|
||
height: 22rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// .right {
|
||
// width: 32rpx;
|
||
// height: 32rpx;
|
||
|
||
// image {
|
||
// width: 32rpx;
|
||
// height: 32rpx;
|
||
// }
|
||
// }
|
||
}
|
||
}
|
||
|
||
.store_info{
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 30rpx;
|
||
margin-top: 62rpx;
|
||
width: 750rpx;
|
||
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
.right{
|
||
display: flex;
|
||
align-items: center;
|
||
width: 166rpx;
|
||
height: 166rpx;
|
||
background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uiIqqyZ7lKmwHShwdb7e');
|
||
background-size: cover;
|
||
/* 背景图片等比缩放以覆盖整个容器 */
|
||
background-position: center;
|
||
.img1{
|
||
margin-left: -29rpx;
|
||
width: 58rpx;
|
||
height: 58rpx;
|
||
}
|
||
.img2{
|
||
margin-left: 54rpx;
|
||
width: 58rpx;
|
||
height: 58rpx;
|
||
}
|
||
}
|
||
.left{
|
||
.store_tit{
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
.address{
|
||
margin-top: 10rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
.time{
|
||
margin-top: 8rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
.type_li{
|
||
margin-top: 22rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
.type1{
|
||
padding: 4rpx 12rpx;
|
||
background: #FFE9D4;
|
||
border-radius: 6rpx 6rpx 6rpx 6rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #FF8C1E;
|
||
}
|
||
.type2{
|
||
margin-left: 12rpx;
|
||
padding: 4rpx 12rpx;
|
||
background: #DCEDFF;
|
||
border-radius: 6rpx 6rpx 6rpx 6rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #4297F3;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.fixed {
|
||
z-index: 999;
|
||
position: fixed;
|
||
top: 0;
|
||
}
|
||
|
||
.backimg {
|
||
position: fixed;
|
||
width: 750rpx;
|
||
height: 324rpx;
|
||
z-index: -1;
|
||
}
|
||
}
|
||
</style>
|