Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
7a3175e1 by joe
Options

Merge branch 'master' of http://120.27.44.69/dev/pingan-life-index-pro 

# Conflicts:
#	src/components/clarms/clarms-plugins-material.vue
2 parents 78e78433 39f93384
Expand all
Inline Side-by-side
Showing 23 changed files with 623 additions and 567 deletions
...@@ -48,6 +48,7 @@ ...@@ -48,6 +48,7 @@
48 "eslint": "^5.16.0", 48 "eslint": "^5.16.0",
49 "eslint-plugin-vue": "^5.0.0", 49 "eslint-plugin-vue": "^5.0.0",
50 "node-sass": "^4.12.0", 50 "node-sass": "^4.12.0",
51 "postcss-loader": "^3.0.0",
51 "prerender-spa-plugin": "^3.4.0", 52 "prerender-spa-plugin": "^3.4.0",
52 "sass-loader": "^7.1.0", 53 "sass-loader": "^7.1.0",
53 "vue-template-compiler": "^2.6.10" 54 "vue-template-compiler": "^2.6.10"
......
...@@ -9,4 +9,4 @@ ...@@ -9,4 +9,4 @@
9 // selectorBlackList: [] 9 // selectorBlackList: []
10 // } 10 // }
11 // } 11 // }
12 // }
...\ No newline at end of file ...\ No newline at end of file
12 // }
......
...@@ -837,7 +837,7 @@ module.exports = { ...@@ -837,7 +837,7 @@ module.exports = {
837 register: "註冊", 837 register: "註冊",
838 login: "登入", 838 login: "登入",
839 t1: "一賬通以便我們為您提供更好的服務", 839 t1: "一賬通以便我們為您提供更好的服務",
840 label0: "索償人資訊", 840 label0: "索償人資料",
841 label1: "姓", 841 label1: "姓",
842 label2: "名", 842 label2: "名",
843 label3: "證件類型", 843 label3: "證件類型",
......
...@@ -839,7 +839,7 @@ module.exports = { ...@@ -839,7 +839,7 @@ module.exports = {
839 register: "注册", 839 register: "注册",
840 login: "登入", 840 login: "登入",
841 t1: "一账通以便我们为您提供更好的服务", 841 t1: "一账通以便我们为您提供更好的服务",
842 label0: "索偿人信息", 842 label0: "索偿人资料",
843 label1: "姓", 843 label1: "姓",
844 label2: "名", 844 label2: "名",
845 label3: "证件类型", 845 label3: "证件类型",
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 $borderRadius:8px;
4
3 .comp { 5 .comp {
4 font-size: 22px; 6 font-size: 22px;
7 margin: 0 auto;
5 } 8 }
6 9
7 input { 10 input {
8 padding: 0 2.083333rem; 11 padding: 0 2.083333rem;
9 color: #333333; 12 color: $cFontGray2;
10 } 13 }
11 14
12 .orange { 15 .orange {
...@@ -57,11 +60,9 @@ input { ...@@ -57,11 +60,9 @@ input {
57 60
58 .reservation-container-2 { 61 .reservation-container-2 {
59 @extend .bb; 62 @extend .bb;
60 border-radius: .666667rem;
61 // border: solid 2px $cOrange;
62 background-color: #ffffff; 63 background-color: #ffffff;
63 // padding: 1.666667rem 10rem 2.833333rem 10rem;
64 padding: 20px 100px 72px; 64 padding: 20px 100px 72px;
65 border-radius: 16px;
65 66
66 .clarms-border { 67 .clarms-border {
67 position: relative; 68 position: relative;
...@@ -72,7 +73,7 @@ input { ...@@ -72,7 +73,7 @@ input {
72 width: 482px; 73 width: 482px;
73 height: 62px; 74 height: 62px;
74 margin: 0 24px; 75 margin: 0 24px;
75 border-radius: 8px; 76 border-radius: $borderRadius;
76 77
77 .clarms-select { 78 .clarms-select {
78 width: 100%; 79 width: 100%;
...@@ -96,7 +97,6 @@ input { ...@@ -96,7 +97,6 @@ input {
96 97
97 color: #ff6839; 98 color: #ff6839;
98 text-align: center; 99 text-align: center;
99 // margin: 1.666667rem auto 0 auto;
100 display: flex; 100 display: flex;
101 align-items: center; 101 align-items: center;
102 justify-content: center; 102 justify-content: center;
...@@ -135,19 +135,17 @@ input { ...@@ -135,19 +135,17 @@ input {
135 cursor: default; 135 cursor: default;
136 136
137 span { 137 span {
138 color: $cDisabled; 138 // color: $cDisabled;
139 } 139 }
140 } 140 }
141 141
142 .check-item { 142 .check-item {
143 display: flex; 143 display: flex;
144 align-items: center; 144 margin-right: 76px;
145 margin-right: 60px;
146 // margin-bottom: .833333rem;
147 margin-bottom: 24px; 145 margin-bottom: 24px;
148 146
149 span { 147 span {
150 margin-left: 20px; 148 margin-left: 24px;
151 } 149 }
152 150
153 img { 151 img {
...@@ -184,10 +182,10 @@ input { ...@@ -184,10 +182,10 @@ input {
184 } 182 }
185 183
186 .bottom-tip { 184 .bottom-tip {
187 // font-size: .833333rem;
188 font-size: 18px; 185 font-size: 18px;
189 display: flex; 186 display: flex;
190 align-items: center; 187 align-items: center;
188 @extend .text-jtf;
191 189
192 span { 190 span {
193 // margin-left: 1.3rem; 191 // margin-left: 1.3rem;
...@@ -236,6 +234,7 @@ input { ...@@ -236,6 +234,7 @@ input {
236 cursor: pointer; 234 cursor: pointer;
237 color: #ff6839; 235 color: #ff6839;
238 font-weight: 600; 236 font-weight: 600;
237 text-decoration: underline;
239 } 238 }
240 239
241 240
...@@ -281,16 +280,14 @@ input { ...@@ -281,16 +280,14 @@ input {
281 padding: 2px; 280 padding: 2px;
282 background-image: linear-gradient(to right, #ffb31d, #f15907); 281 background-image: linear-gradient(to right, #ffb31d, #f15907);
283 height: 62px; 282 height: 62px;
284 border-radius: 8px; 283 border-radius: $borderRadius;
285 } 284 }
286 285
287 .ipt-date { 286 .ipt-date {
288 width: 100%; 287 width: 100%;
289 background-color: #ffffff; 288 background-color: #ffffff;
290 // padding-left: .833333rem;
291 // border-radius: 0;
292 height: 58px; 289 height: 58px;
293 border-radius: 8px; 290 border-radius: $borderRadius;
294 } 291 }
295 292
296 &-item { 293 &-item {
...@@ -365,13 +362,14 @@ input { ...@@ -365,13 +362,14 @@ input {
365 display: flex; 362 display: flex;
366 justify-content: flex-start; 363 justify-content: flex-start;
367 // padding: 0 $marginSmall; 364 // padding: 0 $marginSmall;
368 margin-bottom: 1.333333rem; 365 // margin-bottom: 1.333333rem;
369 366
370 .label { 367 .label {
371 @extend .bb; 368 @extend .bb;
372 align-items: center; 369 align-items: center;
373 min-width: 260px; 370 width: 215px;
374 padding-left: 70px; 371 padding-left: 52px;
372 padding-right: 5px;
375 letter-spacing: .25rem; 373 letter-spacing: .25rem;
376 font-size: 20px; 374 font-size: 20px;
377 375
...@@ -401,10 +399,8 @@ input { ...@@ -401,10 +399,8 @@ input {
401 height: 3rem; 399 height: 3rem;
402 display: flex; 400 display: flex;
403 align-items: center; 401 align-items: center;
404
405 } 402 }
406 403
407
408 .ipt2 { 404 .ipt2 {
409 // width: 100%; 405 // width: 100%;
410 border-bottom: 1px solid #ccc; 406 border-bottom: 1px solid #ccc;
...@@ -412,7 +408,8 @@ input { ...@@ -412,7 +408,8 @@ input {
412 display: flex; 408 display: flex;
413 align-items: center; 409 align-items: center;
414 margin-bottom: .833333rem; 410 margin-bottom: .833333rem;
415 width: 700px; 411 // width: 700px;
412 width: 100%;
416 } 413 }
417 414
418 // 长文本 415 // 长文本
...@@ -464,99 +461,65 @@ input { ...@@ -464,99 +461,65 @@ input {
464 } 461 }
465 } 462 }
466 463
467 @media (max-width: 1000px) { 464 @media (max-width: 1200px) {
468 .reservation-container-2 { 465 .comp {
469 padding: 1.666667rem 2rem 2.833333rem 2rem; 466 .reservation-container-2 {
470 } 467 padding: 20px 50px 72px;
471
472 .form {
473 &-item {
474 width: 100%;
475
476 .label {
477 min-width: 30%;
478 }
479
480 .ipt-wrap {
481 width: 70%;
482 }
483 }
484
485 &-item-2 {
486 .date-container {
487 width: 80%;
488 }
489 } 468 }
490 } 469 }
491 } 470 }
492 471
493 @media (max-width: 600px) { 472 @media (max-width: 1000px) {
494 473 .comp {
495 474 .reservation-container-2 {
496 .reservation-container-2 { 475 .title {
497 476 display: block;
498 .clarms-border {
499 min-width: auto;
500 margin: 0 .25rem;
501 }
502 }
503 477
504 .form { 478 .tt {
505 &-item { 479 margin: 8px auto;
506 width: 100%; 480 }
507 481
508 .label { 482 .clarms-border {
509 min-width: 30%; 483 width: auto;
484 }
510 } 485 }
511 486
512 .ipt-wrap {
513 width: 70%;
514 }
515 } 487 }
488 }
516 489
517 &-item2 { 490 }
518 display: block;
519 491
520 .ipt-wrap { 492 @media (max-width: 768px) {
521 margin: 0; 493 .comp {
522 } 494 .reservation-container-2 {
523 } 495 padding: 16px 16px;
524 496
525 &-item-2 { 497 .form-item-2 {
526 display: block; 498 flex-wrap: wrap;
527 499
528 .label { 500 .label {
529 width: 100%; 501 display: flex;
530 margin-bottom: 10px; 502 padding-left: 0;
531 } 503 width: auto;
504 }
532 505
533 .value { 506 .value {
534 width: 100%; 507 margin-top: 24px;
535 } 508 width: 100%;
536 509
537 .date-container { 510 .check-item {
538 width: 100%; 511 align-items: flex-start;
512 flex-wrap: wrap;
513 margin:0 0 24px;
514 width: 100%;
515 }
516 }
539 } 517 }
540 }
541
542 &-item3 {
543 display: block;
544 518
545 .ipt-wrap { 519 .date-container{
546 margin: 0;
547 width: 100%; 520 width: 100%;
548 } 521 }
549 } 522 }
550 } 523 }
551 524
552 .notice {
553 margin: 0;
554 }
555 }
556
557
558 @media (max-width: 400px) {
559 .reservation-container-2 {
560 padding: 1.666667rem 1rem;
561 }
562 } 525 }
......
...@@ -17,10 +17,10 @@ ...@@ -17,10 +17,10 @@
17 <template v-else> 17 <template v-else>
18 <div class="reservation-container-2"> 18 <div class="reservation-container-2">
19 <div class="title default-mt"> 19 <div class="title default-mt">
20 <span class="t1">{{$t('clarms.step2.label1')}}</span> 20 <div class="tt t1">{{$t('clarms.step2.label1')}}</div>
21 <div class="clarms-border"> 21 <div class="tt clarms-border">
22 <div class="down-arrow"></div> 22 <div class="down-arrow"></div>
23 <el-select style="text-align: center;" class="clarms-select" v-model="data.insuredIndex" :placeholder="$t('clarms.step2.placeHolder1')"> 23 <el-select style="text-align: center;" class="clarms-select" v-model="data.insuredIndex" :placeholder="''">
24 <template v-if="lan == 'en'"> 24 <template v-if="lan == 'en'">
25 <el-option v-for="(item,index) in insuredList" :key="index" :label="item.insuredNameEn" :value="index + 1"> 25 <el-option v-for="(item,index) in insuredList" :key="index" :label="item.insuredNameEn" :value="index + 1">
26 </el-option> 26 </el-option>
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
31 </template> 31 </template>
32 </el-select> 32 </el-select>
33 </div> 33 </div>
34 <span class="t1">{{$t('clarms.step2.label2')}}</span> 34 <div class="tt t1">{{$t('clarms.step2.label2')}}</div>
35 </div> 35 </div>
36 <hr v-if="data.insuredIndex"> 36 <hr v-if="data.insuredIndex">
37 <div class="gird-g form default-mt"> 37 <div class="gird-g form default-mt">
...@@ -138,6 +138,7 @@ ...@@ -138,6 +138,7 @@
138 </template> 138 </template>
139 </div> 139 </div>
140 <template v-if="data.contactDate"> 140 <template v-if="data.contactDate">
141 <!-- <template v-if="1>0"> -->
141 <hr class="hr2" v-if="data.amount > 0"> 142 <hr class="hr2" v-if="data.amount > 0">
142 <div class="bottom-tip orange mt20">{{$t('clarms.step2.label17')}}</div> 143 <div class="bottom-tip orange mt20">{{$t('clarms.step2.label17')}}</div>
143 <div class="bottom-tip gray mt10">{{$t('clarms.step2.tip1')}}</div> 144 <div class="bottom-tip gray mt10">{{$t('clarms.step2.tip1')}}</div>
...@@ -186,6 +187,7 @@ ...@@ -186,6 +187,7 @@
186 height: 58px; 187 height: 58px;
187 border-radius: 8px; 188 border-radius: 8px;
188 text-align: center; 189 text-align: center;
190 color: #58595b;
189 } 191 }
190 } 192 }
191 } 193 }
......
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
34 .modal { 34 .modal {
35 position: relative; 35 position: relative;
36 @extend .bb; 36 @extend .bb;
37 width: 1000px; 37 max-width: 1000px;
38 border-radius: 16px; 38 border-radius: 16px;
39 background-color: #ffffff; 39 background-color: #ffffff;
40 40
...@@ -75,68 +75,59 @@ ...@@ -75,68 +75,59 @@
75 } 75 }
76 } 76 }
77 77
78 .close {
79 cursor: pointer;
80 78
81 img {
82 width: 1.666667rem;
83 position: absolute;
84 right: -2.5rem;
85 top: -1.666667rem;
86 }
87 }
88 } 79 }
89 80
90 81 .close {
91 @media (max-width: 768px) { 82 position: absolute;
92 .modal { 83 right: -55px;
93 // height: 28.5rem; 84 top: -15px;
94 padding: 3rem 1.5rem; 85 cursor: pointer;
95 width: 80%; 86
96 height: auto; 87 img {
97 88 position: relative;
98 .content { 89 width: 30px;
99 padding: 5rem 4rem; 90 height: 30px;
100 }
101
102 .close {
103 display: none;
104 }
105 } 91 }
106 } 92 }
107 93
108 @media (max-width: 700px) { 94 @media (max-width: 1150px) {
109 .modal { 95 .border {
110 // height: 28.5rem; 96 width: 90%;
111 padding: 3rem 1.5rem; 97 }
112 width: 80%; 98 .close {
113 height: auto; 99 right: -15px;
114 100 top: -55px;
115 .content {
116 padding: 4rem 2rem;
117 }
118
119 .close {
120 display: none;
121 }
122 } 101 }
123 } 102 }
124 103
125 104 @media (max-width: 1000px) {
126 105 .border {
127 @media (max-width: 450px) {
128 .modal {
129 // height: 28.5rem;
130 padding: 3rem 1.5rem;
131 width: 90%; 106 width: 90%;
132 height: auto; 107 }
108 }
133 109
134 .close { 110 @media (max-width: 768px) {
135 display: none; 111 .border {
136 } 112 width: 80%;
137 113
138 .content { 114 .modal {
139 padding: 2rem .5rem; 115 .content {
116 flex-wrap: wrap;
117 padding: 32px 16px;
118
119 .info-icon {
120 margin: 0 auto;
121 width: 32%;
122 min-width: auto;
123 }
124
125 .message {
126 margin: 16px auto 0;
127 font-size: 20px;
128 }
129 }
140 } 130 }
131
141 } 132 }
142 } 133 }
......
...@@ -3,18 +3,18 @@ ...@@ -3,18 +3,18 @@
3 <div class="comp"> 3 <div class="comp">
4 <div @click="onOverLayHandler()" class="overlay"></div> 4 <div @click="onOverLayHandler()" class="overlay"></div>
5 <div class="border"> 5 <div class="border">
6 <div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div>
6 <div class="modal"> 7 <div class="modal">
7 <div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div>
8 <div class="content"> 8 <div class="content">
9 <div class="info-icon"> 9 <div class="info-icon">
10 <img src="@/assets/images/clarms/info.png"> 10 <img src="@/assets/images/clarms/info.png">
11 </div> 11 </div>
12 <div class="message" :class="{'lsp':locale != 'en'}"> 12 <div class="message" :class="{'lsp':locale != 'en'}">
13 <template v-if="type == 1"> 13 <template v-if="type == 1">
14 {{$t('clarms.step2.tip5')}} 14 {{$t('clarms.step2.tip5')}}
15 </template> 15 </template>
16 <template v-else> 16 <template v-else>
17 {{$t('clarms.step2.tip9')}} 17 {{$t('clarms.step2.tip9')}}
18 </template> 18 </template>
19 <span @click="toContact">{{$t('clarms.step2.tip6')}}</span> 19 <span @click="toContact">{{$t('clarms.step2.tip6')}}</span>
20 </div> 20 </div>
......
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
33 .modal { 33 .modal {
34 position: relative; 34 position: relative;
35 @extend .bb; 35 @extend .bb;
36 width: 1000px; 36 max-width: 1000px;
37 border-radius: 16px; 37 border-radius: 16px;
38 background-color: #ffffff; 38 background-color: #ffffff;
39 39
...@@ -75,68 +75,60 @@ ...@@ -75,68 +75,60 @@
75 letter-spacing: 0.7px; 75 letter-spacing: 0.7px;
76 } 76 }
77 77
78 .close { 78 }
79 cursor: pointer;
80 79
81 img { 80 .close {
82 width: 1.666667rem; 81 position: absolute;
83 position: absolute; 82 right: -55px;
84 right: -2.5rem; 83 top: -15px;
85 top: -1.666667rem; 84 cursor: pointer;
86 } 85
86 img {
87 position: relative;
88 width: 30px;
89 height: 30px;
87 } 90 }
88 } 91 }
89 92
90 93
91 @media (max-width: 800px) { 94 @media (max-width: 1150px) {
92 .modal { 95 .border {
93 // height: 28.5rem; 96 width: 90%;
94 padding: 3rem 1.5rem; 97 }
95 width: 80%; 98 .close {
96 height: auto; 99 right: -15px;
97 100 top: -55px;
98 .content {
99 padding: 5rem 4rem;
100 }
101
102 .close {
103 display: none;
104 }
105 } 101 }
106 } 102 }
107 103
108 @media (max-width: 700px) { 104 @media (max-width: 1000px) {
109 .modal { 105 .border {
110 // height: 28.5rem; 106 width: 90%;
111 padding: 3rem 1.5rem;
112 width: 80%;
113 height: auto;
114
115 .content {
116 padding: 4rem 2rem;
117 }
118
119 .close {
120 display: none;
121 }
122 } 107 }
123 } 108 }
124 109
110 @media (max-width: 768px) {
111 .border {
112 width: 80%;
125 113
126 114 .modal {
127 @media (max-width: 450px) { 115 .content {
128 .modal { 116 flex-wrap: wrap;
129 // height: 28.5rem; 117 padding: 32px 16px;
130 padding: 3rem 1.5rem; 118
131 width: 90%; 119 .info-icon {
132 height: auto; 120 margin: 0 auto;
133 121 width: 32%;
134 .close { 122 min-width: auto;
135 display: none; 123 }
124
125 .message{
126 margin: 16px auto 0;
127 font-size: 20px;
128 }
129 }
136 } 130 }
137 131
138 .content {
139 padding: 2rem .5rem;
140 }
141 } 132 }
142 } 133 }
134
......
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
3 <div class="comp"> 3 <div class="comp">
4 <div @click="onOverLayHandler()" class="overlay"></div> 4 <div @click="onOverLayHandler()" class="overlay"></div>
5 <div class="border"> 5 <div class="border">
6 <div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div>
6 <div class="modal"> 7 <div class="modal">
7 <div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div>
8 <div class="content"> 8 <div class="content">
9 <div class="info-icon"> 9 <div class="info-icon">
10 <img src="@/assets/images/clarms/suc.png"> 10 <img src="@/assets/images/clarms/suc.png">
......
...@@ -8,8 +8,8 @@ $borderSize: 8px; ...@@ -8,8 +8,8 @@ $borderSize: 8px;
8 8
9 .clarms-container { 9 .clarms-container {
10 box-sizing: border-box; 10 box-sizing: border-box;
11 padding: .166667rem; 11 padding: 2px;
12 border-radius: .416667rem; 12 border-radius: $borderSize;
13 background-image: linear-gradient(to right, #ffb31d, #f15907); 13 background-image: linear-gradient(to right, #ffb31d, #f15907);
14 14
15 .clarms-box { 15 .clarms-box {
...@@ -17,7 +17,7 @@ $borderSize: 8px; ...@@ -17,7 +17,7 @@ $borderSize: 8px;
17 position: relative; 17 position: relative;
18 width: 100%; 18 width: 100%;
19 height: 100%; 19 height: 100%;
20 border-radius: .416667rem; 20 border-radius: $borderSize;
21 background: #fff; 21 background: #fff;
22 // padding: 40px 50px 20px 40px; 22 // padding: 40px 50px 20px 40px;
23 padding: 40px 0 20px; 23 padding: 40px 0 20px;
...@@ -82,7 +82,7 @@ $borderSize: 8px; ...@@ -82,7 +82,7 @@ $borderSize: 8px;
82 } 82 }
83 83
84 .clarms-t2 { 84 .clarms-t2 {
85 color: #58595b; 85 color: $cFontGray2;
86 letter-spacing: 0.9px; 86 letter-spacing: 0.9px;
87 font-size: 18px; 87 font-size: 18px;
88 margin-top: 6px; 88 margin-top: 6px;
...@@ -172,7 +172,7 @@ $borderSize: 8px; ...@@ -172,7 +172,7 @@ $borderSize: 8px;
172 172
173 .clarms-upload-tips { 173 .clarms-upload-tips {
174 font-size: 1rem; 174 font-size: 1rem;
175 color: #58595b; 175 color: $cFontGray2;
176 text-align: center; 176 text-align: center;
177 } 177 }
178 } 178 }
...@@ -184,54 +184,78 @@ $borderSize: 8px; ...@@ -184,54 +184,78 @@ $borderSize: 8px;
184 } 184 }
185 } 185 }
186 186
187 187 @media (max-width: 768px) {
188 @media (max-width: 800px) {
189
190 .clarms-container { 188 .clarms-container {
191 .clarms-box { 189 .clarms-box {
192 .clarms-header { 190 padding: 40px 12px 20px 12px;
193 flex-direction: column;
194 191
195 .clarms-header-2 { 192 .clarms-header {
196 align-self: flex-start; 193 flex-wrap: wrap;
197 } 194 padding: 0;
198 195 }
199 .clarms-btn {
200 align-self: flex-end;
201 margin-top: .833333rem;
202 }
203 196
204 .clarms-icon { 197 .clarms-btn{
205 width: 4.166667rem; 198 margin: 20px 0;
206 } 199 width: 100%;
207 } 200 }
208 201
209 .clarms-title-container { 202 .line {
210 margin-top: .833333rem; 203 padding: 0;
211 margin-left: .833333rem;
212 } 204 }
213 } 205 }
206
214 } 207 }
215 } 208 }
216 209
217 @media (max-width: 600px) {
218 .clarms-container .clarms-box .clarms-title-container .clarms-t1 {
219 font-size: 1.333333rem;
220 }
221 210
222 .clarms-container .clarms-box .clarms-title-container .clarms-t2 {
223 font-size: 1.333333rem;
224 }
225 }
226 211
212 // @media (max-width: 800px) {
227 213
214 // .clarms-container {
215 // .clarms-box {
216 // .clarms-header {
217 // flex-direction: column;
228 218
229 @media (max-width: 500px) { 219 // .clarms-header-2 {
230 .clarms-container .clarms-box .clarms-title-container .clarms-t1 { 220 // align-self: flex-start;
231 font-size: 1rem; 221 // }
232 }
233 222
234 .clarms-container .clarms-box .clarms-title-container .clarms-t2 { 223 // .clarms-btn {
235 font-size: 1rem; 224 // align-self: flex-end;
236 } 225 // margin-top: .833333rem;
237 } 226 // }
227
228 // .clarms-icon {
229 // width: 4.166667rem;
230 // }
231 // }
232
233 // .clarms-title-container {
234 // margin-top: .833333rem;
235 // margin-left: .833333rem;
236 // }
237 // }
238 // }
239 // }
240
241 // @media (max-width: 600px) {
242 // .clarms-container .clarms-box .clarms-title-container .clarms-t1 {
243 // font-size: 1.333333rem;
244 // }
245
246 // .clarms-container .clarms-box .clarms-title-container .clarms-t2 {
247 // font-size: 1.333333rem;
248 // }
249 // }
250
251
252
253 // @media (max-width: 500px) {
254 // .clarms-container .clarms-box .clarms-title-container .clarms-t1 {
255 // font-size: 1rem;
256 // }
257
258 // .clarms-container .clarms-box .clarms-title-container .clarms-t2 {
259 // font-size: 1rem;
260 // }
261 // }
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
14 color: #747474; 14 color: #747474;
15 } 15 }
16 16
17 17 $borderRadius:8px;
18 18
19 .submit-btn { 19 .submit-btn {
20 background: url("~@assets/images/vhis/vhis-btn.png"); 20 background: url("~@assets/images/vhis/vhis-btn.png");
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
33 33
34 .reservation-container { 34 .reservation-container {
35 @extend .bb; 35 @extend .bb;
36 border-radius: .666667rem; 36 border-radius: $borderRadius;
37 // border: solid 2px $cOrange; 37 // border: solid 2px $cOrange;
38 background-color: #ffffff; 38 background-color: #ffffff;
39 // padding: 2.666667rem 10rem 2.833333rem 10rem; 39 // padding: 2.666667rem 10rem 2.833333rem 10rem;
...@@ -119,7 +119,7 @@ ...@@ -119,7 +119,7 @@
119 width: 100%; 119 width: 100%;
120 background-color: #ffffff; 120 background-color: #ffffff;
121 height: 48px; 121 height: 48px;
122 border-radius: 8px; 122 border-radius: $borderRadius;
123 } 123 }
124 124
125 &-item { 125 &-item {
...@@ -151,7 +151,7 @@ ...@@ -151,7 +151,7 @@
151 padding: 2px; 151 padding: 2px;
152 background-image: linear-gradient(to right, #ffb31d, #f15907); 152 background-image: linear-gradient(to right, #ffb31d, #f15907);
153 height: 52px; 153 height: 52px;
154 border-radius: 8px; 154 border-radius: $borderRadius;
155 } 155 }
156 156
157 // input和下拉 157 // input和下拉
...@@ -166,7 +166,7 @@ ...@@ -166,7 +166,7 @@
166 width: 100%; 166 width: 100%;
167 background-color: #ffffff; 167 background-color: #ffffff;
168 height: 48px; 168 height: 48px;
169 border-radius: 8px; 169 border-radius: $borderRadius;
170 170
171 } 171 }
172 172
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
6 <span class="pointer" @click="toLoginPage">{{$t('clarms.step1.login')}}</span> 6 <span class="pointer" @click="toLoginPage">{{$t('clarms.step1.login')}}</span>
7 </u> 7 </u>
8 <span v-if="$i18n.locale == 'en'">&nbsp;</span>{{$t('clarms.step1.t1')}}</div> 8 <span v-if="$i18n.locale == 'en'">&nbsp;</span>{{$t('clarms.step1.t1')}}</div>
9 <div class="form-name default-mt"> {{$t('clarms.step1.label0')}}</div> 9 <div class="form-name default-mt">{{$t('clarms.step1.label0')}}</div>
10 <div class="gird-g form default-mt"> 10 <div class="gird-g form default-mt">
11 <div class="form-item"> 11 <div class="form-item">
12 <div class="label"> 12 <div class="label">
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
38 <div class="ipt-wrap"> 38 <div class="ipt-wrap">
39 <div class="down-arrow"></div> 39 <div class="down-arrow"></div>
40 <div class="cont"> 40 <div class="cont">
41 <el-select class="ipt" v-model="data.idType" :placeholder="$t('clarms.step2.placeHolder1')"> 41 <el-select class="ipt" v-model="data.idType" :placeholder="''">
42 <el-option v-for="(item, index) in policyIdTypeList" :key="index" :label="item.n" :value="item.v"></el-option> 42 <el-option v-for="(item, index) in policyIdTypeList" :key="index" :label="item.n" :value="item.v"></el-option>
43 </el-select> 43 </el-select>
44 </div> 44 </div>
......
...@@ -20,73 +20,133 @@ ...@@ -20,73 +20,133 @@
20 background: rgba($color: #000000, $alpha: 0.7); 20 background: rgba($color: #000000, $alpha: 0.7);
21 } 21 }
22 22
23 .bold {
24 font-weight: 600;
25 letter-spacing: .083333rem;
26 }
23 27
24 .orange { 28 .orange {
25 color: #ff6839; 29 color: $cOrange2;
26 } 30 }
27 31
28 .bold { 32 .border {
29 font-weight: 600; 33 position: relative;
30 letter-spacing: .083333rem; 34 @extend .bb;
35 @extend .fcc;
36 padding: 2px;
37 background-image: linear-gradient(to right, #ffb31d, #f15907);
38 border-radius: 16px;
31 } 39 }
32 40
33 .modal { 41 .modal {
34 position: relative; 42 position: relative;
35 @extend .bb; 43 @extend .bb;
36 width: 63.333333rem; 44 width: 1200px;
37 // height: 28.5rem; 45 max-height: 80vh;
38 border-radius: .8333rem; 46 border-radius: 16px;
39 background-color: #ffffff; 47 background-color: #ffffff;
40 padding: 3.5rem 2rem 2.5rem; 48 padding: 80px 0;
41 border: .083333rem solid #ff6839; 49 font-size: 36px;
50 overflow-x: hidden;
51 overflow-y: auto;
52 color: $cFontGray2;
42 53
43 .title { 54 .content {
44 letter-spacing: .083333rem ; 55 max-width: 1000px;
45 font-size: 1.666667rem; 56 margin: 0 auto;
46 font-weight: 900;
47 color: #ff6839;
48 } 57 }
49 58
50 .content { 59 .statement {
51 width: 70%; 60 @extend .bb;
52 margin: auto; 61 padding-left: 40px;
62 margin: 80px auto 0;
63 }
64
65 .form {
66 @extend .bb;
67 padding-left: 40px;
68 margin: 80px auto 0;
69
70 &-item {
71 display: flex;
72 justify-self: center;
73 }
74 }
75
76 .bottom-wrap {
77 margin: 80px auto 0;
78 }
79
80 .title {
81 font-size: 48px;
82 color: $cOrange2;
83 font-weight: bold;
84 letter-spacing: 2.45px;
53 } 85 }
54 86
55 .desc { 87 .desc {
56 text-align: left; 88 text-align: left;
57 line-height: 2.2rem ; 89 line-height: 1.5;
58 min-width: 7.5rem ; 90 letter-spacing: 3.6px;
59 91
60 span { 92 span {
61 margin: 0 .166667rem ; 93 margin: 0 2px;
62 } 94 }
63 } 95 }
64 96
65 .value { 97 .value {
66 text-align: left; 98 text-align: left;
67 line-height: 2rem ; 99 line-height: 1.5;
100 letter-spacing: 3.6px;
68 } 101 }
69 102
70 hr { 103
71 border-top: .083333rem solid #e4e4e5; 104 .line1 {
72 width: 70%; 105 margin: 80px auto 0;
73 margin: auto;
74 } 106 }
75 107
76 .download-btn {
77 cursor: pointer;
78 border: 1px solid #ff6839;
79 border-radius: .416667rem;
80 padding: .5rem;
81 margin: 2rem auto;
82 width: 35rem;
83
84 img {
85 max-height: 2.083333rem;
86 }
87 108
88 .btn-name { 109 hr {
89 margin-left: 1.666667rem ; 110 border-top: 1px solid #e4e4e5;
111 margin: 0 auto;
112 max-width: 1000px;
113 }
114
115 .download {
116 margin: 44px auto 0;
117 text-align: center;
118 font-size: 28px;
119
120 &-item {
121 @extend .bb;
122 @extend .fcc;
123 margin: 0 auto 24px;
124 max-width: 738px;
125 height: 81px;
126 line-height: 81px;
127 padding: 2px;
128 border-radius: 8px;
129 cursor: pointer;
130 background-image: linear-gradient(to right, #ffb31d, #f15907);
131
132 .cont {
133 @extend .bb;
134 display: flex;
135 align-items: center;
136 justify-content: center;
137 width: 100%;
138 height: 100%;
139 background-color: #ffffff;
140 letter-spacing: 1.4px;
141 font-weight: bold;
142 border-radius: 8px;
143
144 .icon {
145 height: 60px;
146 margin-right: 64px;
147 }
148
149 }
90 } 150 }
91 } 151 }
92 152
...@@ -104,163 +164,160 @@ ...@@ -104,163 +164,160 @@
104 margin-top: 1rem; 164 margin-top: 1rem;
105 } 165 }
106 166
167 .btn-wrap {
168 margin: 40px auto 0;
169 display: flex;
170 justify-content: center;
171 }
172
107 .submit-btn { 173 .submit-btn {
108 background: url("~@assets/images/vhis/vhis-btn.png"); 174 background: url("~@assets/images/vhis/vhis-btn.png");
109 background-size: 100% 100%; 175 background-size: 100% 100%;
110 background-repeat: no-repeat; 176 background-repeat: no-repeat;
111 width: 14rem; 177 width: 405px;
112 height: 2rem; 178 height: 60px;
113 line-height: 2rem; 179 line-height: 60px;
114 color: white; 180 color: #ffffff;
115 font-weight: 600; 181 font-weight: bold;
116 cursor: pointer; 182 cursor: pointer;
183 letter-spacing: 1.4px;
184 font-size: 28px;
185 margin: 0 25px;
117 } 186 }
118 187
119 .btn-margin { 188 .contact {
120 margin-left: 2rem !important; 189 font-size: 28px;
121 } 190 margin: 45px auto 0;
191 font-weight: bold;
122 192
123 .close { 193 span{
124 cursor: pointer; 194 text-decoration: underline;
125 img {
126 width: 1.666667rem ;
127 position: absolute;
128 right: -2.5rem;
129 top: -1.666667rem ;
130 } 195 }
131 } 196 }
132 } 197 }
133 198
134 .flex-left { 199 .close {
135 display: flex; 200 position: absolute;
136 justify-content: flex-start; 201 right: -55px;
137 align-items: flex-start; 202 top: -15px;
203 cursor: pointer;
204
205 img {
206 position: relative;
207 width: 30px;
208 height: 30px;
209 }
138 } 210 }
139 211
212
140 .hide { 213 .hide {
141 display: none; 214 display: none;
142 } 215 }
143 216
144 @media (max-width: 1200px) { 217 @media (max-width: 1350px) {
145 .comp { 218 .close {
146 position: fixed; 219 right: -15px;
220 top: -55px;
147 } 221 }
222 }
148 223
149 .modal { 224 @media (max-width: 1250px) {
150 width: 70%; 225 .border {
151 position: absolute; 226 width: 90%;
227 }
228 }
152 229
153 .content { 230 @media (max-width: 1200px) {
154 width: 80%; 231 .border {
155 margin: auto; 232 width: 90%;
233
234 .modal {
235 padding: 80px 20px;
156 } 236 }
237 }
238 }
157 239
158 240
159 .download-btn{ 241 @media (max-width: 1000px) {
160 width: 80%; 242 .border {
161 } 243 width: 90%;
162 244
163 .default-mt { 245 .modal {
164 margin-top: 2rem; 246 padding: 80px 20px;
165 }
166 247
167 .half-mt { 248 .statement {
168 margin-top: 1rem; 249 padding-left: 0;
169 } 250 }
170 251
171 hr { 252 .form {
172 border-top: .083333rem solid #e4e4e5; 253 padding-left: 0;
173 width: 80%; 254 }
174 margin: auto;
175 } 255 }
176 } 256 }
177
178
179 } 257 }
180 258
181 259
182 @media (max-width: 768px) { 260 @media (max-width: 768px) {
183 .modal { 261 .border {
184 // height: 28.5rem;
185 padding: 3rem 1.5rem;
186 width: 80%;
187 height: auto;
188
189 .content {
190 width: 90%;
191 margin: auto;
192 }
193 262
194 .download-btn { 263 .modal {
195 margin: 1rem auto; 264 padding: 16px 16px;
196 width: 90%; 265 font-size: 18px;
197 }
198 266
199 hr { 267 .title {
200 border-top: .083333rem solid #e4e4e5; 268 font-size: 28px;
201 width: 90% ; 269 }
202 margin: auto;
203 }
204 270
205 .default-mt { 271 .statement {
206 margin-top: 1.5rem ; 272 margin: 24px auto 0;
207 } 273 }
208 274
209 .download-btn{ 275 .form {
210 width: 100%; 276 margin: 24px auto 0;
211 } 277 }
212 278
213 .submit-btn { 279 .bottom-wrap {
214 background-size: 100% 100% ; 280 margin: 24px auto 0;
215 width: 10rem ;
216 }
217
218 .btn-margin {
219 margin-left: 1.666667rem ;
220 }
221 }
222 }
223 281
282 .btn-wrap {
283 margin: 16px auto 0;
284 flex-wrap: wrap;
224 285
225 @media (max-width: 400px) { 286 .submit-btn{
226 .modal { 287 height: 48px;
227 // height: 28.5rem; 288 line-height: 48px;
228 padding: 3rem 1.5rem; 289 font-size: 18px;
229 width: 90%; 290 margin: 8px auto;
230 height: auto; 291 }
292 }
231 293
232 .close { 294 .contact{
233 display: none; 295 margin: 16px auto 0;
234 } 296 font-size: 18px;
297 }
298 }
235 299
236 .content { 300 .download {
237 width: 100%; 301 margin: 24px auto 0;
238 margin: auto; 302 font-size: 18px;
239 }
240 303
241 .download-btn { 304 .download-item {
242 margin: 1rem auto; 305 height: 52px;
243 width: 100%; 306 line-height: 52px;
244 }
245 307
246 hr { 308 .icon {
247 border-top: 1px solid #e4e4e5; 309 height: 32px;
248 width: 100% ; 310 margin-right: 24px;
249 margin: auto; 311 }
250 } 312 }
251 313
252 .default-mt {
253 margin-top: 1.5rem ;
254 }
255 314
315 }
256 316
257 .submit-btn { 317 .line1 {
258 background-size: 100% 100% ; 318 margin: 24px auto 0;
259 width: 10rem ; 319 }
260 } 320 }
261 321
262 .btn-margin {
263 margin-left: 1.666667rem ;
264 }
265 } 322 }
266 }
...\ No newline at end of file ...\ No newline at end of file
323 }
......
...@@ -2,37 +2,74 @@ ...@@ -2,37 +2,74 @@
2 <template> 2 <template>
3 <div class="comp" v-if="policyDetail && showPolicy"> 3 <div class="comp" v-if="policyDetail && showPolicy">
4 <div @click="handleIgnorePolicy" class="overlay"></div> 4 <div @click="handleIgnorePolicy" class="overlay"></div>
5 <div class="modal"> 5 <div class="border">
6 <div class="close" @click="onOverLayHandler()"><img src="@/assets/images/vhis/close.png"></div> 6 <div class="close" @click="onOverLayHandler()"><img src="@/assets/images/vhis/close.png"></div>
7 <div class="title">{{$t('vhis.title')}}</div> 7 <div class="modal">
8 <div class="content default-mt"> 8 <div class="content">
9 <div class="desc orange">{{$t('vhis.desc1')}}</div> 9 <div class="title">{{$t('vhis.title')}}</div>
10 <div class="desc">{{$t('vhis.desc2')}}</div> 10 <div class="statement">
11 <div class="desc">{{$t('vhis.desc3')}}</div> 11 <div class="desc orange">{{$t('vhis.desc1')}}</div>
12 <div class="desc">{{$t('vhis.desc4')}}</div> 12 <div class="desc">{{$t('vhis.desc2')}}</div>
13 <div class="desc">{{$t('vhis.desc5')}}</div> 13 <div class="desc">{{$t('vhis.desc3')}}</div>
14 </div> 14 <div class="desc">{{$t('vhis.desc4')}}</div>
15 <hr class="default-mt"> 15 <div class="desc">{{$t('vhis.desc5')}}</div>
16 <div class="content default-mt"> 16 </div>
17 <div class="flex-left"><div class="desc">{{$t('vhis.label1')}}：</div><div class="value orange">{{policyDetail.policyCode}}</div></div> 17 <hr class="line1">
18 <div class="flex-left"><div class="desc">{{$t('vhis.label2')}}：</div><div class="value">{{policyDetail.productName}}</div></div> 18 <div class="form ">
19 <div class="flex-left"><div class="desc">{{$t('vhis.label3')}}：</div><div class="value"><span class="orange">{{policyDetail.ymd1}}</span>{{$t('vhis.ymd1')}}<span class="orange">{{policyDetail.ymd2}}</span>{{$t('vhis.ymd2')}}<span class="orange">{{policyDetail.ymd2}}</span>{{$t('vhis.ymd3')}}</div></div> 19 <div class="form-item">
20 <div class="flex-left"><div class="desc">{{$t('vhis.label4')}}：</div><div class="value">{{policyDetail.clientNameCn}}</div></div> 20 <div class="desc">{{$t('vhis.label1')}}：</div>
21 <div class="flex-left"><div class="desc">{{$t('vhis.label5')}}：</div><div class="value">{{policyDetail.insuredNameCn}}</div></div> 21 <div class="value orange">{{policyDetail.policyCode}}</div>
22 </div>
23 <div class="form-item">
24 <div class="desc">{{$t('vhis.label2')}}：</div>
25 <div class="value orange">{{policyDetail.productName}}</div>
26 </div>
27 <div class="form-item">
28 <div class="desc">{{$t('vhis.label3')}}：</div>
29 <div class="value">
30 <span class="orange">{{policyDetail.ymd1}}</span>{{$t('vhis.ymd1')}}
31 <span class="orange">{{policyDetail.ymd2}}</span>{{$t('vhis.ymd2')}}
32 <span class="orange">{{policyDetail.ymd2}}</span>{{$t('vhis.ymd3')}}
33 </div>
34 </div>
35 <div class="form-item">
36 <div class="desc">{{$t('vhis.label4')}}：</div>
37 <div class="value orange">{{policyDetail.clientNameCn}}</div>
38 </div>
39 <div class="form-item">
40 <div class="desc">{{$t('vhis.label5')}}：</div>
41 <div class="value orange">{{policyDetail.insuredNameCn}}</div>
42 </div>
22 43
23 <div class="download-btn flex-center" @click="downloadPolicy"><img src="@/assets/images/vhis/vhis-download.png"><span class="btn-name">{{$t('vhis.btn1')}}</span></div> 44 <div class="download">
24 </div> 45 <div class="border2 download-item" @click="downloadPolicy">
25 <hr class="default-mt"> 46 <div class="cont">
26 <div class="content default-mt"> 47 <img class="icon" src="@/assets/images/vhis/vhis-download.png"> {{$t('vhis.btn1')}}
27 <span class="desc">{{$t('vhis.tip1')}}<span class="orange">{{policyDetail.clientNameCn}}</span>{{$t('vhis.tip2')}}<span class="orange">{{policyDetail.nowYmd1}}</span>{{$t('vhis.ymd1')}}<span class="orange">{{policyDetail.nowYmd2}}</span>{{$t('vhis.ymd2')}}<span class="orange">{{policyDetail.nowYmd3}}</span>{{$t('vhis.ymd3')}}{{$t('vhis.tip3')}}</span> 48 </div>
28 <div class="flex-center half-mt"> 49 </div>
29 <div class="submit-btn" @click="handleConfirmPolicy" >{{$t('vhis.btn2')}}</div> 50 </div>
30 <div class="submit-btn btn-margin" @click="handleIgnorePolicy" >{{$t('vhis.btn3')}}</div> 51 </div>
31 </div> 52 <hr class="line1">
32 <div class="flex-center half-mt pointer" @click="toContact()"><span class="orange bold">{{$t('vhis.tip4')}}</span></div> 53 <div class="bottom-wrap ">
33 </div> 54 <span class="desc">{{$t('vhis.tip1')}}
34 </div> 55 <span class="orange">{{policyDetail.clientNameCn}}</span>{{$t('vhis.tip2')}}
35 </div> 56 <span class="orange">{{policyDetail.nowYmd1}}</span>{{$t('vhis.ymd1')}}
57 <span class="orange">{{policyDetail.nowYmd2}}</span>{{$t('vhis.ymd2')}}
58 <span class="orange">{{policyDetail.nowYmd3}}</span>{{$t('vhis.ymd3')}}{{$t('vhis.tip3')}}</span>
59 <div class="btn-wrap">
60 <div class="submit-btn" @click="handleConfirmPolicy">{{$t('vhis.btn2')}}</div>
61 <div class="submit-btn " @click="handleIgnorePolicy">{{$t('vhis.btn3')}}</div>
62 </div>
63 <div class="flex-center pointer contact" @click="toContact()">
64 <span class="orange bold">{{$t('vhis.tip4')}}</span>
65 </div>
66 </div>
67 </div>
68
69 </div>
70 </div>
71
72 </div>
36 </template> 73 </template>
37 74
38 <script src="./vhis-modal.js"></script> 75 <script src="./vhis-modal.js"></script>
......
...@@ -2,8 +2,9 @@ ...@@ -2,8 +2,9 @@
2 2
3 $borderSize:8px; 3 $borderSize:8px;
4 4
5 .page{ 5 .page {
6 min-height: 480px; 6 min-height: 480px;
7 color: $cFontGray2;
7 } 8 }
8 9
9 .content { 10 .content {
...@@ -17,13 +18,14 @@ $borderSize:8px; ...@@ -17,13 +18,14 @@ $borderSize:8px;
17 @extend .bb; 18 @extend .bb;
18 @extend .fcc; 19 @extend .fcc;
19 padding: 2px; 20 padding: 2px;
20 border-radius: $borderSize; 21 border-radius: 16px;
22 // min-height: 480px;
21 23
22 &-cont { 24 &-cont {
23 width: 100%; 25 width: 100%;
24 height: 100%; 26 height: 100%;
25 background-color: #ffffff; 27 background-color: #ffffff;
26 border-radius: $borderSize; 28 border-radius: 16px;
27 } 29 }
28 } 30 }
29 31
...@@ -60,7 +62,7 @@ input { ...@@ -60,7 +62,7 @@ input {
60 62
61 .cont { 63 .cont {
62 position: relative; 64 position: relative;
63 width: 1200px; 65 max-width: 1200px;
64 margin: 0 auto; 66 margin: 0 auto;
65 67
66 .tt { 68 .tt {
...@@ -92,10 +94,11 @@ input { ...@@ -92,10 +94,11 @@ input {
92 94
93 .reservation-container { 95 .reservation-container {
94 @extend .bb; 96 @extend .bb;
95 border-radius: .666667rem; 97 // border-radius: .666667rem;
96 // border: solid 2px $cOrange; 98 // border: solid 2px $cOrange;
97 background-color: #ffffff;
98 // padding: 2.666667rem 10rem 2.833333rem 10rem; 99 // padding: 2.666667rem 10rem 2.833333rem 10rem;
100 background-color: #ffffff;
101 border-radius: 16px;
99 102
100 .title { 103 .title {
101 font-size: 1.333333rem; 104 font-size: 1.333333rem;
...@@ -139,10 +142,8 @@ input { ...@@ -139,10 +142,8 @@ input {
139 142
140 .reservation-container-2 { 143 .reservation-container-2 {
141 @extend .bb; 144 @extend .bb;
142 border-radius: .666667rem;
143 // border: solid .083333rem $cOrange;
144 background-color: #ffffff; 145 background-color: #ffffff;
145 padding: 1.666667rem 10rem 2.833333rem 10rem; 146 border-radius: 16px;
146 147
147 .title { 148 .title {
148 font-size: 1.333333rem; 149 font-size: 1.333333rem;
...@@ -489,121 +490,96 @@ input { ...@@ -489,121 +490,96 @@ input {
489 } 490 }
490 } 491 }
491 492
492 // .submit-btn {
493 // width: 13.583333rem;
494 // height: 4.083333rem;
495 // margin: 2.5rem auto;
496 // line-height: 4.083333rem;
497 // box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
498 // background-blend-mode: soft-light, ;
499 // background-image: linear-gradient(to bottom, #ec6429, #ec6429), linear-gradient(to top, #000000, #ffffff);
500 // // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
501 // text-align: center;
502 // font-size: $fontSize;
503 // letter-spacing: .129167rem;
504 // color: #ffffff;
505 // border-radius: 3.5rem;
506 // cursor: pointer;
507 // border: none;
508 // color: #ffffff;
509 // background-color: $cOrange;
510 // box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
511 // background-blend-mode: soft-light, ;
512 // background-image: linear-gradient(to bottom, #ec6429, #ec6429), linear-gradient(to top, #000000, #ffffff);
513 // // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
514 // }
515 493
516 494
517 @media (max-width: 1200px) { 495 @media (max-width: 1200px) {
518 .mobile-margin { 496 .content {
519 margin-top: 2.5rem; 497 width: 96%;
520 }
521 }
522
523 @media (max-width: 1000px) {
524 .reservation-container-2 {
525 padding: 1.666667rem 2rem 2.833333rem 2rem;
526 }
527
528 .form {
529 &-item {
530 width: 100%;
531
532 .label {
533 min-width: 30%;
534 }
535
536 .ipt-wrap {
537 width: 70%;
538 }
539 }
540
541 &-item-2 {
542 .date-container {
543 width: 80%;
544 }
545 }
546 } 498 }
547 } 499 }
548 500
549 @media (max-width: 600px) { 501 // @media (max-width: 1000px) {
550 .reservation-container { 502 // .reservation-container-2 {}
551 padding: 2.666667rem 2rem 2.833333rem 2rem;
552 }
553
554 .form {
555 &-item {
556 width: 100%;
557 503
558 .label { 504 // .form {
559 min-width: 30%; 505 // &-item {
560 } 506 // width: 100%;
561 507
562 .ipt-wrap { 508 // .label {
563 width: 70%; 509 // min-width: 30%;
564 } 510 // }
565 }
566 511
567 &-item2 { 512 // .ipt-wrap {
568 display: block; 513 // width: 70%;
514 // }
515 // }
569 516
570 .ipt-wrap { 517 // &-item-2 {
571 margin: 0; 518 // .date-container {
572 } 519 // width: 80%;
573 } 520 // }
574 521 // }
575 &-item-2 { 522 // }
576 .label { 523 // }
577 width: 30%;
578 }
579
580 .value {
581 width: 70%;
582 }
583
584 .date-container {
585 width: 100%;
586 }
587 }
588
589 &-item3 {
590 display: block;
591
592 .ipt-wrap {
593 margin: 0;
594 width: 100%;
595 }
596 }
597 }
598 524
599 .notice { 525 // @media (max-width: 600px) {
600 margin: 0; 526 // .reservation-container {
601 } 527 // padding: 2.666667rem 2rem 2.833333rem 2rem;
602 } 528 // }
529
530 // .form {
531 // &-item {
532 // width: 100%;
533
534 // .label {
535 // min-width: 30%;
536 // }
537
538 // .ipt-wrap {
539 // width: 70%;
540 // }
541 // }
542
543 // &-item2 {
544 // display: block;
545
546 // .ipt-wrap {
547 // margin: 0;
548 // }
549 // }
550
551 // &-item-2 {
552 // .label {
553 // width: 30%;
554 // }
555
556 // .value {
557 // width: 70%;
558 // }
559
560 // .date-container {
561 // width: 100%;
562 // }
563 // }
564
565 // &-item3 {
566 // display: block;
567
568 // .ipt-wrap {
569 // margin: 0;
570 // width: 100%;
571 // }
572 // }
573 // }
574
575 // .notice {
576 // margin: 0;
577 // }
578 // }
603 579
604 580
605 @media (max-width: 400px) { 581 // @media (max-width: 400px) {
606 .reservation-container-2 { 582 // .reservation-container-2 {
607 padding: 1.666667rem 1rem; 583 // // padding: 1.666667rem 1rem;
608 } 584 // }
609 } 585 // }
......
...@@ -14,7 +14,6 @@ ...@@ -14,7 +14,6 @@
14 <span class="pointer btn" @click="gotoInformationPage">{{$t('customService.unauth.infoBtn')}}</span> 14 <span class="pointer btn" @click="gotoInformationPage">{{$t('customService.unauth.infoBtn')}}</span>
15 &nbsp;{{$t('customService.unauth.baseInfoTail')}} 15 &nbsp;{{$t('customService.unauth.baseInfoTail')}}
16 </div> 16 </div>
17 <!-- <img class="pointer close" src="@/assets/images/common/icon-alert-close.png" alt=""> -->
18 </div> 17 </div>
19 </div> 18 </div>
20 <div class="content clarms" v-else> 19 <div class="content clarms" v-else>
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 .page { 3 .page {
4 color: #58595b; 4 color: $cFontGray2;
5 } 5 }
6 6
7 .content { 7 .content {
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
10 10
11 .box { 11 .box {
12 position: relative; 12 position: relative;
13 margin-top: $marginMedium; 13 // margin-top: $marginMedium;
14 } 14 }
15 15
16 // banner 轮播 16 // banner 轮播
...@@ -200,7 +200,7 @@ ...@@ -200,7 +200,7 @@
200 200
201 // 产品 201 // 产品
202 .product { 202 .product {
203 margin: 100px auto 0; 203 margin: 92px auto 0;
204 text-align: center; 204 text-align: center;
205 205
206 .tit { 206 .tit {
...@@ -222,7 +222,7 @@ ...@@ -222,7 +222,7 @@
222 @extend .fcc; 222 @extend .fcc;
223 padding: 2px; 223 padding: 2px;
224 width: 582px; 224 width: 582px;
225 height: 280px; 225 min-height: 250px;
226 margin-bottom: 25px; 226 margin-bottom: 25px;
227 227
228 .cont { 228 .cont {
...@@ -233,14 +233,20 @@ ...@@ -233,14 +233,20 @@
233 background-color: #ffffff; 233 background-color: #ffffff;
234 234
235 .icon-wrap { 235 .icon-wrap {
236 @extend .fcc; 236 @extend .bb;
237 padding-top: 70px;
238 display: flex;
239 justify-content: center;
240 align-items: flex-start;
237 width: 202px; 241 width: 202px;
238 } 242 }
239 243
240 .detail { 244 .detail {
241 padding: 52px 32px 0 0; 245 position: relative;
246 padding: 44px 20px 25px 0;
242 flex: 1; 247 flex: 1;
243 flex-grow: 1; 248 flex-grow: 1;
249 margin-left: -16px;
244 250
245 .t1 { 251 .t1 {
246 letter-spacing: 2px; 252 letter-spacing: 2px;
...@@ -267,7 +273,7 @@ ...@@ -267,7 +273,7 @@
267 margin-top: 6px; 273 margin-top: 6px;
268 font-size: 18px; 274 font-size: 18px;
269 font-weight: 300; 275 font-weight: 300;
270 // letter-spacing: -0.45px; 276 @extend .text-jtf;
271 } 277 }
272 } 278 }
273 } 279 }
...@@ -278,11 +284,12 @@ ...@@ -278,11 +284,12 @@
278 // 视频 284 // 视频
279 .video { 285 .video {
280 @extend .fcc; 286 @extend .fcc;
287 margin: 72px auto 0;
281 } 288 }
282 289
283 // 保障 290 // 保障
284 .guarantee { 291 .guarantee {
285 margin: 100px auto 0; 292 margin: 90px auto 0;
286 font-size: 22px; 293 font-size: 22px;
287 294
288 .tit { 295 .tit {
...@@ -310,7 +317,7 @@ ...@@ -310,7 +317,7 @@
310 .tt { 317 .tt {
311 @extend .bb; 318 @extend .bb;
312 width: 50%; 319 width: 50%;
313 padding: 20px 0; 320 padding: 18px 12px 18px 0;
314 letter-spacing: 1.12px; 321 letter-spacing: 1.12px;
315 color: #666666; 322 color: #666666;
316 } 323 }
...@@ -338,7 +345,8 @@ ...@@ -338,7 +345,8 @@
338 .tt { 345 .tt {
339 @extend .bb; 346 @extend .bb;
340 width: 50%; 347 width: 50%;
341 padding: 48px; 348
349 padding: 50px 60px 26px 100px;
342 letter-spacing: 1.12px; 350 letter-spacing: 1.12px;
343 color: #666666; 351 color: #666666;
344 352
...@@ -347,6 +355,11 @@ ...@@ -347,6 +355,11 @@
347 } 355 }
348 } 356 }
349 357
358 .tt2{
359 padding: 50px 64px 26px 50px;
360 padding: 48px;
361 }
362
350 .label { 363 .label {
351 border-right: solid 1px #e4e4e5; 364 border-right: solid 1px #e4e4e5;
352 line-height: 1.4; 365 line-height: 1.4;
...@@ -433,7 +446,7 @@ ...@@ -433,7 +446,7 @@
433 446
434 // 提交订单 447 // 提交订单
435 .submit-btn { 448 .submit-btn {
436 margin: 64px auto 100px; 449 margin: 50px auto 100px;
437 @extend .pointer; 450 @extend .pointer;
438 @extend .bb; 451 @extend .bb;
439 @include btc4(300px, 50px, 22px); 452 @include btc4(300px, 50px, 22px);
......
...@@ -134,7 +134,7 @@ ...@@ -134,7 +134,7 @@
134 <li>保證於保費繳付期內保費不變。</li> 134 <li>保證於保費繳付期內保費不變。</li>
135 </ul> 135 </ul>
136 </div> 136 </div>
137 <div class="tt label label2"> 137 <div class="tt tt2 label label2">
138 <div class="t1"> 138 <div class="t1">
139 <span>計劃不包括</span> 139 <span>計劃不包括</span>
140 <span class="small">2</span> 140 <span class="small">2</span>
......
...@@ -6,7 +6,3 @@ ...@@ -6,7 +6,3 @@
6 overflow-x: hidden; 6 overflow-x: hidden;
7 overflow-y: auto; 7 overflow-y: auto;
8 } 8 }
9
10 // .content::-webkit-scrollbar {
11 // display: none;
12 // }
......
...@@ -82,4 +82,9 @@ ...@@ -82,4 +82,9 @@
82 82
83 input { 83 input {
84 color:'#606266' 84 color:'#606266'
85 }
...\ No newline at end of file ...\ No newline at end of file
85 }
86
87 .text-jtf{
88 text-align: justify;
89 text-align-last: left;
90 }
......
...@@ -41,7 +41,7 @@ $cLightBlack:#606266; ...@@ -41,7 +41,7 @@ $cLightBlack:#606266;
41 $cDisabled:#888888; 41 $cDisabled:#888888;
42 42
43 $cOrange2:#ff6839; 43 $cOrange2:#ff6839;
44 $cFontGra2: #58595b; 44 $cFontGray2: #58595b;
45 45
46 // 文章宽度 46 // 文章宽度
47 $articleWidth:1041px; 47 $articleWidth:1041px;
......