1

src/components/common/Header copy.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="header">
+    <!-- 折叠按钮 -->
+    <div class="collapse-btn" @click="collapseChage">
+      <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">
+      <div class="header-user-con">
+        <!-- 全屏显示 -->
+        <div class="btn-fullscreen" @click="handleFullScreen">
+          <el-tooltip effect="dark" :content="fullscreen ? `取消全屏` : `全屏`" placement="bottom">
+            <i class="el-icon-rank"></i>
+          </el-tooltip>
+        </div>
+        <!-- 用户头像 -->
+        <div class="user-avator">
+          <img src="../../assets/img/img.jpg" />
+        </div>
+        <!-- 用户名下拉菜单 -->
+        <el-dropdown class="user-name" trigger="hover">
+          <span class="el-dropdown-link">
+            {{ user.name || '游客' }}
+          </span>
+        </el-dropdown>
+        <div class="btn">
+          <button @click="loginout"><i class="el-icon-switch-button"></i></button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import bus from '../common/bus';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  data() {
+    return {
+      collapse: false,
+      fullscreen: false,
+    };
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  methods: {
+    // 用户名下拉菜单选择事件
+    loginout() {
+      localStorage.removeItem('token');
+      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;
+    },
+  },
+  mounted() {
+    if (document.body.clientWidth < 1500) {
+      this.collapseChage();
+    }
+  },
+};
+</script>
+<style scoped>
+.header {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 60px;
+  font-size: 22px;
+  color: #fff;
+}
+.collapse-btn {
+  float: left;
+  padding: 0 21px;
+  cursor: pointer;
+  line-height: 60px;
+}
+.header .logo {
+  float: left;
+  width: 25%;
+  line-height: 60px;
+}
+.header-right {
+  float: right;
+  padding-right: 50px;
+}
+.header-user-con {
+  display: flex;
+  height: 60px;
+  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;
+}
+.btn {
+  margin: 0 0 0 10px;
+}
+.btn button:hover {
+  cursor: pointer;
+  background-color: #409eff;
+  color: #fff;
+}
+.btn button i {
+  font-size: 25px;
+}
+</style>

src/components/common/Header.vue

@@ -1,86 +1,48 @@
 <template>
-  <div class="header">
-    <!-- 折叠按钮 -->
-    <div class="collapse-btn" @click="collapseChage">
-      <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">
-      <div class="header-user-con">
-        <!-- 全屏显示 -->
-        <div class="btn-fullscreen" @click="handleFullScreen">
-          <el-tooltip effect="dark" :content="fullscreen ? `取消全屏` : `全屏`" placement="bottom">
-            <i class="el-icon-rank"></i>
-          </el-tooltip>
-        </div>
-        <!-- 用户头像 -->
-        <div class="user-avator">
+  <div id="Header">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="12" class="left">
+          <div class="collapse-btn" @click="collapseChage">
+            <i v-if="!collapse" class="el-icon-s-fold"></i>
+            <i v-else class="el-icon-s-unfold"></i>
+          </div>
+          <div class="logo">成果评价系统-管理中心</div>
+        </el-col>
+        <el-col :span="12" class="right">
           <img src="../../assets/img/img.jpg" />
-        </div>
-        <!-- 用户名下拉菜单 -->
-        <el-dropdown class="user-name" trigger="hover">
-          <span class="el-dropdown-link">
-            {{ user.name || '游客' }}
-          </span>
-        </el-dropdown>
-        <div class="btn">
+          <span> {{ user ? user.name : '游客' }}</span>
           <button @click="loginout"><i class="el-icon-switch-button"></i></button>
-        </div>
-      </div>
-    </div>
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
+
 <script>
-import bus from '../common/bus';
 import { mapState, createNamespacedHelpers } from 'vuex';
+import bus from '../common/bus';
 export default {
-  data() {
+  name: 'Header',
+  props: {},
+  components: {},
+  data: function() {
     return {
       collapse: false,
       fullscreen: false,
     };
   },
-  computed: {
-    ...mapState(['user']),
-  },
+  created() {},
   methods: {
-    // 用户名下拉菜单选择事件
-    loginout() {
-      localStorage.removeItem('token');
-      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;
+    // 用户名下拉菜单选择事件
+    loginout() {
+      localStorage.removeItem('token');
+      this.$router.push('/login');
     },
   },
   mounted() {
@@ -88,92 +50,71 @@ export default {
       this.collapseChage();
     }
   },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
 };
 </script>
-<style scoped>
-.header {
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  height: 60px;
-  font-size: 22px;
-  color: #fff;
-}
-.collapse-btn {
-  float: left;
-  padding: 0 21px;
-  cursor: pointer;
-  line-height: 60px;
-}
-.header .logo {
-  float: left;
-  width: 25%;
-  line-height: 60px;
-}
-.header-right {
-  float: right;
-  padding-right: 50px;
-}
-.header-user-con {
-  display: flex;
-  height: 60px;
-  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;
-}
-.btn {
-  margin: 0 0 0 10px;
-}
-.btn button:hover {
-  cursor: pointer;
-  background-color: #409eff;
-  color: #fff;
-}
-.btn button i {
-  font-size: 25px;
+
+<style lang="less" scoped>
+.main {
+  background-color: #242f42;
+  .left {
+    .collapse-btn {
+      float: left;
+      padding: 2px 21px;
+      cursor: pointer;
+      line-height: 60px;
+      i {
+        font-size: 22px;
+        color: #fff;
+      }
+    }
+    .logo {
+      float: left;
+      width: 25%;
+      line-height: 60px;
+      font-size: 22px;
+      color: #fff;
+    }
+  }
+  .right {
+    text-align: right;
+    padding: 0 2%;
+    img {
+      width: 50px;
+      height: 50px;
+      border-radius: 90px;
+      position: relative;
+      top: 5px;
+    }
+    span {
+      position: relative;
+      top: -12px;
+      font-size: 18px;
+      color: #fff;
+    }
+    button {
+      top: -10px;
+      position: relative;
+      left: 5px;
+      i {
+        font-size: 20px;
+      }
+    }
+    button:hover {
+      cursor: pointer;
+    }
+  }
 }
 </style>