pad-app/pages/monitor/place.vue

<template>
	<view class="place">
		<view class="placeTop">
			<view class="topLeft">
				堆场资源 B3区
			</view>
			<view class="topRight">
				<button @click="back"><text class="back">返回</text></button>
				<button @click="show"><text class="show">显示</text></button>
			</view>
			<view class="showBox" v-if="showType">
				<view class="showInfo">
					车道
				</view>
				<view class="showInfo">
					车位
				</view>
			</view>
		</view>
		<view class="placeInfo">
			<view class="infoLeft">
				<text>车位总数：12*15=180车位</text>
				<text>使用车位：40车位</text>
				<text>剩余车位：40车位</text>
				<text>虚拟场位：12车位</text>
				<text>可停放车辆：12辆</text>
				<text>已停放车辆：12辆</text>
			</view>
			<view class="infoRight">
				<view class="tipBox">
					<text>空置</text>
					<view class="colorBox vacant"></view>
				</view>
				<view class="tipBox">
					<text>使用</text>
					<view class="colorBox use"></view>
				</view>
				<view class="tipBox">
					<text>虚拟车位</text>
					<view class="colorBox virtually"></view>
				</view>
			</view>
		</view>
		<view class="placeList">
			<view class="listInfo">
				<view class="title">
					01道（合计12辆车-13车位）
				</view>
				<view class="listType1">
					<view class="type1Box box1">
						宝马-轿车 12辆
					</view>
					<view class="type1Box box2">
						奔驰-轿车 12辆
					</view>
					<view class="type1Box box3">
						未使用：5车位
					</view>
				</view>
			</view>
			<view class="listInfo">
				<view class="title">
					02道（合计12辆车-13车位）
				</view>
				<view class="listType2">
					<view class="type2Box">
						<template v-for="(item, index) in type2List">
							<view class="type2info"
								:class="{'type0':item.type == 0, 'type1':item.type == 1, 'type2':item.type == 2}"
								:key="index">
								{{item.name}}
							</view>
						</template>
					</view>
				</view>
			</view>
			<view class="listInfo">
				<view class="title">
					03道（合计12辆车-13车位）
				</view>
				<view class="listType3">
					未使用：5车位
				</view>
			</view>
			<view class="listInfo">
				<view class="title">
					04道（合计12辆车-13车位）
				</view>
				<view class="listType3">
					未使用：5车位
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type2List: [{
						id: "01",
						name: "宝马-轿车",
						type: 1,
					},
					{
						id: "02",
						name: "宝马-轿车",
						type: 1,
					}, {
						id: "03",
						name: "宝马-轿车",
						type: 1,
					}, {
						id: "04",
						name: "空置",
						type: 0,
					}, {
						id: "05",
						name: "宝马-轿车",
						type: 1,
					}, {
						id: "06",
						name: "空置",
						type: 0,
					}, {
						id: "07",
						name: "宝马-轿车",
						type: 1,
					}, {
						id: "08",
						name: "空置",
						type: 0,
					}, {
						id: "09",
						name: "宝马-轿车",
						type: 1,
					}, {
						id: "10",
						name: "空置",
						type: 0,
					}, {
						id: "11",
						name: "宝马-轿车",
						type: 1,
					}, {
						id: "12",
						name: "虚拟车位",
						type: 2,
					},
				],
				showType: false,
			}
		},
		methods: {
			// 点击返回
			back() {
				this.$emit("modifyPlaceTabs", 0)
			},
			// 点击显示
			show() {
				this.showType = !this.showType
			}
		},
	}
</script>

<style lang="less" scoped>
	.place {
		.placeTop {
			background-color: #fff;
			padding: 20px;
			display: flex;
			justify-content: space-between;
			margin-bottom: 10px;
			position: relative;

			.topLeft {
				font-size: 20px;
				font-weight: bold;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			.topRight {
				display: flex;

				uni-button {
					margin-left: 30px;
					width: 100px;
					background-color: #fff;
				}

				.back {
					color: #0079FE;
				}

				.show {
					color: #aaa;
				}
			}

			.showBox {
				position: absolute;
				bottom: -102px;
				right: 25px;
				border: 1px solid #aaa;

				.showInfo {
					padding: 20px 30px;
					background-color: #fff;
				}
			}
		}

		.placeInfo {
			padding: 10px 20px;
			background-color: #fff;
			display: flex;

			.infoLeft {
				flex: 2;
				display: flex;
				flex-wrap: wrap;

				text {
					margin: 10px;
					margin-right: 0;
					padding-right: 10px;
					border-right: 1px solid #aaa;
				}
			}

			.infoRight {
				flex: 1;
				display: flex;
				margin-left: 30px;

				.tipBox {
					display: flex;
					margin: auto;

					.colorBox {
						width: 20px;
						height: 20px;
						margin-left: 5px;
					}

					.vacant {
						background-color: #aaa;
					}

					.use {
						background-color: #0079FE;
					}

					.virtually {
						background-color: #F86E56;
					}
				}
			}
		}

		.placeList {
			padding: 20px;
			background-color: #000;

			.listInfo {
				margin-bottom: 20px;

				.title {
					font-size: 18px;
					font-weight: bold;
					color: #fff;
					padding-left: 10px;
					border-left: 5px solid #0079FE;
					margin-bottom: 20px;
				}

				.listType1 {
					display: flex;

					.type1Box {
						text-align: center;
						display: flex;
						flex-direction: column;
						justify-content: center;
						height: 100px;
					}

					.box1 {
						flex: 1;
						background-color: #0079FE;
						color: #fff;
						font-size: 16px;
						font-weight: bold;
					}

					.box2 {
						flex: 1;
						background-color: #0079FE;
						color: #fff
					}

					.box3 {
						flex: 2;
						background-color: #fff;
						color: #aaa
					}
				}

				.listType2 {
					padding: 10px 0;
					background-color: #222;

					.type2Box {
						display: flex;

						.type2info {
							flex: 1;
							height: 150px;
							border-radius: 8px;
							margin: 0 5px;
							color: #fff;
							text-align: center;
							display: flex;
							flex-direction: column;
							justify-content: center;
						}

						.type0 {
							background-color: #aaa;
						}

						.type1 {
							background-color: #0079FE;
						}

						.type2 {
							background-color: #F86E56;
						}
					}
				}

				.listType3 {
					height: 200px;
					text-align: center;
					color: #F86E56;
					line-height: 200px;
					font-size: 18px;
					font-weight: bold;
					background-color: #aaa;
				}
			}
		}
	}
</style>