Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
e4ed5acb by simon
Options

优化公共样式

1 parent e6ed49f2
Inline Side-by-side
Showing 79 changed files with 669 additions and 690 deletions
...@@ -86,398 +86,6 @@ export default { ...@@ -86,398 +86,6 @@ export default {
86 }; 86 };
87 </script> 87 </script>
88 88
89 <style lang="scss"> 89 <style lang="scss" scoped>
90 @import "@/styles/_support.scss";
91 90
92 html {
93 font-family: "Arial", "Microsoft YaHei";
94 font-size: 12px;
95 word-spacing: 1px;
96 word-break: break-word;
97 text-rendering: optimizeLegibility;
98 // color: #333;
99 color: $cFontGray;
100 background-color: #ffffff;
101 // -ms-text-size-adjust: 100%;
102 // -webkit-text-size-adjust: 100%;
103 // -moz-osx-font-smoothing: grayscale;
104 // -webkit-font-smoothing: antialiased;
105 box-sizing: border-box;
106 }
107
108 * {
109 touch-action: pan-y;
110 }
111
112 body {
113 font-size: $fontSize;
114 }
115
116 html,
117 body {
118 -webkit-text-size-adjust: none;
119 }
120
121 body,
122 div {
123 border: 0;
124 margin: 0;
125 padding: 0;
126 }
127
128 *,
129 *:before,
130 *:after {
131 box-sizing: border-box;
132 margin: 0;
133 }
134
135 body,
136 h1,
137 h2,
138 h3,
139 h4,
140 h5,
141 h6,
142 hr,
143 p,
144 blockquote,
145 dl,
146 dt,
147 dd,
148 ul,
149 ol,
150 li,
151 pre,
152 form,
153 fieldset,
154 legend,
155 button,
156 input,
157 textarea,
158 th,
159 td,
160 iframe {
161 margin: 0;
162 padding: 0;
163 }
164
165 img,
166 article,
167 aside,
168 details,
169 figcaption,
170 figure,
171 footer,
172 header,
173 menu,
174 nav,
175 section,
176 summary,
177 time,
178 mark,
179 audio,
180 video {
181 display: block;
182 margin: 0;
183 padding: 0;
184 }
185
186 h1,
187 h2,
188 h3,
189 h4,
190 h5,
191 h6 {
192 font-size: 100%;
193 }
194
195 fieldset,
196 img {
197 border: 0;
198 }
199
200 address,
201 caption,
202 cite,
203 dfn,
204 em,
205 th,
206 var,
207 i,
208 em {
209 font-style: normal;
210 font-weight: normal;
211 }
212
213 ol,
214 ul {
215 list-style: none;
216 }
217
218 a {
219 text-decoration: none;
220 color: inherit;
221 &:hover {
222 text-decoration: none;
223 }
224 }
225
226 a,
227 label,
228 button,
229 input,
230 select {
231 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
232 }
233
234 input,
235 select,
236 button {
237 // font: 100% tahoma, "\5b8b\4f53", arial;
238 vertical-align: baseline;
239 border-radius: 0;
240 background-color: transparent;
241 }
242
243 select {
244 outline: none;
245 -webkit-appearance: none;
246 -moz-appearance: none;
247 }
248 select::-ms-expand {
249 display: none;
250 }
251
252 input {
253 background: none;
254 outline: none;
255 border: none;
256 }
257
258 button::-moz-focus-inner,
259 input,
260 input[type="reset"]::-moz-focus-inner,
261 input[type="button"]::-moz-focus-inner,
262 input[type="submit"]::-moz-focus-inner,
263 input[type="file"] > input[type="button"]::-moz-focus-inner {
264 border: none;
265 }
266
267 input[type="checkbox"],
268 input[type="radio"] {
269 vertical-align: middle;
270 }
271
272 input[type="number"]::-webkit-outer-spin-button,
273 input[type="number"]::-webkit-inner-spin-button {
274 -webkit-appearance: none !important;
275 -moz-appearance: none !important;
276 margin: 0;
277 }
278
279 input:-webkit-autofill {
280 -webkit-box-shadow: 0 0 0 1000px white inset;
281 }
282
283 input[type="search"],
284 input[type="tel"],
285 input[type="text"],
286 input {
287 -webkit-appearance: none; /*去除系统默认的样式*/
288 -webkit-box-sizing: content-box;
289 // font-family: inherit;
290 font-size: 100%;
291 box-sizing: border-box;
292 }
293 input::-webkit-search-decoration,
294 input::-webkit-search-cancel-button {
295 display: none;
296 }
297
298 // input::-webkit-input-placeholder {
299 // color: $cGray !important;
300 // }
301
302 ::-webkit-input-placeholder {
303 color: $cGray;
304 opacity: 1;
305 }
306 :-moz-placeholder {
307 color: $cGray;
308 opacity: 1;
309 }
310 ::-moz-placeholder {
311 color: $cGray;
312 opacity: 1;
313 }
314 :-ms-input-placeholder {
315 color: $cGray;
316 opacity: 1;
317 }
318
319 // ::-webkit-scrollbar {
320 // width: 0px;
321 // height: 0px;
322 // display: none;
323 // }
324
325 .hide-scrollbar::-webkit-scrollbar {
326 display: none;
327 }
328
329 input::-webkit-input-placeholder {
330 color: $cGray2;
331 }
332
333 textarea::-webkit-input-placeholder {
334 color: $cGray2;
335 }
336
337 select,
338 input,
339 option {
340 color: $cLightBlack;
341 }
342
343 textarea {
344 outline: none;
345 border-radius: 0;
346 -webkit-appearance: none;
347 -moz-appearance: none;
348 overflow: auto;
349 resize: none;
350 // font: 100% tahoma, "\5b8b\4f53", arial;
351 color: $cLightBlack;
352 }
353
354 #app {
355 border: 0;
356 margin: 0;
357 padding: 0;
358 }
359
360 .main-container {
361 position: relative;
362 margin: 0 auto;
363 width: 100%;
364
365 &::after {
366 display: table;
367 content: "";
368 clear: both;
369 }
370 }
371
372 .main-container-min-height {
373 min-height: 500px;
374 }
375
376 .content {
377 max-width: 1200px;
378 width: 100%;
379 margin: 0 auto;
380 }
381
382 .box-w {
383 max-width: 1200px;
384 width: 100%;
385 margin: 0 auto;
386 }
387
388 .box {
389 max-width: 1200px;
390 width: 100%;
391 margin: 0 auto;
392 }
393
394 .m-width {
395 box-sizing: border-box;
396 padding: 0 4%;
397 }
398
399 .focus {
400 border: 1px solid $cOrange;
401 }
402
403 // // 视频
404 .video-js {
405 background-color: transparent !important;
406 border-radius: $borderRadiusSmall;
407 }
408
409 .video-js .vjs-tech,
410 .video-js .vjs-poster {
411 border-radius: $borderRadiusSmall;
412 }
413
414 .video-js .vjs-big-play-button {
415 top: 0 !important;
416 bottom: 0 !important;
417 left: 0 !important;
418 right: 0 !important;
419 margin: auto !important;
420 }
421
422 .video-js .vjs-slider {
423 background-color: $cOrange !important;
424 }
425
426 .video-js .vjs-poster {
427 background-color: transparent !important;
428 }
429
430 // vant
431 .v-header {
432 .van-cell {
433 padding: 16px 16px !important;
434 }
435
436 .van-collapse-item__content {
437 padding: 0;
438 }
439
440 .van-cell:not(:last-child)::after {
441 left: 0;
442 }
443 }
444
445 .ql-editor {
446 padding: 0px 0px !important;
447 }
448
449 @media (max-width: 1200px) {
450 .page-index {
451 .video-js {
452 width: 100% !important;
453 max-width: 100% !important;
454 }
455 }
456 // .page-vhis {
457 // .video-js {
458 // width: 100% !important;
459 // max-width: 100% !important;
460 // }
461 // }
462 }
463
464 // @media (max-width: 768px) {
465 @media (max-width: 980px) {
466 #app {
467 .header {
468 position: fixed;
469 width: 100%;
470 }
471 .main-container {
472 padding-top: $navHeight-M;
473 }
474 }
475
476 $fontSizeTitle: $fontSizeTitle-M;
477 $fontSize: $fontSize-M;
478 $fontSizeSmall: $fontSizeSmall-M;
479 .main-container {
480 // margin-bottom: $marginMedium-M;
481 }
482 }
483 </style> 91 </style>
......
1 // 字体放在同目录下
1 // @font-face { 2 // @font-face {
2 // font-family: 'vivo-BoldExtended'; 3 // font-family: 'BentonSans';
3 // src: url('./vivo-BoldExtended.ttf'); 4 // src: url('BentonSans-Regular_sOT.otf');
4 // font-weight: normal;
5 // font-style: normal;
6 // }
7 // @font-face {
8 // font-family: 'vivo-Regular';
9 // src: url('./vivo-Regular.ttf');
10 // font-weight: normal;
11 // font-style: normal;
12 // }
13 // @font-face {
14 // font-family: 'regular2';
15 // src: url('./regular2.otf');
16 // font-weight: normal;
17 // font-style: normal;
18 // } 5 // }
6
...\ No newline at end of file ...\ No newline at end of file
......
1 @import '@/styles/_support.scss'; 1
2 2
3 $borderRadius:6px; 3 $borderRadius:6px;
4 4
......
1 @import '@/styles/_support.scss'; 1
2 2
3 3
4 .comp { 4 .comp {
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .comp { 3 .comp {
4 position: fixed; 4 position: fixed;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 $borderSize: 6px; 3 $borderSize: 6px;
4 4
......
1 @import '@/styles/_support.scss'; 1
2 2
3 $borderRadius:6px; 3 $borderRadius:6px;
4 4
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .comp { 3 .comp {
4 position: relative; 4 position: relative;
......
1 @import '@/styles/_support.scss'; 1
......
1 @import '@/styles/_support.scss'; 1
2 2
3 3
4 .comp { 4 .comp {
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .drop-list { 3 .drop-list {
4 display: inline-block; 4 display: inline-block;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .v-footer { 3 .v-footer {
4 color: #ffffff; 4 color: #ffffff;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 $navHei: 92px; 3 $navHei: 92px;
4 $navHeiM: 72px; 4 $navHeiM: 72px;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .panel { 3 .panel {
4 z-index: 9999; 4 z-index: 9999;
......
1 @import "@/styles/_support.scss"; 1
2 2
3 .drop-list { 3 .drop-list {
4 display: inline-block; 4 display: inline-block;
......
1 @import "@/styles/_support.scss"; 1
2 2
3 .drop-list { 3 .drop-list {
4 position: relative; 4 position: relative;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .drop-list { 3 .drop-list {
4 display: inline-block; 4 display: inline-block;
......
1 @import "@/styles/_support.scss"; 1
2 2
3 .v-footer { 3 .v-footer {
4 color: $cFontGray2; 4 color: $cFontGray2;
......
1 @import "@/styles/_support.scss"; 1
2 2
3 $navHei: 92px; 3 $navHei: 92px;
4 $navHeiM: 72px; 4 $navHeiM: 72px;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .panel { 3 .panel {
4 z-index: 9999; 4 z-index: 9999;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .comp { 3 .comp {
4 position: fixed; 4 position: fixed;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .comp { 3 .comp {
4 position: fixed; 4 position: fixed;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .comp { 3 .comp {
4 position: fixed; 4 position: fixed;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .comp { 3 .comp {
4 position: fixed; 4 position: fixed;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 3
4 .comp { 4 .comp {
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .comp {} 3 .comp {}
4 4
......
1 @import "@/styles/_support.scss"; 1
2 2
3 .slider { 3 .slider {
4 position: relative; 4 position: relative;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 $borderRadius:6px; 3 $borderRadius:6px;
4 4
......
...@@ -15,6 +15,10 @@ Vue.use(ElementUI) ...@@ -15,6 +15,10 @@ Vue.use(ElementUI)
15 // tcLocale 15 // tcLocale
16 // }) 16 // })
17 17
18 import '@/styles/common.scss' // global css
19 import '@/styles/fonticon.scss' // 图标字体
20 // import '@/assets/fonts/font.scss' // 字体引入
21
18 import api from '@/api/api' 22 import api from '@/api/api'
19 import { 23 import {
20 httpGet, 24 httpGet,
......
1 @import '@/styles/_support.scss'; 1
2 2
3 $borderSize:6px; 3 $borderSize:6px;
4 4
......
1 @import '@/styles/_support.scss'; 1
2 2
3 3
4 strong { 4 strong {
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .content { 3 .content {
4 position: relative; 4 position: relative;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 3
4 input { 4 input {
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .common-form-container {} 3 .common-form-container {}
4 4
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .top-space { 3 .top-space {
4 // height: 51px; 4 // height: 51px;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 3
4 .contact-us-container { 4 .contact-us-container {
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .container{ 3 .container{
4 // font-size: $fontSize-M2; 4 // font-size: $fontSize-M2;
......
1 @import "@/styles/_support.scss"; 1
2 .list-container { 2 .list-container {
3 overflow-x: auto; 3 overflow-x: auto;
4 margin-bottom: 24px; 4 margin-bottom: 24px;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .container { 3 .container {
4 // margin-top: -48px; 4 // margin-top: -48px;
......
1 @import "@/styles/_support.scss"; 1
2 2
3 .container { 3 .container {
4 // font-size: 18px; 4 // font-size: 18px;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .content {} 3 .content {}
4 4
......
1 @import "@/styles/_support.scss"; 1
2 .comp { 2 .comp {
3 font-size: $fontSize-M2; 3 font-size: $fontSize-M2;
4 } 4 }
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .common-form-container {} 3 .common-form-container {}
4 4
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .container { 3 .container {
4 padding-bottom: 24px; 4 padding-bottom: 24px;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .list-container { 3 .list-container {
4 overflow-x: auto; 4 overflow-x: auto;
......
1 @import "@/styles/_support.scss"; 1
2 .list-container { 2 .list-container {
3 overflow-x: auto; 3 overflow-x: auto;
4 margin-bottom: 24px; 4 margin-bottom: 24px;
......
1 @import "@/styles/_support.scss"; 1
2 2
3 .comp { 3 .comp {
4 position: fixed; 4 position: fixed;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .content { 3 .content {
4 display: flex; 4 display: flex;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .content { 3 .content {
4 position: relative; 4 position: relative;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .content { 3 .content {
4 // background-color: wheat; 4 // background-color: wheat;
......
...@@ -10,5 +10,5 @@ ...@@ -10,5 +10,5 @@
10 10
11 <script src="./index.js"></script> 11 <script src="./index.js"></script>
12 <style lang="scss" scoped> 12 <style lang="scss" scoped>
13 @import "./index.scss"; 13 // @import "./index.scss";
14 </style> 14 </style>
......
1 @import "@/styles/_support.scss"; 1
2 2
3 $borderSize: 6px; 3 $borderSize: 6px;
4 4
......
1 @import "@/styles/_support.scss";
2 1
3 .page { 2 .page {
4 font-size: $fontSize-M2; 3 font-size: $fontSize-M2;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .content { 3 .content {
4 position: relative; 4 position: relative;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .content { 3 .content {
4 position: relative; 4 position: relative;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .content { 3 .content {
4 // padding-bottom: 102px; 4 // padding-bottom: 102px;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .content { 3 .content {
4 position: relative; 4 position: relative;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .content { 3 .content {
4 position: relative; 4 position: relative;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .content { 3 .content {
4 position: relative; 4 position: relative;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 3
4 strong { 4 strong {
......
1 @import '@/styles/_support.scss'; 1
2 2
3 3
4 strong { 4 strong {
......
1 @import '@/styles/_support.scss'; 1
2 2
3 3
4 .content { 4 .content {
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .content { 3 .content {
4 padding-bottom: 28px; 4 padding-bottom: 28px;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .content { 3 .content {
4 padding-bottom: 28px; 4 padding-bottom: 28px;
......
1 @import "@/styles/_support.scss"; 1
2 2
3 .content { 3 .content {
4 position: relative; 4 position: relative;
......
1 @import '@/styles/_support.scss'; 1
2 2
3 3
4 strong { 4 strong {
......
1 @import '@/styles/_support.scss'; 1
2 2
3 $borderSize: 6px; 3 $borderSize: 6px;
4 4
......
1 @import '@/styles/_support.scss'; 1
2 2
3 .content iframe{ 3 .content iframe{
4 height: 100%; 4 height: 100%;
......
1 // 通用颜色
2 .cOrange {
3 color: $cOrange;
4 }
5
6 .cGreen {
7 color: $cGreen;
8 }
9
10 .cGray {
11 color: $cGray;
12 }
13
14 .cDark {
15 color: $cDark;
16 }
17
18 // 提示栏
19 .alert {
20 @extend .bb;
21 display: flex;
22 align-items: center;
23 position: relative;
24 width: 100%;
25 border-radius: 10px;
26 border: solid 1px #dcdddd;
27 background-color: #f2f2f2;
28 margin: 0 auto 12px;
29 padding: 6px 36px;
30
31 .icon {
32 margin-right: 5px;
33 display: inline-block;
34 }
35
36 .btn {
37 color: $cOrange;
38 }
39
40 .close {
41 position: absolute;
42 right: 17px;
43 }
44 }
45
46 // 输入框
47 .ipt-wrap {
48 .ipt {
49 @extend .bb;
50 width: 100%;
51 height: 54px;
52 border-radius: 54px;
53 border: solid 1px #dcdddd !important;
54 background-color: #ffffff;
55 padding: 0 24px;
56 flex: 1;
57 display: flex;
58 align-items: center;
59
60 &:lang(zh) {
61 letter-spacing: 1.2px;
62 }
63 }
64
65 .down-arrow {
66 position: absolute;
67 top: 26.4px;
68 right: 24px;
69 background-image: url("~@/assets/images/common/down-arrow.png");
70 width: 12px;
71 height: 8px;
72 pointer-events: none;
73 cursor: default;
74 }
75
76 .eye {
77 position: absolute;
78 top: 14.4px;
79 right: 24px;
80 background-image: url("~@/assets/images/common/icon-eyes-off.png");
81 width: 27px;
82 height: 24px;
83 pointer-events: none;
84 cursor: default;
85 }
86
87 .eye-act {
88 background-image: url("~@/assets/images/common/icon-eyes-on.png");
89 }
90
91 .ipt:focus {
92 border-color: $cOrange !important;
93 }
94
95 .ipt.err {
96 border-color: $cOrange !important;
97 }
98
99 .err {
100 .ipt {
101 border-color: $cOrange !important;
102 }
103 }
104 }
105
106 // 输入框
107 .ipt-wrap-linear {
108 position: relative;
109 .ipt {
110 @extend .bb;
111 width: 100%;
112 height: 50px;
113 border-radius: 5px;
114 border: 2px solid transparent;
115 background-clip: padding-box, border-box;
116 background-origin: padding-box, border-box;
117 background-image: linear-gradient(90deg, #fff, #fff),
118 linear-gradient(90deg, #feab1b, #f15a08);
119
120 background-color: #ffffff;
121 padding: 0 24px;
122 flex: 1;
123 display: flex;
124 align-items: center;
125 font-size: 18px;
126 color: $cFontGray2;
127
128 &:lang(zh) {
129 letter-spacing: 1.1px;
130 }
131 }
132
133 .sel{
134 padding: 0 48px 0 24px;
135 }
136
137 ::-webkit-input-placeholder {
138 color: rgba(102, 102, 102, 0.5);
139 }
140
141 .down-arrow {
142 position: absolute;
143 top: 18px;
144 right: 24px;
145 background-image: url("~@/assets/images/common/down-arrow-linear.png");
146 width: 20px;
147 height: 15px;
148 pointer-events: none;
149 cursor: default;
150 z-index: 1001;
151 }
152
153 .eye {
154 position: absolute;
155 top: 14.4px;
156 right: 24px;
157 background-image: url("~@/assets/images/common/icon-eyes-off.png");
158 width: 27px;
159 height: 24px;
160 pointer-events: none;
161 cursor: default;
162 }
163
164 .eye-act {
165 background-image: url("~@/assets/images/common/icon-eyes-on.png");
166 }
167 }
168
169 // 轮播
170 .swiper-pagination-bullet {
171 width: 12px !important;
172 height: 12px !important;
173 }
174
175 .swiper-pagination-bullet-active {
176 background: $cOrange !important;
177 }
178
179 @media (max-width: 768px) {
180 .alert {
181 padding: 4px 36px 4px 12px;
182
183 .icon {
184 }
185 }
186 }
1 /**
2 * ------------------------------------------------------------------
3 * 支持文件
4 * 需要引用的地方均需要加上这个支持文件
5 *
6 * ------------------------------------------------------------------
7 *
8 */
9
10 @import "mixins.scss";
11
12 @import "var.scss";
13
14 @import "utils.scss";
15
16 @import "common.scss";
17
18 // 图标字体
19 @import "fonticon.scss";
20
21 // 字体引入
22 @import './../assets/fonts/font.scss'
1 html {
2 font-family: "Arial", "Microsoft YaHei";
3 font-size: 12px;
4 word-spacing: 1px;
5 word-break: break-word;
6 text-rendering: optimizeLegibility;
7 // color: #333;
8 color: $cFontGray;
9 background-color: #ffffff;
10 // -ms-text-size-adjust: 100%;
11 // -webkit-text-size-adjust: 100%;
12 // -moz-osx-font-smoothing: grayscale;
13 // -webkit-font-smoothing: antialiased;
14 box-sizing: border-box;
15 }
16
17 * {
18 touch-action: pan-y;
19 }
20
21 body {
22 font-size: $fontSize;
23 }
24
25 html,
26 body {
27 -webkit-text-size-adjust: none;
28 }
29
30 body,
31 div {
32 border: 0;
33 margin: 0;
34 padding: 0;
35 }
36
37 *,
38 *:before,
39 *:after {
40 box-sizing: border-box;
41 margin: 0;
42 }
43
44 body,
45 h1,
46 h2,
47 h3,
48 h4,
49 h5,
50 h6,
51 hr,
52 p,
53 blockquote,
54 dl,
55 dt,
56 dd,
57 ul,
58 ol,
59 li,
60 pre,
61 form,
62 fieldset,
63 legend,
64 button,
65 input,
66 textarea,
67 th,
68 td,
69 iframe {
70 margin: 0;
71 padding: 0;
72 }
73
74 img,
75 article,
76 aside,
77 details,
78 figcaption,
79 figure,
80 footer,
81 header,
82 menu,
83 nav,
84 section,
85 summary,
86 time,
87 mark,
88 audio,
89 video {
90 display: block;
91 margin: 0;
92 padding: 0;
93 }
94
95 h1,
96 h2,
97 h3,
98 h4,
99 h5,
100 h6 {
101 font-size: 100%;
102 }
103
104 fieldset,
105 img {
106 border: 0;
107 }
108
109 address,
110 caption,
111 cite,
112 dfn,
113 em,
114 th,
115 var,
116 i,
117 em {
118 font-style: normal;
119 font-weight: normal;
120 }
121
122 ol,
123 ul {
124 list-style: none;
125 }
126
127 a {
128 text-decoration: none;
129 color: inherit;
130 &:hover {
131 text-decoration: none;
132 }
133 }
134
135 a,
136 label,
137 button,
138 input,
139 select {
140 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
141 }
142
143 input,
144 select,
145 button {
146 // font: 100% tahoma, "\5b8b\4f53", arial;
147 vertical-align: baseline;
148 border-radius: 0;
149 background-color: transparent;
150 }
151
152 select {
153 outline: none;
154 -webkit-appearance: none;
155 -moz-appearance: none;
156 }
157 select::-ms-expand {
158 display: none;
159 }
160
161 input {
162 background: none;
163 outline: none;
164 border: none;
165 }
166
167 button::-moz-focus-inner,
168 input,
169 input[type="reset"]::-moz-focus-inner,
170 input[type="button"]::-moz-focus-inner,
171 input[type="submit"]::-moz-focus-inner,
172 input[type="file"] > input[type="button"]::-moz-focus-inner {
173 border: none;
174 }
175
176 input[type="checkbox"],
177 input[type="radio"] {
178 vertical-align: middle;
179 }
180
181 input[type="number"]::-webkit-outer-spin-button,
182 input[type="number"]::-webkit-inner-spin-button {
183 -webkit-appearance: none !important;
184 -moz-appearance: none !important;
185 margin: 0;
186 }
187
188 input:-webkit-autofill {
189 -webkit-box-shadow: 0 0 0 1000px white inset;
190 }
191
192 input[type="search"],
193 input[type="tel"],
194 input[type="text"],
195 input {
196 -webkit-appearance: none; /*去除系统默认的样式*/
197 -webkit-box-sizing: content-box;
198 // font-family: inherit;
199 font-size: 100%;
200 box-sizing: border-box;
201 }
202 input::-webkit-search-decoration,
203 input::-webkit-search-cancel-button {
204 display: none;
205 }
206
207 // input::-webkit-input-placeholder {
208 // color: $cGray !important;
209 // }
210
211 ::-webkit-input-placeholder {
212 color: $cGray;
213 opacity: 1;
214 }
215 :-moz-placeholder {
216 color: $cGray;
217 opacity: 1;
218 }
219 ::-moz-placeholder {
220 color: $cGray;
221 opacity: 1;
222 }
223 :-ms-input-placeholder {
224 color: $cGray;
225 opacity: 1;
226 }
227
228 // ::-webkit-scrollbar {
229 // width: 0px;
230 // height: 0px;
231 // display: none;
232 // }
233
234 .hide-scrollbar::-webkit-scrollbar {
235 display: none;
236 }
237
238 input::-webkit-input-placeholder {
239 color: $cGray2;
240 }
241
242 textarea::-webkit-input-placeholder {
243 color: $cGray2;
244 }
245
246 select,
247 input,
248 option {
249 color: $cLightBlack;
250 }
251
252 textarea {
253 outline: none;
254 border-radius: 0;
255 -webkit-appearance: none;
256 -moz-appearance: none;
257 overflow: auto;
258 resize: none;
259 // font: 100% tahoma, "\5b8b\4f53", arial;
260 color: $cLightBlack;
261 }
262
263 #app {
264 border: 0;
265 margin: 0;
266 padding: 0;
267 }
268
269 .main-container {
270 position: relative;
271 margin: 0 auto;
272 width: 100%;
273
274 &::after {
275 display: table;
276 content: "";
277 clear: both;
278 }
279 }
280
281 .main-container-min-height {
282 min-height: 500px;
283 }
284
285 .content {
286 max-width: 1200px;
287 width: 100%;
288 margin: 0 auto;
289 }
290
291 .box-w {
292 max-width: 1200px;
293 width: 100%;
294 margin: 0 auto;
295 }
296
297 .box {
298 max-width: 1200px;
299 width: 100%;
300 margin: 0 auto;
301 }
302
303 .m-width {
304 box-sizing: border-box;
305 padding: 0 4%;
306 }
307
308 .focus {
309 border: 1px solid $cOrange;
310 }
311
312 // // 视频
313 .video-js {
314 background-color: transparent !important;
315 border-radius: $borderRadiusSmall;
316 }
317
318 .video-js .vjs-tech,
319 .video-js .vjs-poster {
320 border-radius: $borderRadiusSmall;
321 }
322
323 .video-js .vjs-big-play-button {
324 top: 0 !important;
325 bottom: 0 !important;
326 left: 0 !important;
327 right: 0 !important;
328 margin: auto !important;
329 }
330
331 .video-js .vjs-slider {
332 background-color: $cOrange !important;
333 }
334
335 .video-js .vjs-poster {
336 background-color: transparent !important;
337 }
338
339 // vant
340 .v-header {
341 .van-cell {
342 padding: 16px 16px !important;
343 }
344
345 .van-collapse-item__content {
346 padding: 0;
347 }
348
349 .van-cell:not(:last-child)::after {
350 left: 0;
351 }
352 }
353
354 .ql-editor {
355 padding: 0px 0px !important;
356 }
357
358 @media (max-width: 1200px) {
359 .page-index {
360 .video-js {
361 width: 100% !important;
362 max-width: 100% !important;
363 }
364 }
365 // .page-vhis {
366 // .video-js {
367 // width: 100% !important;
368 // max-width: 100% !important;
369 // }
370 // }
371 }
372
373 // @media (max-width: 768px) {
374 @media (max-width: 980px) {
375 #app {
376 .header {
377 position: fixed;
378 width: 100%;
379 }
380 .main-container {
381 padding-top: $navHeight-M;
382 }
383 }
384
385 $fontSizeTitle: $fontSizeTitle-M;
386 $fontSize: $fontSize-M;
387 $fontSizeSmall: $fontSizeSmall-M;
388 .main-container {
389 // margin-bottom: $marginMedium-M;
390 }
391 }
392
393
394
395 // 通用颜色
396 .cOrange {
397 color: $cOrange;
398 }
399
400 .cGreen {
401 color: $cGreen;
402 }
403
404 .cGray {
405 color: $cGray;
406 }
407
408 .cDark {
409 color: $cDark;
410 }
411
412 // 提示栏
413 .alert {
414 @extend .bb;
415 display: flex;
416 align-items: center;
417 position: relative;
418 width: 100%;
419 border-radius: 10px;
420 border: solid 1px #dcdddd;
421 background-color: #f2f2f2;
422 margin: 0 auto 12px;
423 padding: 6px 36px;
424
425 .icon {
426 margin-right: 5px;
427 display: inline-block;
428 }
429
430 .btn {
431 color: $cOrange;
432 }
433
434 .close {
435 position: absolute;
436 right: 17px;
437 }
438 }
439
440 // 输入框
441 .ipt-wrap {
442 .ipt {
443 @extend .bb;
444 width: 100%;
445 height: 54px;
446 border-radius: 54px;
447 border: solid 1px #dcdddd !important;
448 background-color: #ffffff;
449 padding: 0 24px;
450 flex: 1;
451 display: flex;
452 align-items: center;
453
454 &:lang(zh) {
455 letter-spacing: 1.2px;
456 }
457 }
458
459 .down-arrow {
460 position: absolute;
461 top: 26.4px;
462 right: 24px;
463 background-image: url("~@/assets/images/common/down-arrow.png");
464 width: 12px;
465 height: 8px;
466 pointer-events: none;
467 cursor: default;
468 }
469
470 .eye {
471 position: absolute;
472 top: 14.4px;
473 right: 24px;
474 background-image: url("~@/assets/images/common/icon-eyes-off.png");
475 width: 27px;
476 height: 24px;
477 pointer-events: none;
478 cursor: default;
479 }
480
481 .eye-act {
482 background-image: url("~@/assets/images/common/icon-eyes-on.png");
483 }
484
485 .ipt:focus {
486 border-color: $cOrange !important;
487 }
488
489 .ipt.err {
490 border-color: $cOrange !important;
491 }
492
493 .err {
494 .ipt {
495 border-color: $cOrange !important;
496 }
497 }
498 }
499
500 // 输入框
501 .ipt-wrap-linear {
502 position: relative;
503 .ipt {
504 @extend .bb;
505 width: 100%;
506 height: 50px;
507 border-radius: 5px;
508 border: 2px solid transparent;
509 background-clip: padding-box, border-box;
510 background-origin: padding-box, border-box;
511 background-image: linear-gradient(90deg, #fff, #fff),
512 linear-gradient(90deg, #feab1b, #f15a08);
513
514 background-color: #ffffff;
515 padding: 0 24px;
516 flex: 1;
517 display: flex;
518 align-items: center;
519 font-size: 18px;
520 color: $cFontGray2;
521
522 &:lang(zh) {
523 letter-spacing: 1.1px;
524 }
525 }
526
527 .sel{
528 padding: 0 48px 0 24px;
529 }
530
531 ::-webkit-input-placeholder {
532 color: rgba(102, 102, 102, 0.5);
533 }
534
535 .down-arrow {
536 position: absolute;
537 top: 18px;
538 right: 24px;
539 background-image: url("~@/assets/images/common/down-arrow-linear.png");
540 width: 20px;
541 height: 15px;
542 pointer-events: none;
543 cursor: default;
544 z-index: 1001;
545 }
546
547 .eye {
548 position: absolute;
549 top: 14.4px;
550 right: 24px;
551 background-image: url("~@/assets/images/common/icon-eyes-off.png");
552 width: 27px;
553 height: 24px;
554 pointer-events: none;
555 cursor: default;
556 }
557
558 .eye-act {
559 background-image: url("~@/assets/images/common/icon-eyes-on.png");
560 }
561 }
562
563 // 轮播
564 .swiper-pagination-bullet {
565 width: 12px !important;
566 height: 12px !important;
567 }
568
569 .swiper-pagination-bullet-active {
570 background: $cOrange !important;
571 }
572
573 @media (max-width: 768px) {
574 .alert {
575 padding: 4px 36px 4px 12px;
576
577 .icon {
578 }
579 }
580 }
...@@ -6,8 +6,6 @@ $--font-path: "~element-ui/lib/theme-chalk/fonts"; ...@@ -6,8 +6,6 @@ $--font-path: "~element-ui/lib/theme-chalk/fonts";
6 6
7 @import "~element-ui/packages/theme-chalk/src/index"; 7 @import "~element-ui/packages/theme-chalk/src/index";
8 8
9 @import "@/styles/_var.scss";
10
11 // 类过滤组件 9 // 类过滤组件
12 .filter-comp { 10 .filter-comp {
13 .el-checkbox-group { 11 .el-checkbox-group {
......
...@@ -4,9 +4,5 @@ ...@@ -4,9 +4,5 @@
4 "outDir": "bin-debug", 4 "outDir": "bin-debug",
5 "sourceMap": true 5 "sourceMap": true
6 }, 6 },
7 "exclude": [ 7 "exclude": ["bin-debug", "bin-release", "resource"]
8 "bin-debug",
9 "bin-release",
10 "resource"
11 ]
12 } 8 }
......
...@@ -54,6 +54,20 @@ module.exports = { ...@@ -54,6 +54,20 @@ module.exports = {
54 .set('@store', resolve('src/store')) 54 .set('@store', resolve('src/store'))
55 .set('@utils', resolve('src/utils')) 55 .set('@utils', resolve('src/utils'))
56 .set('@common', resolve('src/common')) 56 .set('@common', resolve('src/common'))
57
58 //配置公共样式
59 const oneOfsMap = config.module.rule('scss').oneOfs.store
60 oneOfsMap.forEach(item => {
61 item
62 .use('sass-resources-loader')
63 .loader('sass-resources-loader')
64 .options({
65 // Provide path to the file with resources
66 // 要公用的scss的路径
67 resources: ['./src/styles/var.scss', './src/styles/mixins.scss', './src/styles/utils.scss']
68 })
69 .end()
70 })
57 }, 71 },
58 configureWebpack: { // webpack 配置 72 configureWebpack: { // webpack 配置
59 // 修改打包后js文件名 73 // 修改打包后js文件名
......