diff --git a/src/components/common/Header.vue b/src/components/common/Header.vue index 16e0656..88af122 100644 --- a/src/components/common/Header.vue +++ b/src/components/common/Header.vue @@ -1,25 +1,45 @@ @@ -29,7 +49,9 @@ data() { return { collapse: false, - name: 'linxin' + fullscreen: false, + name: 'linxin', + message: 2 } }, computed:{ @@ -39,15 +61,44 @@ } }, methods:{ + // 用户名下拉菜单选择事件 handleCommand(command) { if(command == 'loginout'){ localStorage.removeItem('ms_username') this.$router.push('/login'); } }, + // 侧边栏折叠 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(); + } + } + this.fullscreen = !this.fullscreen; } } } @@ -59,13 +110,14 @@ width: 100%; height: 70px; font-size: 22px; - line-height: 70px; + color: #fff; } .collapse-btn{ float: left; padding: 0 21px; cursor: pointer; + line-height: 70px; } .collapse-btn:hover{ background: rgb(40,52,70); @@ -73,30 +125,59 @@ .header .logo{ float: left; width:250px; - /* text-align: center; */ + line-height: 70px; } - .user-info { + .header-right{ float: right; padding-right: 50px; - font-size: 16px; - color: #fff; } - .user-info .el-dropdown-link{ + .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; - display: inline-block; - padding-left: 50px; - color: #fff; + width: 30px; + height: 30px; + text-align: center; + border-radius: 15px; cursor: pointer; - vertical-align: middle; } - .user-info .user-logo{ + .btn-bell-badge{ position: absolute; - left:0; - top:15px; + 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; }