Skip to content

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

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

2、解决打开多个页面造成的遮挡和无法左右滚动的问题
parent d3ef6dab
Hide 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,171 +146,205 @@ ...@@ -106,171 +146,205 @@
text-indent: 0px; text-indent: 0px;
color: #fafafa; color: #fafafa;
margin-bottom: 5px; margin-bottom: 5px;
} }
.flexDiv .parentBox{
cursor: pointer; .flexDiv .parentBox {
} 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 {
max-height: 600px;
overflow: auto;
} }
.my_maxheight {
max-height: 600px;
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;
/*高宽分别对应横竖滚动条的尺寸*/ /*高宽分别对应横竖滚动条的尺寸*/
height: 8px; height: 8px;
} }
.my_maxheight::-webkit-scrollbar-thumb { .my_maxheight::-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: #1f2533; background: #1f2533;
} }
.my_maxheight::-webkit-scrollbar-track { .my_maxheight::-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: #38425d; background: #38425d;
} }
.el-menu--vertical{
left: 46px !important; .el-menu--vertical {
left: 46px !important;
} }
.big-icon { .big-icon {
font-size: 20px; font-size: 20px;
} }
.nav-tabs-box .el-tabs__header{
margin: 0px; .nav-tabs-box .el-tabs__header {
} margin: 0px;
.nav-tabs-box .el-tabs__nav-wrap::after{ }
background-color: #38425d;
} .nav-tabs-box .el-tabs__nav-wrap::after {
.nav-tabs-box{ background-color: #38425d;
margin: 0 -20px; }
position: relative;
} .nav-tabs-box {
.nav-tabs-box .is-active{ margin: 0 -20px;
background: #f2f2f2; position: relative;
} }
.nav-tabs-box .el-tabs{
background: #f0f0f0; .nav-tabs-box .is-active {
} background: #f2f2f2;
.browner-opera-box{ }
position: absolute;
width: 100px; .nav-tabs-box .el-tabs {
height: 40px; background: #f0f0f0;
left: 0; }
top: 0;
display: flex; .browner-opera-box {
padding: 5px; position: absolute;
} width: 100px;
.browner-opera-box i{ height: 40px;
display: block; left: 0;
flex: 1; top: 0;
font-size: 16px; display: flex;
color: #CCC; padding: 5px;
text-align: center; }
cursor: default;
height: 30px; .browner-opera-box i {
line-height: 30px; display: block;
} flex: 1;
.browner-opera-box i.active{ font-size: 16px;
color:#666; color: #CCC;
} text-align: center;
.browner-opera-box i.active:hover{ cursor: default;
background:#ddd; height: 30px;
border-radius: 30px; line-height: 30px;
} }
.browner-opera-box i:last-child{
margin-top: 1px; .browner-opera-box i.active {
} color: #666;
.nav-tabs-box .el-tabs__nav-scroll{ }
padding-left:100px;
} .browner-opera-box i.active:hover {
.right-menu{ background: #ddd;
border:1px solid #BABABA; border-radius: 30px;
background: #ffffff; }
position: absolute;
width: 200px; .browner-opera-box i:last-child {
margin: 0; margin-top: 1px;
padding: 2px 0; }
z-index: 9999;
} .nav-tabs-box .el-tabs__nav-scroll {
.right-menu li{ /* padding-left:100px; */
margin: 0; }
padding:5px 10px;
list-style: none; .right-menu {
display: block; border: 1px solid #BABABA;
color:#000; background: #ffffff;
font-size: 12px; position: absolute;
cursor: pointer; width: 200px;
} margin: 0;
.right-menu li:hover{ padding: 2px 0;
background: #eee; z-index: 9999;
} }
.right-menu li.disable{
color: gray; .right-menu li {
cursor: default; margin: 0;
} padding: 5px 10px;
.right-menu li.disable:hover{ list-style: none;
background: none; display: block;
} color: #000;
.right-menu li.split{ font-size: 12px;
padding:0; cursor: pointer;
margin: 5px 10px; }
height: 1px;
background: #bababa; .right-menu li:hover {
cursor: default; background: #eee;
} }
.right-menu li.split:hover{
background: #bababa; .right-menu li.disable {
} color: gray;
.nav-tabs-box .is-focus{ cursor: default;
border: none; }
outline: none;
} .right-menu li.disable:hover {
.nav-tabs-box .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{ background: none;
border-bottom-color: #f2f2f2; }
.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 @@ ...@@ -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
...@@ -14,9 +14,9 @@ ...@@ -14,9 +14,9 @@
</span> </span>
<div class="hoverNote"></div> <div class="hoverNote"></div>
<!--<div :class="{menuList_son:item.ChildMenu.length>=1}" :style="{width:item.ChildMenu.length>=1 ? ((item.ChildMenu.length*160) + 'px') : '0',left: item.ChildMenu.length>1 ? '-50%' : '0'}" @click.stop>--> <!--<div :class="{menuList_son:item.ChildMenu.length>=1}" :style="{width:item.ChildMenu.length>=1 ? ((item.ChildMenu.length*160) + 'px') : '0',left: item.ChildMenu.length>1 ? '-50%' : '0'}" @click.stop>-->
<div :class="{menuList_son:item.ChildMenu.length>=1}" :style="{width:item.ChildMenu.length>=1 ? '1300px' : '0',left:'50px'}" @click.stop> <div :class="{menuList_son:item.ChildMenu.length>=1}" :style="{width:item.ChildMenu.length>=1 ? '1300px' : '0',left:'50px'}" style='border: 1px solid #eee;border-top:none;' @click.stop>
<div class="menuList_son_item" @mousemove.stop @mouseout.stop> <div class="menuList_son_item" @mousemove.stop @mouseout.stop>
<div v-for="(son, sIndex) in item.ChildMenu" style="width: 150px;margin-right: 20px"> <div v-for="(son, sIndex) in item.ChildMenu" style="width: 150px;border-right: 1px solid rgb(246, 246, 249);">
<p class="menuList_son_one_tittle"> <p class="menuList_son_one_tittle">
{{son.MenuName}} {{son.MenuName}}
<span class="MenuConfirm" v-if="son.childCount>0">{{son.childCount}}</span> <span class="MenuConfirm" v-if="son.childCount>0">{{son.childCount}}</span>
...@@ -34,10 +34,10 @@ ...@@ -34,10 +34,10 @@
</div> </div>
</div> </div>
</li> </li>
<li style="width:65px;height:50px;line-height: 50px;padding: 0"> <li style="width:65px;height:50px;line-height: 50px;padding: 0;font-size: 15px;font-family: pingfangR;">
<el-dropdown trigger="hover"> <el-dropdown trigger="hover">
<span class="el-dropdown-link" style="cursor: pointer;display: block;height: 100%;width: 100%;"> <span class="el-dropdown-link" style="cursor: pointer;display: block;height: 100%;width: 100%;">
<span style="color: #a6adb4;"><i class="iconfont icon-biaoge" style="margin-right: 5px;"></i>更多</span> <span style="color: #a6adb4;"><i class="iconfont icon-biaoge" style="margin-right: 5px;font-size:13px"></i>更多</span>
</span> </span>
<el-dropdown-menu slot="dropdown" class="_dropdown _more_dropdown"> <el-dropdown-menu slot="dropdown" class="_dropdown _more_dropdown">
<el-dropdown-item class="clearfix _dropdown_other" v-for="(item,index) in menuList" :key="index" v-if="item.MenuUrl!='' && index>maxLength" @click.native="goUrl(item.MenuUrl,item.MenuId,index)"> <el-dropdown-item class="clearfix _dropdown_other" v-for="(item,index) in menuList" :key="index" v-if="item.MenuUrl!='' && index>maxLength" @click.native="goUrl(item.MenuUrl,item.MenuId,index)">
...@@ -77,45 +77,64 @@ ...@@ -77,45 +77,64 @@
<div class="el-dropdown-link"> <div class="el-dropdown-link">
<img v-if="userInfo.UserPhoto!='' " :src="userInfo.UserPhoto" :onerror='defaultHeadImg' /> <img v-if="userInfo.UserPhoto!='' " :src="userInfo.UserPhoto" :onerror='defaultHeadImg' />
<img v-else src="../assets/img/default_head_img.jpg" /> <img v-else src="../assets/img/default_head_img.jpg" />
<span class="name" :title="userInfo.emName">{{userInfo.emName}}</span> <!-- <span class="name" :title="userInfo.emName">{{userInfo.emName}}</span> -->
</div> </div>
<el-dropdown-menu slot="dropdown" class="_dropdown _more_dropdown"> <el-dropdown-menu slot="dropdown" class="_dropdown _more_dropdown" style="width:320px">
<el-dropdown-item class="_dropdown_f1"> <el-dropdown-item class="_dropdown_f1">
<p class="company"><span>{{userInfo.BranchName}} </span><span>{{userInfo.PostName}}</span> </p> <!-- <p class="company"><span>{{userInfo.BranchName}} </span><span>{{userInfo.PostName}}</span> </p> -->
<div class="h-info-box">
<div class="h-info">
<div class="k">姓名</div>
<div class="v">{{userInfo.emName}}</div>
<div class="k">职务</div>
<div class="v">{{userInfo.PostName}}</div>
</div>
<div class="h-img">
<div class="left-point-samll"></div>
<div class="right-point-samll"></div>
<img :src="userInfo.Icon" :onerror="defaultHeadImg">
</div>
</div>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item class="clearfix _dropdown_other" v-if='firstMenuList.indexOf("财务单")!==-1' @click.native="goUrlT('FinancialDocuments',3,'财务单据')"> <el-dropdown-item class="clearfix _dropdown_other" v-if='firstMenuList.indexOf("财务单")!==-1' @click.native="goUrlT('FinancialDocuments',3,'财务单据')">
<i class="iconfont icon-nav-caiwu"></i> <i class="iconfont icon-nav-caiwu" style="color:#8e44ad"></i>
财务单 财务单
<el-badge class="mark" :value="NotDealCount?NotDealCount:'0'" /> <el-badge class="mark" :value="NotDealCount?NotDealCount:'0'" />
<i class="iconfont icon-right1"></i>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item class="clearfix _dropdown_other" v-if='firstMenuList.indexOf("考勤")!==-1' @click.native="goUrlT('myApproval',-1,'考勤')"> <el-dropdown-item class="clearfix _dropdown_other" v-if='firstMenuList.indexOf("考勤")!==-1' @click.native="goUrlT('myApproval',-1,'考勤')">
<i class="iconfont icon-menu-kaoqin"></i> <i class="iconfont icon-menu-kaoqin" style="color:#27ae60"></i>
考勤 考勤
<el-badge class="mark" :value="MyAuditCount?MyAuditCount:'0'" /> <el-badge class="mark" :value="MyAuditCount?MyAuditCount:'0'" />
<i class="iconfont icon-right1"></i>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item class="clearfix _dropdown_other" v-if='firstMenuList.indexOf("企业云盘")!==-1' @click.native="goUrlT('myDocuments',-1,'企业云盘')"> <el-dropdown-item class="clearfix _dropdown_other" v-if='firstMenuList.indexOf("企业云盘")!==-1' @click.native="goUrlT('myDocuments',-1,'企业云盘')">
<i class="iconfont icon-menu-yunpan"></i> <i class="iconfont icon-menu-yunpan" style="color:#2980b9"></i>
企业云盘 企业云盘
<i class="iconfont icon-right1"></i>
</el-dropdown-item> </el-dropdown-item>
<!-- <el-dropdown-item class="clearfix _dropdown_other" v-if='firstMenuList.indexOf("知识圈")' @click.native="zhishiquan"> <!-- <el-dropdown-item class="clearfix _dropdown_other" v-if='firstMenuList.indexOf("知识圈")' @click.native="zhishiquan">
<i class="iconfont icon-menu-zhishiquan"></i> <i class="iconfont icon-menu-zhishiquan"></i>
知识圈 知识圈
</el-dropdown-item> --> </el-dropdown-item> -->
<el-dropdown-item class="clearfix _dropdown_other" v-if='firstMenuList.indexOf("常用付款对象")' @click.native="goUrlPayment()"> <el-dropdown-item class="clearfix _dropdown_other" v-if='firstMenuList.indexOf("常用付款对象")' @click.native="goUrlPayment()">
<i class="iconfont icon-menu-zhishiquan"></i> <i class="iconfont icon-menu-zhishiquan" style="color:#f39c12"></i>
常用付款对象 常用付款对象
<i class="iconfont icon-right1"></i>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item class="clearfix _dropdown_other" @click.native="settingSys"> <el-dropdown-item class="clearfix _dropdown_other" @click.native="settingSys">
<i class="iconfont icon-menu-shezhi1"></i> <i class="iconfont icon-menu-shezhi1" style="color:#2c3e50"></i>
设置 设置
<i class="iconfont icon-right1"></i>
</el-dropdown-item> </el-dropdown-item>
<!-- <el-dropdown-item class="clearfix _dropdown_other"> <!-- <el-dropdown-item class="clearfix _dropdown_other">
<i class="iconfont icon-menu-shezhi"></i> <i class="iconfont icon-menu-shezhi"></i>
设置 设置
</el-dropdown-item> --> </el-dropdown-item> -->
<el-dropdown-item class="clearfix _dropdown_other" @click.native ="exit"> <el-dropdown-item class="clearfix _dropdown_other" @click.native ="exit">
<i class="iconfont icon-menu-tuichu"></i> <i class="iconfont icon-menu-tuichu" style="color:#c0392b"></i>
退出 退出
<i class="iconfont icon-right1"></i>
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
...@@ -1463,7 +1482,7 @@ export default { ...@@ -1463,7 +1482,7 @@ export default {
//IM_body //IM_body
let allWindowWidth = window.innerWidth; let allWindowWidth = window.innerWidth;
this.allWindowWidth = allWindowWidth - 50 - 220 - 60; this.allWindowWidth = allWindowWidth - 50 - 220 - 60;
let maxLength = parseInt(allWindowWidth/100); let maxLength = parseInt(allWindowWidth/110);
this.maxLength = maxLength; this.maxLength = maxLength;
}, },
watch: { watch: {
...@@ -3602,7 +3621,7 @@ export default { ...@@ -3602,7 +3621,7 @@ export default {
color:#000000; color:#000000;
position: absolute; position: absolute;
right: 10px; right: 10px;
font-size: 14px; font-size: 12px;
} }
.changelanguage .el-dropdown-menu__item{ .changelanguage .el-dropdown-menu__item{
padding:0; padding:0;
...@@ -3617,18 +3636,63 @@ export default { ...@@ -3617,18 +3636,63 @@ export default {
} }
._dropdown.el-dropdown-menu { ._dropdown.el-dropdown-menu {
padding: 0; padding: 0;
background-color: #1f2533 !important; background-color: #FFF !important;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
width: 210px; width: 210px;
top: 40px !important; top: 40px !important;
box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
} }
._dropdown_f1.el-dropdown-menu__item { ._dropdown_f1.el-dropdown-menu__item {
background-color: #4d515b !important;
color: #ffffff !important; color: #ffffff !important;
cursor: default; height: 120px;
height: 50px; background: url("../assets/img/persion/bg-1.jpg");
line-height: 50px; background-size: cover;
background-repeat: no-repeat;
}
._dropdown_f1 .h-info-box {
display: flex;
}
._dropdown_f1 .h-info-box .h-info {
flex: 1;
}
._dropdown_f1 .h-info-box .h-info .k {
color: #8a8894;
height: 16px;
line-height: 16px;
font-size: 14px;
font-family: "pingfangR";
text-align: right;
display: block;
margin-top: 10px;
}
._dropdown_f1 .h-info-box .h-info .v {
color: #ddd;
// height: 20;
line-height: 18px;
font-size: 18px;
font-family: "pingfangR";
text-align: right;
display: block;
margin-top: 10px;
}
._dropdown_f1 .h-info-box .h-img {
width: 100px;
height: 100px;
position: relative;
align-items: center;
justify-content: center;
margin-left: 20px;
display: flex;
margin-top: 10px;
background: rgba(44,39,57,.3);
border-radius: 100px;
}
._dropdown_f1 .h-info-box .h-img img {
width: 82px;
height: 82px;
border-radius: 82px;
} }
._dropdown_f1.el-dropdown-menu__item .company { ._dropdown_f1.el-dropdown-menu__item .company {
font-size: 14px; font-size: 14px;
...@@ -3649,24 +3713,33 @@ export default { ...@@ -3649,24 +3713,33 @@ export default {
background-color: #4d515b !important; background-color: #4d515b !important;
color: #ffffff !important; color: #ffffff !important;
} }
._dropdown_other{
line-height: 42px !important;
}
._dropdown_other.el-dropdown-menu__item { ._dropdown_other.el-dropdown-menu__item {
color: #a9aaad; color: #6c7293;
position: relative; position: relative;
} }
._dropdown_other.el-dropdown-menu__item .el-badge { ._dropdown_other.el-dropdown-menu__item .el-badge {
position: absolute; position: absolute;
right: 20px; right: 35px;
top: 5px; top: 5px;
} }
._dropdown_other.el-dropdown-menu__item .icon-right1 {
position: absolute;
right: 4px;
top: 3px;
font-size: 12px;
}
._dropdown_other.el-dropdown-menu__item i { ._dropdown_other.el-dropdown-menu__item i {
color: #a9aaad;
display: inline-block; display: inline-block;
margin-right: 6px; margin-right: 6px;
} }
._dropdown_other.el-dropdown-menu__item:hover, ._dropdown_other.el-dropdown-menu__item:hover,
._dropdown_other.el-dropdown-menu__item:focus { ._dropdown_other.el-dropdown-menu__item:focus {
background-color: #6f737b !important; transition: background-color 0.3s ease;
color: #ffffff !important; background-color: #f7f8fa;
color:#5d78ff;
} }
._dropdown .popper__arrow::after { ._dropdown .popper__arrow::after {
border-bottom-color: transparent !important; border-bottom-color: transparent !important;
...@@ -3868,12 +3941,13 @@ export default { ...@@ -3868,12 +3941,13 @@ export default {
width: 24px; width: 24px;
height: 24px; height: 24px;
border-radius: 50%; border-radius: 50%;
margin-top: 13px;
} }
.nav { .nav {
display: -webkit-box; display: -webkit-box;
.size(100%, 50px); .size(100%, 50px);
.min-width(1366px); .min-width(1366px);
background: #1f2533; background: #1f1e2e;
} }
.nav-left { .nav-left {
width: 56px; width: 56px;
...@@ -3922,7 +3996,7 @@ export default { ...@@ -3922,7 +3996,7 @@ export default {
.hover-bg(#f1f1f1); .hover-bg(#f1f1f1);
color: #a6adb4; color: #a6adb4;
position: relative; position: relative;
padding: 12px 0; padding: 12px 10px;
float: left; float: left;
z-index: 2019128; z-index: 2019128;
} }
...@@ -3939,7 +4013,7 @@ export default { ...@@ -3939,7 +4013,7 @@ export default {
width: 1000px; width: 1000px;
z-index: 999999; z-index: 999999;
opacity: 1; opacity: 1;
padding: 20px 0 20px 20px; // padding: 20px 0 20px 20px;
height: auto; height: auto;
// transition: all .5s linear .5s; // transition: all .5s linear .5s;
animation:ttt .5s forwards; animation:ttt .5s forwards;
...@@ -3958,44 +4032,64 @@ export default { ...@@ -3958,44 +4032,64 @@ export default {
.nav-middle ul li .menuList_son{ .nav-middle ul li .menuList_son{
position: fixed; position: fixed;
z-index: 9000; z-index: 9000;
background-color: #363c4a; background-color: #FFF;
top: 50px; top: 50px;
// display: none; // display: none;
opacity: 0; opacity: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
height: 0; height: 0;
box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
} }
.menuList_tittle_box{ .menuList_tittle_box{
line-height: 30px; line-height: 30px;
padding-top: 15px; // padding-top: 15px;
} }
.menuList_son_one_tittle{ .menuList_son_one_tittle{
color: #a6adb4; color: #5f6281;
font-size: 16px; font-size: 16px;
padding-bottom: 15px; padding-bottom: 15px;
border-bottom: 1px solid #495165; /* border-bottom: 1px solid #495165; */
text-align: left; text-align: left;
padding: 9px 10px;
font-family: "pingfangR";
} }
.menuList_son_two_tittle{ .menuList_son_two_tittle{
color: #e9ebec; color: #a1aad0;
text-align: left; text-align: left;
font-family: pingfangR;
padding: 0 9px;
} }
.menuList_son_three_tittle{ .menuList_son_three_tittle{
cursor: pointer; cursor: pointer;
transition: all linear .3s; -webkit-transition: all linear 0.3s;
text-align: left; transition: all linear 0.3s;
text-align: left;
padding: 0 9px;
color: #494d5f;
/* font-family: pingfangR; */
font-size: 12px;
}
.menuList_son_three_tittle i{
color: #494d5f;
display: inline-block;
margin-right: 10px;
font-size: 13px;
} }
.menuList_son_three_tittle:hover{ .menuList_son_three_tittle:hover{
color: white; color: #5867dd;
background:#f8f8fb;
}
.menuList_son_three_tittle:hover i{
color: #5867dd;
} }
.menuList_son_item{ .menuList_son_item{
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
} }
.menuList_son_item>div{ .menuList_son_item div:last-child{
border:none;
} }
.hoverNote { .hoverNote {
width: 0; width: 0;
...@@ -4006,19 +4100,20 @@ export default { ...@@ -4006,19 +4100,20 @@ export default {
bottom: -2px; bottom: -2px;
} }
.nav-middle ul li:hover { .nav-middle ul li:hover {
background-color: #2f384d; background-color: #232337;
} }
.nav-middle ul li:hover .hoverNote { .nav-middle ul li:hover .hoverNote {
width: 100%; width: 100%;
transition: width 0.3s; transition: width 0.5s;
} }
.nav-middle ul li i { .nav-middle ul li i {
color: #a6adb4;
display: inline-block; display: inline-block;
margin-right: 12px; margin-right: 8px;
} }
.big_tittle{ .big_tittle{
cursor: pointer; cursor: pointer;
font-size: 15px;
font-family: pingfangR;
} }
.nav-middle ul li.active .big_tittle{ .nav-middle ul li.active .big_tittle{
color: #ffffff; color: #ffffff;
...@@ -4273,7 +4368,9 @@ export default { ...@@ -4273,7 +4368,9 @@ export default {
height: auto; height: auto;
} }
._more_dropdown._dropdown.el-dropdown-menu{ ._more_dropdown._dropdown.el-dropdown-menu{
top: 50px !important; top: 39px !important;
border-radius: 0;
border-color: #ddd;
} }
.logsBack{ .logsBack{
...@@ -4341,7 +4438,7 @@ export default { ...@@ -4341,7 +4438,7 @@ export default {
height:15px; height:15px;
font-size:12px; font-size:12px;
text-align: center; text-align: center;
border-radius: 50%; border-radius: 2px;
background-color: #E95252; background-color: #E95252;
color:#fff; color:#fff;
line-height: 15px; line-height: 15px;
......
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