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

<template>
	<view>
		<ujp-navbar title="我被预约">
			<view class="screen">筛选</view>
		</ujp-navbar>
		<view class="reservation-items">
			<view class="station-name">
				预约30分钟后充电
				<view class="toBe-confirmed btn">
					待确认
				</view>
			</view>
			<view class="details-items">
				<view class="items">
					<view class="items-name">
						预留截止时间

					</view>
					<view class="items-content">
						2022-05-31 09:30:00
						
					</view>
				</view>
				<view class="items">
					<view class="items-name">
					
						预计充电时长
					
					</view>
					<view class="items-content">
						
						6小时
						
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						
						预约站点
						
					</view>
					<view class="items-content">
						荆鹏充电站
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						
						预约桩号
					</view>
					<view class="items-content">
						1号快充桩
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						充电桩类型
					</view>
					<view class="items-content">
						交流充电桩
					</view>
				</view>
				
			</view>
			<view class="button">
					<u-button class="affirm" shape="circle">确认</u-button>
					<u-button class="contact" shape="circle">联系他</u-button>
				<u-button class="refuse" shape="circle">拒绝</u-button>

			</view>
		</view>

		<view class="reservation-items">
			<view class="station-name">
				预约30分钟后充电
				<view class="confirmed btn">
					已确认
				</view>
			</view>
			<view class="details-items">
				<view class="items">
					<view class="items-name">
						预留截止时间
			
					</view>
					<view class="items-content">
						2022-05-31 09:30:00
						
					</view>
				</view>
				<view class="items">
					<view class="items-name">
					
						预计充电时长
					
					</view>
					<view class="items-content">
						
						6小时
						
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						
						预约站点
						
					</view>
					<view class="items-content">
						荆鹏充电站
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						
						预约桩号
					</view>
					<view class="items-content">
						1号快充桩
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						充电桩类型
					</view>
					<view class="items-content">
						交流充电桩
					</view>
				</view>
				
			</view>
			<view class="button">

				<u-button class="contact" shape="circle">联系他</u-button>
			
			</view>
		</view>



		<view class="reservation-items">
			<view class="station-name">
				预约30分钟后充电
				<view class="canceled btn">
					已取消
				</view>
			</view>
			<view class="details-items">
							<view class="items">
								<view class="items-name">
									预留截止时间
			
								</view>
								<view class="items-content">
									2022-05-31 09:30:00
									
								</view>
							</view>
							<view class="items">
								<view class="items-name">
								
									预计充电时长
								
								</view>
								<view class="items-content">
									
									6小时
									
								</view>
							</view>
							<view class="items">
								<view class="items-name">
									
									预约站点
									
								</view>
								<view class="items-content">
									荆鹏充电站
								</view>
							</view>
							<view class="items">
								<view class="items-name">
									
									预约桩号
								</view>
								<view class="items-content">
									1号快充桩
								</view>
							</view>
							<view class="items">
								<view class="items-name">
									充电桩类型
								</view>
								<view class="items-content">
									交流充电桩
								</view>
							</view>
							
						</view>
			<view class="button">

				<u-button class="delete" shape="circle">删除</u-button>
			</view>
		</view>


		<view class="reservation-items">
			<view class="station-name">
				预约30分钟后充电
				<view class="have-expired btn">
					已过期
				</view>
			</view>
			<view class="details-items">
							<view class="items">
								<view class="items-name">
									预留截止时间
			
								</view>
								<view class="items-content">
									2022-05-31 09:30:00
									
								</view>
							</view>
							<view class="items">
								<view class="items-name">
								
									预计充电时长
								
								</view>
								<view class="items-content">
									
									6小时
									
								</view>
							</view>
							<view class="items">
								<view class="items-name">
									
									预约站点
									
								</view>
								<view class="items-content">
									荆鹏充电站
								</view>
							</view>
							<view class="items">
								<view class="items-name">
									
									预约桩号
								</view>
								<view class="items-content">
									1号快充桩
								</view>
							</view>
							<view class="items">
								<view class="items-name">
									充电桩类型
								</view>
								<view class="items-content">
									交流充电桩
								</view>
							</view>
							
						</view>
			<view class="button">
				<u-button class="contact" shape="circle">联系他</u-button>
                 <u-button class="delete" shape="circle">删除</u-button>
				
			</view>
		</view>
		
		<view class="reservation-items">
			<view class="station-name">
				预约30分钟后充电
				<view class="finished btn">
					已完成
				</view>
			</view>
			<view class="details-items">
							<view class="items">
								<view class="items-name">
									预留截止时间
			
								</view>
								<view class="items-content">
									2022-05-31 09:30:00
									
								</view>
							</view>
							<view class="items">
								<view class="items-name">
								
									预计充电时长
								
								</view>
								<view class="items-content">
									
									6小时
									
								</view>
							</view>
							<view class="items">
								<view class="items-name">
									
									预约站点
									
								</view>
								<view class="items-content">
									荆鹏充电站
								</view>
							</view>
							<view class="items">
								<view class="items-name">
									
									预约桩号
								</view>
								<view class="items-content">
									1号快充桩
								</view>
							</view>
							<view class="items">
								<view class="items-name">
									充电桩类型
								</view>
								<view class="items-content">
									交流充电桩
								</view>
							</view>
							
						</view>
			<view class="button">
				<u-button class="contact" shape="circle">联系他</u-button>
			</view>
		</view>
		
		<view class="reservation-items">
			<view class="station-name">
				预约30分钟后充电
				<view class="refused btn">
					已拒绝
				</view>
			</view>
			<view class="details-items">
							<view class="items">
								<view class="items-name">
									预留截止时间
			
								</view>
								<view class="items-content">
									2022-05-31 09:30:00
									
								</view>
							</view>
							<view class="items">
								<view class="items-name">
								
									预计充电时长
								
								</view>
								<view class="items-content">
									
									6小时
									
								</view>
							</view>
							<view class="items">
								<view class="items-name">
									
									预约站点
									
								</view>
								<view class="items-content">
									荆鹏充电站
								</view>
							</view>
							<view class="items">
								<view class="items-name">
									
									预约桩号
								</view>
								<view class="items-content">
									1号快充桩
								</view>
							</view>
							<view class="items">
								<view class="items-name">
									充电桩类型
								</view>
								<view class="items-content">
									交流充电桩
								</view>
							</view>
							
						</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom: 155px;
	}
	.screen {
		margin-left: 85.3%;
		color: rgba(119, 119, 119, 100);
		font-size: 12px
	}

	.btn {
		width: 60px;
		height: 24px;
		line-height: 20px;
		border-radius: 4px;
		background-color: rgba(255, 255, 255, 100);
		font-size: 14px;
		text-align: center;
		float: right;
		margin-right: 24px;
		margin-top: 12px;
	}
