中建四局(检查统计):完成布局

This commit is contained in:
Jack 2022-08-25 18:09:49 +08:00
parent 1b41a0ab6f
commit 1ed0d2b6ec
3 changed files with 91 additions and 4 deletions

View File

@ -43,7 +43,7 @@ export default {}
div {
text-align: center;
&:last-child {
width: 140px;
width: 160px;
}
&:not(:last-child) {
flex: 1;

View File

@ -0,0 +1,73 @@
<template>
<div class="material-table">
<div class="title">物料进场</div>
<div class="table">
<div class="thead">
<div class="row">
<div>物料类型</div>
<div>重量(KG)</div>
<div>时间</div>
</div>
</div>
<div class="tbody">
<vue-scroll>
<div class="row" v-for="i in 9" :key="i">
<div>水泥</div>
<div>35</div>
<div>2011-02-03 15:30</div>
</div>
</vue-scroll>
</div>
</div>
</div>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
.material-table {
width: 100%;
height: 100%;
.title {
height: 50px;
line-height: 40px;
font-size: 20px;
color: #6de3ef;
text-align: center;
}
.table {
width: 100%;
height: calc(100% - 50px);
.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: 160px;
}
&:not(:last-child) {
flex: 1;
}
img {
width: 80px;
height: 50px;
background: skyblue;
}
}
}
}
}
</style>

View File

@ -1,14 +1,28 @@
<template>
<Card title="检查统计">
检查统计
<div class="list-group">
<div class="list"><MaterialTable title="物料进场" /></div>
<div class="list"><MaterialTable title="物料出场" /></div>
<div class="list"><MaterialTable title="材料检验" /></div>
</div>
</Card>
</template>
<script>
import Card from '../components/Card.vue'
import MaterialTable from './components/MaterialTable.vue'
export default {
components: { Card }
components: { Card, MaterialTable }
}
</script>
<style></style>
<style lang="less" scoped>
.list-group {
height: 100%;
display: flex;
justify-content: space-around;
.list {
width: 28%;
}
}
</style>