<template>
	<div class="topLeFtBox">
		<div class="title"><i>出场车辆</i></div>
		<div class="content">
			<div class="leftImg">
				<div class="imgDiv">
					<img src="@/assets/images/vehicleManagement/goCar.png" alt="" />
				</div>
			</div>
			<div class="rightMenu">
				<div class="searchInpu">
					<el-input class="inputDeep" v-model="input4" placeholder="请输入">
						<template #prefix>
							<el-icon class="el-input__icon"><search /></el-icon>
						</template>
					</el-input>
				</div>
				<div class="carNumOne"><img src="@/assets/images/vehicleManagement/goCarNum.png" alt="" /></div>
				<div class="carNumTwo">
					<div>识别车牌号</div>
					<div class="styleColor">贵C C050C</div>
				</div>
				<div class="carNumTwo">
					<div>车辆类型</div>
					<div class="styleColor">临时车</div>
				</div>
				<div class="carNumTwo">
					<div>入场时间</div>
					<div class="styleColor">2023-05-04 10:23:48</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const input4 = ref("");
</script>

<style lang="scss" scoped>
.topLeFtBox {
	width: 100%;
	height: 100%;
	.title {
		height: 10%;
		line-height: 33px;
		text-align: left;
		font-size: calc(100vw * 18 / 1920);
		color: #ffffff;
		background: url("@/assets/images/titleBig.webp") no-repeat;
		background-size: 100% 100%;
		i {
			margin-left: 50px;
			font-family: OPPOSansH;
		}
	}
	.content {
		height: 90%;
		width: 100%;
		margin-top: 10px;
		background: url("@/assets/images/cardImg.png") no-repeat;
		background-size: 100% 100%;
		color: #fff;
		font-size: calc(100vw * 14 / 1920);
		display: flex;
		.leftImg {
			width: 80%;
			.imgDiv {
				margin: 3% 3%;
				width: 100%;
				height: 90%;
				background: url("@/assets/images/vehicleManagement/leftImg.png") no-repeat;
				background-size: 100% 100%;
				img {
					width: 91%;
					height: 92%;
					margin: 2% 4%;
				}
			}
		}
		.rightMenu {
			width: 25%;
			margin: 3% 2% 3% 5%;
			.searchInpu {
				margin-top: -3%;
			}
			.carNumOne {
				margin-top: 5%;
				height: 21%;
				width: 100%;
				background: url("@/assets/images/vehicleManagement/carNumImg.png") no-repeat;
				background-size: 100% 100%;
				img {
					width: 91%;
					height: 86%;
					margin: 2% 4%;
				}
			}
			.carNumTwo {
				margin-top: 7%;
				width: 100%;
				height: 18%;
				background: url("@/assets/images/vehicleManagement/carContent.png") no-repeat;
				background-size: 100% 100%;
				div {
					margin-left: 10%;
					padding-top: 3%;
					font-size: calc(100vw * 14 / 1920);
				}
				.styleColor {
					color: #4ac0f3;
					font-size: calc(100vw * 16 / 1920);
				}
			}
		}
	}
}
.inputDeep {
	:deep(.el-input__wrapper) {
		box-shadow: 25 60 128 0px var(--el-input-border-color, var(--el-border-color)) inset;
		border: 1px solid #668ddd;
		cursor: default;
	}
}
::v-deep .el-input__prefix {
	color: #4ac0f3;
}
::v-deep .el-input__wrapper {
	background: transparent;
}
::v-deep .el-input__inner {
	color: #fff;
}
</style>
