Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
34318b99 by 任超
Options

style:样式修改

1 parent 02c931f0
Inline Side-by-side
Showing 1 changed file with 194 additions and 194 deletions
...@@ -19,244 +19,244 @@ ...@@ -19,244 +19,244 @@
19 </div> 19 </div>
20 </template> 20 </template>
21 <script> 21 <script>
22 import sidebarLeft from "./Sidebar/sidebarLeft"; 22 import sidebarLeft from "./Sidebar/sidebarLeft";
23 import sidebarRight from "./Sidebar/sidebarRight"; 23 import sidebarRight from "./Sidebar/sidebarRight";
24 import { logout } from "@/api/login.js"; 24 import { logout } from "@/api/login.js";
25 import { mapGetters } from "vuex"; 25 import { mapGetters } from "vuex";
26 export default { 26 export default {
27 components: { 27 components: {
28 sidebarLeft, 28 sidebarLeft,
29 sidebarRight, 29 sidebarRight,
30 },
31 computed: {
32 ...mapGetters(["sidebar", "dicData", "userInfo"]),
33 logoName () {
34 return this.dicData['sysCode'] && this.dicData['sysCode'].filter(item =>
35 item.DCODE == "systemTitle"
36 )
30 }, 37 },
31 computed: { 38 userName () {
32 ...mapGetters(["sidebar", "dicData", "userInfo"]), 39 return this.userInfo ? this.userInfo.name : ""
33 logoName () { 40 }
34 return this.dicData['sysCode'] && this.dicData['sysCode'].filter(item => 41 },
35 item.DCODE == "systemTitle" 42 methods: {
36 ) 43 onCancel () {
37 }, 44 logout()
38 userName () { 45 .then((res) => {
39 return this.userInfo ? this.userInfo.name : "" 46 sessionStorage.removeItem("token");
40 } 47 this.$store.dispatch("user/resetState");
41 }, 48 this.$router.replace({
42 methods: { 49 path: "/jg",
43 onCancel () { 50 query: {
44 logout() 51 redirect: this.$route.fullPath,
45 .then((res) => { 52 },
46 sessionStorage.removeItem("token");
47 this.$store.dispatch("user/resetState");
48 this.$router.replace({
49 path: "/jg",
50 query: {
51 redirect: this.$route.fullPath,
52 },
53 });
54 })
55 .catch((error) => {
56 // console.dir(error);
57 }); 53 });
58 }, 54 })
55 .catch((error) => {
56 // console.dir(error);
57 });
59 }, 58 },
60 }; 59 },
60 };
61 </script> 61 </script>
62 <style lang="scss" scoped> 62 <style lang="scss" scoped>
63 /deep/.el-menu--horizontal { 63 /deep/.el-menu--horizontal {
64 display: flex; 64 display: flex;
65 align-items: center; 65 align-items: center;
66 } 66 }
67 67
68 .menubg { 68 .menubg {
69 height: 34px; 69 height: 34px;
70 width: 130px; 70 width: 130px !important;
71 text-align: center; 71 text-align: center;
72 color: #ffffff; 72 color: #ffffff;
73 margin-right: 20px; 73 background: url("~@/image/navbar.png") no-repeat;
74 background: url("~@/image/navbar.png") no-repeat; 74 background-size: 100% 100%;
75 background-size: 100% 100%; 75 }
76 }
77 76
78 /deep/.el-menu-item { 77 /deep/.el-menu-item {
79 @extend .menubg; 78 @extend .menubg;
80 } 79 }
81 80
82 /deep/.el-submenu { 81 /deep/.el-submenu {
83 @extend .menubg; 82 @extend .menubg;
84 } 83 }
85 84
86 /deep/.el-submenu__title { 85 /deep/.el-submenu__title {
87 height: 34px; 86 height: 34px;
88 color: #ffffff; 87 color: #ffffff;
89 } 88 }
90 89
91 /deep/.el-submenu__title span { 90 /deep/.el-submenu__title span {
92 font-size: 14px; 91 font-size: 14px;
93 } 92 }
94 93
95 .sidebarLeft { 94 .sidebarLeft {
96 position: relative; 95 position: relative;
97 top: 13px; 96 top: 13px;
98 width: 30%; 97 width: 30%;
99 } 98 }
100 99
101 /deep/.el-menu { 100 /deep/.el-menu {
102 display: flex; 101 display: flex;
103 justify-content: space-between; 102 justify-content: space-between;
104 } 103 width: 100%;
104 }
105 105
106 /deep/.el-menu-item { 106 /deep/.el-menu-item {
107 flex: 1; 107 flex: 1;
108 width: 100%; 108 width: 100%;
109 } 109 }
110 110
111 .sidebarRight { 111 .sidebarRight {
112 position: relative; 112 position: relative;
113 top: 13px; 113 top: 13px;
114 width: 30%; 114 width: 30%;
115 padding-left: 20px; 115 }
116 }
117 116
118 // 导航选中背景色 117 // 导航选中背景色
119 .xuanzhong { 118 .xuanzhong {
120 background: url("~@/image/selNavbar.png") no-repeat; 119 background: url("~@/image/selNavbar.png") no-repeat;
121 background-size: 100% 100%; 120 background-size: 100% 100%;
122 color: #ffffff !important; 121 color: #ffffff !important;
123 font-weight: 700; 122 font-weight: 700;
124 } 123 }
125 124
126 /deep/.el-menu-item:hover { 125 /deep/.el-menu-item:hover {
127 @extend .xuanzhong; 126 @extend .xuanzhong;
128 } 127 }
129 128
130 /deep/.el-submenu__title:hover { 129 /deep/.el-submenu__title:hover {
131 @extend .xuanzhong; 130 @extend .xuanzhong;
132 } 131 }
132
133 /deep/.el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
134 @extend .xuanzhong;
135 }
133 136
134 /deep/.el-menu--horizontal .el-menu-item:not(.is-disabled):focus { 137 /deep/.el-menu-item.is-active {
135 @extend .xuanzhong; 138 @extend .xuanzhong;
139
140 }
141
142 .navbar {
143 height: $headerHeight;
144 overflow: hidden;
145 position: relative;
146 display: flex;
147 align-items: center;
148 padding: 0 20px;
149 justify-content: space-between;
150 background: url("~@/image/header.png") no-repeat;
151 background-size: 100% 100%;
152
153 .user {
154 font-size: 12px;
155 color: #ffffff;
156 position: absolute;
157 right: 20px;
158 top: 0;
159 cursor: pointer;
160
161 .closeStyle {
162 margin-right: 5px;
163 }
136 } 164 }
137 165
138 /deep/.el-menu-item.is-active { 166 .title {
139 @extend .xuanzhong; 167 position: absolute;
168 left: 0;
169 top: 10px;
170 bottom: 0;
171 right: 0;
172 margin: 0 auto;
173 font-size: 32px;
174 color: #ffffff;
175 font-weight: 700;
176 text-align: center;
140 } 177 }
141 178
142 .navbar { 179 .right-menu {
143 height: $headerHeight; 180 float: right;
144 overflow: hidden; 181 height: 100%;
145 position: relative; 182 line-height: 50px;
146 display: flex; 183 display: flex;
147 align-items: center; 184 align-items: center;
148 padding: 0 20px;
149 justify-content: space-between;
150 background: url("~@/image/header.png") no-repeat;
151 background-size: 100% 100%;
152 185
153 .user { 186 .shutdown {
154 font-size: 12px; 187 font-size: 20px;
155 color: #ffffff; 188 margin-left: 15px;
156 position: absolute;
157 right: 20px;
158 top: 0;
159 cursor: pointer; 189 cursor: pointer;
160
161 .closeStyle {
162 margin-right: 5px;
163 }
164 } 190 }
165 191
166 .title { 192 .organization-item {
167 position: absolute; 193 margin-right: 40px;
168 left: 0; 194 margin-top: -40px !important;
169 top: 10px;
170 bottom: 0;
171 right: 0;
172 margin: 0 auto;
173 font-size: 32px;
174 color: #ffffff;
175 font-weight: 700;
176 text-align: center;
177 } 195 }
178 196
179 .right-menu { 197 .item {
180 float: right; 198 margin-right: 40px;
181 height: 100%; 199 margin-top: -20px;
182 line-height: 50px; 200 line-height: 18.4px;
183 display: flex; 201 cursor: pointer;
184 align-items: center; 202 position: relative;
185 203
186 .shutdown { 204 .item-box {
187 font-size: 20px; 205 position: absolute;
188 margin-left: 15px; 206 top: -5px;
207 left: 3px;
208 width: 100%;
209 min-width: 25px;
210 height: 25px;
189 cursor: pointer; 211 cursor: pointer;
212 z-index: 100;
190 } 213 }
214 }
191 215
192 .organization-item { 216 &:focus {
193 margin-right: 40px; 217 outline: none;
194 margin-top: -40px !important; 218 }
195 }
196 219
197 .item { 220 .right-menu-item {
198 margin-right: 40px; 221 display: inline-block;
199 margin-top: -20px; 222 height: 100%;
200 line-height: 18.4px; 223 font-size: 18px;
224 color: #fff;
225 vertical-align: text-bottom;
226
227 &.hover-effect {
201 cursor: pointer; 228 cursor: pointer;
202 position: relative; 229 transition: background 0.3s;
230 display: flex;
231 align-items: center;
203 232
204 .item-box { 233 &:hover {
205 position: absolute; 234 background: rgba(0, 0, 0, 0.025);
206 top: -5px;
207 left: 3px;
208 width: 100%;
209 min-width: 25px;
210 height: 25px;
211 cursor: pointer;
212 z-index: 100;
213 } 235 }
214 } 236 }
237 }
215 238
216 &:focus { 239 .avatar-wrapper {
217 outline: none; 240 position: relative;
218 } 241 display: flex;
219 242 height: 40px;
220 .right-menu-item { 243 align-items: center;
221 display: inline-block;
222 height: 100%;
223 font-size: 18px;
224 color: #fff;
225 vertical-align: text-bottom;
226
227 &.hover-effect {
228 cursor: pointer;
229 transition: background 0.3s;
230 display: flex;
231 align-items: center;
232 244
233 &:hover { 245 .user-avatar {
234 background: rgba(0, 0, 0, 0.025); 246 cursor: pointer;
235 } 247 width: 35px;
236 } 248 height: 35px;
249 border-radius: 50%;
237 } 250 }
238 251
239 .avatar-wrapper { 252 .el-icon-caret-bottom {
240 position: relative; 253 cursor: pointer;
241 display: flex; 254 position: absolute;
242 height: 40px; 255 right: -15px;
243 align-items: center; 256 top: 17px;
244 257 font-size: 12px;
245 .user-avatar {
246 cursor: pointer;
247 width: 35px;
248 height: 35px;
249 border-radius: 50%;
250 }
251
252 .el-icon-caret-bottom {
253 cursor: pointer;
254 position: absolute;
255 right: -15px;
256 top: 17px;
257 font-size: 12px;
258 }
259 } 258 }
260 } 259 }
261 } 260 }
261 }
262 </style> 262 </style>
......