首页样式

src/views/home/components/Count.vue

@@ -0,0 +1,108 @@
+<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>