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

NEZ-347 style：修改link导航name过长撑开下拉菜单的问题，修改添加 删除为图标

Browse Source
This commit is contained in:
zhangyu
2020-07-07 13:43:33 +08:00
parent 783e0a0531
commit 6185754028
2 changed files with 25 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,7 +13,7 @@
</template> </template>
<template v-for="(item, index) in $store.state.linkData"> <template v-for="(item, index) in $store.state.linkData">
<el-menu-item :index="'0-' + index"> <el-menu-item :index="'0-' + index">
<span class="linkTitle"><a :href='item.url' class="nz-a" target="_blank" :title="item.url">{{item.name}}</a></span> <span class="linkTitle"><a :href='item.url' class="nz-a" target="_blank" :title="item.name">{{item.name}}</a></span>
</el-menu-item> </el-menu-item>
</template> </template>
</el-submenu> </el-submenu>
@@ -863,7 +863,7 @@
} }
.linkTitle{ .linkTitle{
display: inline-block; display: inline-block;
width: 100%; width: 200px;
font-size: 15px; font-size: 15px;
color: #444444; color: #444444;
} }
@@ -872,8 +872,12 @@
} }
.linkTitle>a{ .linkTitle>a{
display: inline-block; display: inline-block;
width: 100%; width: 150px;
padding-left: 35px; padding-left: 35px;
padding-right: 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
</style> </style>
<style> <style>

26
nezha-fronted/src/components/page/config/system.vue
View File

@@ -181,7 +181,7 @@
<el-input v-model="linkTemp.url" class="linkUrl"/> <el-input v-model="linkTemp.url" class="linkUrl"/>
</el-form-item> </el-form-item>
<el-form-item prop="btn"> <el-form-item prop="btn">
<el-button class="linkBtn nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75" @click="linkAdd">Add</el-button> <i class="nz-icon-create-square nz-icon" @click="linkAdd"></i>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
@@ -211,16 +211,18 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="linkFormContent" v-else> <div class="linkFormContent" v-else>
<div class="linkTitleName">{{item.name}}</div> <div class="linkTitleName" :title="item.name">{{item.name}}</div>
<div class="linkTitleUrl"> <div class="linkTitleUrl">
<span class="linkTitleUrlContent" @click="openUrl(item)"> <span class="linkTitleUrlContent" @click="openUrl(item)" @dblclick.stop="linkEdit(item)">
<!--<el-tooltip class="item" effect="dark" :content="item.url" placement="top" popper-class="linkUrlTip">--> <!--<el-tooltip class="item" effect="dark" :content="item.url" placement="top" popper-class="linkUrlTip">-->
<span>{{item.url}}</span> <span>{{item.url}}</span>
<!--</el-tooltip>--> <!--</el-tooltip>-->
</span> </span>
<i class="nz-icon nz-icon-edit" @click="linkEdit(item)" v-if="item.buildIn=='0'"></i> <i class="nz-icon nz-icon-edit" @click.stop="linkEdit(item)" v-if="item.buildIn=='0'"></i>
</div>
<div class="linkFormBtn">
<i class="nz-icon nz-icon-delete" @click="linkDel(item)" v-if="item.buildIn=='0'"></i>
</div> </div>
<div class="linkFormBtn"> <el-button class="linkBtn nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75" @click="linkDel(item)" v-if="item.buildIn=='0'">Delete</el-button></div>
</div> </div>
</div> </div>
</draggable> </draggable>
@@ -676,7 +678,7 @@
}, },
//openUrl 跳转页面 //openUrl 跳转页面
openUrl(item){ openUrl(item){
window.open(item.url) // window.open(item.url)
} }
}, },
mounted() { mounted() {
@@ -768,14 +770,22 @@
cursor: pointer; cursor: pointer;
outline: none; outline: none;
} }
.linkTitleUrlContent:hover{ .nz-icon-delete{
text-decoration:underline; cursor: pointer;
color: #ee6723;
} }
/*.linkTitleUrlContent:hover{*/
/*text-decoration:underline;*/
/*}*/
.linkTitleUrl .nz-icon-edit{ .linkTitleUrl .nz-icon-edit{
font-size: 12px; font-size: 12px;
float: right; float: right;
cursor: pointer; cursor: pointer;
} }
.nz-icon-create-square{
cursor: pointer;
color: #333333;
}
/deep/ .el-form-item--small .el-form-item__error{ /deep/ .el-form-item--small .el-form-item__error{
padding-top: 0px; padding-top: 0px;
} }