style:头部样式的修改
Showing
2 changed files
with
28 additions
and
26 deletions
| ... | @@ -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 | <el-dropdown-menu slot="dropdown"> | ||
| 14 | <el-dropdown-item command="a">个人中心</el-dropdown-item> | ||
| 15 | </el-dropdown-menu> | ||
| 16 | </el-dropdown> --> | ||
| 13 | <div class="avatar-wrapper"> | 17 | <div class="avatar-wrapper"> |
| 14 | <span style="padding-right:10px">{{ name }}</span> | 18 | <span style="padding-right:10px">{{ name }}</span> |
| 15 | <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" /> | 19 | <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" /> |
| 16 | <!-- <i class="el-icon-caret-bottom" /> --> | 20 | <!-- <i class="el-icon-caret-bottom" /> --> |
| 17 | </div> | 21 | </div> |
| 18 | <el-dropdown-menu slot="dropdown"> | ||
| 19 | <el-dropdown-item command="a">个人中心</el-dropdown-item> | ||
| 20 | </el-dropdown-menu> | ||
| 21 | </el-dropdown> | ||
| 22 | |||
| 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,12 +27,12 @@ | ... | @@ -28,12 +27,12 @@ |
| 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 | }, | 38 | }, |
| ... | @@ -91,21 +90,21 @@ export default { | ... | @@ -91,21 +90,21 @@ export default { |
| 91 | } | 90 | } |
| 92 | } | 91 | } |
| 93 | } | 92 | } |
| 94 | } | 93 | } |
| 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 | } | 98 | } |
| 100 | 99 | ||
| 101 | .NoticeBar { | 100 | .NoticeBar { |
| 102 | position: absolute; | 101 | position: absolute; |
| 103 | bottom: 0; | 102 | bottom: 0; |
| 104 | } | 103 | } |
| 105 | 104 | ||
| 106 | .el-dropdown-menu { | 105 | .el-dropdown-menu { |
| 107 | padding: 0 !important; | 106 | padding: 0 !important; |
| 108 | border: 1px solid #EBEEF5; | 107 | border: 1px solid #ebeef5; |
| 109 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12); | 108 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12); |
| 110 | border-radius: 4px 0 0 4px 4px; | 109 | border-radius: 4px 0 0 4px 4px; |
| 111 | 110 | ||
| ... | @@ -115,14 +114,14 @@ export default { | ... | @@ -115,14 +114,14 @@ export default { |
| 115 | font-size: 14px; | 114 | font-size: 14px; |
| 116 | font-family: PingFangSC-Regular, PingFang SC; | 115 | font-family: PingFangSC-Regular, PingFang SC; |
| 117 | font-weight: 400; | 116 | font-weight: 400; |
| 118 | color: #4A4A4A; | 117 | color: #4a4a4a; |
| 119 | width: 140px; | 118 | width: 140px; |
| 120 | height: 36px; | 119 | height: 36px; |
| 121 | line-height: 36px; | 120 | line-height: 36px; |
| 122 | } | 121 | } |
| 123 | 122 | ||
| 124 | .el-dropdown-menu__item:nth-child(6) { | 123 | .el-dropdown-menu__item:nth-child(6) { |
| 125 | border-top: 1px solid #EBEEF5; | 124 | border-top: 1px solid #ebeef5; |
| 126 | } | 125 | } |
| 127 | 126 | ||
| 128 | .popper__arrow { | 127 | .popper__arrow { |
| ... | @@ -133,12 +132,12 @@ export default { | ... | @@ -133,12 +132,12 @@ export default { |
| 133 | 132 | ||
| 134 | .el-dropdown-menu__item:not(.is-disabled):hover, | 133 | .el-dropdown-menu__item:not(.is-disabled):hover, |
| 135 | .el-dropdown-menu__item:focus { | 134 | .el-dropdown-menu__item:focus { |
| 136 | background: #F6F7F9; | 135 | background: #f6f7f9; |
| 137 | color: #4A4A4A; | 136 | color: #4a4a4a; |
| 137 | } | ||
| 138 | } | 138 | } |
| 139 | } | ||
| 140 | 139 | ||
| 141 | .navbar { | 140 | .navbar { |
| 142 | height: $headerHeight; | 141 | height: $headerHeight; |
| 143 | overflow: hidden; | 142 | overflow: hidden; |
| 144 | position: relative; | 143 | position: relative; |
| ... | @@ -157,7 +156,7 @@ export default { | ... | @@ -157,7 +156,7 @@ export default { |
| 157 | .backdrop { | 156 | .backdrop { |
| 158 | flex: 1; | 157 | flex: 1; |
| 159 | width: 60%; | 158 | width: 60%; |
| 160 | background: url('../../image/backdrop.png'); | 159 | background: url("../../image/backdrop.png"); |
| 161 | background-size: 100% 100%; | 160 | background-size: 100% 100%; |
| 162 | height: $headerHeight; | 161 | height: $headerHeight; |
| 163 | } | 162 | } |
| ... | @@ -248,6 +247,7 @@ export default { | ... | @@ -248,6 +247,7 @@ export default { |
| 248 | display: flex; | 247 | display: flex; |
| 249 | height: 40px; | 248 | height: 40px; |
| 250 | align-items: center; | 249 | align-items: center; |
| 250 | color: #ffffff; | ||
| 251 | 251 | ||
| 252 | .user-avatar { | 252 | .user-avatar { |
| 253 | cursor: pointer; | 253 | cursor: pointer; |
| ... | @@ -265,5 +265,5 @@ export default { | ... | @@ -265,5 +265,5 @@ export default { |
| 265 | } | 265 | } |
| 266 | } | 266 | } |
| 267 | } | 267 | } |
| 268 | } | 268 | } |
| 269 | </style> | 269 | </style> | ... | ... |
-
Please register or sign in to post a comment