Skip to content

S
SuperMan
Commit 617ee6f2 authored by 罗超's avatar 罗超
Browse files
Options

1、修改导航栏，用户信息卡，左侧导航风格 

2、解决打开多个页面造成的遮挡和无法左右滚动的问题
parent d3ef6dab
Expand all Show whitespace changes
Inline Side-by-side
Showing with 421 additions and 228 deletions
src/assets/css/Details.css
View file @ 617ee6f2
.secondMenu { .secondMenu {
width: 50px; width: 50px;
margin: 0px 30px 0 0; margin: 0px 30px 0 0;
background: #38425D; background: #282733;
/* box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.09); */ /* box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.09); */
height: 100%; height: 100%;
max-height: 100%; max-height: 100%;
...@@ -9,39 +9,72 @@ ...@@ -9,39 +9,72 @@
overflow-x: hidden; overflow-x: hidden;
position: relative; position: relative;
transition: all linear .3s; transition: all linear .3s;
} }
.menuItem .el-submenu__title{
.secondMenu .el-submenu__title i {
color: #a3ace0;
font-size: 18px;
}
.el-menu--vertical .thridMenu {
height: 44px;
line-height: 44px;
}
.el-menu--vertical .thridMenu i {
font-size: 15px;
color: #a3ace0;
margin-right: 10px;
}
.el-menu--vertical .thridMenu:hover,
.el-menu--vertical .thridMenu:hover i {
color: #f1f1f1 !important;
}
.secondMenu .el-submenu__title:hover i {
color: #f1f1f1;
}
.menuItem .el-submenu__title {
padding: 0px !important; padding: 0px !important;
text-align: center; text-align: center;
} }
.menuItem .el-menu--collapse{
.menuItem .el-menu--collapse {
width: 51px; width: 51px;
} }
/* .secondMenu:hover{
/* .secondMenu:hover{
width: 200px; width: 200px;
} */ } */
.secondMenu::-webkit-scrollbar {
.secondMenu::-webkit-scrollbar {
width: 4px; width: 4px;
height: 8px; height: 8px;
} }
.secondMenu::-webkit-scrollbar-track {
.secondMenu::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
border-radius: 4px; border-radius: 4px;
background: #ededed; background: #ededed;
} }
.secondMenu::-webkit-scrollbar-thumb {
.secondMenu::-webkit-scrollbar-thumb {
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
background: #c9c9c9; background: #c9c9c9;
} }
.secondMenu .menuItem { .secondMenu .menuItem {
min-height: 40px; min-height: 40px;
font-size: 14px; font-size: 14px;
color: #333; color: #333;
overflow: hidden; overflow: hidden;
} }
.menuTop {
.menuTop {
padding-left: 20px; padding-left: 20px;
width: 200px; width: 200px;
height: 52px; height: 52px;
...@@ -50,8 +83,9 @@ ...@@ -50,8 +83,9 @@
text-align: left; text-align: left;
color: #fff; color: #fff;
margin-top: -2px; margin-top: -2px;
} }
.secondMenu .menuItem > p {
.secondMenu .menuItem>p {
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
height: 50px !important; height: 50px !important;
...@@ -60,12 +94,14 @@ ...@@ -60,12 +94,14 @@
background: #eaeaea; background: #eaeaea;
border-top: 1px solid #fafafa; border-top: 1px solid #fafafa;
position: relative; position: relative;
} }
.secondMenu .menuItem > p:hover {
.secondMenu .menuItem>p:hover {
background: #999; background: #999;
color: #fff; color: #fff;
} }
.secondMenu .menuItem .liDiv li {
.secondMenu .menuItem .liDiv li {
float: left; float: left;
padding: 10px 0 0 0; padding: 10px 0 0 0;
margin: 5px 0 5px 10px; margin: 5px 0 5px 10px;
...@@ -76,25 +112,29 @@ ...@@ -76,25 +112,29 @@
color: #333; color: #333;
height: 83px; height: 83px;
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
} }
.secondMenu .menuItem li.menuItem_level1{
.secondMenu .menuItem li.menuItem_level1 {
position: relative; position: relative;
} }
.liDiv {
.liDiv {
padding: 5px 0 20px 0; padding: 5px 0 20px 0;
overflow: hidden; overflow: hidden;
} }
.secondMenu .menuItem li img { .secondMenu .menuItem li img {
margin: 0 auto; margin: 0 auto;
display: block; display: block;
width: 55px; width: 55px;
height: 55px; height: 55px;
} }
.flexDiv .childBox {
.flexDiv .childBox {
text-align: center; text-align: center;
} }
.flexDiv .childBox i {
.flexDiv .childBox i {
font-size: 26px; font-size: 26px;
width: 56px; width: 56px;
height: 56px; height: 56px;
...@@ -106,55 +146,67 @@ ...@@ -106,55 +146,67 @@
text-indent: 0px; text-indent: 0px;
color: #fafafa; color: #fafafa;
margin-bottom: 5px; margin-bottom: 5px;
} }
.flexDiv .parentBox{
.flexDiv .parentBox {
cursor: pointer; cursor: pointer;
} }
.flexDiv .parentBox i {
.flexDiv .parentBox i {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
padding: 0 20px; padding: 0 20px;
} }
.flexDiv .parentBox i.small {
.flexDiv .parentBox i.small {
font-size: 12px; font-size: 12px;
font-weight: 300; font-weight: 300;
position: absolute; position: absolute;
top: 7px; top: 7px;
right: 0px; right: 0px;
} }
.resource-ttop {
.resource-ttop {
height: 40px; height: 40px;
border-bottom: 1px solid #ededed; border-bottom: 1px solid #ededed;
font-size: 14px; font-size: 14px;
line-height: 40px; line-height: 40px;
color: #333333; color: #333333;
} }
.resource-ttop i {
.resource-ttop i {
font-size: 12px; font-size: 12px;
color: #999; color: #999;
margin: 0 5px; margin: 0 5px;
} }
.secondMenu_l{
.secondMenu_l {
width: 200px; width: 200px;
} }
.menuItem .el-menu-item-group__title{
.menuItem .el-menu-item-group__title {
padding: 0; padding: 0;
} }
.flexParent{
.flexParent {
background: #f2f2f2; background: #f2f2f2;
} }
.my_maxheight {
.my_maxheight {
max-height: 600px; max-height: 600px;
overflow: auto; overflow: auto;
} }
.my_maxheight .el-menu-item-group__title { .my_maxheight .el-menu-item-group__title {
border-bottom: 1px solid #0f1522; border-bottom: 1px solid #0f1522;
} }
.my_maxheight .el-menu-item-group__title span { .my_maxheight .el-menu-item-group__title span {
font-size: 14px; font-size: 14px;
color: #ffffff; color: #ffffff;
font-family: "PingFangSC-fine"; font-family: "PingFangSC-fine";
} }
.my_maxheight::-webkit-scrollbar { .my_maxheight::-webkit-scrollbar {
/*滚动条整体样式*/ /*滚动条整体样式*/
width: 4px; width: 4px;
...@@ -175,29 +227,37 @@ ...@@ -175,29 +227,37 @@
border-radius: 4px; border-radius: 4px;
background: #38425d; background: #38425d;
} }
.el-menu--vertical{
.el-menu--vertical {
left: 46px !important; left: 46px !important;
} }
.big-icon { .big-icon {
font-size: 20px; font-size: 20px;
} }
.nav-tabs-box .el-tabs__header{
.nav-tabs-box .el-tabs__header {
margin: 0px; margin: 0px;
} }
.nav-tabs-box .el-tabs__nav-wrap::after{
.nav-tabs-box .el-tabs__nav-wrap::after {
background-color: #38425d; background-color: #38425d;
} }
.nav-tabs-box{
.nav-tabs-box {
margin: 0 -20px; margin: 0 -20px;
position: relative; position: relative;
} }
.nav-tabs-box .is-active{
.nav-tabs-box .is-active {
background: #f2f2f2; background: #f2f2f2;
} }
.nav-tabs-box .el-tabs{
.nav-tabs-box .el-tabs {
background: #f0f0f0; background: #f0f0f0;
} }
.browner-opera-box{
.browner-opera-box {
position: absolute; position: absolute;
width: 100px; width: 100px;
height: 40px; height: 40px;
...@@ -206,7 +266,8 @@ ...@@ -206,7 +266,8 @@
display: flex; display: flex;
padding: 5px; padding: 5px;
} }
.browner-opera-box i{
.browner-opera-box i {
display: block; display: block;
flex: 1; flex: 1;
font-size: 16px; font-size: 16px;
...@@ -216,21 +277,26 @@ ...@@ -216,21 +277,26 @@
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
} }
.browner-opera-box i.active{
color:#666; .browner-opera-box i.active {
color: #666;
} }
.browner-opera-box i.active:hover{
background:#ddd; .browner-opera-box i.active:hover {
background: #ddd;
border-radius: 30px; border-radius: 30px;
} }
.browner-opera-box i:last-child{
.browner-opera-box i:last-child {
margin-top: 1px; margin-top: 1px;
} }
.nav-tabs-box .el-tabs__nav-scroll{
padding-left:100px; .nav-tabs-box .el-tabs__nav-scroll {
/* padding-left:100px; */
} }
.right-menu{
border:1px solid #BABABA; .right-menu {
border: 1px solid #BABABA;
background: #ffffff; background: #ffffff;
position: absolute; position: absolute;
width: 200px; width: 200px;
...@@ -238,39 +304,47 @@ ...@@ -238,39 +304,47 @@
padding: 2px 0; padding: 2px 0;
z-index: 9999; z-index: 9999;
} }
.right-menu li{
.right-menu li {
margin: 0; margin: 0;
padding:5px 10px; padding: 5px 10px;
list-style: none; list-style: none;
display: block; display: block;
color:#000; color: #000;
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
} }
.right-menu li:hover{
.right-menu li:hover {
background: #eee; background: #eee;
} }
.right-menu li.disable{
.right-menu li.disable {
color: gray; color: gray;
cursor: default; cursor: default;
} }
.right-menu li.disable:hover{
.right-menu li.disable:hover {
background: none; background: none;
} }
.right-menu li.split{
padding:0; .right-menu li.split {
padding: 0;
margin: 5px 10px; margin: 5px 10px;
height: 1px; height: 1px;
background: #bababa; background: #bababa;
cursor: default; cursor: default;
} }
.right-menu li.split:hover{
.right-menu li.split:hover {
background: #bababa; background: #bababa;
} }
.nav-tabs-box .is-focus{
.nav-tabs-box .is-focus {
border: none; border: none;
outline: none; outline: none;
} }
.nav-tabs-box .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
.nav-tabs-box .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
border-bottom-color: #f2f2f2; border-bottom-color: #f2f2f2;
} }
\ No newline at end of file
src/components/Details.vue
View file @ 617ee6f2
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
<div class="menuItem" > <div class="menuItem" >
<el-menu <el-menu
default-active="" default-active=""
background-color="#38425D" background-color="#282733"
text-color="#8899AA" text-color="#a3ace0"
active-text-color="#FFFFFF" active-text-color="#FFFFFF"
class="el-menu-vertical-demo" :collapse="isCollapse"> class="el-menu-vertical-demo" :collapse="isCollapse">
<el-submenu v-for="(item,index) in items" :index="String(index+1)" :key='index'> <el-submenu v-for="(item,index) in items" :index="String(index+1)" :key='index'>
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
</template> </template>
<el-menu-item-group class="my_maxheight"> <el-menu-item-group class="my_maxheight">
<span slot="title">{{item.MenuName}}</span> <span slot="title">{{item.MenuName}}</span>
<el-menu-item v-for="(subItem,sindex) in item.childerns" :index="String(index+1)+'-'+String(sindex+1)" @click="goUrl(subItem.MenuUrl)" :key='sindex'> <el-menu-item class="thridMenu" v-for="(subItem,sindex) in item.childerns" :index="String(index+1)+'-'+String(sindex+1)" @click="goUrl(subItem.MenuUrl)" :key='sindex'>
<i :class="[fontPub,subItem.MenuStyleIcon]" ></i> <i :class="[fontPub,subItem.MenuStyleIcon]" ></i>
{{subItem.MenuName}}</el-menu-item> {{subItem.MenuName}}</el-menu-item>
</el-menu-item-group> </el-menu-item-group>
...@@ -45,12 +45,12 @@ ...@@ -45,12 +45,12 @@
{{rootName}}<i class="iconfont icon-weibiaoti102"></i>{{parentName}}<i class="iconfont icon-weibiaoti102"></i><span class="active">{{currentName}}</span> {{rootName}}<i class="iconfont icon-weibiaoti102"></i>{{parentName}}<i class="iconfont icon-weibiaoti102"></i><span class="active">{{currentName}}</span>
</div> --> </div> -->
<div class="nav-tabs-box" @contextmenu.prevent="showRightMenu"> <div class="nav-tabs-box" @contextmenu.prevent="showRightMenu" :style="{width:`${navWidth}px`}">
<el-tabs v-if='tabs && tabs.length>0' v-model="currentTabName" :closable="tabs.length>1" type="card" @edit="handleTabsEdit"> <el-tabs v-if='tabs && tabs.length>0' v-model="currentTabName" style="margin-left: 120px;" :closable="tabs.length>1" type="card" @edit="handleTabsEdit">
<el-tab-pane :key="i" v-for="(item,i) in tabs" :label="item.title" :name="item.name+'_'+i"> <el-tab-pane :key="i" v-for="(item,i) in tabs" :label="item.title" :name="item.name+'_'+i">
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<div class="browner-opera-box" v-if="currentTag.history&&currentTag.history.length>0"> <div class="browner-opera-box" v-if="currentTag.history&&currentTag.history.length>0" style="border-bottom: 1px solid #e4e7ed;">
<i class="iconfont icon-houtui" @click="goback(0)" :class="{'active':this.currentTag && this.currentTag.hisIndex>0}" title="后退"></i> <i class="iconfont icon-houtui" @click="goback(0)" :class="{'active':this.currentTag && this.currentTag.hisIndex>0}" title="后退"></i>
<i class="iconfont icon-qianjin" @click="goback(1)" :class="{'active':this.currentTag && this.currentTag.hisIndex<this.currentTag.history.length-1}" title="前进"></i> <i class="iconfont icon-qianjin" @click="goback(1)" :class="{'active':this.currentTag && this.currentTag.hisIndex<this.currentTag.history.length-1}" title="前进"></i>
<i class="iconfont icon-shuaxin1 active" @click="reloadpage" title="刷新"></i> <i class="iconfont icon-shuaxin1 active" @click="reloadpage" title="刷新"></i>
...@@ -106,7 +106,7 @@ export default { ...@@ -106,7 +106,7 @@ export default {
ctrlDown:false, ctrlDown:false,
openMode:0, openMode:0,
blankUrl:'', blankUrl:'',
navWidth:0,
}; };
}, },
components:{ components:{
...@@ -130,7 +130,25 @@ export default { ...@@ -130,7 +130,25 @@ export default {
window.localStorage.navTabs=JSON.stringify(newValue) window.localStorage.navTabs=JSON.stringify(newValue)
}, },
deep: true deep: true
　　} 　　},
currentTag:{
handler(newValue, oldValue) {
setTimeout(() => {
document.querySelectorAll('.frame-box').forEach(x=>{
if(x.style.display!='none'){
let opContents=x.querySelectorAll(".query-box ul li");
console.log(opContents)
if(opContents && opContents.length>0){
this.navWidth=document.querySelector(".flexParent").offsetWidth-opContents[opContents.length-1].offsetWidth-50
}else{
this.navWidth=document.querySelector(".flexParent").offsetWidth-20;
}
}
})
}, 300);
},
deep: true
}
}, },
mounted() { mounted() {
this.openMode=0 this.openMode=0
...@@ -142,6 +160,7 @@ export default { ...@@ -142,6 +160,7 @@ export default {
this.MsgBus.$on('refresh', ()=> { this.MsgBus.$on('refresh', ()=> {
this.reloadpage() this.reloadpage()
}); });
this.navWidth=document.querySelector(".flexParent").offsetWidth;
// this.MsgBus.$on('forEachLoc', ()=> { // this.MsgBus.$on('forEachLoc', ()=> {
// let obj = {} // let obj = {}
// let LocNavTab = JSON.parse(window.localStorage.navTabs); // let LocNavTab = JSON.parse(window.localStorage.navTabs);
......
src/components/index.vue
View file @ 617ee6f2
This diff is collapsed.
src/components/personalCenter.vue
View file @ 617ee6f2
<template> <template>
<div class="personal" :style="{zoom:zoom}"> <div class="personal" :style="{zoom:zoom}">
<div class="u-box"> <div class="u-box">
<div class="left-point"></div> <!-- <div class="left-point"></div>
<div class="right-point"></div> <div class="right-point"></div> -->
<div class="h-info-box"> <div class="h-info-box">
<div class="h-info"> <div class="h-info">
<div class="k">姓名</div> <div class="k">姓名</div>
...@@ -166,23 +166,26 @@ export default { ...@@ -166,23 +166,26 @@ export default {
/* background: #000; */ /* background: #000; */
background: #0a0919 url("../assets/img/persion/bg.png") 100% 100%; background: #0a0919 url("../assets/img/persion/bg.png") 100% 100%;
position: relative; position: relative;
background: #282733;
} }
.personal .u-box { .personal .u-box {
width: 300px; width: 300px;
position: absolute; position: absolute;
background: #19133e6e; background: #19133e6e;
left: 30px; left: 0px;
top: 30px; top: 0;
bottom: 30px; bottom: 0;
border: 1px solid #2c2739; border: 1px solid #2c2739;
} }
.personal .c-box { .personal .c-box {
position: absolute; position: absolute;
left: 360px; left: 300px;
top: 30px; top: 0;
bottom: 30px; bottom: 0;
right: 30px; right: 0;
display: flex; display: flex;
background:rgba(242,243,248,1);
padding: 20px;
} }
.personal .c-box .fince{ .personal .c-box .fince{
width: 400px; width: 400px;
......
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