Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
4907ded2 by 任超
Options

style:左侧样式完成修改

1 parent a4842210
Inline Side-by-side
Showing 13 changed files with 38 additions and 74 deletions
...@@ -74,7 +74,7 @@ export default { ...@@ -74,7 +74,7 @@ export default {
74 }, 74 },
75 heightNum: { 75 heightNum: {
76 type: Number, 76 type: Number,
77 default: 240, 77 default: 260,
78 }, 78 },
79 maxHeight: { 79 maxHeight: {
80 type: Number, 80 type: Number,
......
...@@ -17,8 +17,10 @@ export default { ...@@ -17,8 +17,10 @@ export default {
17 </script> 17 </script>
18 <style lang="scss" scoped> 18 <style lang="scss" scoped>
19 .app-main { 19 .app-main {
20 height: calc(100vh - 70px); 20 height: calc(100vh - 84px);
21 overflow-x: hidden; 21 overflow-x: hidden;
22 box-sizing: border-box; 22 box-sizing: border-box;
23 flex: 1;
24 width: 100%;
23 } 25 }
24 </style> 26 </style>
...\ No newline at end of file ...\ No newline at end of file
......
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="logo">
5 <img :src="require('@/image/logo.png')" alt="" />
6 </div>
4 <div class="backdrop"> 7 <div class="backdrop">
5 <Breadcrumb /> 8 <Breadcrumb />
6 </div> 9 </div>
...@@ -122,7 +125,7 @@ export default { ...@@ -122,7 +125,7 @@ export default {
122 background: #0D1230; 125 background: #0D1230;
123 display: flex; 126 display: flex;
124 align-items: center; 127 align-items: center;
125 padding: 0 20px; 128 padding-right: 20px;
126 justify-content: space-between; 129 justify-content: space-between;
127 margin-bottom: 10px; 130 margin-bottom: 10px;
128 131
......
...@@ -89,9 +89,3 @@ export default { ...@@ -89,9 +89,3 @@ export default {
89 } 89 }
90 } 90 }
91 </script> 91 </script>
92
93 <style scoped>
94 /deep/.el-menu-item {
95 padding-left: 30px !important;
96 }
97 </style>
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <div> 2 <div>
3 <div class="logo">{{ title }}</div>
4 <el-scrollbar wrap-class="scrollbar-wrapper"> 3 <el-scrollbar wrap-class="scrollbar-wrapper">
5 <el-menu router :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText" 4 <el-menu router :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText"
6 :unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false" 5 :unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false"
...@@ -46,15 +45,4 @@ export default { ...@@ -46,15 +45,4 @@ export default {
46 } 45 }
47 } 46 }
48 } 47 }
49 </script>
50 <style scoped lang="scss">
51 .logo {
52 width: 100%;
53 height: 80px;
54 color: #ffffff;
55 font-size: 20px;
56 display: flex;
57 align-items: center;
58 padding-left: 20px;
59 }
60 </style>
...\ No newline at end of file ...\ No newline at end of file
48 </script>
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <div class="app-wrapper"> 2 <div class="app-wrapper">
3 <sidebar class="sidebar-container" /> 3 <!-- <sidebar class="sidebar-container" />
4 <div class="main-container"> 4 <div class="main-container">
5 <navbar /> 5 <navbar />
6 <app-main /> 6 <app-main />
7 </div>
8 <!-- <navbar />
9 <div :class="{ hasTagsView: needTagsView }" class="main-container">
10 <div :class="{ 'fixed-header': fixedHeader }">
11 <sidebar class="sidebar-container" />
12 <tags-view v-if="needTagsView" />
13 </div>
14 <app-main />
15 </div> --> 7 </div> -->
8 <navbar />
9 <div class="main-container">
10 <sidebar class="sidebar-container" />
11 <app-main />
12 </div>
16 </div> 13 </div>
17 </template> 14 </template>
18 <script> 15 <script>
...@@ -45,7 +42,7 @@ export default { ...@@ -45,7 +42,7 @@ export default {
45 position: relative; 42 position: relative;
46 height: 100%; 43 height: 100%;
47 width: 100%; 44 width: 100%;
48 background-color: #000; 45 background-color: $containerbg;
49 46
50 &.mobile.openSidebar { 47 &.mobile.openSidebar {
51 position: fixed; 48 position: fixed;
......
...@@ -18,7 +18,6 @@ export default { ...@@ -18,7 +18,6 @@ export default {
18 <style lang="scss" scoped> 18 <style lang="scss" scoped>
19 .hasTagsView { 19 .hasTagsView {
20 .app-main { 20 .app-main {
21 height: calc(100% - 41px);
22 overflow-x: auto; 21 overflow-x: auto;
23 padding: 5px; 22 padding: 5px;
24 box-sizing: border-box; 23 box-sizing: border-box;
......
...@@ -88,10 +88,4 @@ export default { ...@@ -88,10 +88,4 @@ export default {
88 } 88 }
89 } 89 }
90 } 90 }
91 </script>
92
93 <style scoped>
94 /deep/.el-menu-item {
95 padding-left: 30px !important;
96 }
97 </style>
...\ No newline at end of file ...\ No newline at end of file
91 </script>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -42,11 +42,6 @@ export default { ...@@ -42,11 +42,6 @@ export default {
42 background: none !important; 42 background: none !important;
43 } 43 }
44 44
45 /deep/.el-menu-item {
46 color: #fff;
47 font-size: 18px;
48 }
49
50 /deep/.el-menu-item:hover { 45 /deep/.el-menu-item:hover {
51 background: none; 46 background: none;
52 font-weight: 700; 47 font-weight: 700;
......
1 #app { 1 #app {
2 .main-container { 2 .main-container {
3 height: 100%; 3 width: 100%;
4 height: calc(100% - 74px);
4 transition: margin-left 0.28s; 5 transition: margin-left 0.28s;
5 margin-left: 220px; 6 display: flex;
6 box-sizing: border-box; 7 background-color: $containerbg;
7 padding-right: 10px;
8 } 8 }
9 9
10 .sidebar-container { 10 .sidebar-container {
11 transition: width 0.28s; 11 transition: width 0.28s;
12 width: $sideBarWidth !important; 12 width: $sideBarWidth !important;
13 height: 100%;
14 // height: calc(100% - #{$headerHeight});
15 position: fixed;
16 font-size: 0px; 13 font-size: 0px;
17 // top: $headerHeight; 14
18 bottom: 0; 15
19 left: 0;
20 z-index: 80;
21 background-color: $subMenuBg;
22 // overflow: hidden;
23 16
24 .horizontal-collapse-transition { 17 .horizontal-collapse-transition {
25 transition: 0s width ease-in-out, 0s padding-left ease-in-out, 18 transition: 0s width ease-in-out, 0s padding-left ease-in-out,
...@@ -28,9 +21,7 @@ ...@@ -28,9 +21,7 @@
28 21
29 .scrollbar-wrapper { 22 .scrollbar-wrapper {
30 overflow-x: hidden !important; 23 overflow-x: hidden !important;
31 // overflow-y: auto;
32 margin-right: 0 !important; 24 margin-right: 0 !important;
33 height: calc(100vh - 80px);
34 25
35 &::-webkit-scrollbar { 26 &::-webkit-scrollbar {
36 display: none; 27 display: none;
...@@ -67,14 +58,15 @@ ...@@ -67,14 +58,15 @@
67 58
68 // 有子级 59 // 有子级
69 .el-submenu__title { 60 .el-submenu__title {
70 margin-left: 13px;
71 padding-left: 10px !important; 61 padding-left: 10px !important;
72 color: $menuText; 62 color: $menuText;
73 background-color: transparent !important; 63 height: 42px;
64 background: linear-gradient(90deg, #013874 0%, #081B56 100%);
65 margin-bottom: 8px;
74 66
75 &:hover { 67 &:hover {
76 color: $subMenuActiveText !important; 68 color: $subMenuActiveText !important;
77 background-color: $subMenuHover !important; 69 background: linear-gradient(90deg, #1D66DC 0%, #081B56 100%);
78 70
79 .svg-icon, 71 .svg-icon,
80 i, 72 i,
...@@ -87,12 +79,13 @@ ...@@ -87,12 +79,13 @@
87 // 没有子级 79 // 没有子级
88 .submenu-title-noDropdown { 80 .submenu-title-noDropdown {
89 color: $menuText; 81 color: $menuText;
90 // border-radius: 6px; 82 padding-left: 20px;
91 padding-left: 20px !important; 83 margin-bottom: 8px;
84 background: linear-gradient(90deg, #013874 0%, #081B56 100%);
92 85
93 &:hover { 86 &:hover {
94 color: $menuActiveText !important; 87 color: $menuActiveText !important;
95 background-color: $subMenuHover !important; 88 background: linear-gradient(90deg, #1D66DC 0%, #081B56 100%);
96 89
97 .svg-icon { 90 .svg-icon {
98 color: #1ea6f8 !important; 91 color: #1ea6f8 !important;
...@@ -107,7 +100,7 @@ ...@@ -107,7 +100,7 @@
107 .submenu-title-noDropdown.is-active, 100 .submenu-title-noDropdown.is-active,
108 .el-submenu__title.is-active { 101 .el-submenu__title.is-active {
109 color: $menuActiveText; 102 color: $menuActiveText;
110 background-color: $menuHover !important; 103 background: linear-gradient(90deg, #1D66DC 0%, #081B56 100%);
111 104
112 .svg-icon { 105 .svg-icon {
113 color: #1ea6f8 !important; 106 color: #1ea6f8 !important;
...@@ -178,10 +171,6 @@ ...@@ -178,10 +171,6 @@
178 width: 54px !important; 171 width: 54px !important;
179 } 172 }
180 173
181 .main-container {
182 margin-left: 54px;
183 }
184
185 .submenu-title-noDropdown { 174 .submenu-title-noDropdown {
186 padding: 0 !important; 175 padding: 0 !important;
187 position: relative; 176 position: relative;
...@@ -341,6 +330,7 @@ ...@@ -341,6 +330,7 @@
341 } 330 }
342 331
343 .el-menu-item { 332 .el-menu-item {
333 height: 42px;
344 display: flex; 334 display: flex;
345 align-items: center; 335 align-items: center;
346 padding-right: 20px !important; 336 padding-right: 20px !important;
......
...@@ -9,15 +9,17 @@ $yellow:#FEC171; ...@@ -9,15 +9,17 @@ $yellow:#FEC171;
9 $panGreen: #30B08F; 9 $panGreen: #30B08F;
10 10
11 // header 11 // header
12 $headerHeight: 60px; 12 $headerHeight: 64px;
13 13
14 // sidebar 14 // sidebar
15 $menuText:#ffffff; 15 $menuText:#ffffff;
16 $menuActiveText:#ffffff; 16 $menuActiveText:#ffffff;
17 $subMenuActiveText:#ffffff; 17 $subMenuActiveText:#ffffff;
18 18
19 $containerbg: #061850;
20
19 $menuBg:#0D1230; 21 $menuBg:#0D1230;
20 $menuHover:#0794FF; 22 $menuHover: #1D66DC;
21 23
22 $subMenuBg:#0D1230; 24 $subMenuBg:#0D1230;
23 $subMenuHover:#1D66DC; 25 $subMenuHover:#1D66DC;
......
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
82 <div class="jrxxlb tableClass"> 82 <div class="jrxxlb tableClass">
83 <div class="title">陕西省平台接入情况</div> 83 <div class="title">陕西省平台接入情况</div>
84 <!-- 陕西省平台接入情况table --> 84 <!-- 陕西省平台接入情况table -->
85 <lb-table ref="table" :pagination="false" :heightNum="428" :column="tableData.columns" :data="tableData.data"> 85 <lb-table ref="table" :pagination="false" :heightNum="440" :column="tableData.columns" :data="tableData.data">
86 </lb-table> 86 </lb-table>
87 </div> 87 </div>
88 </div> 88 </div>
......