Skip to content

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

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

2、解决打开多个页面造成的遮挡和无法左右滚动的问题
parent d3ef6dab
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 421 additions and 228 deletions
src/assets/css/Details.css
View file @ 617ee6f2
.secondMenu {
width: 50px;
margin: 0px 30px 0 0;
background: #38425D;
background: #282733;
/* box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.09); */
height: 100%;
max-height: 100%;
......@@ -9,39 +9,72 @@
overflow-x: hidden;
position: relative;
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;
text-align: center;
}
.menuItem .el-menu--collapse{
}
.menuItem .el-menu--collapse {
width: 51px;
}
/* .secondMenu:hover{
}
/* .secondMenu:hover{
width: 200px;
} */
.secondMenu::-webkit-scrollbar {
.secondMenu::-webkit-scrollbar {
width: 4px;
height: 8px;
}
.secondMenu::-webkit-scrollbar-track {
}
.secondMenu::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
border-radius: 4px;
background: #ededed;
}
.secondMenu::-webkit-scrollbar-thumb {
}
.secondMenu::-webkit-scrollbar-thumb {
border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
background: #c9c9c9;
}
.secondMenu .menuItem {
}
.secondMenu .menuItem {
min-height: 40px;
font-size: 14px;
color: #333;
overflow: hidden;
}
.menuTop {
}
.menuTop {
padding-left: 20px;
width: 200px;
height: 52px;
......@@ -50,8 +83,9 @@
text-align: left;
color: #fff;
margin-top: -2px;
}
.secondMenu .menuItem > p {
}
.secondMenu .menuItem>p {
font-size: 14px;
cursor: pointer;
height: 50px !important;
......@@ -60,12 +94,14 @@
background: #eaeaea;
border-top: 1px solid #fafafa;
position: relative;
}
.secondMenu .menuItem > p:hover {
}
.secondMenu .menuItem>p:hover {
background: #999;
color: #fff;
}
.secondMenu .menuItem .liDiv li {
}
.secondMenu .menuItem .liDiv li {
float: left;
padding: 10px 0 0 0;
margin: 5px 0 5px 10px;
......@@ -76,25 +112,29 @@
color: #333;
height: 83px;
background: rgba(255, 255, 255, 1);
}
.secondMenu .menuItem li.menuItem_level1{
}
.secondMenu .menuItem li.menuItem_level1 {
position: relative;
}
.liDiv {
}
.liDiv {
padding: 5px 0 20px 0;
overflow: hidden;
}
}
.secondMenu .menuItem li img {
.secondMenu .menuItem li img {
margin: 0 auto;
display: block;
width: 55px;
height: 55px;
}
.flexDiv .childBox {
}
.flexDiv .childBox {
text-align: center;
}
.flexDiv .childBox i {
}
.flexDiv .childBox i {
font-size: 26px;
width: 56px;
height: 56px;
......@@ -106,171 +146,205 @@
text-indent: 0px;
color: #fafafa;
margin-bottom: 5px;
}
.flexDiv .parentBox{
cursor: pointer;
}
.flexDiv .parentBox i {
}
.flexDiv .parentBox {
cursor: pointer;
}
.flexDiv .parentBox i {
font-size: 18px;
font-weight: bold;
padding: 0 20px;
}
.flexDiv .parentBox i.small {
}
.flexDiv .parentBox i.small {
font-size: 12px;
font-weight: 300;
position: absolute;
top: 7px;
right: 0px;
}
.resource-ttop {
}
.resource-ttop {
height: 40px;
border-bottom: 1px solid #ededed;
font-size: 14px;
line-height: 40px;
color: #333333;
}
.resource-ttop i {
}
.resource-ttop i {
font-size: 12px;
color: #999;
margin: 0 5px;
}
.secondMenu_l{
}
.secondMenu_l {
width: 200px;
}
.menuItem .el-menu-item-group__title{
}
.menuItem .el-menu-item-group__title {
padding: 0;
}
.flexParent{
}
.flexParent {
background: #f2f2f2;
}
.my_maxheight {
max-height: 600px;
overflow: auto;
}
.my_maxheight {
max-height: 600px;
overflow: auto;
}
.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 {
font-size: 14px;
color: #ffffff;
font-family: "PingFangSC-fine";
font-size: 14px;
color: #ffffff;
font-family: "PingFangSC-fine";
}
.my_maxheight::-webkit-scrollbar {
/*滚动条整体样式*/
width: 4px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 8px;
/*滚动条整体样式*/
width: 4px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 8px;
}
.my_maxheight::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
background: #1f2533;
/*滚动条里面小方块*/
border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
background: #1f2533;
}
.my_maxheight::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
border-radius: 4px;
background: #38425d;
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
border-radius: 4px;
background: #38425d;
}
.el-menu--vertical{
left: 46px !important;
.el-menu--vertical {
left: 46px !important;
}
.big-icon {
font-size: 20px;
}
.nav-tabs-box .el-tabs__header{
margin: 0px;
}
.nav-tabs-box .el-tabs__nav-wrap::after{
background-color: #38425d;
}
.nav-tabs-box{
margin: 0 -20px;
position: relative;
}
.nav-tabs-box .is-active{
background: #f2f2f2;
}
.nav-tabs-box .el-tabs{
background: #f0f0f0;
}
.browner-opera-box{
position: absolute;
width: 100px;
height: 40px;
left: 0;
top: 0;
display: flex;
padding: 5px;
}
.browner-opera-box i{
display: block;
flex: 1;
font-size: 16px;
color: #CCC;
text-align: center;
cursor: default;
height: 30px;
line-height: 30px;
}
.browner-opera-box i.active{
color:#666;
}
.browner-opera-box i.active:hover{
background:#ddd;
border-radius: 30px;
}
.browner-opera-box i:last-child{
margin-top: 1px;
}
.nav-tabs-box .el-tabs__nav-scroll{
padding-left:100px;
}
.right-menu{
border:1px solid #BABABA;
background: #ffffff;
position: absolute;
width: 200px;
margin: 0;
padding: 2px 0;
z-index: 9999;
}
.right-menu li{
margin: 0;
padding:5px 10px;
list-style: none;
display: block;
color:#000;
font-size: 12px;
cursor: pointer;
}
.right-menu li:hover{
background: #eee;
}
.right-menu li.disable{
color: gray;
cursor: default;
}
.right-menu li.disable:hover{
background: none;
}
.right-menu li.split{
padding:0;
margin: 5px 10px;
height: 1px;
background: #bababa;
cursor: default;
}
.right-menu li.split:hover{
background: #bababa;
}
.nav-tabs-box .is-focus{
border: none;
outline: none;
}
.nav-tabs-box .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
border-bottom-color: #f2f2f2;
font-size: 20px;
}
.nav-tabs-box .el-tabs__header {
margin: 0px;
}
.nav-tabs-box .el-tabs__nav-wrap::after {
background-color: #38425d;
}
.nav-tabs-box {
margin: 0 -20px;
position: relative;
}
.nav-tabs-box .is-active {
background: #f2f2f2;
}
.nav-tabs-box .el-tabs {
background: #f0f0f0;
}
.browner-opera-box {
position: absolute;
width: 100px;
height: 40px;
left: 0;
top: 0;
display: flex;
padding: 5px;
}
.browner-opera-box i {
display: block;
flex: 1;
font-size: 16px;
color: #CCC;
text-align: center;
cursor: default;
height: 30px;
line-height: 30px;
}
.browner-opera-box i.active {
color: #666;
}
.browner-opera-box i.active:hover {
background: #ddd;
border-radius: 30px;
}
.browner-opera-box i:last-child {
margin-top: 1px;
}
.nav-tabs-box .el-tabs__nav-scroll {
/* padding-left:100px; */
}
.right-menu {
border: 1px solid #BABABA;
background: #ffffff;
position: absolute;
width: 200px;
margin: 0;
padding: 2px 0;
z-index: 9999;
}
.right-menu li {
margin: 0;
padding: 5px 10px;
list-style: none;
display: block;
color: #000;
font-size: 12px;
cursor: pointer;
}
.right-menu li:hover {
background: #eee;
}
.right-menu li.disable {
color: gray;
cursor: default;
}
.right-menu li.disable:hover {
background: none;
}
.right-menu li.split {
padding: 0;
margin: 5px 10px;
height: 1px;
background: #bababa;
cursor: default;
}
.right-menu li.split:hover {
background: #bababa;
}
.nav-tabs-box .is-focus {
border: none;
outline: none;
}
.nav-tabs-box .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
border-bottom-color: #f2f2f2;
}
\ No newline at end of file
src/components/Details.vue
View file @ 617ee6f2
......@@ -8,8 +8,8 @@
<div class="menuItem" >
<el-menu
default-active=""
background-color="#38425D"
text-color="#8899AA"
background-color="#282733"
text-color="#a3ace0"
active-text-color="#FFFFFF"
class="el-menu-vertical-demo" :collapse="isCollapse">
<el-submenu v-for="(item,index) in items" :index="String(index+1)" :key='index'>
......@@ -19,7 +19,7 @@
</template>
<el-menu-item-group class="my_maxheight">
<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>
{{subItem.MenuName}}</el-menu-item>
</el-menu-item-group>
......@@ -45,12 +45,12 @@
{{rootName}}<i class="iconfont icon-weibiaoti102"></i>{{parentName}}<i class="iconfont icon-weibiaoti102"></i><span class="active">{{currentName}}</span>
</div> -->
<div class="nav-tabs-box" @contextmenu.prevent="showRightMenu">
<el-tabs v-if='tabs && tabs.length>0' v-model="currentTabName" :closable="tabs.length>1" type="card" @edit="handleTabsEdit">
<div class="nav-tabs-box" @contextmenu.prevent="showRightMenu" :style="{width:`${navWidth}px`}">
<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>
</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-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>
......@@ -106,7 +106,7 @@ export default {
ctrlDown:false,
openMode:0,
blankUrl:'',
navWidth:0,
};
},
components:{
......@@ -130,7 +130,25 @@ export default {
window.localStorage.navTabs=JSON.stringify(newValue)
},
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() {
this.openMode=0
......@@ -142,6 +160,7 @@ export default {
this.MsgBus.$on('refresh', ()=> {
this.reloadpage()
});
this.navWidth=document.querySelector(".flexParent").offsetWidth;
// this.MsgBus.$on('forEachLoc', ()=> {
// let obj = {}
// 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>
<div class="personal" :style="{zoom:zoom}">
<div class="u-box">
<div class="left-point"></div>
<div class="right-point"></div>
<!-- <div class="left-point"></div>
<div class="right-point"></div> -->
<div class="h-info-box">
<div class="h-info">
<div class="k">姓名</div>
......@@ -166,23 +166,26 @@ export default {
/* background: #000; */
background: #0a0919 url("../assets/img/persion/bg.png") 100% 100%;
position: relative;
background: #282733;
}
.personal .u-box {
width: 300px;
position: absolute;
background: #19133e6e;
left: 30px;
top: 30px;
bottom: 30px;
left: 0px;
top: 0;
bottom: 0;
border: 1px solid #2c2739;
}
.personal .c-box {
position: absolute;
left: 360px;
top: 30px;
bottom: 30px;
right: 30px;
left: 300px;
top: 0;
bottom: 0;
right: 0;
display: flex;
background:rgba(242,243,248,1);
padding: 20px;
}
.personal .c-box .fince{
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