108 lines
3.4 KiB
Vue
108 lines
3.4 KiB
Vue
<template>
|
|
<ModelBox name='1-3'>
|
|
<div class='count-box'>
|
|
<div class='count-tip-box'>
|
|
<div class='item'>
|
|
<p class='num'>2,344</p>
|
|
<p class='title'>本班合计</p>
|
|
</div>
|
|
<div class='split'></div>
|
|
<div class='item'>
|
|
<p class='num'>2,344</p>
|
|
<p class='title'>本日合计</p>
|
|
</div>
|
|
</div>
|
|
<dv-scroll-board :config="config" style="width:580px;height:180px;margin-top: 10px;" class='count-table'/>
|
|
<span class='split-line' style='left: 70px;'></span>
|
|
<span class='split-line' style='left: 195px;'></span>
|
|
<span class='split-line' style='left: 320px;'></span>
|
|
<span class='split-line' style='left: 445px;'></span>
|
|
</div>
|
|
</ModelBox>
|
|
</template>
|
|
<script>
|
|
import ModelBox from './ModelBox.vue';
|
|
export default {
|
|
name: 'Count',
|
|
components: {
|
|
ModelBox
|
|
},
|
|
data() {
|
|
return {
|
|
config:{
|
|
header: ['<span style="color:#000;">序号</span>', '<span style="color:#000;">产线</span>', '<span style="color:#000;">本班</span>', '<span style="color:#000;">本日</span>', '<span style="color:#000;">一托玻璃数量</span>'],
|
|
headerHeight: 30,
|
|
headerBGC: '#E8EDF8',
|
|
oddRowBGC:'#E8EDF8',
|
|
evenRowBGC:'#fff',
|
|
rowNum: 5,
|
|
columnWidth: [70, 125, 125, 125, 130],
|
|
align : ['center', 'center', 'center', 'center', 'center'],
|
|
data: [
|
|
['<span style="color:#000;">1</span>', '<span style="color:#000;">A1</span>', '<span style="color:#000;">23</span>', '<span style="color:#000;">234</span>', '<span style="color:#000;">234</span>'],
|
|
['<span style="color:#000;">2</span>', '<span style="color:#000;">A2</span>', '<span style="color:#000;">13</span>', '<span style="color:#000;">234</span>','<span style="color:#000;">234</span>'],
|
|
['<span style="color:#000;">3</span>', '<span style="color:#000;">A3</span>', '<span style="color:#000;">24</span>', '<span style="color:#000;">234</span>', '<span style="color:#000;">234</span>'],
|
|
['<span style="color:#000;">4</span>', '<span style="color:#000;">A4</span>', '<span style="color:#000;">45</span>', '<span style="color:#000;">234</span>', '<span style="color:#000;">234</span>'],
|
|
['<span style="color:#000;">5</span>', '<span style="color:#000;">A5</span>', '<span style="color:#000;">55</span>', '<span style="color:#000;">234</span>', '<span style="color:#000;">234</span>']
|
|
]
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
init() {
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
.count-box {
|
|
position: relative;
|
|
.count-tip-box {
|
|
margin-bottom: 20px;
|
|
.split {
|
|
width: 2px;
|
|
height: 40px;
|
|
background: #CDD3DF;
|
|
display: inline-block;
|
|
}
|
|
.item:first-child {
|
|
padding-right: 55px;
|
|
text-align: right;
|
|
}
|
|
.item:last-child {
|
|
padding-left: 55px;
|
|
}
|
|
.item {
|
|
display: inline-block;
|
|
width: 270px;
|
|
box-sizing: border-box;
|
|
p{
|
|
margin: 0;
|
|
}
|
|
.num {
|
|
font-weight: 500;
|
|
font-size: 28px;
|
|
color: #155EFF;
|
|
margin-bottom: 5px;
|
|
}
|
|
.title {
|
|
font-size: 14px;
|
|
color: rgba(0,0,0,0.5);
|
|
line-height: 14px;
|
|
}
|
|
}
|
|
}
|
|
.count-table {
|
|
box-shadow: 0px 2px 4px 0px #D5DAE6;
|
|
}
|
|
.split-line {
|
|
position: absolute;
|
|
top: 77px;
|
|
width: 1px;
|
|
height: 180px;
|
|
background: #CDD3DF;
|
|
}
|
|
}
|
|
|
|
</style> |