烧制干燥

src/pages/modules/firedry/one.vue

@@ -0,0 +1,186 @@
+<template>
+    <div class="n_container">
+        <div class="n_header">
+            <div class="n_header_h1">
+                <h1>晟华生产数</h1>
+            </div>
+        </div>
+        <div class="n_body_container">
+            <div class="n_body_container_wraper">
+                <div class="box1">
+                    <div class="status_wrap">
+                        <div class="status_item">
+                            <div class="status_tip green"></div>
+                            <div class="status_name">运行中</div>
+                        </div>
+                        <div class="status_item">
+                            <div class="status_tip yellow"></div>
+                            <div class="status_name">待机</div>
+                        </div>
+                        <div class="status_item">
+                            <div class="status_tip gray"></div>
+                            <div class="status_name">关机</div>
+                        </div>
+                        <div class="status_item">
+                            <div class="status_tip red"></div>
+                            <div class="status_name">故障</div>
+                        </div>
+                    </div>
+                    <div class="machine_wrap yao_wrap">
+                      <div class="yaosb">
+                        <img src="../../../images/workshop/yao.png" alt="">
+                      </div>
+                      <div class="sh_machine yjbyx_1">
+                        <img src="../../../images/workshop/yjbyx.png" alt="">
+                      </div>
+                      <div class="sh_machine yjbyx_2">
+                        <img src="../../../images/workshop/yjbyx.png" alt="">
+                      </div>
+                      <div class="machine_wrap mtp_wrap_3">
+                        <div v-for="(e,i) in [1,2,3,4]" :key="i" class="mtp">
+                          <img src="../../../images/workshop/mtp.png" alt="">
+                        </div>
+                      </div>
+                      <div class="machine_wrap mtp_wrap_3 mtp_wrap_4">
+                        <div v-for="(e,i) in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28]" :key="i" class="mtp">
+                          <img src="../../../images/workshop/mtp.png" alt="">
+                        </div>
+                      </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'one',
+  data () {
+    return {
+    }
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@css/mixin'
+.n_container
+    _wh(100%, 100%)
+.n_header
+    _wh(100%, 8%)
+    _bis('../../../images/bg_header.jpg')
+.n_header_h1
+    _wh(100%, 100%)
+    _fj(row, flex-end)
+    _bis('../../../images/top_left.png',auto,,right)
+    h1
+        _font(32px, 1, #fff,,right)
+        padding-bottom 2%
+        letter-spacing 6px
+        font-family "阿里妈妈数黑体" !important
+        margin-right -3px
+.n_body_container
+    _wh(100%, 92%)
+    padding 40px 0 20px 20px
+    _bis('../../../images/bg_content.jpg')
+.n_body_container_wraper
+    _wh(100%, 100%)
+    _fj()
+.status_wrap
+    position absolute
+    top 0px
+    right 40px
+    z-index 1
+    _fj(row)
+.status_item
+    _fj(row)
+    +.status_item
+        margin-left 20px
+.status_tip
+    _wh(15px, 15px)
+    border-radius 50%
+    margin-right 10px
+    box-shadow 0px 0px 4px 0px rgba(33,121,195,0.88)
+.status_name
+    _font(16px, 1, #fff)
+.green
+  background-color $green2
+.yellow
+  background-color $yellow
+.gray
+  background-color $gray1
+.red
+  background-color $orange
+.box1
+  position relative
+  _wh(100%, 100%)
+.machine_wrap
+  position absolute
+  z-index 2
+.sh_machine
+  position absolute
+  top 0
+  left 0
+  z-index 3
+  width 100%
+  img
+    position absolute
+    top 0
+    left 0
+    z-index 4
+    _wh(100%, auto)
+.mtp_wrap_1
+  width 2.5%
+  top 9%
+  left 3%
+  .mtp
+    width 100%
+    img
+      _wh(100%, auto)
+.mtp_wrap_2
+  top 35%
+.yao_wrap
+  width 80%
+  top 18%
+  left auto
+  right 10%
+  background-color #676767
+  .yaosb
+    width 100%
+    img
+      _wh(100%, auto)
+  .yjbyx_1
+    width: 4%;
+    top: -2%;
+    left: 2%;
+    img
+      _wh(100%, auto)
+  .yjbyx_2
+    width: 4%;
+    top: -2%;
+    left: auto;
+    right: 2%;
+    img
+      _wh(100%, auto)
+.mtp_wrap_3
+  width: 3.5%;
+  height: 10%;
+  // top: 84%;
+  // left: -0.8%;
+  top: 134%;
+  left: 0.5%;
+  transform rotate(-90deg)
+  z-index 4
+  .mtp
+    width 100%
+    margin-bottom 10%
+    img
+      _wh(100%, auto)
+.mtp_wrap_4
+  left 13%
+</style>

src/router/index.js

@@ -19,6 +19,7 @@ const ProcessProductionTwo = r => require.ensure([], () => r(require('@page/modu
 const ProcessProductionThree = r => require.ensure([], () => r(require('@page/modules/processproduction/three')), 'processproduction')
 const HunnianKunliaoOne = r => require.ensure([], () => r(require('@page/modules/hunniankunliao/one')), 'hunniankunliao')
 const HunnianKunliaoTwo = r => require.ensure([], () => r(require('@page/modules/hunniankunliao/two')), 'hunniankunliao')
+const FireDryOne = r => require.ensure([], () => r(require('@page/modules/firedry/one')), 'firedry')
 const TakeShapeOne = r => require.ensure([], () => r(require('@page/modules/takeshape/one')), 'takeshape')
 const TakeShapeTwo = r => require.ensure([], () => r(require('@page/modules/takeshape/two')), 'takeshape')
 const SortPackOne = r => require.ensure([], () => r(require('@page/modules/sortpack/one')), 'takeshape')
@@ -71,6 +72,10 @@ export default new Router({
       path: '/hnlktwo',
       component: HunnianKunliaoTwo
     },
+    {
+      path: '/firedryone',
+      component: FireDryOne
+    },
     {
       path: '/takeshapeone',
       component: TakeShapeOne