// 待确认按钮
	.toBe-confirmed {

		color: rgba(78, 141, 246, 100);
		border: 1px solid rgba(78, 141, 246, 100);

	}
// 已确认按钮
	.confirmed {
		border: 1px solid rgba(0, 185, 98, 100);
		color: rgba(0, 185, 98, 100);

	}
// 已取消按钮
	.canceled {
		border: 1px solid rgba(153, 153, 153, 100);
		color: rgba(153, 153, 153, 100);
		;
	}
// 已过期/已完成按钮
	.have-expired,.finished{
		color: rgba(162, 169, 181, 100);
		border: 1px solid rgba(162, 169, 181, 100);
	}
	
	// 已拒绝
	.refused{
		color: rgba(255, 79, 63, 100);
		border: 1px solid rgba(255, 79, 63, 100);
	}
	.reservation-items {
		width: 100%;
		background-color: #fff;
		padding-left: 14px;
		margin-bottom: 12px;

		.station-name {
			line-height: 48px;
			color: rgba(16, 16, 16, 100);
			font-size: 20px
		}

		.details-items {
			border: 1px solid rgba(238, 242, 240, 100);
			border-left: none;
			padding-bottom: 13px;

			.items {
				display: flex;
				justify-content: space-between;
				padding: 12px 14px 0px 0;
				line-height: 20px;
			}

		}

		

		.button {
			height: 56px;
			padding: 12px 0;

			::v-deep .u-btn {
				height: 32px;
				line-height: 32px;
				background-color: rgba(255, 255, 255, 100);
				color: rgba(153, 153, 153, 100);
				font-size: 16px;
				text-align: center;
				float: right;
				margin-right: 16px;
			}
      .refuse,.delete{
		  color: #999999;
	  }
		.contact,.affirm{
			color: #00b962;
		}
			

			
		}
	}
</style>