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> <template>
<div class="router-main flex fc-m fa-m pr"> <div class="router-main flex fc-m fa-m pr">
<!-- <ul class="pa navMenu"> <ul class="pa navMenu">
<li <li
class="navMenuLi flex fc-m fa-m pr cursor" class="navMenuLi flex fc-m fa-m pr cursor"
v-for="(item, indx) in menus" v-for="(item, indx) in menus"
...@@ -9,16 +9,16 @@ ...@@ -9,16 +9,16 @@
> >
<Icon :type="item.icons" class="f16" />{{ item.name }} <Icon :type="item.icons" class="f16" />{{ item.name }}
</li> </li>
</ul> --> </ul>
<div class="bdImg pr" @click="pageClick"> <div class="bdImg pr" @click="pageClick">
<!-- <div <div
class="one pa cursor" class="one pa cursor"
:class="{ oneHover: oneShow && isIndex == index }" :class="{ oneHover: oneShow && isIndex == index }"
v-for="(item, index) in arrList" v-for="(item, index) in arrList"
:key="index" :key="index"
v-bind:style="item.style" v-bind:style="item.style"
@mouseenter="getPosition(item, index)" @mouseenter="getPosition(item, index)"
></div> --> ></div>
<div class="pa menu" v-bind:style="menuPos" v-show="menu"> <div class="pa menu" v-bind:style="menuPos" v-show="menu">
<ul class="bdTitleBox" @mouseleave="leavePosition"> <ul class="bdTitleBox" @mouseleave="leavePosition">
<li <li
...@@ -31,23 +31,17 @@ ...@@ -31,23 +31,17 @@
</li> </li>
</ul> </ul>
</div> </div>
<!-- @mouseenter="a()" --> <!-- @click="removeLine(s)" -->
<div <div
v-for="(line, s) in lines" v-for="(line, s) in lines"
class="pa line" class="pa line"
:style="lineStyles(line, s)" :style="lineStyles(line, s)"
:key="'s' + s" :key="'s' + s"
:title="line.start.join() + ':' + line.end.join()" :title="line.start.join() + ':' + line.end.join()"
@click="removeLine(s)"
> >
<div class="lineMarker pa"></div> <div class="lineMarker pa"></div>
</div> </div>
<!-- <div
v-for="(dot, iv) in dots"
class="pa dot"
:style="dot"
:key="'v' + iv"
></div> -->
</div> </div>
</div> </div>
</template> </template>
...@@ -60,18 +54,66 @@ export default { ...@@ -60,18 +54,66 @@ export default {
return { return {
lines: [ lines: [
{ {
start: [100, 100], start: [879, 214],
end: [250, 100], 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], start: [1050 ,187],
end: [250, 100], 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, // start: 0,
dotA: [], // dotA: [],
dotB: [], // dotB: [],
dots: [], // dots: [],
menus: [], menus: [],
list: [], list: [],
arrList: [], arrList: [],
...@@ -89,31 +131,6 @@ export default { ...@@ -89,31 +131,6 @@ export default {
// this.lineClick(); // this.lineClick();
}, },
methods: { 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() { load() {
this.$api.get(`${systemUrl}/menu/getusermenu?id=mes_roter`).then((r) => { this.$api.get(`${systemUrl}/menu/getusermenu?id=mes_roter`).then((r) => {
if (r.result) { if (r.result) {
...@@ -144,24 +161,24 @@ export default { ...@@ -144,24 +161,24 @@ export default {
}, },
pageClick(event) { pageClick(event) {
// console.log("event", event); // console.log("event", event);
// console.log(event.pageX, event.pageY); // console.log(event.layerX, event.layerY);
// this.menu = false; this.menu = false;
// this.oneShow = false; this.oneShow = false;
this.dots.push({ // this.dots.push({
left: event.layerX + "px", // left: event.layerX + "px",
top: event.layerY + "px", // top: event.layerY + "px",
}); // });
if (this.start === 0) { // if (this.start === 0) {
this.dotA = [event.layerX, event.layerY]; // this.dotA = [event.layerX, event.layerY];
this.start = 1; // this.start = 1;
} else { // } else {
this.dotB = [event.layerX, event.layerY]; // this.dotB = [event.layerX, event.layerY];
this.start = 0; // this.start = 0;
this.lines.push({ // this.lines.push({
start: this.dotA, // start: this.dotA,
end: this.dotB, // end: this.dotB,
}); // });
} // }
}, },
clickLi(v) { clickLi(v) {
if (v) { if (v) {
...@@ -170,41 +187,39 @@ export default { ...@@ -170,41 +187,39 @@ export default {
this.menu = false; this.menu = false;
}, },
getPosition(item, index) { getPosition(item, index) {
// if (item) { if (item) {
// this.isIndex = index; this.isIndex = index;
// this.oneShow = true; this.oneShow = true;
// this.list = item.children; this.list = item.children;
// this.menu = true; this.menu = true;
// var { left, top } = item.style; var { left, top } = item.style;
// this.menuPos = { left, top }; this.menuPos = { left, top };
// } }
}, },
navClick(v, index) { navClick(v, index) {
// if (v.children && v.children.length > 0) { if (v.children && v.children.length > 0) {
// var { left, top } = v.style; var { left, top } = v.style;
// this.list = v.children; this.list = v.children;
// this.menuPos = { left, top }; this.menuPos = { left, top };
// this.menu = true; this.menu = true;
// } else { } else {
// this.menu = false; this.menu = false;
// } }
}, },
leavePosition() { leavePosition() {
// this.oneShow = false; this.oneShow = false;
// this.menu = false; this.menu = false;
}, },
removeLine(s){ removeLine(s){
this.lines.splice(s,1); this.lines.splice(s,1);
}, },
lineStyles(line, s) { lineStyles(line, s) {
// console.log(line);
let w = line.end[0] - line.start[0]; let w = line.end[0] - line.start[0];
let h = line.end[1] - line.start[1]; let h = line.end[1] - line.start[1];
let l = Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2)); let l = Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2));
let sinA = let sinA =
Math.atan2(line.end[1] - line.start[1], line.end[0] - line.start[0]) / Math.atan2(line.end[1] - line.start[1], line.end[0] - line.start[0]) /
0.017453292; 0.017453292;
console.log(sinA);
return { return {
width: l + "px", width: l + "px",
transform: "rotate(" + sinA + "deg)", transform: "rotate(" + sinA + "deg)",
...@@ -282,7 +297,7 @@ export default { ...@@ -282,7 +297,7 @@ export default {
left: 0%; left: 0%;
} }
to { 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