<template>
|
|
<div class="header" :style="{height: screenHeight}">
|
<!-- 导航栏 -->
|
<div class="navbar">
|
<div class="item-list">
|
<router-link class="navbar__item" to="/building">强军思想</router-link>
|
<router-link class="navbar__item" to="/building">军委机关</router-link>
|
<router-link class="navbar__item" to="/building">中心概览</router-link>
|
<router-link class="navbar__item" to="/film_cn">影视部</router-link>
|
<router-link class="navbar__item" to="/building">文艺部</router-link>
|
<router-link class="navbar__item" to="/building">军乐团</router-link>
|
<router-link class="navbar__item" to="/building">文艺咨询</router-link>
|
<router-link class="navbar__item" to="/building">官兵信箱</router-link>
|
</div>
|
</div>
|
<!-- logo -->
|
<div class="logo" />
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
name: 'HomeHeader',
|
data() {
|
return {
|
screenHeight: document.documentElement.clientHeight - 8 + 'px'
|
}
|
},
|
created() {
|
window.onresize = () => {
|
this.getScreenHeight()
|
};
|
},
|
methods: {
|
getScreenHeight() {
|
this.screenHeight = document.documentElement.clientHeight - 8 + 'px'
|
}
|
},
|
destoryed() {
|
window.onresize = null
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "~@/styles/variables.scss";
|
|
.header {
|
width: 100%;
|
min-height: 600px;
|
background-color: #921515;
|
background-image: url('../../../assets/home/home-top-bg-3x.png');
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
display: flex;
|
flex-direction: column-reverse;
|
.logo {
|
margin: 0 auto;
|
width: 890px;
|
height: 160px;
|
background-image: url('../../../assets/home/home_header/logo.png');
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
margin-bottom: 20px;
|
}
|
.navbar {
|
width: 100%;
|
height: 58px;
|
line-height: 58px;
|
background: rgb(120, 35, 37);
|
text-align: center;
|
.item-list {
|
width: $appWidth;
|
margin: 0 auto;
|
display: flex;
|
justify-content: space-between;
|
color: rgb(210, 213, 216);
|
font-size: 19.5px;
|
}
|
}
|
}
|
</style>
|
