|
|
@@ -2,8 +2,8 @@
|
|
|
<div class="header">
|
|
|
<!-- 折叠按钮 -->
|
|
|
<div class="collapse-btn" @click="collapseChage">
|
|
|
- <i v-if="!collapse" class="el-icon-s-fold"></i>
|
|
|
- <i v-if="collapse" class="el-icon-s-unfold"></i>
|
|
|
+ <i v-if="!collapse" class="el-icon-s-fold"></i>
|
|
|
+ <i v-else class="el-icon-s-unfold"></i>
|
|
|
</div>
|
|
|
<div class="logo">后台管理系统</div>
|
|
|
<div class="header-right">
|
|
|
@@ -16,7 +16,11 @@
|
|
|
</div>
|
|
|
<!-- 消息中心 -->
|
|
|
<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">
|
|
|
<i class="el-icon-bell"></i>
|
|
|
</router-link>
|
|
|
@@ -24,11 +28,14 @@
|
|
|
<span class="btn-bell-badge" v-if="message"></span>
|
|
|
</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">
|
|
|
<span class="el-dropdown-link">
|
|
|
- {{username}} <i class="el-icon-caret-bottom"></i>
|
|
|
+ {{username}}
|
|
|
+ <i class="el-icon-caret-bottom"></i>
|
|
|
</span>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
<a href="http://blog.gdfengshuo.com/about/" target="_blank">
|
|
|
@@ -37,7 +44,7 @@
|
|
|
<a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
|
|
|
<el-dropdown-item>项目仓库</el-dropdown-item>
|
|
|
</a>
|
|
|
- <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
|
|
|
+ <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
</div>
|
|
|
@@ -45,142 +52,143 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
- import bus from '../common/bus';
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- collapse: false,
|
|
|
- fullscreen: false,
|
|
|
- name: 'linxin',
|
|
|
- message: 2
|
|
|
+import bus from '../common/bus';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ collapse: false,
|
|
|
+ fullscreen: false,
|
|
|
+ name: 'linxin',
|
|
|
+ message: 2
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ username() {
|
|
|
+ let username = localStorage.getItem('ms_username');
|
|
|
+ return username ? username : this.name;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 用户名下拉菜单选择事件
|
|
|
+ handleCommand(command) {
|
|
|
+ if (command == 'loginout') {
|
|
|
+ localStorage.removeItem('ms_username');
|
|
|
+ this.$router.push('/login');
|
|
|
}
|
|
|
},
|
|
|
- computed:{
|
|
|
- username(){
|
|
|
- let username = localStorage.getItem('ms_username');
|
|
|
- return username ? username : this.name;
|
|
|
- }
|
|
|
+ // 侧边栏折叠
|
|
|
+ collapseChage() {
|
|
|
+ this.collapse = !this.collapse;
|
|
|
+ bus.$emit('collapse', this.collapse);
|
|
|
},
|
|
|
- methods:{
|
|
|
- // 用户名下拉菜单选择事件
|
|
|
- handleCommand(command) {
|
|
|
- if(command == 'loginout'){
|
|
|
- localStorage.removeItem('ms_username')
|
|
|
- this.$router.push('/login');
|
|
|
+ // 全屏事件
|
|
|
+ handleFullScreen() {
|
|
|
+ let element = document.documentElement;
|
|
|
+ if (this.fullscreen) {
|
|
|
+ if (document.exitFullscreen) {
|
|
|
+ document.exitFullscreen();
|
|
|
+ } else if (document.webkitCancelFullScreen) {
|
|
|
+ document.webkitCancelFullScreen();
|
|
|
+ } else if (document.mozCancelFullScreen) {
|
|
|
+ document.mozCancelFullScreen();
|
|
|
+ } else if (document.msExitFullscreen) {
|
|
|
+ document.msExitFullscreen();
|
|
|
}
|
|
|
- },
|
|
|
- // 侧边栏折叠
|
|
|
- collapseChage(){
|
|
|
- this.collapse = !this.collapse;
|
|
|
- bus.$emit('collapse', this.collapse);
|
|
|
- },
|
|
|
- // 全屏事件
|
|
|
- handleFullScreen(){
|
|
|
- let element = document.documentElement;
|
|
|
- if (this.fullscreen) {
|
|
|
- if (document.exitFullscreen) {
|
|
|
- document.exitFullscreen();
|
|
|
- } else if (document.webkitCancelFullScreen) {
|
|
|
- document.webkitCancelFullScreen();
|
|
|
- } else if (document.mozCancelFullScreen) {
|
|
|
- document.mozCancelFullScreen();
|
|
|
- } else if (document.msExitFullscreen) {
|
|
|
- document.msExitFullscreen();
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (element.requestFullscreen) {
|
|
|
- element.requestFullscreen();
|
|
|
- } else if (element.webkitRequestFullScreen) {
|
|
|
- element.webkitRequestFullScreen();
|
|
|
- } else if (element.mozRequestFullScreen) {
|
|
|
- element.mozRequestFullScreen();
|
|
|
- } else if (element.msRequestFullscreen) {
|
|
|
- // IE11
|
|
|
- element.msRequestFullscreen();
|
|
|
- }
|
|
|
+ } else {
|
|
|
+ if (element.requestFullscreen) {
|
|
|
+ element.requestFullscreen();
|
|
|
+ } else if (element.webkitRequestFullScreen) {
|
|
|
+ element.webkitRequestFullScreen();
|
|
|
+ } else if (element.mozRequestFullScreen) {
|
|
|
+ element.mozRequestFullScreen();
|
|
|
+ } else if (element.msRequestFullscreen) {
|
|
|
+ // IE11
|
|
|
+ element.msRequestFullscreen();
|
|
|
}
|
|
|
- this.fullscreen = !this.fullscreen;
|
|
|
- }
|
|
|
- },
|
|
|
- mounted(){
|
|
|
- if(document.body.clientWidth < 1500){
|
|
|
- this.collapseChage();
|
|
|
}
|
|
|
+ this.fullscreen = !this.fullscreen;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if (document.body.clientWidth < 1500) {
|
|
|
+ this.collapseChage();
|
|
|
}
|
|
|
}
|
|
|
+};
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
- .header {
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
- width: 100%;
|
|
|
- height: 70px;
|
|
|
- font-size: 22px;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .collapse-btn{
|
|
|
- float: left;
|
|
|
- padding: 0 21px;
|
|
|
- cursor: pointer;
|
|
|
- line-height: 70px;
|
|
|
- }
|
|
|
- .header .logo{
|
|
|
- float: left;
|
|
|
- width:250px;
|
|
|
- line-height: 70px;
|
|
|
- }
|
|
|
- .header-right{
|
|
|
- float: right;
|
|
|
- padding-right: 50px;
|
|
|
- }
|
|
|
- .header-user-con{
|
|
|
- display: flex;
|
|
|
- height: 70px;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .btn-fullscreen{
|
|
|
- transform: rotate(45deg);
|
|
|
- margin-right: 5px;
|
|
|
- font-size: 24px;
|
|
|
- }
|
|
|
- .btn-bell, .btn-fullscreen{
|
|
|
- position: relative;
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- text-align: center;
|
|
|
- border-radius: 15px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .btn-bell-badge{
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: -2px;
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- border-radius: 4px;
|
|
|
- background: #f56c6c;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .btn-bell .el-icon-bell{
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .user-name{
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
- .user-avator{
|
|
|
- margin-left: 20px;
|
|
|
- }
|
|
|
- .user-avator img{
|
|
|
- display: block;
|
|
|
- width:40px;
|
|
|
- height:40px;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- .el-dropdown-link{
|
|
|
- color: #fff;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .el-dropdown-menu__item{
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+.header {
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ font-size: 22px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.collapse-btn {
|
|
|
+ float: left;
|
|
|
+ padding: 0 21px;
|
|
|
+ cursor: pointer;
|
|
|
+ line-height: 70px;
|
|
|
+}
|
|
|
+.header .logo {
|
|
|
+ float: left;
|
|
|
+ width: 250px;
|
|
|
+ line-height: 70px;
|
|
|
+}
|
|
|
+.header-right {
|
|
|
+ float: right;
|
|
|
+ padding-right: 50px;
|
|
|
+}
|
|
|
+.header-user-con {
|
|
|
+ display: flex;
|
|
|
+ height: 70px;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.btn-fullscreen {
|
|
|
+ transform: rotate(45deg);
|
|
|
+ margin-right: 5px;
|
|
|
+ font-size: 24px;
|
|
|
+}
|
|
|
+.btn-bell,
|
|
|
+.btn-fullscreen {
|
|
|
+ position: relative;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.btn-bell-badge {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: -2px;
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #f56c6c;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.btn-bell .el-icon-bell {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.user-name {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+.user-avator {
|
|
|
+ margin-left: 20px;
|
|
|
+}
|
|
|
+.user-avator img {
|
|
|
+ display: block;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+.el-dropdown-link {
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.el-dropdown-menu__item {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
</style>
|
林鑫
