JP-ChargeTeam51/pages/user/preengaged/preengagedListDetails.vue

<template>
	<view >
		<u-navbar title="预约单详情">
		
		</u-navbar>
		<view class="iconfont tittle-font">
			&#xe616;
		</view>
		<u-alert-tips type="warning" :title="title" :description="description"></u-alert-tips>
		<view class="reverse-time">
			<view class="time">
				预留30分钟
			</view>
			<view class="details-item">
				<view class="item">
					<view class="item-name">
						预约单号
					</view>
					<view class="item-content">
						0000111122223333
					</view>
				</view>
				<view class="item">
					<view class="item-name">
						预计开始充电
					</view>
					<view class="item-content">
						
						2022-05-31 09:30:00
						
					</view>
				</view>
				<view class="item">
					<view class="item-name">
						预计充电时长
					</view>
					<view class="item-content">
						6小时
					</view>
				</view>
			</view>
			
		</view>
		<!-- 充电桩详情 -->
		<view class="charge-pile">
		<view class="box">
			<view class="name">
				荆鹏软件园充电站/1号快充桩
			</view>
			<view class="address">
				湖北省荆州市沙市区江津东路附155号
			</view>
			<text class="iconfont more">
				&#xe600;
			</text>
		</view>
		
		<view class="tel">
			<view class="tel-text">
				联系电话
			</view>
			<view class="tel-num">
				李先生 15100001111
				<text class="iconfont more2">
					&#xe600;
				</text>
			</view>
		</view>
			<view class="details-item">
				<view class="item">
					<view class="item-name">
						预约单生成时间
						
					</view>
					<view class="item-content">
						2022-05-31 09:00:00

					</view>
				</view>
				<view class="item">
					<view class="item-name">
					
						电费单价(kW/h)
						
					</view>
					<view class="item-content">
						1.00元
					</view>
				</view>
				<view class="item">
					<view class="item-name">
						
						充电服务费(kW/h)
					</view>
					<view class="item-content">
							1.00元
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
		export default {
			data() {
				return{
					description: '等待桩主确认预约单，剩余时间04:59:59'
				}
			}
		}
</script>

<style lang="scss" scoped>
	.tittle-font {
			
			font-size: 24px;
			position: fixed;
			top: 12px;
			right: 16px;
			z-index: 99999;
	
		}
		/deep/.u-alert-desc{
			width: 100vw;
			text-align: center;
			color: #ff5a00;
		}
		.reverse-time{
			background-color: #fff;
			padding: 36px 12px 16px 28px;
			.time{
				height: 36px;
				color: rgba(0, 185, 98, 100);
				font-size: 36px;
				text-align: center;
			}
			
		}
		.details-item{
			margin-top: 32px;
			padding-right: 16px;
			padding-bottom: 46px;
			.item{
				display: flex;
				justify-content: space-between;
				margin-top: 8px;
			}
		}
	
		// 充电桩详情
		.charge-pile{
			background-color: #fff;
			margin-top: 12px;
			padding: 0 0 12px 16px ;
			.box{
				position: relative;
				height: 66px;
				padding: 12px 0 ;
				.more{
					position: absolute;
					top: 19px;
					right: 12px;
					font-size: 24px;
					color: #b3b3b3;
				}
			}
			
			.name{
				line-height: 18px;
				color: rgba(16, 16, 16, 100);
				font-size: 18px;
				font-weight: 600;
			}
			.address{
				line-height: 20px;
				color: rgba(51, 51, 51, 100);
				margin-top: 4px;
			}
			// 联系电话
			.tel{
				line-height: 48px;
				display: flex;
				justify-content: space-between;
				border: 1px solid #eef2f0;
				border-left: none;
				position: relative;
				.tel-num{
					width: 50%;
				}
				.more2{
					display: inline-block;
					font-size: 24px;
					color: #b3b3b3;
					height: 48px;
                    position: absolute;
					top: 1px;
					right: 12px;
					
				}
			}
			.item{
				margin-top: 20px;
			}
		}
</style>