Skip to content

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

页面优化

parent 62b79ea4
Hide 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>
@import "../../assets/css/main.less";
@import "../../assets/css/cssReset.css";
<style lang="less" scoped>
@import "../../assets/css/main.less";
@import "../../assets/css/cssReset.css";
</style>
<template>
<div>
<leftNav></leftNav>
<leftNav></leftNav>
</div>
</template>
<script>
import leftNav from '../public/leftNav.vue'
export default {
data (){
return{
}
},
components:{
leftNav
},
mounted(){
},
methods:{
goUrl (path,id) {
this.$router.push({ path: "Details",query:{path,id} })
},
}
}
import leftNav from '../public/leftNav.vue'
export default {
data() {
return {
}
},
components: {
leftNav
},
mounted() {
},
methods: {
goUrl(path, id) {
this.$router.push({
path: "Details",
query: {
path,
id
}
})
},
}
}
</script>
\ No newline at end of file
src/components/public/leftNav.vue
View file @ 3d56bcce
<template>
<div class="leftNav">
<div class="singleMenUlayer" v-show="singleMenUlayerShow" >
<i class="iconfont icon-Close" @click="singleMenUlayerShow=false"></i>
<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>
<ul>
<li v-for="(item,index) in outItem.list" @click="goUrl(item.MenuUrl)">
<div>
<i :style="{background:item.MenuStyleColor}" :class="[fontPub,item.MenuStyleIcon]"></i>
</div>
{{item.MenuName}}
</li>
</ul>
</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 class="shortcutsDiv">
<div class="rgba"></div>
<p class="updateIcon"><i class="iconfont icon-Edit"></i></p>
<div class="shortcuts">
<li v-for="(item,index) in items" @click="showMenu(item)">
<div>
<i v-for="childItem in item.childerns" :style="{background:childItem.MenuStyleColor}" :class="[fontPub,childItem.MenuStyleIcon]"></i>
</div>
{{item.MenuName}}
</li>
</div>
</div>
</div>
<div class="leftNav">
<div class="singleMenUlayer" v-show="singleMenUlayerShow">
<i class="iconfont icon-Close" @click="singleMenUlayerShow=false"></i>
<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>
<ul>
<li v-for="(item,index) in outItem.list" @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="rgba"></div>
<p class="updateIcon"><i class="iconfont icon-Edit"></i></p>
<div class="shortcuts">
<li v-for="(item,index) in items" @click="showMenu(item)">
<div>
<i v-for="childItem in item.childerns" :style="{background:childItem.MenuStyleColor}"
:class="[fontPub,childItem.MenuStyleIcon]"></i>
</div>
{{item.MenuName}}
</li>
</div>
</div>
</div>
</template>
<script>
export default{
data(){
return{
items:[],
openId:0,
iconItems:[],
fontPub:'iconfont',
bigIconItems:[],
singleMenUlayerShow:false,
}
},
mounted(){
this.getMenu();
console.log(this.getLocalStorage())
},
methods:{
getMenu(){
this.menuList=this.getLocalStorage().UserMenu;
let path=this.$route.path.split('?')[0];
let root=0;
//找到Root
this.menuList.forEach(x=>{
if(x.MenuUrl==path){
root=x.RootId;
this.openId=x.ParentId;
return false
}
})
this.items=[];
let that=this;
this.menuList.forEach(rootItem=>{
if(rootItem.RootId==root){
rootItem.ChildMenu.forEach(secondItem=>{
secondItem.childerns=[];
let style=JSON.parse(secondItem.MenuStyle);
secondItem.MenuStyleIcon=style.icon;
secondItem.MenuStyleColor=style.color;
secondItem.ChildMenu.forEach(thirdItem=>{
if(thirdItem.RootId==root&&thirdItem.ParentId==secondItem.MenuId){
secondItem.childerns.push(thirdItem);
let style2=JSON.parse(thirdItem.MenuStyle);
thirdItem.MenuStyleIcon=style2.icon;
thirdItem.MenuStyleColor=style2.color;
}
})
that.items.push(secondItem)
});
}
})
},
showMenu(item){
this.singleMenUlayerShow=true;
this.bigIconItems=item.NewChildMenu;
this.bigIconItems.forEach(item=>{
item.list.forEach(x=>{
let obj=JSON.parse(x.MenuStyle);
x['MenuStyleIcon']=obj.icon
x['MenuStyleColor']=obj.color
})
})
},
goUrl (path) {
this.$router.push({ path:path})
},
},
}
export default {
data() {
return {
items: [],
openId: 0,
iconItems: [],
fontPub: 'iconfont',
bigIconItems: [],
singleMenUlayerShow: false,
}
},
mounted() {
this.getMenu();
},
methods: {
getMenu() {
this.menuList = this.getLocalStorage().UserMenu;
let path = this.$route.path.split('?')[0];
let root = 0;
//找到Root
this.menuList.forEach(x => {
if (x.MenuUrl == path) {
root = x.RootId;
this.openId = x.ParentId;
return false
}
})
this.items = [];
let that = this;
this.menuList.forEach(rootItem => {
if (rootItem.RootId == root) {
rootItem.ChildMenu.forEach(secondItem => {
secondItem.childerns = [];
let style = JSON.parse(secondItem.MenuStyle);
secondItem.MenuStyleIcon = style.icon;
secondItem.MenuStyleColor = style.color;
secondItem.ChildMenu.forEach(thirdItem => {
if (thirdItem.RootId == root && thirdItem.ParentId == secondItem.MenuId) {
secondItem.childerns.push(thirdItem);
let style2 = JSON.parse(thirdItem.MenuStyle);
thirdItem.MenuStyleIcon = style2.icon;
thirdItem.MenuStyleColor = style2.color;
}
})
that.items.push(secondItem)
});
}
})
},
showMenu(item) {
this.singleMenUlayerShow = true;
this.bigIconItems = item.NewChildMenu;
this.bigIconItems.forEach(item => {
item.list.forEach(x => {
let obj = JSON.parse(x.MenuStyle);
x['MenuStyleIcon'] = obj.icon
x['MenuStyleColor'] = obj.color
})
})
},
goUrl(path) {
this.$router.push({
path: path
})
},
},
}
</script>
<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::before {
content: "";
position: absolute;
filter: blur(20px);
z-index: -2;
}
.leftNav .shortcutsDiv .rgba {
background-color: rgba(114, 114, 114, 0.1);
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
.leftNav .shortcuts {
overflow: hidden;
}
.leftNav .shortcuts li {
font-size: 12px;
width: 70px;
height: 120px;
color: #666;
text-align: center;
}
.leftNav .shortcuts li>div {
width: 70px;
height: 70px;
padding: 10px 0;
background: #FFF;
border-radius: 28px;
margin: 10px 0;
overflow: hidden;
cursor: pointer;
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:nth-child(2n) {
margin-left: 5px;
}
.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;
}
.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::before{
content: "";
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);
z-index: -2;
}
.leftNav .shortcutsDiv .rgba{
background-color: rgba(114, 114, 114, 0.1);
position: absolute;
width:100%;
height:100%;
z-index: -1;
}
.leftNav .shortcuts{overflow: hidden;}
.leftNav .shortcuts li{font-size: 12px; width: 70px; height: 120px; color: #666; text-align: center;}
.leftNav .shortcuts li>div{
width: 70px;
height: 70px;
padding: 10px 0;
background: #FFF;
border-radius: 28px;
margin: 10px 0;
overflow: hidden;
cursor: pointer;
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:nth-child(2n){margin-left: 5px;}
.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>
\ No newline at end of file
</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