中建四局(安全管理):完成视频AI分析布局

This commit is contained in:
Jack 2022-08-29 10:48:33 +08:00
parent d5ca194063
commit 36ae83f041
2 changed files with 53 additions and 2 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

View File

@ -1,6 +1,23 @@
<template>
<Card title="视频AI分析">
视频AI分析
<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="../assets/images/common/bg-event.jpg" /></div>
<div class="carNum">未戴安全帽</div>
<div class="datetime">2011-02-03 15:30</div>
</div>
</vue-scroll>
</div>
</div>
</Card>
</template>
@ -11,4 +28,38 @@ export default {
}
</script>
<style></style>
<style lang="less" scoped>
.table {
width: 100%;
height: 100%;
color: #fff;
.thead {
height: 36px;
line-height: 36px;
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: 160px;
}
&:not(:last-child) {
flex: 1;
}
img {
width: 80px;
height: 50px;
}
}
}
}
</style>