lkkb 刻度尺，其他状态调整

src/views/ccgl/dpkb/lkkb/index.vue

@@ -24,7 +24,8 @@
             </div>
             <div class="xdmxBody">
               <div v-for="(item,index) in xdList1" @click="selectIndex=item" class="xdmxBodymx flex1" :class="{
-                xdmxBodymxSelected:selectIndex==item
+                xdmxBodymxSelected:selectIndex==item,
+                borderLine:item==2
               }">
                 {{item}}
               </div>
@@ -38,7 +39,8 @@
             </div>
             <div class="xdmxBody">
               <div v-for="(item,index) in xdList2" @click="selectIndex=item" class="xdmxBodymx flex1" :class="{
-               xdmxBodymxSelected:selectIndex==item
+               xdmxBodymxSelected:selectIndex==item,
+                borderLine:item==6
              }">
                 {{item}}
               </div>
@@ -53,7 +55,8 @@
             </div>
             <div class="xdmxBody">
               <div v-for="(item,index) in xdList3" @click="selectIndex=item" class="xdmxBodymx flex1" :class="{
-               xdmxBodymxSelected:selectIndex==item
+               xdmxBodymxSelected:selectIndex==item,
+                borderLine:item==10
              }">
                 {{item}}
               </div>
@@ -67,7 +70,8 @@
             </div>
             <div class="xdmxBody">
               <div v-for="(item,index) in xdList4" @click="selectIndex=item" class="xdmxBodymx flex1" :class="{
-                xdmxBodymxSelected:selectIndex==item
+                xdmxBodymxSelected:selectIndex==item,
+                 borderLine:item==13
               }">
                 {{item}}
               </div>
@@ -81,7 +85,8 @@
             </div>
             <div class="xdmxBody">
               <div v-for="(item,index) in xdList5" @click="selectIndex=item" class="xdmxBodymx flex1" :class="{
-                xdmxBodymxSelected:selectIndex==item
+                xdmxBodymxSelected:selectIndex==item,
+                 borderLine:item==16
               }">
                 {{item}}
               </div>
@@ -256,6 +261,9 @@
 </script>
 
 <style lang="scss" scoped>
+  .borderLine{
+    border-right: 2px solid #009ae7;
+  }
   /* 穿透 状态 css*/
   ::v-deep .wh {
     /* 无样式*/

src/views/ccgl/dpkb/lkkb/mx/mx1.vue

 <template>
-  <div class="full">
+  <div class="full ">
+    <!-- 刻度表示-->
     <div ref="infoBox" class="infoCar">
     </div>
     <div class="full container">
-      <div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
-        v-for="(item,index) in boxList" :key="item.code" class="box"
-        :class="{
+      <!-- 刻度x-->
+      <div class="flex"
+        style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+        <div v-for="(item,index) in 48" style="width: 36px;height: 16px;text-align: center;">
+          {{item}}
+        </div>
+      </div>
+      <!-- 刻度y-->
+      <div class="flex "
+        style="position: absolute;left: -26px;top:16px;color: #fff;line-height: 16px;font-size: 12px;height: calc(85.5% + 28px);flex-direction: column;padding-left: 16px;">
+        <div class="flex1" v-for="(item,index) in 9" style="width: 36px;text-align: center;height:11.11% ;line-height: 30px;">
+          {{10-item}}
+        </div>
+      </div>
+
+      <div style="position: relative" @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
+        v-for="(item,index) in boxList" :key="item.code" class="box" :class="{
         yh:item.kczt=='U',
         wh:item.kczt=='E',
         dj:item.zt=='F',
@@ -15,8 +30,7 @@
         yhyj:item.kczt=='U'&&item.cjzt=='Y',
         yhyjsd:item.kczt=='U'&&item.cjzt=='Y'&&item.zt=='L',
         yhyjdj:item.kczt=='U'&&item.cjzt=='Y'&&item.zt=='F',
-      }"
-      >
+      }">
         <!-- {{item.code}} -->
       </div>
     </div>
