新看板

src/assets/css/iconfont.styl

@@ -4,17 +4,30 @@
        url('iconfont/iconfont.woff') format('woff'),
        url('iconfont/iconfont.ttf') format('truetype');
 }
-
 @font-face {
   font-family: "PangMenZhengDao";
   src: url('font/PangMenZhengDao.ttf')
 }
-
 @font-face {
   font-family: "SourceHanSansCN";
   src: url('font/SourceHanSansCN-Normal.otf');
 }
-
+@font-face {
+  font-family: "YouSheBiaoTiHei";
+  src: url('font/YouSheBiaoTiHei.ttf') format('truetype');
+}
+@font-face {
+  font-family: "SourceHanSansCN-Bold";
+  src: url('font/SourceHanSansCN-Bold.otf') format('truetype');
+}
+@font-face {
+  font-family: "SourceHanSansCN-Regular";
+  src: url('font/SourceHanSansCN-Regular.otf') format('truetype');
+}
+@font-face {
+  font-family: "SourceHanSansCN-Medium";
+  src: url('font/SourceHanSansCN-Medium.otf') format('truetype');
+}
 .iconfont {
   font-family: "iconfont" !important;
   font-size: 16px;

src/components/header.vue

@@ -74,9 +74,10 @@ header
   position relative
   background center center / 100% 100% url(../assets/images/screen1/header.png) no-repeat
   p
-    font-family "PangMenZhengDao"
+    font-family "YouSheBiaoTiHei"
-    _font(.4rem, 1rem, #ffffff, lighter, center)
+    _font(.48rem, 1rem, #ffffff, lighter, center)
-    letter-spacing .05rem
+    letter-spacing .1rem
+    padding-left .1rem
     text-shadow 0 .08rem .08rem rgba(0,0,0,0.30)
 .data_box
   position absolute

src/pages/board.vue

@@ -0,0 +1,102 @@
+<template>
+  <section class="container">
+    <t-header  title="压制生产看板"></t-header>
+    <div class="content">
+      <div class="yj_wraper">
+        <div class="yj_item" v-for="(e, i) in dataList1" :key="'yj' + i">
+          <div class="fontV yj_name">{{ e.device_code }}</div>
+          <div class="yj_info_wraper">
+            <div class="yj_info">
+              <div class="yj_info_p2">压机状态:</div>
+              <div class="yj_info_p1">{{ e.status }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <footer></footer>
+  </section>
+</template>
+
+<script>
+import THeader from '@components/header.vue'
+export default {
+  components: {
+    THeader
+  },
+  data () {
+    return {
+      dataList1: []
+    }
+  },
+  created () {
+    for (let i = 0; i < 8; i++) {
+      this.dataList1.push({device_code: `${i + 1}号压机`, status: '开机'})
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.container
+  width 100%
+  height 100%
+.content
+  width 100%
+  height calc(100% - 1rem)
+  padding .3rem .33rem
+footer
+  position absolute
+  left 0
+  bottom 0
+  width 100%
+  height .38rem
+  background center bottom / auto 100% url(../assets/images/screen1/bottom.png) no-repeat
+.yj_wraper
+  width 100%
+  height calc(50% - .16rem)
+  margin-bottom .32rem
+  padding .31rem .16rem .31rem .16rem
+  background center / 100% 100% url(../assets/images/screen1/item_8.png) no-repeat
+  display flex
+  justify-content space-between
+.fontV
+  display flex
+  justify-content center
+  align-items center
+.yj_item
+  width 11.6%
+  background-color #001536
+.yj_name
+  height .5rem
+  font-size .18rem
+  line-height .18rem
+  color #78B1DE
+  letter-spacing .02rem
+  text-align center
+  font-weight 700
+  background center / 100% 100% url(../assets/images/screen1/item_4.png) no-repeat
+.yj_info_wraper
+  height calc(100% - .5rem)
+  padding .1rem
+.yj_info
+  height calc(100% / 7)
+  background center bottom / 100% 3px url(../assets/images/screen1/line_1.png) no-repeat
+  display flex
+  justify-content space-between
+  align-items center
+.yj_info_p1
+  font-size: .18rem;
+  line-height: .18rem;
+  color: #FFFFFF;
+  letter-spacing: 1.88px;
+  text-align: center;
+  font-weight: 700;
+.yj_info_p2
+  font-size: .14rem
+  line-height: .14rem
+  color: #84B0DA;
+  letter-spacing: 2px;
+  text-align: center;
+  font-weight: 700;
+</style>

src/router/index.js

@@ -3,6 +3,7 @@ import Router from 'vue-router'
 
 const Setup = r => require.ensure([], () => r(require('@page/Setup')), 'Setup')
 const ProdCount = r => require.ensure([], () => r(require('@page/proj/ProdCount')), 'ProdCount')
+const Board = r => require.ensure([], () => r(require('@page/board')), 'Board')
 
 Vue.use(Router)
 
@@ -20,6 +21,10 @@ export default new Router({
     {
       path: '/ProdCount',
       component: ProdCount
+    },
+    {
+      path: '/board',
+      component: Board
     }
   ]
 })