240 lines
7.4 KiB
Vue
240 lines
7.4 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<div class="top-line">
|
|||
|
|
<div class="top-line-content">
|
|||
|
|
<span>您好，欢迎访问内蒙古文化云！</span>
|
|||
|
|
<div class="login-register-btn" v-if="isLogin">
|
|||
|
|
<router-link to="/">
|
|||
|
|
<img :src="userInfo.avatar" alt="" v-if="hasAvatar" class="user-avatar">
|
|||
|
|
<img src="@/assets/images/avatar.png" alt="" class="user-avatar">
|
|||
|
|
{{userInfo.name}}
|
|||
|
|
</router-link>
|
|||
|
|
<button @click="doLogout">退出登录</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="login-register-btn" v-else>
|
|||
|
|
<router-link to="/login" class="login">登录</router-link>
|
|||
|
|
<router-link to="/register">注册</router-link>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="header">
|
|||
|
|
<div class="logo-search">
|
|||
|
|
<router-link to="/" class="logo">
|
|||
|
|
<img src="@/assets/images/logo.png" alt="" class="logo-img">
|
|||
|
|
</router-link>
|
|||
|
|
<div class="search">
|
|||
|
|
<input type="text" class="search-input" placeholder="查找你感兴趣的内容" @keyup.enter="doSearch" v-model="keywords">
|
|||
|
|
<button class="search-btn" @click="doSearch">确定</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="nav">
|
|||
|
|
<ul class="nav-container">
|
|||
|
|
<li :class="{active: this.$route.path == '/'}">
|
|||
|
|
<router-link to="/" target="_blank">
|
|||
|
|
首页
|
|||
|
|
</router-link>
|
|||
|
|
</li>
|
|||
|
|
<li :class="{active: this.$route.path == '/dynamics' || this.$route.path == '/dynamicsDetail/' + this.$route.params.id}">
|
|||
|
|
<router-link to="/dynamics" target="_blank">
|
|||
|
|
文化动态
|
|||
|
|
</router-link>
|
|||
|
|
</li>
|
|||
|
|
<li :class="{active: this.$route.path == '/cultureActivity' || this.$route.path == '/cultureActivityDetail/' + this.$route.params.id}">
|
|||
|
|
<router-link to="/cultureActivity" target="_blank">
|
|||
|
|
文化活动
|
|||
|
|
</router-link>
|
|||
|
|
</li>
|
|||
|
|
<li :class="{active: this.$route.path == '/cultureVenue' || this.$route.path == '/cultureVenueDetail/' + this.$route.params.id}">
|
|||
|
|
<router-link to="/cultureVenue" target="_blank">
|
|||
|
|
文化场馆
|
|||
|
|
</router-link>
|
|||
|
|
</li>
|
|||
|
|
<li :class="{active: this.$route.path == '/artTrain' || this.$route.path == '/artTrainDetail/' + this.$route.params.id}">
|
|||
|
|
<router-link to="/artTrain" target="_blank">
|
|||
|
|
艺术培训
|
|||
|
|
</router-link>
|
|||
|
|
</li>
|
|||
|
|
<!--<li :class="{active: this.$route.path == '/distribution' || this.$route.path == '/distributionDetail/' + this.$route.params.id}">-->
|
|||
|
|
<!--<router-link to="/distribution" target="_blank">-->
|
|||
|
|
<!--预约配送-->
|
|||
|
|
<!--</router-link>-->
|
|||
|
|
<!--</li>-->
|
|||
|
|
<li :class="{active: this.$route.path == '/broadcast' || this.$route.path == '/broadcastDetail/' + this.$route.params.id}">
|
|||
|
|
<router-link to="/broadcast" target="_blank">
|
|||
|
|
共享直播
|
|||
|
|
</router-link>
|
|||
|
|
</li>
|
|||
|
|
<li :class="{active: this.$route.path == '/resource' || this.$route.path == '/resourceDetail/' + this.$route.params.id}">
|
|||
|
|
<router-link to="/resource" target="_blank">
|
|||
|
|
民间文学
|
|||
|
|
</router-link>
|
|||
|
|
</li>
|
|||
|
|
<li :class="{active: this.$route.path == '/volunteer' || this.$route.path == '/volunteerDetail/' + this.$route.params.id}">
|
|||
|
|
<router-link to="/volunteer" target="_blank">
|
|||
|
|
志愿服务
|
|||
|
|
</router-link>
|
|||
|
|
</li>
|
|||
|
|
<li :class="{active: this.$route.path == '/exhibition' || this.$route.path == '/exhibitionDetail/' + this.$route.params.id}">
|
|||
|
|
<router-link to="/exhibition" target="_blank">
|
|||
|
|
展览展示
|
|||
|
|
</router-link>
|
|||
|
|
</li>
|
|||
|
|
<li :class="{active: this.$route.path == '/travel' || this.$route.path == '/travelDetail/' + this.$route.params.id}">
|
|||
|
|
<router-link to="/travel" target="_blank">
|
|||
|
|
文化旅游
|
|||
|
|
</router-link>
|
|||
|
|
</li>
|
|||
|
|
<li :class="{active: this.$route.path == '/intangibleHeritage' || this.$route.path == '/intangibleHeritageDetail/' + this.$route.params.id}">
|
|||
|
|
<router-link to="/intangibleHeritage" target="_blank">
|
|||
|
|
非遗清单
|
|||
|
|
</router-link>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
let Base64 = require('js-base64').Base64
|
|||
|
|
let CryptoJS = require('crypto-js')
|
|||
|
|
export default {
|
|||
|
|
name: 'Header',
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
keywords: '',
|
|||
|
|
isLogin: false,
|
|||
|
|
userInfo: {}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
hasAvatar: function () {
|
|||
|
|
return this.userInfo.avatar !== ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
doSearch: function () {
|
|||
|
|
console.log(this.keywords)
|
|||
|
|
this.$router.push({
|
|||
|
|
path: 'searchResult',
|
|||
|
|
query: {
|
|||
|
|
keywords: this.keywords
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
checkLogin: function () {
|
|||
|
|
var token = localStorage.getItem('token')
|
|||
|
|
if (token) {
|
|||
|
|
this.isLogin = true
|
|||
|
|
var base64Token = Base64.decode(token)
|
|||
|
|
var key = CryptoJS.enc.Utf8.parse('CMXX_TOKEN_INFOS')
|
|||
|
|
var decrypt = CryptoJS.AES.decrypt(base64Token, key, {
|
|||
|
|
iv: CryptoJS.enc.Utf8.parse('16-Bytes--String'),
|
|||
|
|
mode: CryptoJS.mode.CBC,
|
|||
|
|
padding: CryptoJS.pad.Pkcs7
|
|||
|
|
})
|
|||
|
|
var result = JSON.parse(CryptoJS.enc.Utf8.stringify(decrypt))
|
|||
|
|
this.userInfo = result
|
|||
|
|
} else {
|
|||
|
|
this.isLogin = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
doLogout: function () {
|
|||
|
|
localStorage.clear()
|
|||
|
|
this.checkLogin()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted: function () {
|
|||
|
|
this.checkLogin()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="stylus" rel="stylesheet/stylus" scoped>
|
|||
|
|
.top-line
|
|||
|
|
background #01a9f8
|
|||
|
|
height 40px
|
|||
|
|
line-height 40px
|
|||
|
|
.top-line-content
|
|||
|
|
width 1200px
|
|||
|
|
margin 0 auto
|
|||
|
|
span
|
|||
|
|
font-size 14px
|
|||
|
|
color #fff
|
|||
|
|
.login-register-btn
|
|||
|
|
float right
|
|||
|
|
a
|
|||
|
|
font-size 14px
|
|||
|
|
color #fff
|
|||
|
|
img
|
|||
|
|
width 30px
|
|||
|
|
height 30px
|
|||
|
|
margin-top 5px
|
|||
|
|
margin-right 5px
|
|||
|
|
&.login
|
|||
|
|
margin-right 20px
|
|||
|
|
button
|
|||
|
|
background none
|
|||
|
|
border none
|
|||
|
|
outline none
|
|||
|
|
font-size 14px
|
|||
|
|
color #fff
|
|||
|
|
cursor pointer
|
|||
|
|
.header
|
|||
|
|
width 1200px
|
|||
|
|
margin 0 auto
|
|||
|
|
.logo-search
|
|||
|
|
overflow hidden
|
|||
|
|
padding 10px 0
|
|||
|
|
width 100%
|
|||
|
|
.logo
|
|||
|
|
display block
|
|||
|
|
float left
|
|||
|
|
.logo-img
|
|||
|
|
width 320px
|
|||
|
|
height 55px
|
|||
|
|
.search
|
|||
|
|
float right
|
|||
|
|
font-size 0
|
|||
|
|
border-radius 5px
|
|||
|
|
overflow hidden
|
|||
|
|
margin-top 7px
|
|||
|
|
.search-input
|
|||
|
|
width 200px
|
|||
|
|
height 30px
|
|||
|
|
padding-left 30px
|
|||
|
|
padding-right 5px
|
|||
|
|
background #f7f7f7 url("~@/assets/images/search.png") no-repeat 7px center
|
|||
|
|
background-size 16px 16px
|
|||
|
|
box-sizing border-box
|
|||
|
|
border none
|
|||
|
|
outline none
|
|||
|
|
font-size 14px
|
|||
|
|
vertical-align top
|
|||
|
|
.search-btn
|
|||
|
|
border none
|
|||
|
|
background #01a9f8
|
|||
|
|
outline none
|
|||
|
|
width 70px
|
|||
|
|
height 30px
|
|||
|
|
color #fff
|
|||
|
|
cursor pointer
|
|||
|
|
.nav
|
|||
|
|
margin 10px 0
|
|||
|
|
.nav-container
|
|||
|
|
overflow hidden
|
|||
|
|
li
|
|||
|
|
float left
|
|||
|
|
width 100px
|
|||
|
|
line-height 30px
|
|||
|
|
cursor pointer
|
|||
|
|
text-align center
|
|||
|
|
border-bottom 2px solid transparent
|
|||
|
|
&:hover
|
|||
|
|
border-bottom 2px solid #01a9f8
|
|||
|
|
&.active
|
|||
|
|
border-bottom 2px solid #01a9f8
|
|||
|
|
a
|
|||
|
|
display block
|
|||
|
|
</style>
|