页头信息修改

@@ -2,7 +2,8 @@
   <div class="navbar-con">
     <div class="navbar" v-theme.background="mTheme">
       <div class="logo">
-        <img v-if="logo" :src="logo" class="header-logo">
+        <img v-if="logo" :src="logo" class="header-logo" />
+        <h4>{{ userInfo.districtName }}不动产登记平台</h4>
       </div>
       <!-- <div class="backdrop">
         <theme style="float: right;height: 26px;width: 26px;margin-top: 26px;" @change="themeChange" />
@@ -10,274 +11,314 @@
       <div class="right-menu">
         <!-- <svg-icon class="function" icon-class='function' /> -->
         <div class="avatar-wrapper">
-          <span style="padding-right:10px">{{ name }}</span>
+          <p>
+            <span style="padding-right: 10px">{{
+              userInfo.departmentName
+            }}</span>
+            <span style="padding-right: 10px">{{ userInfo.name }}</span>
+          </p>
           <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
         </div>
-        <svg-icon class="shutdown" @click.native="logout" icon-class='shutdown' />
+        <svg-icon
+          class="shutdown"
+          @click.native="logout"
+          icon-class="shutdown"
+        />
       </div>
     </div>
-    <NoticeBar class="NoticeBar" :noticeList="noticeList" v-if="noticeList.length > 0" />
+    <NoticeBar
+      class="NoticeBar"
+      :noticeList="noticeList"
+      v-if="noticeList.length > 0"
+    />
   </div>
 </template>
 <script>
-  import axios from 'axios'
-  import Cookies from 'js-cookie'
-  import { mapGetters } from 'vuex'
-  import NoticeBar from '@/components/NoticeBar/index'
-  import { getHomeNoticeList } from "@/api/home"
-  import { setToken } from "@/utils/util";
-  export default {
-    components: {
-      NoticeBar
+import axios from "axios";
+import Cookies from "js-cookie";
+import { mapGetters } from "vuex";
+import NoticeBar from "@/components/NoticeBar/index";
+import { getHomeNoticeList } from "@/api/home";
+import { setToken } from "@/utils/util";
+export default {
+  components: {
+    NoticeBar,
+  },
+  computed: {
+    ...mapGetters(["sidebar", "avatar", "name", "userInfo"]),
+    baseUrl() {
+      return window._config.baseUrl;
     },
-    computed: {
-      ...mapGetters(['sidebar', 'avatar', 'name']),
-      baseUrl () {
-        return window._config.baseUrl;
-      },
-    },
-    data () {
-      return {
-        logo: require('../../image/logo.png'),
-        noticeList: []
+  },
+  data() {
+    return {
+      logo: require("../../image/bdclogo.png"),
+      noticeList: [],
+    };
+  },
+  created() {
+    this.queryNoticeList();
+  },
+  mounted() {
+    let that = this;
+    window.addEventListener("message", function (messageEvent) {
+      if (messageEvent.data.update) {
+        that.queryNoticeList();
       }
-    },
-    created () {
-      this.queryNoticeList()
-    },
-    mounted () {
-      let that = this
-      window.addEventListener('message', function (messageEvent) {
-        if (messageEvent.data.update) {
-          that.queryNoticeList()
+    });
+  },
+  destroyed() {
+    window.removeEventListener("message");
+  },
+  methods: {
+    /**
+     * @description: queryNoticeList
+     * @author: renchao
+     */
+    queryNoticeList() {
+      getHomeNoticeList().then((res) => {
+        if (res.result) {
+          this.noticeList = res.result.noticeList;
         }
-      })
+      });
     },
-    destroyed () {
-      window.removeEventListener('message')
+    /**
+     * @description: logout
+     * @author: renchao
+     */
+    logout() {
+      axios
+        .post(window._config.services.management + "/management/logout")
+        .then(() => {
+          setToken(undefined);
+          sessionStorage.removeItem("token");
+          localStorage.setItem("dj-location", window.location.href);
+          window.location.href =
+            window._config.casBaseURL +
+            "/logout?service=" +
+            encodeURIComponent(window.location.href);
+        });
     },
-    methods: {
-      /**
-       * @description: queryNoticeList
-       * @author: renchao
-       */
-      queryNoticeList () {
-        getHomeNoticeList().then(res => {
-          if (res.result) {
-            this.noticeList = res.result.noticeList
-          }
-        })
-      },
-      /**
-       * @description: logout
-       * @author: renchao
-       */
-      logout () {
-        axios.post(window._config.services.management + "/management/logout").then(() => {
-          setToken(undefined)
-          sessionStorage.removeItem('token')
-          localStorage.setItem('dj-location', window.location.href)
-          window.location.href = window._config.casBaseURL + '/logout?service=' + encodeURIComponent(window.location.href);
-        })
-      },
 
-      /**
-       * @description: themeChange
-       * @param {*} val
-       * @author: renchao
-       */
-      themeChange (val) {
-        this.$store.dispatch('app/updateTheme', val)
-      },
-      searchMessageCenter () {
-        this.$router.push({ name: 'messagecenter' })
-      },
-      /**
-       * @description: handleCommand
-       * @param {*} command
-       * @author: renchao
-       */
-      handleCommand (command) {
-        if (command == 'a') {
-          //个人中心
-          this.$router.push({ name: 'personal' })
-        }
+    /**
+     * @description: themeChange
+     * @param {*} val
+     * @author: renchao
+     */
+    themeChange(val) {
+      this.$store.dispatch("app/updateTheme", val);
+    },
+    searchMessageCenter() {
+      this.$router.push({ name: "messagecenter" });
+    },
+    /**
+     * @description: handleCommand
+     * @param {*} command
+     * @author: renchao
+     */
+    handleCommand(command) {
+      if (command == "a") {
+        //个人中心
+        this.$router.push({ name: "personal" });
       }
-    }
-  }
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .navbar-con {
-    position: relative;
+.navbar-con {
+  position: relative;
+}
+
+.NoticeBar {
+  position: absolute;
+  bottom: 0;
+}
+
+.el-dropdown-menu {
+  padding: 0 !important;
+  border: 1px solid #ebeef5;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 4px 0 0 4px 4px;
+
+  .el-dropdown-menu__item {
+    text-align: center;
+    margin-top: 0 !important;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #4a4a4a;
+    width: 140px;
+    height: 36px;
+    line-height: 36px;
   }
 
-  .NoticeBar {
-    position: absolute;
-    bottom: 0;
+  .el-dropdown-menu__item:nth-child(6) {
+    border-top: 1px solid #ebeef5;
   }
 
-  .el-dropdown-menu {
-    padding: 0 !important;
-    border: 1px solid #ebeef5;
-    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-    border-radius: 4px 0 0 4px 4px;
+  .popper__arrow {
+    top: -11px !important;
+    left: 110px !important;
+    transform: rotate(0deg) scale(2);
+  }
 
-    .el-dropdown-menu__item {
-      text-align: center;
-      margin-top: 0 !important;
-      font-size: 14px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #4a4a4a;
-      width: 140px;
-      height: 36px;
-      line-height: 36px;
-    }
+  .el-dropdown-menu__item:not(.is-disabled):hover,
+  .el-dropdown-menu__item:focus {
+    background: #f6f7f9;
+    color: #4a4a4a;
+  }
+}
 
-    .el-dropdown-menu__item:nth-child(6) {
-      border-top: 1px solid #ebeef5;
-    }
+.navbar {
+  height: $headerHeight;
+  overflow: hidden;
+  position: relative;
+  background: #fff;
+  // background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色
+  box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08);
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  justify-content: space-between;
 
-    .popper__arrow {
-      top: -11px !important;
-      left: 110px !important;
-      transform: rotate(0deg) scale(2);
+  .logo {
+    // margin-top: -20px;
+    .header-logo {
+      width: 40px;
+      float: left;
+      vertical-align: middle;
     }
-
-    .el-dropdown-menu__item:not(.is-disabled):hover,
-    .el-dropdown-menu__item:focus {
-      background: #f6f7f9;
-      color: #4a4a4a;
+    h4 {
+      float: left;
+      vertical-align: middle;
+      line-height: 40px;
+      font-size: 22px;
+      color: #fff;
+      text-indent: 6px;
+      letter-spacing: 2px;
     }
   }
 
-  .navbar {
+  .backdrop {
+    flex: 1;
+    width: 60%;
+    background: url("../../image/backdrop.png");
+    background-size: 100% 100%;
     height: $headerHeight;
-    overflow: hidden;
-    position: relative;
-    background: #fff;
-    // background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色
-    box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08);
-    display: flex;
-    align-items: center;
-    padding: 0 20px;
-    justify-content: space-between;
+  }
 
-    .header-logo {
-      width: 300px;
-    }
+  .hamburger-container {
+    line-height: 43px;
+    height: 100%;
+    float: left;
+    cursor: pointer;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
 
-    .backdrop {
-      flex: 1;
-      width: 60%;
-      background: url("../../image/backdrop.png");
-      background-size: 100% 100%;
-      height: $headerHeight;
+    &:hover {
+      background: rgba(0, 0, 0, 0.025);
     }
+  }
 
-    .hamburger-container {
-      line-height: 43px;
-      height: 100%;
-      float: left;
+  .breadcrumb-container {
+    float: left;
+  }
+
+  .right-menu {
+    float: right;
+    height: 100%;
+    line-height: 50px;
+    display: flex;
+    align-items: center;
+
+    .function {
+      margin: 0 15px;
       cursor: pointer;
-      transition: background 0.3s;
-      -webkit-tap-highlight-color: transparent;
+    }
 
-      &:hover {
-        background: rgba(0, 0, 0, 0.025);
-      }
+    .shutdown {
+      font-size: 20px;
+      margin-left: 15px;
+      cursor: pointer;
     }
 
-    .breadcrumb-container {
-      float: left;
+    .organization-item {
+      margin-right: 40px;
+      margin-top: -40px !important;
     }
 
-    .right-menu {
-      float: right;
-      height: 100%;
-      line-height: 50px;
-      display: flex;
-      align-items: center;
+    .item {
+      margin-right: 40px;
+      margin-top: -20px;
+      line-height: 18.4px;
+      cursor: pointer;
+      position: relative;
 
-      .function {
-        margin: 0 15px;
+      .item-box {
+        position: absolute;
+        top: -5px;
+        left: 3px;
+        width: 100%;
+        min-width: 25px;
+        height: 25px;
         cursor: pointer;
+        z-index: 100;
       }
+    }
 
-      .shutdown {
-        font-size: 20px;
-        margin-left: 15px;
-        cursor: pointer;
-      }
+    &:focus {
+      outline: none;
+    }
 
-      .organization-item {
-        margin-right: 40px;
-        margin-top: -40px !important;
-      }
+    .right-menu-item {
+      display: inline-block;
+      font-size: 18px;
+      color: #fff;
+      vertical-align: text-bottom;
 
-      .item {
-        margin-right: 40px;
-        margin-top: -20px;
-        line-height: 18.4px;
+      &.hover-effect {
         cursor: pointer;
-        position: relative;
-
-        .item-box {
-          position: absolute;
-          top: -5px;
-          left: 3px;
-          width: 100%;
-          min-width: 25px;
-          height: 25px;
-          cursor: pointer;
-          z-index: 100;
-        }
-      }
-
-      &:focus {
-        outline: none;
-      }
-
-      .right-menu-item {
-        display: inline-block;
-        font-size: 18px;
-        color: #fff;
-        vertical-align: text-bottom;
-
-        &.hover-effect {
-          cursor: pointer;
-          transition: background 0.3s;
-          display: flex;
-          align-items: center;
+        transition: background 0.3s;
+        display: flex;
+        align-items: center;
 
-          &:hover {
-            background: rgba(0, 0, 0, 0.025);
-          }
+        &:hover {
+          background: rgba(0, 0, 0, 0.025);
         }
       }
+    }
 
-      .avatar-wrapper {
-        position: relative;
-        display: flex;
+    .avatar-wrapper {
+      position: relative;
+      display: flex;
+      height: 40px;
+      align-items: center;
+      color: #ffffff;
+      p {
+        font-size: 14px;
         height: 40px;
-        align-items: center;
-        color: #ffffff;
-
-        .user-avatar {
-          cursor: pointer;
-          width: 35px;
-          height: 35px;
-          border-radius: 50%;
+        span {
+          display: block;
+          line-height: 20px;
+          text-align: right;
         }
+      }
+      .user-avatar {
+        cursor: pointer;
+        width: 35px;
+        height: 35px;
+        border-radius: 50%;
+      }
 
-        .el-icon-caret-bottom {
-          cursor: pointer;
-          position: absolute;
-          right: -15px;
-          top: 17px;
-          font-size: 12px;
-        }
+      .el-icon-caret-bottom {
+        cursor: pointer;
+        position: absolute;
+        right: -15px;
+        top: 17px;
+        font-size: 12px;
       }
     }
   }
+}
 </style>