样式

src/App.vue

@@ -24,3 +24,9 @@ export default {
   }
 }
 </script>
+
+<style lang="stylus" scoped>
+#app
+  width 100%
+  height 100%
+</style>

src/assets/css/mixin.styl

@@ -4,16 +4,16 @@ $gray = #516282
 $orange = #F96700
 $green2 = #65d837
 
-.green
+// .green
-  background-color $green
+//   background-color $green
-.yellow
+// .yellow
-  background-color $yellow
+//   background-color $yellow
-.gray
+// .gray
-  background-color $gray
+//   background-color $gray
-.orange
+// .orange
-  background-color $orange
+//   background-color $orange
-.green2
+// .green2
-  background-color $green2
+//   background-color $green2
 
 //宽高
 _wh(w, h)

src/assets/css/reset.css

@@ -14,11 +14,11 @@ time, mark, audio, video, input {
     margin: 0;
     padding: 0;
     border: 0;
-    font-size: 0.16rem;
+    /* font-size: 0.16rem;
-    line-height: inherit;
+    line-height: inherit; */
     color: #ffffff;
-    font-weight: normal;
+    /* font-weight: normal; */
-    vertical-align: baseline;
+    /* vertical-align: baseline; */
 }
  
 /* HTML5 display-role reset for older browsers */
@@ -79,12 +79,12 @@ li {
 }
  
 html, body {
-     /* width: 100%; */
+     width: 100%;
-     width: 1920px;
+     height: 100%;
-     /* min-width: 1550px; */
+     min-width: 1440px;
-     height: 1060px;
+     min-height: 789px;
-     /* width: 1920px;
+     /* width: 2560px;
-     height: 1040px; */
+     height: 1440px; */
 }
  
 body {
@@ -95,7 +95,7 @@ body {
      -ms-user-select:none;/*IE10*/
      -khtml-user-select:none;/*早期浏览器*/
      user-select:none;
-     background: #05032a center center / 100% 100% url(../../assets/images/bg.png) no-repeat;
+     background: #05032a center center / 100% 100% url(../../assets/images/bg.jpg) no-repeat;
 }
 
 div, p {
@@ -145,6 +145,10 @@ div, p {
  justify-content: center;
 }
 
+.pointer {
+     cursor: pointer;
+}
+
 .pl10 {padding-left: 10px;}
 .pl20 {padding-left: 20px;}
 .mgb3 {margin-bottom: .03rem;}

src/assets/js/rem.js

@@ -10,3 +10,4 @@
   if (!doc.addEventListener) return win.addEventListener(resizeEvt, recalc, false)
   doc.addEventListener('DOMContentLoaded', recalc, false)
 })(document, window)
+// 晟华大屏尺寸2560*1440，屏幕太大用rem样式会错乱，现在使用px、%

src/components/header.vue

@@ -1,14 +1,14 @@
 <template>
   <header>
     <div class="center_text">晟华大屏监控</div>
-    <div class="tag_block clearfix">
+    <div class="tag_block">
-      <div class="fl">
+      <div class="tag_left">
         <!-- <div v-if="index == '0'" class="tag cur_tag">首页</div>
         <router-link v-else to="/homepage" class="tag">首页</router-link> -->
         <div v-if="index == '1'" class="tag cur_tag">生产统计</div>
         <router-link v-else to="/prodcount" class="tag">生产统计</router-link>
       </div>
-      <div class="fr">
+      <div class="tag_right">
         <div v-if="index == '2'" class="tag cur_tag">仓储监控</div>
         <router-link v-else to="/storagemonitor" class="tag">仓储监控</router-link>
         <div v-if="index == '3'" class="tag cur_tag">设备监控</div>
@@ -47,7 +47,19 @@ header
   margin-left -200px
   letter-spacing 6px
 .tag_block
-  margin 35px .54rem 0
+  _wh(100%, 100%)
+  _fj(row)
+  padding 25px 15px 0
+.tag_left
+  _wh(50%, 100%)
+  _fj(row, flex-start)
+  .tag
+    margin-right 20px
+.tag_right
+  _wh(50%, 100%)
+  _fj(row, flex-end)
+  .tag
+    margin-left 20px
 .tag
   display inline-block
   _wh(132px, 36px)

src/components/select.vue

