页头信息修改
Showing
2 changed files
with
99 additions
and
58 deletions
src/image/bdclogo.png
0 → 100644
20.9 KB
| ... | @@ -2,7 +2,8 @@ | ... | @@ -2,7 +2,8 @@ |
| 2 | <div class="navbar-con"> | 2 | <div class="navbar-con"> |
| 3 | <div class="navbar" v-theme.background="mTheme"> | 3 | <div class="navbar" v-theme.background="mTheme"> |
| 4 | <div class="logo"> | 4 | <div class="logo"> |
| 5 | <img v-if="logo" :src="logo" class="header-logo"> | 5 | <img v-if="logo" :src="logo" class="header-logo" /> |
| 6 | <h4>{{ userInfo.districtName }}不动产登记平台</h4> | ||
| 6 | </div> | 7 | </div> |
| 7 | <!-- <div class="backdrop"> | 8 | <!-- <div class="backdrop"> |
| 8 | <theme style="float: right;height: 26px;width: 26px;margin-top: 26px;" @change="themeChange" /> | 9 | <theme style="float: right;height: 26px;width: 26px;margin-top: 26px;" @change="themeChange" /> |
| ... | @@ -10,75 +11,93 @@ | ... | @@ -10,75 +11,93 @@ |
| 10 | <div class="right-menu"> | 11 | <div class="right-menu"> |
| 11 | <!-- <svg-icon class="function" icon-class='function' /> --> | 12 | <!-- <svg-icon class="function" icon-class='function' /> --> |
| 12 | <div class="avatar-wrapper"> | 13 | <div class="avatar-wrapper"> |
| 13 | <span style="padding-right:10px">{{ name }}</span> | 14 | <p> |
| 15 | <span style="padding-right: 10px">{{ | ||
| 16 | userInfo.departmentName | ||
| 17 | }}</span> | ||
| 18 | <span style="padding-right: 10px">{{ userInfo.name }}</span> | ||
| 19 | </p> | ||
| 14 | <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" /> | 20 | <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" /> |
| 15 | </div> | 21 | </div> |
| 16 | <svg-icon class="shutdown" @click.native="logout" icon-class='shutdown' /> | 22 | <svg-icon |
| 23 | class="shutdown" | ||
| 24 | @click.native="logout" | ||
| 25 | icon-class="shutdown" | ||
| 26 | /> | ||
| 17 | </div> | 27 | </div> |
| 18 | </div> | 28 | </div> |
| 19 | <NoticeBar class="NoticeBar" :noticeList="noticeList" v-if="noticeList.length > 0" /> | 29 | <NoticeBar |
| 30 | class="NoticeBar" | ||
| 31 | :noticeList="noticeList" | ||
| 32 | v-if="noticeList.length > 0" | ||
| 33 | /> | ||
| 20 | </div> | 34 | </div> |
| 21 | </template> | 35 | </template> |
| 22 | <script> | 36 | <script> |
| 23 | import axios from 'axios' | 37 | import axios from "axios"; |
| 24 | import Cookies from 'js-cookie' | 38 | import Cookies from "js-cookie"; |
| 25 | import { mapGetters } from 'vuex' | 39 | import { mapGetters } from "vuex"; |
| 26 | import NoticeBar from '@/components/NoticeBar/index' | 40 | import NoticeBar from "@/components/NoticeBar/index"; |
| 27 | import { getHomeNoticeList } from "@/api/home" | 41 | import { getHomeNoticeList } from "@/api/home"; |
| 28 | import { setToken } from "@/utils/util"; | 42 | import { setToken } from "@/utils/util"; |
| 29 | export default { | 43 | export default { |
| 30 | components: { | 44 | components: { |
| 31 | NoticeBar | 45 | NoticeBar, |
| 32 | }, | 46 | }, |
| 33 | computed: { | 47 | computed: { |
| 34 | ...mapGetters(['sidebar', 'avatar', 'name']), | 48 | ...mapGetters(["sidebar", "avatar", "name", "userInfo"]), |
| 35 | baseUrl () { | 49 | baseUrl() { |
| 36 | return window._config.baseUrl; | 50 | return window._config.baseUrl; |
| 37 | }, | 51 | }, |
| 38 | }, | 52 | }, |
| 39 | data () { | 53 | data() { |
| 40 | return { | 54 | return { |
| 41 | logo: require('../../image/logo.png'), | 55 | logo: require("../../image/bdclogo.png"), |
| 42 | noticeList: [] | 56 | noticeList: [], |
| 43 | } | 57 | }; |
| 44 | }, | 58 | }, |
| 45 | created () { | 59 | created() { |
| 46 | this.queryNoticeList() | 60 | this.queryNoticeList(); |
| 47 | }, | 61 | }, |
| 48 | mounted () { | 62 | mounted() { |
| 49 | let that = this | 63 | let that = this; |
| 50 | window.addEventListener('message', function (messageEvent) { | 64 | window.addEventListener("message", function (messageEvent) { |
| 51 | if (messageEvent.data.update) { | 65 | if (messageEvent.data.update) { |
| 52 | that.queryNoticeList() | 66 | that.queryNoticeList(); |
| 53 | } | 67 | } |
| 54 | }) | 68 | }); |
| 55 | }, | 69 | }, |
| 56 | destroyed () { | 70 | destroyed() { |
| 57 | window.removeEventListener('message') | 71 | window.removeEventListener("message"); |
| 58 | }, | 72 | }, |
| 59 | methods: { | 73 | methods: { |
| 60 | /** | 74 | /** |
| 61 | * @description: queryNoticeList | 75 | * @description: queryNoticeList |
| 62 | * @author: renchao | 76 | * @author: renchao |
| 63 | */ | 77 | */ |
| 64 | queryNoticeList () { | 78 | queryNoticeList() { |
| 65 | getHomeNoticeList().then(res => { | 79 | getHomeNoticeList().then((res) => { |
| 66 | if (res.result) { | 80 | if (res.result) { |
| 67 | this.noticeList = res.result.noticeList | 81 | this.noticeList = res.result.noticeList; |
| 68 | } | 82 | } |
| 69 | }) | 83 | }); |
| 70 | }, | 84 | }, |
| 71 | /** | 85 | /** |
| 72 | * @description: logout | 86 | * @description: logout |
| 73 | * @author: renchao | 87 | * @author: renchao |
| 74 | */ | 88 | */ |
| 75 | logout () { | 89 | logout() { |
| 76 | axios.post(window._config.services.management + "/management/logout").then(() => { | 90 | axios |
| 77 | setToken(undefined) | 91 | .post(window._config.services.management + "/management/logout") |
| 78 | sessionStorage.removeItem('token') | 92 | .then(() => { |
| 79 | localStorage.setItem('dj-location', window.location.href) | 93 | setToken(undefined); |
| 80 | window.location.href = window._config.casBaseURL + '/logout?service=' + encodeURIComponent(window.location.href); | 94 | sessionStorage.removeItem("token"); |
| 81 | }) | 95 | localStorage.setItem("dj-location", window.location.href); |
| 96 | window.location.href = | ||
| 97 | window._config.casBaseURL + | ||
| 98 | "/logout?service=" + | ||
| 99 | encodeURIComponent(window.location.href); | ||
| 100 | }); | ||
| 82 | }, | 101 | }, |
| 83 | 102 | ||
| 84 | /** | 103 | /** |
| ... | @@ -86,37 +105,37 @@ | ... | @@ -86,37 +105,37 @@ |
| 86 | * @param {*} val | 105 | * @param {*} val |
| 87 | * @author: renchao | 106 | * @author: renchao |
| 88 | */ | 107 | */ |
| 89 | themeChange (val) { | 108 | themeChange(val) { |
| 90 | this.$store.dispatch('app/updateTheme', val) | 109 | this.$store.dispatch("app/updateTheme", val); |
| 91 | }, | 110 | }, |
| 92 | searchMessageCenter () { | 111 | searchMessageCenter() { |
| 93 | this.$router.push({ name: 'messagecenter' }) | 112 | this.$router.push({ name: "messagecenter" }); |
| 94 | }, | 113 | }, |
| 95 | /** | 114 | /** |
| 96 | * @description: handleCommand | 115 | * @description: handleCommand |
| 97 | * @param {*} command | 116 | * @param {*} command |
| 98 | * @author: renchao | 117 | * @author: renchao |
| 99 | */ | 118 | */ |
| 100 | handleCommand (command) { | 119 | handleCommand(command) { |
| 101 | if (command == 'a') { | 120 | if (command == "a") { |
| 102 | //个人中心 | 121 | //个人中心 |
| 103 | this.$router.push({ name: 'personal' }) | 122 | this.$router.push({ name: "personal" }); |
| 104 | } | ||
| 105 | } | ||
| 106 | } | ||
| 107 | } | 123 | } |
| 124 | }, | ||
| 125 | }, | ||
| 126 | }; | ||
| 108 | </script> | 127 | </script> |
| 109 | <style lang="scss" scoped> | 128 | <style lang="scss" scoped> |
| 110 | .navbar-con { | 129 | .navbar-con { |
| 111 | position: relative; | 130 | position: relative; |
| 112 | } | 131 | } |
| 113 | 132 | ||
| 114 | .NoticeBar { | 133 | .NoticeBar { |
| 115 | position: absolute; | 134 | position: absolute; |
| 116 | bottom: 0; | 135 | bottom: 0; |
| 117 | } | 136 | } |
| 118 | 137 | ||
| 119 | .el-dropdown-menu { | 138 | .el-dropdown-menu { |
| 120 | padding: 0 !important; | 139 | padding: 0 !important; |
| 121 | border: 1px solid #ebeef5; | 140 | border: 1px solid #ebeef5; |
| 122 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12); | 141 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12); |
| ... | @@ -149,9 +168,9 @@ | ... | @@ -149,9 +168,9 @@ |
| 149 | background: #f6f7f9; | 168 | background: #f6f7f9; |
| 150 | color: #4a4a4a; | 169 | color: #4a4a4a; |
| 151 | } | 170 | } |
| 152 | } | 171 | } |
| 153 | 172 | ||
| 154 | .navbar { | 173 | .navbar { |
| 155 | height: $headerHeight; | 174 | height: $headerHeight; |
| 156 | overflow: hidden; | 175 | overflow: hidden; |
| 157 | position: relative; | 176 | position: relative; |
| ... | @@ -163,8 +182,22 @@ | ... | @@ -163,8 +182,22 @@ |
| 163 | padding: 0 20px; | 182 | padding: 0 20px; |
| 164 | justify-content: space-between; | 183 | justify-content: space-between; |
| 165 | 184 | ||
| 185 | .logo { | ||
| 186 | // margin-top: -20px; | ||
| 166 | .header-logo { | 187 | .header-logo { |
| 167 | width: 300px; | 188 | width: 40px; |
| 189 | float: left; | ||
| 190 | vertical-align: middle; | ||
| 191 | } | ||
| 192 | h4 { | ||
| 193 | float: left; | ||
| 194 | vertical-align: middle; | ||
| 195 | line-height: 40px; | ||
| 196 | font-size: 22px; | ||
| 197 | color: #fff; | ||
| 198 | text-indent: 6px; | ||
| 199 | letter-spacing: 2px; | ||
| 200 | } | ||
| 168 | } | 201 | } |
| 169 | 202 | ||
| 170 | .backdrop { | 203 | .backdrop { |
| ... | @@ -262,7 +295,15 @@ | ... | @@ -262,7 +295,15 @@ |
| 262 | height: 40px; | 295 | height: 40px; |
| 263 | align-items: center; | 296 | align-items: center; |
| 264 | color: #ffffff; | 297 | color: #ffffff; |
| 265 | 298 | p { | |
| 299 | font-size: 14px; | ||
| 300 | height: 40px; | ||
| 301 | span { | ||
| 302 | display: block; | ||
| 303 | line-height: 20px; | ||
| 304 | text-align: right; | ||
| 305 | } | ||
| 306 | } | ||
| 266 | .user-avatar { | 307 | .user-avatar { |
| 267 | cursor: pointer; | 308 | cursor: pointer; |
| 268 | width: 35px; | 309 | width: 35px; |
| ... | @@ -279,5 +320,5 @@ | ... | @@ -279,5 +320,5 @@ |
| 279 | } | 320 | } |
| 280 | } | 321 | } |
| 281 | } | 322 | } |
| 282 | } | 323 | } |
| 283 | </style> | 324 | </style> | ... | ... |
-
Please register or sign in to post a comment