Skip to content

dev / pingan-life-index-pro

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

no message

1 parent 181aed6a
Inline Side-by-side
Showing 45 changed files with 836 additions and 295 deletions
...@@ -6,6 +6,7 @@ node_modules ...@@ -6,6 +6,7 @@ node_modules
6 .DS_Store 6 .DS_Store
7 sync.sh 7 sync.sh
8 git.sh 8 git.sh
9 /sandbox
9 10
10 # local env files 11 # local env files
11 .env.local 12 .env.local
......
...@@ -28,16 +28,20 @@ export default { ...@@ -28,16 +28,20 @@ export default {
28 }) 28 })
29 }, 29 },
30 methods: { 30 methods: {
31 ...mapActions(["pcorphone"]) 31 ...mapActions(["pcorphone"]),
32 },
33 created() {
34 let _this = this;
35 // 设置UA 32 // 设置UA
33 refreshUA() {
36 let output = new UA(navigator.userAgent); 34 let output = new UA(navigator.userAgent);
37 let deviceType = output.device.type; 35 let deviceType = output.device.type;
38 let isMobile = deviceType == "mobile"; 36 let isMobile = deviceType == "mobile";
39 this.$store.commit("IS_MOBILE", isMobile); 37 this.$store.commit("IS_MOBILE", isMobile);
40 38 }
39 },
40 created() {
41 // window.onresize = () => {
42 // this.refreshUA();
43 // };
44 this.refreshUA();
41 // 45 //
42 let userInfoStr = decodeURIComponent(getCookie("_user_profile")); 46 let userInfoStr = decodeURIComponent(getCookie("_user_profile"));
43 if (userInfoStr) { 47 if (userInfoStr) {
...@@ -293,18 +297,7 @@ textarea { ...@@ -293,18 +297,7 @@ textarea {
293 color: $cLightBlack; 297 color: $cLightBlack;
294 } 298 }
295 299
296 .cOrange { 300
297 color: $cOrange;
298 }
299 .cGreen {
300 color: $cGreen;
301 }
302 .cGray {
303 color: $cGray;
304 }
305 .cDark {
306 color: $cDark;
307 }
308 301
309 #app { 302 #app {
310 border: 0; 303 border: 0;
...@@ -316,8 +309,6 @@ textarea { ...@@ -316,8 +309,6 @@ textarea {
316 position: relative; 309 position: relative;
317 margin: 0 auto; 310 margin: 0 auto;
318 width: 100%; 311 width: 100%;
319 // max-width: 1024px; // 设计稿宽度
320 // min-height: 40rem;
321 312
322 &::after { 313 &::after {
323 display: table; 314 display: table;
...@@ -327,63 +318,35 @@ textarea { ...@@ -327,63 +318,35 @@ textarea {
327 } 318 }
328 319
329 .content { 320 .content {
330 // max-width: 1024px;
331 max-width: 1200px; 321 max-width: 1200px;
332 width: 100%; 322 width: 100%;
333 margin: 0 auto; 323 margin: 0 auto;
334 } 324 }
335 325
336 .box-w { 326 .box-w {
337 // max-width: 1024px;
338 // max-width: 950px;
339 max-width: 1200px; 327 max-width: 1200px;
340 width: 100%; 328 width: 100%;
341 margin: 0 auto; 329 margin: 0 auto;
342 } 330 }
343 331
344 .box { 332 .box {
345 // max-width: 950px;
346 max-width: 1200px; 333 max-width: 1200px;
347 width: 100%; 334 width: 100%;
348 margin: 0 auto; 335 margin: 0 auto;
349 } 336 }
350 337
351 .focus { 338 .m-width {
352 border: 1px solid $cOrange; 339 box-sizing: border-box;
353 } 340 padding: 0 4%;
354
355 .swiper-pagination-bullet {
356 width: 1rem !important;
357 height: 1rem !important;
358 }
359
360 .swiper-pagination-bullet-active {
361 background: $cOrange !important;
362 } 341 }
363 342
364 .ipt:focus { 343 .focus {
365 border-color: $cOrange !important; 344 border: 1px solid $cOrange;
366 } 345 }
367 346
368 .ipt.err {
369 border-color: $cOrange !important;
370 }
371 347
372 .ipt-wrap {
373 .ipt {
374 @extend .bb;
375 width: 100%;
376 height: 4.5rem;
377 border-radius: 4.5rem;
378 border: solid 1px #dcdddd !important;
379 background-color: #ffffff;
380 padding: 0 2rem;
381 flex: 1;
382 letter-spacing: .1rem;
383 }
384 }
385 348
386 // 视频 349 // // 视频
387 .video-js { 350 .video-js {
388 background-color: transparent !important; 351 background-color: transparent !important;
389 } 352 }
...@@ -394,7 +357,6 @@ textarea { ...@@ -394,7 +357,6 @@ textarea {
394 left: 0 !important; 357 left: 0 !important;
395 right: 0 !important; 358 right: 0 !important;
396 margin: auto !important; 359 margin: auto !important;
397 // display: none !important;
398 } 360 }
399 361
400 .video-js .vjs-slider { 362 .video-js .vjs-slider {
...@@ -404,4 +366,25 @@ textarea { ...@@ -404,4 +366,25 @@ textarea {
404 .video-js .vjs-poster { 366 .video-js .vjs-poster {
405 background-color: transparent !important; 367 background-color: transparent !important;
406 } 368 }
369
370 @media (max-width: 1200px) {
371 .page-index {
372 .video-js {
373 width: 100% !important;
374 max-width: 100% !important;
375 }
376 }
377 }
378
379 @media (max-width: 768px) {
380 $fontSizeTitle: $fontSizeTitle-M;
381 $fontSize: $fontSize-M;
382 $fontSizeSmall: $fontSizeSmall-M;
383 }
384
385 @media (max-width: 768px) {
386 $fontSizeTitle: $fontSizeTitle-M;
387 $fontSize: $fontSize-M;
388 $fontSizeSmall: $fontSizeSmall-M;
389 }
407 </style> 390 </style>
......
...@@ -198,7 +198,8 @@ export default { ...@@ -198,7 +198,8 @@ export default {
198 month, 198 month,
199 date 199 date
200 } = this; 200 } = this;
201 this.dateValue = `${year}-${month}-${date}`; 201 // this.dateValue = `${year}-${month}-${date}`;
202 this.formatDateValue(year, month, date);
202 this.showCalendar(); 203 this.showCalendar();
203 }, 204 },
204 // 选择月份 205 // 选择月份
...@@ -212,7 +213,8 @@ export default { ...@@ -212,7 +213,8 @@ export default {
212 month, 213 month,
213 date 214 date
214 } = this; 215 } = this;
215 this.dateValue = `${year}-${month}-${date}`; 216 // this.dateValue = `${year}-${month}-${date}`;
217 this.formatDateValue(year, month, date);
216 }, 218 },
217 // 选择年份 219 // 选择年份
218 selectYear(item) { 220 selectYear(item) {
...@@ -226,7 +228,8 @@ export default { ...@@ -226,7 +228,8 @@ export default {
226 month, 228 month,
227 date, 229 date,
228 } = this; 230 } = this;
229 this.dateValue = `${year}-${month}-${date}`; 231 // this.dateValue = `${year}-${month}-${date}`;
232 this.formatDateValue(year, month, date);
230 }, 233 },
231 234
232 // 计算year渲染列表 235 // 计算year渲染列表
...@@ -301,6 +304,15 @@ export default { ...@@ -301,6 +304,15 @@ export default {
301 return; 304 return;
302 } 305 }
303 }, 306 },
307 formatDateValue(year, month, date) {
308 if (month < 10) {
309 month = "0" + month
310 }
311 if (date < 10) {
312 date = "0" + date
313 }
314 this.dateValue = `${year}-${month}-${date}`;
315 },
304 initData() {} 316 initData() {}
305 }, 317 },
306 mounted() {}, 318 mounted() {},
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
20 margin-left: 0px; 20 margin-left: 0px;
21 21
22 @extend .bb; 22 @extend .bb;
23 width: 450px; 23 max-width: 450px;
24 height: 320px; 24 height: 320px;
25 border-radius: $borderRadius; 25 border-radius: $borderRadius;
26 background-color: wheat; 26 background-color: wheat;
...@@ -98,7 +98,8 @@ ...@@ -98,7 +98,8 @@
98 // 日 98 // 日
99 .day {} 99 .day {}
100 100
101 .month,.year { 101 .month,
102 .year {
102 103
103 margin: 36px auto 0; 104 margin: 36px auto 0;
104 105
...@@ -192,3 +193,12 @@ ...@@ -192,3 +193,12 @@
192 left: 0; 193 left: 0;
193 top: 0; 194 top: 0;
194 } 195 }
196
197
198 @media (max-width: 768px) {
199 .date-wrap {
200 .calendar-wrap {
201 padding: 24px 12px 12px;
202 }
203 }
204 }
......
...@@ -63,7 +63,6 @@ ...@@ -63,7 +63,6 @@
63 } 63 }
64 } 64 }
65 65
66
67 .user { 66 .user {
68 width: 9.25rem; 67 width: 9.25rem;
69 height: 3rem; 68 height: 3rem;
...@@ -75,10 +74,8 @@ ...@@ -75,10 +74,8 @@
75 color: #ffffff; 74 color: #ffffff;
76 margin: 0 auto; 75 margin: 0 auto;
77 76
78
79 span { 77 span {
80 max-width: 4.25rem; 78 max-width: 4.25rem;
81 /* 51/12 */
82 overflow: hidden; 79 overflow: hidden;
83 white-space: nowrap; 80 white-space: nowrap;
84 text-overflow: ellipsis; 81 text-overflow: ellipsis;
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 .v-footer { 3 .v-footer {
4 font-family: MicrosoftYaHei;
5 color: #ffffff; 4 color: #ffffff;
6 background-color: #2e2b2a; 5 background-color: #2e2b2a;
7 font-size: $fontSize; 6 font-size: $fontSize;
8 7
9 .footer-containter { 8 .footer-containter {
10 margin: 0 auto; 9 margin: 0 auto;
11 width: 1200px; 10 max-width: 1200px;
12 11
13 .cont { 12 .cont {
14
15 .logo-wrap { 13 .logo-wrap {
16 padding: 2.166667rem 0; 14 padding: 2.166667rem 0;
17 15
...@@ -51,16 +49,13 @@ ...@@ -51,16 +49,13 @@
51 margin-bottom: 2rem; 49 margin-bottom: 2rem;
52 } 50 }
53 } 51 }
54
55 } 52 }
56 53
57 // 导航 54 // 导航
58 .nav { 55 .nav {
59 // flex: 1;
60 display: flex; 56 display: flex;
61 57
62 .nav-v { 58 .nav-v {}
63 }
64 59
65 .n-item { 60 .n-item {
66 cursor: pointer; 61 cursor: pointer;
...@@ -68,6 +63,7 @@ ...@@ -68,6 +63,7 @@
68 } 63 }
69 } 64 }
70 65
66 // 公众号
71 .public { 67 .public {
72 text-align: left; 68 text-align: left;
73 margin-left: 5.32rem; 69 margin-left: 5.32rem;
...@@ -106,20 +102,23 @@ ...@@ -106,20 +102,23 @@
106 } 102 }
107 } 103 }
108 104
109 @media (max-width: 950px) { 105
106 @media (max-width: 1200px) {
110 .v-footer { 107 .v-footer {
108 @include content-percent();
109
111 .footer-containter { 110 .footer-containter {
112 .cont { 111 .cont {
113 .info { 112 .info {
114 display: block; 113 display: block;
115 114
115 .hotline {}
116
116 .nav { 117 .nav {
117 margin-top: 2rem; 118 margin-top: 2rem;
118 // flex: d;
119 display: flex; 119 display: flex;
120 120
121 .nav-v { 121 .nav-v {
122 // margin: 0 1.6rem 0 0;
123 width: 100%; 122 width: 100%;
124 } 123 }
125 124
...@@ -128,7 +127,8 @@ ...@@ -128,7 +127,8 @@
128 } 127 }
129 } 128 }
130 129
131 .focus { 130 .public {
131 margin: 0;
132 margin-top: 2rem; 132 margin-top: 2rem;
133 text-align: left; 133 text-align: left;
134 } 134 }
...@@ -138,7 +138,57 @@ ...@@ -138,7 +138,57 @@
138 box-sizing: border-box; 138 box-sizing: border-box;
139 padding-right: 2rem; 139 padding-right: 2rem;
140 } 140 }
141 }
142 }
143 }
144 }
145
146 @media (max-width: 768px) {
147 .v-footer {
148 font-size: $fontSizeSmall-M;
149 .footer-containter {
150 .cont {
151 .info {
152 display: flex;
153 justify-content: space-between;
154
155 .hotline {
156 min-width: 0;
157
158 .phone {
159 font-size: $fontSizeSmall-M !important;
160 font-weight: bold !important;
161 }
162 }
163
164 .nav {
165 display: none;
166 margin-top: 0;
167
168 .nav-v {}
169
170 .n-item {}
171 }
172
173 .nav2 {
174 display: block;
175 }
176
177 .public {
178 margin: 0;
179 }
180
181 // 公共组件
182 .n-item {
183 margin-bottom: 2rem;
184
185 &:first-child {
186 margin-bottom: 2rem;
187 }
188 }
189 }
141 190
191 .copyright {}
142 } 192 }
143 } 193 }
144 } 194 }
......
...@@ -37,8 +37,16 @@ ...@@ -37,8 +37,16 @@
37 <div class="n-item">{{$t('footer.contactInformation')}}</div> 37 <div class="n-item">{{$t('footer.contactInformation')}}</div>
38 <div class="n-item">{{$t('footer.service')}}</div> 38 <div class="n-item">{{$t('footer.service')}}</div>
39 </div> 39 </div>
40 </div>
40 41
42 <div class="nav nav2">
43 <div class="nav-v">
44 <div @click="toPage('privacy')" class="n-item">{{$t('footer.privacy')}}</div>
45 <div @click="toPage('terms')" class="n-item">{{$t('footer.terms')}}</div>
46 <div @click="toPage('protocol')" class="n-item">{{$t('footer.protocol')}}</div>
47 </div>
41 </div> 48 </div>
49
42 <div class="public"> 50 <div class="public">
43 <div class="tit">{{$t('footer.qrcode')}}</div> 51 <div class="tit">{{$t('footer.qrcode')}}</div>
44 <!-- <img class="qrcode" src="@/assets/images/home/qrcode-focus.png" alt=""> --> 52 <!-- <img class="qrcode" src="@/assets/images/home/qrcode-focus.png" alt=""> -->
......
...@@ -95,12 +95,17 @@ export default { ...@@ -95,12 +95,17 @@ export default {
95 this.$set(this, 'loginData', menuData); 95 this.$set(this, 'loginData', menuData);
96 } 96 }
97 }, 97 },
98 beforeDestroy() {
99 window.removeEventListener('resize', this.checkIsSmallScreen(), false)
100 },
98 mounted() { 101 mounted() {
99 const self = this; 102 // const self = this;
100 self.checkIsSmallScreen(); 103 // self.checkIsSmallScreen();
101 document.body.onresize = () => { 104 // document.body.onresize = () => {
102 self.checkIsSmallScreen(); 105 // self.checkIsSmallScreen();
103 } 106 // }
107 window.addEventListener('resize', () => this.checkIsSmallScreen(), false);
108
104 }, 109 },
105 watch: { 110 watch: {
106 userInfo(val) { 111 userInfo(val) {
......
...@@ -81,23 +81,24 @@ ...@@ -81,23 +81,24 @@
81 81
82 .lang { 82 .lang {
83 color: $cOrange; 83 color: $cOrange;
84
85 } 84 }
86 } 85 }
87 } 86 }
88 87
89 88
90 @media (max-width: 950px) { 89 @media (max-width: 1200px) {
91 .v-header { 90 .v-header {
92 .header-container { 91 @include content-percent();
93 width: 96%; 92
93 .main-nav-list {
94 display: none;
94 } 95 }
95 } 96 }
96 } 97 }
97 98
98 @media (max-width: 800px) { 99 @media (max-width: 768px) {
99 .v-header { 100 .v-header {
100 .main-nav-list { 101 .main-nav {
101 display: none; 102 display: none;
102 } 103 }
103 } 104 }
......
...@@ -54,3 +54,25 @@ ...@@ -54,3 +54,25 @@
54 } 54 }
55 } 55 }
56 } 56 }
57
58 @media (max-width: 1200px) {
59 .content {
60 @include content-percent();
61 padding-bottom: $marginMedium-M;
62 }
63
64 .top-space {
65 padding-bottom: $marginMedium-M;
66 }
67
68 .product {
69 &-item {
70 width: 45%;
71 height: 15rem;
72 }
73 }
74
75 .ebg {
76 display: none;
77 }
78 }
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 .common-form-container {} 3 .common-form-container {
4 // @extend .bb;
5 // border-radius: .666667rem;
6 // border: solid .083333rem #f2f2f2;
7 // background-color: #ffffff;
8 // padding: 2.666667rem 2.833333rem 2.833333rem 2rem;
9 }
4 10
5 .table { 11 .table {
6 $girdHei: 4.333333rem; 12 $girdHei: 4.333333rem;
...@@ -108,7 +114,8 @@ ...@@ -108,7 +114,8 @@
108 } 114 }
109 115
110 .w4 { 116 .w4 {
111 flex: 1; 117 width: 12rem;
118 width: 13.75rem;
112 } 119 }
113 } 120 }
114 121
......
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
7 } 7 }
8 8
9 .reservation-container { 9 .reservation-container {
10 // width: 64.25rem;
11 border-radius: .666667rem; 10 border-radius: .666667rem;
12 border: solid .083333rem #f2f2f2; 11 border: solid .083333rem #f2f2f2;
13 background-color: #ffffff; 12 background-color: #ffffff;
...@@ -16,12 +15,11 @@ ...@@ -16,12 +15,11 @@
16 15
17 .form { 16 .form {
18 display: flex; 17 display: flex;
19 // justify-content: space-between;
20 flex-wrap: wrap; 18 flex-wrap: wrap;
21 19
22 &-item { 20 &-item {
23 position: relative; 21 position: relative;
24 // padding: 0 1.25rem 0 2.166667rem; 22 padding: 0 $marginSmall;
25 margin-bottom: 2.333333rem; 23 margin-bottom: 2.333333rem;
26 24
27 .label { 25 .label {
...@@ -66,7 +64,7 @@ ...@@ -66,7 +64,7 @@
66 64
67 .down-arrow { 65 .down-arrow {
68 position: absolute; 66 position: absolute;
69 top: 1.6rem; 67 top: 2.2rem;
70 right: 2rem; 68 right: 2rem;
71 background-image: url('~@/assets/images/reservation/re-down-arrow.png'); 69 background-image: url('~@/assets/images/reservation/re-down-arrow.png');
72 width: 1rem; 70 width: 1rem;
...@@ -178,7 +176,7 @@ ...@@ -178,7 +176,7 @@
178 176
179 .form2 { 177 .form2 {
180 .form-item { 178 .form-item {
181 margin-right: 1.166667rem; 179 // margin-right: 1.166667rem;
182 180
183 &:last-child { 181 &:last-child {
184 margin-right: 0; 182 margin-right: 0;
...@@ -236,3 +234,20 @@ input { ...@@ -236,3 +234,20 @@ input {
236 background-color: gray !important; 234 background-color: gray !important;
237 background-image: none !important; 235 background-image: none !important;
238 } 236 }
237
238
239 @media (max-width: 768px) {
240 .form {
241 &-item3 {
242 display: block;
243
244 .ipt-wrap {
245 margin: 0;
246 }
247 }
248 }
249
250 .notice {
251 margin: 0;
252 }
253 }
......
...@@ -12,12 +12,14 @@ ...@@ -12,12 +12,14 @@
12 } 12 }
13 13
14 .w1 { 14 .w1 {
15 width: 10rem; 15 // width: 10rem;
16 width: 20rem;
16 text-align: center; 17 text-align: center;
17 } 18 }
18 19
19 .w2 { 20 .w2 {
20 width: 6.25rem; 21 // width: 6.25rem;
22 width: 12.5rem;
21 text-align: center; 23 text-align: center;
22 } 24 }
23 25
......
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
77 77
78 .down-arrow { 78 .down-arrow {
79 position: absolute; 79 position: absolute;
80 top: 1.6rem; 80 top: 2.2rem;
81 right: 2rem; 81 right: 2rem;
82 background-image: url('~@/assets/images/reservation/re-down-arrow.png'); 82 background-image: url('~@/assets/images/reservation/re-down-arrow.png');
83 width: 1rem; 83 width: 1rem;
......
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
4 padding-bottom: 2rem; 4 padding-bottom: 2rem;
5 } 5 }
6 6
7
8 .border { 7 .border {
9 @extend .bb; 8 @extend .bb;
10 // height: 387px; 9 // height: 387px;
...@@ -99,16 +98,6 @@ ...@@ -99,16 +98,6 @@
99 padding: .75rem; 98 padding: .75rem;
100 } 99 }
101 100
102 .down-arrow {
103 position: absolute;
104 top: 1.6rem;
105 right: 2rem;
106 background-image: url('~@/assets/images/reservation/re-down-arrow.png');
107 width: 1rem;
108 height: .666667rem;
109 pointer-events: none;
110 cursor: default;
111 }
112 } 101 }
113 } 102 }
114 103
......
...@@ -91,6 +91,8 @@ ...@@ -91,6 +91,8 @@
91 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div> {{$t('policyChangeInformation.NO')}} 91 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div> {{$t('policyChangeInformation.NO')}}
92 </div> 92 </div>
93 <div class="ipt-wrap"> 93 <div class="ipt-wrap">
94 <div class="eye"></div>
95 <!-- <div class="eye eye-act"></div> -->
94 <input class="ipt" type="text"> 96 <input class="ipt" type="text">
95 </div> 97 </div>
96 </div> 98 </div>
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3
4
3 input { 5 input {
4 padding: 0 2.083333rem; 6 padding: 0 2.083333rem;
5 color: #333333; 7 color: #333333;
6 } 8 }
7 9
8 10 .top-space {}
9
10 .top-space {
11 // height: 4.25rem;
12 }
13 11
14 .reservation-container { 12 .reservation-container {
15 // width: 64.25rem; 13 @extend .bb;
16 border-radius: .666667rem; 14 border-radius: .666667rem;
17 border: solid .083333rem #f2f2f2; 15 border: solid .083333rem #f2f2f2;
18 background-color: #ffffff; 16 background-color: #ffffff;
19 padding: 2.166667rem .916667rem 0; 17 padding: 2.666667rem 2.833333rem 2.833333rem 2rem;
20 } 18 }
21 19
22 .form { 20 .form {
...@@ -26,7 +24,7 @@ input { ...@@ -26,7 +24,7 @@ input {
26 24
27 &-item { 25 &-item {
28 position: relative; 26 position: relative;
29 padding: 0 1.25rem; 27 padding: 0 $marginSmall;
30 margin-bottom: 2.333333rem; 28 margin-bottom: 2.333333rem;
31 29
32 .label { 30 .label {
...@@ -49,8 +47,7 @@ input { ...@@ -49,8 +47,7 @@ input {
49 position: relative; 47 position: relative;
50 48
51 // input和下拉 49 // input和下拉
52 .ipt { 50 .ipt {}
53 }
54 51
55 // 长文本 52 // 长文本
56 .textarea { 53 .textarea {
...@@ -62,7 +59,7 @@ input { ...@@ -62,7 +59,7 @@ input {
62 59
63 .down-arrow { 60 .down-arrow {
64 position: absolute; 61 position: absolute;
65 top: 1.6rem; 62 top: 2.2rem;
66 right: 2rem; 63 right: 2rem;
67 background-image: url('~@/assets/images/reservation/re-down-arrow.png'); 64 background-image: url('~@/assets/images/reservation/re-down-arrow.png');
68 width: 1rem; 65 width: 1rem;
...@@ -72,7 +69,6 @@ input { ...@@ -72,7 +69,6 @@ input {
72 } 69 }
73 } 70 }
74 71
75
76 .validator { 72 .validator {
77 color: $cOrange; 73 color: $cOrange;
78 margin-top: 0.5rem; 74 margin-top: 0.5rem;
...@@ -95,8 +91,8 @@ input { ...@@ -95,8 +91,8 @@ input {
95 margin-bottom: 2.25rem; 91 margin-bottom: 2.25rem;
96 92
97 .label { 93 .label {
98 min-width: 12.833333rem;
99 height: 2.5rem; 94 height: 2.5rem;
95 margin-right: 1rem;
100 } 96 }
101 97
102 .cont { 98 .cont {
...@@ -131,7 +127,6 @@ input { ...@@ -131,7 +127,6 @@ input {
131 align-items: center; 127 align-items: center;
132 flex-wrap: wrap; 128 flex-wrap: wrap;
133 129
134
135 .label { 130 .label {
136 // min-width: 8.833333rem; 131 // min-width: 8.833333rem;
137 } 132 }
...@@ -148,7 +143,7 @@ input { ...@@ -148,7 +143,7 @@ input {
148 } 143 }
149 } 144 }
150 145
151 .ipt-wrap2{ 146 .ipt-wrap2 {
152 flex: 1; 147 flex: 1;
153 } 148 }
154 149
...@@ -210,5 +205,21 @@ input { ...@@ -210,5 +205,21 @@ input {
210 205
211 .disabled { 206 .disabled {
212 background-color: gray !important; 207 background-color: gray !important;
213 background-image:none !important; 208 background-image: none !important;
209 }
210
211 @media (max-width: 768px) {
212 .form {
213 &-item3 {
214 display: block;
215
216 .ipt-wrap {
217 margin: 0;
218 }
219 }
220 }
221
222 .notice {
223 margin: 0;
224 }
214 } 225 }
......
1 1
2 <template> 2 <template>
3 <div>
4 <div class="alert">
5 <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
6 <div class="txt">
7 如您有平安一賬通賬戶，可幫助我們更好地為您提供服務，
8 <span class="pointer btn">登錄</span> 或
9 <span class="pointer btn">註冊</span>
10 </div>
11
12 <img class="pointer close" src="@/assets/images/common/icon-alert-close.png" alt="">
13 </div>
14
3 <div class="reservation-container"> 15 <div class="reservation-container">
4 <div class="gird-g form"> 16 <div class="gird-g form">
5
6 <div class="pure-u-1 pure-u-md-1-2 form-item"> 17 <div class="pure-u-1 pure-u-md-1-2 form-item">
7 <div class="label"> 18 <div class="label">
8 <div class="icon"><img src="@/assets/images/reservation/icon-re-name.png"></div> {{$t('reservation.name')}} 19 <div class="icon"><img src="@/assets/images/reservation/icon-re-name.png"></div> {{$t('reservation.name')}}
...@@ -112,6 +123,7 @@ ...@@ -112,6 +123,7 @@
112 {{$t('customService.reservation.submitBtn')}} 123 {{$t('customService.reservation.submitBtn')}}
113 </div> 124 </div>
114 </div> 125 </div>
126 </div>
115 </template> 127 </template>
116 128
117 <script src="./reservation.js"></script> 129 <script src="./reservation.js"></script>
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
9 9
10 .left-panel { 10 .left-panel {
11 width: 16rem; 11 width: 16rem;
12 // background-color: wheat; 12 margin-right: $marginMedium;
13 13
14 .separator { 14 .separator {
15 margin: auto; 15 margin: auto;
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
66 } 66 }
67 67
68 &:first-child { 68 &:first-child {
69 padding: 0 0 1rem; 69 padding: 0 0 1.5rem;
70 } 70 }
71 71
72 &:last-child { 72 &:last-child {
...@@ -81,8 +81,7 @@ ...@@ -81,8 +81,7 @@
81 } 81 }
82 82
83 .right-panel { 83 .right-panel {
84 margin-left: $marginMedium; 84 max-width: 975px;
85 width: 975px;
86 background-color: #ffffff; 85 background-color: #ffffff;
87 86
88 .panel { 87 .panel {
...@@ -97,3 +96,21 @@ ...@@ -97,3 +96,21 @@
97 .empty-line { 96 .empty-line {
98 height: 1.333333rem; 97 height: 1.333333rem;
99 } 98 }
99
100
101 @media (max-width: 1200px) {
102 .content {
103 @include content-percent();
104 }
105
106 .left-panel {
107 display: none;
108 }
109 }
110
111 @media (max-width: 768px) {
112 .content {
113 @include content-percent();
114 margin: 0 auto;
115 }
116 }
......
1 import api from '@/api/api' 1 import api from '@/api/api';
2 import { 2 import {
3 httpGet, 3 httpGet,
4 httpPost 4 httpPost
5 } from '@/api/fetch-api.js' 5 } from '@/api/fetch-api.js';
6 6 import {
7 mapGetters,
8 mapActions,
9 mapState
10 } from "vuex";
11 var UA = require("ua-device");
7 12
8 export default { 13 export default {
9 data() { 14 data() {
...@@ -27,32 +32,15 @@ export default { ...@@ -27,32 +32,15 @@ export default {
27 32
28 }, 33 },
29 // 视频 34 // 视频
30 playerOptions: { 35 playerOptions: {},
31 width: 843, 36
32 height: 475,
33 autoplay: false, //如果true,浏览器准备好时开始回放。
34 muted: true, // 默认情况下将会消除任何音频。
35 language: 'en',
36 // playbackRates: [0.7, 1.0, 1.5, 2.0],//播放速度
37 sources: [{
38 type: "video/mp4",
39 // mp4
40 src: "https://ow.go.qudone.com/jyesupload/ee516bb327484197b7ca72f3dc4be9e6.mp4",
41 // webm
42 // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
43 }],
44 poster: 'images/video-poster.png',
45 },
46 controlBar: {
47 timeDivider: true,
48 durationDisplay: true,
49 remainingTimeDisplay: false,
50 fullscreenToggle: true //全屏按钮
51 }
52 } 37 }
53 }, 38 },
54 components: {}, 39 components: {},
55 computed: { 40 computed: {
41 ...mapState({
42 isSmallScreen: state => state.isSmallScreen
43 }),
56 locale() { 44 locale() {
57 return this.$i18n.locale || 'tc'; 45 return this.$i18n.locale || 'tc';
58 }, 46 },
...@@ -61,48 +49,10 @@ export default { ...@@ -61,48 +49,10 @@ export default {
61 }, 49 },
62 player() { 50 player() {
63 return this.$refs.videoPlayer.player 51 return this.$refs.videoPlayer.player
64 }
65 }, 52 },
66 methods: {
67 53
68 onPlayerPlay(player) {
69 // console.log('player play!', player)
70 },
71 onPlayerPause(player) {
72 // console.log('player pause!', player)
73 },
74 onPlayerEnded(player) {
75 // console.log('player ended!', player)
76 },
77 onPlayerLoadeddata(player) {
78 // console.log('player Loadeddata!', player)
79 },
80 onPlayerWaiting(player) {
81 // console.log('player Waiting!', player)
82 },
83 onPlayerPlaying(player) {
84 // console.log('player Playing!', player)
85 },
86 onPlayerTimeupdate(player) {
87 // console.log('player Timeupdate!', player.currentTime())
88 },
89 onPlayerCanplay(player) {
90 // console.log('player Canplay!', player)
91 },
92 onPlayerCanplaythrough(player) {
93 // console.log('player Canplaythrough!', player)
94 },
95 // or listen state event
96 playerStateChanged(playerCurrentState) {
97 // console.log('player current update state', playerCurrentState)
98 },
99 // player is ready
100 playerReadied(player) {
101 // seek to 10s
102 // console.log('example player 1 readied', player)
103 player.currentTime(10)
104 // console.log('example 01: the player is readied', player)
105 }, 54 },
55 methods: {
106 56
107 /** 57 /**
108 * 推荐产品 58 * 推荐产品
...@@ -149,12 +99,51 @@ export default { ...@@ -149,12 +99,51 @@ export default {
149 path: '/profile' 99 path: '/profile'
150 }) 100 })
151 }, 101 },
102 refreshVideoPlayer() {
103
104 let playerOptions = {
105 width: 800,
106 height: 450,
107 // aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
108 autoplay: false, //如果true,浏览器准备好时开始回放。
109 muted: true, // 默认情况下将会消除任何音频。
110 language: 'en',
111 // playbackRates: [0.7, 1.0, 1.5, 2.0],//播放速度
112 sources: [{
113 type: "video/mp4",
114 // mp4
115 src: "https://ow.go.qudone.com/jyesupload/ee516bb327484197b7ca72f3dc4be9e6.mp4",
116 // webm
117 // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
118 }],
119 poster: 'images/video-poster.png',
120 controlBar: {
121 timeDivider: true,
122 durationDisplay: true,
123 remainingTimeDisplay: false,
124 fullscreenToggle: true //全屏按钮
125 }
126 }
127 let output = new UA(navigator.userAgent);
128 let deviceType = output.device.type;
129 let isMobile = deviceType == "mobile";
130 // if (this.isSmallScreen) {
131 if (isMobile) {
132 playerOptions.aspectRatio = "16:9";
133 }
134 this.playerOptions = playerOptions;
135 },
152 initData() {} 136 initData() {}
153 }, 137 },
138 beforeDestroy() {
139 window.removeEventListener('resize', this.refreshVideoPlayer(), false);
140 },
154 mounted() { 141 mounted() {
155 setTimeout(() => { 142 this.refreshVideoPlayer();
156 this.player.muted(false) 143 window.addEventListener('resize', () => this.refreshVideoPlayer(), false);
157 }, 2000)
158 }, 144 },
159 created() {} 145 created() {
146
147 }
148
160 } 149 }
......
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
2 2
3 .content { 3 .content {
4 padding-bottom: 2.25rem; 4 padding-bottom: 2.25rem;
5
6 } 5 }
7 6
8 .top-space { 7 .top-space {
...@@ -45,17 +44,50 @@ ...@@ -45,17 +44,50 @@
45 display: flex; 44 display: flex;
46 text-align: center; 45 text-align: center;
47 justify-content: space-between; 46 justify-content: space-between;
47 flex-wrap: wrap;
48 48
49 &-item { 49 &-item {
50 @extend .bb;
51 margin-right: $marginSmall;
50 52
51 position: relative; 53 position: relative;
52
53 width: 24.25rem; 54 width: 24.25rem;
55 // width: 100%;
54 height: 32.75rem; 56 height: 32.75rem;
55 border-radius: $borderRadiusSmall; 57 border-radius: $borderRadiusSmall;
56 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); 58 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
57 background-color: #fbfbfb; 59 background-color: #fbfbfb;
58 60
61 .img {
62 width: 100%;
63 height: 24.25rem;
64 background-size: cover;
65 }
66
67 .img1 {
68 background: url("~@/assets/images/index/recommend-1.png") no-repeat center;
69 background-size: cover;
70 }
71
72 .img2 {
73 background: url("~@/assets/images/index/recommend-2.png") no-repeat center;
74 background-size: cover;
75 }
76
77 .img3 {
78 background: url("~@/assets/images/index/recommend-3.png") no-repeat center;
79 background-size: cover;
80 }
81
82 .img4 {
83 background: url("~@/assets/images/index/recommend-4.png") no-repeat center;
84 background-size: cover;
85 }
86
87 &:last-child {
88 margin-right: 0;
89 }
90
59 .btn { 91 .btn {
60 position: absolute; 92 position: absolute;
61 left: 0; 93 left: 0;
...@@ -84,14 +116,11 @@ ...@@ -84,14 +116,11 @@
84 // 详情 116 // 详情
85 .detail { 117 .detail {
86 display: flex; 118 display: flex;
87 height: 39.75rem; 119 max-width: 1200px;
88 120
89 .vjs-custom-skin {
90 border-radius: $borderRadius !important;
91 overflow: hidden;
92 }
93 121
94 .txt { 122 .txt {
123 position: relative;
95 @extend .fcc; 124 @extend .fcc;
96 @extend .bb; 125 @extend .bb;
97 padding-left: 2.166667rem; 126 padding-left: 2.166667rem;
...@@ -132,8 +161,33 @@ ...@@ -132,8 +161,33 @@
132 } 161 }
133 162
134 163
135 @media (max-width: 950px) { 164 @media (max-width: 1200px) {
136 .box { 165 .content {
137 width: 96%; 166 @include content-percent();
167 }
168
169 // 详情
170 .detail {
171 display: block;
172
173 .vjs-custom-skin {
174 width: 100%;
175 }
176
177 .txt {
178 padding: 0;
179 margin: $marginSmall 0 $marginMedium;
180 }
181 }
182 }
183
184
185 @media (max-width: 768px) {
186 // 推荐产品
187 .recommend {
188 &-item {
189 width: 100%;
190 margin-right: 0;
191 }
138 } 192 }
139 } 193 }
......
1 1
2 <template> 2 <template>
3 <div> 3 <div class="page page-index">
4 <div class="banner-contaner"> 4 <div class="banner-contaner">
5 <!-- banner 轮播 --> 5 <!-- banner 轮播 -->
6 <div class="banner"> 6 <div class="banner">
...@@ -15,54 +15,36 @@ ...@@ -15,54 +15,36 @@
15 <div class="swiper-button-next" slot="button-next"></div> --> 15 <div class="swiper-button-next" slot="button-next"></div> -->
16 <div class="swiper-pagination" slot="pagination"></div> 16 <div class="swiper-pagination" slot="pagination"></div>
17 </swiper> 17 </swiper>
18
19 </div> 18 </div>
20 </div> 19 </div>
21 <div class="content"> 20 <div class="content">
22
23 <!-- 推荐产品 --> 21 <!-- 推荐产品 -->
24 <div class="box recommend"> 22 <div class="box recommend gird-g">
25 <div class="recommend-item"> 23 <div class="recommend-item pure-u-1 pure-u-md-1-2">
26 <div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.item1.btn')}}</div> 24 <div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.t1')}}</div>
27 <img src="@/assets/images/index/recommend-1.png"> 25 <div class="img img1"></div>
28 </div>
29 <div class="recommend-item">
30 <div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.item1.btn')}}</div>
31 <img src="@/assets/images/index/recommend-2.png">
32 </div> 26 </div>
33 <div class="recommend-item"> 27 <div class="recommend-item pure-u-1 pure-u-md-1-2">
34 <div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.item1.btn')}}</div> 28 <div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.t2')}}</div>
35 <img src="@/assets/images/index/recommend-3.png"> 29 <div class="img img2"></div>
36 </div> 30 </div>
37 <div class="recommend-item"> 31 <div class="recommend-item pure-u-1 pure-u-md-1-2">
38 <div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.item1.btn')}}</div> 32 <div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.t3')}}</div>
39 <img src="@/assets/images/index/recommend-4.png"> 33 <div class="img img3"></div>
40 </div> 34 </div>
35 <div class="recommend-item pure-u-1 pure-u-md-1-2">
36 <div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.t4')}}</div>
37 <div class="img img4"></div>
41 </div> 38 </div>
42 <!-- <div class="box recommend">
43 <div class="recommend-item">
44 <div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.item1.btn')}}</div>
45 <div class="tt t1">{{$t('index.recommend.item1.t1')}}</div>
46 <img src="@/assets/images/index/recommend-1.png">
47 </div> 39 </div>
48 <div class="recommend-item">
49 <div @click="onRecommendHandler(2)" class="btn pointer">{{$t('index.recommend.item2.btn')}}</div>
50 <div class="tt t1">{{$t('index.recommend.item2.t1')}}</div>
51 <img src="@/assets/images/index/recommend-2.png">
52 </div>
53 <div class="recommend-item">
54 <div @click="onRecommendHandler(3)" class="btn pointer">{{$t('index.recommend.item3.btn')}}</div>
55 <div class="tt t2">{{$t('index.recommend.item3.t1')}}</div>
56 <div class="tt t1">{{$t('index.recommend.item3.t2')}}
57 <span class="cOrange">{{$t('index.recommend.item3.t3')}}</span>{{$t('index.recommend.item3.t4')}}</div>
58 <img src="@/assets/images/index/recommend-3.png">
59 </div>
60 </div> -->
61 <!-- 详情 --> 40 <!-- 详情 -->
62 <div class="box detail"> 41 <div class="box detail">
63 <video-player class="vjs-custom-skin" controls ref="videoPlayer" :options="playerOptions" :playsinline="true" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" @ended="onPlayerEnded($event)" @loadeddata="onPlayerLoadeddata($event)" @waiting="onPlayerWaiting($event)" @playing="onPlayerPlaying($event)" @timeupdate="onPlayerTimeupdate($event)" @canplay="onPlayerCanplay($event)" @canplaythrough="onPlayerCanplaythrough($event)" @ready="playerReadied" @statechanged="playerStateChanged($event)"> 42 <video-player class="vjs-custom-skin" ref="videoPlayer" :options="playerOptions" :playsinline="true">
64 </video-player> 43 </video-player>
65 <div class="txt"> 44 <div v-if="$i18n.locale == 'zh'" class="txt">
45 中国平安人寿保险股份有限公司成立于2002年,是中国平安保险（集团）股份有限公司旗下的重要成员。截至2017年12月31日,平安人寿注册资本为338亿元，在全国拥有42家分公司（含7家电话销售中心）及超过3,300个营业网点,寿险代理人达138.6万名。公司个险、银保、电销、互联网多渠道齐头并进，实现协同发展，运营管理水平及客户体验领先市场，并依托集团“金融+科技”双驱动战略，在合规经营、防范风险的前提下，开启平台经营新时代，持续提升产品、科技两大核心竞争力，推动内含价值及规模持续、健康、稳定增长。
46 </div>
47 <div v-else class="txt">
66 中國平安人壽保險股份有限公司成立於2002年,是中國平安保險（集團）股份有限公司旗下的重要成員。截至2017年12月31日,平安人壽註冊資本為338億元，在全國擁有42家分公司（含7家電話銷售中心）及超過3,300個營業網點,壽險代理人達138.6萬名。公司個險、銀保、電銷、互聯網多渠道齊頭並進，實現協同發展，運營管理水平及客戶體驗領先市場，並依托集團“金融+科技”雙驅動戰略，在合規經營、防範風險的前提下，開啟平臺經營新時代，持續提升產品、科技兩大核心競爭力，推動內含價值及規模持續、健康、穩定增長。 48 中國平安人壽保險股份有限公司成立於2002年,是中國平安保險（集團）股份有限公司旗下的重要成員。截至2017年12月31日,平安人壽註冊資本為338億元，在全國擁有42家分公司（含7家電話銷售中心）及超過3,300個營業網點,壽險代理人達138.6萬名。公司個險、銀保、電銷、互聯網多渠道齊頭並進，實現協同發展，運營管理水平及客戶體驗領先市場，並依托集團“金融+科技”雙驅動戰略，在合規經營、防範風險的前提下，開啟平臺經營新時代，持續提升產品、科技兩大核心競爭力，推動內含價值及規模持續、健康、穩定增長。
67 </div> 49 </div>
68 </div> 50 </div>
......
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
42 margin: auto; 42 margin: auto;
43 max-width: 51rem; 43 max-width: 51rem;
44 border-radius: $borderRadius; 44 border-radius: $borderRadius;
45 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); 45 @extend .box-shadow;
46 background-color: #ffffff; 46 background-color: #ffffff;
47 47
48 &-tit { 48 &-tit {
...@@ -172,7 +172,7 @@ ...@@ -172,7 +172,7 @@
172 letter-spacing: .1rem; 172 letter-spacing: .1rem;
173 } 173 }
174 174
175 .date{ 175 .date {
176 width: 100%; 176 width: 100%;
177 } 177 }
178 178
...@@ -240,13 +240,60 @@ ...@@ -240,13 +240,60 @@
240 } 240 }
241 } 241 }
242 242
243 @media (max-width: 950px) { 243 @media (max-width: 1200px) {
244 .box { 244 .content {
245 width: 96%; 245 @include content-percent();
246 min-height: 0;
247 // padding-bottom: $marginMedium-M;
248 }
249
250 .top-space {
251 height: 0;
246 } 252 }
247 253
248 .login { 254 .login {
249 padding: 2rem 1rem 3.5rem; 255 padding: 1rem 1rem 3.5rem;
256 border-bottom: none;
257
258 min-height: 42rem;
259
260 &-tit-space-1 {
261 // height: 5.25rem;
262 }
263
264 &-tit-space-4 {
265 height: 1rem;
266 }
267
268
269 &-nav {
270 margin: 1.75rem auto 1rem;
271 }
272
273 .form {
274 &-item {
275 margin: 2rem auto 0;
276 }
277 }
278
279 &-protocol {
280 margin: $marginSmall-M auto 0;
281 }
282
283 &-submit {
284 margin: 0 auto 0;
285 width: 17.25rem;
286 height: 3.25rem;
287 line-height: 3.25rem;
288 }
289 }
290
291 .box-shadow {
292 box-shadow: none;
293 }
294
295 .ebg {
296 display: none;
250 } 297 }
251 } 298 }
252 299
......
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
38 margin: auto; 38 margin: auto;
39 max-width: 51rem; 39 max-width: 51rem;
40 border-radius: $borderRadius; 40 border-radius: $borderRadius;
41 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); 41 @extend .box-shadow;
42 background-color: #ffffff; 42 background-color: #ffffff;
43 43
44 &-tit { 44 &-tit {
...@@ -228,12 +228,56 @@ ...@@ -228,12 +228,56 @@
228 } 228 }
229 } 229 }
230 230
231 @media (max-width: 950px) { 231 .box-shadow {
232 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
233 }
234
235 @media (max-width: 1200px) {
236 .content {
237 @include content-percent();
238 min-height: 0;
239 padding-bottom: 0;
240 }
241
232 .box { 242 .box {
233 width: 96%; 243 width: 96%;
234 } 244 }
235 245
246 .top-space {
247 height: 0;
248 }
249
236 .login { 250 .login {
237 padding: 2rem 1rem 3.5rem; 251 padding: 1rem 1rem 3.5rem;
252 border-bottom: none;
253
254 &-nav {
255 margin: 1.75rem auto 1rem;
256 }
257
258 .form {
259 &-item {
260 margin-top: 2rem;
261 }
262 }
263
264 &-protocol {
265 margin: $marginSmall-M auto 0;
266 }
267
268 &-submit {
269 margin: 3rem auto 0;
270 width: 17.25rem;
271 height: 3.25rem;
272 line-height: 3.25rem;
273 }
274 }
275
276 .box-shadow {
277 box-shadow: none;
278 }
279
280 .ebg {
281 display: none;
238 } 282 }
239 } 283 }
......
...@@ -48,8 +48,8 @@ ...@@ -48,8 +48,8 @@
48 letter-spacing: 1.2px; 48 letter-spacing: 1.2px;
49 } 49 }
50 50
51 @media (max-width: 950px) { 51 @media (max-width: 1200px) {
52 .box { 52 .content {
53 width: 96%; 53 @include content-percent();
54 } 54 }
55 } 55 }
......
...@@ -43,6 +43,7 @@ ...@@ -43,6 +43,7 @@
43 &-tit { 43 &-tit {
44 display: flex; 44 display: flex;
45 align-items: center; 45 align-items: center;
46 flex: 1;
46 47
47 .point { 48 .point {
48 width: .5rem; 49 width: .5rem;
...@@ -51,13 +52,17 @@ ...@@ -51,13 +52,17 @@
51 margin: 0 1.75rem; 52 margin: 0 1.75rem;
52 } 53 }
53 54
55 .tit{
56 flex: 1;
57 }
58
54 .new { 59 .new {
55 margin: 0 1rem; 60 margin: 0 1rem;
56 } 61 }
57 } 62 }
58 63
59 &-date { 64 &-date {
60 margin-right: 1rem; 65 margin: 0 1rem;
61 } 66 }
62 67
63 &:last-child { 68 &:last-child {
...@@ -66,10 +71,31 @@ ...@@ -66,10 +71,31 @@
66 71
67 } 72 }
68 73
69
70 } 74 }
71 75
72 76
73 .pagination { 77 .pagination {
74 padding: 2.25rem 0; 78 padding: 2.25rem 0;
75 } 79 }
80
81 @media (max-width: 1200px) {
82 .content {
83 @include content-percent();
84 }
85 }
86
87 @media (max-width: 768px) {
88 .news {
89
90 &-item {
91 &-tit {
92 .point {
93 width: .5rem;
94 height: .5rem;
95 background-color: #4c4948;
96 margin: 0 0.75rem;
97 }
98 }
99 }
100 }
101 }
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
12 <div @click="toNewsDetail()" v-for="(item,index) in items" :key="index" class="news-item"> 12 <div @click="toNewsDetail()" v-for="(item,index) in items" :key="index" class="news-item">
13 <div class="news-item-tit"> 13 <div class="news-item-tit">
14 <div class="point"></div> 14 <div class="point"></div>
15 {{item}} 15 <div class="tit">{{item}}</div>
16 <img v-if="index < 3" class="new" src="@/assets/images/news-list/news-list-new.png"> 16 <img v-if="index < 3" class="new" src="@/assets/images/news-list/news-list-new.png">
17 </div> 17 </div>
18 <div class="news-item-date">2019-09-27</div> 18 <div class="news-item-date">2019-09-27</div>
......
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
43 margin: auto; 43 margin: auto;
44 max-width: 51rem; 44 max-width: 51rem;
45 border-radius: $borderRadius; 45 border-radius: $borderRadius;
46 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); 46 @extend .box-shadow;
47 background-color: #ffffff; 47 background-color: #ffffff;
48 48
49 &-tit { 49 &-tit {
...@@ -242,18 +242,59 @@ ...@@ -242,18 +242,59 @@
242 } 242 }
243 } 243 }
244 244
245 @media (max-width: 950px) { 245 @media (max-width: 1200px) {
246 .box { 246 .content {
247 width: 96%; 247 @include content-percent();
248 min-height: 0;
249 // padding-bottom: $marginMedium-M;
250 }
251
252 .top-space {
253 height: 0;
248 } 254 }
249 255
250 .login { 256 .login {
251 padding: 2rem 1rem 3.5rem; 257 padding: 1rem 1rem 3.5rem;
258 border-bottom: none;
259
260 min-height: 42rem;
261
262 &-tit-space-1 {
263 height: 2.25rem;
252 } 264 }
253 }
254 265
255 .disable { 266 &-tit-space-4 {
256 background-color: #dcdddd !important; 267 height: 1rem;
257 // color: $cFontGray; 268 }
258 color: $cFontGray; 269
270
271 &-nav {
272 margin: 1.75rem auto 1rem;
273 }
274
275 .form {
276 &-item {
277 margin: 2rem auto 0;
278 }
279 }
280
281 &-protocol {
282 margin: $marginSmall-M auto 0;
283 }
284
285 &-submit {
286 margin: 0 auto 0;
287 width: 17.25rem;
288 height: 3.25rem;
289 line-height: 3.25rem;
290 }
291 }
292
293 .box-shadow {
294 box-shadow: none;
295 }
296
297 .ebg {
298 display: none;
299 }
259 } 300 }
......
...@@ -38,12 +38,12 @@ ...@@ -38,12 +38,12 @@
38 @extend .bb; 38 @extend .bb;
39 padding: 2rem 6.25rem 4.5rem; 39 padding: 2rem 6.25rem 4.5rem;
40 border-bottom: solid 0.9rem $cGreen; 40 border-bottom: solid 0.9rem $cGreen;
41 height: 48rem; 41 min-height: 48rem;
42 42
43 margin: auto; 43 margin: auto;
44 max-width: 51rem; 44 max-width: 51rem;
45 border-radius: $borderRadius; 45 border-radius: $borderRadius;
46 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); 46 @extend .box-shadow;
47 background-color: #ffffff; 47 background-color: #ffffff;
48 48
49 &-tit { 49 &-tit {
...@@ -242,18 +242,58 @@ ...@@ -242,18 +242,58 @@
242 } 242 }
243 } 243 }
244 244
245 @media (max-width: 950px) { 245 @media (max-width: 1200px) {
246 .box { 246 .content {
247 width: 96%; 247 @include content-percent();
248 min-height: 0;
249 // padding-bottom: $marginMedium-M;
250 }
251
252 .top-space {
253 height: 0;
248 } 254 }
249 255
250 .login { 256 .login {
251 padding: 2rem 1rem 3.5rem; 257 padding: 1rem 1rem 3.5rem;
258 border-bottom: none;
259
260 min-height: 42rem;
261
262 &-tit-space-1 {
263 // height: 5.25rem;
252 } 264 }
253 }
254 265
255 .disable { 266 &-tit-space-4 {
256 background-color: #dcdddd !important; 267 height: 1rem;
257 // color: $cFontGray; 268 }
258 color: $cFontGray; 269
270 &-nav {
271 margin: 1.75rem auto 1rem;
272 }
273
274 .form {
275 &-item {
276 margin: 2rem auto 0;
277 }
278 }
279
280 &-protocol {
281 margin: $marginSmall-M auto 0;
282 }
283
284 &-submit {
285 margin: 0 auto 0;
286 width: 17.25rem;
287 height: 3.25rem;
288 line-height: 3.25rem;
289 }
290 }
291
292 .box-shadow {
293 box-shadow: none;
294 }
295
296 .ebg {
297 display: none;
298 }
259 } 299 }
......
...@@ -26,9 +26,10 @@ ...@@ -26,9 +26,10 @@
26 letter-spacing: 1.2px; 26 letter-spacing: 1.2px;
27 } 27 }
28 28
29 29 @media (max-width: 1200px) {
30 @media (max-width: 950px) { 30 .content {
31 .box { 31 @include content-percent();
32 width: 96%; 32 padding-bottom: $marginMedium-M;
33 } 33 }
34 } 34 }
35
......
...@@ -26,8 +26,9 @@ ...@@ -26,8 +26,9 @@
26 letter-spacing: 1.2px; 26 letter-spacing: 1.2px;
27 } 27 }
28 28
29 @media (max-width: 950px) { 29 @media (max-width: 1200px) {
30 .box { 30 .content {
31 width: 96%; 31 @include content-percent();
32 padding-bottom: $marginMedium-M;
32 } 33 }
33 } 34 }
......
...@@ -27,8 +27,9 @@ ...@@ -27,8 +27,9 @@
27 } 27 }
28 28
29 29
30 @media (max-width: 950px) { 30 @media (max-width: 1200px) {
31 .box { 31 .content {
32 width: 96%; 32 @include content-percent();
33 padding-bottom: 2rem;
33 } 34 }
34 } 35 }
......
...@@ -46,9 +46,12 @@ ...@@ -46,9 +46,12 @@
46 margin: auto; 46 margin: auto;
47 max-width: 51rem; 47 max-width: 51rem;
48 border-radius: $borderRadius; 48 border-radius: $borderRadius;
49 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); 49 // box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
50 @extend .box-shadow;
50 background-color: #ffffff; 51 background-color: #ffffff;
51 52
53
54
52 &-tit { 55 &-tit {
53 color: $cOrange; 56 color: $cOrange;
54 display: flex; 57 display: flex;
...@@ -247,12 +250,53 @@ ...@@ -247,12 +250,53 @@
247 } 250 }
248 } 251 }
249 252
250 @media (max-width: 950px) { 253 @media (max-width: 1200px) {
251 .box { 254 .content {
252 width: 96%; 255 @include content-percent();
256 min-height: 0;
257 // padding-bottom: $marginMedium-M;
258 }
259
260 .top-space {
261 height: 0;
262 }
263
264 .step{
265 margin-bottom: 1rem;
253 } 266 }
254 267
255 .login { 268 .login {
256 padding: 2rem 1rem 3.5rem; 269 padding: 1rem 1rem 3.5rem;
270 border-bottom: none;
271
272 &-nav {
273 margin: 1.75rem auto 1rem;
274 }
275
276 .form {
277 &-item {
278 margin-top: 2rem;
279 }
280
281 }
282
283 &-protocol {
284 margin: $marginSmall-M auto 0;
285 }
286
287 &-submit {
288 margin: 3rem auto 0;
289 width: 17.25rem;
290 height: 3.25rem;
291 line-height: 3.25rem;
292 }
293 }
294
295 .box-shadow {
296 box-shadow: none;
297 }
298
299 .ebg {
300 display: none;
257 } 301 }
258 } 302 }
......
...@@ -27,8 +27,9 @@ ...@@ -27,8 +27,9 @@
27 } 27 }
28 28
29 29
30 @media (max-width: 950px) { 30 @media (max-width: 1200px) {
31 .box { 31 .content {
32 width: 96%; 32 @include content-percent();
33 padding-bottom: 2rem;
33 } 34 }
34 } 35 }
......
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 // 提示栏
20 .alert {
21 @extend .bb;
22 display: flex;
23 align-items: center;
24 position: relative;
25 width: 100%;
26 border-radius: 10px;
27 border: solid 1px #dcdddd;
28 background-color: #f2f2f2;
29 margin: 0 auto 12px;
30 padding: 6px 36px;
31
32 .icon {
33 margin-right: 5px;
34 display: inline-block;
35 }
36
37 .btn {
38 color: $cOrange;
39 }
40
41 .close {
42 position: absolute;
43 right: 17px;
44 }
45 }
46
47 // 输入框
48 .ipt-wrap {
49 .ipt {
50 @extend .bb;
51 width: 100%;
52 height: 4.5rem;
53 border-radius: 4.5rem;
54 border: solid 1px #dcdddd !important;
55 background-color: #ffffff;
56 padding: 0 2rem;
57 flex: 1;
58 letter-spacing: 0.1rem;
59 }
60
61 .down-arrow {
62 position: absolute;
63 top: 2.2rem;
64 right: 2rem;
65 background-image: url('~@/assets/images/common/down-arrow.png');
66 width: 1rem;
67 height: .666667rem;
68 pointer-events: none;
69 cursor: default;
70 }
71
72 .eye {
73 position: absolute;
74 top: 1.2rem;
75 right: 2rem;
76 background-image: url('~@/assets/images/common/icon-eyes-off.png');
77 width: 27px;
78 height: 24px;
79 pointer-events: none;
80 cursor: default;
81 }
82
83 .eye-act {
84 background-image: url('~@/assets/images/common/icon-eyes-on.png');
85 }
86 }
87
88 .ipt:focus {
89 border-color: $cOrange !important;
90 }
91
92 .ipt.err {
93 border-color: $cOrange !important;
94 }
95
96
97 // 轮播
98 .swiper-pagination-bullet {
99 width: 1rem !important;
100 height: 1rem !important;
101 }
102
103 .swiper-pagination-bullet-active {
104 background: $cOrange !important;
105 }
106
107
108
109 @media (max-width: 768px) {
110 .alert {
111 padding: 4px 36px 4px 12px;
112
113 .icon {}
114 }
115 }
...@@ -114,3 +114,8 @@ ...@@ -114,3 +114,8 @@
114 color: #006441; 114 color: #006441;
115 border: solid 1px #006441; 115 border: solid 1px #006441;
116 } 116 }
117
118 @mixin content-percent($percent:4%) {
119 box-sizing: border-box;
120 padding: 0 $percent;
121 }
......
...@@ -13,6 +13,8 @@ ...@@ -13,6 +13,8 @@
13 13
14 @import "utils"; 14 @import "utils";
15 15
16 @import "common";
17
16 // 图标字体 18 // 图标字体
17 @import "fonticon"; 19 @import "fonticon";
18 20
......
...@@ -26,6 +26,10 @@ $fontSizeTitle:16px; ...@@ -26,6 +26,10 @@ $fontSizeTitle:16px;
26 $fontSize:14px; 26 $fontSize:14px;
27 $fontSizeSmall:12px; 27 $fontSizeSmall:12px;
28 28
29 $fontSizeTitle-M:17px;
30 $fontSize-M:14px;
31 $fontSizeSmall-M:12px;
32
29 // Color 33 // Color
30 $cOrange:#f05a23; 34 $cOrange:#f05a23;
31 $cFontGray: #4c4948; 35 $cFontGray: #4c4948;
......