中建四局(检查统计):完成布局
This commit is contained in:
parent
1b41a0ab6f
commit
1ed0d2b6ec
@ -43,7 +43,7 @@ export default {}
|
||||
div {
|
||||
text-align: center;
|
||||
&:last-child {
|
||||
width: 140px;
|
||||
width: 160px;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
flex: 1;
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user