@@ -46,7 +60,7 @@
       },
       getBoxList() {
         this.$post('lxyl/cxfx/kw/query', {
-          hjCode:'HJ1',
+          hjCode: 'HJ1',
           kwx: '1'
         }).then(res => {
           if (res.data.records) {
@@ -74,8 +88,10 @@
                    `
                   $(infoBox).empty()
                   $(infoBox).append(content)
-                  infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 40) + 'px'); // 信息框距离顶部10像素
-                  infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 40) + 'px'); // 信息框距离左侧10像素
+                  infoBox.style.top = event.clientY > 400 ? ((event.layerY - 125) + 'px') : ((event
+                    .layerY + 40) + 'px'); // 信息框距离顶部10像素
+                  infoBox.style.left = event.clientX > 800 ? ((event.layerX - 125) + 'px') : ((event
+                    .layerX + 40) + 'px'); // 信息框距离左侧10像素
                   infoBox.style.display = 'block';
                 });
                 element.addEventListener('mouseout', function(event) {
@@ -94,6 +110,7 @@
 
 <style scoped>
   .container {
+    padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(48, 30px);

src/views/ccgl/dpkb/lkkb/mx/mx10.vue

@@ -3,6 +3,22 @@
     <div ref="infoBox" class="infoCar">
     </div>
     <div class="full container">
+
+      <!-- 刻度x-->
+      <div class="flex"
+        style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+        <div v-for="(item,index) in 47" style="width: 36px;height: 16px;text-align: center;">
+          {{item}}
+        </div>
+      </div>
+      <!-- 刻度y-->
+      <div class="flex "
+        style="position: absolute;left: -26px;top:16px;color: #fff;line-height: 16px;font-size: 12px;height: calc(85.5% + 28px);flex-direction: column;padding-left: 16px;">
+        <div class="flex1" v-for="(item,index) in 9" style="width: 36px;text-align: center;height:11.11% ;line-height: 30px;">
+          {{10-item}}
+        </div>
+      </div>
+
       <div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
         v-for="(item,index) in boxList" :key="item.code" class="box"
         :class="{
@@ -95,6 +111,7 @@
 
 <style scoped>
   .container {
+    padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(47, 30px);

src/views/ccgl/dpkb/lkkb/mx/mx11.vue

@@ -4,6 +4,21 @@
       <div class="full flex1 container1">
         <div ref="infoBox1" class="infoCar">
         </div>
+        <!-- 刻度x-->
+        <div class="flex"
+          style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+          <div v-for="(item,index) in 4" style="width: 36px;height: 16px;text-align: center;">
+            {{item}}
+          </div>
+        </div>
+        <!-- 刻度y-->
+        <div class="flex "
+          style="position: absolute;left: -26px;top:16px;color: #fff;line-height: 16px;font-size: 12px;height: calc(85.5% + 28px);flex-direction: column;padding-left: 16px;">
+          <div class="flex1" v-for="(item,index) in 9" style="width: 36px;text-align: center;height:11.11% ;line-height: 30px;">
+            {{10-item}}
+          </div>
+        </div>
+
         <div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1" v-for="(item,index) in boxList1" :key="item.code" class="box"
          :class="{
            yh:item.kczt=='U',
@@ -20,6 +35,15 @@
         </div>
       </div>
       <div class="full flex1 container2">
+
+        <!-- 刻度x-->
+        <div class="flex"
+          style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+          <div v-for="(item,index) in 4" style="width: 36px;height: 16px;text-align: center;">
+            {{item+4}}
+          </div>
+        </div>
+
         <div ref="infoBox2" class="infoCar">
         </div>
         <div  @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx2" v-for="(item,index) in boxList2" :key="item.code" class="box"
@@ -39,6 +63,13 @@
         </div>
       </div>
       <div class="full flex1 container3">
+        <!-- 刻度x-->
+        <div class="flex"
+          style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+          <div v-for="(item,index) in 3" style="width: 36px;height: 16px;text-align: center;">
+            {{item+8}}
+          </div>
+        </div>
         <div  ref="infoBox3" class="infoCar">
         </div>
         <div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx3" v-for="(item,index) in boxList3" :key="item.code" class="box"
@@ -59,6 +90,13 @@
         </div>
       </div>
       <div class="full flex1 container4">
+        <!-- 刻度x-->
+        <div class="flex"
+          style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+          <div v-for="(item,index) in 5" style="width: 36px;height: 16px;text-align: center;">
+            {{item+12}}
+          </div>
+        </div>
         <div  ref="infoBox4" class="infoCar">
         </div>
           <div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx4" v-for="(item,index) in boxList4" :key="item.code" class="box"
@@ -78,6 +116,13 @@
           </div>
       </div>
       <div class="full flex1 container5">
+        <!-- 刻度x-->
+        <div class="flex"
+          style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+          <div v-for="(item,index) in 4" style="width: 36px;height: 16px;text-align: center;">
+            {{item+17}}
+          </div>
+        </div>
         <div  ref="infoBox5" class="infoCar">
         </div>
         <div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx5" v-for="(item,index) in boxList5" :key="item.code" class="box"
@@ -97,6 +142,13 @@
         </div>
       </div>
       <div class="full flex1 container6">
+        <!-- 刻度x-->
+        <div class="flex"
+          style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+          <div v-for="(item,index) in 4" style="width: 36px;height: 16px;text-align: center;">
+            {{item+21}}
+          </div>
+        </div>
         <div ref="infoBox6" class="infoCar">
         </div>
         <div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx6" v-for="(item,index) in boxList6" :key="item.code" class="box"
@@ -116,6 +168,13 @@
         </div>
       </div>
       <div class="full flex1 container7">
+        <!-- 刻度x-->
+        <div class="flex"
+          style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+          <div v-for="(item,index) in 4" style="width: 36px;height: 16px;text-align: center;">
+            {{item+25}}
+          </div>
+        </div>
         <div  ref="infoBox7" class="infoCar">
         </div>
         <div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx7" v-for="(item,index) in boxList7" :key="item.code" class="box"
@@ -134,6 +193,13 @@
         </div>
       </div>
       <div class="full flex1 container8">
+        <!-- 刻度x-->
+        <div class="flex"
+          style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+          <div v-for="(item,index) in 3" style="width: 36px;height: 16px;text-align: center;">
+            {{item+29}}
+          </div>
+        </div>
         <div  ref="infoBox8" class="infoCar">
         </div>
         <div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx8" v-for="(item,index) in boxList8" :key="item.code" class="box"
@@ -622,6 +688,7 @@
   }
   .containerAll {}
   .container1 {
+        padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(4, 30px);
@@ -632,6 +699,7 @@
   }
 
   .container2 {
+        padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(4, 30px);
@@ -642,6 +710,7 @@
   }
 
   .container3 {
+        padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(3, 30px);
@@ -652,6 +721,7 @@
   }
 
   .container4 {
+        padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(5, 30px);
@@ -662,6 +732,7 @@
   }
 
   .container5 {
+        padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(4, 30px);
@@ -672,6 +743,7 @@
   }
 
   .container6 {
+        padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(4, 30px);
@@ -682,6 +754,7 @@
   }
 
   .container7 {
+        padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(4, 30px);
@@ -692,6 +765,7 @@
   }
 
   .container8 {
+        padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(3, 30px);

src/views/ccgl/dpkb/lkkb/mx/mx12.vue

@@ -3,6 +3,23 @@
     <div ref="infoBox" class="infoCar">
     </div>
     <div class="full container">
+
+
+      <!-- 刻度x-->
+      <div class="flex"
+        style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+        <div v-for="(item,index) in 47" style="width: 36px;height: 16px;text-align: center;">
+          {{item}}
+        </div>
+      </div>
+      <!-- 刻度y-->
+      <div class="flex "
+        style="position: absolute;left: -26px;top:16px;color: #fff;line-height: 16px;font-size: 12px;height: calc(85.5% + 28px);flex-direction: column;padding-left: 16px;">
+        <div class="flex1" v-for="(item,index) in 9" style="width: 36px;text-align: center;height:11.11% ;line-height: 30px;">
+          {{10-item}}
+        </div>
+      </div>
+
       <div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
         v-for="(item,index) in boxList" :key="item.code" class="box"
         :class="{
@@ -94,6 +111,7 @@
 
 <style scoped>
   .container {
+     padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(47, 30px);

src/views/ccgl/dpkb/lkkb/mx/mx13.vue

@@ -3,6 +3,23 @@
     <div ref="infoBox" class="infoCar">
     </div>
     <div class="full container">
+
+
+      <!-- 刻度x-->
+      <div class="flex"
+        style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+        <div v-for="(item,index) in 47" style="width: 36px;height: 16px;text-align: center;">
+          {{item}}
+        </div>
+      </div>
+      <!-- 刻度y-->
+      <div class="flex "
+        style="position: absolute;left: -26px;top:16px;color: #fff;line-height: 16px;font-size: 12px;height: calc(85.5% + 28px);flex-direction: column;padding-left: 16px;">
+        <div class="flex1" v-for="(item,index) in 9" style="width: 36px;text-align: center;height:11.11% ;line-height: 30px;">
+          {{10-item}}
+        </div>
+      </div>
+
       <div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
         v-for="(item,index) in boxList" :key="item.code" class="box"
         :class="{
@@ -94,6 +111,7 @@
 
 <style scoped>
   .container {
+    padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(47, 30px);

src/views/ccgl/dpkb/lkkb/mx/mx14.vue

@@ -3,6 +3,22 @@
     <div ref="infoBox" class="infoCar">
     </div>
     <div class="full container">
+
+      <!-- 刻度x-->
+      <div class="flex"
+        style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+        <div v-for="(item,index) in 47" style="width: 36px;height: 16px;text-align: center;">
+          {{item}}
+        </div>
+      </div>
+      <!-- 刻度y-->
+      <div class="flex "
+        style="position: absolute;left: -26px;top:16px;color: #fff;line-height: 16px;font-size: 12px;height: calc(85.5% + 28px);flex-direction: column;padding-left: 16px;">
+        <div class="flex1" v-for="(item,index) in 9" style="width: 36px;text-align: center;height:11.11% ;line-height: 30px;">
+          {{10-item}}
+        </div>
+      </div>
+
       <div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
         v-for="(item,index) in boxList" :key="item.code" class="box"
         :class="{
@@ -94,6 +110,7 @@
 
 <style scoped>
   .container {
+    padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(47, 30px);

src/views/ccgl/dpkb/lkkb/mx/mx15.vue

@@ -3,6 +3,22 @@
     <div ref="infoBox" class="infoCar">
     </div>
     <div class="full container">
+
+      <!-- 刻度x-->
+      <div class="flex"
+        style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+        <div v-for="(item,index) in 47" style="width: 36px;height: 16px;text-align: center;">
+          {{item}}
+        </div>
+      </div>
+      <!-- 刻度y-->
+      <div class="flex "
+        style="position: absolute;left: -26px;top:16px;color: #fff;line-height: 16px;font-size: 12px;height: calc(85.5% + 28px);flex-direction: column;padding-left: 16px;">
+        <div class="flex1" v-for="(item,index) in 9" style="width: 36px;text-align: center;height:11.11% ;line-height: 30px;">
+          {{10-item}}
+        </div>
+      </div>
+
       <div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
         v-for="(item,index) in boxList" :key="item.code" class="box"
         :class="{
@@ -94,6 +110,7 @@
 
 <style scoped>
   .container {
+    padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(47, 30px);

src/views/ccgl/dpkb/lkkb/mx/mx16.vue

@@ -3,6 +3,22 @@
     <div ref="infoBox" class="infoCar">
     </div>
     <div class="full container">
+
+      <!-- 刻度x-->
+      <div class="flex"
+        style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+        <div v-for="(item,index) in 47" style="width: 36px;height: 16px;text-align: center;">
+          {{item}}
+        </div>
+      </div>
+      <!-- 刻度y-->
+      <div class="flex "
+        style="position: absolute;left: -26px;top:16px;color: #fff;line-height: 16px;font-size: 12px;height: calc(85.5% + 28px);flex-direction: column;padding-left: 16px;">
+        <div class="flex1" v-for="(item,index) in 9" style="width: 36px;text-align: center;height:11.11% ;line-height: 30px;">
+          {{10-item}}
+        </div>
+      </div>
+
       <div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
         v-for="(item,index) in boxList" :key="item.code" class="box"
         :class="{
@@ -94,6 +110,7 @@
 
 <style scoped>
   .container {
+    padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(47, 30px);

src/views/ccgl/dpkb/lkkb/mx/mx17.vue

@@ -3,6 +3,22 @@
     <div ref="infoBox" class="infoCar">
     </div>
     <div class="full container">
+
+      <!-- 刻度x-->
+      <div class="flex"
+        style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+        <div v-for="(item,index) in 47" style="width: 36px;height: 16px;text-align: center;">
+          {{item}}
+        </div>
+      </div>
+      <!-- 刻度y-->
+      <div class="flex "
+        style="position: absolute;left: -26px;top:16px;color: #fff;line-height: 16px;font-size: 12px;height: calc(85.5% + 28px);flex-direction: column;padding-left: 16px;">
+        <div class="flex1" v-for="(item,index) in 9" style="width: 36px;text-align: center;height:11.11% ;line-height: 30px;">
+          {{10-item}}
+        </div>
+      </div>
+
       <div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
         v-for="(item,index) in boxList" :key="item.code" class="box"
         :class="{
@@ -94,6 +110,7 @@
 
 <style scoped>
   .container {
+    padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(47, 30px);

src/views/ccgl/dpkb/lkkb/mx/mx18.vue

@@ -3,6 +3,22 @@
     <div ref="infoBox" class="infoCar">
     </div>
     <div class="full container">
+
+      <!-- 刻度x-->
+      <div class="flex"
+        style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+        <div v-for="(item,index) in 47" style="width: 36px;height: 16px;text-align: center;">
+          {{item}}
+        </div>
+      </div>
+      <!-- 刻度y-->
+      <div class="flex "
+        style="position: absolute;left: -26px;top:16px;color: #fff;line-height: 16px;font-size: 12px;height: calc(85.5% + 28px);flex-direction: column;padding-left: 16px;">
+        <div class="flex1" v-for="(item,index) in 9" style="width: 36px;text-align: center;height:11.11% ;line-height: 30px;">
+          {{10-item}}
+        </div>
+      </div>
+
       <div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
         v-for="(item,index) in boxList" :key="item.code" class="box"
         :class="{
@@ -94,6 +110,7 @@
 
 <style scoped>
   .container {
+    padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(47, 30px);

src/views/ccgl/dpkb/lkkb/mx/mx2.vue

@@ -3,6 +3,20 @@
     <div ref="infoBox" class="infoCar">
     </div>
     <div class="full container">
+      <!-- 刻度x-->
+      <div class="flex"
+        style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+        <div v-for="(item,index) in 48" style="width: 36px;height: 16px;text-align: center;">
+          {{item}}
+        </div>
+      </div>
+      <!-- 刻度y-->
+      <div class="flex "
+        style="position: absolute;left: -26px;top:16px;color: #fff;line-height: 16px;font-size: 12px;height: calc(85.5% + 28px);flex-direction: column;padding-left: 16px;">
+        <div class="flex1" v-for="(item,index) in 9" style="width: 36px;text-align: center;height:11.11% ;line-height: 30px;">
+          {{10-item}}
+        </div>
+      </div>
       <div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
         v-for="(item,index) in boxList" :key="item.code" class="box"
         :class="{
@@ -94,6 +108,7 @@
 
 <style scoped>
   .container {
+    padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(48, 30px);

src/views/ccgl/dpkb/lkkb/mx/mx3.vue

@@ -3,6 +3,22 @@
     <div ref="infoBox" class="infoCar">
     </div>
     <div class="full container">
+
+      <!-- 刻度x-->
+      <div class="flex"
+        style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+        <div v-for="(item,index) in 48" style="width: 36px;height: 16px;text-align: center;">
+          {{item}}
+        </div>
+      </div>
+      <!-- 刻度y-->
+      <div class="flex "
+        style="position: absolute;left: -26px;top:16px;color: #fff;line-height: 16px;font-size: 12px;height: calc(85.5% + 28px);flex-direction: column;padding-left: 16px;">
+        <div class="flex1" v-for="(item,index) in 9" style="width: 36px;text-align: center;height:11.11% ;line-height: 30px;">
+          {{10-item}}
+        </div>
+      </div>
+
       <div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
         v-for="(item,index) in boxList" :key="item.code" class="box"
         :class="{
@@ -95,6 +111,7 @@
 
 <style scoped>
   .container {
+      padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(48, 30px);

src/views/ccgl/dpkb/lkkb/mx/mx4.vue

@@ -3,6 +3,22 @@
     <div ref="infoBox" class="infoCar">
     </div>
     <div class="full container">
+
+      <!-- 刻度x-->
+      <div class="flex"
+        style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+        <div v-for="(item,index) in 48" style="width: 36px;height: 16px;text-align: center;">
+          {{item}}
+        </div>
+      </div>
+      <!-- 刻度y-->
+      <div class="flex "
+        style="position: absolute;left: -26px;top:16px;color: #fff;line-height: 16px;font-size: 12px;height: calc(85.5% + 28px);flex-direction: column;padding-left: 16px;">
+        <div class="flex1" v-for="(item,index) in 9" style="width: 36px;text-align: center;height:11.11% ;line-height: 30px;">
+          {{10-item}}
+        </div>
+      </div>
+
       <div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
         v-for="(item,index) in boxList" :key="item.code" class="box"
         :class="{
@@ -94,6 +110,7 @@
 
 <style scoped>
   .container {
+    padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(48, 30px);

src/views/ccgl/dpkb/lkkb/mx/mx5.vue

@@ -3,6 +3,22 @@
     <div ref="infoBox" class="infoCar">
     </div>
     <div class="full container">
+
+      <!-- 刻度x-->
+      <div class="flex"
+        style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+        <div v-for="(item,index) in 48" style="width: 36px;height: 16px;text-align: center;">
+          {{item}}
+        </div>
+      </div>
+      <!-- 刻度y-->
+      <div class="flex "
+        style="position: absolute;left: -26px;top:16px;color: #fff;line-height: 16px;font-size: 12px;height: calc(85.5% + 28px);flex-direction: column;padding-left: 16px;">
+        <div class="flex1" v-for="(item,index) in 9" style="width: 36px;text-align: center;height:11.11% ;line-height: 30px;">
+          {{10-item}}
+        </div>
+      </div>
+
       <div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
         v-for="(item,index) in boxList" :key="item.code" class="box"
 
@@ -95,6 +111,7 @@
 
 <style scoped>
   .container {
+     padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(48, 30px);

src/views/ccgl/dpkb/lkkb/mx/mx6.vue

@@ -3,6 +3,22 @@
     <div ref="infoBox" class="infoCar">
     </div>
     <div class="full container">
+
+      <!-- 刻度x-->
+      <div class="flex"
+        style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+        <div v-for="(item,index) in 48" style="width: 36px;height: 16px;text-align: center;">
+          {{item}}
+        </div>
+      </div>
+      <!-- 刻度y-->
+      <div class="flex "
+        style="position: absolute;left: -26px;top:16px;color: #fff;line-height: 16px;font-size: 12px;height: calc(85.5% + 28px);flex-direction: column;padding-left: 16px;">
+        <div class="flex1" v-for="(item,index) in 9" style="width: 36px;text-align: center;height:11.11% ;line-height: 30px;">
+          {{10-item}}
+        </div>
+      </div>
+
       <div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
         v-for="(item,index) in boxList" :key="item.code" class="box"
 
@@ -95,6 +111,7 @@
 
 <style scoped>
   .container {
+     padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(48, 30px);

src/views/ccgl/dpkb/lkkb/mx/mx7.vue

@@ -3,6 +3,22 @@
     <div ref="infoBox" class="infoCar">
     </div>
     <div class="full container">
+
+      <!-- 刻度x-->
+      <div class="flex"
+        style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+        <div v-for="(item,index) in 48" style="width: 36px;height: 16px;text-align: center;">
+          {{item}}
+        </div>
+      </div>
+      <!-- 刻度y-->
+      <div class="flex "
+        style="position: absolute;left: -26px;top:16px;color: #fff;line-height: 16px;font-size: 12px;height: calc(85.5% + 28px);flex-direction: column;padding-left: 16px;">
+        <div class="flex1" v-for="(item,index) in 9" style="width: 36px;text-align: center;height:11.11% ;line-height: 30px;">
+          {{10-item}}
+        </div>
+      </div>
+
       <div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
         v-for="(item,index) in boxList" :key="item.code" class="box"
 
@@ -95,6 +111,7 @@
 
 <style scoped>
   .container {
+     padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(48, 30px);

src/views/ccgl/dpkb/lkkb/mx/mx8.vue

@@ -3,6 +3,22 @@
     <div ref="infoBox" class="infoCar">
     </div>
     <div class="full container">
+
+      <!-- 刻度x-->
+      <div class="flex"
+        style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+        <div v-for="(item,index) in 48" style="width: 36px;height: 16px;text-align: center;">
+          {{item}}
+        </div>
+      </div>
+      <!-- 刻度y-->
+      <div class="flex "
+        style="position: absolute;left: -26px;top:16px;color: #fff;line-height: 16px;font-size: 12px;height: calc(85.5% + 28px);flex-direction: column;padding-left: 16px;">
+        <div class="flex1" v-for="(item,index) in 9" style="width: 36px;text-align: center;height:11.11% ;line-height: 30px;">
+          {{10-item}}
+        </div>
+      </div>
+
       <div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
         v-for="(item,index) in boxList" :key="item.code" class="box"
         :class="{
@@ -94,6 +110,7 @@
 
 <style scoped>
   .container {
+    padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(48, 30px);

src/views/ccgl/dpkb/lkkb/mx/mx9.vue

@@ -3,6 +3,22 @@
     <div ref="infoBox" class="infoCar">
     </div>
     <div class="full container">
+
+      <!-- 刻度x-->
+      <div class="flex"
+        style="position: absolute;top: 0px;color: #fff;line-height: 16px;font-size: 12px;padding-left: 14px;">
+        <div v-for="(item,index) in 47" style="width: 36px;height: 16px;text-align: center;">
+          {{item}}
+        </div>
+      </div>
+      <!-- 刻度y-->
+      <div class="flex "
+        style="position: absolute;left: -26px;top:16px;color: #fff;line-height: 16px;font-size: 12px;height: calc(85.5% + 28px);flex-direction: column;padding-left: 16px;">
+        <div class="flex1" v-for="(item,index) in 9" style="width: 36px;text-align: center;height:11.11% ;line-height: 30px;">
+          {{10-item}}
+        </div>
+      </div>
+
       <div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
         v-for="(item,index) in boxList" :key="item.code" class="box"
 
@@ -95,6 +111,7 @@
 
 <style scoped>
   .container {
+        padding: 16px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(47, 30px);