fix:点九图bug修复

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

@@ -10,55 +10,57 @@
     @closed="close"
     @opened="getDom"
   >
-      <div class="content">
-      <div>
-        <table
-          border="1"
-          cellspacing="0"
-        >
-          <tr>
-            <th>方向</th>
-            <th>描述</th>
-          </tr>
-          <tr>
-            <td>左上角</td>
-            <td>不能拉伸</td>
-          </tr>
-          <tr>
-            <td>右上角</td>
-            <td>不能拉伸</td>
-          </tr>
-          <tr>
-            <td>左下角</td>
-            <td>不能拉伸</td>
-          </tr>
-          <tr>
-            <td>右下角</td>
-            <td>不能拉伸</td>
-          </tr>
-          <tr>
-            <td>左侧</td>
-            <td>宽度不变，高度自动拉伸</td>
-          </tr>
-          <tr>
-            <td>右侧</td>
-            <td>宽度不变，高度自动拉伸</td>
-          </tr>
-          <tr>
-            <td>顶部</td>
-            <td>高度不变，宽度自动拉伸</td>
-          </tr>
-          <tr>
-            <td>底部</td>
-            <td>高度不变，宽度自动拉伸</td>
-          </tr>
-          <tr>
-            <td>中部</td>
-            <td>宽度，高度自动拉伸</td>
-          </tr>
-        </table>
-      </div>
-      <div class="img">
+    <div class="contentTable">
+      <table
+        border="1"
+        cellspacing="0"
+      >
+        <tr>
+          <th>方向</th>
+          <th>描述</th>
+        </tr>
+        <tr>
+          <td>左上角</td>
+          <td>不能拉伸</td>
+        </tr>
+        <tr>
+          <td>右上角</td>
+          <td>不能拉伸</td>
+        </tr>
+        <tr>
+          <td>左下角</td>
+          <td>不能拉伸</td>
+        </tr>
+        <tr>
+          <td>右下角</td>
+          <td>不能拉伸</td>
+        </tr>
+        <tr>
+          <td>左侧</td>
+          <td>宽度不变，高度自动拉伸</td>
+        </tr>
+        <tr>
+          <td>右侧</td>
+          <td>宽度不变，高度自动拉伸</td>
+        </tr>
+        <tr>
+          <td>顶部</td>
+          <td>高度不变，宽度自动拉伸</td>
+        </tr>
+        <tr>
+          <td>底部</td>
+          <td>高度不变，宽度自动拉伸</td>
+        </tr>
+        <tr>
+          <td>中部</td>
+          <td>宽度，高度自动拉伸</td>
+        </tr>
+      </table>
+    </div>
+    <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;
     },
@@ -208,152 +245,109 @@ export default {
     },
     onMouseDown (e) {
       // this.y=e.layerY
-	    // this.t=this.top;
+      // this.t=this.top;
       // this.isDown=true
       // console.log(this.x,this.l)
     },
     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;
-  min-height: 450px;
-  align-items: center;
-  justify-content: center;
-  display: flex;
-  padding: 16px 16px 16px 16px !important;
-}
-.content{
-  margin: 20px 0;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  ::v-deep .el-dialog__body{
+    position: relative;
+    background-color: #232832;
+    min-height: 450px;
+    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;
+  }
   td,th{
     padding: 8px 20px;
     text-align: center;
     vertical-align: middle;
   }
-  .img{
-    position: relative;
-    .toptitle{
+}
+  .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;
         top: -43px;
         left: 50%;
         transform: translateX(-50%);
       }
-    .righttitle{
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      right: -123px;
-    }
-    .bottomtitle{
-      position: absolute;
-      bottom: -43px;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-    .lefttitle{
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      left: -123px;
-    }
-    // height: 100%;
-    .top{
-      position: absolute;
-      top: 0;
-      height: 1px;
-      background-color: #fff;
-      width: 100%;
-    }
-    .right{
-      position: absolute;
-      right: 0;
-      top: 0;
-      height: 100%;
-      background-color: #fff;
-      width: 1px;
-    }
-    .bottom{
-      position: absolute;
-      bottom: 0;
-      height: 1px;
-      background-color: #fff;
-      width: 100%;
-    }
-    .left{
-      position: absolute;
-      left: 0;
-      top: 0;
-      height: 100%;
-      background-color: #fff;
-      width: 1px;
+      .righttitle{
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        right: -150px;
+      }
+      .bottomtitle{
+        position: absolute;
+        bottom: -43px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      .lefttitle{
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        left: -150px;
+      }
+      // height: 100%;
+      .top{
+        position: absolute;
+        top: 0;
+        height: 1px;
+        background-color: #fff;
+        width: 100%;
+      }
+      .right{
+        position: absolute;
+        right: 0;
+        top: 0;
+        height: 100%;
+        background-color: #fff;
+        width: 1px;
+      }
+      .bottom{
+        position: absolute;
+        bottom: 0;
+        height: 1px;
+        background-color: #fff;
+        width: 100%;
+      }
+      .left{
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+        background-color: #fff;
+        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`,
-      borderImageWidth:`${borderArray[0]}px ${borderArray[1]}px ${borderArray[2]}px ${borderArray[3]}px`,
+      borderImageSlice:`${borderImageArray[0]} ${borderImageArray[1]} ${borderImageArray[2]} ${borderImageArray[3]} fill`,
+      borderImageWidth:`${borderImageArray[0]}px ${borderImageArray[1]}px ${borderImageArray[2]}px ${borderImageArray[3]}px`,
     }"
   >
   </div>
@@ -35,15 +35,21 @@ export default {
     }
   },
   computed: {
-    url(){
+    url () {
       return require('data-room-ui/BorderComponents/GcBorder16/component.png')
     },
     opacity () {
       return this.config.border.opacity || 100
     },
-    borderArray(){
-      return this.config.border.borderArray ? this.config.border.borderArray
-        : [50,50,50,50]
+    borderImageArray () {
+      const borderArr = this.config.border.borderArray ? this.config.border.borderArray
+        : [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]
+  }
 ]