fix:点九图bug修复

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

@@ -10,8 +10,7 @@
     @closed="close"
     @opened="getDom"
   >
-      <div class="content">
+    <div class="contentTable">
-      <div>
       <table
         border="1"
         cellspacing="0"
@@ -58,7 +57,10 @@
         </tr>
       </table>
     </div>
-      <div class="img">
+    <div
+      class="imgContent"
+    >
+      <div class="imgContainer">
         <span class="toptitle">
           <!-- <InputCom @changeStyle='changeTop' :Fx="['上','下']" :number="top" /> -->
           <el-input-number
@@ -66,7 +68,7 @@
             class="bs-el-input-number"
             :step=" 1"
             :min="0"
-            :max="100000"
+            :max="49"
             @change="changeTop"
           />
         </span>
@@ -76,7 +78,7 @@
             class="bs-el-input-number"
             :step=" 1"
             :min="0"
-            :max="100000"
+            :max="49"
             @change="changeRight"
           />
         </span>
@@ -86,7 +88,7 @@
             class="bs-el-input-number"
             :step=" 1"
             :min="0"
-            :max="100000"
+            :max="49"
             @change="changeBottom"
           />
         </span>
@@ -96,14 +98,14 @@
             class="bs-el-input-number"
             :step=" 1"
             :min="0"
-            :max="100000"
+            :max="49"
             @change="changeLeft"
           />
         </span>
         <el-image
-          style="max-width:550px"
+          style="max-width:550px;object-fit: cover;"
           :src="imgUrl||url"
-          fit="fill"
+          fit="cover"
         />
         <div
           id="top"
@@ -149,13 +151,14 @@
     </div>
   </el-dialog>
 </template>
+
 <script>
 import { getFileUrl } from 'data-room-ui/js/utils/file'
