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

perf: header部分样式调整

Browse Source
This commit is contained in:
chenjinsong
2020-01-13 19:04:03 +08:00
parent 22e77efe83
commit 49b191ce2f
5 changed files with 139 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,19 +1,5 @@
// 主题色
$color-red: #ff3333;
$color-purple: #ff33a9;
$color-orange: #ff8833;
$color-blue: #3377ff;
$global-text-color-active: #ee9d3f; // 全局文字active字色
$header-text-color: #fff; // header默认字色
$header-text-color-hover: #444; //header hover字色
// 文字色
$color-black: #000;
$color-dark: #333;
$color-deep: #555;
$color-pl: #999999;
$color-weak: #B3B3B3;
$color-white: #fff;
// 背景色
$bg-bar: #F9F9F9;
$bg-page: #F3F3F3;
$bg-page-light: #F9F9F9;
@import './reset.scss';
@import './main.scss';

0
nezha-fronted/src/assets/css/main.css → nezha-fronted/src/assets/stylus/main.scss
View File

1
nezha-fronted/src/assets/stylus/reset.scss
View File

@@ -1 +0,0 @@
.bg-red {background-color: $color-purple!important;}

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

@@ -1,11 +1,8 @@
<template>
<div class="header">
<div class="submenu">
<el-menu
class="nz-menu"
class="nz-menu float-right"
mode="horizontal"
background-color="#232f3e"
text-color="#ffffff"
unique-opened
>
<el-submenu index="0" popper-class="nz-submenu">
@@ -64,68 +61,6 @@
</div>
</template>
</idc-config-box>
<!--<el-popover
placement="bottom"
v-model="item[item.name]"
trigger="click"
>
<div class="pop-window-assetType-content">
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full"
@click="item[item.name] = false">
<div class="right-box-btn-icon">
<i class="el-icon-close"></i>
</div>
<span>{{$t('overall.esc')}}</span>
</div>
</div>
<div class="pop-window">
<span style="display: block;padding-bottom: 20px">标题</span>
<div style="padding-top: 10px;padding-left: 20px">
<div>
<label style="font-size: 12px">DN name</label>
<input class='sidebar-pop-input' v-model="addIdcData.name"/>
</div>
<div style="padding-top: 40px">
<label style="font-size: 12px">Loaction</label>
<input class='sidebar-pop-input' v-model="addIdcData.location"/>
</div>
<div style="padding-top: 40px">
<label style="font-size: 12px;padding-right: 20px">负责人</label>
<select class='sidebar-pop-input-select'
style="margin-left:-40px "
v-model="addIdcData.principal"
clearable>
<option
v-for="item in idcUserData"
:key="item.key"
:label="item.username"
:value="item.userId"
>
</option>
</select>
</div>
<div style="padding-top: 40px">
<label style="font-size: 12px">Tel</label>
<input class='sidebar-pop-input' v-model="addIdcData.tel"/>
</div>
</div>
</div>
</div>
<div class="right-box-bottom-btns">
<div class="right-box-bottom-btn right-box-bottom-btn-cancel"
@click.stop="item[item.name]= false">
{{$t('overall.cancel')}}
</div>
<div class="right-box-bottom-btn right-box-bottom-btn-50"
@click="editData('idc',item.id)">
{{$t('overall.save')}}
</div>
</div>
<div @click.stop="getIDCOptionData(item.id)" slot="reference" class="menu-edit">
<i style="color: inherit" class="el-icon-edit-outline"></i>
</div>
</el-popover>-->
</div>
</el-menu-item>
</template>
@@ -152,20 +87,9 @@
<div @click="jumpTo('promServer')">{{$t('config.promServer.promServerList')}}</div>
</el-menu-item>
</el-submenu>
</el-menu>
</div>
<div class="header-right">
<el-menu
class=""
mode="horizontal"
background-color="#232f3e"
text-color="#ffffff"
unique-opened
>
<el-submenu index="6" popper-class="nz-submenu">
<template slot="title">
<div>{{username}}</div>
<div>{{username}}<i class="el-icon-arrow-down"></i></div>
</template>
<el-menu-item index="6-0">
<div :style="language=='en'?'color:#f90':''" @click="changeLocal('en')">English</div>
@@ -181,36 +105,7 @@
</el-menu-item>
</el-submenu>
</el-menu>
<!--<div class="header-user-con">
<div class="flagselect">
</div>
<el-popover
placement="bottom"
title=""
width="200"
trigger="hover"
>
<div class="userout">
<div :style="language!='en'?'color:#a6a6a6':''" @click="changeLocal('en')">
<p>English</p>
</div>
<div :style="language=='cn'?'':'color:#a6a6a6'" @click="changeLocal('cn')">
<p>简体</p>
</div>
<div style="cursor:no-drop;color:#a6a6a6">
<p>русский</p>
</div>
</div>
<div class="sign-out" @click="jumpTo('')">
退出登录
</div>
<div slot="reference" class="user-avator">
<span>用户名</span>
<i class="el-submenu__icon-arrow el-icon-arrow-down header-name-jiantou"></i>
</div>
</el-popover>
</div>-->
</div>
<panel-box :panel="editPanel" @reload="panelListReload" @reloadForDel="" ref="panelBox"></panel-box>
<project-box :project="editProject" ref="projectBox"></project-box>
<module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
@@ -498,7 +393,34 @@
}
</script>
<style>
<style lang="scss">
.header {
background-image: linear-gradient(180deg, #565656 0%, #3C3C3C 100%);
box-shadow: 0 2px 4px 0
}
.header .el-menu {
background-color: transparent;
}
.header .el-menu--horizontal>.el-submenu .el-submenu__title i {
color: inherit;
}
.el-submenu__title .el-icon-arrow-down {
font-size: 14px;
}
.nz-submenu .el-menu--popup {
border-radius: 0 0 2px 2px;
}
.header .el-menu--horizontal>.el-submenu .el-submenu__title {
min-width: 120px;
text-align: center;
color: $header-text-color;
padding: 0;
}
.header .el-menu--horizontal>.el-submenu .el-submenu__title:hover {
color: #444;
}
.el-menu.el-menu--horizontal {
border-bottom: 0px;
}
@@ -511,12 +433,12 @@
border-bottom: 0px;
}
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title,
/* .el-menu--horizontal > .el-submenu.is-active .el-submenu__title,
.el-menu--horizontal > .el-menu-item.is-active,
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
border-bottom: 0px;
color: white;
}
}*/
.el-menu--horizontal.nz-submenu {
border: 1px solid #bbbbbb;
@@ -546,10 +468,6 @@
color: #ff9900 !important;
}
.el-submenu__title .el-icon-plus {
color: white;
}
.el-menu-item > div, .el-menu-item > div > div {
font-size: 15px;
}
@@ -563,12 +481,6 @@
</style>
<style scoped>
.submenu {
padding-left: 50%;
width: 500px;
float: left;
}
.header {
position: relative;
box-sizing: border-box;
@@ -578,77 +490,6 @@
z-index: 510;
}
.header-right {
float: right;
padding-right: 5px;
}
.header-user-con {
display: flex;
height: 50px;
align-items: center;
}
.user-avator {
padding: 0 5px 3px 0;
margin-left: 20px;
line-height: 30px;
cursor: pointer;
}
.user-avator:hover {
border-radius: 2px;
background: rgba(255, 255, 255, .3);
}
.user-avator span {
font-size: 16px;
margin: 0 5px;
color: white;
}
.user-avator i.iconfont {
color: #fff;
font-size: 25px;
transform: translateY(2.5px);
display: inline-block;
line-height: 30px;
}
.userout {
display: flex;
align-items: center;
justify-content: space-between;
}
.userout > div {
width: 33.3%;
color: rgba(51, 137, 185, 1);
cursor: pointer;
text-align: center;
}
.sign-out {
width: 100%;
height: 30px;
color: #fff;
text-align: center;
line-height: 30px;
background: rgba(51, 137, 185, 1);
margin-top: 20px;
cursor: pointer;
}
.sign-out:hover {
opacity: .8;
}
.nz-menu > li:first-of-type {
position: fixed;
left: 40%;
top: 0;
}
.menu-create {
line-height: 15px;
text-align: center;

2
nezha-fronted/src/main.js
View File

@@ -1,4 +1,4 @@
import "./assets/css/main.css";
//import "./assets/css/main.css";
import "./assets/css/nzIcon.css";
import 'element-ui/lib/theme-chalk/index.css';
import ElementUI from 'element-ui';