设备样式

src/config/mork2.js

@@ -2470,31 +2470,6 @@ export const homepageEquipment = () => {
     },
     'dry': {
       'kiln': [
-        {
-          'data': [
-            {
-              'value': '',
-              'key': '开机时间'
-            },
-            {
-              'value': '0小时',
-              'key': '待机时间'
-            },
-            {
-              'value': '0小时',
-              'key': '生产时间'
-            },
-            {
-              'value': '0小时',
-              'key': '故障时间'
-            }
-          ],
-          'statusChinese': '停机',
-          'equipment': 'Y03',
-          'equipmentName': '窑3',
-          'table': [],
-          'status': 3
-        },
         {
           'data': [
             {

src/pages/modules/home/index.vue

@@ -184,9 +184,9 @@ export default {
     }
   },
   created () {
-    this._homepageDataLeft()
+    // this._homepageDataLeft()
-    this._homepageDataRight()
+    // this._homepageDataRight()
-    this.refresh()
+    // this.refresh()
   },
   beforeDestroy () {
     clearInterval(this.timer)

src/pages/modules/home/workshop.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="center_wrapper">
-    <t-canvas></t-canvas>
+    <!-- <t-canvas></t-canvas> -->
     <div class="status_wrap">
       <div class="status_item">
           <div class="status_tip green"></div>
@@ -101,77 +101,30 @@
     </div>
     <div class="machine_block machine_block_1">
       <div class="machine_combine">
-        <div class="yao_line_1">
-          <div v-for="(e, i) in [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]" :key="i" class="yao_line_dot"></div>
-        </div>
-        <div class="yao_line_1 yao_line_2">
-          <div v-for="(e, i) in [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]" :key="i" class="yao_line_dot"></div>
-        </div>
-        <!-- <div class="yao_bg_1"></div> -->
-        <!-- <div class="yao_bg_1 yao_bg_2"></div> -->
         <div class="yao_wrap" v-for="(e, i) in kiln" :key="e.equipment" :class="'yao_' + (i + 1)" @click="getInfo(e)">
-          <div class="yao_layer1"></div>
-          <div class="yao_layer2"></div>
-          <div class="yao_layer4 yao_layer6">
-            <device-pop
-              type="yao"
-              :pkId="pkId"
-              :data="e"
-              direction="down"
-              @closePop="closePop"
-            ></device-pop>
-          </div>
-          <div class="yao_layer3" :style="{background: ['#11ff0d', '#11ff0d', '#bfbfbf', '#11ff0d'][Number(e.status) - 1]}">
-          </div>
-          <div class="yao_layer4"></div>
-          <div class="yao_layer4 yao_layer5"></div>
-        </div>
-        <div class="yao_wrap" v-for="(e, i) in coolingConveyorLine" :key="e.equipment" :class="'yao_' + (i + 4)" @click="getInfo(e)">
-          <div class="yao_layer1"></div>
-          <div class="yao_layer2"></div>
-          <div class="yao_layer4 yao_layer6">
-            <device-pop
-              type="ssx"
-              :pkId="pkId"
-              :data="e"
-              direction="down"
-              @closePop="closePop"
-            ></device-pop>
-          </div>
-          <div class="yao_layer3" :style="{background: ['#11ff0d', '#fdfd0f', '#bfbfbf', '#ff1016'][Number(e.status) - 1]}">
-          </div>
-          <div class="p_device yytsj_wrap">
-            <img class="device_img" src="../../../images/device/yytsj_green.png" alt="">
-          </div>
-          <div class="p_device yygcj_wrap">
-            <img class="device_img" src="../../../images/device/yygcj_green.png" alt="">
-          </div>
-        </div>
-        <div class="p_device" v-for="(e, i) in gantryRobot" :key="e.equipment" :class="'yjbyx_' + (i + 1)">
-          <img v-show="e.status === 1" class="device_img" src="../../../images/device/yjbyx_green.png" alt="" @click="getInfo(e)">
-          <img v-show="e.status === 2" class="device_img" src="../../../images/device/yjbyx_yellow.png" alt="" @click="getInfo(e)">
-          <img v-show="e.status === 3" class="device_img" src="../../../images/device/yjbyx_gray.png" alt="" @click="getInfo(e)">
-          <img v-show="e.status === 4" class="device_img" src="../../../images/device/yjbyx_red.png" alt="" @click="getInfo(e)">
           <device-pop
-            type="hangj"
+            type="yao"
-            :pkId="pkId"
-            :data="e"
-            :direction="i === 0 ? 'down' : ''"
-            @closePop="closePop"
-          ></device-pop>
-        </div>
-        <div class="p_device ktp_yao_back_wrap_1">
-          <div class="ktp_yao_back" v-for="e in backWarehouse" :key="e.equipment">
-            <img v-show="e.status !== 4 && (e.pointStatus === '2' || e.pointStatus === '3')" class="device_img" src="../../../images/device/ktpv_green.png" alt="" @click="getInfo(e)">
-            <img v-show="e.status !== 4 && e.pointStatus === '1'" class="device_img" src="../../../images/device/ktpv_gray.png" alt="" @click="getInfo(e)">
-            <img v-show="e.status === 4" class="device_img" src="../../../images/device/ktpv_red.png" alt="" @click="getInfo(e)">
-            <device-pop
-            type="tp"
             :pkId="pkId"
             :data="e"
             direction="down"
             @closePop="closePop"
           ></device-pop>
+          <div class="yao_layer3"></div>
+          <div class="yao_layer1" :class="Number(e.status) === 3 ? 'yao_layer1_2' : 'yao_layer1_1'"></div>
+          <div class="yao_layer2" :class="Number(e.status) === 3 ? 'yao_layer2_2' : 'yao_layer2_1'"><p>{{i+1}}号窑</p></div>
+        </div>
+        <div class="p_device ltssj_wrap">
+          <div class="ltssj" v-for="e in  conveyorLine" :key="e.equipment">
+            <img v-show="e.status === 1" class="device_img" src="../../../images/device/ktp_green.png" alt="" @click="getInfo(e)">
+            <img v-show="e.status === 2" class="device_img" src="../../../images/device/ktp_green.png" alt="" @click="getInfo(e)">
+            <img v-show="e.status === 3" class="device_img" src="../../../images/device/ktp_gray.png" alt="" @click="getInfo(e)">
+            <img v-show="e.status === 4" class="device_img" src="../../../images/device/ktp_green.png" alt="" @click="getInfo(e)">
+            <device-pop
+              type="ssx"
+              :pkId="pkId"
+              :data="e"
+              @closePop="closePop"
+            ></device-pop>
           </div>
         </div>
         <div class="p_device dpj_wrap">
@@ -186,15 +139,40 @@
             @closePop="closePop"
           ></device-pop>
         </div>
-        <div class="p_device ltssj_wrap">
+        <div class="p_device" v-for="(e, i) in gantryRobot" :key="e.equipment" :class="'yjbyx_' + (i + 1)">
-          <!-- <img class="device_img" src="../../../images/device/ltssj_green.png" alt=""> -->
+          <img v-show="e.status === 1" class="device_img" src="../../../images/device/yjbyx_green.png" alt="" @click="getInfo(e)">
-          <div class="ltssj" v-for="e in  conveyorLine" :key="e.equipment">
+          <img v-show="e.status === 2" class="device_img" src="../../../images/device/yjbyx_yellow.png" alt="" @click="getInfo(e)">
-            <img v-show="e.status === 1" class="device_img" src="../../../images/device/ktpv_green.png" alt="" @click="getInfo(e)">
+          <img v-show="e.status === 3" class="device_img" src="../../../images/device/yjbyx_gray.png" alt="" @click="getInfo(e)">
-            <img v-show="e.status === 2" class="device_img" src="../../../images/device/ktpv_green.png" alt="" @click="getInfo(e)">
+          <img v-show="e.status === 4" class="device_img" src="../../../images/device/yjbyx_red.png" alt="" @click="getInfo(e)">
-            <img v-show="e.status === 3" class="device_img" src="../../../images/device/ktpv_gray.png" alt="" @click="getInfo(e)">
+          <device-pop
-            <img v-show="e.status === 4" class="device_img" src="../../../images/device/ktpv_green.png" alt="" @click="getInfo(e)">
+            type="hangj"
+            :pkId="pkId"
+            :data="e"
+            :direction="i === 0 ? 'down' : ''"
+            @closePop="closePop"
+          ></device-pop>
+        </div>
+        <div class="p_device ktp_yao_back_wrap">
+          <div class="ktp_yao_back" v-for="e in backWarehouse" :key="e.equipment">
+            <img v-show="e.status !== 4 && (e.pointStatus === '2' || e.pointStatus === '3')" class="device_img" src="../../../images/device/ktp_green.png" alt="" @click="getInfo(e)">
+            <img v-show="e.status !== 4 && e.pointStatus === '1'" class="device_img" src="../../../images/device/ktp_gray.png" alt="" @click="getInfo(e)">
+            <img v-show="e.status === 4" class="device_img" src="../../../images/device/ktp_red.png" alt="" @click="getInfo(e)">
             <device-pop
-              type="ssx"
+            type="tp"
+            :pkId="pkId"
+            :data="e"
+            direction="down"
+            @closePop="closePop"
+          ></device-pop>
+          </div>
+        </div>
+        <div class="p_device ktp_yao_back_wrap ktp_yao_front_wrap">
+          <div class="ktp_yao_back" v-for="e in  frontWarehouse" :key="e.equipment">
+            <img v-show="e.status !== 4 && (e.pointStatus === '2' || e.pointStatus === '3')" class="device_img" src="../../../images/device/ktp_green.png" alt="" @click="getInfo(e)">
+            <img v-show="e.status !== 4 && e.pointStatus === '1'" class="device_img" src="../../../images/device/ktp_gray.png" alt="" @click="getInfo(e)">
+            <img v-show="e.status === 4" class="device_img" src="../../../images/device/ktp_red.png" alt="" @click="getInfo(e)">
+            <device-pop
+              type="tp"
               :pkId="pkId"
               :data="e"
               @closePop="closePop"
@@ -203,19 +181,6 @@
         </div>
       </div>
     </div>
-    <div class="p_device ktp_yao_front_wrap">
-      <div class="ktp_yao_front" v-for="e in  frontWarehouse" :key="e.equipment">
-        <img v-show="e.status !== 4 && (e.pointStatus === '2' || e.pointStatus === '3')" class="device_img" src="../../../images/device/ktp_green.png" alt="" @click="getInfo(e)">
-        <img v-show="e.status !== 4 && e.pointStatus === '1'" class="device_img" src="../../../images/device/ktp_gray.png" alt="" @click="getInfo(e)">
-        <img v-show="e.status === 4" class="device_img" src="../../../images/device/ktp_red.png" alt="" @click="getInfo(e)">
-        <device-pop
-          type="tp"
-          :pkId="pkId"
-          :data="e"
-          @closePop="closePop"
-        ></device-pop>
-      </div>
-    </div>
     <div class="p_device cpj_ssx_wrap">
       <div class="ssx_wrap">
         <div class="ssx" v-for="(e, i) in vconveyorLine" :key="i">
@@ -244,39 +209,7 @@
     <div class="machine_block machine_block_3">
       <div class="machine_combine">
         <div class="yj_630_blocks">
-          <div class="yj_630_block" v-for="(e, i) in [1,1,1]" :key="i" style="opacity: 0.2">
+          <div class="yj_630_block" v-for="e in press.slice(0,2)" :key="e.pkid">
-            <div class="p_device yj_630_wrap_1">
-              <img class="device_img" src="../../../images/device/630/yj_gray.png" alt="">
-            </div>
-            <div class="p_device yj_630_wrap_1 yj_630_wrap_2" :style="i === 2 ? 'display: none' : ''">
-              <img class="device_img" src="../../../images/device/630/yj_gray.png" alt="">
-            </div>
-            <div class="p_device slw_630_wrap_1">
-              <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
-            </div>
-            <div class="p_device slw_630_wrap_1 slw_630_wrap_2">
-              <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
-            </div>
-            <div class="p_device mdssj_630_wrap_1">
-              <img class="device_img" src="../../../images/device/630/mdssj_gray.png" alt="">
-            </div>
-            <div class="p_device mdssj_630_wrap_1 mdssj_630_wrap_2">
-              <img class="device_img" src="../../../images/device/630/mdssj_gray.png" alt="">
-            </div>
-            <div class="p_device lmyzj_630_wrap_1">
-              <img class="device_img" src="../../../images/device/630/lmyzj_gray.png" alt="">
-            </div>
-            <div class="p_device weilan_630_wrap">
-              <img class="device_img" src="../../../images/device/630/wl.png" alt="">
-            </div>
-            <div class="p_device ktp_630_wrap" v-for="(e, i) in [1,1,1,1]" :key="i" :class="'ktp_630_wrap_' + (i+1)">
-              <img class="device_img" src="../../../images/device/ktpv_gray.png" alt="">
-            </div>
-            <div class="p_device robot_630_wrap">
-              <img class="device_img" src="../../../images/device/robot_630_gray.png" alt="">
-            </div>
-          </div>
-          <div class="yj_630_block yj_630_block_reverse" v-for="e in press.slice(0,3)" :key="e.pkid">
             <div class="p_device slw_630_wrap_1" v-for="(el, j) in e.loadLocation" :key="el.equipment" :class="{'slw_630_wrap_2': j === 1}">
               <img v-show="el.status !== 4 && (el.pointStatus === '2' || el.pointStatus === '3')" class="device_img" src="../../../images/device/lz_hj_green.png" alt="" @click="getInfo(el)">
               <img v-show="el.status !== 4 && (el.pointStatus === '1')" class="device_img" src="../../../images/device/lz_hj_gray.png" alt="" @click="getInfo(el)">
@@ -289,6 +222,9 @@
               ></device-pop>
             </div>
             <div v-for="(el, j) in e.pressMachine" :key="el.equipment">
+              <div class="p_device weilan_630_wrap">
+                <img class="device_img" src="../../../images/device/630/wl.png" alt="">
+              </div>
               <div class="p_device yj_630_wrap_1" :class="{'yj_630_wrap_2': j === 1}">
                 <img v-show="el.status === 1" class="device_img" src="../../../images/device/630/yj_green.png" alt="" @click="getInfo(el)">
                 <img v-show="el.status === 2" class="device_img" src="../../../images/device/630/yj_yellow.png" alt="" @click="getInfo(el)">
@@ -314,9 +250,6 @@
               <img v-show="e.palletizingRobot.status === 3" class="device_img" src="../../../images/device/630/lmyzj_gray.png" alt="">
               <img v-show="e.palletizingRobot.status === 4" class="device_img" src="../../../images/device/630/lmyzj_red.png" alt="">
             </div>
-            <div class="p_device weilan_630_wrap">
-              <img class="device_img" src="../../../images/device/630/wl.png" alt="">
-            </div>
             <div class="p_device ktp_630_wrap" v-for="(el, j) in e.unloadLocation" :key="el.equipment" :class="'ktp_630_wrap_' + (j+1)">
               <img v-show="el.status === 1" class="device_img" src="../../../images/device/ktpv_green.png" alt="" @click="getInfo(el)">
               <img v-show="el.status === 2" class="device_img" src="../../../images/device/ktpv_yellow.png" alt="" @click="getInfo(el)">
@@ -769,7 +702,7 @@ export default {
 .status_wrap
     position absolute
     top 2%
-    right 0
+    left 0
     z-index 1
     display: flex
     justify-content space-between
@@ -786,30 +719,31 @@ export default {
     margin-right 10px
     box-shadow 0px 0px 4px 0px rgba(33,121,195,0.88)
 .status_name
-    font-size .16rem
+    font-size 16px
     line-height 1
     color #fff
 .machine_block
   position absolute
   border: 1px solid #00c8da;
-  padding: 0.2rem 0.1rem;
+  padding: 12px;
   box-shadow: 0 0 15px #0087ac;
   border-radius: 10px;
 .machine_block_1
-  width 48%
+  width: 70%;
-  height 50%
+  height: 25%;
-  left 0
+  right: 2%;
-  top 0
+  top: 27%;
 .machine_block_2
-  width 35%
+  width: 52%;
-  height 23%
+  height: 23%;
-  left 58%
+  left: 35%;
-  top 17%
+  top: 1.5%;
 .machine_block_3
-  width 58%
+  width 28%
-  height 32%
+  height 22%
+  left 2%
   top 57%
-  padding .1rem 4.5%
+  padding 12px
 .machine_block_4
   width 39%
   height 32%
@@ -824,13 +758,13 @@ export default {
   width 15%
   left 61%
   top 78%
-  padding 0.2rem
+  padding 20px
   border none
   box-shadow none
 .machine_block_6
   width 100%
   height 10%
-  padding  .07rem .1rem
+  padding  7px 1px
   top auto
   bottom 0
 .machine_combine
@@ -845,13 +779,17 @@ export default {
   width 100%
   height 100%
 .yjbyx_1
-  width 100%
+  width 4.5%
-  height 10%
+  height 80%
+  top 10%
+  img
+    transform rotate(180deg)
 .yjbyx_2
-  width 100%
+  width 4.5%
-  height 10%
+  height 80%
-  top auto
+  left auto
-  bottom 0
+  right 0
+  top 10%
 .yao_line_1
   position absolute
   width 100%
@@ -871,65 +809,55 @@ export default {
   background-color #e1e1e1
 .yao_wrap
   position absolute
-  width 2%
+  width 88%
-  height 100%
+  height 50px
-  background-color #ded8e6
-.yao_bg_1
-  position absolute
-  top: 9%;
-  left: 6%;
-  width 9%
-  height 82%
-  background-color #d3d3d3
-.yao_bg_2
-  left 19%
 .yao_layer1
   position absolute
-  left -5px
+  left 1%
-  top -3px
-  width calc(100% + 10px)
-  height calc(100% + 6px)
-  border-left 2px solid #909090
-  border-right 2px solid #909090
-.yao_layer2
-  position absolute
-  left calc(50% - 1px)
   top 0
-  width 2px
+  width 98%
-  height 100%
+  height 50%
-  background-color #ddb528
+  transform: skew(26deg);
+.yao_layer1_1
+  background-image: linear-gradient(to bottom, #00ff00, #b2fbb2);
+  box-shadow: inset 1px 3px 6px 0px #04b004;
+  border: 2px solid #028802;
+.yao_layer1_2
+  background-image: linear-gradient(to bottom, #bfbfbf, #f1f1f1);
+  box-shadow: inset 1px 3px 6px 0px #838282;
+  border: 2px solid #8e8a8a;
+.yao_layer2
+  position: absolute;
+  left: 2%;
+  top: 50%;
+  width: 98%;
+  height: 50%;
+  background-color: #CCC4BB;
+  border-top: 0;
+  padding-left 10px
+  p
+    line-height: 22px;
+    font-size: 20px;
+    color: #F04826;
+    transform: scale(1, 0.7);
+    text-shadow 2px 2px 2px rgba(0, 0, 0, 0.3);
+.yao_layer2_1
+  border: 2px solid #028802;
+.yao_layer2_2
+  border: 2px solid #8e8a8a;
 .yao_layer3
   position absolute
-  left -5px
+  width: 10%;
-  top 5%
+  height: 70%;
-  width calc(100% + 10px)
+  top: 0;
-  height 90%
+  left: 0;
-.yao_layer4
+  background-color: #A0927E;
-  position absolute
-  width calc(100% + 10px)
-  height 2px
-  top 7%
-  left -5px
-  background-color #6d9d6a
-.yao_layer5
-  top auto
-  bottom 7%
-.yao_layer6
-  top 50%
 .yao_1
-  left 3%
+  left 6%
+  top 20%
 .yao_2
-  left 16%
+  left 6%
-.yao_3
+  bottom 30%
-  left 29%
-.yao_4
-  left 42%
-.yao_5
-  left 55%
-.yao_6
-  left 68%
-.yao_7
-  left 81%
 .yytsj_wrap
   width 50%
   left 25%
@@ -938,29 +866,36 @@ export default {
   top auto
   bottom 0
   left 25%
-.ktp_yao_back_wrap_1
+.ktp_yao_back_wrap
-  left auto
+  left 0
-  right: 0;
-  top: 10%;
-  width 7%
-  display: flex
-  justify-content space-between
-  align-items center
-  flex-wrap wrap
-.ktp_yao_back
-  position relative
-  width 50%
-.dpj_wrap
-  width 6%
-  left auto
   top auto
-  right 1%
+  bottom 0
-  bottom 15%
+  width 100%
+  height: 20px
+.ktp_yao_front_wrap
+  width 90%
+  left 5%
+  bottom auto
+  top 0
+.ktp_yao_back
+  float left
+  width 27px
+  height 20px
+  img
+    height auto
+.dpj_wrap
+  width 15%
+  left 18%
+  top auto
+  bottom 9%
 .ltssj_wrap
-  width 3.3%
+  height 20px
-  left: auto;
+  left -12px
-  right 4%
+  top: auto
-  top: 87%;
+  bottom 12%
+.ltssj
+  float left
+  width 27px
 .weilan_wrap_1
   height 100%
 .weilan_wrap_2
@@ -1013,110 +948,69 @@ export default {
   flex-wrap wrap
 .yj_630_block
   position relative
-  width 27%
+  width 48%
-  height 46%
+  height 100%
-  &:nth-child(2), &:nth-child(5)
-    margin-left 8%
-    margin-right 8%
-  &:nth-child(n+4)
-    margin-top 4%
 .yj_630_wrap_1
-  width 45%
+  width: 45%;
-  height 26%
+  height: 30%;
+  bottom: 16%;
+  top: auto;
 .yj_630_wrap_2
   left auto
   right 0
 .slw_630_wrap_1
-  width 19%
+  width: 20%;
-  left -24%
+  left: 40%;
-  top 5%
+  top: auto;
+  bottom: 12%;
+  height 21.42px
 .slw_630_wrap_2
-  top 21%
+  bottom 0
 .mdssj_630_wrap_1
   width 38%
   left 10%
-  top 25%
+  top 49%
 .mdssj_630_wrap_2
   left auto
   right 10%
 .lmyzj_630_wrap_1
   width 35%
   left 36%
-  top 31%
+  top 42%
+  img
+    transform rotate(180deg)
 .weilan_630_wrap
   width 100%
-  height 66%
+  height 45%
-  top auto
+  img
-  bottom 0
+    transform rotate(180deg)
 .robot_630_wrap
   width 1%
   height 1%
   left: 47%;
-  top: 73%;
+  top: 22%;
   img
       position absolute
       width: 2000%;
       height: auto;
-      top: -3500%;
+      top: -400%;
       left: -900%;
 .ktp_630_wrap
     width 15%
 .ktp_630_wrap_1
-    left 10%
+  left 10%
-    top 47%
+  top 4%
 .ktp_630_wrap_2
-    left auto
+  left auto
-    right 10%
+  right 10%
-    top 47%
+  top 4%
 .ktp_630_wrap_3
-    left 10%
+  left 10%
-    top 75%
+  top 22%
 .ktp_630_wrap_4
-    left auto
+  left auto
-    right 10%
+  right 10%
-    top 75%
+  top 22%
-.yj_630_block_reverse
-  .yj_630_wrap_1
-    top auto
-    bottom 0
-  .slw_630_wrap_1
-    top auto
-    bottom 21%
-    left auto
-    right -24%
-  .slw_630_wrap_2
-    top auto
-    bottom 5%
-  .mdssj_630_wrap_1
-    top auto
-    bottom 25%
-    transform rotate(180deg)
-  .lmyzj_630_wrap_1
-    top auto
-    bottom 31%
-    transform rotate(180deg)
-  .weilan_630_wrap
-    top 0
-    bottom auto
-    transform rotate(180deg)
-  .ktp_630_wrap_1
-    top auto
-    bottom 75%
-  .ktp_630_wrap_2
-    top auto
-    bottom 75%
-  .ktp_630_wrap_3
-    top auto
-    bottom 47%
-  .ktp_630_wrap_4
-    top auto
-    bottom 47%
-  .robot_630_wrap
-    top auto
-    bottom 73%
-    img
-      top: -700%;
-      left: -1200%;
 .yj_1600_block_1
   position absolute
   left: 5%;
@@ -1354,31 +1248,15 @@ export default {
   align-items center
   img
     width 100%
-.ktp_yao_front_wrap
-  width 38%
-  top: 52%;
-  left: 10%;
-  display: flex
-  justify-content flex-start
-  align-items center
-  flex-wrap: wrap
-.ktp_yao_front
-  position relative
-  width calc(100% / 14)
 .cpj_ssx_wrap
-  width 15%
+  width 2.7%
-  left: 75%;
+  left: 11%;
-  top: 48%;
+  top: 33%;
 .ssx_wrap
   width 100%
-  display: flex
-  justify-content space-between
-  align-items center
 .ssx
-  position relative
+  width 100%
-  width 20%
+  height 28.77px
-  img
-    width 100%
 .cpj_wrap
   width 18%
   top: -51%;