-
 export default {
   name: 'SourceDialog',
   data () {
     return {
+      contentHeight: 300,
       dialogVisible: false,
       imgUrl: '',
       top: 0,
@@ -175,13 +178,28 @@ export default {
       return require('data-room-ui/BorderComponents/GcBorder16/component.png')
     }
   },
-  mounted () {
-  },
   methods: {
     confirm () {
       this.$emit('getArray', [this.top, this.right, this.bottom, this.left])
       this.dialogVisible = false
     },
+    init (val, array) {
+      if (!val.startsWith('http')) {
+        this.imgUrl = getFileUrl(val)
+      } else {
+        this.imgUrl = val
+      }
+      if (array) {
+        [this.top, this.right, this.bottom, this.left] = array
+        this.$nextTick(() => {
+          this.changeTop(this.top)
+          this.changeRight(this.right)
+          this.changeBottom(this.bottom)
+          this.changeLeft(this.left)
+        })
+      }
+      this.dialogVisible = true
+    },
     getDom () {
       //  const a=document.getElementById('top')
       //  const b=document.getElementById('right')
@@ -192,6 +210,25 @@ export default {
       //  this.bottom=getComputedStyle(c).bottom.slice(0,-2)
       //  this.left=getComputedStyle(d).left.slice(0,-2)
     },
+    close () {
+
+    },
+    changeTop (val) {
+      const a = document.getElementById('top')
+      a.style.top = val + '%'
+    },
+    changeRight (val) {
+      const a = document.getElementById('right')
+      a.style.right = val + '%'
+    },
+    changeBottom (val) {
+      const a = document.getElementById('bottom')
+      a.style.bottom = val + '%'
+    },
+    changeLeft (val) {
+      const a = document.getElementById('left')
+      a.style.left = val + '%'
+    },
     onMouseUp () {
       // this.isDown=false;
     },
@@ -214,71 +251,47 @@ export default {
     },
     changeSymbol (val) {
       this.symbol = val
-    },
-
-    close () {
-
-    },
-    changeTop (val) {
-      const a = document.getElementById('top')
-      a.style.top = val + 'px'
-    },
-    changeRight (val) {
-      const a = document.getElementById('right')
-      a.style.right = val + 'px'
-    },
-    changeBottom (val) {
-      const a = document.getElementById('bottom')
-      a.style.bottom = val + 'px'
-    },
-    changeLeft (val) {
-      const a = document.getElementById('left')
-      a.style.left = val + 'px'
-    },
-    init (val, array) {
-      if (!val.startsWith('http')) {
-        this.imgUrl = getFileUrl(val)
-      } else {
-        this.imgUrl = val
-      }
-      if (array) {
-        [this.top, this.right, this.bottom, this.left] = array
-        this.$nextTick(() => {
-          this.changeTop(this.top)
-          this.changeRight(this.right)
-          this.changeBottom(this.bottom)
-          this.changeLeft(this.left)
-        })
-      }
-      this.dialogVisible = true
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-// @import '../../assets/style/bsTheme.scss';
   ::v-deep .el-dialog__body{
-  background-color: #232832;
     position: relative;
+    background-color: #232832;
     min-height: 450px;
-  align-items: center;
-  justify-content: center;
-  display: flex;
     padding: 16px 16px 16px 16px !important;
+    overflow: auto;
+  }
+.contentTable{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 400px;
+  margin-top: 50px;
+  margin-left: 20px;
+  margin-right: 200px;
+  table{
+    color: #fff;
+    border: 1px solid #fff;
   }
-.content{
-  margin: 20px 0;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   td,th{
     padding: 8px 20px;
     text-align: center;
     vertical-align: middle;
   }
-  .img{
+}
+  .imgContent{
+    width: 300px;
+    position: absolute;
+    left: 500px;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-top: 0px;
+    .imgContainer{
+      width: 100%;
+      height: 100%;
       position: relative;
       .toptitle{
         position: absolute;
@@ -290,7 +303,7 @@ export default {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
-      right: -123px;
+        right: -150px;
       }
       .bottomtitle{
         position: absolute;
@@ -302,7 +315,7 @@ export default {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
-      left: -123px;
+        left: -150px;
       }
       // height: 100%;
       .top{
@@ -336,24 +349,5 @@ export default {
         width: 1px;
       }
     }
-
-}
-::v-deep .el-input-number--mini{
-  width: 100px;
-  .el-input__inner{
-    padding-right: 30px;
-  }
-}
-table{
-  margin-right: 200px;
-  color: #fff;
-  border: 1px solid #fff;
-}
-th{
-  padding: 4px;
-}
-td{
-  padding: 8px;
   }
-
 </style>

data-room-ui/packages/BorderComponents/GcBorder16/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div
-    style="width: 100%;height: 100%"
+    style="width: 100%;height: 100%;object-fit: cover"
     class="bs-design-wrap"
     :id="'border'+ config.code"
     :style="{
       opacity: opacity,
-      borderImageSlice:`${borderArray[0]} ${borderArray[1]} ${borderArray[2]} ${borderArray[3]} fill`,
+      borderImageSlice:`${borderImageArray[0]} ${borderImageArray[1]} ${borderImageArray[2]} ${borderImageArray[3]} fill`,
-      borderImageWidth:`${borderArray[0]}px ${borderArray[1]}px ${borderArray[2]}px ${borderArray[3]}px`,
+      borderImageWidth:`${borderImageArray[0]}px ${borderImageArray[1]}px ${borderImageArray[2]}px ${borderImageArray[3]}px`,
     }"
   >
   </div>
@@ -41,9 +41,15 @@ export default {
     opacity () {
       return this.config.border.opacity || 100
     },
-    borderArray(){
+    borderImageArray () {
-      return this.config.border.borderArray ? this.config.border.borderArray
+      const borderArr = this.config.border.borderArray ? this.config.border.borderArray
-        : [50,50,50,50]
+        : [10, 10, 10, 10]
+      const arr = []
+      arr[0] = borderArr[0] * 3.2
+      arr[1] = borderArr[1] * 4.5
+      arr[2] = borderArr[2] * 3.2
+      arr[3] = borderArr[3] * 4.5
+      return arr
     }
   },
   watch: {

data-room-ui/packages/BorderComponents/GcBorder16/setting.js

@@ -54,8 +54,8 @@ const setting = [
     // 是否多选
     multiple: false,
     // 绑定的值
-    value: [50,50,50,50],
+    value: [10, 10, 10, 10]
-  },
+  }
 ]