中建四局(资源管理):新增 CarTable 组件

This commit is contained in:
Jack 2022-08-25 15:37:47 +08:00
parent 82b573ea7a
commit de98168865
2 changed files with 62 additions and 30 deletions

View File

@ -0,0 +1,59 @@
<template>
<div class="table">
<div class="thead">
<div class="row">
<div>抓拍照片</div>
<div>车辆信息</div>
<div>抓拍时间</div>
</div>
</div>
<div class="tbody">
<vue-scroll>
<div class="row" v-for="i in 9" :key="i">
<div><img src="" /></div>
<div class="carNum">粤A455632</div>
<div class="datetime">2011-02-03 15:30</div>
</div>
</vue-scroll>
</div>
</div>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
.table {
width: 100%;
height: 100%;
.thead {
padding-bottom: 12px;
color: #59b2c0;
}
.tbody {
height: calc(100% - 30px);
}
.row {
display: flex;
align-items: center;
&:not(:last-child) {
margin-bottom: 12px;
}
div {
text-align: center;
&:last-child {
width: 140px;
}
&:not(:last-child) {
flex: 1;
}
img {
width: 80px;
height: 50px;
background: skyblue;
}
}
}
}
</style>

View File

@ -7,24 +7,16 @@
今日出场<span>126</span>
</div>
<div class="list">
<div class="row">
<div>抓拍照片</div>
<div>车辆信息</div>
<div>抓拍时间</div>
</div>
<div class="row" v-for="i in 3" :key="i">
<div><img src="" /></div>
<div class="carNum">粤A455632</div>
<div class="datetime">2011-02-03 15:30</div>
</div>
<CarTable />
</div>
</Card>
</template>
<script>
import Card from '../components/Card.vue'
import CarTable from './components/CarTable.vue'
export default {
components: { Card }
components: { Card, CarTable }
}
</script>
@ -54,24 +46,5 @@ export default {
box-sizing: border-box;
padding-top: 20px;
height: calc(100% - 120px);
.row {
display: flex;
align-items: center;
&:not(:last-child) {
margin-bottom: 12px;
}
&:first-child {
color: #59b2c0;
}
div {
flex: 1;
text-align: center;
img {
width: 80px;
height: 50px;
background: skyblue;
}
}
}
}
</style>