Skip to content

S
SuperMan
Commit 3d56bcce authored by 黄奎's avatar 黄奎
Browse files
Options

页面优化

parent 62b79ea4
Show whitespace changes
Inline Side-by-side
Showing with 318 additions and 194 deletions
src/components/platformModule/platformManagement.vue
View file @ 3d56bcce
<style lang="less" scoped> <style lang="less" scoped>
@import "../../assets/css/main.less"; @import "../../assets/css/main.less";
@import "../../assets/css/cssReset.css"; @import "../../assets/css/cssReset.css";
</style> </style>
<template> <template>
<div> <div>
<leftNav></leftNav> <leftNav></leftNav>
</div> </div>
</template> </template>
<script> <script>
import leftNav from '../public/leftNav.vue' import leftNav from '../public/leftNav.vue'
export default { export default {
data (){ data() {
return{ return {
} }
}, },
components:{ components: {
leftNav leftNav
}, },
mounted(){ mounted() {
}, },
methods:{ methods: {
goUrl (path,id) { goUrl(path, id) {
this.$router.push({ path: "Details",query:{path,id} }) this.$router.push({
path: "Details",
query: {
path,
id
}
})
}, },
} }
} }
</script> </script>
\ No newline at end of file
src/components/public/leftNav.vue
View file @ 3d56bcce
<template> <template>
<div class="leftNav"> <div class="leftNav">
<div class="singleMenUlayer" v-show="singleMenUlayerShow">
<div class="singleMenUlayer" v-show="singleMenUlayerShow" >
<i class="iconfont icon-Close" @click="singleMenUlayerShow=false"></i> <i class="iconfont icon-Close" @click="singleMenUlayerShow=false"></i>
<div v-for="outItem in bigIconItems" style="overflow: hidden;"> <div v-for="outItem in bigIconItems" style="overflow: hidden;">
<p style="border-left: 3px solid #E95252; height: 14px; line-height: 14px; font-size: 12px; text-indent: 12px; margin-top: 10px;">{{outItem.GCode}}</p> <p
style="border-left: 3px solid #E95252; height: 14px; line-height: 14px; font-size: 12px; text-indent: 12px; margin-top: 10px;">
{{outItem.GCode}}</p>
<ul> <ul>
<li v-for="(item,index) in outItem.list" @click="goUrl(item.MenuUrl)"> <li v-for="(item,index) in outItem.list" @click="goUrl(item.MenuUrl)">
<div> <div>
...@@ -14,79 +15,65 @@ ...@@ -14,79 +15,65 @@
</li> </li>
</ul> </ul>
</div> </div>
<!--<ul>
<li v-for="(item,index) in bigIconItems" @click="goUrl(item.MenuUrl)">
<div>
<i :style="{background:item.MenuStyleColor}" :class="[fontPub,item.MenuStyleIcon]"></i>
</div>
{{item.MenuName}}
</li>
</ul>-->
</div> </div>
<div class="shortcutsDiv"> <div class="shortcutsDiv">
<div class="rgba"></div> <div class="rgba"></div>
<p class="updateIcon"><i class="iconfont icon-Edit"></i></p> <p class="updateIcon"><i class="iconfont icon-Edit"></i></p>
<div class="shortcuts"> <div class="shortcuts">
<li v-for="(item,index) in items" @click="showMenu(item)"> <li v-for="(item,index) in items" @click="showMenu(item)">
<div> <div>
<i v-for="childItem in item.childerns" :style="{background:childItem.MenuStyleColor}" :class="[fontPub,childItem.MenuStyleIcon]"></i> <i v-for="childItem in item.childerns" :style="{background:childItem.MenuStyleColor}"
:class="[fontPub,childItem.MenuStyleIcon]"></i>
</div> </div>
{{item.MenuName}} {{item.MenuName}}
</li> </li>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default{ export default {
data(){ data() {
return{ return {
items:[], items: [],
openId:0, openId: 0,
iconItems:[], iconItems: [],
fontPub:'iconfont', fontPub: 'iconfont',
bigIconItems:[], bigIconItems: [],
singleMenUlayerShow:false, singleMenUlayerShow: false,
} }
}, },
mounted(){ mounted() {
this.getMenu(); this.getMenu();
console.log(this.getLocalStorage())
}, },
methods:{ methods: {
getMenu(){ getMenu() {
this.menuList=this.getLocalStorage().UserMenu; this.menuList = this.getLocalStorage().UserMenu;
let path=this.$route.path.split('?')[0]; let path = this.$route.path.split('?')[0];
let root=0; let root = 0;
//找到Root //找到Root
this.menuList.forEach(x=>{ this.menuList.forEach(x => {
if(x.MenuUrl==path){ if (x.MenuUrl == path) {
root=x.RootId; root = x.RootId;
this.openId=x.ParentId; this.openId = x.ParentId;
return false return false
} }
}) })
this.items=[]; this.items = [];
let that=this; let that = this;
this.menuList.forEach(rootItem=>{ this.menuList.forEach(rootItem => {
if(rootItem.RootId==root){ if (rootItem.RootId == root) {
rootItem.ChildMenu.forEach(secondItem=>{ rootItem.ChildMenu.forEach(secondItem => {
secondItem.childerns=[]; secondItem.childerns = [];
let style=JSON.parse(secondItem.MenuStyle); let style = JSON.parse(secondItem.MenuStyle);
secondItem.MenuStyleIcon=style.icon; secondItem.MenuStyleIcon = style.icon;
secondItem.MenuStyleColor=style.color; secondItem.MenuStyleColor = style.color;
secondItem.ChildMenu.forEach(thirdItem=>{ secondItem.ChildMenu.forEach(thirdItem => {
if(thirdItem.RootId==root&&thirdItem.ParentId==secondItem.MenuId){ if (thirdItem.RootId == root && thirdItem.ParentId == secondItem.MenuId) {
secondItem.childerns.push(thirdItem); secondItem.childerns.push(thirdItem);
let style2=JSON.parse(thirdItem.MenuStyle); let style2 = JSON.parse(thirdItem.MenuStyle);
thirdItem.MenuStyleIcon=style2.icon; thirdItem.MenuStyleIcon = style2.icon;
thirdItem.MenuStyleColor=style2.color; thirdItem.MenuStyleColor = style2.color;
} }
}) })
that.items.push(secondItem) that.items.push(secondItem)
...@@ -94,48 +81,68 @@ ...@@ -94,48 +81,68 @@
} }
}) })
}, },
showMenu(item){ showMenu(item) {
this.singleMenUlayerShow=true; this.singleMenUlayerShow = true;
this.bigIconItems=item.NewChildMenu; this.bigIconItems = item.NewChildMenu;
this.bigIconItems.forEach(item=>{ this.bigIconItems.forEach(item => {
item.list.forEach(x=>{ item.list.forEach(x => {
let obj=JSON.parse(x.MenuStyle); let obj = JSON.parse(x.MenuStyle);
x['MenuStyleIcon']=obj.icon x['MenuStyleIcon'] = obj.icon
x['MenuStyleColor']=obj.color x['MenuStyleColor'] = obj.color
}) })
}) })
}, },
goUrl (path) { goUrl(path) {
this.$router.push({ path:path}) this.$router.push({
path: path
})
}, },
}, },
} }
</script> </script>
<style> <style>
.leftNav .shortcutsDiv {
width: 264px;
border-radius: 6px;
position: absolute;
padding-bottom: 5px;
top: 30px;
left: 30px;
bottom: 30px;
overflow-y: auto;
z-index: 0;
display: block;
}
.leftNav .shortcutsDiv{width: 264px;border-radius: 6px;position:absolute; .leftNav .shortcutsDiv::before {
padding-bottom: 5px; top: 30px;left: 30px;bottom:30px;overflow-y: auto;z-index: 0;display: block;}
.leftNav .shortcutsDiv::before{
content: ""; content: "";
position: absolute; position: absolute;
/* width:300%;
height:300%;
left: -100%;
top: -100%;
background: url('../../assets/img/img-bg.jpg') no-repeat center center fixed; */
filter: blur(20px); filter: blur(20px);
z-index: -2; z-index: -2;
} }
.leftNav .shortcutsDiv .rgba{
.leftNav .shortcutsDiv .rgba {
background-color: rgba(114, 114, 114, 0.1); background-color: rgba(114, 114, 114, 0.1);
position: absolute; position: absolute;
width:100%; width: 100%;
height:100%; height: 100%;
z-index: -1; z-index: -1;
} }
.leftNav .shortcuts{overflow: hidden;}
.leftNav .shortcuts li{font-size: 12px; width: 70px; height: 120px; color: #666; text-align: center;} .leftNav .shortcuts {
.leftNav .shortcuts li>div{ overflow: hidden;
}
.leftNav .shortcuts li {
font-size: 12px;
width: 70px;
height: 120px;
color: #666;
text-align: center;
}
.leftNav .shortcuts li>div {
width: 70px; width: 70px;
height: 70px; height: 70px;
padding: 10px 0; padding: 10px 0;
...@@ -146,25 +153,145 @@ ...@@ -146,25 +153,145 @@
cursor: pointer; cursor: pointer;
border: 1px solid #DFDFDF; border: 1px solid #DFDFDF;
} }
.leftNav .shortcuts li>div>i{float:left; width: 20px; height: 20px; line-height: 20px; text-align: center; margin-top: 5px; border-radius: 8px; color:#fafafa; font-size: 12px;}
.leftNav .shortcuts li>div>i:nth-child(2n+1){margin-left: 12px;} .leftNav .shortcuts li>div>i {
.leftNav .shortcuts li>div>i:nth-child(2n){margin-left: 5px;} float: left;
.leftNav .shortcuts li>div>i:nth-child(n+5){margin-top: 20px;} width: 20px;
.leftNav .shortcuts li:nth-child(2n+1){ float: left; margin-left: 40px;} height: 20px;
.leftNav .shortcuts li:nth-child(2n){float: right; margin-right: 40px;} line-height: 20px;
.leftNav .shortcuts li a img{margin-bottom: 12px;} text-align: center;
.leftNav .customMenu{font-size: 12px; text-align: center; color: #666;overflow-y: auto;} margin-top: 5px;
.leftNav .customMenu li>div{width: 70px; height: 70px; background:#eee; border-radius: 28px; border: 1px solid #eee; margin: 20px 0; cursor: pointer;} border-radius: 8px;
.leftNav .customMenu li:nth-child(2n+1){ float: left; margin-left: 40px;} color: #fafafa;
.leftNav .customMenu li:nth-child(2n){float: right; margin-right: 40px;} font-size: 12px;
.leftNav .addCustomMenu>div{line-height: 70px; color: #CBCBCB; background: #fff!important} }
.leftNav .singleMenUlayer{position: absolute; background: #fff; box-shadow:2px 2px 0 rgba(88,88,88,.1) ;
border-radius: 6px; left: 320px; top: 30px; width: 640px;min-height: 300px; z-index: 500; padding:15px; box-sizing: border-box; border: 1px solid #F1f1f1;cursor: pointer;} .leftNav .shortcuts li>div>i:nth-child(2n+1) {
.leftNav .singleMenUlayer ul li{float: left; width:70px; margin: 10px 30px 0 0; cursor: pointer; color: #666; font-size: 12px;text-align: center;min-height: 110px;} margin-left: 12px;
.leftNav .singleMenUlayer ul li div{width: 56px; height: 56px; margin: 8px auto; text-align: center; line-height: 60px; border-radius: 28px; overflow: hidden;} }
.leftNav .singleMenUlayer ul li div i{ width: 56px; height: 56px; display: inline-block; font-size: 30px; color: #fff; background: #00B8EC;}
.leftNav .updateIcon{text-align: right; padding: 10px 10px 0px;} .leftNav .shortcuts li>div>i:nth-child(2n) {
.leftNav .updateIcon i{cursor: pointer;color: #999;font-size:18px;} margin-left: 5px;
.leftNav .icon-ego-guanbi{position: absolute; right: 15px; top: 15px; color: #333; cursor: pointer;} }
.leftNav .icon-ego-guanbi:hover{color: #999;}
.leftNav .shortcuts li>div>i:nth-child(n+5) {
margin-top: 20px;
}
.leftNav .shortcuts li:nth-child(2n+1) {
float: left;
margin-left: 40px;
}
.leftNav .shortcuts li:nth-child(2n) {
float: right;
margin-right: 40px;
}
.leftNav .shortcuts li a img {
margin-bottom: 12px;
}
.leftNav .customMenu {
font-size: 12px;
text-align: center;
color: #666;
overflow-y: auto;
}
.leftNav .customMenu li>div {
width: 70px;
height: 70px;
background: #eee;
border-radius: 28px;
border: 1px solid #eee;
margin: 20px 0;
cursor: pointer;
}
.leftNav .customMenu li:nth-child(2n+1) {
float: left;
margin-left: 40px;
}
.leftNav .customMenu li:nth-child(2n) {
float: right;
margin-right: 40px;
}
.leftNav .addCustomMenu>div {
line-height: 70px;
color: #CBCBCB;
background: #fff !important
}
.leftNav .singleMenUlayer {
position: absolute;
background: #fff;
box-shadow: 2px 2px 0 rgba(88, 88, 88, .1);
border-radius: 6px;
left: 320px;
top: 30px;
width: 640px;
min-height: 300px;
z-index: 500;
padding: 15px;
box-sizing: border-box;
border: 1px solid #F1f1f1;
cursor: pointer;
}
.leftNav .singleMenUlayer ul li {
float: left;
width: 70px;
margin: 10px 30px 0 0;
cursor: pointer;
color: #666;
font-size: 12px;
text-align: center;
min-height: 110px;
}
.leftNav .singleMenUlayer ul li div {
width: 56px;
height: 56px;
margin: 8px auto;
text-align: center;
line-height: 60px;
border-radius: 28px;
overflow: hidden;
}
.leftNav .singleMenUlayer ul li div i {
width: 56px;
height: 56px;
display: inline-block;
font-size: 30px;
color: #fff;
background: #00B8EC;
}
.leftNav .updateIcon {
text-align: right;
padding: 10px 10px 0px;
}
.leftNav .updateIcon i {
cursor: pointer;
color: #999;
font-size: 18px;
}
.leftNav .icon-ego-guanbi {
position: absolute;
right: 15px;
top: 15px;
color: #333;
cursor: pointer;
}
.leftNav .icon-ego-guanbi:hover {
color: #999;
}
</style> </style>
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