fix: 优化点九图说明部分样式

data-room-ui/packages/BigScreenDesign/RightSetting/BorderSetting.vue

@@ -404,7 +404,6 @@ export default {
       this.$refs.SourceDialog.init()
     },
     initMove(val){
-      console.log(val)
       this.$refs.MoveDialog.init(val,this.config.borderArray)
     }
 

data-room-ui/packages/BigScreenDesign/RightSetting/MoveDialog/index.vue

@@ -8,11 +8,14 @@
     :appen-to-body="false"
     class="bs-dialog-wrap bs-el-dialog"
     @closed="close"
-    @opened='getDom'
+    @opened="getDom"
   >
       <div class="content">
       <div>
-        <table border="1" cellspacing="0">
+        <table
+          border="1"
+          cellspacing="0"
+        >
           <tr>
             <th>方向</th>
             <th>描述</th>
@@ -59,63 +62,72 @@
         <span class="toptitle">
           <!-- <InputCom @changeStyle='changeTop' :Fx="['上','下']" :number="top" /> -->
           <el-input-number
-            @change='changeTop'
             v-model="top"
             class="bs-el-input-number"
             :step=" 1"
             :min="0"
             :max="100000"
+            @change="changeTop"
           />
         </span>
         <span class="righttitle">
           <el-input-number
-            @change='changeRight'
             v-model="right"
             class="bs-el-input-number"
             :step=" 1"
             :min="0"
             :max="100000"
+            @change="changeRight"
           />
         </span>
         <span class="bottomtitle">
           <el-input-number
-            @change='changeBottom'
             v-model="bottom"
             class="bs-el-input-number"
             :step=" 1"
             :min="0"
             :max="100000"
+            @change="changeBottom"
           />
         </span>
         <span class="lefttitle">
           <el-input-number
-            @change='changeLeft'
             v-model="left"
             class="bs-el-input-number"
             :step=" 1"
             :min="0"
             :max="100000"
+            @change="changeLeft"
           />
         </span>
         <el-image
           style="max-width:550px"
-          :src="this.imgUrl||url"
-          fit="fill"></el-image>
+          :src="imgUrl||url"
+          fit="fill"
+        />
         <div
+          id="top"
+          class="top"
           @mousedown="onMouseDown"
           @mouseup="onMouseUp"
           @mousemove="onMousemove"
           @click="changeSymbol('top')"
-           id="top"
-           class="top">
-
-          </div>
-          <div @click="changeSymbol('right')" id="right" class="right">
-          </div>
-          <div @click="changeSymbol('bottom')" id="bottom" class="bottom">
-          </div>
-          <div @click="changeSymbol('left')" id="left" class="left">
-          </div>
+        />
+        <div
+          id="right"
+          class="right"
+          @click="changeSymbol('right')"
+        />
+        <div
+          id="bottom"
+          class="bottom"
+          @click="changeSymbol('bottom')"
+        />
+        <div
+          id="left"
+          class="left"
+          @click="changeSymbol('left')"
+        />
       </div>
     </div>
     <div
@@ -209,19 +221,19 @@ export default {
     },
     changeTop (val) {
       const a = document.getElementById('top')
-      a.style.top=val+"px"
+      a.style.top = val + 'px'
     },
     changeRight (val) {
       const a = document.getElementById('right')
-      a.style.right=val+"px"
+      a.style.right = val + 'px'
     },
     changeBottom (val) {
       const a = document.getElementById('bottom')
-      a.style.bottom=val+"px"
+      a.style.bottom = val + 'px'
     },
     changeLeft (val) {
       const a = document.getElementById('left')
-      a.style.left=val+"px"
+      a.style.left = val + 'px'
     },
     init (val, array) {
       if (!val.startsWith('http')) {
@@ -239,7 +251,7 @@ export default {
         })
       }
       this.dialogVisible = true
-    },
+    }
   }
 }
 </script>
@@ -261,27 +273,36 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
+  td,th{
+    padding: 8px 20px;
+    text-align: center;
+    vertical-align: middle;
+  }
   .img{
     position: relative;
     .toptitle{
         position: absolute;
-        top: -30px;
-        left: 34%;
+        top: -43px;
+        left: 50%;
+        transform: translateX(-50%);
       }
     .righttitle{
       position: absolute;
       top: 50%;
-      right: -110px;
+      transform: translateY(-50%);
+      right: -123px;
     }
     .bottomtitle{
       position: absolute;
-      bottom: -30px;
-      left: 34%;
+      bottom: -43px;
+      left: 50%;
+      transform: translateX(-50%);
     }
     .lefttitle{
       position: absolute;
       top: 50%;
-      left: -110px;
+      transform: translateY(-50%);
+      left: -123px;
     }
     // height: 100%;
     .top{