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

<template>
	<view >
		<ujp-navbar title="充电结束">
		</ujp-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="charge-infos">
		<view class="item">
			<view class="title">
				充电金额
			</view>
			<view class="content">
				50.00
			</view>
		</view>
		<view class="item">
			<view class="title">
				充电时长
			</view>
			<view class="content">
				00.00.00
			</view>
		</view>
		<view class="item">
			<view class="title">
				优惠金额
			</view>
			<view class="content discounts">
				-6.00元
			</view>
		</view>
		<view class="item">
			<view class="title">
				会员活动
			</view>
			<view class="content">
				充电月卡
			</view>
		</view>
	</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>
	export default{
		data() {
			return {
				elderMode:false,
				}
		},
		onReady(){
			this.elderMode = this.carhelp.get('getElderModeClass')  == '长辈模式';
			if(this.elderMode)
				this.theme('elder')
			else
				this.theme('standard')
		},
		methods:{
			theme(type) {
				
			  if(type == 'elder')	
			  {
				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
				 
			  }
			  else
			  {
				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
				 
				  
			  } 
			}
		}
	}
</script>
<style>
	page{
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	@import "@/_theme.scss";
	.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;
				@include themeify{
					font-size: themed('font-size13');
				}
/*				font-size: 36px;*/
				padding-left: 16rpx;
				letter-spacing: 2rpx;
				color: rgba(51, 51, 51, 100);
				.progress-text{
					@include themeify{
						font-size: themed('font-size2');
					}
/*					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);
		@include themeify{
			font-size: themed('font-size7');
			height: themed('font-size12');
		}
/*		font-size: 24px;*/
		text-align: center;
	}
	.item-text{
		eight: 20px;
		color: rgba(153, 153, 153, 100);
		@include themeify{
			font-size: themed('font-size2');
 		}
/*		font-size: 14px;*/
		text-align: center;
	}
}

.charge-infos{
	padding: 20px 36px;
	margin: 0 auto;
	.item{
		display: flex;
		justify-content: space-between;
		color: rgba(102, 102, 102, 100);
		font-size: 18px;
		margin-bottom: 12px;
		.discounts{
			color:red
		}
	}
}

.bottom{
	display: flex;
	  
	  padding: 12px 36px;
	 
	  // margin: auto;
	  .u-size-default[data-v-3bf2dba7]{
		  border: 1px solid rgba(0, 185, 98, 100);
		  color: #00b962;
		  width: 44%;
	  }
}
</style>