style:头部样式
Showing
8 changed files
with
35 additions
and
16 deletions
src/image/bg.png
0 → 100644
798 KB
src/image/header.png
0 → 100644
14.2 KB
src/image/navbar.png
0 → 100644
1.4 KB
src/image/right.png
deleted
100644 → 0
982 Bytes
src/image/selNavbar.png
0 → 100644
1.52 KB
| 1 | <template> | 1 | <template> |
| 2 | <div class="navbar-con"> | 2 | <div class="navbar-con"> |
| 3 | <div class="navbar"> | 3 | <div class="navbar"> |
| 4 | <div class="title">{{ title }}</div> | ||
| 4 | <div class="sidebarLeft"> | 5 | <div class="sidebarLeft"> |
| 5 | <sidebarLeft /> | 6 | <sidebarLeft /> |
| 6 | </div> | 7 | </div> |
| 7 | <div class="sidebarRight d-center"> | 8 | <div class="sidebarRight d-center"> |
| 8 | <sidebarRight /> | 9 | <sidebarRight /> |
| 9 | <div class="right-menu"> | 10 | <div class="right-menu"> |
| 10 | <div class="dataView pointer" @click="handleDataView">大屏展示</div> | ||
| 11 | <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand"> | 11 | <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand"> |
| 12 | <div class="avatar-wrapper"> | 12 | <div class="avatar-wrapper"> |
| 13 | <span style="padding-right:10px">{{ name }}</span> | 13 | <span style="padding-right:10px">{{ name }}</span> |
| ... | @@ -42,10 +42,6 @@ export default { | ... | @@ -42,10 +42,6 @@ export default { |
| 42 | } | 42 | } |
| 43 | }, | 43 | }, |
| 44 | methods: { | 44 | methods: { |
| 45 | handleDataView () { | ||
| 46 | const { href } = this.$router.resolve('/dataView'); | ||
| 47 | window.open(href, '_blank'); | ||
| 48 | }, | ||
| 49 | themeChange (val) { | 45 | themeChange (val) { |
| 50 | this.$store.dispatch('app/updateTheme', val) | 46 | this.$store.dispatch('app/updateTheme', val) |
| 51 | }, | 47 | }, |
| ... | @@ -63,10 +59,11 @@ export default { | ... | @@ -63,10 +59,11 @@ export default { |
| 63 | } | 59 | } |
| 64 | 60 | ||
| 65 | .menubg { | 61 | .menubg { |
| 66 | line-height: 30px; | 62 | height: 34px; |
| 67 | color: #FFFFFF; | 63 | color: #FFFFFF; |
| 68 | margin-right: 5px; | 64 | margin-right: 5px; |
| 69 | background: linear-gradient(180deg, #0A2580 0%, #2542C9 100%); | 65 | background: url('~@/image/navbar.png') no-repeat; |
| 66 | background-size: 100% 100%; | ||
| 70 | } | 67 | } |
| 71 | 68 | ||
| 72 | /deep/.el-menu-item { | 69 | /deep/.el-menu-item { |
| ... | @@ -78,19 +75,24 @@ export default { | ... | @@ -78,19 +75,24 @@ export default { |
| 78 | } | 75 | } |
| 79 | 76 | ||
| 80 | /deep/.el-submenu__title { | 77 | /deep/.el-submenu__title { |
| 81 | line-height: 30px !important; | 78 | height: 34px; |
| 82 | height: 42px !important; | ||
| 83 | } | 79 | } |
| 84 | 80 | ||
| 85 | /deep/.el-submenu__title span { | 81 | /deep/.el-submenu__title span { |
| 86 | font-size: 14px; | 82 | font-size: 14px; |
| 87 | } | 83 | } |
| 88 | 84 | ||
| 85 | .sidebarLeft, | ||
| 86 | .sidebarRight { | ||
| 87 | position: relative; | ||
| 88 | top: 13px; | ||
| 89 | } | ||
| 90 | |||
| 89 | // 导航选中背景色 | 91 | // 导航选中背景色 |
| 90 | .xuanzhong { | 92 | .xuanzhong { |
| 91 | background: linear-gradient(180deg, #73551D 0%, #C09C43 100%); | 93 | background: url('~@/image/selNavbar.png') no-repeat; |
| 92 | font-weight: 700; | 94 | background-size: 100% 100%; |
| 93 | color: #FFFFFF !important; | 95 | color: #09C39A !important; |
| 94 | } | 96 | } |
| 95 | 97 | ||
| 96 | /deep/.el-menu-item:hover { | 98 | /deep/.el-menu-item:hover { |
| ... | @@ -114,11 +116,26 @@ export default { | ... | @@ -114,11 +116,26 @@ export default { |
| 114 | height: $headerHeight; | 116 | height: $headerHeight; |
| 115 | overflow: hidden; | 117 | overflow: hidden; |
| 116 | position: relative; | 118 | position: relative; |
| 117 | background: linear-gradient(180deg, #0D3DC9 0%, #3476E1 100%); | ||
| 118 | display: flex; | 119 | display: flex; |
| 119 | align-items: center; | 120 | align-items: center; |
| 120 | padding: 0 20px; | 121 | padding: 0 20px; |
| 121 | justify-content: space-between; | 122 | justify-content: space-between; |
| 123 | background: url('~@/image/header.png') no-repeat; | ||
| 124 | background-size: 100% 100%; | ||
| 125 | |||
| 126 | .title { | ||
| 127 | position: absolute; | ||
| 128 | left: 0; | ||
| 129 | top: 7px; | ||
| 130 | bottom: 0; | ||
| 131 | right: 0; | ||
| 132 | margin: 0 auto; | ||
| 133 | font-size: 32px; | ||
| 134 | color: #FFFFFF; | ||
| 135 | font-weight: 700; | ||
| 136 | text-align: center; | ||
| 137 | |||
| 138 | } | ||
| 122 | 139 | ||
| 123 | .right-menu { | 140 | .right-menu { |
| 124 | float: right; | 141 | float: right; | ... | ... |
| ... | @@ -36,7 +36,10 @@ export default { | ... | @@ -36,7 +36,10 @@ export default { |
| 36 | position: relative; | 36 | position: relative; |
| 37 | height: 100%; | 37 | height: 100%; |
| 38 | width: 100%; | 38 | width: 100%; |
| 39 | 39 | background: url('~@/image/bg.png') no-repeat; | |
| 40 | background-size: 100% 100%; | ||
| 41 | padding: 12px; | ||
| 42 | box-sizing: border-box; | ||
| 40 | 43 | ||
| 41 | &.mobile.openSidebar { | 44 | &.mobile.openSidebar { |
| 42 | position: fixed; | 45 | position: fixed; |
| ... | @@ -46,7 +49,6 @@ export default { | ... | @@ -46,7 +49,6 @@ export default { |
| 46 | 49 | ||
| 47 | .appMain { | 50 | .appMain { |
| 48 | height: calc(100vh - 65px); | 51 | height: calc(100vh - 65px); |
| 49 | background-color: $containerbg; | ||
| 50 | 52 | ||
| 51 | .app-main { | 53 | .app-main { |
| 52 | height: 100%; | 54 | height: 100%; | ... | ... |
-
Please register or sign in to post a comment