本篇博文开始我将带领所有玩家一起完成美食杰项目,就算是小白也能做到.
这篇将是记录今天下午完成的首页中的header部分
下面这组代码是首页template的结构:
<template>
<el-header style="height: auto;">
<div class="header">
<div class="header_c">
<el-row type="flex" justify="start" align="middle">
<el-col :span="6">
<a href="" class="logo">
</a>
</el-col>
<el-col :span="10" :offset="2"></el-col>
<el-col :span="6" :offset="3" class="avatar-box" v-if="isShow">
<router-link :to="{name:'space',query:{userId:this.$store.state.userInfo.userId}}">
<el-avatar style="vertical-align: middle;" shape="square" size="medium" :src="this.$store.state.userInfo.avatar" ></el-avatar>
<!-- -->
</router-link>
<router-link to="" class="user-name"></router-link>
<router-link :to="{name:'create'}" class="collection">发布菜谱</router-link>
<a href="javascript:;" class="collection" @click="remove()">退出</a>
</el-col>
<el-col :span="6" :offset="3" class="avatar-box" v-if="!isShow">
<router-link :to='{name:"login"}' class="user-name">登录</router-link>
<router-link :to="{name:'login'}" class="collection">注册</router-link>
</el-col>
</el-row>
</div>
</div>
<div class="nav-box">
<div class="nav_c">
<Menus></Menus>
</div>
</div>
</el-header>
</template>
CSS样式
<style lang="stylus">
.header
height 129px
background-color #c90000
.logo
display: block;
height: 129px;
width: 184px;
background url(https://s1.c.meishij.net/n/images/logo2.png) -15px 9px no-repeat;
.header_c, .nav_c
width 990px
margin 0 auto
.nav-box
height 60px
background-color #fff;
box-shadow 10px 0px 10px rgba(0,0,0,0.3)
.user-name
margin-left 5px
color #fff
.collection
margin-left 5px
color #fff
</style>
JavaScript交互
<script>
import Menus from '@/components/menus'
import {login_out} from '@/service/api'
export default {
name: 'headers',
components: {Menus},
computed:{
isShow(){
const token = localStorage.getItem('token')
if(token){
return true
}else{
return false
}
}
},
methods:{
remove(){
login_out().then(()=>{
if(confirm('确定退出')){
localStorage.removeItem('token')
this.$store.commit('chnageUserInfo','')
this.$router.push({
name:'home'
})
}
})
}
}
}
</script>