样式

src/pages/XghyScreen.vue

@@ -37,20 +37,10 @@
           </div>
           <div class="item_content_aa">
             <div class="congroup">
-              <div class="acon">
+              <div class="acon" v-for="(e, i) in kcflArr" :key="i">
-                <div class="acon-num">123</div>
+                <div class="acon-num">{{e.qty}}</div>
                 <div class="acon-icon"></div>
-                <div class="acon-label">合格</div>
+                <div class="acon-label">{{e.name}}</div>
-              </div>
-              <div class="acon">
-                <div class="acon-num">123</div>
-                <div class="acon-icon"></div>
-                <div class="acon-label">合格</div>
-              </div>
-              <div class="acon">
-                <div class="acon-num">123</div>
-                <div class="acon-icon"></div>
-                <div class="acon-label">合格</div>
               </div>
             </div>
             <div class="tips-ht">焊条1保质期剩余2天！</div>
@@ -131,6 +121,10 @@
         <div class="item_wrap">
           <div class="item_tip">
             <div class="item_tip_left">班组焊材领退</div>
+            <!-- <div class="btn_select">当日>></div> -->
+            <div class="item_tip_right" style="width: 60%;">
+              <span :class="{'span1': swiper === true}">当日</span><span :class="{'span1': swiper === false}">/当月</span>
+            </div>
           </div>
           <!-- <div class="item_content_1">
             <div id="echart_d10" style="width: 100%; height: 100%"></div>
@@ -142,6 +136,9 @@
         <div class="item_wrap">
           <div class="item_tip">
             <div class="item_tip_left">焊材使用TOP5</div>
+            <div class="item_tip_right" style="width: 60%;">
+              <span :class="{'span1': swiper === true}">当日</span><span :class="{'span1': swiper === false}">/当月</span>
+            </div>
           </div>
           <div class="item_content_1">
             <div id="echart_d08" style="width: 100%; height: 100%"></div>
@@ -192,7 +189,22 @@ export default {
   },
   data () {
     return {
+      swiper: false,
       ddddcolor: '#f00',
+      kcflArr: [
+        {
+          name: '合格',
+          qty: '123'
+        },
+        {
+          name: '不合格',
+          qty: '2'
+        },
+        {
+          name: '待检',
+          qty: '35'
+        }
+      ],
       devices: [
           {
               name: 'CTU01',
@@ -1406,7 +1418,7 @@ export default {
   height 80px
   background center center / 100% 100% url(../assets/images/item-icon.png) no-repeat
 .acon-label
-  font-size .26rem
+  font-size .24rem
   height 50px
   line-height 50px
 .tips-ht
@@ -1415,12 +1427,28 @@ export default {
   height .36rem
   line-height .36rem
   // display inline-block
-  padding .1rem 0 0 .3rem
+  padding-left .2rem
+  padding-bottom .3rem
   float left
+  font-weight bold
+  background-color rgba(220, 220, 220, 0.1)
 .item_content_04
   _wh(100%, calc(100% - .32rem))
   _fj(space-around)
   padding-top .17rem
+.item_tip_right
+  float right
+  _wh(39%, 100%)
+  line-height inherit
+  text-align right
+  padding-right .09rem
+  position absolute
+  right 2%
+  span
+    _font(.14rem, inherit, #FFCB00, lighter,)
+  .span1
+    font-size .12rem
+    color #84B0DA
 .item_content_1
   _wh(100%, calc(100% - .32rem))
   _fj(space-around)
@@ -1688,7 +1716,13 @@ export default {
   text-align center
 .cred
   color #CC6060
-
+.btn_select
+  position absolute
+  right 2%
+  // border 1px solid #6798ef
+  width 80px
+  padding 2px 0
+  text-align center
 /* 监控模块容器 — 两张卡片并排 */
 .monitor-module {
     width: 100%;