<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>