github
/
vue-manage-system
mirror of https://github.com/lin-xin/vue-manage-system
1
0
Fork 0
Code Issues Releases Wiki Activity

变更折叠侧边栏图标

pull/199/head
linxin 2019-08-17 15:03:16 +08:00
parent 3c2f4e891d
commit 49f8a69675
1 changed files with 142 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/common/Header.vue
View File

@ -2,7 +2,8 @@
<div class="header"> <div class="header">
<!-- 折叠按钮 --> <!-- 折叠按钮 -->
<div class="collapse-btn" @click="collapseChage"> <div class="collapse-btn" @click="collapseChage">
<i class="el-icon-menu"></i> <i v-if="!collapse" class="el-icon-s-fold"></i>
<i v-else class="el-icon-s-unfold"></i>
</div> </div>
<div class="logo">后台管理系统</div> <div class="logo">后台管理系统</div>
<div class="header-right"> <div class="header-right">
@ -15,7 +16,11 @@
</div> </div>
<!-- 消息中心 --> <!-- 消息中心 -->
<div class="btn-bell"> <div class="btn-bell">
<el-tooltip effect="dark" :content="message?`有${message}条未读消息`:`消息中心`" placement="bottom"> <el-tooltip
effect="dark"
:content="message?`有${message}条未读消息`:`消息中心`"
placement="bottom"
>
<router-link to="/tabs"> <router-link to="/tabs">
<i class="el-icon-bell"></i> <i class="el-icon-bell"></i>
</router-link> </router-link>
@ -23,11 +28,14 @@
<span class="btn-bell-badge" v-if="message"></span> <span class="btn-bell-badge" v-if="message"></span>
</div> </div>
<!-- 用户头像 --> <!-- 用户头像 -->
<div class="user-avator"><img src="../../assets/img/img.jpg"></div> <div class="user-avator">
<img src="../../assets/img/img.jpg" />
</div>
<!-- 用户名下拉菜单 --> <!-- 用户名下拉菜单 -->
<el-dropdown class="user-name" trigger="click" @command="handleCommand"> <el-dropdown class="user-name" trigger="click" @command="handleCommand">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
{{username}} <i class="el-icon-caret-bottom"></i> {{username}}
<i class="el-icon-caret-bottom"></i>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<a href="http://blog.gdfengshuo.com/about/" target="_blank"> <a href="http://blog.gdfengshuo.com/about/" target="_blank">
@ -52,7 +60,7 @@
fullscreen: false, fullscreen: false,
name: 'linxin', name: 'linxin',
message: 2 message: 2
} };
}, },
computed: { computed: {
username() { username() {
@ -64,7 +72,7 @@
// 用户名下拉菜单选择事件 // 用户名下拉菜单选择事件
handleCommand(command) { handleCommand(command) {
if (command == 'loginout') { if (command == 'loginout') {
localStorage.removeItem('ms_username') localStorage.removeItem('ms_username');
this.$router.push('/login'); this.$router.push('/login');
} }
}, },
@ -106,7 +114,7 @@
this.collapseChage(); this.collapseChage();
} }
} }
} };
</script> </script>
<style scoped> <style scoped>
.header { .header {
@ -142,7 +150,8 @@
margin-right: 5px; margin-right: 5px;
font-size: 24px; font-size: 24px;
} }
.btn-bell, .btn-fullscreen{ .btn-bell,
.btn-fullscreen {
position: relative; position: relative;
width: 30px; width: 30px;
height: 30px; height: 30px;