Skip to content

bdc / bdcjg-web

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

弹框样式拆分

1 parent cd82abd6
Expand all
Inline Side-by-side
Showing 10 changed files with 373 additions and 367 deletions
...@@ -113,8 +113,8 @@ export default { ...@@ -113,8 +113,8 @@ export default {
113 } 113 }
114 </script> 114 </script>
115 <style rel="stylesheet/scss" lang="scss" > 115 <style rel="stylesheet/scss" lang="scss" >
116 @import "~@/styles/mixin.scss"; 116 // @import "~@/styles/mixin.scss";
117 @import "~@/styles/dialogBox.scss"; 117 // @import "~@/styles/dialogBox.scss";
118 </style> 118 </style>
119 <style rel="stylesheet/scss" scoped lang="scss" > 119 <style rel="stylesheet/scss" scoped lang="scss" >
120 /deep/.is-fullscreen { 120 /deep/.is-fullscreen {
...@@ -123,4 +123,4 @@ export default { ...@@ -123,4 +123,4 @@ export default {
123 left: 50% !important; 123 left: 50% !important;
124 transform: translate(-50%, -50%) !important; 124 transform: translate(-50%, -50%) !important;
125 } 125 }
126 </style>
...\ No newline at end of file ...\ No newline at end of file
126 </style>
......
1 <template> 1 <template>
2 <transition name="msgbox-fade" v-if="myShow"> 2 <transition name="msgbox-fade" v-if="myShow">
3 <div class="ls-mask" v-loading="loading"> 3 <div class="ls-mask" v-loading="loading">
4 <div class="ls-mask-window dialogBox" :style="{ 'width': width }"> 4 <div class="ls-mask-window" :style="{ 'width': width }">
5 <div class="ls-head"> 5 <div class="ls-head">
6 <div class="ls-title" :style="{ 'text-align': titleStyle }"> 6 <div class="ls-title" :style="{ 'text-align': titleStyle }">
7 <svg-icon v-if="iconClass != ''" :icon-class='iconClass' /> 7 <svg-icon v-if="iconClass != ''" :icon-class='iconClass' />
...@@ -21,172 +21,167 @@ ...@@ -21,172 +21,167 @@
21 </transition> 21 </transition>
22 </template> 22 </template>
23 <script> 23 <script>
24 import Popup1 from './index' 24 import Popup1 from './index'
25 export default { 25 export default {
26 name: 'index', 26 name: 'index',
27 data () { 27 data () {
28 return { 28 return {
29 title: '标题', 29 title: '标题',
30 editItem: "", 30 editItem: "",
31 formData: undefined,//父组件传递的参数 负责传给子组件 31 formData: undefined,//父组件传递的参数 负责传给子组件
32 btnShow: false, 32 btnShow: false,
33 cancel: function () { }, 33 cancel: function () { },
34 confirm: function () { }, 34 confirm: function () { },
35 cancelText: '取消', 35 cancelText: '取消',
36 confirmText: '确认', 36 confirmText: '确认',
37 isSync: false, 37 isSync: false,
38 isShow: false, 38 isShow: false,
39 myShow: false, 39 myShow: false,
40 titleStyle: 'center', 40 titleStyle: 'center',
41 width: "75%", 41 width: "75%",
42 height: "auto", 42 height: "auto",
43 contentHeight: "", 43 contentHeight: "",
44 iconClass: "", 44 iconClass: "",
45 key: 0 45 key: 0
46 } 46 }
47 }, 47 },
48 props: { 48 props: {
49 loading: { type: Boolean, default: false }, 49 loading: { type: Boolean, default: false },
50 }, 50 },
51 watch: { 51 watch: {
52 isShow (newValue) { 52 isShow (newValue) {
53 this.editItem = this.loadViewFn(this.editItem) 53 this.editItem = this.loadViewFn(this.editItem)
54 document.body.appendChild(this.$el); 54 document.body.appendChild(this.$el);
55 this.myShow = newValue 55 this.myShow = newValue
56 } 56 }
57 }, 57 },
58 mounted () { 58 mounted () {
59 // 计算滚动条高度 59 // 计算滚动条高度
60 setTimeout(() => { 60 setTimeout(() => {
61 if (this.btnShow) { 61 if (this.btnShow) {
62 if (this.height == 'auto') { 62 if (this.height == 'auto') {
63 this.contentHeight = (this.$refs.contentRef.offsetHeight) + 'px' 63 this.contentHeight = (this.$refs.contentRef.offsetHeight) + 'px'
64 } else {
65 this.contentHeight = this.height
66 }
64 } else { 67 } else {
65 this.contentHeight = this.height 68 if (this.height == 'auto') {
69 this.contentHeight = (this.$refs.contentRef.offsetHeight) + 'px'
70 } else {
71 this.contentHeight = this.height
72 }
66 } 73 }
67 } else { 74 }, 300)
68 if (this.height == 'auto') { 75 },
69 this.contentHeight = (this.$refs.contentRef.offsetHeight) + 'px' 76 methods: {
70 } else { 77 onCancel () {
71 this.contentHeight = this.height 78 Popup1().close()
79 },
80 onConfirm () {
81 this.loading = true
82 let res = new Promise((resolve, reject) => {
83 this.confirm()
84 resolve(true)
85 })
86 if (res) {
87 this.isShow = false
72 } 88 }
89 },
90 loadingFn (e) { //加载状态
91 this.loading = e
92 },
93 loadViewFn (view) {
94 return (r) =>
95 require.ensure([], () =>
96 r(require(`@/${view}.vue`))
97 )
73 } 98 }
74 }, 300)
75 },
76 methods: {
77 onCancel () {
78 Popup1().close()
79 }, 99 },
80 onConfirm () { 100 destroyed () {
81 this.loading = true 101 if (this.appendToBody && this.$el && this.$el.parentNode) {
82 let res = new Promise((resolve, reject) => { 102 this.$el.parentNode.removeChild(this.$el);
83 this.confirm()
84 resolve(true)
85 })
86 if (res) {
87 this.isShow = false
88 } 103 }
89 },
90 loadingFn (e) { //加载状态
91 this.loading = e
92 },
93 loadViewFn (view) {
94 return (r) =>
95 require.ensure([], () =>
96 r(require(`@/${view}.vue`))
97 )
98 }
99 },
100 destroyed () {
101 if (this.appendToBody && this.$el && this.$el.parentNode) {
102 this.$el.parentNode.removeChild(this.$el);
103 } 104 }
104 } 105 }
105 }
106 </script> 106 </script>
107 <style scoped lang="scss" > 107 <style scoped lang="scss" >
108 @import "~@/styles/mixin.scss"; 108 .ls-mask {
109 @import "~@/styles/dialogBox.scss"; 109 width: 100%;
110 110 height: 100%;
111 .ls-mask { 111 z-index: 2000;
112 width: 100%; 112 position: fixed;
113 height: 100%; 113 left: 0;
114 z-index: 2000; 114 top: 0;
115 position: fixed; 115 background: rgba(0, 0, 0, 0.3);
116 left: 0; 116 }
117 top: 0;
118 background: rgba(0, 0, 0, 0.3);
119
120 }
121
122 .ls-mask-window {
123 background: white;
124 position: relative;
125 left: 50%;
126 top: 50%;
127 min-height: 200px;
128 transform: translate(-50%, -50%);
129 border-radius: 5px;
130 overflow: hidden;
131 }
132 117
133 .ls-mask-window b { 118 .ls-mask-window {
134 padding-left: 5px; 119 background: white;
135 } 120 position: relative;
121 left: 50%;
122 top: 50%;
123 min-height: 200px;
124 transform: translate(-50%, -50%);
125 border-radius: 5px;
126 overflow: hidden;
127 }
136 128
137 /deep/.closeStyle { 129 .ls-mask-window b {
138 top: 7px !important; 130 padding-left: 5px;
139 } 131 }
140 132
141 .ls-title { 133 /deep/.closeStyle {
142 padding: 10px; 134 top: 7px !important;
143 color: #ffffff; 135 }
144 // background: linear-gradient(90deg, #1D66DC 0%, #081B56 100%);
145 font-size: 16px;
146 }
147 136
148 .ls-title .svg-icon { 137 .ls-title {
149 font-size: 18px; 138 padding: 10px;
150 } 139 color: #ffffff;
140 // background: linear-gradient(90deg, #1D66DC 0%, #081B56 100%);
141 font-size: 16px;
142 }
151 143
152 .mask-content { 144 .ls-title .svg-icon {
153 padding: 15px; 145 font-size: 18px;
154 width: 100%; 146 }
155 min-height: 20%;
156 max-height: 95%;
157 // overflow-y: scroll;
158 }
159 147
160 .ls-mask-footer { 148 .mask-content {
161 height: 50px; 149 padding: 15px;
162 display: flex; 150 width: 100%;
163 justify-content: center; 151 min-height: 20%;
164 width: 100%; 152 max-height: 95%;
165 position: absolute; 153 // overflow-y: scroll;
166 border-top: 1px solid $borderColor; 154 }
167 bottom: 0;
168 background: #ffffff;
169 border-bottom-left-radius: 5px;
170 border-bottom-right-radius: 5px;
171 overflow: hidden;
172 }
173 155
156 .ls-mask-footer {
157 height: 50px;
158 display: flex;
159 justify-content: center;
160 width: 100%;
161 position: absolute;
162 border-top: 1px solid $borderColor;
163 bottom: 0;
164 background: #ffffff;
165 border-bottom-left-radius: 5px;
166 border-bottom-right-radius: 5px;
167 overflow: hidden;
168 }
174 169
175 /deep/.closeStyle { 170 /deep/.closeStyle {
176 position: absolute; 171 position: absolute;
177 top: 13px; 172 top: 13px;
178 right: 26px; 173 right: 26px;
179 font-size: 24px; 174 font-size: 24px;
180 cursor: pointer; 175 cursor: pointer;
181 color: #409EFF; 176 color: #409eff;
182 } 177 }
183 178
184 /deep/.el-loading-mask { 179 /deep/.el-loading-mask {
185 background: none; 180 background: none;
186 } 181 }
187 182
188 /deep/.el-button { 183 /deep/.el-button {
189 margin: 8px 10px; 184 margin: 8px 10px;
190 width: 75px; 185 width: 75px;
191 } 186 }
192 </style> 187 </style>
......
1 .dialogBox {
2 overflow: hidden;
3 background: url("~@/image/dialogBg.png") no-repeat !important;
4 background-size: 100% 100% !important;
5 // min-height: 90vh;
6 1
7 .dialog_title {
8 display: flex;
9 position: relative;
10 font-size: 22px;
11 top: -10px;
12 width: 38%;
13 height: 40px;
14 margin-left: 28px;
15 justify-content: center;
16 white-space: nowrap;
17
18 b {
19 font-weight: 200;
20 display: inline-block;
21 position: relative;
22 font-size: 24px;
23 top: -11px;
24 width: 38%;
25 height: 40px;
26 margin-left: 28px;
27 // @include flex-center;
28 display: flex;
29 justify-content: center;
30 }
31 }
32
33 .dialog_full {
34 position: absolute;
35 top: 0;
36 right: 30px;
37 }
38
39 .el-dialog__body {
40 max-height: 88vh;
41 overflow-x: hidden;
42 overflow-y: hidden;
43 }
44
45 .dialog_footer {
46 margin-bottom: 8px;
47 @include flex-center;
48 }
49
50 .dialogBox-content {
51 height: auto
52 }
53
54 .editDialogBox-box {
55 background: #031A46;
56 box-shadow: inset 0px 0px 12px 0px #02D9FD;
57 border-radius: 2px;
58 border: 1px solid #6BC1FC;
59 margin: 0 18px 10px 18px;
60 }
61 }
62
63 .item-content-input {
64 /deep/.el-input__inner {
65 border: none !important;
66 text-align: right;
67 }
68 }
69
70 .regularHeight {
71 display: flex;
72 flex-direction: column;
73 height: 87vh;
74
75 .editDialogBox-con,
76 .JsonEditor {
77 flex: 1;
78 height: 100%;
79 }
80 }
81
82 .dialog-from {
83 padding: 13px;
84 border-radius: 2px;
85 box-sizing: border-box;
86
87 .el-row {
88 display: flex;
89 flex-wrap: nowrap;
90 }
91
92 .el-col {
93 line-height: 18px;
94 display: flex;
95 align-items: center;
96 margin-bottom: 3px;
97 color: #B5D6DC;
98 border-radius: 2px;
99 border: 1px solid #224C7C;
100
101 span {
102 display: inline-block;
103 padding: 3px;
104 border-radius: 3px;
105 overflow: hidden;
106 white-space: nowrap;
107 text-align: left;
108 color: #02D9FD;
109 }
110
111 p {
112 flex: 1;
113 width: 100%;
114 padding-left: 5px;
115 line-height: 20px;
116 color: #c0c4cc;
117 cursor: not-allowed;
118 white-space: nowrap;
119 margin-right: 5px;
120 text-align: right;
121 }
122 }
123 }
124
125 /deep/.el-textarea__inner {
126 border: 1px solid #224C7C;
127 margin: 0 0 10px 0 !important;
128 width: 100% !important;
129 color: #dadde3 !important;
130 background: transparent !important;
131 }
132
133 /deep/.el-input__inner {
134 border: 1px solid #224C7C !important;
135 margin: 0 !important;
136 width: 100% !important;
137 color: #dadde3 !important;
138 background: transparent !important;
139 }
140
141 .dialog_title {
142 @include flex;
143 justify-content: space-between;
144 width: 100%;
145 }
146
147 .el-dialog__header {
148 color: #FFFFFF;
149 height: 46px !important;
150 width: 97%;
151 margin: 0 auto;
152 margin-top: 2px;
153 }
154
155 .el-dialog__body {
156 padding-top: 0;
157 padding-bottom: 0;
158 // height: 95vh;
159 }
160
161 .el-dialog__headerbtn {
162 width: 42px;
163 height: 20px;
164 background: url("~@/image/closebg.png") no-repeat;
165 background-size: 100% 100%;
166 right: 40px;
167 top: 33px;
168
169 &:hover {
170 box-shadow: inset 0px 0px 12px 0px #02D9FD;
171 }
172 }
173
174 .el-dialog__close {
175 font-size: 0;
176 }
177
178 .el-form-item {
179 @include flex;
180 width: 100%;
181 }
182
183 .el-dialog__wrapper {
184 width: 100%;
185 height: 100%;
186 overflow: hidden;
187 }
188
189 .contentCenter {
190 position: absolute;
191 top: 50%;
192 left: 50%;
193 transform: translate(calc(-50% + 85px), -50%);
194 }
195
196 .mainCenter {
197 position: absolute;
198 top: 50%;
199 left: 50%;
200 transform: translate(-50%, -50%);
201
202 // 展开收起按钮位置
203 .el-input__suffix {
204 right: 10px;
205 }
206 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -79,6 +79,15 @@ ...@@ -79,6 +79,15 @@
79 } 79 }
80 } 80 }
81 81
82 .el-dialog__close {
83 font-size: 0;
84 }
85
86 .el-form-item {
87 display: flex;
88 width: 100%;
89 }
90
82 .advanced-search { 91 .advanced-search {
83 display: flex; 92 display: flex;
84 font-size: 12px; 93 font-size: 12px;
...@@ -240,12 +249,6 @@ ...@@ -240,12 +249,6 @@
240 color: #fff; 249 color: #fff;
241 } 250 }
242 251
243 .el-dialog__headerbtn {
244 position: absolute;
245 top: 22px;
246 right: 30px;
247 }
248
249 .el-dialog__header { 252 .el-dialog__header {
250 text-align: center; 253 text-align: center;
251 margin-bottom: 10px; 254 margin-bottom: 10px;
...@@ -424,6 +427,7 @@ ...@@ -424,6 +427,7 @@
424 width: 100%; 427 width: 100%;
425 border-bottom: 1px solid #ccc; 428 border-bottom: 1px solid #ccc;
426 } 429 }
430
427 } 431 }
428 432
429 .el-dialog__wrapper { 433 .el-dialog__wrapper {
...@@ -552,3 +556,202 @@ ...@@ -552,3 +556,202 @@
552 background-size: cover; 556 background-size: cover;
553 color: white; 557 color: white;
554 } 558 }
559
560 // 监管弹框样式
561 .dialogBox {
562 overflow: hidden;
563 background: url("~@/image/dialogBg.png") no-repeat !important;
564 background-size: 100% 100% !important;
565 // min-height: 90vh;
566
567 .dialog_title {
568 display: flex;
569 position: relative;
570 font-size: 22px;
571 top: -10px;
572 width: 38%;
573 height: 40px;
574 margin-left: 28px;
575 justify-content: center;
576 white-space: nowrap;
577
578 b {
579 font-weight: 200;
580 display: inline-block;
581 position: relative;
582 font-size: 24px;
583 top: -11px;
584 width: 38%;
585 height: 40px;
586 margin-left: 28px;
587 // @include flex-center;
588 display: flex;
589 justify-content: center;
590 }
591 }
592
593 .dialog_full {
594 position: absolute;
595 top: 0;
596 right: 30px;
597 }
598
599 .el-dialog__body {
600 max-height: 88vh;
601 overflow-x: hidden;
602 overflow-y: hidden;
603 }
604
605 .dialog_footer {
606 margin-bottom: 8px;
607 display: flex;
608 justify-content: center;
609 align-items: center;
610 }
611
612 .dialogBox-content {
613 height: auto
614 }
615
616 .editDialogBox-box {
617 background: #031A46;
618 box-shadow: inset 0px 0px 12px 0px #02D9FD;
619 border-radius: 2px;
620 border: 1px solid #6BC1FC;
621 margin: 0 18px 10px 18px;
622 }
623
624 .item-content-input {
625 /deep/.el-input__inner {
626 border: none !important;
627 text-align: right;
628 }
629 }
630
631 .regularHeight {
632 display: flex;
633 flex-direction: column;
634 height: 87vh;
635
636 .editDialogBox-con,
637 .JsonEditor {
638 flex: 1;
639 height: 100%;
640 }
641 }
642
643 .dialog-from {
644 padding: 13px;
645 border-radius: 2px;
646 box-sizing: border-box;
647
648 .el-row {
649 display: flex;
650 flex-wrap: nowrap;
651 }
652
653 .el-col {
654 line-height: 18px;
655 display: flex;
656 align-items: center;
657 margin-bottom: 3px;
658 color: #B5D6DC;
659 border-radius: 2px;
660 border: 1px solid #224C7C;
661
662 span {
663 display: inline-block;
664 padding: 3px;
665 border-radius: 3px;
666 overflow: hidden;
667 white-space: nowrap;
668 text-align: left;
669 color: #02D9FD;
670 }
671
672 p {
673 flex: 1;
674 width: 100%;
675 padding-left: 5px;
676 line-height: 20px;
677 color: #c0c4cc;
678 cursor: not-allowed;
679 white-space: nowrap;
680 margin-right: 5px;
681 text-align: right;
682 }
683 }
684
685 }
686
687 .el-textarea__inner {
688 border: 1px solid #224C7C;
689 margin: 0 0 10px 0 !important;
690 width: 100% !important;
691 color: #dadde3 !important;
692 background: transparent !important;
693 }
694
695 .el-input__inner {
696 border: 1px solid #224C7C !important;
697 margin: 0 !important;
698 width: 100% !important;
699 color: #dadde3 !important;
700 background: transparent !important;
701 }
702
703 .el-dialog__header {
704 color: #FFFFFF;
705 height: 46px !important;
706 width: 97%;
707 margin: 0 auto;
708 margin-top: 2px;
709 }
710
711 .el-dialog__body {
712 padding-top: 0;
713 padding-bottom: 0;
714 // height: 95vh;
715 }
716
717 .el-dialog__headerbtn {
718 width: 42px;
719 height: 20px;
720 background: url("~@/image/closebg.png") no-repeat;
721 background-size: 100% 100%;
722 right: 40px;
723 top: 33px;
724
725 &:hover {
726 box-shadow: inset 0px 0px 12px 0px #02D9FD;
727 }
728 }
729
730 .el-dialog__close {
731 font-size: 0;
732 }
733
734 .el-form-item {
735 display: flex;
736 width: 100%;
737 }
738
739 }
740 .contentCenter {
741 position: absolute;
742 top: 50%;
743 left: 50%;
744 transform: translate(calc(-50% + 85px), -50%);
745 }
746
747 .mainCenter {
748 position: absolute;
749 top: 50%;
750 left: 50%;
751 transform: translate(-50%, -50%);
752
753 // 展开收起按钮位置
754 .el-input__suffix {
755 right: 10px;
756 }
757 }
......
...@@ -27,7 +27,14 @@ ...@@ -27,7 +27,14 @@
27 padding: 22px 42px 20px; 27 padding: 22px 42px 20px;
28 } 28 }
29 29
30 .el-dialog__close {
31 font-size: 0;
32 }
30 33
34 .el-form-item {
35 display: flex;
36 width: 100%;
37 }
31 38
32 .el-form--inline .el-form-item { 39 .el-form--inline .el-form-item {
33 width: auto; 40 width: auto;
......
...@@ -177,9 +177,12 @@ ...@@ -177,9 +177,12 @@
177 white-space: nowrap; 177 white-space: nowrap;
178 b { 178 b {
179 font-size: 16px; 179 font-size: 16px;
180 font-weight: 600;
181 } 180 }
182 } 181 }
182 .el-dialog__headerbtn {
183 right: 20px !important;
184 top: 23px !important;
185 }
183 } 186 }
184 } 187 }
185 </style> 188 </style>
......
...@@ -412,6 +412,6 @@ ...@@ -412,6 +412,6 @@
412 }; 412 };
413 </script> 413 </script>
414 <style scoped lang="scss"> 414 <style scoped lang="scss">
415 @import "~@/styles/mixin.scss"; 415 // @import "~@/styles/mixin.scss";
416 @import "~@/styles/dialogBox.scss"; 416 // @import "~@/styles/dialogBox.scss";
417 </style> 417 </style>
......
...@@ -210,9 +210,12 @@ ...@@ -210,9 +210,12 @@
210 white-space: nowrap; 210 white-space: nowrap;
211 b { 211 b {
212 font-size: 16px; 212 font-size: 16px;
213 font-weight: 600;
214 } 213 }
215 } 214 }
215 .el-dialog__headerbtn {
216 right: 20px !important;
217 top: 23px !important;
218 }
216 } 219 }
217 .selbig { 220 .selbig {
218 width: 500px; 221 width: 500px;
......