<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>