Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
cdbf5b1d by xiaomiao
Options

组件样式调整

1 parent 90e3f601
Inline Side-by-side
Showing 9 changed files with 272 additions and 303 deletions
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
4 <div class="logo"> 4 <div class="logo">
5 <img :src="require('@/image/logo.png')" alt="" /> 5 <img :src="require('@/image/logo.png')" alt="" />
6 </div> 6 </div>
7 <div class="backdrop"> 7 <!-- <div class="backdrop">
8 <Breadcrumb /> 8 <Breadcrumb />
9 </div> 9 </div> -->
10 <div class="right-menu"> 10 <div class="right-menu">
11 <div class="dataView d-center pointer" @click="handleDataView">大屏展示</div> 11 <div class="dataView d-center pointer" @click="handleDataView">大屏展示</div>
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">
...@@ -24,10 +24,10 @@ ...@@ -24,10 +24,10 @@
24 </div> 24 </div>
25 </template> 25 </template>
26 <script> 26 <script>
27 import { mapGetters } from 'vuex' 27 import { mapGetters } from 'vuex'
28 import Breadcrumb from './Breadcrumb' 28 import Breadcrumb from './Breadcrumb'
29 import defaultSettings from '@/settings' 29 import defaultSettings from '@/settings'
30 export default { 30 export default {
31 components: { 31 components: {
32 Breadcrumb 32 Breadcrumb
33 }, 33 },
...@@ -54,10 +54,10 @@ export default { ...@@ -54,10 +54,10 @@ export default {
54 } 54 }
55 } 55 }
56 } 56 }
57 } 57 }
58 </script> 58 </script>
59 <style lang="scss" scoped> 59 <style lang="scss" scoped>
60 .navbar-con { 60 .navbar-con {
61 position: relative; 61 position: relative;
62 62
63 .logo { 63 .logo {
...@@ -65,25 +65,25 @@ export default { ...@@ -65,25 +65,25 @@ export default {
65 font-size: 26px; 65 font-size: 26px;
66 font-weight: 700; 66 font-weight: 700;
67 } 67 }
68 } 68 }
69 69
70 .dataView { 70 .dataView {
71 color: #fff; 71 color: #fff;
72 width: 120px; 72 width: 120px;
73 height: 32px; 73 height: 32px;
74 background: url('../../image/dp.png'); 74 background: url("../../image/dp.png");
75 background-size: cover; 75 background-size: cover;
76 margin-right: 20px; 76 margin-right: 20px;
77 } 77 }
78 78
79 .NoticeBar { 79 .NoticeBar {
80 position: absolute; 80 position: absolute;
81 bottom: 0; 81 bottom: 0;
82 } 82 }
83 83
84 .el-dropdown-menu { 84 .el-dropdown-menu {
85 padding: 0 !important; 85 padding: 0 !important;
86 border: 1px solid #EBEEF5; 86 border: 1px solid #ebeef5;
87 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12); 87 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
88 border-radius: 4px 0 0 4px 4px; 88 border-radius: 4px 0 0 4px 4px;
89 89
...@@ -93,14 +93,14 @@ export default { ...@@ -93,14 +93,14 @@ export default {
93 font-size: 14px; 93 font-size: 14px;
94 font-family: PingFangSC-Regular, PingFang SC; 94 font-family: PingFangSC-Regular, PingFang SC;
95 font-weight: 400; 95 font-weight: 400;
96 color: #4A4A4A; 96 color: #4a4a4a;
97 width: 140px; 97 width: 140px;
98 height: 36px; 98 height: 36px;
99 line-height: 36px; 99 line-height: 36px;
100 } 100 }
101 101
102 .el-dropdown-menu__item:nth-child(6) { 102 .el-dropdown-menu__item:nth-child(6) {
103 border-top: 1px solid #EBEEF5; 103 border-top: 1px solid #ebeef5;
104 } 104 }
105 105
106 .popper__arrow { 106 .popper__arrow {
...@@ -111,18 +111,18 @@ export default { ...@@ -111,18 +111,18 @@ export default {
111 111
112 .el-dropdown-menu__item:not(.is-disabled):hover, 112 .el-dropdown-menu__item:not(.is-disabled):hover,
113 .el-dropdown-menu__item:focus { 113 .el-dropdown-menu__item:focus {
114 background: #F6F7F9; 114 background: #f6f7f9;
115 color: #4A4A4A; 115 color: #4a4a4a;
116 }
116 } 117 }
117 }
118 118
119 .navbar { 119 .navbar {
120 height: $headerHeight; 120 height: $headerHeight;
121 overflow: hidden; 121 overflow: hidden;
122 position: relative; 122 position: relative;
123 // background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色 123 // background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色
124 // box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08); 124 // box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08);
125 background: #0D1230; 125 background: #0d1230;
126 display: flex; 126 display: flex;
127 align-items: center; 127 align-items: center;
128 padding-right: 20px; 128 padding-right: 20px;
...@@ -246,5 +246,5 @@ export default { ...@@ -246,5 +246,5 @@ export default {
246 } 246 }
247 } 247 }
248 } 248 }
249 } 249 }
250 </style> 250 </style>
......
...@@ -14,13 +14,13 @@ ...@@ -14,13 +14,13 @@
14 </template> 14 </template>
15 15
16 <script> 16 <script>
17 import { mapGetters } from 'vuex' 17 import { mapGetters } from 'vuex'
18 import Logo from './Logo' 18 import Logo from './Logo'
19 import defaultSettings from '@/settings' 19 import defaultSettings from '@/settings'
20 import SidebarItem from './SidebarItem' 20 import SidebarItem from './SidebarItem'
21 import variables from '@/styles/variables.scss' 21 import variables from '@/styles/variables.scss'
22 import { asyncRoutes } from '@/router' 22 import { asyncRoutes } from '@/router'
23 export default { 23 export default {
24 components: { SidebarItem, Logo }, 24 components: { SidebarItem, Logo },
25 data () { 25 data () {
26 return { 26 return {
...@@ -44,5 +44,5 @@ export default { ...@@ -44,5 +44,5 @@ export default {
44 return asyncRoutes 44 return asyncRoutes
45 } 45 }
46 } 46 }
47 } 47 }
48 </script> 48 </script>
......
...@@ -199,4 +199,235 @@ ...@@ -199,4 +199,235 @@
199 box-sizing: border-box; 199 box-sizing: border-box;
200 text-align: right; 200 text-align: right;
201 } 201 }
202 // 修改弹框样式
203 .modifydialog{
204 /deep/.el-dialog__header {
205 text-align: center;
206 margin-bottom: 10px;
207 .el-dialog__title {
208 color: white;
209 }
210 }
211
212 /deep/.el-form-item__label {
213 color: white;
214 }
215 /deep/.el-input__inner {
216 background-color: #07388b;
217 }
218 /deep/.el-input__inner {
219 background: #07388b;
220 border-radius: 2px;
221 border: 1px solid #6bc1fc;
222 }
223 /deep/.el-textarea__inner {
224 background: #07388b;
225 color: #fff;
226 }
227 /deep/.el-form-item__label {
228 color: #fff;
229 }
230 /deep/.el-dialog__headerbtn {
231 position: absolute;
232 top: 22px;
233 right: 30px;
234 }
235 /deep/.el-dialog__header {
236 text-align: center;
237 margin-bottom: 10px;
238 .el-dialog__title {
239 color: white;
240 }
241 }
242 }
243
244 // 角色配置
245 .roleconfiguration{
246 /deep/.el-dialog__body {
247 display: flex;
248 flex-direction: column;
249 }
250
251 /deep/ .el-tabs {
252 color: #cef8ff;
253 }
254
255 .sjmx {
256 /deep/.el-tabs__item {
257 height: 50px;
258 padding-top: 6px;
259 }
260 }
261
262 /deep/.el-tabs__item {
263 color: #cef8ff !important;
264
265 display: flex;
266 flex-direction: row;
267 justify-content: center;
268 background: url("~@/image/tabitem.png") no-repeat;
269 background-size: 100% 100%;
270 border: none !important;
271 }
272
273 .obligee-item-name {
274 background: #05275b;
275 color: #ffffff;
276 background: url("~@/image/itembg.png") no-repeat;
277 background-size: 100% 100%;
278 }
279
280 /deep/.el-tabs__nav-scroll {
281 background: none;
282 }
283
284 /deep/.el-tabs__nav {
285 display: flex;
286 border: none !important;
287 }
288
289 /deep/.el-tabs__item.is-top {
290 border: 1px solid #dfe4ed;
291 border-top: 1px solid #dfe4ed;
292 border-bottom: 1px solid transparent;
293 }
294
295 /deep/.el-tabs__header {
296 border: none;
297 margin-bottom: 0;
298 }
299
300 /deep/.el-tabs__item.is-top:not(:last-child) {
301 margin-right: 5px;
302 }
303
304 /deep/.el-tabs__item.is-top {
305 background-color: none !important;
306 }
307
308 /deep/.el-tabs__item.is-active {
309 background: url("~@/image/tabitemse.png") no-repeat;
310 background-size: 100% 100%;
311 }
312
313 .success-images {
314 width: 30px;
315 height: 30px;
316 position: relative;
317 top: 10px;
318 right: 3px;
319 }
320
321 .tab-pane-item {
322 line-height: 20px;
323 color: #02d9fd;
324
325 p {
326 text-align: center;
327 }
328 }
329
330 .edit-content {
331 height: 450px;
332 overflow-y: auto;
333 overflow-x: hidden;
334 padding-right: 1px;
335 margin-bottom: 10px;
336 border-top: none;
337 }
338
339 /deep/.editDialogBox {
340 border-radius: 8px;
341 overflow: hidden;
342 min-width: 1228px;
343 height: 825px !important;
344
345 .dialog-from {
346 padding: 13px;
347 border-radius: 2px;
348 box-sizing: border-box;
349
350 .el-row {
351 display: flex;
352 flex-wrap: nowrap;
353 }
354
355 .el-col {
356 line-height: 18px;
357 display: flex;
358 align-items: center;
359 margin-bottom: 3px;
360 color: #b5d6dc;
361 border-radius: 2px;
362 border: 1px solid #224c7c;
363 margin: 5px;
364
365 span {
366 display: inline-block;
367 padding: 3px;
368 border-radius: 3px;
369 overflow: hidden;
370 white-space: nowrap;
371 text-align: left;
372 color: #02d9fd;
373 }
374
375 p {
376 flex: 1;
377 width: 100%;
378 padding-left: 5px;
379 line-height: 20px;
380 color: #c0c4cc;
381 cursor: not-allowed;
382 white-space: nowrap;
383 margin-right: 5px;
384 text-align: right;
385 }
386 }
387 }
388
389 .dialog_title {
390 display: flex;
391 position: relative;
392 font-size: 24px;
393 top: -11px;
394 width: 38%;
395 height: 40px;
396 margin-left: 28px;
397 justify-content: center;
398 }
399
400 .el-dialog__header {
401 display: flex;
402 margin-bottom: 15px;
403 }
404 .el-dialog__footer {
405 padding-right: 40px;
406 }
407
408 .divider {
409 width: 100%;
410 border-bottom: 1px solid #ccc;
411 }
412 }
413
414 .el-dialog__wrapper {
415 overflow: hidden;
416 }
417 /deep/.el-table {
418 background: none;
419 th.el-table__cell {
420 background-color: #073781;
421 color: #02d9fd;
422 }
423 tr {
424 background: none;
425
426 td {
427 color: white;
428 }
429 }
430 }
431
432 }
202 433
......
1 <template> 1 <template>
2 <div> 2 <div>
3 <Dialog 3 <Dialog
4 class="modifydialog"
4 :title="title" 5 :title="title"
5 :show.sync="visible" 6 :show.sync="visible"
6 :width="'767px'" 7 :width="'767px'"
...@@ -258,19 +259,5 @@ ...@@ -258,19 +259,5 @@
258 } 259 }
259 </script> 260 </script>
260 <style scoped lang="scss"> 261 <style scoped lang="scss">
261 /deep/.el-dialog__header { 262 @import "~@/styles/public.scss";
262 text-align: center;
263 margin-bottom: 10px;
264 .el-dialog__title {
265 color: white;
266 }
267 }
268
269 /deep/.el-form-item__label {
270 color: white;
271 }
272 /deep/.el-input__inner {
273 background-color: #07388b;
274 }
275
276 </style> 263 </style>
......
1 <!-- 新增 & 修改角色 --> 1 <!-- 新增 & 修改角色 -->
2 <template> 2 <template>
3 <Dialog 3 <Dialog
4 class="modifydialog"
4 :title="dialogTitle" 5 :title="dialogTitle"
5 :show.sync="showAddEditDialog" 6 :show.sync="showAddEditDialog"
6 :width="'767px'" 7 :width="'767px'"
...@@ -160,28 +161,4 @@ ...@@ -160,28 +161,4 @@
160 } 161 }
161 </script> 162 </script>
162 <style scoped lang="scss"> 163 <style scoped lang="scss">
163 /deep/.el-input__inner {
164 background: #07388b;
165 border-radius: 2px;
166 border: 1px solid #6bc1fc;
167 }
168 /deep/.el-textarea__inner {
169 background: #07388b;
170 color: #fff;
171 }
172 /deep/.el-form-item__label {
173 color: #fff;
174 }
175 /deep/.el-dialog__headerbtn {
176 position: absolute;
177 top: 15px;
178 right: 30px;
179 }
180 /deep/.el-dialog__header {
181 text-align: center;
182 margin-bottom: 10px;
183 .el-dialog__title {
184 color: white;
185 }
186 }
187 </style> 164 </style>
......
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
3 :close-on-click-modal="false" 3 :close-on-click-modal="false"
4 top="0" 4 top="0"
5 @click="close()" 5 @click="close()"
6 class="roleconfiguration"
6 custom-class="dialogBox editDialogBox mainCenter" 7 custom-class="dialogBox editDialogBox mainCenter"
7 :visible.sync="visible" 8 :visible.sync="visible"
8 width="85%"> 9 width="85%">
...@@ -417,210 +418,4 @@ ...@@ -417,210 +418,4 @@
417 <style scoped lang="scss"> 418 <style scoped lang="scss">
418 @import "~@/styles/mixin.scss"; 419 @import "~@/styles/mixin.scss";
419 @import "~@/styles/dialogBox.scss"; 420 @import "~@/styles/dialogBox.scss";
420
421 .editForm {
422 /deep/.el-textarea__inner {
423 border: 1px solid #224c7c !important;
424 margin: 0 0 10px 0 !important;
425 width: 100% !important;
426 color: #dadde3 !important;
427 background: transparent !important;
428 }
429
430 /deep/.el-input__inner {
431 border: 1px solid #224c7c !important;
432 margin: 0 !important;
433 width: 100% !important;
434 color: #dadde3 !important;
435 background: transparent !important;
436 }
437 }
438
439 /deep/.el-dialog__body {
440 display: flex;
441 flex-direction: column;
442 }
443
444 /deep/ .el-tabs {
445 color: #cef8ff;
446 }
447
448 .sjmx {
449 /deep/.el-tabs__item {
450 height: 50px;
451 padding-top: 6px;
452 }
453 }
454
455 /deep/.el-tabs__item {
456 color: #cef8ff !important;
457
458 display: flex;
459 flex-direction: row;
460 justify-content: center;
461 background: url("~@/image/tabitem.png") no-repeat;
462 background-size: 100% 100%;
463 border: none !important;
464 }
465
466 .obligee-item-name {
467 background: #05275b;
468 color: #ffffff;
469 background: url("~@/image/itembg.png") no-repeat;
470 background-size: 100% 100%;
471 }
472
473 /deep/.el-tabs__nav-scroll {
474 background: none;
475 }
476
477 /deep/.el-tabs__nav {
478 display: flex;
479 border: none !important;
480 }
481
482 /deep/.el-tabs__item.is-top {
483 border: 1px solid #dfe4ed;
484 border-top: 1px solid #dfe4ed;
485 border-bottom: 1px solid transparent;
486 }
487
488 /deep/.el-tabs__header {
489 border: none;
490 margin-bottom: 0;
491 }
492
493 /deep/.el-tabs__item.is-top:not(:last-child) {
494 margin-right: 5px;
495 }
496
497 /deep/.el-tabs__item.is-top {
498 background-color: none !important;
499 }
500
501 /deep/.el-tabs__item.is-active {
502 background: url("~@/image/tabitemse.png") no-repeat;
503 background-size: 100% 100%;
504 }
505
506 .success-images {
507 width: 30px;
508 height: 30px;
509 position: relative;
510 top: 10px;
511 right: 3px;
512 }
513
514 .tab-pane-item {
515 line-height: 20px;
516 color: #02d9fd;
517
518 p {
519 text-align: center;
520 }
521 }
522
523 .edit-content {
524 height: 450px;
525 overflow-y: auto;
526 overflow-x: hidden;
527 padding-right: 1px;
528 margin-bottom: 10px;
529 border-top: none;
530 }
531
532 /deep/.editDialogBox {
533 border-radius: 8px;
534 overflow: hidden;
535 min-width: 1228px;
536 height: 825px !important;
537
538 .dialog-from {
539 padding: 13px;
540 border-radius: 2px;
541 box-sizing: border-box;
542
543 .el-row {
544 display: flex;
545 flex-wrap: nowrap;
546 }
547
548 .el-col {
549 line-height: 18px;
550 display: flex;
551 align-items: center;
552 margin-bottom: 3px;
553 color: #b5d6dc;
554 border-radius: 2px;
555 border: 1px solid #224c7c;
556 margin: 5px;
557
558 span {
559 display: inline-block;
560 padding: 3px;
561 border-radius: 3px;
562 overflow: hidden;
563 white-space: nowrap;
564 text-align: left;
565 color: #02d9fd;
566 }
567
568 p {
569 flex: 1;
570 width: 100%;
571 padding-left: 5px;
572 line-height: 20px;
573 color: #c0c4cc;
574 cursor: not-allowed;
575 white-space: nowrap;
576 margin-right: 5px;
577 text-align: right;
578 }
579 }
580 }
581
582 .dialog_title {
583 display: flex;
584 position: relative;
585 font-size: 24px;
586 top: -11px;
587 width: 38%;
588 height: 40px;
589 margin-left: 28px;
590 justify-content: center;
591 }
592
593 .el-dialog__header {
594 display: flex;
595 margin-bottom: 15px;
596 }
597 .el-dialog__footer {
598 padding-right: 40px;
599 }
600
601 .divider {
602 width: 100%;
603 border-bottom: 1px solid #ccc;
604 }
605 }
606
607 .el-dialog__wrapper {
608 overflow: hidden;
609 }
610 /deep/.el-table {
611 background: none;
612 th.el-table__cell {
613 background-color: #073781;
614 color: #02d9fd;
615 }
616 tr {
617 background: none;
618
619 td {
620 color: white;
621 }
622 }
623 }
624
625 // #08346F !important;
626 </style> 421 </style>
......
1 <template> 1 <template>
2 <Dialog :title="title" :show.sync="visible" :width="'715px'" @close="close()"> 2 <Dialog :title="title" class="modifydialog" :show.sync="visible" :width="'715px'" @close="close()">
3 <template slot="content"> 3 <template slot="content">
4 <el-form ref="form" :model="form" :rules="rules"> 4 <el-form ref="form" :model="form" :rules="rules">
5 <el-row :gutter="24"> 5 <el-row :gutter="24">
...@@ -218,26 +218,4 @@ ...@@ -218,26 +218,4 @@
218 }; 218 };
219 </script> 219 </script>
220 <style scoped lang="scss"> 220 <style scoped lang="scss">
221 /deep/.el-input__inner {
222 background: #07388b;
223 border-radius: 2px;
224 border: 1px solid #6bc1fc;
225 }
226 /deep/.el-textarea__inner {
227 background: #07388b;
228 color: #fff;
229 }
230 /deep/.el-form-item__label {
231 color: #fff;
232 }
233 /deep/.el-dialog__body {
234 padding-top: 20px;
235 }
236 /deep/.el-dialog__header {
237 text-align: center;
238 margin-bottom: 10px;
239 .el-dialog__title {
240 color: white;
241 }
242 }
243 </style> 221 </style>
......
1 .btnColRight {
2 margin-top: 20px;
3 }
...@@ -307,7 +307,5 @@ ...@@ -307,7 +307,5 @@
307 <style scoped lang="scss"> 307 <style scoped lang="scss">
308 @import "~@/styles/mixin.scss"; 308 @import "~@/styles/mixin.scss";
309 @import "~@/styles/public.scss"; 309 @import "~@/styles/public.scss";
310 .btnColRight { 310 @import "./index.scss";
311 margin-top: 20px;
312 }
313 </style> 311 </style>
......