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

<template>
	<view >
		<u-navbar title="充电结束">
		</u-navbar>
		<view class="progress-bar">
				<u-circle-progress width="400" active-color="green" :percent="50" border-width="20">
					<view class="u-progress-content">
						<!-- <view class="u-progress-dot"></view> -->
						<text class='u-progress-info'>
							50%
							<p class="progress-text">当前电量</p>
						</text>
						
					</view>
					
					<view class="bot"></view>
				</u-circle-progress>
		</view>
	
	<view class="time-price">
		<view class="item">
			<view class="item-num">
				00:20:00
			</view>
			<view class="item-text">
				充电时长
			</view>
		</view>
		<view class="item">
			<view class="item-num">
			20:00元
			</view>
			<view class="item-text">
				充电金额
			</view>
		</view>
	</view>
	<view class="bottom">
		 <u-button size="default" shape="circle">返回首页</u-button>
		 <u-button size="default" shape="circle">查看订单详情</u-button>
	</view>
	</view>
</template>

<script>
</script>
<style>
	page{
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.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 {
				display: block;
				font-size: 36px;
				padding-left: 16rpx;
				letter-spacing: 2rpx;
				color: rgba(51, 51, 51, 100);
				.progress-text{
					font-size: 14px;
					text-align: center;
					color: #666666;
				}
			}
			
			/deep/.u-progress-dot[data-v-05b104e0]{
				display: none;
			}
			/deep/.u-circle-progress[data-v-cab6fc66]{
				margin: 30px ;
			}
		
	}
.time-price{
	display: flex;
	justify-content: space-between;
	padding: 0 65px;
	.item-num{
		height: 33px;
		color: rgba(51, 51, 51, 100);
		font-size: 24px;
		text-align: center;
	}
	.item-text{
		eight: 20px;
		color: rgba(153, 153, 153, 100);
		font-size: 14px;
		text-align: center;
	}
}
.bottom{
	display: flex;
	  width: 343px;
	  padding: 12px 16px;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  margin: auto;
	  .u-size-default[data-v-3bf2dba7]{
		  border: 1px solid rgba(0, 185, 98, 100);
		  color: #00b962;
		  width: 44%;
	  }
}
</style>