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

470 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='#000'></u-navbar>
</view>
<view class="top">
<view class="model">
朵VFLU-1376
</view>
<view class="switch">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uXLYdSpcdiKGoNpJBiGZ" mode="" class="replay">
</image>
正在连接
<image src="https://lxnapi.ccttiot.com/bike/img/static/ukhgaoFSHmlJWkgyC4U4" mode=""
class="bluetooth"></image>
</view>
</view>
<view class="power">
<view class="tit">
电量
</view>
<view class="num">
96%
</view>
</view>
<view class="car_img">
<image src="https://lxnapi.ccttiot.com/bike/img/static/ukC1CG1uAz1pwV0qZ03n" mode=""></image>
</view>
<view class="tips">
<view class="yuan">
</view>
当前车辆状态：锁车
</view>
<view class="btn_box">
<view class="btn1">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uaW9kLzl1RYoU8WyiuYL" mode=""></image>
鸣笛寻车
</view>
<view class="btn2" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
<view class="slider" :style="{ transform: 'translateX(' + translateX + 'rpx)' }"></view>
右滑启动
</view>
<view class="btn1">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uGrptW1UAUQy0v1pQQvC" mode=""></image>
鸣笛寻车
</view>
</view>
<view class="order_info">
<view class="info_top">
<view class="tit1">
欢迎使用电动车
</view>
<view class="txt1">
查看订单 <image src="https://lxnapi.ccttiot.com/bike/img/static/uAxKe5Or9LMUn4DNBL9B" mode=""></image>
</view>
</view>
<view class="info_cont">
<image src="https://lxnapi.ccttiot.com/bike/img/static/ueWcek6yF0kSadYfYhyV" mode=""></image>
<view class="infos">
<view class="time">
租期剩余1天
</view>
<view class="data">
09/05 16:00到期
</view>
<view class="tips1">
到期后将无法用车
</view>
</view>
</view>
<view class="btns">
去续租
</view>
</view>
<view class="store_car">
<view class="tops">
<view class="type">
租车门店
</view>
云行租车（汇丰公寓）
</view>
<view class="address">
天目山路148号
</view>
<view class="time">
营业时间：09:00-21:00
</view>
<view class="store_btn_li">
<view class="store_btn">
<image src="https://lxnapi.ccttiot.com/bike/img/static/umkJCfPac4Mrzni8aoda" mode=""></image>
联系门店
</view>
<view class="store_btn">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uolYZ4dLvxxI2n2WzZ4J" mode=""></image>
导航到店
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
translateX: 0, // 滑块的滑动距离
startX: 0, // 滑动开始的X坐标
isUnlocked: false, // 是否已经解锁
maxDistance: 268, // 最大滑动距离
}
},
methods: {
touchStart(event) {
// 记录起始触摸点
this.startX = event.touches[0].pageX;
},
touchMove(event) {
if (this.isUnlocked) return; // 如果已解锁，禁止再次滑动
// 计算滑动的距离
const moveX = event.touches[0].pageX - this.startX;
// 限制滑块在滑动区域内
if (moveX >= 0 && moveX <= this.maxDistance) {
this.translateX = moveX;
}
},
touchEnd() {
if (this.translateX >= this.maxDistance * 0.8) {
// 如果滑动超过80%的距离，视为解锁成功
this.isUnlocked = true;
this.translateX = this.maxDistance;
this.unlockAction(); // 触发解锁动作
} else {
// 如果未达到解锁距离，则回弹
this.translateX = 0;
}
},
unlockAction() {
// 解锁成功后的操作
console.log('解锁成功！');
},
}
}
</script>
<style lang="scss">
page {
overflow-y: auto;
background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uYRs7Cv2Pbp95w3KjGO3');
background-size: cover; /* 背景图片等比缩放以覆盖整个容器 */
background-position: center; /* 背景图片居中显示 */
background-repeat: no-repeat; /* 防止背景图片重复 */
min-height: 100vh; /* 确保页面至少有 100% 的视窗高度，避免高度不足导致无法滚动 */
}
.page {
width: 750rpx;
height: 100vh;
.order_info{
position: relative;
margin: 0 auto;
margin-top: 44rpx;
padding: 18rpx 24rpx 40rpx;
width: 698rpx;
border-radius: 30rpx;
background: #FFFFFF;
.btns{
position: absolute;
right: 32rpx;
bottom: 52rpx;
display: flex;
align-items: center;
justify-content: center;
width: 174rpx;
height: 68rpx;
background: #4297F3;
border-radius: 42rpx 42rpx 42rpx 42rpx;
font-weight: 600;
font-size: 36rpx;
color: #FFFFFF;
}
.info_top{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.tit1{
font-weight: 600;
font-size: 28rpx;
color: #3D3D3D;
}
.txt1{
font-weight: 400;
font-size: 24rpx;
color: #3D3D3D;
image{
margin-left: 6rpx;
width: 20rpx;
height: 20rpx;
}
}
}
.info_cont{
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
image{
width: 108rpx;
height: 108rpx;
}
.infos{
margin-top: 30rpx;
margin-left: 36rpx;
.time{
font-weight: 600;
font-size: 32rpx;
color: #3D3D3D;
}
.data{
margin-top: 10rpx;
font-weight: 400;
font-size: 32rpx;
color: #F14C4C;
}
.tips1{
margin-top: 8rpx;
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
}
}
}
}
.store_car {
border-radius: 30rpx;
width: 696rpx;
padding: 30rpx 28rpx 0 28rpx;
margin: 0 auto;
margin-top: 50rpx;
// height: 342rpx;
background: #FFFFFF;
.store_btn_li {
display: flex;
flex-wrap: nowrap;
margin-top: 26rpx;
margin-left: -28rpx;
border-top: 1rpx solid #D8D8D8;
width: 696rpx;
height: 102rpx;
.store_btn:first-child {
border-right: 1rpx solid #D8D8D8;
}
.store_btn {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
height: 102rpx;
image {
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
margin-right: 18rpx;
width: 40rpx;
height: 40rpx;
}
}
}
.line {
width: 100%;
height: 1rpx;
background: #D8D8D8;
}
.address {
margin-top: 48rpx;
font-weight: 400;
font-size: 36rpx;
color: #3D3D3D;
}
.time {
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
}
.tops {
display: flex;
align-items: center;
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
.type {
margin-right: 10rpx;
font-weight: 400;
font-size: 24rpx;
color: #0D75E5;
padding: 6rpx 12rpx;
background: #DCEDFF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
}
}
}
.btn_box{
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-around;
.btn1{
width: 130rpx;
display: flex;
flex-wrap: wrap;
justify-content: center;
font-weight: 400;
font-size: 32rpx;
color: #3D3D3D;
image{
margin-bottom: 10rpx;
width: 120rpx;
height: 120rpx;
}
}
.btn2 {
width: 268rpx;
height: 90rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #ebebeb;
border-radius: 45rpx;
padding-right: 30rpx;
position: relative;
overflow: hidden;
.slider {
width: 90rpx;
height: 90rpx;
background-color: #fff;
border-radius: 45rpx;
position: absolute;
left: 0;
}
}
}
.tips{
margin-top: 18rpx;
display: flex;
align-items: center;
justify-content: center;
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
.yuan{
margin-right: 14rpx;
border-radius: 50%;
width: 16rpx;
height: 16rpx;
background: #FF8282;
}
}
.car_img{
margin:0 auto;
margin-top: -108rpx;
width: 440rpx;
height: 340rpx;
}
.power{
padding-top: 60rpx;
margin: 0 auto;
margin-top: 60rpx;
width: 562rpx;
height: 348rpx;
background-image: url('https://lxnapi.ccttiot.com/bike/img/static/unqrw7KFxtvIjYBfBGus');
background-size: cover;
/* 背景图片等比缩放以覆盖整个容器 */
background-position: center;
/* 背景图片居中显示 */
.tit{
width: 100%;
text-align: center;
font-weight: 600;
font-size: 32rpx;
color: #3D3D3D;
}
.num{
margin-top: 16rpx;
width: 100%;
text-align: center;
font-weight: 600;
font-size: 88rpx;
color: #3D3D3D;
span{
font-size: 32rpx;
font-weight: 500;
}
}
}
.top {
margin-top: 200rpx;
width: 750rpx;
padding: 0 32rpx;
display: flex;
align-items: center;
justify-content: space-between;
.model {
font-weight: 600;
font-size: 48rpx;
color: #3D3D3D;
}
.switch {
// margin-left: auto;
width: 272rpx;
height: 60rpx;
background: #FFFFFF;
border-radius: 30rpx 30rpx 30rpx 30rpx;
font-weight: 400;
font-size: 32rpx;
color: #FF8282;
display: flex;
flex-wrap: nowrap;
align-items: center;
.replay {
margin-left: 22rpx;
margin-right: 14rpx;
width: 32rpx;
height: 32rpx;
}
.bluetooth {
margin-left: auto;
width: 60rpx;
height: 60rpx;
}
}
}
.fixed {
z-index: 999;
position: fixed;
top: 0;
}
}
</style>
Reference in New Issue Copy Permalink