Skip to content

Z
zhengyuan-danger-chemistry-manage
Commit 3e301c78 authored by yaqizhang's avatar yaqizhang
Browse files
Options

人车的“二道门”门禁管控

parent 2876ff16
Hide whitespace changes
Inline Side-by-side
Showing with 277 additions and 0 deletions
danger-manage-web/src/views/entrance/index.vue 0 → 100644
View file @ 3e301c78
<template>
<div style="width: 100vw;height: 100%vh;background: rgb(247, 247, 247);">
<div class="entrance">
<div class="entrance-l">
<div class="entrance-l-t">
<div class="ent-l ent">
<span>人员出入</span>
<div class="ent-div"></div>
<div class="ent-ruchang">
<div class="ent-ru-in">
<div class="ru-in-l">
<img src="../../assets/img/Shape.png" alt="">
</div>
<div class="ru-in-r">
<span>入场</span>
<div style="color: #0fb980;">0</div>
</div>
</div>
<div class="ent-ru-in">
<div class="ru-in-l">
<img src="../../assets/img/11.png" alt="">
</div>
<div class="ru-in-r">
<span>入场</span>
<div style="color: #f95f5f;">0</div>
</div>
</div>
<div class="ent-ru-in">
<div class="ru-in-l">
<img src="../../assets/img/user.png" alt="">
</div>
<div class="ru-in-r">
<span>入场</span>
<div style="color: #3a65ed">0</div>
</div>
</div>
</div>
</div>
<div class="ent-r ent">
<span>车辆出入</span>
<div class="ent-div"></div>
<div class="ent-r-car">
<div class="r-car-in">
<img src="../../assets/img/Group 1.png" alt="">
<div>车辆进场</div>
<p style="color: #07b9b9;">0</p>
</div>
<div class="r-car-in">
<img src="../../assets/img/Gr.png" alt="">
<div>车辆进场</div>
<p style="color: rgb(250 81 81);">0</p>
</div>
<div class="r-car-in">
<img src="../../assets/img/Group.png" alt="">
<div>车辆进场</div>
<p style="color: rgb(54 98 236);">0</p>
</div>
</div>
</div>
</div>
<div class="entrance-l-b">
<div class="ent-b-car1">
<span>车辆进场</span>
<div class="ent-div"></div>
<div class="ent-b-in">
<img src="../../assets/img/car.png" alt="">
<div>车辆类型：<span></span> </div>
<div>车辆好牌：<span></span> </div>
<div>进场时间：<span></span> </div>
</div>
</div>
<div class="ent-b-car1">
<span>车辆出场</span>
<div class="ent-div"></div>
<div class="ent-b-in">
<img src="../../assets/img/car.png" alt="">
<div>车辆类型：<span></span> </div>
<div>车辆好牌：<span></span> </div>
<div>进场时间：<span></span> </div>
</div>
</div>
</div>
</div>
<div class="entrance-r">
<span>园区内车辆</span>
<div class="ent-div"></div>
<div class="ent-yuanqu">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="车牌号"
width="170">
</el-table-column>
<el-table-column
prop="name"
label="类型">
</el-table-column>
<el-table-column
prop="address"
label="进场时间"
width="200">
</el-table-column>
</el-table>
<!-- <el-pagination
layout="prev, pager, next"
:total="1000">
</el-pagination> -->
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
tableData: [
// { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
// { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
// { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
// { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
// { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
// { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
// { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
// { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
// { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
// { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
// { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
// { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
// { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
// { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
// { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
// { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
]
}
}
};
</script>
<style lang="scss" scoped>
.entrance{
width: 85%;
height: calc(100vh - 50px);;
padding: 30px;
display: flex;
justify-content: space-between;
.entrance-l{
width: 60%;
height: 100%;
/* padding: 20px; */
.entrance-l-t{
width: 100%;
height: 49%;
display: flex;
justify-content: space-between;
.ent{
width: 48%;
height: 100%;
border-radius: 7px;
background: #fff;
padding: 20px;
}
.ent-l{
.ent-ruchang{
width: 100%;
height: 100%;
padding: 30px;
.ent-ru-in{
width: 100%;
height: 30%;
display: flex;
margin-top: 4%;
.ru-in-l{
width: 70px;
height: 70px;
border-radius: 50px;
background: rgb(247, 247, 247);
line-height: 80px;
text-align: center;
img{
width: 35%;
}
}
.ru-in-r{
padding: 7px 0 0 10px;
div{
font-size: 30px;
margin-top: 7px;
}
}
}
}
}
.ent-r{
.ent-r-car{
width: 100%;
height: 95%;
display: flex;
justify-content: space-around;
.r-car-in{
width: 25%;
height: 60%;
margin-top: 20%;
background-color: rgb(247, 247, 247);
border-radius: 15px;
text-align: center;
img{
margin-top: 40%;
}
p{
margin-top: 40%;
font-size: 30px;
}
}
}
}
}
.entrance-l-b{
width: 100%;
height: 49%;
margin-top: 2%;
border-radius: 7px;
background: #fff;
display: flex;
justify-content: space-between;
.ent-b-car1{
width: 47%;
height: 90%;
padding: 20px;
.ent-b-in{
padding: 30px 20px;
img{
width: 100%;
}
div{
margin-top: 20px;
span{
color: #a39e9e;
}
}
}
}
}
}
.entrance-r{
width: 38%;
height: 100%;
background: #fff;
border-radius: 7px;
padding: 20px;
.ent-yuanqu{
width: 100%;
height: 95%;
padding: 10px;
text-align: center;
}
}
}
.ent-div{
width: 100%;
height: 1px;
background-color: rgb(205, 207, 209);
margin-top: 7px;
}
::v-deep .el-table th > .cell {
text-align: center;
}
::v-deep .el-table tr td .cell {
text-align: center;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment