commit

src/components/personalCenter/index.vue

@@ -3,8 +3,13 @@
     <div class="header-left">
       <span class="logo" @click="toHome" title="回到首页"></span>
     </div>
+    <div class="header-center">
+        <span style="color: #fff; line-height: 65px; font-size: 20px;">
+            标准法规管理系统  standard and regulations management system
+          </span>
+    </div>
     <div class="header-right">
-      <span class="date">{{currentTime}}</span>
+      <span class="date">{{ currentTime }}</span>
       <span class="divide-line"> | </span>
       <span class="user-img"></span>
       <span class="user">{{ $store.getters.userInfo.uName }}</span>
@@ -16,7 +21,7 @@
         >
           <div class="iconfont" style="color: #fff;"><i class="el-icon-arrow-down"></i></div>
           <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item name="logout" command="logout">{{$t('m.exit')}}</el-dropdown-item>
+            <el-dropdown-item name="logout" command="logout">{{ $t("m.exit") }}</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -25,78 +30,84 @@
 </template>
 
 <script>
-import {mapGetters, mapMutations} from 'vuex'
+import { mapGetters, mapMutations } from "vuex";
+
 export default {
-  name: 'useImg',
-  data () {
+  name: "useImg",
+  data() {
     return {
       // 当前系统时间
-      currentTime: '',
+      currentTime: "",
       userInfoVisible: false
-    }
+    };
   },
   methods: {
-    toHome () {
-      this.$router.push('/home2')
+    toHome() {
+      this.$router.push("/home2");
     },
     // 获取当前时间
-    getTime () {
-      this.currentTime = this.$dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss')
+    getTime() {
+      this.currentTime = this.$dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss");
     },
     // 用户菜单栏点击
-    userInfoOpen (name) {
+    userInfoOpen(name) {
       switch (name) {
-        case 'personal':
-          this.$router.push('/personal')
-          break
-        case 'logout':
-          this.$confirm('您确认要退出吗？', '提示', {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning',
-            confirmButtonClass: 'common-button-primary',
+        case "personal":
+          this.$router.push("/personal");
+          break;
+        case "logout":
+          this.$confirm("您确认要退出吗？", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+            confirmButtonClass: "common-button-primary",
             roundButton: true
           }).then(() => {
-            this.userLoginOut()
-          }).catch(() => {})
-          break
+            this.userLoginOut();
+          }).catch(() => {
+          });
+          break;
       }
     },
     // 用户退出登录
-    userLoginOut () {
-      this.$http.get('logout', {}, {
+    userLoginOut() {
+      this.$http.get("logout", {}, {
         _this: this
       }, res => {
-        this.$store.dispatch('logout')
-        this.$router.push('/sign_in')
-      }, e => {})
+        this.$store.dispatch("logout");
+        this.$router.push("/sign_in");
+      }, e => {
+      });
     },
-    ...mapMutations(['setProcess', 'setDynamicTotal'])
+    ...mapMutations(["setProcess", "setDynamicTotal"])
   },
-  mounted () {
-    this.getTime()
+  mounted() {
+    this.getTime();
   },
   computed: {
     // 用户头像
-    userAvator () {
-      return this.$store.getters.userInfo.avator || require('@/assets/images/avator_default.png')
+    userAvator() {
+      return this.$store.getters.userInfo.avator || require("@/assets/images/avator_default.png");
     },
-    uName () {
-      return this.$store.getters.userInfo.uName
+    uName() {
+      return this.$store.getters.userInfo.uName;
     },
-    ...mapGetters(['getDynamicTotal', 'getMenuList'])
+    ...mapGetters(["getDynamicTotal", "getMenuList"])
   }
-}
+};
 </script>
 
 <style lang="less" scoped>
-.header{
+.header {
   display: flex;
   justify-content: space-between;
+  background-color: #171E4A;
   color: #fff;
-  .header-left{
+
+  .header-left {
     text-align: left;
-    width: 50%;
+    //width: 50%;
+
     .logo {
       display: inline-block;
       width: 160px;
@@ -106,19 +117,25 @@ export default {
       cursor: pointer;
     }
   }
-  .header-right{
-    width: 49%;
+  .header-center{
+    width: 70%;
+  }
+  .header-right {
+    //width: 49%;
     text-align: right;
     line-height: 61px;
     height: 61px;
     display: flex;
+    margin-right: 20px;
     justify-content: flex-end;
     align-items: center;
-    .date{
+
+    .date {
       display: inline-block;
       margin-right: 20px;
     }
-    .user-img{
+
+    .user-img {
       display: inline-block;
       width: 20px;
       height: 21px;
@@ -126,11 +143,13 @@ export default {
       background-size: 100% 100%;
       margin-right: 15px;
     }
-    .divide-line{
+
+    .divide-line {
       display: inline-block;
       margin-right: 20px;
     }
-    .user{
+
+    .user {
       display: inline-block;
     }
   }