2016-08-23 19:15:15 +08:00
|
|
|
<style scoped>
|
|
|
|
.headerWrapper {
|
|
|
|
height: 80px;
|
|
|
|
}
|
2016-08-22 17:42:04 +08:00
|
|
|
.header {
|
|
|
|
height: 80px;
|
2016-09-13 20:02:33 +08:00
|
|
|
background-color: rgba(32, 160, 255, 1);
|
2016-08-22 17:42:04 +08:00
|
|
|
color: #fff;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
|
|
line-height: @height;
|
2016-08-23 19:15:15 +08:00
|
|
|
z-index: 100;
|
|
|
|
position: relative;
|
2016-08-22 17:42:04 +08:00
|
|
|
|
|
|
|
.container {
|
|
|
|
height: 100%;
|
2016-11-18 16:49:07 +08:00
|
|
|
box-sizing: border-box;
|
2016-08-22 17:42:04 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
h1 {
|
|
|
|
margin: 0;
|
|
|
|
float: left;
|
|
|
|
font-size: 32px;
|
|
|
|
font-weight: normal;
|
|
|
|
|
2016-08-23 19:15:15 +08:00
|
|
|
a {
|
|
|
|
color: #fff;
|
|
|
|
text-decoration: none;
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
|
2016-08-22 17:42:04 +08:00
|
|
|
span {
|
|
|
|
font-size: 12px;
|
|
|
|
display: inline-block;
|
|
|
|
width: 34px;
|
|
|
|
height: 18px;
|
2016-09-14 11:15:28 +08:00
|
|
|
border: 1px solid rgba(255, 255, 255, .5);
|
2016-08-22 17:42:04 +08:00
|
|
|
text-align: center;
|
|
|
|
line-height: 18px;
|
|
|
|
vertical-align: middle;
|
|
|
|
margin-left: 10px;
|
|
|
|
border-radius: 3px;
|
|
|
|
}
|
|
|
|
}
|
2016-08-23 19:15:15 +08:00
|
|
|
.nav {
|
2016-08-22 17:42:04 +08:00
|
|
|
float: right;
|
|
|
|
height: 100%;
|
|
|
|
line-height: 80px;
|
|
|
|
background: transparent;
|
2016-08-23 19:15:15 +08:00
|
|
|
@utils-clearfix;
|
|
|
|
padding: 0;
|
|
|
|
margin: 0;
|
2016-08-22 17:42:04 +08:00
|
|
|
}
|
2016-11-18 16:49:07 +08:00
|
|
|
.nav-logo,
|
|
|
|
.nav-logo-small {
|
2016-11-09 08:15:40 +08:00
|
|
|
vertical-align: sub;
|
|
|
|
}
|
2016-11-18 16:49:07 +08:00
|
|
|
.nav-logo-small {
|
|
|
|
display: none;
|
|
|
|
}
|
2016-08-23 19:15:15 +08:00
|
|
|
.nav-item {
|
2016-08-22 17:42:04 +08:00
|
|
|
margin: 0;
|
2016-08-23 19:15:15 +08:00
|
|
|
float: left;
|
|
|
|
list-style: none;
|
|
|
|
position: relative;
|
|
|
|
cursor: pointer;
|
2016-09-13 20:02:33 +08:00
|
|
|
margin-left: 20px;
|
2016-11-10 21:46:55 +08:00
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
cursor: default;
|
|
|
|
margin-left: 34px;
|
|
|
|
span {
|
|
|
|
opacity: .8;
|
|
|
|
}
|
|
|
|
|
|
|
|
.nav-lang {
|
|
|
|
cursor: pointer;
|
|
|
|
display: inline-block;
|
|
|
|
height: 100%;
|
|
|
|
&:hover {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
&.active {
|
|
|
|
font-weight: 700;
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2016-08-23 19:15:15 +08:00
|
|
|
|
|
|
|
a {
|
|
|
|
text-decoration: none;
|
|
|
|
color: #fff;
|
|
|
|
display: block;
|
|
|
|
padding: 0 20px;
|
2016-09-18 22:01:26 +08:00
|
|
|
opacity: .8;
|
|
|
|
&.active,
|
|
|
|
&:hover {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
2016-11-10 21:46:55 +08:00
|
|
|
|
|
|
|
&.active {
|
|
|
|
font-weight: 700;
|
|
|
|
}
|
2016-08-23 19:15:15 +08:00
|
|
|
|
2016-09-18 22:01:26 +08:00
|
|
|
&.active::before {
|
2016-08-23 19:15:15 +08:00
|
|
|
content: '';
|
|
|
|
display: block;
|
|
|
|
position: absolute;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
|
|
height: 4px;
|
|
|
|
background:#99d2fc;
|
|
|
|
}
|
|
|
|
}
|
2016-08-22 17:42:04 +08:00
|
|
|
}
|
2016-08-23 19:15:15 +08:00
|
|
|
}
|
2016-09-13 20:02:33 +08:00
|
|
|
.header-home {
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
background-color: rgba(32, 160, 255, 0);
|
|
|
|
}
|
2016-11-18 16:49:07 +08:00
|
|
|
|
|
|
|
@media (max-width: 850px) {
|
|
|
|
.header {
|
|
|
|
.nav-logo {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
.nav-logo-small {
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
.nav-item {
|
|
|
|
margin-left: 6px;
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
margin-left: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
a {
|
|
|
|
padding: 0 5px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
|
|
.header {
|
|
|
|
.container {
|
|
|
|
padding: 0 12px;
|
|
|
|
}
|
|
|
|
.nav-item a,
|
|
|
|
.nav-lang {
|
|
|
|
font-size: 12px;
|
|
|
|
vertical-align: top;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2016-08-22 17:42:04 +08:00
|
|
|
</style>
|
|
|
|
<template>
|
2016-08-23 19:15:15 +08:00
|
|
|
<div class="headerWrapper">
|
|
|
|
<header class="header"
|
2016-09-13 20:02:33 +08:00
|
|
|
ref="header"
|
2016-08-23 19:15:15 +08:00
|
|
|
:style="headerStyle"
|
|
|
|
:class="{
|
2016-11-07 16:25:56 +08:00
|
|
|
'header-home': isHome
|
2016-08-23 19:15:15 +08:00
|
|
|
}">
|
|
|
|
<div class="container">
|
2016-11-10 21:46:55 +08:00
|
|
|
<h1><router-link :to="`/${ lang }`">
|
2016-11-09 08:15:40 +08:00
|
|
|
<img
|
|
|
|
src="../assets/images/element-logo.svg"
|
|
|
|
alt="element-logo"
|
|
|
|
class="nav-logo">
|
2016-11-18 16:49:07 +08:00
|
|
|
<img
|
|
|
|
src="../assets/images/element-logo-small.svg"
|
|
|
|
alt="element-logo"
|
|
|
|
class="nav-logo-small">
|
2016-11-09 08:15:40 +08:00
|
|
|
</router-link></h1>
|
2016-08-23 19:15:15 +08:00
|
|
|
<ul class="nav">
|
|
|
|
<li class="nav-item">
|
|
|
|
<router-link
|
|
|
|
active-class="active"
|
2016-11-10 21:46:55 +08:00
|
|
|
:to="`/${ lang }/guide`">{{ langConfig.guide }}
|
2016-08-23 19:15:15 +08:00
|
|
|
</router-link>
|
|
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
|
|
<router-link
|
|
|
|
active-class="active"
|
2016-11-10 21:46:55 +08:00
|
|
|
:to="`/${ lang }/component`">{{ langConfig.components }}
|
2016-08-23 19:15:15 +08:00
|
|
|
</router-link>
|
|
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
|
|
<router-link
|
2016-08-25 18:24:51 +08:00
|
|
|
active-class="active"
|
2016-11-10 21:46:55 +08:00
|
|
|
:to="`/${ lang }/resource`"
|
|
|
|
exact>{{ langConfig.resource }}
|
2016-08-23 19:15:15 +08:00
|
|
|
</router-link>
|
|
|
|
</li>
|
2016-11-10 21:46:55 +08:00
|
|
|
<li class="nav-item">
|
|
|
|
<span
|
|
|
|
class="nav-lang"
|
|
|
|
:class="{ 'active': lang === 'zh-CN' }"
|
|
|
|
@click="switchLang('zh-CN')">
|
|
|
|
中文
|
|
|
|
</span>
|
|
|
|
<span> / </span>
|
|
|
|
<span
|
|
|
|
class="nav-lang"
|
|
|
|
:class="{ 'active': lang === 'en-US' }"
|
|
|
|
@click="switchLang('en-US')">
|
|
|
|
En
|
|
|
|
</span>
|
|
|
|
</li>
|
2016-08-23 19:15:15 +08:00
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</header>
|
|
|
|
</div>
|
2016-08-22 17:42:04 +08:00
|
|
|
</template>
|
|
|
|
<script>
|
2016-11-10 21:46:55 +08:00
|
|
|
import compoLang from '../i18n/component.json';
|
|
|
|
|
2016-08-22 17:42:04 +08:00
|
|
|
export default {
|
2016-08-23 19:15:15 +08:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
active: '',
|
2016-09-13 20:02:33 +08:00
|
|
|
isHome: false,
|
2016-11-07 16:25:56 +08:00
|
|
|
headerStyle: {}
|
2016-08-23 19:15:15 +08:00
|
|
|
};
|
|
|
|
},
|
|
|
|
watch: {
|
2016-11-28 16:56:03 +08:00
|
|
|
'$route.path': {
|
|
|
|
immediate: true,
|
|
|
|
handler() {
|
|
|
|
this.isHome = /^home/.test(this.$route.name);
|
|
|
|
this.headerStyle.backgroundColor = `rgba(32, 160, 255, ${ this.isHome ? '0' : '1' })`;
|
|
|
|
}
|
2016-09-13 20:02:33 +08:00
|
|
|
}
|
2016-08-23 19:15:15 +08:00
|
|
|
},
|
2016-11-10 21:46:55 +08:00
|
|
|
computed: {
|
|
|
|
lang() {
|
|
|
|
return this.$route.path.split('/')[1] || 'zh-CN';
|
|
|
|
},
|
|
|
|
langConfig() {
|
|
|
|
return compoLang.filter(config => config.lang === this.lang)[0]['header'];
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
switchLang(targetLang) {
|
|
|
|
if (this.lang === targetLang) return;
|
2016-11-11 16:58:44 +08:00
|
|
|
localStorage.setItem('ELEMENT_LANGUAGE', targetLang);
|
2016-11-10 21:46:55 +08:00
|
|
|
this.$router.push(this.$route.path.replace(this.lang, targetLang));
|
|
|
|
}
|
|
|
|
},
|
2016-08-23 19:15:15 +08:00
|
|
|
mounted() {
|
|
|
|
function scroll(fn) {
|
|
|
|
window.addEventListener('scroll', () => {
|
2016-11-07 16:25:56 +08:00
|
|
|
fn();
|
2016-08-23 19:15:15 +08:00
|
|
|
}, false);
|
|
|
|
}
|
2016-11-07 16:25:56 +08:00
|
|
|
scroll(() => {
|
2016-09-13 20:02:33 +08:00
|
|
|
if (this.isHome) {
|
|
|
|
const threshold = 200;
|
2017-02-20 10:53:35 +08:00
|
|
|
let alpha = Math.min((document.documentElement.scrollTop || document.body.scrollTop), threshold) / threshold;
|
2016-09-13 20:02:33 +08:00
|
|
|
this.$refs.header.style.backgroundColor = `rgba(32, 160, 255, ${ alpha })`;
|
2016-08-23 19:15:15 +08:00
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
2016-08-22 17:42:04 +08:00
|
|
|
};
|
|
|
|
</script>
|