|
|
|
|
@ -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: 80px;
|
|
|
|
|
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: 400px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 600px;
|
|
|
|
|
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>
|
|
|
|
|
|
wu.jian2
1 year ago