Skip to content

M
mes-ui
Commit 64592405 authored by luo ying's avatar luo ying
Browse files
Options

引导页

parent 38eefdba
Hide whitespace changes
Inline Side-by-side
Showing with 99 additions and 84 deletions
pages/welcome/index.vue
View file @ 64592405
<template>
<div class="router-main flex fc-m fa-m pr">
<!-- <ul class="pa navMenu">
<ul class="pa navMenu">
<li
class="navMenuLi flex fc-m fa-m pr cursor"
v-for="(item, indx) in menus"
......@@ -9,16 +9,16 @@
>
<Icon :type="item.icons" class="f16" />{{ item.name }}
</li>
</ul> -->
</ul>
<div class="bdImg pr" @click="pageClick">
<!-- <div
<div
class="one pa cursor"
:class="{ oneHover: oneShow && isIndex == index }"
v-for="(item, index) in arrList"
:key="index"
v-bind:style="item.style"
@mouseenter="getPosition(item, index)"
></div> -->
></div>
<div class="pa menu" v-bind:style="menuPos" v-show="menu">
<ul class="bdTitleBox" @mouseleave="leavePosition">
<li
......@@ -31,23 +31,17 @@
</li>
</ul>
</div>
<!-- @mouseenter="a()" -->
<!-- @click="removeLine(s)" -->
<div
v-for="(line, s) in lines"
class="pa line"
:style="lineStyles(line, s)"
:key="'s' + s"
:title="line.start.join() + ':' + line.end.join()"
@click="removeLine(s)"
>
<div class="lineMarker pa"></div>
</div>
<!-- <div
v-for="(dot, iv) in dots"
class="pa dot"
:style="dot"
:key="'v' + iv"
></div> -->
</div>
</div>
</template>
......@@ -60,18 +54,66 @@ export default {
return {
lines: [
{
start: [100, 100],
end: [250, 100],
start: [879, 214],
end: [922,188],
},
{
start: [387, 277],
end: [420, 298],
},
{
start: [505 ,351],
end: [539, 372],
},
{
start: [507 ,445],
end: [547, 423],
},
{
start: [639, 370],
end: [678 ,345],
},
{
start: [670, 400],
end: [762 ,403],
},
{
start: [637, 424],
end: [740, 483],
},
{
start: [874 ,474],
end: [837, 496],
},
{
start: [100, 100],
end: [250, 100],
start: [1050 ,187],
end: [1081, 205],
},
{
start: [1253, 251],
end: [1293 ,226],
},
{
start: [1312, 371],
end: [1341, 390],
},
{
start: [185 ,648],
end: [241 ,617],
},
{
start: [375 ,541],
end: [432 ,509],
},
{
start: [873 ,568],
end: [934 ,600],
},
],
start: 0,
dotA: [],
dotB: [],
dots: [],
// start: 0,
// dotA: [],
// dotB: [],
// dots: [],
menus: [],
list: [],
arrList: [],
......@@ -89,31 +131,6 @@ export default {
// this.lineClick();
},
methods: {
lineList(event) {
console.log(event);
},
// lineClick() {
// let pos = -6;
// var id;
// let idx;
// this.lineList.map((z, i) => {
// if (z.left == "-6px") {
// idx = i;
// id = setInterval(frame, 100); //无限循环
// }
// });
// var _this = this;
// function frame() {
// if (pos == 38) {
// pos = 0;
// } else {
// pos++;
// _this.$nextTick(() => {
// _this.lineList[idx].left = pos + "px";
// });
// }
// }
// },
load() {
this.$api.get(`${systemUrl}/menu/getusermenu?id=mes_roter`).then((r) => {
if (r.result) {
......@@ -144,24 +161,24 @@ export default {
},
pageClick(event) {
// console.log("event", event);
// console.log(event.pageX, event.pageY);
// this.menu = false;
// this.oneShow = false;
this.dots.push({
left: event.layerX + "px",
top: event.layerY + "px",
});
if (this.start === 0) {
this.dotA = [event.layerX, event.layerY];
this.start = 1;
} else {
this.dotB = [event.layerX, event.layerY];
this.start = 0;
this.lines.push({
start: this.dotA,
end: this.dotB,
});
}
// console.log(event.layerX, event.layerY);
this.menu = false;
this.oneShow = false;
// this.dots.push({
// left: event.layerX + "px",
// top: event.layerY + "px",
// });
// if (this.start === 0) {
// this.dotA = [event.layerX, event.layerY];
// this.start = 1;
// } else {
// this.dotB = [event.layerX, event.layerY];
// this.start = 0;
// this.lines.push({
// start: this.dotA,
// end: this.dotB,
// });
// }
},
clickLi(v) {
if (v) {
......@@ -170,41 +187,39 @@ export default {
this.menu = false;
},
getPosition(item, index) {
// if (item) {
// this.isIndex = index;
// this.oneShow = true;
// this.list = item.children;
// this.menu = true;
// var { left, top } = item.style;
// this.menuPos = { left, top };
// }
if (item) {
this.isIndex = index;
this.oneShow = true;
this.list = item.children;
this.menu = true;
var { left, top } = item.style;
this.menuPos = { left, top };
}
},
navClick(v, index) {
// if (v.children && v.children.length > 0) {
// var { left, top } = v.style;
// this.list = v.children;
// this.menuPos = { left, top };
// this.menu = true;
// } else {
// this.menu = false;
// }
if (v.children && v.children.length > 0) {
var { left, top } = v.style;
this.list = v.children;
this.menuPos = { left, top };
this.menu = true;
} else {
this.menu = false;
}
},
leavePosition() {
// this.oneShow = false;
// this.menu = false;
this.oneShow = false;
this.menu = false;
},
removeLine(s){
this.lines.splice(s,1);
},
lineStyles(line, s) {
// console.log(line);
let w = line.end[0] - line.start[0];
let h = line.end[1] - line.start[1];
let l = Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2));
let sinA =
Math.atan2(line.end[1] - line.start[1], line.end[0] - line.start[0]) /
0.017453292;
console.log(sinA);
return {
width: l + "px",
transform: "rotate(" + sinA + "deg)",
......@@ -282,7 +297,7 @@ export default {
left: 0%;
}
to {
left: 95%;
left: 85%;
}
}
// }
......
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