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

feat:

Browse Source 
新增国际化功能,language文件夹为语言选项,header选择语言类型
This commit is contained in:
wanghaoyu
2019-12-02 16:16:26 +08:00
parent c25ef65a36
commit 63367c0c71
8 changed files with 222 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
nezha-fronted/src/components/common/header.vue Normal file
View File

@@ -0,0 +1,164 @@
<template>
<div class="header">
<div class="submenu">
<el-menu
class="el-menu-demo"
mode="horizontal"
background-color="#ffffff"
unique-opened
>
<el-menu-item index="1" @click="jumpTo('dashboard')"><div>
{{$t('overall.dashboard')}}</div></el-menu-item>
<el-submenu index="2">
<template slot="title"><div @click="jumpTo('project')">{{$t('overall.project')}}</div></template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title"><div @click="jumpTo('asset')">{{$t('overall.asset')}}</div></template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
</el-menu>
</div>
<div class="header-right">
<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="SignOut" @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>
</div>
</template>
<script>
export default {
name: "Header",
data(){
return{
language:localStorage.getItem("language"),
}
},
methods:{
jumpTo(data){
this.$router.push({
path: "/"+data,
query: {
t: +new Date() // 保证每次点击路由的query项都是不一样的，确保会重新刷新view
}
});
},
changeLocal(lang) {
localStorage.setItem("language", lang);
window.location.reload();
},
}
}
</script>
<style>
.el-submenu__title .el-submenu__icon-arrow{
display: none;
}
</style>
<style scoped>
.submenu{
padding-left: 50%;
width: 300px;
float: left;
}
.header {
position: relative;
box-sizing: border-box;
width: 100%;
height: 60px;
font-size: 22px;
background-color: #ffffff;
z-index: 999;
box-shadow: 0px 20px 13px -19px #5E5E5E;
}
.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;
}
.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;
}
.SignOut{
width: 100%;
height: 30px;
color: #fff;
text-align: center;
line-height: 30px;
background: rgba(51, 137, 185, 1);
margin-top: 20px;
cursor: pointer;
}
.SignOut:hover{
opacity: .8;
}
.header-name-jiantou{
position: static !important;
}
</style>