Skip to content

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

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

2、解决打开多个页面造成的遮挡和无法左右滚动的问题
parent d3ef6dab
Show 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,55 +146,67 @@
text-indent: 0px;
color: #fafafa;
margin-bottom: 5px;
}
.flexDiv .parentBox{
}
.flexDiv .parentBox {
cursor: pointer;
}
.flexDiv .parentBox i {
}
.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 {
}
.my_maxheight {
max-height: 600px;
overflow: auto;
}
.my_maxheight .el-menu-item-group__title {
border-bottom: 1px solid #0f1522;
}
.my_maxheight .el-menu-item-group__title span {
font-size: 14px;
color: #ffffff;
font-family: "PingFangSC-fine";
}
.my_maxheight::-webkit-scrollbar {
/*滚动条整体样式*/
width: 4px;
......@@ -175,29 +227,37 @@
border-radius: 4px;
background: #38425d;
}
.el-menu--vertical{
.el-menu--vertical {
left: 46px !important;
}
.big-icon {
font-size: 20px;
}
.nav-tabs-box .el-tabs__header{
.nav-tabs-box .el-tabs__header {
margin: 0px;
}
.nav-tabs-box .el-tabs__nav-wrap::after{
.nav-tabs-box .el-tabs__nav-wrap::after {
background-color: #38425d;
}
.nav-tabs-box{
.nav-tabs-box {
margin: 0 -20px;
position: relative;
}
.nav-tabs-box .is-active{
.nav-tabs-box .is-active {
background: #f2f2f2;
}
.nav-tabs-box .el-tabs{
.nav-tabs-box .el-tabs {
background: #f0f0f0;
}
.browner-opera-box{
.browner-opera-box {
position: absolute;
width: 100px;
height: 40px;
......@@ -206,7 +266,8 @@
display: flex;
padding: 5px;
}
.browner-opera-box i{
.browner-opera-box i {
display: block;
flex: 1;
font-size: 16px;
......@@ -216,21 +277,26 @@
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;
}
.browner-opera-box i:last-child{
.browner-opera-box i:last-child {
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;
position: absolute;
width: 200px;
......@@ -238,39 +304,47 @@
padding: 2px 0;
z-index: 9999;
}
.right-menu li{
.right-menu li {
margin: 0;
padding:5px 10px;
padding: 5px 10px;
list-style: none;
display: block;
color:#000;
color: #000;
font-size: 12px;
cursor: pointer;
}
.right-menu li:hover{
.right-menu li:hover {
background: #eee;
}
.right-menu li.disable{
.right-menu li.disable {
color: gray;
cursor: default;
}
.right-menu li.disable:hover{
.right-menu li.disable:hover {
background: none;
}
.right-menu li.split{
padding:0;
.right-menu li.split {
padding: 0;
margin: 5px 10px;
height: 1px;
background: #bababa;
cursor: default;
}
.right-menu li.split:hover{
.right-menu li.split:hover {
background: #bababa;
}
.nav-tabs-box .is-focus{
.nav-tabs-box .is-focus {
border: 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;
}
\ 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
......@@ -14,9 +14,9 @@
</span>
<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 ? '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 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">
{{son.MenuName}}
<span class="MenuConfirm" v-if="son.childCount>0">{{son.childCount}}</span>
......@@ -34,10 +34,10 @@
</div>
</div>
</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">
<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>
<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)">
......@@ -77,45 +77,64 @@
<div class="el-dropdown-link">
<img v-if="userInfo.UserPhoto!='' " :src="userInfo.UserPhoto" :onerror='defaultHeadImg' />
<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>
<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">
<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 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'" />
<i class="iconfont icon-right1"></i>
</el-dropdown-item>
<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'" />
<i class="iconfont icon-right1"></i>
</el-dropdown-item>
<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 class="clearfix _dropdown_other" v-if='firstMenuList.indexOf("知识圈")' @click.native="zhishiquan">
<i class="iconfont icon-menu-zhishiquan"></i>
知识圈
</el-dropdown-item> -->
<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 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 class="clearfix _dropdown_other">
<i class="iconfont icon-menu-shezhi"></i>
设置
</el-dropdown-item> -->
<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-menu>
</el-dropdown>
......@@ -1463,7 +1482,7 @@ export default {
//IM_body
let allWindowWidth = window.innerWidth;
this.allWindowWidth = allWindowWidth - 50 - 220 - 60;
let maxLength = parseInt(allWindowWidth/100);
let maxLength = parseInt(allWindowWidth/110);
this.maxLength = maxLength;
},
watch: {
......@@ -3602,7 +3621,7 @@ export default {
color:#000000;
position: absolute;
right: 10px;
font-size: 14px;
font-size: 12px;
}
.changelanguage .el-dropdown-menu__item{
padding:0;
......@@ -3617,18 +3636,63 @@ export default {
}
._dropdown.el-dropdown-menu {
padding: 0;
background-color: #1f2533 !important;
background-color: #FFF !important;
border-radius: 4px;
overflow: hidden;
width: 210px;
top: 40px !important;
box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
}
._dropdown_f1.el-dropdown-menu__item {
background-color: #4d515b !important;
color: #ffffff !important;
cursor: default;
height: 50px;
line-height: 50px;
height: 120px;
background: url("../assets/img/persion/bg-1.jpg");
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 {
font-size: 14px;
......@@ -3649,24 +3713,33 @@ export default {
background-color: #4d515b !important;
color: #ffffff !important;
}
._dropdown_other{
line-height: 42px !important;
}
._dropdown_other.el-dropdown-menu__item {
color: #a9aaad;
color: #6c7293;
position: relative;
}
._dropdown_other.el-dropdown-menu__item .el-badge {
position: absolute;
right: 20px;
right: 35px;
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 {
color: #a9aaad;
display: inline-block;
margin-right: 6px;
}
._dropdown_other.el-dropdown-menu__item:hover,
._dropdown_other.el-dropdown-menu__item:focus {
background-color: #6f737b !important;
color: #ffffff !important;
transition: background-color 0.3s ease;
background-color: #f7f8fa;
color:#5d78ff;
}
._dropdown .popper__arrow::after {
border-bottom-color: transparent !important;
......@@ -3868,12 +3941,13 @@ export default {
width: 24px;
height: 24px;
border-radius: 50%;
margin-top: 13px;
}
.nav {
display: -webkit-box;
.size(100%, 50px);
.min-width(1366px);
background: #1f2533;
background: #1f1e2e;
}
.nav-left {
width: 56px;
......@@ -3922,7 +3996,7 @@ export default {
.hover-bg(#f1f1f1);
color: #a6adb4;
position: relative;
padding: 12px 0;
padding: 12px 10px;
float: left;
z-index: 2019128;
}
......@@ -3939,7 +4013,7 @@ export default {
width: 1000px;
z-index: 999999;
opacity: 1;
padding: 20px 0 20px 20px;
// padding: 20px 0 20px 20px;
height: auto;
// transition: all .5s linear .5s;
animation:ttt .5s forwards;
......@@ -3958,44 +4032,64 @@ export default {
.nav-middle ul li .menuList_son{
position: fixed;
z-index: 9000;
background-color: #363c4a;
background-color: #FFF;
top: 50px;
// display: none;
opacity: 0;
padding: 0;
overflow: hidden;
height: 0;
box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
}
.menuList_tittle_box{
line-height: 30px;
padding-top: 15px;
// padding-top: 15px;
}
.menuList_son_one_tittle{
color: #a6adb4;
color: #5f6281;
font-size: 16px;
padding-bottom: 15px;
border-bottom: 1px solid #495165;
/* border-bottom: 1px solid #495165; */
text-align: left;
padding: 9px 10px;
font-family: "pingfangR";
}
.menuList_son_two_tittle{
color: #e9ebec;
color: #a1aad0;
text-align: left;
font-family: pingfangR;
padding: 0 9px;
}
.menuList_son_three_tittle{
cursor: pointer;
transition: all linear .3s;
-webkit-transition: all linear 0.3s;
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{
color: white;
color: #5867dd;
background:#f8f8fb;
}
.menuList_son_three_tittle:hover i{
color: #5867dd;
}
.menuList_son_item{
width: 100%;
display: flex;
justify-content: flex-start;
}
.menuList_son_item>div{
.menuList_son_item div:last-child{
border:none;
}
.hoverNote {
width: 0;
......@@ -4006,19 +4100,20 @@ export default {
bottom: -2px;
}
.nav-middle ul li:hover {
background-color: #2f384d;
background-color: #232337;
}
.nav-middle ul li:hover .hoverNote {
width: 100%;
transition: width 0.3s;
transition: width 0.5s;
}
.nav-middle ul li i {
color: #a6adb4;
display: inline-block;
margin-right: 12px;
margin-right: 8px;
}
.big_tittle{
cursor: pointer;
font-size: 15px;
font-family: pingfangR;
}
.nav-middle ul li.active .big_tittle{
color: #ffffff;
......@@ -4273,7 +4368,9 @@ export default {
height: auto;
}
._more_dropdown._dropdown.el-dropdown-menu{
top: 50px !important;
top: 39px !important;
border-radius: 0;
border-color: #ddd;
}
.logsBack{
......@@ -4341,7 +4438,7 @@ export default {
height:15px;
font-size:12px;
text-align: center;
border-radius: 50%;
border-radius: 2px;
background-color: #E95252;
color:#fff;
line-height: 15px;
......
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