tzjy-code
/
DataRoom
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
main
zhu.yawen 1 year ago
parent ddaa166716
commit 59a29739c5
2 changed files with 109 additions and 89 deletions
Show Stats Download Patch File Download Diff File

1
data-room-ui/packages/BigScreenDesign/RightSetting/BorderSetting.vue
Unescape Escape View File

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

197
data-room-ui/packages/BigScreenDesign/RightSetting/MoveDialog/index.vue
Unescape Escape View File

@ -8,11 +8,14 @@
:appen-to-body="false" :appen-to-body="false"
class="bs-dialog-wrap bs-el-dialog" class="bs-dialog-wrap bs-el-dialog"
@closed="close" @closed="close"
@opened='getDom' @opened="getDom"
> >
<div class="content"> <div class="content">
<div> <div>
<table border="1" cellspacing="0"> <table
border="1"
cellspacing="0"
>
<tr> <tr>
<th>方向</th> <th>方向</th>
<th>描述</th> <th>描述</th>
@ -21,27 +24,27 @@
<td>左上角</td> <td>左上角</td>
<td>不能拉伸</td> <td>不能拉伸</td>
</tr> </tr>
<tr> <tr>
<td>右上角</td> <td>右上角</td>
<td>不能拉伸</td> <td>不能拉伸</td>
</tr> </tr>
<tr> <tr>
<td>左下角</td> <td>左下角</td>
<td>不能拉伸</td> <td>不能拉伸</td>
</tr> </tr>
<tr> <tr>
<td>右下角</td> <td>右下角</td>
<td>不能拉伸</td> <td>不能拉伸</td>
</tr> </tr>
<tr> <tr>
<td>左侧</td> <td>左侧</td>
<td>宽度不变，高度自动拉伸</td> <td>宽度不变，高度自动拉伸</td>
</tr> </tr>
<tr> <tr>
<td>右侧</td> <td>右侧</td>
<td>宽度不变，高度自动拉伸</td> <td>宽度不变，高度自动拉伸</td>
</tr> </tr>
<tr> <tr>
<td>顶部</td> <td>顶部</td>
<td>高度不变，宽度自动拉伸</td> <td>高度不变，宽度自动拉伸</td>
</tr> </tr>
@ -58,64 +61,73 @@
<div class="img"> <div class="img">
<span class="toptitle"> <span class="toptitle">
<!-- <InputCom @changeStyle='changeTop' :Fx="['上','下']" :number="top" /> --> <!-- <InputCom @changeStyle='changeTop' :Fx="['上','下']" :number="top" /> -->
<el-input-number <el-input-number
@change='changeTop'
v-model="top" v-model="top"
class="bs-el-input-number" class="bs-el-input-number"
:step=" 1" :step=" 1"
:min="0" :min="0"
:max="100000" :max="100000"
/> @change="changeTop"
/>
</span> </span>
<span class="righttitle"> <span class="righttitle">
<el-input-number <el-input-number
@change='changeRight'
v-model="right" v-model="right"
class="bs-el-input-number" class="bs-el-input-number"
:step=" 1" :step=" 1"
:min="0" :min="0"
:max="100000" :max="100000"
/> @change="changeRight"
/>
</span> </span>
<span class="bottomtitle"> <span class="bottomtitle">
<el-input-number <el-input-number
@change='changeBottom'
v-model="bottom" v-model="bottom"
class="bs-el-input-number" class="bs-el-input-number"
:step=" 1" :step=" 1"
:min="0" :min="0"
:max="100000" :max="100000"
/> @change="changeBottom"
/>
</span> </span>
<span class="lefttitle"> <span class="lefttitle">
<el-input-number <el-input-number
@change='changeLeft'
v-model="left" v-model="left"
class="bs-el-input-number" class="bs-el-input-number"
:step=" 1" :step=" 1"
:min="0" :min="0"
:max="100000" :max="100000"
/> @change="changeLeft"
/>
</span> </span>
<el-image <el-image
style="max-width:550px" style="max-width:550px"
:src="this.imgUrl||url" :src="imgUrl||url"
fit="fill"></el-image> fit="fill"
<div />
@mousedown="onMouseDown" <div
@mouseup="onMouseUp" id="top"
@mousemove="onMousemove" class="top"
@click="changeSymbol('top')" @mousedown="onMouseDown"
id="top" @mouseup="onMouseUp"
class="top"> @mousemove="onMousemove"
@click="changeSymbol('top')"
</div> />
<div @click="changeSymbol('right')" id="right" class="right"> <div
</div> id="right"
<div @click="changeSymbol('bottom')" id="bottom" class="bottom"> class="right"
</div> @click="changeSymbol('right')"
<div @click="changeSymbol('left')" id="left" class="left"> />
</div> <div
id="bottom"
class="bottom"
@click="changeSymbol('bottom')"
/>
<div
id="left"
class="left"
@click="changeSymbol('left')"
/>
</div> </div>
</div> </div>
<div <div
@ -145,32 +157,32 @@ export default {
data () { data () {
return { return {
dialogVisible: false, dialogVisible: false,
imgUrl:'', imgUrl: '',
top:0, top: 0,
right:0, right: 0,
bottom:0, bottom: 0,
left:0, left: 0,
symbol:'', symbol: '',
isDown:false, isDown: false,
x:0, x: 0,
y:0, y: 0,
l:0, l: 0,
t:0 t: 0
} }
}, },
computed: { computed: {
url(){ url () {
return require('data-room-ui/BorderComponents/GcBorder16/component.png') return require('data-room-ui/BorderComponents/GcBorder16/component.png')
} }
}, },
mounted () { mounted () {
}, },
methods: { methods: {
confirm(){ confirm () {
this.$emit('getArray',[this.top,this.right,this.bottom,this.left]) this.$emit('getArray', [this.top, this.right, this.bottom, this.left])
this.dialogVisible = false this.dialogVisible = false
}, },
getDom(){ getDom () {
// const a=document.getElementById('top') // const a=document.getElementById('top')
// const b=document.getElementById('right') // const b=document.getElementById('right')
// const c=document.getElementById('bottom') // const c=document.getElementById('bottom')
@ -180,10 +192,10 @@ export default {
// this.bottom=getComputedStyle(c).bottom.slice(0,-2) // this.bottom=getComputedStyle(c).bottom.slice(0,-2)
// this.left=getComputedStyle(d).left.slice(0,-2) // this.left=getComputedStyle(d).left.slice(0,-2)
}, },
onMouseUp(){ onMouseUp () {
// this.isDown=false; // this.isDown=false;
}, },
onMousemove(e){ onMousemove (e) {
// const a=document.getElementById('top') // const a=document.getElementById('top')
// if(this.isDown==false){ // if(this.isDown==false){
// return // return
@ -194,44 +206,44 @@ export default {
// a.style.top=nt+"px" // a.style.top=nt+"px"
// this.top=a.style.top // this.top=a.style.top
}, },
onMouseDown(e){ onMouseDown (e) {
// this.y=e.layerY // this.y=e.layerY
// this.t=this.top; // this.t=this.top;
// this.isDown=true // this.isDown=true
// console.log(this.x,this.l) // console.log(this.x,this.l)
}, },
changeSymbol(val){ changeSymbol (val) {
this.symbol=val this.symbol = val
}, },
close(){ close () {
}, },
changeTop(val){ changeTop (val) {
const a=document.getElementById('top') const a = document.getElementById('top')
a.style.top=val+"px" a.style.top = val + 'px'
}, },
changeRight(val){ changeRight (val) {
const a=document.getElementById('right') const a = document.getElementById('right')
a.style.right=val+"px" a.style.right = val + 'px'
}, },
changeBottom(val){ changeBottom (val) {
const a=document.getElementById('bottom') const a = document.getElementById('bottom')
a.style.bottom=val+"px" a.style.bottom = val + 'px'
}, },
changeLeft(val){ changeLeft (val) {
const a=document.getElementById('left') const a = document.getElementById('left')
a.style.left=val+"px" a.style.left = val + 'px'
}, },
init (val,array) { init (val, array) {
if(!val.startsWith('http')){ if (!val.startsWith('http')) {
this.imgUrl=getFileUrl(val) this.imgUrl = getFileUrl(val)
}else{ } else {
this.imgUrl=val this.imgUrl = val
} }
if(array){ if (array) {
[this.top,this.right,this.bottom,this.left]=array [this.top, this.right, this.bottom, this.left] = array
this.$nextTick(()=>{ this.$nextTick(() => {
this.changeTop(this.top) this.changeTop(this.top)
this.changeRight(this.right) this.changeRight(this.right)
this.changeBottom(this.bottom) this.changeBottom(this.bottom)
@ -239,7 +251,7 @@ export default {
}) })
} }
this.dialogVisible = true this.dialogVisible = true
}, }
} }
} }
</script> </script>
@ -261,27 +273,36 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
td,th{
padding: 8px 20px;
text-align: center;
vertical-align: middle;
}
.img{ .img{
position: relative; position: relative;
.toptitle{ .toptitle{
position: absolute; position: absolute;
top: -30px; top: -43px;
left: 34%; left: 50%;
transform: translateX(-50%);
} }
.righttitle{ .righttitle{
position: absolute; position: absolute;
top: 50%; top: 50%;
right: -110px; transform: translateY(-50%);
right: -123px;
} }
.bottomtitle{ .bottomtitle{
position: absolute; position: absolute;
bottom: -30px; bottom: -43px;
left: 34%; left: 50%;
transform: translateX(-50%);
} }
.lefttitle{ .lefttitle{
position: absolute; position: absolute;
top: 50%; top: 50%;
left: -110px; transform: translateY(-50%);
left: -123px;
} }
// height: 100%; // height: 100%;
.top{ .top{

Write Preview
Loading…
Cancel
Save