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

<template>
	<view>
		<ujp-navbar title="充电中">
			<view class="to-recharge">
				去充值
			</view>
		</ujp-navbar>
		<!-- 充电状态 -->
		<view class="charge-state">
			1111111111111111111111111111111
		<!-- 	<view class="img">
				<img src="../../../assets/img/Group (2).png" alt="">
			</view>
			<view class="state-infos">
				<view class="state">
					<text><img src="../../../assets/img/if-flash.svg" alt=""></text>充电中...
				</view>
				<view class="electric-quantity">
					<p>当前电量</p>
					<view class="percent">
						60<text>%</text>
					</view>
				</view>
				<view class="charge-time">
					<p>充电时长</p>
					<view class="time">
						00:24:01
					</view>
				</view>

			</view> -->

		</view>
		<!-- 充电信息 -->
		<view class="charge-info">
			<view class="info-item">
				<view class="content">
					00:24:01
				</view>
				<view class="name">
					充电时长
				</view>
			</view>
			<view class="info-item">
				<view class="content">
					15.000
				</view>
				<view class="name">
					已充电量(度)
				</view>
			</view>
			<view class="info-item">
				<view class="content">
					39.90
				</view>
				<view class="name">
					账户余额(元)
				</view>
			</view>
			<view class="info-item" v-if="infoShow">
				<view class="content">
					200V
				</view>
				<view class="name">
					电压
				</view>
			</view>
			<view class="info-item" v-if="infoShow">
				<view class="content">
					80KW
				</view>
				<view class="name">
					功率
				</view>
			</view>
			<view class="info-item" v-if="infoShow">
				<view class="content">
					120A
				</view>
				<view class="name">
					电流
				</view>
			</view>
			<view class="spread" @tap="spreadInfo">
				<view class="" v-if="this.infoShow==false">
					全部信息<text class="iconfont">&#xe62b;</text>
				</view>
				<view class="pack-up" v-if="this.infoShow==true">
					收起<text class="iconfont">&#xe605;</text>
				</view>
			</view>
			
		</view>
		<!-- 其他信息 -->
		<view class="else-infos">
			<view class="item">
				<view class="title">
					充电车辆
				</view>
				<view class="detail">
					鄂DT10080
				</view>

			</view>
			<view class="item">
				<view class="title">
					<p class="price">当前价格</p>
					<p class="time">09：00-15：00</p>
				</view>
				<view class="detail">
					<p class="electrovalence"><text class="num">0.74</text> 元/度</p>
					<p class="electrovalence-monthlyCard">电价:0.74 | 服务费:0.00(月卡)</p>
				</view>
			
			</view>
			<view class="item">
				<view class="title">
					充电类型
				</view>
				<view class="detail">
					充满自停
				</view>
			
			</view>
			<view class="item">
				<view class="title">
					优惠券
				</view>
				<view class="detail">
					未使用优惠券
				</view>
			
			</view>
			<view class="item">
				<view class="title">
					会员活动
				</view>
				<view class="detail">
					充电免服务费月卡
				</view>
			
			</view>
			<view class="item">
				<view class="title">
					站点
				</view>
				<view class="detail">
					玉桥充电站 / 5#桩
				</view>
			
			</view>
			
			<view class="item">
				<view class="title">
					占位费说明
				</view>
				<view class="detail">
					停止充电后30分钟即开始收取占位费用，1元/分钟
				</view>
			
			</view>

		</view>

     <view class="bottom">
		 <view class="img-box">
			 <img src="../../../assets/img/customer-service-2-line.svg" alt="">
		 	
		 </view>
		 <button>结束充电</button>
		 <view class="img-box">
		 	<img src="../../../assets/img/tools-fill.svg" alt="">
		 </view>
     	
     </view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
                infoShow:false
			}
		},
		methods: {
			spreadInfo(){
				this.infoShow=!this.infoShow
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f6f8f8;
		padding-bottom: 120px;
	}
.to-recharge{
	position: absolute;
	right: 22px;
	color: #333333
}
	// 充电状态
	.charge-state {
		
		width: 100%;
		


	}

	// 充电信息
	.charge-info {
		background-color: #ffffff;
		width: 88.2%;
		padding: 20px 0px 0px 0px;
		margin: 24px auto 0;
		box-shadow: 0px 2px 8px 0px #1A095A;
		border-radius: 12px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.info-item {
			width: 33%;
			text-align: center;
			margin-bottom: 14px;

			.content {
				line-height: 33px;
				color: rgba(51, 51, 51, 100);
				font-size: 22px;
                font-weight: 550;
			}

			.name {
				line-height: 22px;
				color: rgba(119, 119, 119, 100);
				font-size: 16px;

			}
		}
		.spread{
			width: 100%;
			background-color: rgba(244, 249, 247, 100);
			text-align: center;
			border: 1px solid rgba(206, 226, 217, 100);
			color: rgba(153, 153, 153, 100);
			line-height: 20px;
			border-radius: 0px 0px 12px 12px;
			padding: 4px 0;
			.iconfont{
				// font-size: 16px !important
			}
		}
	}

	//其他信息
	.else-infos {
		padding: 0 12px;
		background-color: #ffffff;
		width: 88.2%;
		margin: 16px auto 0;
		border-radius: 12px;
		.item{
			display: flex;
			justify-content: space-between;
			line-height: 23px;
			padding: 10px 0 10px 0;
			border-bottom: 1px solid #E9EBEE;
			.title{
				// width: 100px;
				width: 26.6vw;
				color: rgba(16, 16, 16, 100);
				font-size: 18px;
				font-weight: 550;
				.time{
					font-size: 13px;
					color: #666666 100%;
					font-weight: normal;
				}
			}
			.detail{
				// width: 197px;
				width: 52.5vw;
				color: rgba(16, 16, 16, 100);
				font-size: 16px;
				text-align: right;
				.electrovalence{
					.num{
						color: rgba(255, 61, 0, 100);
						margin-right: 4px;
					}
				}
				
				.electrovalence-monthlyCard{
					font-size: 14px;
					color: #959595;
				}
			}
			
		}

	}
	// 底部按钮
	.bottom{
		background:linear-gradient(rgba(255, 255, 255, 0),rgba(255, 255, 255, 100)) ;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		padding: 12px 24px;
		padding-bottom: 12px;
		.img-box{
			width: 48px;
			height: 48px;
			padding: 12px 0;
			background-color: rgba(210, 215, 213, 100);
			text-align: center;
			border-radius: 999px;
			
			img{
				
			}
		}
		button{
			width: 60.8%;
			background-color: black;
			color: #fff;
			height: 48px;
			border-radius: 50px;
			font-size: 18px;
		}
	}
</style>