Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
a74568a4 by renchao@pashanhoo.com
Options

style:头部样式的修改

1 parent c94a2161
Inline Side-by-side
Showing 2 changed files with 198 additions and 196 deletions
...@@ -23,3 +23,5 @@ yarn-error.log* ...@@ -23,3 +23,5 @@ yarn-error.log*
23 *.sw? 23 *.sw?
24 24
25 package-lock.json 25 package-lock.json
26
27 public/config.json
......
...@@ -9,17 +9,16 @@ ...@@ -9,17 +9,16 @@
9 </div> 9 </div>
10 <div class="right-menu"> 10 <div class="right-menu">
11 <svg-icon class="function" icon-class='function' /> 11 <svg-icon class="function" icon-class='function' />
12 <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand"> 12 <!-- <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand">
13 <div class="avatar-wrapper">
14 <span style="padding-right:10px">{{ name }}</span>
15 <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
16 <!-- <i class="el-icon-caret-bottom" /> -->
17 </div>
18 <el-dropdown-menu slot="dropdown"> 13 <el-dropdown-menu slot="dropdown">
19 <el-dropdown-item command="a">个人中心</el-dropdown-item> 14 <el-dropdown-item command="a">个人中心</el-dropdown-item>
20 </el-dropdown-menu> 15 </el-dropdown-menu>
21 </el-dropdown> 16 </el-dropdown> -->
22 17 <div class="avatar-wrapper">
18 <span style="padding-right:10px">{{ name }}</span>
19 <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
20 <!-- <i class="el-icon-caret-bottom" /> -->
21 </div>
23 22
24 <svg-icon class="shutdown" @click.native="logout" icon-class='shutdown' /> 23 <svg-icon class="shutdown" @click.native="logout" icon-class='shutdown' />
25 </div> 24 </div>
...@@ -28,242 +27,243 @@ ...@@ -28,242 +27,243 @@
28 </div> 27 </div>
29 </template> 28 </template>
30 <script> 29 <script>
31 import { mapGetters } from 'vuex' 30 import { mapGetters } from 'vuex'
32 import NoticeBar from '@/components/NoticeBar/index' 31 import NoticeBar from '@/components/NoticeBar/index'
33 import { 32 import {
34 getHomeNoticeList 33 getHomeNoticeList
35 } from "@/api/user" 34 } from "@/api/user"
36 export default { 35 export default {
37 components: { 36 components: {
38 NoticeBar 37 NoticeBar
39 },
40 computed: {
41 ...mapGetters(['sidebar', 'avatar', 'name']),
42 baseUrl () {
43 return window.baseUrl;
44 }, 38 },
45 }, 39 computed: {
46 data () { 40 ...mapGetters(['sidebar', 'avatar', 'name']),
47 return { 41 baseUrl () {
48 logo: require('../../image/logo.png'), 42 return window.baseUrl;
49 noticeList: [] 43 },
50 } 44 },
51 }, 45 data () {
52 created () { 46 return {
53 this.queryNoticeList() 47 logo: require('../../image/logo.png'),
54 }, 48 noticeList: []
55 mounted () {
56 let that = this
57 window.addEventListener('message', function (messageEvent) {
58 if (messageEvent.data.update) {
59 that.queryNoticeList()
60 } 49 }
61 }) 50 },
62 }, 51 created () {
63 destroyed () { 52 this.queryNoticeList()
64 window.removeEventListener('message') 53 },
65 }, 54 mounted () {
66 methods: { 55 let that = this
67 56 window.addEventListener('message', function (messageEvent) {
68 queryNoticeList () { 57 if (messageEvent.data.update) {
69 getHomeNoticeList().then(res => { 58 that.queryNoticeList()
70 if (res.result) {
71 this.noticeList = res.result.noticeList
72 } 59 }
73 }) 60 })
74 }, 61 },
75 logout () { 62 destroyed () {
76 const url = baseUrl + "/sso-logout?redirect_uri=" + baseUrl + "/bdcdj"; 63 window.removeEventListener('message')
77 window.open(url, "_self");
78 sessionStorage.removeItem("navList");
79 }, 64 },
65 methods: {
80 66
81 themeChange (val) { 67 queryNoticeList () {
82 this.$store.dispatch('app/updateTheme', val) 68 getHomeNoticeList().then(res => {
83 }, 69 if (res.result) {
84 searchMessageCenter () { 70 this.noticeList = res.result.noticeList
85 this.$router.push({ name: 'messagecenter' }) 71 }
86 }, 72 })
87 handleCommand (command) { 73 },
88 if (command == 'a') { 74 logout () {
89 //个人中心 75 const url = baseUrl + "/sso-logout?redirect_uri=" + baseUrl + "/bdcdj";
90 this.$router.push({ name: 'personal' }) 76 window.open(url, "_self");
77 sessionStorage.removeItem("navList");
78 },
79
80 themeChange (val) {
81 this.$store.dispatch('app/updateTheme', val)
82 },
83 searchMessageCenter () {
84 this.$router.push({ name: 'messagecenter' })
85 },
86 handleCommand (command) {
87 if (command == 'a') {
88 //个人中心
89 this.$router.push({ name: 'personal' })
90 }
91 } 91 }
92 } 92 }
93 } 93 }
94 }
95 </script> 94 </script>
96 <style lang="scss" scoped> 95 <style lang="scss" scoped>
97 .navbar-con { 96 .navbar-con {
98 position: relative; 97 position: relative;
99 }
100
101 .NoticeBar {
102 position: absolute;
103 bottom: 0;
104 }
105
106 .el-dropdown-menu {
107 padding: 0 !important;
108 border: 1px solid #EBEEF5;
109 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
110 border-radius: 4px 0 0 4px 4px;
111
112 .el-dropdown-menu__item {
113 text-align: center;
114 margin-top: 0 !important;
115 font-size: 14px;
116 font-family: PingFangSC-Regular, PingFang SC;
117 font-weight: 400;
118 color: #4A4A4A;
119 width: 140px;
120 height: 36px;
121 line-height: 36px;
122 }
123
124 .el-dropdown-menu__item:nth-child(6) {
125 border-top: 1px solid #EBEEF5;
126 }
127
128 .popper__arrow {
129 top: -11px !important;
130 left: 110px !important;
131 transform: rotate(0deg) scale(2);
132 } 98 }
133 99
134 .el-dropdown-menu__item:not(.is-disabled):hover, 100 .NoticeBar {
135 .el-dropdown-menu__item:focus { 101 position: absolute;
136 background: #F6F7F9; 102 bottom: 0;
137 color: #4A4A4A;
138 } 103 }
139 }
140 104
141 .navbar { 105 .el-dropdown-menu {
142 height: $headerHeight; 106 padding: 0 !important;
143 overflow: hidden; 107 border: 1px solid #ebeef5;
144 position: relative; 108 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
145 background: #fff; 109 border-radius: 4px 0 0 4px 4px;
146 // background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色
147 box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08);
148 display: flex;
149 align-items: center;
150 padding: 0 20px;
151 justify-content: space-between;
152 110
153 .header-logo { 111 .el-dropdown-menu__item {
154 width: 300px; 112 text-align: center;
155 } 113 margin-top: 0 !important;
156 114 font-size: 14px;
157 .backdrop { 115 font-family: PingFangSC-Regular, PingFang SC;
158 flex: 1; 116 font-weight: 400;
159 width: 60%; 117 color: #4a4a4a;
160 background: url('../../image/backdrop.png'); 118 width: 140px;
161 background-size: 100% 100%; 119 height: 36px;
162 height: $headerHeight; 120 line-height: 36px;
163 } 121 }
164 122
165 .hamburger-container { 123 .el-dropdown-menu__item:nth-child(6) {
166 line-height: 43px; 124 border-top: 1px solid #ebeef5;
167 height: 100%; 125 }
168 float: left;
169 cursor: pointer;
170 transition: background 0.3s;
171 -webkit-tap-highlight-color: transparent;
172 126
173 &:hover { 127 .popper__arrow {
174 background: rgba(0, 0, 0, 0.025); 128 top: -11px !important;
129 left: 110px !important;
130 transform: rotate(0deg) scale(2);
175 } 131 }
176 }
177 132
178 .breadcrumb-container { 133 .el-dropdown-menu__item:not(.is-disabled):hover,
179 float: left; 134 .el-dropdown-menu__item:focus {
135 background: #f6f7f9;
136 color: #4a4a4a;
137 }
180 } 138 }
181 139
182 .right-menu { 140 .navbar {
183 float: right; 141 height: $headerHeight;
184 height: 100%; 142 overflow: hidden;
185 line-height: 50px; 143 position: relative;
144 background: #fff;
145 // background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色
146 box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08);
186 display: flex; 147 display: flex;
187 align-items: center; 148 align-items: center;
149 padding: 0 20px;
150 justify-content: space-between;
188 151
189 .function { 152 .header-logo {
190 margin: 0 15px; 153 width: 300px;
191 cursor: pointer; 154 }
155
156 .backdrop {
157 flex: 1;
158 width: 60%;
159 background: url("../../image/backdrop.png");
160 background-size: 100% 100%;
161 height: $headerHeight;
192 } 162 }
193 163
194 .shutdown { 164 .hamburger-container {
195 font-size: 20px; 165 line-height: 43px;
196 margin-left: 15px; 166 height: 100%;
167 float: left;
197 cursor: pointer; 168 cursor: pointer;
169 transition: background 0.3s;
170 -webkit-tap-highlight-color: transparent;
171
172 &:hover {
173 background: rgba(0, 0, 0, 0.025);
174 }
198 } 175 }
199 176
200 .organization-item { 177 .breadcrumb-container {
201 margin-right: 40px; 178 float: left;
202 margin-top: -40px !important;
203 } 179 }
204 180
205 .item { 181 .right-menu {
206 margin-right: 40px; 182 float: right;
207 margin-top: -20px; 183 height: 100%;
208 line-height: 18.4px; 184 line-height: 50px;
209 cursor: pointer; 185 display: flex;
210 position: relative; 186 align-items: center;
211 187
212 .item-box { 188 .function {
213 position: absolute; 189 margin: 0 15px;
214 top: -5px;
215 left: 3px;
216 width: 100%;
217 min-width: 25px;
218 height: 25px;
219 cursor: pointer; 190 cursor: pointer;
220 z-index: 100;
221 } 191 }
222 }
223 192
224 &:focus { 193 .shutdown {
225 outline: none; 194 font-size: 20px;
226 } 195 margin-left: 15px;
196 cursor: pointer;
197 }
227 198
228 .right-menu-item { 199 .organization-item {
229 display: inline-block; 200 margin-right: 40px;
230 font-size: 18px; 201 margin-top: -40px !important;
231 color: #fff; 202 }
232 vertical-align: text-bottom;
233 203
234 &.hover-effect { 204 .item {
205 margin-right: 40px;
206 margin-top: -20px;
207 line-height: 18.4px;
235 cursor: pointer; 208 cursor: pointer;
236 transition: background 0.3s; 209 position: relative;
237 display: flex;
238 align-items: center;
239 210
240 &:hover { 211 .item-box {
241 background: rgba(0, 0, 0, 0.025); 212 position: absolute;
213 top: -5px;
214 left: 3px;
215 width: 100%;
216 min-width: 25px;
217 height: 25px;
218 cursor: pointer;
219 z-index: 100;
242 } 220 }
243 } 221 }
244 }
245 222
246 .avatar-wrapper { 223 &:focus {
247 position: relative; 224 outline: none;
248 display: flex; 225 }
249 height: 40px;
250 align-items: center;
251 226
252 .user-avatar { 227 .right-menu-item {
253 cursor: pointer; 228 display: inline-block;
254 width: 35px; 229 font-size: 18px;
255 height: 35px; 230 color: #fff;
256 border-radius: 50%; 231 vertical-align: text-bottom;
232
233 &.hover-effect {
234 cursor: pointer;
235 transition: background 0.3s;
236 display: flex;
237 align-items: center;
238
239 &:hover {
240 background: rgba(0, 0, 0, 0.025);
241 }
242 }
257 } 243 }
258 244
259 .el-icon-caret-bottom { 245 .avatar-wrapper {
260 cursor: pointer; 246 position: relative;
261 position: absolute; 247 display: flex;
262 right: -15px; 248 height: 40px;
263 top: 17px; 249 align-items: center;
264 font-size: 12px; 250 color: #ffffff;
251
252 .user-avatar {
253 cursor: pointer;
254 width: 35px;
255 height: 35px;
256 border-radius: 50%;
257 }
258
259 .el-icon-caret-bottom {
260 cursor: pointer;
261 position: absolute;
262 right: -15px;
263 top: 17px;
264 font-size: 12px;
265 }
265 } 266 }
266 } 267 }
267 } 268 }
268 }
269 </style> 269 </style>
......