Skip to content

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

引导页画图

parent 076ee6b1
Hide whitespace changes
Inline Side-by-side
Showing with 173 additions and 47 deletions
pages/welcome/index.vue
View file @ 0166dfee
<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"
v-for="(item, index) in menus"
:key="index"
@mouseenter="navClick(item,index)"
class="navMenuLi flex fc-m fa-m pr cursor"
v-for="(item, indx) in menus"
:key="indx"
@mouseenter="navClick(item, indx)"
>
<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
......@@ -32,16 +31,41 @@
</li>
</ul>
</div>
<!-- @mouseenter="a()" -->
<div
v-for="(line, s) in lines"
class="pa line"
:style="lineStyles(line,s)"
:key="'s'+s"
:title="line.start.join()+':'+line.end.join()"
>
<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>
<script>
import { isInteger } from "lodash";
import { has, hasIn, isInteger } from "lodash";
import viewerVue from "../test/viewer.vue";
export default {
data() {
return {
lines: [
{
start: [100, 100],
end: [250, 100],
},
{
start: [100, 100],
end: [250, 100],
},
],
start:0,
dotA:[],
dotB:[],
dots:[],
menus: [],
list: [],
arrList: [],
......@@ -56,37 +80,81 @@ export default {
},
mounted() {
this.load();
// 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) {
let arr = r.result[0].children.map((l) => {
if ( !this.$u.isNull(l.description) && l.description.indexOf("{") > -1 ) {
if (
!this.$u.isNull(l.description) &&
l.description.indexOf("{") > -1
) {
l.style = eval("(" + l.description + ")");
}
return l;
});
this.arrList = arr;
this.arrList.map(v=>{
if(v.name=='项目管理'){
this.menus[0]=v;
this.menus[0].icons='ios-list-box-outline';
}else if(v.name=='文档管理'){
this.menus[1]=v;
this.menus[1].icons='md-document';
}else if(v.name=='大屏展示'){
this.menus[2]=v;
this.menus[2].icons='ios-stats';
this.arrList.map((v) => {
if (v.name == "项目管理") {
this.menus[0] = v;
this.menus[0].icons = "ios-list-box-outline";
} else if (v.name == "文档管理") {
this.menus[1] = v;
this.menus[1].icons = "md-document";
} else if (v.name == "大屏展示") {
this.menus[2] = v;
this.menus[2].icons = "ios-stats";
}
})
console.log(this.menus)
});
}
});
},
pageClick() {
this.menu = false;
this.oneShow = false;
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
})
}
},
clickLi(v) {
if (v) {
......@@ -95,28 +163,52 @@ 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;
}
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;
// }
},
leavePosition() {
this.oneShow = false;
this.menu = false;
// this.oneShow = false;
// this.menu = false;
},
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.sin(h/l)* 180 / Math.PI;
// // if(line.end[1]>line.start[1]){
// // sinA=-sinA;
// // }
// var sinA=0;
// if(s>0){
// sinA=45;
// }
let sinB =Math.cos(w/l)* 180 / Math.PI;
console.warn("line",w,h,sinA,sinB);
console.log(sinA);
return {
width: l + "px",
transform: "rotate(" + sinA + "deg)",
top: line.start[1] + "px",
left: line.start[0] + "px",
};
},
},
};
......@@ -130,7 +222,6 @@ export default {
top: 90px;
left: 95px;
.navMenuLi {
cursor: pointer;
width: 185px;
height: 99px;
color: #ffffff;
......@@ -165,7 +256,42 @@ export default {
.bdImg {
height: 822px;
width: 1700px;
background: url("../../assets/images/home/router/routerMain.png") no-repeat;
background: url("../../assets/images/home/router/welcome.png") no-repeat;
.line {
height: 2px;
// top: 50px;
// left: 50px;
// width: 200px;
background: linear-gradient(to right, #A7C4D8, #24BDDD);
transform-origin:left;
.lineMarker {
display: inline-block;
width: 7px;
height: 7px;
left: 0;
top: 0;
transform: rotate(50deg) translateY(-4px);
animation: myfirst 1s infinite;
background: url("../../assets/images/home/router/linemarker.png")
no-repeat;
}
@keyframes myfirst {
from {
left: 0%;
}
to {
left: 95%;
}
}
// }
}
.dot{
width: 8px;
height: 8px;
background: red;
border-radius: 50%;
}
}
.menu {
width: 100px;
......
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