组件样式调整
Showing
9 changed files
with
446 additions
and
477 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,227 +24,227 @@ | ... | @@ -24,227 +24,227 @@ |
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 | }, | ||
34 | computed: { | ||
35 | ...mapGetters(['sidebar', 'avatar', 'name']) | ||
36 | }, | ||
37 | data () { | ||
38 | return { | ||
39 | title: defaultSettings.title | ||
40 | } | ||
41 | }, | ||
42 | methods: { | ||
43 | handleDataView () { | ||
44 | const { href } = this.$router.resolve('/dataView'); | ||
45 | window.open(href, '_blank'); | ||
46 | }, | 33 | }, |
47 | themeChange (val) { | 34 | computed: { |
48 | this.$store.dispatch('app/updateTheme', val) | 35 | ...mapGetters(['sidebar', 'avatar', 'name']) |
36 | }, | ||
37 | data () { | ||
38 | return { | ||
39 | title: defaultSettings.title | ||
40 | } | ||
49 | }, | 41 | }, |
50 | handleCommand (command) { | 42 | methods: { |
51 | if (command == 'a') { | 43 | handleDataView () { |
52 | } else { | 44 | const { href } = this.$router.resolve('/dataView'); |
45 | window.open(href, '_blank'); | ||
46 | }, | ||
47 | themeChange (val) { | ||
48 | this.$store.dispatch('app/updateTheme', val) | ||
49 | }, | ||
50 | handleCommand (command) { | ||
51 | if (command == 'a') { | ||
52 | } else { | ||
53 | 53 | ||
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 | |||
63 | .logo { | ||
64 | color: #fff; | ||
65 | font-size: 26px; | ||
66 | font-weight: 700; | ||
67 | } | ||
68 | } | ||
69 | |||
70 | .dataView { | ||
71 | color: #fff; | ||
72 | width: 120px; | ||
73 | height: 32px; | ||
74 | background: url('../../image/dp.png'); | ||
75 | background-size: cover; | ||
76 | margin-right: 20px; | ||
77 | } | ||
78 | |||
79 | .NoticeBar { | ||
80 | position: absolute; | ||
81 | bottom: 0; | ||
82 | } | ||
83 | |||
84 | .el-dropdown-menu { | ||
85 | padding: 0 !important; | ||
86 | border: 1px solid #EBEEF5; | ||
87 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12); | ||
88 | border-radius: 4px 0 0 4px 4px; | ||
89 | |||
90 | .el-dropdown-menu__item { | ||
91 | text-align: center; | ||
92 | margin-top: 0 !important; | ||
93 | font-size: 14px; | ||
94 | font-family: PingFangSC-Regular, PingFang SC; | ||
95 | font-weight: 400; | ||
96 | color: #4A4A4A; | ||
97 | width: 140px; | ||
98 | height: 36px; | ||
99 | line-height: 36px; | ||
100 | } | ||
101 | 62 | ||
102 | .el-dropdown-menu__item:nth-child(6) { | 63 | .logo { |
103 | border-top: 1px solid #EBEEF5; | 64 | color: #fff; |
65 | font-size: 26px; | ||
66 | font-weight: 700; | ||
67 | } | ||
104 | } | 68 | } |
105 | 69 | ||
106 | .popper__arrow { | 70 | .dataView { |
107 | top: -11px !important; | 71 | color: #fff; |
108 | left: 110px !important; | 72 | width: 120px; |
109 | transform: rotate(0deg) scale(2); | 73 | height: 32px; |
74 | background: url("../../image/dp.png"); | ||
75 | background-size: cover; | ||
76 | margin-right: 20px; | ||
110 | } | 77 | } |
111 | 78 | ||
112 | .el-dropdown-menu__item:not(.is-disabled):hover, | 79 | .NoticeBar { |
113 | .el-dropdown-menu__item:focus { | 80 | position: absolute; |
114 | background: #F6F7F9; | 81 | bottom: 0; |
115 | color: #4A4A4A; | ||
116 | } | ||
117 | } | ||
118 | |||
119 | .navbar { | ||
120 | height: $headerHeight; | ||
121 | overflow: hidden; | ||
122 | position: relative; | ||
123 | // background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色 | ||
124 | // box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08); | ||
125 | background: #0D1230; | ||
126 | display: flex; | ||
127 | align-items: center; | ||
128 | padding-right: 20px; | ||
129 | justify-content: space-between; | ||
130 | margin-bottom: 10px; | ||
131 | |||
132 | .header-logo { | ||
133 | width: 300px; | ||
134 | } | 82 | } |
135 | 83 | ||
136 | .backdrop { | 84 | .el-dropdown-menu { |
137 | flex: 1; | 85 | padding: 0 !important; |
138 | width: 60%; | 86 | border: 1px solid #ebeef5; |
139 | background-size: 100% 100%; | 87 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12); |
140 | height: $headerHeight; | 88 | border-radius: 4px 0 0 4px 4px; |
141 | display: flex; | 89 | |
142 | align-items: center; | 90 | .el-dropdown-menu__item { |
143 | } | 91 | text-align: center; |
92 | margin-top: 0 !important; | ||
93 | font-size: 14px; | ||
94 | font-family: PingFangSC-Regular, PingFang SC; | ||
95 | font-weight: 400; | ||
96 | color: #4a4a4a; | ||
97 | width: 140px; | ||
98 | height: 36px; | ||
99 | line-height: 36px; | ||
100 | } | ||
144 | 101 | ||
145 | .hamburger-container { | 102 | .el-dropdown-menu__item:nth-child(6) { |
146 | line-height: 43px; | 103 | border-top: 1px solid #ebeef5; |
147 | height: 100%; | 104 | } |
148 | float: left; | ||
149 | cursor: pointer; | ||
150 | transition: background 0.3s; | ||
151 | -webkit-tap-highlight-color: transparent; | ||
152 | 105 | ||
153 | &:hover { | 106 | .popper__arrow { |
154 | background: rgba(0, 0, 0, 0.025); | 107 | top: -11px !important; |
108 | left: 110px !important; | ||
109 | transform: rotate(0deg) scale(2); | ||
155 | } | 110 | } |
156 | } | ||
157 | 111 | ||
158 | .breadcrumb-container { | 112 | .el-dropdown-menu__item:not(.is-disabled):hover, |
159 | float: left; | 113 | .el-dropdown-menu__item:focus { |
114 | background: #f6f7f9; | ||
115 | color: #4a4a4a; | ||
116 | } | ||
160 | } | 117 | } |
161 | 118 | ||
162 | .right-menu { | 119 | .navbar { |
163 | float: right; | 120 | height: $headerHeight; |
164 | height: 100%; | 121 | overflow: hidden; |
165 | line-height: 50px; | 122 | position: relative; |
123 | // background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色 | ||
124 | // box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08); | ||
125 | background: #0d1230; | ||
166 | display: flex; | 126 | display: flex; |
167 | align-items: center; | 127 | align-items: center; |
128 | padding-right: 20px; | ||
129 | justify-content: space-between; | ||
130 | margin-bottom: 10px; | ||
168 | 131 | ||
169 | .function { | 132 | .header-logo { |
170 | margin: 0 15px; | 133 | width: 300px; |
171 | cursor: pointer; | ||
172 | } | 134 | } |
173 | 135 | ||
174 | .shutdown { | 136 | .backdrop { |
175 | font-size: 20px; | 137 | flex: 1; |
176 | margin-left: 15px; | 138 | width: 60%; |
177 | cursor: pointer; | 139 | background-size: 100% 100%; |
178 | } | 140 | height: $headerHeight; |
179 | 141 | display: flex; | |
180 | .organization-item { | 142 | align-items: center; |
181 | margin-right: 40px; | ||
182 | margin-top: -40px !important; | ||
183 | } | 143 | } |
184 | 144 | ||
185 | .item { | 145 | .hamburger-container { |
186 | margin-right: 40px; | 146 | line-height: 43px; |
187 | margin-top: -20px; | 147 | height: 100%; |
188 | line-height: 18.4px; | 148 | float: left; |
189 | cursor: pointer; | 149 | cursor: pointer; |
190 | position: relative; | 150 | transition: background 0.3s; |
191 | 151 | -webkit-tap-highlight-color: transparent; | |
192 | .item-box { | 152 | |
193 | position: absolute; | 153 | &:hover { |
194 | top: -5px; | 154 | background: rgba(0, 0, 0, 0.025); |
195 | left: 3px; | ||
196 | width: 100%; | ||
197 | min-width: 25px; | ||
198 | height: 25px; | ||
199 | cursor: pointer; | ||
200 | z-index: 100; | ||
201 | } | 155 | } |
202 | } | 156 | } |
203 | 157 | ||
204 | &:focus { | 158 | .breadcrumb-container { |
205 | outline: none; | 159 | float: left; |
206 | } | 160 | } |
207 | 161 | ||
208 | .right-menu-item { | 162 | .right-menu { |
209 | display: inline-block; | 163 | float: right; |
210 | height: 100%; | 164 | height: 100%; |
211 | font-size: 18px; | 165 | line-height: 50px; |
212 | color: #fff; | 166 | display: flex; |
213 | vertical-align: text-bottom; | 167 | align-items: center; |
214 | 168 | ||
215 | &.hover-effect { | 169 | .function { |
170 | margin: 0 15px; | ||
216 | cursor: pointer; | 171 | cursor: pointer; |
217 | transition: background 0.3s; | 172 | } |
218 | display: flex; | ||
219 | align-items: center; | ||
220 | 173 | ||
221 | &:hover { | 174 | .shutdown { |
222 | background: rgba(0, 0, 0, 0.025); | 175 | font-size: 20px; |
223 | } | 176 | margin-left: 15px; |
177 | cursor: pointer; | ||
224 | } | 178 | } |
225 | } | ||
226 | 179 | ||
227 | .avatar-wrapper { | 180 | .organization-item { |
228 | position: relative; | 181 | margin-right: 40px; |
229 | display: flex; | 182 | margin-top: -40px !important; |
230 | height: 40px; | 183 | } |
231 | align-items: center; | ||
232 | 184 | ||
233 | .user-avatar { | 185 | .item { |
186 | margin-right: 40px; | ||
187 | margin-top: -20px; | ||
188 | line-height: 18.4px; | ||
234 | cursor: pointer; | 189 | cursor: pointer; |
235 | width: 35px; | 190 | position: relative; |
236 | height: 35px; | 191 | |
237 | border-radius: 50%; | 192 | .item-box { |
193 | position: absolute; | ||
194 | top: -5px; | ||
195 | left: 3px; | ||
196 | width: 100%; | ||
197 | min-width: 25px; | ||
198 | height: 25px; | ||
199 | cursor: pointer; | ||
200 | z-index: 100; | ||
201 | } | ||
238 | } | 202 | } |
239 | 203 | ||
240 | .el-icon-caret-bottom { | 204 | &:focus { |
241 | cursor: pointer; | 205 | outline: none; |
242 | position: absolute; | 206 | } |
243 | right: -15px; | 207 | |
244 | top: 17px; | 208 | .right-menu-item { |
245 | font-size: 12px; | 209 | display: inline-block; |
210 | height: 100%; | ||
211 | font-size: 18px; | ||
212 | color: #fff; | ||
213 | vertical-align: text-bottom; | ||
214 | |||
215 | &.hover-effect { | ||
216 | cursor: pointer; | ||
217 | transition: background 0.3s; | ||
218 | display: flex; | ||
219 | align-items: center; | ||
220 | |||
221 | &:hover { | ||
222 | background: rgba(0, 0, 0, 0.025); | ||
223 | } | ||
224 | } | ||
225 | } | ||
226 | |||
227 | .avatar-wrapper { | ||
228 | position: relative; | ||
229 | display: flex; | ||
230 | height: 40px; | ||
231 | align-items: center; | ||
232 | |||
233 | .user-avatar { | ||
234 | cursor: pointer; | ||
235 | width: 35px; | ||
236 | height: 35px; | ||
237 | border-radius: 50%; | ||
238 | } | ||
239 | |||
240 | .el-icon-caret-bottom { | ||
241 | cursor: pointer; | ||
242 | position: absolute; | ||
243 | right: -15px; | ||
244 | top: 17px; | ||
245 | font-size: 12px; | ||
246 | } | ||
246 | } | 247 | } |
247 | } | 248 | } |
248 | } | 249 | } |
249 | } | ||
250 | </style> | 250 | </style> | ... | ... |
... | @@ -14,35 +14,35 @@ | ... | @@ -14,35 +14,35 @@ |
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 { |
27 | title: defaultSettings.title | 27 | title: defaultSettings.title |
28 | } | ||
29 | }, | ||
30 | computed: { | ||
31 | ...mapGetters(['permission_routes', 'sidebar']), | ||
32 | activeMenu () { | ||
33 | const route = this.$route | ||
34 | const { meta, path } = route | ||
35 | if (meta.activeMenu) { | ||
36 | return meta.activeMenu | ||
37 | } | 28 | } |
38 | return path | ||
39 | }, | ||
40 | variables () { | ||
41 | return variables | ||
42 | }, | 29 | }, |
43 | asyncRoutes () { | 30 | computed: { |
44 | return asyncRoutes | 31 | ...mapGetters(['permission_routes', 'sidebar']), |
32 | activeMenu () { | ||
33 | const route = this.$route | ||
34 | const { meta, path } = route | ||
35 | if (meta.activeMenu) { | ||
36 | return meta.activeMenu | ||
37 | } | ||
38 | return path | ||
39 | }, | ||
40 | variables () { | ||
41 | return variables | ||
42 | }, | ||
43 | asyncRoutes () { | ||
44 | return asyncRoutes | ||
45 | } | ||
45 | } | 46 | } |
46 | } | 47 | } |
47 | } | ||
48 | </script> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
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> | ... | ... |
src/views/system/users/index.scss
0 → 100644
... | @@ -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> | ... | ... |
-
Please register or sign in to post a comment