@@ -0,0 +1,97 @@
+<template>
+    <div class="select">
+      <div class="select-item pointer" @click="selectOption">
+        <div class="select-item-txt">{{defaultLabel}}</div>
+        <div class="select-item-button">&nbsp;</div>
+      </div>
+      <ul v-show="active" class="options">
+        <li class="pointer" :class="{'li-active': e.index === index}" v-for="e in option" :key="e.index" @click="change(e)">{{e.label}}</li>
+      </ul>
+    </div>
+  </template>
+
+<script>
+export default {
+  name: 'SelectOpt',
+  props: {
+    option: Array,
+    index: [Number, String]
+  },
+  data () {
+    return {
+      active: false
+    }
+  },
+  computed: {
+    defaultLabel () {
+      let val = ''
+      this.option.map(e => {
+        if (e.index === this.index) {
+          val = e.label
+        }
+      })
+      return val
+    }
+  },
+  methods: {
+    selectOption () {
+      this.active = true
+    },
+    change (e) {
+      this.$emit('change', e.index)
+      this.active = false
+    }
+  }
+}
+</script>
+
+  <style lang="stylus" scoped>
+  @import '~@css/mixin'
+  .select
+    position relative
+    _wh(100%, inherit)
+    background-color #fff
+    user-select none
+.select-item
+    width 100%
+    _fj(row)
+.select-item-txt
+    width calc(100% - 50px)
+    _font(15px, inherit, #999,,left)
+    padding 0 10px
+.select-item-button
+    position relative
+    _wh(50px, inherit)
+    vertical-align top
+    &::before
+      content ''
+      width 0
+      height 0
+      border-left 5px solid transparent
+      border-right 5px solid transparent
+      border-top 5px solid #999
+      position absolute
+      right 13px
+      top 13px
+      pointer-events none
+      z-index 3
+  .options
+    position absolute
+    z-index 100000
+    top 44px
+    width 100%
+    padding 10px 0
+    background-color #fff
+    border 1px solid #eee
+    border-radius 5px
+    li
+      width 100%
+      _font(15px, 38px, #999,,left)
+      padding 0 10px
+      user-select none
+      box-sizing border-box
+      &:hover
+        background-color #f5f7fa
+    .li-active
+      color #409eff
+  </style>

src/pages/DeviceMonitor.vue

@@ -167,6 +167,8 @@ export default {
 
 <style lang="stylus" scoped>
 @import '~@css/mixin'
+.container
+  _wh(100%, 100%)
 .close_btn
   position absolute
   top 2px
@@ -178,8 +180,8 @@ export default {
   cursor pointer
 .content
   width 100%
-  height calc(100% - 100px)
+  height calc(100% - 84px)
-  padding 0 15px
+  padding 15px
 .item_tr
   width 100%
   height 100%

src/pages/ProdCount2.vue

@@ -1,7 +1,7 @@
 <template>
   <section>
     <t-header index='1'></t-header>
-    <section>
+    <section class="content">
       <div class="con1">
         <div class="c-title c-left">
           <span class="icon1"></span>
@@ -26,7 +26,7 @@
           <span>块</span>
         </div>
       </div>
-      <div style="display:flex">
+      <div class="center_wrapper" style="display:flex">
         <div class="con2">
           <div class="title">原料计划完成情况</div>
           <div class="desc">
@@ -576,6 +576,10 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+@import '~@css/mixin'
+.content
+  _wh(calc(100% - 108px), calc(100% - 108px))
+  margin 12px auto
 .blue
   color #32C5FF !important
 .green
@@ -589,16 +593,11 @@ export default {
 .red
   color #FF0000 !important
 .con1
-  width 18.14rem
+  width 100%
-  // height 1.23rem
   height 123px
   overflow hidden
   position relative
   background center center / 100% 100% url(../assets/images/sctj_top.png) no-repeat
-  margin 0 auto
-  // margin-top 0.32rem
-  // margin-bottom 0.15rem
-  margin-top 32px
   margin-bottom 15px
   text-align center
   // display flex
@@ -643,87 +642,65 @@ export default {
     .dot
       background none
       width .14rem
+.center_wrapper
+  _wh(100%, calc(50% - 69px))
+  _fj(row)
 .con2
-  float left
-  margin-left .49rem
-  // width 4.45rem
   width 40%
-  // height 4.05rem
+  height 100%
-  height 405px
   overflow hidden
   position relative
   background center center / 100% 100% url(../assets/images/sctj_bg1.png) no-repeat
-  margin-right .15rem
   .title
-    position absolute
+    _wh(calc(100% - 34px), 22px)
-    top .3rem
+    margin 17px
-    left .25rem
+    _font(16px, 22px, #fff,,left)
-    font-size .16rem
   .desc
-    position absolute
+    _wh(100%, 22px)
-    top .6rem
+    _fj(row, center)
-    left .25rem
-    display flex
     div
-      font-size .16rem
+      _font(16px, 22px, #fff,,)
-      margin-right .5rem
-      margin-right 1.2rem
       span
-        font-size .16rem
+        font-size 16px
         color #F7B502
-        margin 0 .25rem
+        margin 0 30px
   .item_content_0
-    position absolute
+    _wh(calc(100% - 44px), calc(100% - 112px))
-    top .4rem
+    margin 17px auto
-    left .25rem
-    height 380px
-    width 85%
 .con3
-  float left
+  width calc(60% - 15px)
-  // width 13.57rem
+  height 100%
-  width 54%
-  // height 4.05rem
-  height 405px
   overflow hidden
   position relative
   background center center / 100% 100% url(../assets/images/sctj_bg2.png) no-repeat
   .title
-    position absolute
+    _wh(calc(100% - 34px), 22px)
-    top .3rem
+    margin 17px
-    left .25rem
+    _font(16px, 22px, #fff,,left)
-    font-size .16rem
   .item_content_1
-    position absolute
+    _wh(calc(100% - 44px), calc(100% - 90px))
-    top .3rem
+    margin 17px auto
-    left .25rem
-    height 360px
-    width 95%
-    margin-bottom .1rem
 .con4
-  float left
+  _wh(100%, calc(50% - 85px))
-  margin-left .49rem
-  // margin-top .16rem
   margin-top 16px
-  width 18.17rem
-  // height 3.35rem
-  height 335px
   overflow hidden
   position relative
   background center center / 100% 100% url(../assets/images/sctj_bg3.png) no-repeat
-  padding 0 .27rem 0 .27rem
   .block_h2
+    _wh(calc(100% - 34px), 22px)
+    margin 17px auto
     h2
-      font-size .16rem
+      _font(16px, 22px, #fff,,left)
-      line-height .22rem
-      margin .15rem 0 .15rem 0
   .list_scroll_title
-    width 100%
+    _wh(calc(100% - 50px), 32px)
+    margin 0 auto
     background #262F52
+    line-height 32px
     span
       display inline-block
       width 11%
       text-align center
-      line-height .32rem
+      line-height 32px
       // float left
       font-size 14px
       &:nth-child(1)
@@ -731,12 +708,15 @@ export default {
       &:nth-child(2)
         width 15%
   .content-block-scroll
-    width 100%
+    _wh(calc(100% - 50px), calc(100% - 113px))
-    height calc(100% - 0.6rem)
+    margin 0 auto 25px auto
     overflow hidden
   .content-block-scroll-ul
+    width 100%
     li
       width 100%
+      height 38px
+      _fj(row, center)
       &:nth-child(2n)
         background rgba(38,47,82,0.50)
       span
@@ -745,7 +725,7 @@ export default {
         font-size 12px
         // padding 0 .1rem
         text-align center
-        line-height .38rem
+        line-height 38px
         box-sizing border-box
         // float left
         &:nth-child(1)

src/pages/Setup.vue

@@ -1,44 +1,50 @@
 <template>
-  <div>
+  <div class="login-container">
     <vue-particles
-        color="#fff"
+      color="#fff"
-        :particleOpacity="0.7"
+      :particleOpacity="0.7"
-        :particlesNumber="60"
+      :particlesNumber="60"
-        shapeType="circle"
+      shapeType="circle"
-        :particleSize="4"
+      :particleSize="4"
-        linesColor="#fff"
+      linesColor="#fff"
-        :linesWidth="1"
+      :linesWidth="1"
-        :lineLinked="true"
+      :lineLinked="true"
-        :lineOpacity="0.4"
+      :lineOpacity="0.4"
-        :linesDistance="150"
+      :linesDistance="150"
-        :moveSpeed="2"
+      :moveSpeed="2"
-        :hoverEffect="true"
+      :hoverEffect="true"
-        hoverMode="grab"
+      hoverMode="grab"
-        :clickEffect="true"
+      :clickEffect="true"
-        clickMode="push"
+      clickMode="push"
-        class="lizi"
+      class="lizi"
-      >
+    >
-      </vue-particles>
+    </vue-particles>
-    <div class="login_wrap">
+    <div class="body-container">
-      <div class="login_cnt clearfix drift">
+      <div class="login_wrap">
-        <div class="login_card fl">
+        <div class="login_cnt">
-          <div class="card_wrap">
+          <div class="title-name">系统配置</div>
-            <div class="inputOuter">
+          <div class="login_card">
-              <label>域名地址</label>
+            <div class="card_wrap">
-              <input type="text" class="inputStyle" v-model="baseUrl">
+              <div class="inputOuter">
-            </div>
+                <label>域名地址</label>
-            <div class="inputOuter">
+                <input type="text" class="inputStyle" v-model="baseUrl">
-              <label>刷新时间</label>
+              </div>
-              <input type="number" class="inputStyle" v-model="setTime">
+              <div class="inputOuter">
-            </div>
+                <label>刷新时间</label>
-            <div class="inputOuter">
+                <input type="number" class="inputStyle" v-model="setTime">
-              <label>设备看板</label>
+              </div>
-              <select name="equipment" v-model="equipId">
+              <div class="inputOuter">
-                <option :value="e.id" v-for="e in equipment" :key="e.id">{{e.name}}</option>
+                <label>设备看板</label>
-              </select>
+                <!-- <select name="equipment" v-model="equipId">
+                  <option :value="e.id" v-for="e in equipment" :key="e.id">{{e.name}}</option>
+                </select> -->
+                <div class="select-wraper">
+                  <selectOpt :option="option" :index="index" @change="change"></SelectOpt>
+                </div>
+              </div>
             </div>
+            <div class="submit"><input type="submit" value="配  置" class="btn" @click="_config"></div>
           </div>
-          <div class="submit"><input type="submit" value="配  置" class="btn" @click="_config"></div>
         </div>
       </div>
     </div>
@@ -46,19 +52,20 @@
 </template>
 
 <script>
+import SelectOpt from '@components/select.vue'
 export default {
-  name: 'Login',
+  components: {
+    SelectOpt
+  },
   data () {
     return {
       loginname: '',
       password: '',
-      equipment: [{id: 1, name: '生产统计'}, {id: 2, name: '仓储监控'}, {id: 3, name: '设备监控'}],
+      option: [{index: '1', label: '生产统计'}, {index: '2', label: '仓储监控'}, {index: '3', label: '设备监控'}],
-      equipId: Number(this.$store.getters.equipId),
+      index: this.$store.getters.equipId,
-      drift: 0,
       baseUrl: this.$store.getters.baseUrl,
       setTime: this.$store.getters.setTime / 1000,
-      fullscreen: false,
+      fullscreen: false
-      heightLimit: false
     }
   },
   mounted () {
@@ -68,20 +75,21 @@ export default {
     document.body.removeAttribute('class', 'login_bg')
   },
   methods: {
+    change (e) {
+      this.index = e
+    },
     _config () {
       let obj = {
         baseUrl: this.baseUrl,
         setTime: this.setTime * 1000,
-        equipId: this.equipId
+        equipId: this.index
       }
       this.$store.dispatch('setConfig', obj)
-      if (this.equipId === 0) {
+      if (this.index === '1') {
-        this.$router.push('/homepage')
-      } else if (this.equipId === 1) {
         this.$router.push('/prodcount')
-      } else if (this.equipId === 2) {
+      } else if (this.index === '2') {
         this.$router.push('/storagemonitor')
-      } else if (this.equipId === 3) {
+      } else if (this.index === '3') {
         this.$router.push('/devicemonitor')
       }
       let element = document.documentElement
@@ -114,17 +122,28 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+@import '~@css/mixin'
+.login-container
+  position relative
+  _wh(100%, 100%)
+  z-index 1
+  background url('../assets/images/loginbg.jpg') center center / 100% 100% no-repeat
+.lizi
+  position absolute
+  top 0
+  left 0
+  z-index 2
+  _wh(100%, 100%)
+.body-container
+  position relative
+  z-index 3
+  _wh(100%, 100%)
+  _fj(row, center)
+  margin 0 auto
 .login_wrap
-  position fixed
+  width 500px
-  left 50%
-  top 50%
-  width 410px
-  transform translate3d(-50%, -50%, 0)
   background-color rgba(255, 255, 255, 0.8)
   border-radius 5px
-  overflow hidden
-.height-limit
-  height 300px
 .login_tab
   position relative
   height 50px
@@ -147,35 +166,29 @@ export default {
   left 0
   bottom 0
 .login_cnt
-  position relative
+  width 100%
-  width 200%
+  padding 15px
-  overflow hidden
+.title-name
+  _font(16px, 28px, #000,,center)
+  margin-bottom 10px
 .login_card
-  width 50%
+  width 100%
-  padding .3rem
-.card_wrap
-  overflow hidden
 .inputOuter
-  position relative
+  _fj(row)
   height 38px
+  line-height 38px
   width 100%
   margin-bottom 12px
-  overflow hidden
+.inputStyle, .select-wraper
-.inputStyle, select
+  _wh(calc(100% - 100px), 38px)
-  width 260px
+  font-size 15px
-  font-size 0.16rem
-  float right
   background none
   line-height 38px
-  height 38px
   color #999999
   text-indent 10px
   border none
   box-sizing border-box
   background-color #ffffff
-select
-  appearance auto
-  outline none
 .submit
   width 100%
   background-color #2778f3
@@ -189,9 +202,8 @@ select
   outline none
   font-weight normal
 label
-  position absolute
+  width 100px
-  font-size .16rem
+  font-size 15px
   line-height 38px
   color #333333
-  padding-left 5px
 </style>

src/pages/StorageMonitor2.vue

@@ -2,7 +2,7 @@
   <section>
     <t-header index='2'></t-header>
     <div class="content clearfix">
-      <div class="con1">
+      <div class="top_wrapper">
         <div class="yard-wrap">
           <div class="corridor_2">原料仓储监控</div>
           <div class="yard_group clearfix">
@@ -39,7 +39,7 @@
           </div>
           <div class="corridor_2">成品仓储监控</div>
           <div class="yard_group clearfix">
-            <div class="yard_group_ul yard_group_ul_1">
+            <div class="yard_group_ul yard_group_ul_2">
               <div class="yard_group_cell" v-for="(e, i) in group02" :key="i" :class="{lock:e.lock_type ==='01'}">
                 <div class="yard_group_p" @click="getInfo1(e)">
                   <p class="fontselect">{{e.point_name}}</p>
@@ -93,35 +93,37 @@
           </div>
         </div>
       </div>
-      <div class="con-b con3">
+      <div class="bottom_wrapper">
-        <div class="block_h2">
+        <div class="bottom_wrapper_l">
-          <h2>原料库存</h2>
+          <div class="block_h2">
+            <h2>原料库存</h2>
+          </div>
+          <div class="list_scroll_title">
+            <span>货位</span><span>物料编码</span><span>重量</span><span>已静置时间</span><span>状态</span>
+          </div>
+          <vue-seamless-scroll :data="array1" :class-option="classOption" class="content-block-scroll">
+            <ul class="content-block-scroll-ul">
+              <li v-for="(e, i) in array1" :key="i">
+                <span>{{e.point_name}}</span><span>{{e.material_code}}</span><span>{{e.ivt_weight}}</span><span>{{e.standing_time}}</span><span>{{e.standing_status}}</span>
+              </li>
+            </ul>
+          </vue-seamless-scroll>
         </div>
-        <div class="list_scroll_title">
+        <div class="bottom_wrapper_l">
-          <span>货位</span><span>物料编码</span><span>重量</span><span>已静置时间</span><span>状态</span>
+          <div class="block_h2">
+            <h2>成品库存</h2>
+          </div>
+          <div class="list_scroll_title">
+            <span>货位</span><span>物料编码</span><span>库存数</span><span>是否满垛</span><span>托盘号</span>
+          </div>
+          <vue-seamless-scroll :data="array2" :class-option="classOption" class="content-block-scroll">
+            <ul class="content-block-scroll-ul">
+              <li v-for="(e, i) in array2" :key="i">
+                <span>{{e.point_name}}</span><span>{{e.material_code}}</span><span>{{e.ivt_qty}}</span><span>{{e.is_full}}</span><span>{{e.vehicle_code}}</span>
+              </li>
+            </ul>
+          </vue-seamless-scroll>
         </div>
-        <vue-seamless-scroll :data="array1" :class-option="classOption" class="content-block-scroll">
-          <ul class="content-block-scroll-ul">
-            <li v-for="(e, i) in array1" :key="i">
-              <span>{{e.point_name}}</span><span>{{e.material_code}}</span><span>{{e.ivt_weight}}</span><span>{{e.standing_time}}</span><span>{{e.standing_status}}</span>
-            </li>
-          </ul>
-        </vue-seamless-scroll>
-      </div>
-      <div class="con-b con3">
-        <div class="block_h2">
-          <h2>成品库存</h2>
-        </div>
-        <div class="list_scroll_title">
-          <span>货位</span><span>物料编码</span><span>库存数</span><span>是否满垛</span><span>托盘号</span>
-        </div>
-        <vue-seamless-scroll :data="array2" :class-option="classOption" class="content-block-scroll">
-          <ul class="content-block-scroll-ul">
-            <li v-for="(e, i) in array2" :key="i">
-              <span>{{e.point_name}}</span><span>{{e.material_code}}</span><span>{{e.ivt_qty}}</span><span>{{e.is_full}}</span><span>{{e.vehicle_code}}</span>
-            </li>
-          </ul>
-        </vue-seamless-scroll>
       </div>
     </div>
   </section>
@@ -159,8 +161,8 @@ export default {
     // }
     classOption () {
       return {
-        step: 0.2, // 数值越大速度滚动越快
+        step: 0.6, // 数值越大速度滚动越快
-        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
+        limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
         hoverStop: true, // 是否开启鼠标悬停stop
         direction: 1, // 0向下 1向上 2向左 3向右
         openWatch: true, // 开启数据实时监控刷新dom
@@ -319,232 +321,240 @@ export default {
 .status2
   color #F7B502
 .content
+  width calc(100% - 108px)
+  height calc(100% - 108px)
+  margin 12px auto
+.top_wrapper
+  position relative
+  height 50%
+.tag_block
+  position absolute
+  // bottom .1rem
+  top 25px
+  right .3rem
+  _fj(row)
+.tag_type
+  _fj(row)
+  padding-left .3rem
+.type_color
+  width .1rem
+  height .1rem
+  border-radius 50%
+  margin-right 10px
+.tag_text
+  font-size .12rem
+  line-height .2rem
+.blue
+  background #32C5FF !important
+.green
+  background #30EBC9 !important
+.gray
+  background #516282 !important
+.yellow
+  background #E2BB0E !important
+.orange
+  background #F96700 !important
+.red
+  background #FF0000 !important
+.lock
+  border .02rem solid #f00 !important
+.yard-wrap
+  // height 6.95rem
+  height 100%
   width 100%
-  padding .15rem .54rem 0
+  // padding .1rem 0
-  .con1
+.yard_group
-    position relative
+  width 100%
-    // height 5.7rem
+  height calc(50% - 46px)
-    height 570px
+  clear both
-    .tag_block
+  &:nth-child(1)
-      position absolute
+    margin-bottom 20px
-      // bottom .1rem
+.yard_group_ul
-      top 25px
+  float left
-      right .3rem
+  display grid
-    .tag_type
+  grid-gap 0
+  justify-items center
+  align-items center
+  margin-top -.01rem
+.yard_group_ul_1
+  width 100%
+  position absolute
+  grid-template-columns repeat(20, 100% / 20)
+  // grid-template-rows repeat(2, 1.8rem / 2)
+  grid-template-rows repeat(2, 90px)
+.yard_group_ul_2
+  width 100%
+  position absolute
+  grid-template-columns repeat(20, 100% / 20)
+  // grid-template-rows repeat(2, 1.8rem / 2)
+  grid-template-rows repeat(3, 90px)
+.yard_group_ul_3
+  width 40%
+  grid-template-columns repeat(8, 100% / 8)
+  // grid-template-rows repeat(2, 1.8rem / 2)
+  grid-template-rows repeat(3, 90px)
+.yard_group_cell
+  position relative
+  display inline-block
+  width 100%
+  // height calc(1.8rem / 2)
+  height 100%
+  box-sizing border-box
+  border 1px solid #32C5FF
+  background #000F2B
+  border-radius 8px
+.yard_group_p
+// height calc(1.8rem / 2)
+height 90px
+  p
+    font-size 12px
+    // line-height 0.28rem
+    line-height 28px
+    height 28px
+    -webkit-text-size-adjust none
+    text-align center
+    white-space nowrap
+  img
+    display block
+    width 60%
+    // height 0.6rem
+    height 60px
+    margin 0 auto
+.machine_1
+  position absolute
+  width 60%
+  width 100%
+  height 60px
+  overflow hidden
+  background center center / 100% 100% url(../assets/images/zhong.png) no-repeat
+  margin 0 auto
+  z-index 98
+  // left 50%
+  // margin-left -30%
+  opacity 0.5
+.machine_2
+  position absolute
+  width 60%
+  width 100%
+  height 60px
+  overflow hidden
+  background center center / 100% 100% url(../assets/images/cp1.jpg) no-repeat
+  margin 0 auto
+  z-index 98
+  // left 50%
+  // margin-left -30%
+  opacity 0.5
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+.ingbox
+  position absolute
+  bottom 0
+  width 100%
+  z-index 97 //
+.corridor_2
+  _wh(100%,22px)
+  _font(16px, 22px, #fff,,left)
+  margin 12px 12px 12px 0
+.locate-wrap
+  position absolute
+  width 100%
+  bottom -40%
+.locate-content
+  position absolute
+  width 2.9rem
+  height 2.56rem
+  z-index 99
+  background center center / 100% 100% url(../assets/images/popover_1.png) no-repeat
+  padding .36rem .15rem
+.tan_pline
+  width 100%
+  margin 0 auto
+.tan_p
+  font-size .13rem
+  line-height .36rem
+  height .36rem
+  overflow hidden
+  color #fff
+.close_btn
+  position absolute
+  top 3%
+  right 10%
+  margin-right -.25rem
+  font-size .14rem
+  line-height .34rem
+  padding 0 .16rem
+  border-radius 5px
+  cursor pointer
+.bottom_wrapper
+  width 100%
+  height 50%
+  padding-top 20px
+  _fj(row)
+.bottom_wrapper_l
+  _wh(calc(50% - 10px), 100%)
+  position relative
+  background center center / 100% 100% url(../assets/images/sctj_bg3.png) no-repeat
+#echarts1
+  // margin-left 2rem
+  position absolute
+  top 0
+  left 0
+  z-index 9
+#echarts3
+  // margin-left 2rem
+  position absolute
+  top -30px
+  // left 60px
+  left .60rem
+  z-index 10
+.title
+  position absolute
+  top .15rem
+  left .25rem
+.block_h2
+  _wh(100%, 22px)
+  margin 12px
+  h2
+    font-size 16px
+    line-height 22px
+.list_scroll_title
+  width calc(100% - 30px)
+  margin 0 15px
+  background #262F52
+  span
+    display inline-block
+    width 18%
+    text-align center
+    line-height 32px
+    font-size 12px
+    color rgba(255,255,255,0.60)
+    // float left
+    &:nth-child(2)
+      width 28%
+.content-block-scroll
+  width calc(100% - 30px)
+  margin 0 15px 4px 15px
+  height calc(100% - 82px)
+  overflow hidden
+.content-block-scroll-ul
+  width 100%
+  li
+    width 100%
+    height 38px
+    _fj(row, center)
+    &:nth-child(2n)
+      background rgba(38,47,82,0.50)
+    span
       display inline-block
-      padding-left .3rem
+      width 18%
-    .type_color
+      padding 0 10px
-      display inline-block
+      font-size 12px
-      width .1rem
+      text-align center
-      height .1rem
+      line-height 38px
-      border-radius 50%
-    .tag_text
-      display inline-block
-      font-size .14rem
-      line-height .2rem
-    .blue
-      background #32C5FF !important
-    .green
-      background #30EBC9 !important
-    .gray
-      background #516282 !important
-    .yellow
-      background #E2BB0E !important
-    .orange
-      background #F96700 !important
-    .red
-      background #FF0000 !important
-    .lock
-      border .02rem solid #f00 !important
-    .yard-wrap
-      // height 6.95rem
-      height 100%
-      width 100%
-      // padding .1rem 0
-    .yard_group
-      width 100%
-      // height 1.8rem
-      height 180px
-      clear both
-    .yard_group_ul
-      float left
-      display grid
-      grid-gap 0
-      justify-items center
-      align-items center
-      margin-top -.01rem
-    .yard_group_ul_1
-      width 100%
-      position absolute
-      grid-template-columns repeat(20, 100% / 20)
-      // grid-template-rows repeat(2, 1.8rem / 2)
-      grid-template-rows repeat(2, 90px)
-    .yard_group_ul_2
-      width 90%
-      grid-template-columns repeat(18, 100% / 18)
-      // grid-template-rows repeat(2, 1.8rem / 2)
-      grid-template-rows repeat(2, 90px)
-    .yard_group_ul_3
-      width 40%
-      grid-template-columns repeat(8, 100% / 8)
-      // grid-template-rows repeat(2, 1.8rem / 2)
-      grid-template-rows repeat(2, 90px)
-    .yard_group_cell
-      position relative
-      display inline-block
-      width 100%
-      // height calc(1.8rem / 2)
-      height 90px
       box-sizing border-box
-      border .01rem solid #32C5FF
+      // float left
-      background #000F2B
+      &:nth-child(2)
-      border-radius 8px
+        width 28%
-    .yard_group_p
-      // height calc(1.8rem / 2)
-      height 90px
-      p
-        font-size 12px
-        // line-height 0.28rem
-        line-height 28px
-        height 28px
-        -webkit-text-size-adjust none
-        text-align center
-        white-space nowrap
-      img
-        display block
-        width 60%
-        // height 0.6rem
-        height 60px
-        margin 0 auto
-      .machine_1
-        position absolute
-        width 60%
-        width 100%
-        height 60px
-        overflow hidden
-        background center center / 100% 100% url(../assets/images/zhong.png) no-repeat
-        margin 0 auto
-        z-index 98
-        // left 50%
-        // margin-left -30%
-        opacity 0.5
-      .machine_2
-        position absolute
-        width 60%
-        width 100%
-        height 60px
-        overflow hidden
-        background center center / 100% 100% url(../assets/images/cp1.jpg) no-repeat
-        margin 0 auto
-        z-index 98
-        // left 50%
-        // margin-left -30%
-        opacity 0.5
-      .ingbox
-        position absolute
-        bottom 0
-        width 100%
-        z-index 97 //
-    .corridor_2
-      width 100%
-      height 60px
-      line-height 60px
-    .locate-wrap
-      position absolute
-      width 100%
-    .locate-content
-      position absolute
-      width 2.9rem
-      height 2.56rem
-      z-index 99
-      background center center / 100% 100% url(../assets/images/popover_1.png) no-repeat
-      padding .36rem .15rem
-    .tan_pline
-      width 100%
-      margin 0 auto
-    .tan_p
-      font-size .13rem
-      line-height .36rem
-      height .36rem
-      overflow hidden
-      color #fff
-    .close_btn
-      position absolute
-      top 3%
-      right 10%
-      margin-right -.25rem
-      font-size .14rem
-      line-height .34rem
-      padding 0 .16rem
-      border-radius 5px
-      cursor pointer
-  .con-b
-    width 49%
-    // height 3.45rem
-    height 345px
-    overflow hidden
-    position relative
-    background center center / 100% 100% url(../assets/images/sctj_bg3.png) no-repeat
-    margin-top .1rem
-    float left
-  .con2
-    margin-right .2rem
-    #echarts1
-      // margin-left 2rem
-      position absolute
-      top 0
-      left 0
-      z-index 9
-    #echarts3
-      // margin-left 2rem
-      position absolute
-      top -30px
-      // left 60px
-      left .60rem
-      z-index 10
-    .title
-      position absolute
-      top .15rem
-      left .25rem
-  .con3
-    padding 0 .27rem 0 .27rem
-    .block_h2
-      h2
-        font-size .16rem
-        line-height .22rem
-        margin .15rem 0 .15rem 0
-    .list_scroll_title
-      width 100%
-      background #262F52
-      span
-        display inline-block
-        width 18%
-        text-align center
-        line-height .32rem
-        font-size 14px
-        // float left
-        &:nth-child(2)
-          width 28%
-    .content-block-scroll
-      width 100%
-      height calc(100% - 0.6rem)
-      overflow hidden
-    .content-block-scroll-ul
-      li
-        width 100%
-        &:nth-child(2n)
-          background rgba(38,47,82,0.50)
-        span
-          display inline-block
-          width 18%
-          padding 0 .1rem
-          font-size 12px
-          text-align center
-          line-height .38rem
-          box-sizing border-box
-          // float left
-          &:nth-child(2)
-            width 28%
 .foldcricle0
   position absolute
   z-index 102
@@ -681,4 +691,10 @@ export default {
 //   transform rotate(-120deg)
 //   bottom -2px
 //   left 138px
+.yard_group_p
+  _wh(100%, 100%)
+.fontselect
+  _font(12px, 30px, #fff,,)
+  // transform scale(0.8)
+  white-space:nowrap
 </style>