yudao-dev/src/views/home/components/Count.vue
2025-07-04 17:02:20 +08:00

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>