470 lines
10 KiB
Vue
470 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='#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> |