Skip to content

E
ElectricitySheep
Commit 93708096 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 79ef8d74
Hide whitespace changes
Inline Side-by-side
Showing with 214 additions and 116 deletions
src/components/common/choiceAreaAuth.vue
View file @ 93708096
...@@ -79,73 +79,133 @@ ...@@ -79,73 +79,133 @@
<div flex="dir:left box:first"> <div flex="dir:left box:first">
<div class="inside" flex="dir:left main:center cross:center" ref="inside"> <div class="inside" flex="dir:left main:center cross:center" ref="inside">
<div style="position: relative;" ref="box"> <div style="position: relative;" ref="box">
<div class="shadow" :style="{zIndex: zIndex}" @click="click" @mousedown="mousedown" @mouseup="mouseup" <div class="shadow" :style="{zIndex: zIndex}" @click="hotSpotclick" @mousedown="mousedown"
@mousemove="mousemove" @mouseout="mouseout "></div> @mouseup="mouseup" @mousemove="mousemove" @mouseout="mouseout "></div>
<div class="hotspot" <div class="hotspot"
:style="{width:item.width+'px',height:item.height+'px',left:item.left+'px', :style="{width:item.width+'px',height:item.height+'px',left:item.left+'px',
top:item.top+'px', maxWidth:'calc('+width+' - '+item.left+'px)', top:item.top+'px', maxWidth:'calc('+width+' - '+item.left+'px)',
maxHeight:'calc('+height+' - '+item.top+'px)', backgroundColor: index == key ? 'rgba(92, 179, 253, 0.2)' : ''}" maxHeight:'calc('+height+' - '+item.top+'px)', backgroundColor: index == key ? 'rgba(92, 179, 253, 0.2)' : ''}"
@click="select(key)" v-for="(item, key) in hotspotList" :key="key" :data-index="key"> @click="selectHotSpot(key)" v-for="(item, key) in hotspotList" :key="key" :data-index="key">
<div class="close" @click.stop="del(key)" v-if="item.is_close"> <div class="close" @click.stop="delHotSpot()" v-if="item.width>0 && item.IsChecked">
<img style="width: 32px;height: 32px" :src="getIconLink('/Static/icon-close.png')"> <img style="width: 32px;height: 32px" :src="getIconLink('/Static/icon-close.png')">
</div> </div>
</div> </div>
<div :style="calcstyle" flex="dir:left main:center cross:center"> <div :style="calcstyle" flex="dir:left main:center cross:center">
<img style="width: auto;height: auto;max-width: 100%;max-height: 100%" :src="picUrl"> <img style="width:auto;height:auto;max-width:100%;max-height:100%" :src="picUrl">
</div> </div>
</div> </div>
</div> </div>
<el-form label-width="120px"> <el-form label-width="120px">
<div class="right" v-if="index > -1"> <table>
<el-form-item label="热区尺寸"> <tr>
<el-row type="flex"> <td>
<el-col :span="12"> <el-checkbox v-if="hotspotList&&hotspotList.length>0" v-model="hotspotList[0].IsChecked"
<div flex="dir:left"> @change="changeItem(hotspotList[0],0)">不登录按钮
<label>W</label> </el-checkbox>
<el-input size="small" type="number" v-model.number="hotspotList[index].width" :max="maxWidth"> </td>
</el-input> <td>
<label>px</label> <el-form-item label="热区尺寸">
</div> <el-row type="flex">
</el-col> <el-col :span="15">
<el-col :span="12"> <div flex="dir:left">
<div flex="dir:left"> <label>W</label>
<label>H</label> <el-input size="small" type="number" v-if="hotspotList&&hotspotList.length>0"
<el-input size="small" type="number" v-model.number="hotspotList[index].height" :max="maxHeight"> v-model="hotspotList[0].width" :max="maxWidth_Cancel">
</el-input> </el-input>
<label>px</label> <label>px</label>
</div> </div>
</el-col> </el-col>
</el-row> <el-col :span="15">
</el-form-item> <div flex="dir:left">
<el-form-item label="热区位置"> <label>H</label>
<el-row type="flex"> <el-input size="small" type="number" v-if="hotspotList&&hotspotList.length>0"
<el-col :span="12"> v-model="hotspotList[0].height" :max="maxHeight_Cancel">
<div flex="dir:left"> </el-input>
<label>X</label> <label>px</label>
<el-input size="small" type="number" v-model.number="hotspotList[index].left"> </div>
</el-input> </el-col>
<label>px</label> </el-row>
</div> </el-form-item>
</el-col> <el-form-item label="热区位置">
<el-col :span="12"> <el-row type="flex">
<div flex="dir:left"> <el-col :span="15">
<label>Y</label> <div flex="dir:left">
<el-input size="small" type="number" v-model.number="hotspotList[index].top"> <label>X</label>
</el-input> <el-input size="small" type="number" v-if="hotspotList&&hotspotList.length>0"
<label>px</label> v-model.number="hotspotList[0].left">
</div> </el-input>
</el-col> <label>px</label>
</el-row> </div>
</el-form-item> </el-col>
<el-form-item label="热区属性" v-if="mode == 'auth'"> <el-col :span="15">
<el-radio-group v-model="hotspotList[index].open_type"> <div flex="dir:left">
<el-radio label="login" :disabled="radioDisabled('login')">登录按钮</el-radio> <label>Y</label>
<el-radio label="cancel" :disabled="radioDisabled('cancel')">不登录按钮</el-radio> <el-input size="small" type="number" v-if="hotspotList&&hotspotList.length>0"
</el-radio-group> v-model.number="hotspotList[0].top">
</el-form-item> </el-input>
</div> <label>px</label>
<div v-if="index == -1 && hotspotList.length == 0" style="padding: 20px 40px;">请先在左侧蓝框内用鼠标划出热区范围</div> </div>
<el-form-item v-else label=""> </el-col>
</el-row>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-checkbox v-if="hotspotList&&hotspotList.length>1" v-model="hotspotList[1].IsChecked"
@change="changeItem(hotspotList[1],1)">登录按钮
</el-checkbox>
</td>
<td>
<el-form-item label="热区尺寸">
<el-row type="flex">
<el-col :span="15">
<div flex="dir:left">
<label>W</label>
<el-input size="small" type="number" v-if="hotspotList&&hotspotList.length>1"
v-model="hotspotList[1].width" :max="maxWidth_Login">
</el-input>
<label>px</label>
</div>
</el-col>
<el-col :span="15">
<div flex="dir:left">
<label>H</label>
<el-input size="small" type="number" v-if="hotspotList&&hotspotList.length>1"
v-model="hotspotList[1].height" :max="maxHeight_Login">
</el-input>
<label>px</label>
</div>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="热区位置">
<el-row type="flex">
<el-col :span="15">
<div flex="dir:left">
<label>X</label>
<el-input size="small" type="number" v-if="hotspotList&&hotspotList.length>1"
v-model.number="hotspotList[1].left">
</el-input>
<label>px</label>
</div>
</el-col>
<el-col :span="15">
<div flex="dir:left">
<label>Y</label>
<el-input size="small" type="number" v-if="hotspotList&&hotspotList.length>1"
v-model.number="hotspotList[1].top">
</el-input>
<label>px</label>
</div>
</el-col>
</el-row>
</el-form-item>
</td>
</tr>
</table>
<div style="padding: 20px 40px;">请先在左侧蓝框内用鼠标划出热区范围</div>
<el-form-item label="">
<el-button style="margin-left: 10px" v-if="hotspotList.length==2" type="primary" size="small" <el-button style="margin-left: 10px" v-if="hotspotList.length==2" type="primary" size="small"
@click="confirm">保存</el-button> @click="confirm">保存</el-button>
<el-button size="small" @click="clearAll">重置</el-button> <el-button size="small" @click="clearAll">重置</el-button>
...@@ -180,19 +240,7 @@ ...@@ -180,19 +240,7 @@
dialogVisible: false, dialogVisible: false,
is_mousedown: false, is_mousedown: false,
is_mousemove: false, is_mousemove: false,
is_close: false, hotspotList: JSON.parse(JSON.stringify(this.hotspotArray)),
hotspot: {
height: 0,
width: 0,
left: 0,
top: 0,
defaultX: 0,
defaultY: 0,
is_close: false,
link: '',
open_type: ''
},
hotspotList: [],
index: -1, index: -1,
zIndex: 99, zIndex: 99,
}; };
...@@ -202,7 +250,10 @@ ...@@ -202,7 +250,10 @@
this.hotspotList = JSON.parse(JSON.stringify(this.hotspotArray)) this.hotspotList = JSON.parse(JSON.stringify(this.hotspotArray))
this.index = -1; this.index = -1;
if (this.hotspotList.length > 0) { if (this.hotspotList.length > 0) {
this.select(1); this.index = 0;
this.hotspotList[0].IsChecked = true;
this.hotspotList[1].IsChecked = false;
this.selectHotSpot(0);
} }
} }
}, },
...@@ -215,15 +266,65 @@ ...@@ -215,15 +266,65 @@
}; };
return objStyle; return objStyle;
}, },
maxWidth() { //不登录按钮最大宽度
return parseFloat(this.width) - this.hotspotList[this.index].left; maxWidth_Cancel() {
var widthStr = this.width.replace("px", "");
var tempWidth = parseFloat(widthStr);
var firstLeft = 0;
if (this.hotspotList && this.hotspotList.length > 0 && this.hotspotList[0].left) {
firstLeft = this.hotspotList[0].left;
}
tempWidth = tempWidth - firstLeft;
return tempWidth;
}, },
maxHeight() { //不登录按钮最大高度
return parseFloat(this.height) - this.hotspotList[this.index].top; maxHeight_Cancel() {
var heightStr = this.height.replace("px", "");
var maxHeight = parseFloat(heightStr);
var firstTop = 0;
if (this.hotspotList && this.hotspotList.length > 0 && this.hotspotList[0].top) {
firstTop = this.hotspotList[0].top;
}
maxHeight = maxHeight - firstTop;
return maxHeight;
},
//登录按钮最大宽度
maxWidth_Login() {
var widthStr = this.width.replace("px", "");
var tempWidth = parseFloat(widthStr);
var secondLeft = 0;
if (this.hotspotList && this.hotspotList.length > 1 && this.hotspotList[1].left) {
secondLeft = this.hotspotList[1].left;
}
tempWidth = tempWidth - secondLeft;
return tempWidth;
}, },
//登录按钮最大高度
maxHeight_Login() {
var heightStr = this.height.replace("px", "");
var maxHeight = parseFloat(heightStr);
var secondTop = 0;
if (this.hotspotList && this.hotspotList.length > 1 && this.hotspotList[1].top) {
secondTop = this.hotspotList[1].top;
}
maxHeight = maxHeight - secondTop;
return maxHeight;
},
},
created() {
}, },
methods: { methods: {
click(e) { //选中项
changeItem(item, index) {
this.hotspotList.forEach(subItem => {
subItem.IsChecked = false;
});
item.IsChecked = !item.IsChecked;
this.selectHotSpot(index);
},
//热区点击
hotSpotclick(e) {
this.is_mousedown = false; this.is_mousedown = false;
}, },
position(e) { position(e) {
...@@ -249,24 +350,21 @@ ...@@ -249,24 +350,21 @@
return position; return position;
}, },
mousedown(e) { mousedown(e) {
if (!this.multiple) { var count = 0;
if (this.hotspotList.length > 0) { this.hotspotList.forEach(item => {
return; if (item.width > 0) {
} count++;
} else {
if (this.max && this.hotspotList.length === this.max) {
return;
} }
})
if (this.max && count === this.max) {
return;
} }
let position = this.position(e); let position = this.position(e);
this.is_mousedown = true; this.is_mousedown = true;
let hotspot = JSON.parse(JSON.stringify(this.hotspot)); this.hotspotList[this.index].left = position.x;
hotspot.left = position.x; this.hotspotList[this.index].top = position.y;
hotspot.top = position.y; this.hotspotList[this.index].defaultX = position.x;
hotspot.defaultX = position.x; this.hotspotList[this.index].defaultY = position.y;
hotspot.defaultY = position.y;
this.hotspotList.push(hotspot);
this.index = this.hotspotList.length - 1;
this.zIndex = 102; this.zIndex = 102;
}, },
mousemove(e) { mousemove(e) {
...@@ -275,11 +373,11 @@ ...@@ -275,11 +373,11 @@
return; return;
} }
let position = this.position(e); let position = this.position(e);
let hotspot = this.hotspotList[this.index]; let tempHotspot = this.hotspotList[this.index];
this.hotspotList[this.index].left = Math.min(position.x, hotspot.defaultX); this.hotspotList[this.index].left = Math.min(position.x, tempHotspot.defaultX);
this.hotspotList[this.index].top = Math.min(position.y, hotspot.defaultY); this.hotspotList[this.index].top = Math.min(position.y, tempHotspot.defaultY);
this.hotspotList[this.index].width = Math.abs(hotspot.defaultX - position.x); this.hotspotList[this.index].width = Math.abs(tempHotspot.defaultX - position.x);
this.hotspotList[this.index].height = Math.abs(hotspot.defaultY - position.y); this.hotspotList[this.index].height = Math.abs(tempHotspot.defaultY - position.y);
this.is_mousemove = true; this.is_mousemove = true;
} }
}, },
...@@ -301,11 +399,15 @@ ...@@ -301,11 +399,15 @@
this.is_mousemove = false; this.is_mousemove = false;
this.zIndex = 99; this.zIndex = 99;
}, },
del(index) { delHotSpot() {
this.hotspotList.splice(index, 1); this.hotspotList[this.index].left = 0;
this.index = -1; this.hotspotList[this.index].top = 0;
this.hotspotList[this.index].width = 0;
this.hotspotList[this.index].height = 0;
this.hotspotList[this.index].defaultX = 0;
this.hotspotList[this.index].defaultY = 0;
}, },
select(index) { selectHotSpot(index) {
if (this.is_mousemove) { if (this.is_mousemove) {
return; return;
} }
...@@ -313,21 +415,13 @@ ...@@ -313,21 +415,13 @@
}, },
clearAll() { clearAll() {
this.index = -1; this.index = -1;
this.hotspotList = []; //this.hotspotList = [];
}, },
confirm() { confirm() {
this.dialogVisible = false; this.dialogVisible = false;
this.index = -1; this.index = -1;
this.$emit('confirm', this.hotspotList); this.$emit('confirm', this.hotspotList);
}, },
radioDisabled(name) {
for (let i in this.hotspotList) {
if (this.hotspotList[i].open_type && this.hotspotList[i].open_type == name && i != this.index) {
return true;
}
}
return false;
},
} }
}; };
......
src/components/sallCenter/authorization.vue
View file @ 93708096
...@@ -102,28 +102,32 @@ ...@@ -102,28 +102,32 @@
}, },
//热区设置默认值 //热区设置默认值
GetDefaultSpot() { GetDefaultSpot() {
var objLogin = { var objCancel = {
width: 224, width: 224,
height: 80, height: 80,
left: 340, left: 84,
top: 566, top: 566,
defaultX: 340, defaultX: 84,
defaultY: 566, defaultY: 566,
link: "", link: "",
open_type: "login" open_type: "cancel",
IsChecked:false,
}; };
this.addMsg.AuthDataList.push(objLogin); this.addMsg.AuthDataList.push(objCancel);
var objCancel = {
var objLogin = {
width: 224, width: 224,
height: 80, height: 80,
left: 84, left: 340,
top: 566, top: 566,
defaultX: 84, defaultX: 340,
defaultY: 566, defaultY: 566,
link: "", link: "",
open_type: "cancel" open_type: "login",
IsChecked:false,
}; };
this.addMsg.AuthDataList.push(objCancel); this.addMsg.AuthDataList.push(objLogin);
}, },
//保存 //保存
saveMsg() { saveMsg() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment