<template>
|
<div class="container header-section">
|
<router-link tag="img" to="/index" src="/static/user/logo.png" alt="logo" class="logo" active-class="active">首页</router-link>
|
<ul class="nav">
|
<router-link tag="li" to="/index" class="item" active-class="active">首页</router-link>
|
<router-link tag="li" to="/store-search" class="item" active-class="active">门店查询</router-link>
|
<router-link tag="li" to="/business" class="item" active-class="active">产品与业务</router-link>
|
<router-link tag="li" to="/upload-card-id" class="item" active-class="active">身份证上传</router-link>
|
<router-link tag="li" to="/contact-us" class="item" active-class="active">关于我们</router-link>
|
</ul>
|
<div class="nav-right">
|
<el-button type="primary" icon="el-icon-yrt-wo" @click="login">会员登录</el-button>
|
<el-button type="text">中文版</el-button>
|
<el-button type="text">English</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
methods: {
|
login() {
|
location.href = "/user.html#/login";
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.header-section {
|
.logo {
|
height: 50px;
|
vertical-align: -webkit-baseline-middle;
|
cursor: pointer;
|
}
|
.nav {
|
display: inline-block;
|
margin-left: 50px;
|
li {
|
display: inline-block;
|
margin: 0px 15px;
|
&.item {
|
cursor: pointer;
|
}
|
&:hover {
|
color: #409eff;
|
border-bottom: 1px solid #409eff;
|
}
|
&.active {
|
color: #409eff;
|
}
|
}
|
}
|
.nav-right {
|
float: right;
|
padding-top: 10px;
|
}
|
}
|
/* 手机屏 */
|
@media screen and (max-width: 480px) {
|
.header-section{
|
padding-left: 0;
|
padding-right: 0;
|
.logo {
|
height: 30px;
|
vertical-align: -webkit-baseline-middle;
|
cursor: pointer;
|
}
|
.nav {
|
display: inline-block;
|
position: absolute;
|
line-height: 2;
|
left: 70px;
|
margin-left: 5px;
|
}
|
.nav-right{
|
display: none;
|
}
|
}
|
}
|
</style>
|
