<template>
<view>
	<top-box></top-box>
	<view class="main-box">
		<view class="carinfo">
			<view class="plate">
				<view>车牌号</view>
				<view><image src="../../static/icon1.png"></image></view>
				<view>电池AI云管理监控中</view>
			</view>
			<view class="plate-number">
				<view>暂无信息</view>
				<view><image src="../../static/icon2.png"></image></view>
			</view>
			<view class="battery-soc">
				<view>电池SOC</view>
				<view>
					<view class="strip"> 
						<!-- 第二层进度条的颜色 -->
						<view class="blue" :style="'width:'+info.progress+'%'"> 
							<!-- （进度条显示的图片  样式：根据父元素进行相对定位 ，本身绝对定位 ） -->
							<text class="protext" :style="'left:'+info.progress+'%'"></text>
							<view class="pronumber" :style="'left:'+(info.progress-6)+'%'">{{info.progress}}%</view>
						</view>
					</view>
				</view>
			</view>
			<view class="battery-info">
				<view>
					<view>0km</view>
					<view>已行驶里程</view>
				</view>
				<view>
					<view>0km</view>
					<view>预计剩余里程</view>
				</view>
				<view>
					<view>0V</view>
					<view>电压</view>
				</view>
				<view>
					<view>0A</view>
					<view>电流</view>
				</view>
			</view>
		</view>
		<view class="change-title">
			<view><image src="../../static/icon3.png"></image></view>
			<view>换电站信息</view>
		</view>
		<view class="change-box">
			<view class="title">三江新区沙坪换电站</view>
			<view class="tags">
				<view>常去地点</view><view>24小时营业</view>
			</view>
			<view class="piclist">
				<view><image src="../../static/pic.jpg"></image></view>
				<view><image src="../../static/pic.jpg"></image></view>
			</view>
			<view class="address">
				<view>876m · 四川省宜宾市三江新区沙坪镇沙溪街道89号</view>
				<view>
					<image src="../../static/icon4.png"></image>
					<view>电话</view>
				</view>
				<view @click="getposition">
					<image src="../../static/icon5.png"></image>
					<view>路线</view>
				</view>
			</view>
			<view class="battery-num">
				<view>可换电池</view><view>8</view>
			</view>
		</view>
	</view>
	<tab-bar></tab-bar>
</view>

</template>

<script>
	export default {
		data() {
			return {
				info:{
					progress:10,	
				},
				// isAuthShow: true,
			}
		},
		// onShow() {
		// 	this.$store.dispatch("usersStatus").then(()=>{
		// 		this.isAuthShow = false;
		// 	}).catch((error)=>{
		// 		this.isAuthShow = true;
				
		// 	});
		// },
		methods: {
			//获取用户位置信息
			getposition(){
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						console.log(res)
						
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.authorization{
		width: 640rpx;
		height: 840rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.main-box{
		padding: 0 30rpx;
		.carinfo{
			width: 690rpx;
			height: 350rpx;
			padding: 32rpx;
			box-sizing:border-box;
			background-image: url('https://xcx.xnymzx.com/zkstation/car-bg.png');
			background-size: 100% 100%;
			display: flex;
			flex-direction:column;
			justify-content: space-between;
			.plate{
				display: flex;
				justify-content: space-between;
				view:first-child{
					flex: 1;
				}
				image{
					width: 24rpx;
					height: 24rpx;
					vertical-align: middle;
				}
				view:last-child{
					width: 280rpx;
					text-align: right;
					color: #6cc57d;
					font-size: 30rpx;
				}
			}
			.plate-number{
				display: flex;
				
				image{
					width: 26rpx;
					height: 26rpx;
					vertical-align: middle;
				}
				view:first-child{
					font-weight: 600;
					font-size: 32rpx;
					padding-right: 15rpx;
				}
				
			}
			.battery-soc{
				display: flex;
				
				view:first-child{
					width: 138rpx;
				}
				view:last-child{
					flex: 1;
					.strip {
						/* 父元素相对定位 */
						position: relative;
						width: 480rpx;
						height: 18rpx;
						background-color: #fff;
						top: 10rpx;
					}
					.blue {
						height: 18rpx;
						background-color: #ff7d00;
						font-size: 28rpx;
					}
					.protext{
						width:2rpx;
						height:32rpx;
						background: #86909c;
						/* 子元素绝对定位   */
						position: absolute;
						/* 定位方向：属性值 */
						top:-9rpx
					}
					.pronumber{
						font-size: 26rpx;
						font-weight: bold;
						position: absolute;
						/* 定位方向：属性值 */
						top:30rpx;
					}
				}
			}
			.battery-info{
				display: flex;
				justify-content: space-between;
				
				text-align: center;
				line-height: 36rpx;
				view > view:first-child{
					font-weight: bold;
				}
				view > view:last-child{
					color: #939da7;
					font-size: 26rpx;
				}
			}
		}
		.change-title{
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			display: flex;
			margin: 30rpx 0;
			image{
				width: 9rpx;
				height: 39rpx;
			}
			view:first-child{
				padding-right: 12rpx;
			}
			view:last-child{
				font-weight: bold;
				font-size: 32rpx;
				line-height: 32rpx;
			}
		}
		.change-box{
			width: 690rpx;
			box-sizing: border-box;
			border-radius: 25rpx;
			background-color: #fff;
			padding:20rpx 30rpx;
			display: flex;
			flex-direction:column;
			overflow:hidden;
			.title{
				font-weight: bold;
				color: #110d2e;
				font-size: 34rpx;
			}
			.tags{
				display: flex;
				view{
					background: #f5f5f5;
					color: #979797;
					font-size: 24rpx;
					padding: 8rpx 15rpx;
					margin:15rpx 12rpx 15rpx 0rpx;
					border-radius: 5rpx;
				}
			}
			.piclist{
				display: flex;
				justify-content: space-between;
				margin: 18rpx 0rpx;
				width: 630rpx;
				overflow:hidden;
				// view{
				// 	margin-right: 15rpx;
				// }
				image{
					width: 298rpx;
					height: 189rpx;
					box-sizing: border-box;
					border-radius: 15rpx;
				}
			}
			.address{
				display: flex;
				justify-content: space-between;
				text-align: center;
				color: #86909c;
				font-size: 24rpx;
				view:first-child{
					width: 445rpx;
					text-align: left;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
				}
				image{
					width: 44rpx;
					height: 44rpx;
				}
			}
			.battery-num{
				color: #86909c;
				font-size:30rpx;
				margin-top: 12rpx;
				display: flex;
				line-height: 36rpx;
				view:last-child{
					color: #000000;
					font-weight: 600;
					margin-left: 15rpx;
					font-size: 36rpx;
				}
			}
		}
	}
	
</style>
