Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
8a2c9efa by yangwei
Options

页头信息修改

1 parent 42ebafed
Inline Side-by-side
Showing 2 changed files with 257 additions and 216 deletions
...@@ -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,274 +11,314 @@ ...@@ -10,274 +11,314 @@
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,
46 },
47 computed: {
48 ...mapGetters(["sidebar", "avatar", "name", "userInfo"]),
49 baseUrl() {
50 return window._config.baseUrl;
32 }, 51 },
33 computed: { 52 },
34 ...mapGetters(['sidebar', 'avatar', 'name']), 53 data() {
35 baseUrl () { 54 return {
36 return window._config.baseUrl; 55 logo: require("../../image/bdclogo.png"),
37 }, 56 noticeList: [],
38 }, 57 };
39 data () { 58 },
40 return { 59 created() {
41 logo: require('../../image/logo.png'), 60 this.queryNoticeList();
42 noticeList: [] 61 },
62 mounted() {
63 let that = this;
64 window.addEventListener("message", function (messageEvent) {
65 if (messageEvent.data.update) {
66 that.queryNoticeList();
43 } 67 }
44 }, 68 });
45 created () { 69 },
46 this.queryNoticeList() 70 destroyed() {
47 }, 71 window.removeEventListener("message");
48 mounted () { 72 },
49 let that = this 73 methods: {
50 window.addEventListener('message', function (messageEvent) { 74 /**
51 if (messageEvent.data.update) { 75 * @description: queryNoticeList
52 that.queryNoticeList() 76 * @author: renchao
77 */
78 queryNoticeList() {
79 getHomeNoticeList().then((res) => {
80 if (res.result) {
81 this.noticeList = res.result.noticeList;
53 } 82 }
54 }) 83 });
55 }, 84 },
56 destroyed () { 85 /**
57 window.removeEventListener('message') 86 * @description: logout
87 * @author: renchao
88 */
89 logout() {
90 axios
91 .post(window._config.services.management + "/management/logout")
92 .then(() => {
93 setToken(undefined);
94 sessionStorage.removeItem("token");
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 });
58 }, 101 },
59 methods: {
60 /**
61 * @description: queryNoticeList
62 * @author: renchao
63 */
64 queryNoticeList () {
65 getHomeNoticeList().then(res => {
66 if (res.result) {
67 this.noticeList = res.result.noticeList
68 }
69 })
70 },
71 /**
72 * @description: logout
73 * @author: renchao
74 */
75 logout () {
76 axios.post(window._config.services.management + "/management/logout").then(() => {
77 setToken(undefined)
78 sessionStorage.removeItem('token')
79 localStorage.setItem('dj-location', window.location.href)
80 window.location.href = window._config.casBaseURL + '/logout?service=' + encodeURIComponent(window.location.href);
81 })
82 },
83 102
84 /** 103 /**
85 * @description: themeChange 104 * @description: themeChange
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 } 123 }
106 } 124 },
107 } 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;
131 }
132
133 .NoticeBar {
134 position: absolute;
135 bottom: 0;
136 }
137
138 .el-dropdown-menu {
139 padding: 0 !important;
140 border: 1px solid #ebeef5;
141 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
142 border-radius: 4px 0 0 4px 4px;
143
144 .el-dropdown-menu__item {
145 text-align: center;
146 margin-top: 0 !important;
147 font-size: 14px;
148 font-family: PingFangSC-Regular, PingFang SC;
149 font-weight: 400;
150 color: #4a4a4a;
151 width: 140px;
152 height: 36px;
153 line-height: 36px;
112 } 154 }
113 155
114 .NoticeBar { 156 .el-dropdown-menu__item:nth-child(6) {
115 position: absolute; 157 border-top: 1px solid #ebeef5;
116 bottom: 0;
117 } 158 }
118 159
119 .el-dropdown-menu { 160 .popper__arrow {
120 padding: 0 !important; 161 top: -11px !important;
121 border: 1px solid #ebeef5; 162 left: 110px !important;
122 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12); 163 transform: rotate(0deg) scale(2);
123 border-radius: 4px 0 0 4px 4px; 164 }
124 165
125 .el-dropdown-menu__item { 166 .el-dropdown-menu__item:not(.is-disabled):hover,
126 text-align: center; 167 .el-dropdown-menu__item:focus {
127 margin-top: 0 !important; 168 background: #f6f7f9;
128 font-size: 14px; 169 color: #4a4a4a;
129 font-family: PingFangSC-Regular, PingFang SC; 170 }
130 font-weight: 400; 171 }
131 color: #4a4a4a;
132 width: 140px;
133 height: 36px;
134 line-height: 36px;
135 }
136 172
137 .el-dropdown-menu__item:nth-child(6) { 173 .navbar {
138 border-top: 1px solid #ebeef5; 174 height: $headerHeight;
139 } 175 overflow: hidden;
176 position: relative;
177 background: #fff;
178 // background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色
179 box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08);
180 display: flex;
181 align-items: center;
182 padding: 0 20px;
183 justify-content: space-between;
140 184
141 .popper__arrow { 185 .logo {
142 top: -11px !important; 186 // margin-top: -20px;
143 left: 110px !important; 187 .header-logo {
144 transform: rotate(0deg) scale(2); 188 width: 40px;
189 float: left;
190 vertical-align: middle;
145 } 191 }
146 192 h4 {
147 .el-dropdown-menu__item:not(.is-disabled):hover, 193 float: left;
148 .el-dropdown-menu__item:focus { 194 vertical-align: middle;
149 background: #f6f7f9; 195 line-height: 40px;
150 color: #4a4a4a; 196 font-size: 22px;
197 color: #fff;
198 text-indent: 6px;
199 letter-spacing: 2px;
151 } 200 }
152 } 201 }
153 202
154 .navbar { 203 .backdrop {
204 flex: 1;
205 width: 60%;
206 background: url("../../image/backdrop.png");
207 background-size: 100% 100%;
155 height: $headerHeight; 208 height: $headerHeight;
156 overflow: hidden; 209 }
157 position: relative;
158 background: #fff;
159 // background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色
160 box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08);
161 display: flex;
162 align-items: center;
163 padding: 0 20px;
164 justify-content: space-between;
165 210
166 .header-logo { 211 .hamburger-container {
167 width: 300px; 212 line-height: 43px;
168 } 213 height: 100%;
214 float: left;
215 cursor: pointer;
216 transition: background 0.3s;
217 -webkit-tap-highlight-color: transparent;
169 218
170 .backdrop { 219 &:hover {
171 flex: 1; 220 background: rgba(0, 0, 0, 0.025);
172 width: 60%;
173 background: url("../../image/backdrop.png");
174 background-size: 100% 100%;
175 height: $headerHeight;
176 } 221 }
222 }
177 223
178 .hamburger-container { 224 .breadcrumb-container {
179 line-height: 43px; 225 float: left;
180 height: 100%; 226 }
181 float: left; 227
228 .right-menu {
229 float: right;
230 height: 100%;
231 line-height: 50px;
232 display: flex;
233 align-items: center;
234
235 .function {
236 margin: 0 15px;
182 cursor: pointer; 237 cursor: pointer;
183 transition: background 0.3s; 238 }
184 -webkit-tap-highlight-color: transparent;
185 239
186 &:hover { 240 .shutdown {
187 background: rgba(0, 0, 0, 0.025); 241 font-size: 20px;
188 } 242 margin-left: 15px;
243 cursor: pointer;
189 } 244 }
190 245
191 .breadcrumb-container { 246 .organization-item {
192 float: left; 247 margin-right: 40px;
248 margin-top: -40px !important;
193 } 249 }
194 250
195 .right-menu { 251 .item {
196 float: right; 252 margin-right: 40px;
197 height: 100%; 253 margin-top: -20px;
198 line-height: 50px; 254 line-height: 18.4px;
199 display: flex; 255 cursor: pointer;
200 align-items: center; 256 position: relative;
201 257
202 .function { 258 .item-box {
203 margin: 0 15px; 259 position: absolute;
260 top: -5px;
261 left: 3px;
262 width: 100%;
263 min-width: 25px;
264 height: 25px;
204 cursor: pointer; 265 cursor: pointer;
266 z-index: 100;
205 } 267 }
268 }
206 269
207 .shutdown { 270 &:focus {
208 font-size: 20px; 271 outline: none;
209 margin-left: 15px; 272 }
210 cursor: pointer;
211 }
212 273
213 .organization-item { 274 .right-menu-item {
214 margin-right: 40px; 275 display: inline-block;
215 margin-top: -40px !important; 276 font-size: 18px;
216 } 277 color: #fff;
278 vertical-align: text-bottom;
217 279
218 .item { 280 &.hover-effect {
219 margin-right: 40px;
220 margin-top: -20px;
221 line-height: 18.4px;
222 cursor: pointer; 281 cursor: pointer;
223 position: relative; 282 transition: background 0.3s;
224 283 display: flex;
225 .item-box { 284 align-items: center;
226 position: absolute;
227 top: -5px;
228 left: 3px;
229 width: 100%;
230 min-width: 25px;
231 height: 25px;
232 cursor: pointer;
233 z-index: 100;
234 }
235 }
236
237 &:focus {
238 outline: none;
239 }
240
241 .right-menu-item {
242 display: inline-block;
243 font-size: 18px;
244 color: #fff;
245 vertical-align: text-bottom;
246
247 &.hover-effect {
248 cursor: pointer;
249 transition: background 0.3s;
250 display: flex;
251 align-items: center;
252 285
253 &:hover { 286 &:hover {
254 background: rgba(0, 0, 0, 0.025); 287 background: rgba(0, 0, 0, 0.025);
255 }
256 } 288 }
257 } 289 }
290 }
258 291
259 .avatar-wrapper { 292 .avatar-wrapper {
260 position: relative; 293 position: relative;
261 display: flex; 294 display: flex;
295 height: 40px;
296 align-items: center;
297 color: #ffffff;
298 p {
299 font-size: 14px;
262 height: 40px; 300 height: 40px;
263 align-items: center; 301 span {
264 color: #ffffff; 302 display: block;
265 303 line-height: 20px;
266 .user-avatar { 304 text-align: right;
267 cursor: pointer;
268 width: 35px;
269 height: 35px;
270 border-radius: 50%;
271 } 305 }
306 }
307 .user-avatar {
308 cursor: pointer;
309 width: 35px;
310 height: 35px;
311 border-radius: 50%;
312 }
272 313
273 .el-icon-caret-bottom { 314 .el-icon-caret-bottom {
274 cursor: pointer; 315 cursor: pointer;
275 position: absolute; 316 position: absolute;
276 right: -15px; 317 right: -15px;
277 top: 17px; 318 top: 17px;
278 font-size: 12px; 319 font-size: 12px;
279 }
280 } 320 }
281 } 321 }
282 } 322 }
323 }
283 </style> 324 </style>
......