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

icon图标修改

Browse Source
This commit is contained in:
wujiawen
2020-01-15 20:55:24 +08:00
parent aa23428d6d
commit 98da6bd36e
10 changed files with 141 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
nezha-fronted/src/assets/css/nzIcon.css
View File

@@ -66,7 +66,6 @@
.nz-icon-create-square:before { .nz-icon-create-square:before {
content: "\e61f"; content: "\e61f";
} }
.nz-icon-zoomin:before { .nz-icon-zoomin:before {

67
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -73,15 +73,18 @@ html {
/* begin--按钮组件*/ /* begin--按钮组件*/
.nz-btn { .nz-btn {
width: 82px;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
line-height: 18px; line-height: 18px;
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 600;
padding: 4px 14px; padding: 4px 6px;
text-align: center; text-align: center;
box-sizing: border-box;
-webkit-appearance: none; -webkit-appearance: none;
white-space: nowrap; white-space: nowrap;
margin-left: 20px;
} }
.nz-btn.nz-btn-size-normal {} /* size默认normal，是normal时这个class可不写*/ .nz-btn.nz-btn-size-normal {} /* size默认normal，是normal时这个class可不写*/
.nz-btn.nz-btn-size-small { .nz-btn.nz-btn-size-small {
@@ -91,20 +94,18 @@ html {
font-weight: 500; font-weight: 500;
} }
.nz-btn.nz-btn-style-normal { /* 蓝色按钮 */ .nz-btn.nz-btn-style-normal { /* 蓝色按钮 */
background-color: #16b; background-color: $global-text-color-active;
background-image: linear-gradient(#2d8cec, #16b); // background-image: linear-gradient(#2d8cec, #16b);
border: 1px solid #0b4075; border: 1px solid $global-text-color-active;
border-top-color: #16b; border-top-color: $global-text-color-active;
color: #fff; color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.75); // text-shadow: 0 1px 1px rgba(0,0,0,.75);
} }
.nz-btn.nz-btn-style-light { /* 浅色按钮 */ .nz-btn.nz-btn-style-light { /* 浅色按钮 */
background-color: #dedede; background-color: transparent;
background-image: linear-gradient(white,#dedede); border: 1px solid #999999;
border: 1px solid #b8b8b8; color: #999999;
border-top-color: #dedede; letter-spacing: 0;
color: #444;
text-shadow: 0 1px 1px rgba(255,255,255,.75);
} }
.nz-btn.nz-btn-style-pure-white { /*纯白色按钮*/ .nz-btn.nz-btn-style-pure-white { /*纯白色按钮*/
background-color: white; background-color: white;
@@ -115,13 +116,13 @@ html {
padding: 2px 5px; padding: 2px 5px;
} }
.nz-btn.nz-btn-size-normal.nz-btn-style-square { /* 单图标时是个正方形*/ .nz-btn.nz-btn-size-normal.nz-btn-style-square { /* 单图标时是个正方形*/
padding: 4px 6px; // padding: 4px 6px;
} }
.nz-btn.nz-btn-style-light:hover:not(.nz-btn-disabled) { .nz-btn.nz-btn-style-light:hover:not(.nz-btn-disabled) {
background-image: linear-gradient(#dedede,#c5c5c5); // background-image: linear-gradient(#dedede,#c5c5c5);
} }
.nz-btn.nz-btn-style-normal:hover:not(.nz-btn-disabled) { .nz-btn.nz-btn-style-normal:hover:not(.nz-btn-disabled) {
background-image: linear-gradient(#16b, #0d4d8c); // background-image: linear-gradient(#16b, #0d4d8c);
} }
.nz-btn.nz-btn-style-pure-white:hover:not(.nz-btn-disabled) { .nz-btn.nz-btn-style-pure-white:hover:not(.nz-btn-disabled) {
background-color: #dedede; background-color: #dedede;
@@ -274,6 +275,7 @@ html {
width: 320px; width: 320px;
} }
/* end--顶部工具栏*/ /* end--顶部工具栏*/
/* start--内容*/ /* start--内容*/
.content-right>.el-table{ .content-right>.el-table{
margin-top: 30px; margin-top: 30px;
@@ -295,6 +297,7 @@ html {
font-size: 14px; font-size: 14px;
border-left: 1px solid white; border-left: 1px solid white;
border-bottom: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4;
} }
.content-right .el-table .el-table__header th:first-of-type { .content-right .el-table .el-table__header th:first-of-type {
border-left: none; border-left: none;
@@ -311,16 +314,48 @@ html {
.content-right>.el-table th { .content-right>.el-table th {
padding: 0; padding: 0;
} }
//小信息栏边框
.content-right>.el-table th .cell{ .content-right>.el-table th .cell{
height: 36px; height: 36px;
line-height: 36px; line-height: 36px;
display:flex;
background-image: linear-gradient(#f8f8f8, #e6e6e6); background-image: linear-gradient(#f8f8f8, #e6e6e6);
border-right: 1px solid #d4d4d4; border-right: 1px solid #d4d4d4;
box-shadow: inset -1px -2px 1px 0 rgba(0,0,0,0.11), inset 2px 2px 1px 0 rgba(255,255,255,0.50);
} }
.content-right>.el-table td .cell{ .content-right>.el-table td .cell{
height: 44px; height: 44px;
line-height: 44px; line-height: 44px;
display:flex;
} }
.nav-tabel-header{
display: flex;
height: 36px;
min-width: 100px;
}
.nz-table-gear
{
display: block;
width: 38px;
margin-left:-10px;
padding-left:10px;
padding-right:10px;
text-align: center;
border-right:2px solid #d4d4d4;
box-sizing: border-box;
}
.nz-table-txt{
padding-left:10px;
display: flex;
height: 100%;
border-left:1px solid #fff;
min-width: 60px;
box-sizing: border-box;
padding-right:20px;
}
/* end--内容*/ /* end--内容*/
/* start--分页*/ /* start--分页*/
.pagination { .pagination {

18
nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
View File

@@ -138,6 +138,12 @@
<button type="button" id="edit-add-param" @click="addParam" class="nz-btn nz-btn-size-small nz-btn-style-normal"> <button type="button" id="edit-add-param" @click="addParam" class="nz-btn nz-btn-size-small nz-btn-style-normal">
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span> <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</button> </button>
<!-- <button type="button" @click="save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-edit-ok">
<span class="top-tool-btn-txt">Ok</span>
</button>
<button type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square nz-btn-edit-esc">
<span class="top-tool-btn-txt">Cancel</i></span>
</button> -->
</div> </div>
</template> </template>
<div class="param-box param-box-module"> <div class="param-box param-box-module">
@@ -159,6 +165,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-scrollbar> </el-scrollbar>
<!-- end--表单--> <!-- end--表单-->
<!-- begin--子弹框--> <!-- begin--子弹框-->
@@ -480,4 +487,15 @@
</script> </script>
<style scoped> <style scoped>
.nz-btn-edit-ok{
position: absolute;
bottom: 0;
right:0;
}
.nz-btn-edit-esc{
position: absolute;
bottom: 0;
left:0;
}
</style> </style>

17
nezha-fronted/src/components/page/alert/config.vue
View File

@@ -2,6 +2,11 @@
.config { .config {
height: 100%; height: 100%;
} }
.top-tools #alert-add .top-tool-btn-txt .nz-icon{
display: inline-block;
font-size: 12px;
margin-right:6px;
}
</style> </style>
<template> <template>
<div class="config"> <div class="config">
@@ -15,7 +20,9 @@
<div class="content-right"> <div class="content-right">
<div class="top-tools"> <div class="top-tools">
<button id="alert-add" @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right"> <button id="alert-add" @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span> <span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
</button> </button>
<div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div> <div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
</div> </div>
@@ -34,11 +41,11 @@
show-overflow-tooltip show-overflow-tooltip
> >
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span v-if="index==0"> <span v-if="index==0" class='nav-tabel-header' >
<span @click.stop="elementsetShow('shezhi',$event)" id="alert-tab-set"> <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="el-icon-setting"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
<span>{{item.label}}</span> <span class="nz-table-txt">{{item.label}}</span>
</span> </span>
<div v-else> <div v-else>
<span>{{item.label}}</span> <span>{{item.label}}</span>

8
nezha-fronted/src/components/page/alert/list.vue
View File

@@ -30,11 +30,11 @@
:label="item.label" :label="item.label"
> >
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span v-if="index==0"> <span v-if="index==0" class='nav-tabel-header'>
<span @click.stop="elementsetShow('shezhi',$event)"> <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="el-icon-setting"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
<span>{{item.label}}</span> <span class="nz-table-txt">{{item.label}}</span>
</span> </span>
<div v-else> <div v-else>
<span>{{item.label}}</span> <span>{{item.label}}</span>

20
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -26,7 +26,9 @@
<div class="content-right"> <div class="content-right">
<div class="top-tools"> <div class="top-tools">
<button @click.stop="tagShow('showAdd')" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right" id="asset-add"> <button @click.stop="tagShow('showAdd')" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right" id="asset-add">
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span> <span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
<!-- ADD按钮 --> <!-- ADD按钮 -->
</button> </button>
<div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div> <div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
@@ -46,12 +48,12 @@
:key="`col_${index}`" :key="`col_${index}`"
:label="item.label" :label="item.label"
> >
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope" class='nav-table-column-header'>
<span v-if="index==0"> <span v-if="index==0" class='nav-tabel-header'>
<span @click.stop="elementsetShow('shezhi',$event)" id="asset-tab-set"> <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
<span>{{item.label}}</span> <span class="nz-table-txt">{{item.label}}</span>
</span> </span>
<div v-else> <div v-else>
<span>{{item.label}}</span> <span>{{item.label}}</span>
@@ -656,9 +658,11 @@
.tab-input-square-high { .tab-input-square-high {
border: 1px solid #1166bb; border: 1px solid #1166bb;
} }
#asset-tab-set{ .top-tools .top-tool-btn-txt .nz-icon{
display: inline-block;
} font-size: 12px;
margin-right:6px;
}
</style> </style>
<style lang="scss"> <style lang="scss">
.asset .content-left .el-checkbox__input.is-focus .el-checkbox__inner, .asset .content-left .el-checkbox__input.is-focus .el-checkbox__inner,

17
nezha-fronted/src/components/page/config/account.vue
View File

@@ -2,6 +2,11 @@
.account { .account {
height: 100%; height: 100%;
} }
.top-tools .top-tool-btn-txt .nz-icon{
display: inline-block;
font-size: 12px;
margin-right:6px;
}
</style> </style>
<template> <template>
<div class="account"> <div class="account">
@@ -15,7 +20,9 @@
<div class="content-right"> <div class="content-right">
<div class="top-tools"> <div class="top-tools">
<button type="button" @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right" id="account-add"> <button type="button" @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right" id="account-add">
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span> <span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
</button> </button>
<div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div> <div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
</div> </div>
@@ -33,11 +40,11 @@
:label="item.label" :label="item.label"
> >
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span v-if="index==0"> <span v-if="index==0" class='nav-tabel-header' >
<span @click.stop="elementsetShow('shezhi',$event)" id="account-tab-set"> <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="el-icon-setting"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
<span>{{item.label}}</span> <span class="nz-table-txt">{{item.label}}</span>
</span> </span>
<div v-else> <div v-else>
<span>{{item.label}}</span> <span>{{item.label}}</span>

17
nezha-fronted/src/components/page/config/promServer.vue
View File

@@ -2,6 +2,11 @@
.prom { .prom {
height: 100%; height: 100%;
} }
.top-tools .top-tool-btn-txt .nz-icon{
display: inline-block;
font-size: 12px;
margin-right:6px;
}
</style> </style>
<template> <template>
<div class="prom"> <div class="prom">
@@ -15,18 +20,20 @@
<div class="content-right"> <div class="content-right">
<div class="top-tools"> <div class="top-tools">
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right" id="prom-add"> <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right" id="prom-add">
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span> <span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
</button> </button>
<div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div> <div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
</div> </div>
<el-table :data="tableData" border height="calc(100% - 65px)" style="width: 100%;"> <el-table :data="tableData" border height="calc(100% - 65px)" style="width: 100%;">
<el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width" :key="`col-${index}`" :label="item.label"> <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width" :key="`col-${index}`" :label="item.label">
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span v-if="index==0"> <span v-if="index==0" class='nav-tabel-header' >
<span @click.stop="elementsetShow('shezhi',$event)" id="prom-tab-set"> <span @click.stop="elementsetShow('shezhi',$event)" id="prom-tab-set" class="nz-table-gear">
<i class="el-icon-setting"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
<span>{{item.label}}</span> <span class="nz-table-txt">{{item.label}}</span>
</span> </span>
<div v-else> <div v-else>
<span>{{item.label}}</span> <span>{{item.label}}</span>

10
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -79,7 +79,11 @@
float: right; float: right;
margin-right: 1px; margin-right: 1px;
} }
.top-tools .top-tool-btn-txt .nz-icon{
display: inline-block;
font-size: 12px;
margin-right:6px;
}
</style> </style>
<template> <template>
<div class="panel"> <div class="panel">
@@ -93,7 +97,9 @@
<div class="content-right"> <div class="content-right">
<div class="top-tools"> <div class="top-tools">
<button @click="toAddChart" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right"> <button @click="toAddChart" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span> <span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
</button> </button>
<div class="top-tool-search float-right"><search-input ref="searchInput" :searchMsg="searchMsg" @search="search" ></search-input></div> <div class="top-tool-search float-right"><search-input ref="searchInput" :searchMsg="searchMsg" @search="search" ></search-input></div>
<el-select class="panel-select-width" popper-class="" v-model="showPanel.id" placeholder="" size="small" @change="panelChange"> <el-select class="panel-select-width" popper-class="" v-model="showPanel.id" placeholder="" size="small" @change="panelChange">

18
nezha-fronted/src/components/page/project/project.vue
View File

@@ -62,7 +62,9 @@
</button> </button>
</div> </div>
<button @click="toCreateEndpoint" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right" id="project-add-ep"> <button @click="toCreateEndpoint" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right" id="project-add-ep">
<span>{{$t('overall.add')}}</span> <span class='top-tool-btn-txt'>
<i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
</button> </button>
<div class="top-tool-search float-right"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div> <div class="top-tool-search float-right"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
</div> </div>
@@ -80,11 +82,11 @@
:label="item.label" :label="item.label"
> >
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span v-if="index==0"> <span v-if="index==0" class='nav-tabel-header'>
<span @click.stop="elementsetShow('shezhi',$event)" id="project-ep-tab-set"> <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="el-icon-setting"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
<span>{{item.label}}</span> <span class="nz-table-txt">{{item.label}}</span>
</span> </span>
<div v-else> <div v-else>
<span>{{item.label}}</span> <span>{{item.label}}</span>
@@ -560,7 +562,11 @@
.content-right-option .el-icon-view:hover { .content-right-option .el-icon-view:hover {
color: #409EFF; color: #409EFF;
} }
.top-tools .top-tool-btn-txt .nz-icon{
display: inline-block;
font-size: 12px;
margin-right:6px;
}
/* start--param*/ /* start--param*/
.param-btn { .param-btn {
float: right; float: right;