JP-ChargeTeam51/pages/searchPile/chargeProcess/exChanging.vue

<template>
	<view style="background-color: #fff;">
		<u-navbar title="排队中">
		</u-navbar>
		<view class="iconfont tittle-font">
			&#xe616;
		</view>
		
			
		
		<view class="progress-bar">
				<u-circle-progress width="440" active-color="green" :percent="0" border-width="50">
					<view class="u-progress-content">
						<!-- <view class="u-progress-dot"></view> -->
						<text class='u-progress-info'>前方等待
10位</text>
					</view>
					<view class="bot"></view>
				</u-circle-progress>
		</view>

		<view class="timer">
			00:00:00
		</view>
		<view class="charged">
			已充电0度
		</view>
		<view class="cost">
			<view class="">
				<view class="cost-top">
					0元
				</view>
				<view class="cost-bottom">
					实时费用
				</view>
			</view>
			<view class="line"></view>
			<view class="">
				<view class="cost-top">
					50.00元
					<view class="iconfont cost-font">&#xe633;</view>
				</view>
				<view class="cost-bottom">
					账户余额
				</view>
			</view>
		</view>
		<view class="power">
			<view>
				<view class="power-num">
					0.0v
				</view>
				<view class="power-text">
					电压
				</view>
			</view>
			<view class="line"></view>
			<view>
				<view class="power-num">
					0.00kW
				</view>
				<view class="power-text">
					功率
				</view>
			</view>
			<view class="line"></view>
			<view>
				<view class="power-num">
					0.0A
				</view>
				<view class="power-text">
					电流
				</view>
			</view>
		</view>
	     <view class="info">
	     	<view class="info-name">
	     		充电车辆
	     	</view>
			<view class="info-text">
				鄂D999999
			</view>
	     </view>
		 <view class="info">
		 	<view class="info-name">
		 		站点
		 	</view>
		 			<view class="info-text">
		 				荆鹏软件充电站 / A000152
		 			</view>
		 </view>
		 <view class="info">
		 	<view class="info-name">
		 		占位费说明
		 	</view>
		 			<view class="info-text">
		 				停止充电后30分钟即开始收取占位费用，1元/分钟
		 			</view>
		 </view>
		<view class="bottom">
			 <u-button type="primary" shape="circle">结束充电</u-button>
		</view>
	</view>
	
</template>

<script>
</script>
<style>
	page{
		background: #fff;
		padding-bottom: 114px;
	}
</style>
<style lang="scss" scoped>
	.tittle-font {
		font-size: 24px;
		position: fixed;
		top: 12px;
		right: 16px;
		z-index: 99999;

	}
	.bot{
		width: 220px;
		height: 220px;
		border: 2px #8161ff dotted;
		border-radius: 999px;
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		margin: auto;
	}
.progress-bar{
	
	
	
	/deep/.u-circle-progress{
		margin-left: 23.3% !important;
		position: relative;
	}
	
	.u-progress-content {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		
		.u-progress-dot {
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background-color: #fb9126;
		}
		
		.u-progress-info {
			font-size: 28px;
			padding-left: 16rpx;
			letter-spacing: 2rpx;
			color: #8161ff;
			font-weight: 600;
			text-align: center;
		}
		/deep/.u-progress-dot[data-v-05b104e0]{
			display: none;
		}
		/deep/.u-circle-progress[data-v-cab6fc66]{
			margin: 30px ;
		}
	
}

.starting{
	height: 22px;
	color: rgba(0, 185, 98, 100);
	font-size: 16px;
	text-align: center;
}
.timer{
	height: 43px;
	color: rgba(51, 51, 51, 100);
	font-size: 36px;
	text-align: center;
	margin-top: 40px;
}
.charged{
	height: 20px;
	color: rgba(153, 153, 153, 100);
	font-size: 14px;
	text-align: center;
	margin-top: 4px;
}
.cost{
	// width: 50%;
	padding: 0 90px;
	margin-top: 16px;
	display: flex;
	justify-content: space-between;
	.cost-top{
		line-height: 33px;
		text-align: center;
		font-size: 24px;
		position: relative;
		.cost-font{
			position: absolute;
			top: 0;right: -25px;
			color: #ff6200;
			font-size: 24px
		}
	}
	.cost-bottom{
		line-height: 20px;
		color: #999999;text-align: center;
	}
}
.line{
	width: 0;
	height:36px;
	border: 1px solid rgba(237, 237, 237, 100);
	margin-top: 10px;
	background-color: #ededed;
}

.power{
	display: flex;
	justify-content: space-around;
	padding: 0 55px;
	margin-top: 40px;
	.power-num{
		height: 27px;
		color: rgba(51, 51, 51, 100);
		font-size: 20px;
		text-align: center;
	}
	.power-text{
		height: 20px;
		color: rgba(153, 153, 153, 100);
		font-size: 14px;
		text-align: center;
	}
}

.info{
	display: flex;
	justify-content: space-between;
	margin: 0 40px;
	// height: 48px;
	line-height: 48px;
	background-color: rgba(255, 255, 255, 100);
	color: rgba(16, 16, 16, 100);
	border-bottom: 1px solid #ededed;
	.info-text{
		line-height: 23px;
		padding: 13px 0 12px;
		width: 200px;
		text-align: right;
	}
}

.bottom{

	background-color: #fff;
  padding: 12px 20px;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  margin: auto;
	  .u-btn--primary[data-v-3bf2dba7]{
		  background-color: #00b962;
	  }
}
</style>