gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 优化顶部菜单样式

Browse Source
This commit is contained in:
chenjinsong
2020-01-17 18:09:54 +08:00
parent 3dd1d4d679
commit 153c618b45
2 changed files with 20 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
nezha-fronted/src/assets/stylus/index.scss
View File

@@ -3,14 +3,15 @@ $global-text-color-active: #ee9d3f; // 全局文字active字色
$header-text-color: #e5e5e5; // header默认字色 $header-text-color: #e5e5e5; // header默认字色
$header-text-color-active: #fff; // header高亮字色 $header-text-color-active: #fff; // header高亮字色
$header-text-color-hover: #444; //header hover字色 $header-text-color-hover: #444; //header hover字色
$header-background-color-hover: #666; //菜单鼠标悬停背景色
$btn-normal-background-color: linear-gradient(180deg, #F5B93E 0%, #EE9D3F 100%); //橙色按钮颜色 $btn-normal-background-color: linear-gradient(180deg, #F5B93E 0%, #EE9D3F 100%); //橙色按钮背景颜色
$btn-normal-background-color-hover: #EE9D3F ; //橙色按钮hover颜色 $btn-normal-background-color-hover: #EE9D3F ; //橙色按钮hover背景颜色
$btn-normal-txt-color: #fff; //橙色按钮颜色 $btn-normal-txt-color: #fff; //橙色按钮字体颜色
$btn-normal-shadow: 0 0 1px 1px rgba(162,162,162,0.50); //橙色按钮边框阴影 $btn-normal-shadow: 0 0 1px 1px rgba(162,162,162,0.50); //橙色按钮边框阴影
$btn-light-background-color: linear-gradient(180deg, #FFFFFF 0%, #E0E0E0 100%); //灰色按钮颜色 $btn-light-background-color: linear-gradient(180deg, #FFFFFF 0%, #E0E0E0 100%); //灰色按钮背景颜色
$btn-light-background-color-hover: linear-gradient(180deg, #F0F0F0 0%, #D8D8D8 99%); //橙色按钮hover颜色 $btn-light-background-color-hover: linear-gradient(180deg, #F0F0F0 0%, #D8D8D8 99%); //灰色按钮hover背景颜色
$btn-light-txt-color: #666; //灰色按钮颜色 $btn-light-txt-color: #666; //灰色按钮字体颜色
$btn-light-shadow: 0 0 1px 1px rgba(162,162,162,0.50); //灰色按钮边框阴影 $btn-light-shadow: 0 0 1px 1px rgba(162,162,162,0.50); //灰色按钮边框阴影
$pop-box-shadow: 0 0 12px 0 rgba(0,0,0,0.2); $pop-box-shadow: 0 0 12px 0 rgba(0,0,0,0.2);

32
nezha-fronted/src/components/common/header.vue
View File

@@ -44,8 +44,7 @@
<el-menu-item :index="'2-' + index"> <el-menu-item :index="'2-' + index">
<div @click="jumpToProject(item)" :class="{'menu-item-active' :(activeIndex == 'project' && activeItemIndex == item.id)}"> <div @click="jumpToProject(item)" :class="{'menu-item-active' :(activeIndex == 'project' && activeItemIndex == item.id)}">
<span>{{item.name}}</span> <span>{{item.name}}</span>
<div @click.stop="toEditProject(item)" class="menu-edit"><i style="color: inherit" <div @click.stop="toEditProject(item)" class="menu-edit"><i style="color: inherit" class="nz-icon nz-icon-edit"></i></div>
class="nz-icon nz-icon-edit"></i></div>
</div> </div>
</el-menu-item> </el-menu-item>
</template> </template>
@@ -60,7 +59,7 @@
<span>{{item.name}}</span> <span>{{item.name}}</span>
<idc-config-box :post-idc="item" ref="idcConfigBox" placement="left" @after="getIDCOptionData" :button-class="'menu-edit'"> <idc-config-box :post-idc="item" ref="idcConfigBox" placement="left" @after="getIDCOptionData" :button-class="'menu-edit'">
<template v-slot:optionZone> <template v-slot:optionZone>
<div @click="closeAllPop"> <div @click="closeAllPop" class="menu-edit">
<i class="nz-icon nz-icon-edit" @click="getIDCOptionData(item.id)" style="color: inherit"></i> <i class="nz-icon nz-icon-edit" @click="getIDCOptionData(item.id)" style="color: inherit"></i>
</div> </div>
</template> </template>
@@ -440,7 +439,7 @@
<style lang="scss"> <style lang="scss">
.header { .header {
background-image: linear-gradient(180deg, #565656 0%, #3C3C3C 100%); background-image: linear-gradient(180deg, #565656 0%, #3C3C3C 100%);
box-shadow: 0 2px 4px 0 box-shadow: 0 2px 4px 0 rgba(0,0,0,0.30);
} }
.header .el-menu { .header .el-menu {
background-color: transparent; background-color: transparent;
@@ -456,12 +455,12 @@
font-weight: 500; font-weight: 500;
color: $header-text-color-active; color: $header-text-color-active;
} }
.header .el-menu--horizontal>.el-submenu .el-submenu__title .menu-active:hover {
color: $header-text-color-hover;
}
.header .el-menu--horizontal>.el-submenu .el-submenu__title i { .header .el-menu--horizontal>.el-submenu .el-submenu__title i {
color: inherit; color: inherit;
} }
.el-submenu__title:hover {
background-color: $header-background-color-hover !important;
}
.el-submenu__title{ .el-submenu__title{
font-size: 16px; font-size: 16px;
} }
@@ -469,7 +468,7 @@
font-size: 14px; font-size: 14px;
} }
.nz-submenu .el-menu--popup { .nz-submenu .el-menu--popup {
border-radius: 0 0 2px 2px; border-radius: 4px;
} }
.header .el-menu--horizontal>.el-submenu .el-submenu__title { .header .el-menu--horizontal>.el-submenu .el-submenu__title {
min-width: 120px; min-width: 120px;
@@ -477,9 +476,6 @@
color:$header-text-color; color:$header-text-color;
padding: 0; padding: 0;
} }
.header .el-menu--horizontal>.el-submenu .el-submenu__title:hover {
color: $header-text-color-hover !important;
}
.el-menu.el-menu--horizontal { .el-menu.el-menu--horizontal {
border-bottom: 0px; border-bottom: 0px;
@@ -514,8 +510,9 @@
display: none; display: none;
} }
.el-menu--horizontal.nz-submenu { .el-menu--horizontal.nz-submenu {
border: 1px solid #bbbbbb;
border-top: none; border-top: none;
top: 62px !important;
} }
.nz-submenu .el-menu--popup { .nz-submenu .el-menu--popup {
@@ -576,11 +573,6 @@
line-height: 12px; line-height: 12px;
} }
.menu-edit {
line-height: 36px;
float: right;
}
.pop-window-assetType-content { .pop-window-assetType-content {
padding: 1px 15px 15px 20px; padding: 1px 15px 15px 20px;
} }
@@ -655,8 +647,10 @@
} }
</style> </style>
<style> <style>
.menu-edit { .nz-submenu .menu-edit {
line-height: 36px; line-height: 36px;
float: right; position: absolute;
right: 15px;
top: 0;
} }
</style> </style>