chuangte/CarRental
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
bf0a2d0e98
CarRental/page_user/carStore.vue

490 lines
10 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='#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>
Reference in New Issue Copy Permalink