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%;
|
|
|
|
}
|
|
|
|
|
|
|
|
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;
|
|
|
|
border: 1px solid #fff;
|
|
|
|
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-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-08-23 19:15:15 +08:00
|
|
|
|
|
|
|
a {
|
|
|
|
text-decoration: none;
|
|
|
|
color: #fff;
|
|
|
|
display: block;
|
|
|
|
padding: 0 20px;
|
|
|
|
|
|
|
|
&.active:before {
|
|
|
|
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
|
|
|
}
|
|
|
|
.header-fixed {
|
|
|
|
position: fixed;
|
|
|
|
top: -80px;
|
2016-09-13 20:02:33 +08:00
|
|
|
box-shadow: 0 2px 6px 0 rgba(50, 63, 87, 0.25);
|
2016-08-23 19:15:15 +08:00
|
|
|
}
|
|
|
|
.header-hangUp {
|
|
|
|
top: 0;
|
2016-08-22 17:42:04 +08:00
|
|
|
}
|
2016-09-13 20:02:33 +08:00
|
|
|
.header-home {
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
background-color: rgba(32, 160, 255, 0);
|
|
|
|
}
|
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-09-13 20:02:33 +08:00
|
|
|
'header-home': isHome,
|
2016-08-23 19:15:15 +08:00
|
|
|
'header-fixed': isFixed,
|
|
|
|
'header-hangUp': hangUp
|
|
|
|
}">
|
|
|
|
<div class="container">
|
2016-09-07 12:17:16 +08:00
|
|
|
<h1><router-link to="/">Element</router-link></h1>
|
2016-08-23 19:15:15 +08:00
|
|
|
<ul class="nav">
|
|
|
|
<li class="nav-item">
|
|
|
|
<router-link
|
|
|
|
active-class="active"
|
|
|
|
to="/guide/design"
|
|
|
|
exact>指南
|
|
|
|
</router-link>
|
|
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
|
|
<router-link
|
|
|
|
active-class="active"
|
2016-08-30 19:30:58 +08:00
|
|
|
to="/component/layout"
|
2016-08-23 19:15:15 +08:00
|
|
|
exact>组件
|
|
|
|
</router-link>
|
|
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
|
|
<router-link
|
2016-08-25 18:24:51 +08:00
|
|
|
active-class="active"
|
2016-08-23 19:15:15 +08:00
|
|
|
to="/resource"
|
|
|
|
exact>资源
|
|
|
|
</router-link>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</header>
|
|
|
|
</div>
|
2016-08-22 17:42:04 +08:00
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
2016-08-23 19:15:15 +08:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
active: '',
|
|
|
|
isFixed: false,
|
2016-09-13 20:02:33 +08:00
|
|
|
isHome: false,
|
2016-08-23 19:15:15 +08:00
|
|
|
headerStyle: {},
|
|
|
|
hangUp: false
|
|
|
|
};
|
|
|
|
},
|
|
|
|
watch: {
|
2016-09-13 20:02:33 +08:00
|
|
|
'$route.path'(val) {
|
|
|
|
this.isHome = val === '/';
|
|
|
|
this.headerStyle.backgroundColor = `rgba(32, 160, 255, ${ this.isHome ? '0' : '1' })`;
|
|
|
|
}
|
2016-08-23 19:15:15 +08:00
|
|
|
},
|
|
|
|
mounted() {
|
2016-09-13 20:02:33 +08:00
|
|
|
this.isHome = this.$route.path === '/';
|
2016-08-23 19:15:15 +08:00
|
|
|
function scroll(fn) {
|
|
|
|
var beforeScrollTop = document.body.scrollTop;
|
|
|
|
|
|
|
|
window.addEventListener('scroll', () => {
|
|
|
|
const afterScrollTop = document.body.scrollTop;
|
|
|
|
var delta = afterScrollTop - beforeScrollTop;
|
|
|
|
|
|
|
|
if (delta === 0) return false;
|
|
|
|
|
|
|
|
fn(delta > 0 ? 'down' : 'up');
|
|
|
|
beforeScrollTop = afterScrollTop;
|
|
|
|
}, false);
|
|
|
|
}
|
|
|
|
scroll((direction) => {
|
2016-09-13 20:02:33 +08:00
|
|
|
if (this.isHome) {
|
|
|
|
const threshold = 200;
|
|
|
|
let alpha = Math.min(document.body.scrollTop, threshold) / threshold;
|
|
|
|
this.$refs.header.style.backgroundColor = `rgba(32, 160, 255, ${ alpha })`;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.headerStyle.backgroundColor = 'rgba(32, 160, 255, 1)';
|
2016-08-23 19:15:15 +08:00
|
|
|
const bounding = this.$el.getBoundingClientRect();
|
|
|
|
if (bounding.bottom < 0) {
|
|
|
|
this.isFixed = true;
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.headerStyle.transition = 'all .5s ease';
|
|
|
|
});
|
|
|
|
}
|
|
|
|
if (bounding.top === 0) {
|
|
|
|
this.isFixed = false;
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.headerStyle.transition = '';
|
|
|
|
});
|
|
|
|
}
|
|
|
|
this.hangUp = direction === 'up';
|
|
|
|
});
|
|
|
|
}
|
2016-08-22 17:42:04 +08:00
|
|
|
};
|
|
|
|
</script>
|