136 lines
3.0 KiB
Vue
136 lines
3.0 KiB
Vue
|
<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>
|