Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
2d9e821b by joe
Options

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

2 parents 3f6327ea d6c2547b
Expand all
Inline Side-by-side
Showing 19 changed files with 384 additions and 105 deletions
...@@ -436,6 +436,10 @@ textarea { ...@@ -436,6 +436,10 @@ textarea {
436 display: none; 436 display: none;
437 } 437 }
438 438
439 .clarms .el-input__inner {
440 font-size: 22px;
441 }
442
439 @media (max-width: 1200px) { 443 @media (max-width: 1200px) {
440 .page-index { 444 .page-index {
441 .video-js { 445 .video-js {
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 .comp {
4 font-size: 22px;
5 }
3 6
4 input { 7 input {
5 padding: 0 2.083333rem; 8 padding: 0 2.083333rem;
...@@ -11,10 +14,11 @@ input { ...@@ -11,10 +14,11 @@ input {
11 } 14 }
12 15
13 .gray { 16 .gray {
14 color: #747474; 17 // color: #747474;
18 color: #666666;
15 } 19 }
16 20
17 .empty{ 21 .empty {
18 flex: 1; 22 flex: 1;
19 height: 30rem; 23 height: 30rem;
20 display: flex; 24 display: flex;
...@@ -37,35 +41,36 @@ input { ...@@ -37,35 +41,36 @@ input {
37 } 41 }
38 } 42 }
39 43
40 .submit-btn{ 44 .submit-btn {
41 background: url("~@assets/images/vhis/vhis-btn.png"); 45 background: url("~@assets/images/vhis/vhis-btn.png");
42 background-size: 100% 100%; 46 background-size: 100% 100%;
43 background-repeat: no-repeat; 47 background-repeat: no-repeat;
44 width: 15rem; 48 width: 300px;
45 height: 2.5rem; 49 height: 50px;
46 line-height: 2.5rem; 50 line-height: 50px;
47 color: white; 51 color: white;
48 font-weight: 600; 52 font-weight: 600;
49 cursor: pointer; 53 cursor: pointer;
50 margin: 2.5rem auto; 54 margin: 2.5rem auto;
51 text-align: center; 55 text-align: center;
52 border-radius: 2rem; 56 border-radius: 50px;
53 } 57 }
54 58
55 .reservation-container-2 { 59 .reservation-container-2 {
56 @extend .bb; 60 @extend .bb;
57 border-radius: .666667rem; 61 border-radius: .666667rem;
58 border: solid .083333rem #ff6839; 62 border: solid 2px $cOrange;
59 background-color: #ffffff; 63 background-color: #ffffff;
60 padding: 1.666667rem 10rem 2.833333rem 10rem; 64 // padding: 1.666667rem 10rem 2.833333rem 10rem;
65 padding: 20px 100px 72px;
61 66
62 .clarms-border{ 67 .clarms-border {
63 box-sizing:border-box; 68 box-sizing: border-box;
64 padding:.166667rem; 69 padding: .166667rem;
65 border-radius: .416667rem; 70 border-radius: .416667rem;
66 background-image: linear-gradient(to right , #ffb31d, #f15907) ; 71 background-image: linear-gradient(to right, #ffb31d, #f15907);
67 margin: 0 1.25rem ; 72 margin: 0 1.25rem;
68 min-width: 25rem ; 73 min-width: 25rem;
69 74
70 .clarms-select { 75 .clarms-select {
71 width: 100%; 76 width: 100%;
...@@ -73,24 +78,28 @@ input { ...@@ -73,24 +78,28 @@ input {
73 } 78 }
74 79
75 .title { 80 .title {
76 font-size: 1.333333rem;
77 color: #ff6839; 81 color: #ff6839;
78 text-align: center; 82 text-align: center;
79 margin: 1.666667rem auto 0 auto; 83 // margin: 1.666667rem auto 0 auto;
80 display: flex; 84 display: flex;
81 align-items: center; 85 align-items: center;
82 justify-content: center; 86 justify-content: center;
83 font-weight: 600; 87 font-weight: 600;
84 letter-spacing: .25rem ; 88 letter-spacing: .25rem;
85 font-size: 1.5rem; 89 font-size: 1.5rem;
90
91 .t1 {
92 font-size: 24px;
93 font-weight: bold;
94 }
86 } 95 }
87 96
88 .default-mt { 97 .default-mt {
89 margin-top: 2.666667rem; 98 margin-top: 48px;
90 } 99 }
91 100
92 .submit-btn{ 101 .submit-btn {
93 margin: 2.5rem auto 1rem; 102 margin: 48px auto 24px;
94 } 103 }
95 104
96 .flex-top { 105 .flex-top {
...@@ -117,15 +126,15 @@ input { ...@@ -117,15 +126,15 @@ input {
117 .check-item { 126 .check-item {
118 display: flex; 127 display: flex;
119 align-items: center; 128 align-items: center;
120 margin-right: 2rem; 129 margin-right: 60px;
121 margin-bottom: .833333rem; 130 margin-bottom: .833333rem;
122 131
123 span { 132 span {
124 margin-left: .833333rem; 133 margin-left: 20px;
125 } 134 }
126 135
127 img { 136 img {
128 width: 1.666667rem ; 137 width: 1.666667rem;
129 } 138 }
130 } 139 }
131 140
...@@ -145,17 +154,19 @@ input { ...@@ -145,17 +154,19 @@ input {
145 } 154 }
146 155
147 .mt20 { 156 .mt20 {
148 margin-top: 1.666667rem; 157 margin-top: 48px;
149 } 158 }
150 159
151 .mt10 { 160 .mt10 {
152 margin-top: .833333rem; 161 margin-top: 24px;
153 } 162 }
154 163
155 .bottom-tip { 164 .bottom-tip {
156 font-size: .833333rem ; 165 // font-size: .833333rem;
166 font-size: 18px;
157 display: flex; 167 display: flex;
158 align-items: center; 168 align-items: center;
169
159 span { 170 span {
160 margin-left: 1.3rem; 171 margin-left: 1.3rem;
161 } 172 }
...@@ -167,7 +178,7 @@ input { ...@@ -167,7 +178,7 @@ input {
167 178
168 hr { 179 hr {
169 border-top: 1px solid #eee; 180 border-top: 1px solid #eee;
170 margin-top: 2.5rem ; 181 margin-top: 48px;
171 } 182 }
172 183
173 .tips { 184 .tips {
...@@ -176,11 +187,12 @@ input { ...@@ -176,11 +187,12 @@ input {
176 align-items: center; 187 align-items: center;
177 188
178 img { 189 img {
179 width: .833333rem; 190 width: 2rem;
180 } 191 }
181 192
182 span { 193 span {
183 font-size: 1rem ; 194 // font-size: 1rem;
195 font-size: 18px;
184 margin-left: .833333rem; 196 margin-left: .833333rem;
185 color: #ff6839; 197 color: #ff6839;
186 } 198 }
...@@ -202,7 +214,7 @@ input { ...@@ -202,7 +214,7 @@ input {
202 font-size: 1.166667rem; 214 font-size: 1.166667rem;
203 215
204 .icon { 216 .icon {
205 width:1.333333rem; 217 width: 1.333333rem;
206 margin-right: 5px; 218 margin-right: 5px;
207 display: inline-block; 219 display: inline-block;
208 } 220 }
...@@ -214,7 +226,7 @@ input { ...@@ -214,7 +226,7 @@ input {
214 font-size: 1.166667rem; 226 font-size: 1.166667rem;
215 } 227 }
216 } 228 }
217 } 229 }
218 230
219 231
220 .form { 232 .form {
...@@ -223,7 +235,7 @@ input { ...@@ -223,7 +235,7 @@ input {
223 flex-wrap: wrap; 235 flex-wrap: wrap;
224 236
225 &-name { 237 &-name {
226 font-size: 1.333333rem ; 238 font-size: 1.333333rem;
227 font-weight: 600; 239 font-weight: 600;
228 text-align: left; 240 text-align: left;
229 color: #ff6839; 241 color: #ff6839;
...@@ -233,7 +245,7 @@ input { ...@@ -233,7 +245,7 @@ input {
233 .ipt-date { 245 .ipt-date {
234 width: 100%; 246 width: 100%;
235 border: 1px solid #ff6839 !important; 247 border: 1px solid #ff6839 !important;
236 border-radius: .416667rem ; 248 border-radius: .416667rem;
237 height: 3rem; 249 height: 3rem;
238 align-items: center; 250 align-items: center;
239 padding-left: .833333rem; 251 padding-left: .833333rem;
...@@ -262,9 +274,9 @@ input { ...@@ -262,9 +274,9 @@ input {
262 // input和下拉 274 // input和下拉
263 .ipt { 275 .ipt {
264 border: 1px solid #ff6839 !important; 276 border: 1px solid #ff6839 !important;
265 border-radius: .416667rem ; 277 border-radius: .416667rem;
266 height: 3rem; 278 height: 3rem;
267 display:flex; 279 display: flex;
268 align-items: center; 280 align-items: center;
269 } 281 }
270 282
...@@ -318,9 +330,11 @@ input { ...@@ -318,9 +330,11 @@ input {
318 width: 30%; 330 width: 30%;
319 padding-left: 5px; 331 padding-left: 5px;
320 letter-spacing: .25rem; 332 letter-spacing: .25rem;
333 font-size: 20px;
321 334
322 .main-label { 335 .main-label {
323 font-size: 1.5rem ; 336 // font-size: 1.5rem;
337 font-size: 22px;
324 color: #ff6839; 338 color: #ff6839;
325 } 339 }
326 } 340 }
...@@ -333,14 +347,15 @@ input { ...@@ -333,14 +347,15 @@ input {
333 .value { 347 .value {
334 width: 70%; 348 width: 70%;
335 position: relative; 349 position: relative;
350
336 .ipt-wrap { 351 .ipt-wrap {
337 352
338 // input和下拉 353 // input和下拉
339 .ipt { 354 .ipt {
340 border: 1px solid #ff6839 !important; 355 border: 1px solid #ff6839 !important;
341 border-radius: .416667rem ; 356 border-radius: .416667rem;
342 height: 3rem; 357 height: 3rem;
343 display:flex; 358 display: flex;
344 align-items: center; 359 align-items: center;
345 } 360 }
346 361
...@@ -349,9 +364,9 @@ input { ...@@ -349,9 +364,9 @@ input {
349 width: 100%; 364 width: 100%;
350 border-bottom: 1px solid #ccc; 365 border-bottom: 1px solid #ccc;
351 height: 3rem; 366 height: 3rem;
352 display:flex; 367 display: flex;
353 align-items: center; 368 align-items: center;
354 margin-bottom: .833333rem ; 369 margin-bottom: .833333rem;
355 } 370 }
356 371
357 // 长文本 372 // 长文本
...@@ -406,6 +421,7 @@ input { ...@@ -406,6 +421,7 @@ input {
406 .form { 421 .form {
407 &-item { 422 &-item {
408 width: 100%; 423 width: 100%;
424
409 .label { 425 .label {
410 min-width: 30%; 426 min-width: 30%;
411 } 427 }
...@@ -426,13 +442,13 @@ input { ...@@ -426,13 +442,13 @@ input {
426 @media (max-width: 600px) { 442 @media (max-width: 600px) {
427 443
428 444
429 .reservation-container-2 { 445 .reservation-container-2 {
430 446
431 .clarms-border{ 447 .clarms-border {
432 min-width: auto; 448 min-width: auto;
433 margin: 0 .25rem; 449 margin: 0 .25rem;
434 } 450 }
435 } 451 }
436 452
437 .form { 453 .form {
438 &-item { 454 &-item {
...@@ -457,10 +473,12 @@ input { ...@@ -457,10 +473,12 @@ input {
457 473
458 &-item-2 { 474 &-item-2 {
459 display: block; 475 display: block;
476
460 .label { 477 .label {
461 width: 100%; 478 width: 100%;
462 margin-bottom:10px; 479 margin-bottom: 10px;
463 } 480 }
481
464 .value { 482 .value {
465 width: 100%; 483 width: 100%;
466 } 484 }
......
1 <template> 1 <template>
2 2
3 <div> 3 <div class="comp">
4 <template v-if="!insuredList || insuredList.length == 0"> 4 <template v-if="!insuredList || insuredList.length == 0">
5 <div class="reservation-container-2"> 5 <div class="reservation-container-2">
6 <div class="empty"> 6 <div class="empty">
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
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>{{$t('clarms.step2.label1')}}</span> 20 <span class="t1">{{$t('clarms.step2.label1')}}</span>
21 <div class="clarms-border"> 21 <div class="clarms-border">
22 <el-select class="clarms-select" v-model="data.insuredIndex" :placeholder="$t('clarms.step2.placeHolder1')"> 22 <el-select class="clarms-select" v-model="data.insuredIndex" :placeholder="$t('clarms.step2.placeHolder1')">
23 <template v-if="lan == 'en'"> 23 <template v-if="lan == 'en'">
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
30 </template> 30 </template>
31 </el-select> 31 </el-select>
32 </div> 32 </div>
33 <span>{{$t('clarms.step2.label2')}}</span> 33 <span class="t1">{{$t('clarms.step2.label2')}}</span>
34 </div> 34 </div>
35 <hr> 35 <hr>
36 <div class="gird-g form default-mt"> 36 <div class="gird-g form default-mt">
......
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
9 height: 100%; 9 height: 100%;
10 @extend .fcc; 10 @extend .fcc;
11 text-align: center; 11 text-align: center;
12 font-size: 22px;
12 } 13 }
13 14
14 .overlay { 15 .overlay {
...@@ -23,7 +24,7 @@ ...@@ -23,7 +24,7 @@
23 .modal { 24 .modal {
24 position: relative; 25 position: relative;
25 @extend .bb; 26 @extend .bb;
26 width: 63.333333rem; 27 width: 800px;
27 // height: 28.5rem; 28 // height: 28.5rem;
28 border-radius: .8333rem; 29 border-radius: .8333rem;
29 background-color: #ffffff; 30 background-color: #ffffff;
...@@ -39,18 +40,19 @@ ...@@ -39,18 +40,19 @@
39 40
40 .info-icon { 41 .info-icon {
41 width: 10rem; 42 width: 10rem;
42 min-width: 6rem; 43 min-width: 10rem;
44
43 img { 45 img {
44 width:100%; 46 width: 100%;
45 } 47 }
46 } 48 }
47 49
48 .message { 50 .message {
49 margin-left: 1.666667rem; 51 margin-left: 32px;
50 font-size: 1.333333rem; 52 // font-size: 1.333333rem;
51 font-weight: 600; 53 font-weight: 600;
52 color: $cOrange; 54 color: $cOrange;
53 letter-spacing: .083333rem ; 55 letter-spacing: .083333rem;
54 text-align: left; 56 text-align: left;
55 line-height: 1.5; 57 line-height: 1.5;
56 58
...@@ -63,11 +65,12 @@ ...@@ -63,11 +65,12 @@
63 65
64 .close { 66 .close {
65 cursor: pointer; 67 cursor: pointer;
68
66 img { 69 img {
67 width: 1.666667rem ; 70 width: 1.666667rem;
68 position: absolute; 71 position: absolute;
69 right: -2.5rem; 72 right: -2.5rem;
70 top: -1.666667rem ; 73 top: -1.666667rem;
71 } 74 }
72 } 75 }
73 } 76 }
...@@ -83,13 +86,14 @@ ...@@ -83,13 +86,14 @@
83 .content { 86 .content {
84 padding: 5rem 4rem; 87 padding: 5rem 4rem;
85 } 88 }
89
86 .close { 90 .close {
87 display: none; 91 display: none;
88 } 92 }
89 } 93 }
90 } 94 }
91 95
92 @media (max-width: 700px) { 96 @media (max-width: 700px) {
93 .modal { 97 .modal {
94 // height: 28.5rem; 98 // height: 28.5rem;
95 padding: 3rem 1.5rem; 99 padding: 3rem 1.5rem;
...@@ -99,11 +103,12 @@ ...@@ -99,11 +103,12 @@
99 .content { 103 .content {
100 padding: 4rem 2rem; 104 padding: 4rem 2rem;
101 } 105 }
106
102 .close { 107 .close {
103 display: none; 108 display: none;
104 } 109 }
105 } 110 }
106 } 111 }
107 112
108 113
109 114
...@@ -117,8 +122,9 @@ ...@@ -117,8 +122,9 @@
117 .close { 122 .close {
118 display: none; 123 display: none;
119 } 124 }
125
120 .content { 126 .content {
121 padding: 2rem .5rem; 127 padding: 2rem .5rem;
122 } 128 }
123 } 129 }
124 } 130 }
......
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
9 height: 100%; 9 height: 100%;
10 @extend .fcc; 10 @extend .fcc;
11 text-align: center; 11 text-align: center;
12 font-size: 22px;
12 } 13 }
13 14
14 .overlay { 15 .overlay {
...@@ -23,7 +24,7 @@ ...@@ -23,7 +24,7 @@
23 .modal { 24 .modal {
24 position: relative; 25 position: relative;
25 @extend .bb; 26 @extend .bb;
26 width: 63.333333rem; 27 width: 800px;
27 // height: 28.5rem; 28 // height: 28.5rem;
28 border-radius: .8333rem; 29 border-radius: .8333rem;
29 background-color: #ffffff; 30 background-color: #ffffff;
...@@ -39,18 +40,19 @@ ...@@ -39,18 +40,19 @@
39 40
40 .info-icon { 41 .info-icon {
41 width: 10rem; 42 width: 10rem;
42 min-width: 6rem; 43 min-width: 10rem;
44
43 img { 45 img {
44 width:100%; 46 width: 100%;
45 } 47 }
46 } 48 }
47 49
48 .message { 50 .message {
49 margin-left: 1.666667rem; 51 margin-left: 32px;
50 font-size: 1.333333rem; 52 // font-size: 1.333333rem;
51 font-weight: 600; 53 font-weight: 600;
52 color: $cOrange; 54 color: $cOrange;
53 letter-spacing: .083333rem ; 55 letter-spacing: .083333rem;
54 text-align: left; 56 text-align: left;
55 line-height: 1.5; 57 line-height: 1.5;
56 58
...@@ -63,11 +65,12 @@ ...@@ -63,11 +65,12 @@
63 65
64 .close { 66 .close {
65 cursor: pointer; 67 cursor: pointer;
68
66 img { 69 img {
67 width: 1.666667rem ; 70 width: 1.666667rem;
68 position: absolute; 71 position: absolute;
69 right: -2.5rem; 72 right: -2.5rem;
70 top: -1.666667rem ; 73 top: -1.666667rem;
71 } 74 }
72 } 75 }
73 } 76 }
...@@ -83,13 +86,14 @@ ...@@ -83,13 +86,14 @@
83 .content { 86 .content {
84 padding: 5rem 4rem; 87 padding: 5rem 4rem;
85 } 88 }
89
86 .close { 90 .close {
87 display: none; 91 display: none;
88 } 92 }
89 } 93 }
90 } 94 }
91 95
92 @media (max-width: 700px) { 96 @media (max-width: 700px) {
93 .modal { 97 .modal {
94 // height: 28.5rem; 98 // height: 28.5rem;
95 padding: 3rem 1.5rem; 99 padding: 3rem 1.5rem;
...@@ -99,11 +103,12 @@ ...@@ -99,11 +103,12 @@
99 .content { 103 .content {
100 padding: 4rem 2rem; 104 padding: 4rem 2rem;
101 } 105 }
106
102 .close { 107 .close {
103 display: none; 108 display: none;
104 } 109 }
105 } 110 }
106 } 111 }
107 112
108 113
109 114
...@@ -117,8 +122,9 @@ ...@@ -117,8 +122,9 @@
117 .close { 122 .close {
118 display: none; 123 display: none;
119 } 124 }
125
120 .content { 126 .content {
121 padding: 2rem .5rem; 127 padding: 2rem .5rem;
122 } 128 }
123 } 129 }
124 } 130 }
......
...@@ -2,6 +2,10 @@ ...@@ -2,6 +2,10 @@
2 2
3 $borderSize: 8px; 3 $borderSize: 8px;
4 4
5 .comp{
6 font-size: 22px;
7 }
8
5 .clarms-container { 9 .clarms-container {
6 box-sizing: border-box; 10 box-sizing: border-box;
7 padding: .166667rem; 11 padding: .166667rem;
...@@ -25,6 +29,7 @@ $borderSize: 8px; ...@@ -25,6 +29,7 @@ $borderSize: 8px;
25 border-radius: 2px; 29 border-radius: 2px;
26 padding: 2px; 30 padding: 2px;
27 background-image: linear-gradient(to right, #ffb31d, #f15907); 31 background-image: linear-gradient(to right, #ffb31d, #f15907);
32 max-width: 400px;
28 33
29 .cont { 34 .cont {
30 @extend .bb; 35 @extend .bb;
...@@ -33,6 +38,7 @@ $borderSize: 8px; ...@@ -33,6 +38,7 @@ $borderSize: 8px;
33 height: 100%; 38 height: 100%;
34 background-color: #ffffff; 39 background-color: #ffffff;
35 border-radius: 2px; 40 border-radius: 2px;
41 font-size: 18px;
36 } 42 }
37 } 43 }
38 44
...@@ -63,7 +69,7 @@ $borderSize: 8px; ...@@ -63,7 +69,7 @@ $borderSize: 8px;
63 } 69 }
64 70
65 .clarms-t1 { 71 .clarms-t1 {
66 font-size: 1.5rem; 72 font-size: 22px;
67 color: #f15907; 73 color: #f15907;
68 letter-spacing: .166667rem; 74 letter-spacing: .166667rem;
69 } 75 }
...@@ -71,6 +77,7 @@ $borderSize: 8px; ...@@ -71,6 +77,7 @@ $borderSize: 8px;
71 .clarms-t2 { 77 .clarms-t2 {
72 color: #58595b; 78 color: #58595b;
73 letter-spacing: .166667rem; 79 letter-spacing: .166667rem;
80 font-size: 18px;
74 } 81 }
75 } 82 }
76 83
...@@ -89,7 +96,8 @@ $borderSize: 8px; ...@@ -89,7 +96,8 @@ $borderSize: 8px;
89 line-height: 3rem; 96 line-height: 3rem;
90 color: white; 97 color: white;
91 letter-spacing: .166667rem; 98 letter-spacing: .166667rem;
92 font-size: 1.166667rem; 99 // font-size: 1.166667rem;
100 font-size: 18px;
93 cursor: pointer; 101 cursor: pointer;
94 } 102 }
95 103
......
1 <template> 1 <template>
2 <div> 2 <div class="comp">
3 <div class="clarms-container"> 3 <div class="clarms-container">
4 <div class="clarms-box"> 4 <div class="clarms-box">
5 <div class="clarms-tips" v-if="tipsVisible"> 5 <div class="clarms-tips" v-if="tipsVisible">
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 .comp {
4 font-size: 22px;
5 }
6
3 7
4 .orange { 8 .orange {
5 color: $cOrange; 9 color: $cOrange;
6 } 10 }
7 11
8 .gray { 12 .gray {
9 color: #747474; 13 color: #747474;
10 } 14 }
15
11 16
12 .submit-btn{ 17 .submit-btn {
13 background: url("~@assets/images/vhis/vhis-btn.png"); 18 background: url("~@assets/images/vhis/vhis-btn.png");
14 background-size: 100% 100%; 19 background-size: 100% 100%;
15 background-repeat: no-repeat; 20 background-repeat: no-repeat;
16 width: 18rem; 21 width: 300px;
17 height: 3rem; 22 height: 50px;
18 line-height: 3rem; 23 line-height: 50px;
19 color: white; 24 color: white;
20 font-weight: 600; 25 font-weight: 600;
21 cursor: pointer; 26 cursor: pointer;
22 margin: 2.5rem auto; 27 margin: 2.5rem auto;
23 text-align: center; 28 text-align: center;
24 border-radius: 1.666667rem; 29 border-radius: 50px;
25 } 30 }
26 31
27 .reservation-container { 32 .reservation-container {
28 @extend .bb; 33 @extend .bb;
29 border-radius: .666667rem; 34 border-radius: .666667rem;
30 border: solid .083333rem $cOrange; 35 border: solid 2px $cOrange;
31 background-color: #ffffff; 36 background-color: #ffffff;
32 padding: 2.666667rem 10rem 2.833333rem 10rem; 37 padding: 2.666667rem 10rem 2.833333rem 10rem;
33 38
34 .title { 39 .title {
35 font-size: 1.333333rem; 40 // font-size: 1.333333rem;
36 color: $cOrange; 41 color: $cOrange;
37 text-align: center; 42 text-align: center;
38 margin: 1.666667rem auto 0 auto; 43 margin: 1.666667rem auto 0 auto;
39 44
40 span { 45 span {
41 margin: 0 .333333rem ; 46 margin: 0 .333333rem;
42 } 47 }
43 } 48 }
44 49
...@@ -62,6 +67,7 @@ ...@@ -62,6 +67,7 @@
62 .check-item { 67 .check-item {
63 display: flex; 68 display: flex;
64 align-items: center; 69 align-items: center;
70
65 span { 71 span {
66 margin-left: .833333rem; 72 margin-left: .833333rem;
67 } 73 }
...@@ -92,7 +98,7 @@ ...@@ -92,7 +98,7 @@
92 flex-wrap: wrap; 98 flex-wrap: wrap;
93 99
94 &-name { 100 &-name {
95 font-size: 1.333333rem ; 101 // font-size: 1.333333rem;
96 font-weight: 600; 102 font-weight: 600;
97 text-align: left; 103 text-align: left;
98 color: $cOrange; 104 color: $cOrange;
...@@ -102,10 +108,11 @@ ...@@ -102,10 +108,11 @@
102 .ipt-date { 108 .ipt-date {
103 width: 100%; 109 width: 100%;
104 border: 1px solid $cOrange !important; 110 border: 1px solid $cOrange !important;
105 border-radius: .416667rem ; 111 border-radius: .416667rem;
106 height: 3rem; 112 height: 3rem;
107 align-items: center; 113 align-items: center;
108 padding: 0 2rem; 114 padding: 0 2rem;
115
109 } 116 }
110 117
111 &-item { 118 &-item {
...@@ -125,16 +132,18 @@ ...@@ -125,16 +132,18 @@
125 } 132 }
126 133
127 .ipt-wrap { 134 .ipt-wrap {
135
128 width: 70%; 136 width: 70%;
129 position: relative; 137 position: relative;
130 138
131 // input和下拉 139 // input和下拉
132 .ipt { 140 .ipt {
133 border: 1px solid $cOrange !important; 141 border: 1px solid $cOrange !important;
134 border-radius: .416667rem ; 142 border-radius: .416667rem;
135 height: 3rem; 143 height: 3rem;
136 display:flex; 144 display: flex;
137 align-items: center; 145 align-items: center;
146
138 } 147 }
139 148
140 // 长文本 149 // 长文本
...@@ -201,14 +210,15 @@ ...@@ -201,14 +210,15 @@
201 .value { 210 .value {
202 width: 75%; 211 width: 75%;
203 position: relative; 212 position: relative;
213
204 .ipt-wrap { 214 .ipt-wrap {
205 215
206 // input和下拉 216 // input和下拉
207 .ipt { 217 .ipt {
208 border: 1px solid $cOrange !important; 218 border: 1px solid $cOrange !important;
209 border-radius: .416667rem ; 219 border-radius: .416667rem;
210 height: 3rem; 220 height: 3rem;
211 display:flex; 221 display: flex;
212 align-items: center; 222 align-items: center;
213 } 223 }
214 224
...@@ -217,9 +227,9 @@ ...@@ -217,9 +227,9 @@
217 width: 100%; 227 width: 100%;
218 border-bottom: 1px solid #ccc; 228 border-bottom: 1px solid #ccc;
219 height: 3rem; 229 height: 3rem;
220 display:flex; 230 display: flex;
221 align-items: center; 231 align-items: center;
222 margin-bottom: .833333rem ; 232 margin-bottom: .833333rem;
223 } 233 }
224 234
225 // 长文本 235 // 长文本
...@@ -244,10 +254,10 @@ ...@@ -244,10 +254,10 @@
244 } 254 }
245 } 255 }
246 } 256 }
247 } 257 }
248 258
249 259
250 .notice { 260 .notice {
251 margin-top: 4rem; 261 margin-top: 4rem;
252 @extend .bb; 262 @extend .bb;
253 padding: 0 1rem; 263 padding: 0 1rem;
...@@ -264,7 +274,7 @@ ...@@ -264,7 +274,7 @@
264 top: .6rem; 274 top: .6rem;
265 } 275 }
266 } 276 }
267 } 277 }
268 278
269 279
270 @media (max-width: 1200px) { 280 @media (max-width: 1200px) {
...@@ -278,6 +288,7 @@ ...@@ -278,6 +288,7 @@
278 .form { 288 .form {
279 &-item { 289 &-item {
280 width: 100%; 290 width: 100%;
291
281 .label { 292 .label {
282 min-width: 30%; 293 min-width: 30%;
283 } 294 }
...@@ -325,6 +336,7 @@ ...@@ -325,6 +336,7 @@
325 .label { 336 .label {
326 width: 30%; 337 width: 30%;
327 } 338 }
339
328 .value { 340 .value {
329 width: 70%; 341 width: 70%;
330 } 342 }
...@@ -353,7 +365,7 @@ ...@@ -353,7 +365,7 @@
353 365
354 @media (max-width: 500px) { 366 @media (max-width: 500px) {
355 367
356 .date-wrap .calendar-wrap{ 368 .date-wrap .calendar-wrap {
357 margin-left: -25px !important; 369 margin-left: -25px !important;
358 } 370 }
359 371
......
1 <template> 1 <template>
2 <div class="reservation-container"> 2 <div class="comp reservation-container">
3 <div class="title" v-if="!(userInfo && userInfo.name)"><u><span class="pointer" @click="toRegisterPage">{{$t('clarms.step1.register')}}</span>/<span class="pointer" @click="toLoginPage">{{$t('clarms.step1.login')}}</span></u>{{$t('clarms.step1.t1')}}</div> 3 <div class="title" v-if="!(userInfo && userInfo.name)"><u><span class="pointer" @click="toRegisterPage">{{$t('clarms.step1.register')}}</span>/<span class="pointer" @click="toLoginPage">{{$t('clarms.step1.login')}}</span></u>{{$t('clarms.step1.t1')}}</div>
4 <div class="form-name default-mt"> {{$t('clarms.step1.label0')}}</div> 4 <div class="form-name default-mt"> {{$t('clarms.step1.label0')}}</div>
5 <div class="gird-g form default-mt"> 5 <div class="gird-g form default-mt">
......
1 1
2 <template> 2 <template>
3
4 <div> 3 <div>
4 <div class="navigate">
5 <div class="bg"></div>
6 <div class="cont">
7 <span class="tt">索償申請</span>
8 </div>
9 </div>
10 <div class="content clarms">
5 <template v-if="step == 3"> 11 <template v-if="step == 3">
6 <div class="alert"> 12 <div class="alert">
7 <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt=""> 13 <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
...@@ -26,6 +32,8 @@ ...@@ -26,6 +32,8 @@
26 </template> 32 </template>
27 </div> 33 </div>
28 </div> 34 </div>
35 </div>
36
29 </template> 37 </template>
30 38
31 <script src="./clarms.js"></script> 39 <script src="./clarms.js"></script>
......
1 import {
2 mapGetters,
3 mapActions,
4 mapState
5 } from "vuex";
6
7 import api from '@/api/api'
8 import {
9 httpGet,
10 httpPost
11 } from '@/api/fetch-api.js'
12
13 import ClarmsModalOne from '@/components/clarms/clarms-plugins-modal1.vue';
14 import ClarmsModalTwo from '@/components/clarms/clarms-plugins-modal2.vue';
15 import ClarmsVerifyForm from '@/components/clarms/clarms-plugins-verifyform.vue';
16 import ClarmsMaterial from '@/components/clarms/clarms-plugins-material.vue';
17
18 // 用户没有登录
19 // 校验成功
20 // 校验失败
21 // 用户已经登录
22 // 没有保单
23 // 校验成功
24 // 校验失败
25 // 有保单
26
27 export default {
28 data() {
29 return {
30 step: 0, // 1是表单；2是报案页面；3=信息不完整
31 showModal1: false,
32 showModal2: false,
33 agress: false,
34 reservationTypes: [],
35 cid: false,
36 // 可以理赔的客户信息
37 customerList: []
38 }
39 },
40 components: {
41 ClarmsVerifyForm,
42 ClarmsMaterial,
43 ClarmsModalOne,
44 ClarmsModalTwo
45 },
46 computed: {
47 ...mapState({
48 userInfo: state => state.userInfo
49 }),
50 i18n() {
51 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
52 },
53 },
54 methods: {
55 toClarms() {
56 this.$router.push({
57 path: "/clarms",
58 query: {}
59 });
60 },
61 initData() {
62 // this.step = 2;
63 // return;
64 if (this.userInfo && this.userInfo.name) {
65 this.loadCidIfLogin();
66 sessionStorage.removeItem("clarmsRequestCid")
67 } else {
68 let cid = sessionStorage.getItem("clarmsRequestCid");
69 if (cid) {
70 this.cid = cid;
71 this.checkCid();
72 } else {
73 this.step = 1;
74 }
75 }
76 },
77 loadCidIfLogin() {
78 let param = {
79 sid: this.userInfo.sid
80 };
81 httpPost({
82 url: api.getCidByLogin,
83 sid: true,
84 data: param
85 }).then(res => {
86 if (res) {
87 this.cid = res;
88 this.checkCid();
89 } else {
90 this.step = 3;
91 }
92 }).catch(e => {
93 this.step = 1;
94 });
95 },
96 checkCid() {
97 let param = {
98 cid: this.cid
99 }
100 httpPost({
101 url: api.clarmsCustomerList,
102 data: param
103 }).then(res => {
104 sessionStorage.removeItem("clarmsRequestCid");
105 if (res) {
106 this.customerList = res.insuredInfoList;
107 this.step = 2;
108 }
109 // if (res && res.insuredInfoList && res.insuredInfoList.length > 0) {
110 // this.customerList = res.insuredInfoList;
111 // this.step = 2;
112 // } else {
113 // sessionStorage.removeItem("clarmsRequestCid");
114 // this.step = 1;
115 // }
116 }).catch(e => {
117 sessionStorage.removeItem("clarmsRequestCid");
118 this.step = 1;
119 });
120 },
121 handleInsuredInfo(data) {
122 this.cid = data.cid;
123 this.customerList = data.list;
124 this.step = 2;
125 },
126 handleShowModal(modalIndex) {
127 console.log(modalIndex);
128 if (modalIndex == 1) {
129 this.showModal1 = true;
130 } else if (modalIndex == 2) {
131 this.showModal2 = true;
132 }
133 },
134 gotoInformationPage() {
135 let c = this.$route.fullPath;
136 this.$router.push({
137 path: "/infomation/improve",
138 query: {
139 c: c,
140 a: 1
141 }
142 });
143 },
144 logoutAction() {
145 this.sid = false;
146 this.hadQueryCustomerList = false;
147 this.customerList = [];
148 this.step = 1;
149 },
150 loginAction() {
151 this.sid = false;
152 this.hadQueryCustomerList = false;
153 this.customerList = [];
154 }
155 },
156 watch: {
157 userInfo(val) {
158 if (val && val.name) {
159 this.loginAction();
160 } else {
161 this.logoutAction();
162 }
163 }
164 },
165 mounted() {
166 this.initData();
167 },
168 created() {}
169 }
...@@ -29,11 +29,13 @@ input { ...@@ -29,11 +29,13 @@ input {
29 } 29 }
30 30
31 .reservation-container { 31 .reservation-container {
32 @extend .fcc;
32 @extend .bb; 33 @extend .bb;
33 border-radius: .666667rem; 34 border-radius: .666667rem;
34 border: solid .083333rem $cOrange; 35 border: solid .083333rem $cOrange;
35 background-color: #ffffff; 36 background-color: #ffffff;
36 padding: 2.666667rem 10rem 2.833333rem 10rem; 37 padding: 2.666667rem 10rem 2.833333rem 10rem;
38 min-height: 500px;
37 39
38 .title { 40 .title {
39 font-size: 1.333333rem; 41 font-size: 1.333333rem;
......
1
2 <template>
3 <div class="reservation-container">
4 <div class="submit-btn" @click="toClarms">下一步</div>
5 </div>
6 <!-- <div>
7 <template v-if="step == 3">
8 <div class="alert">
9 <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
10 <div class="txt">
11 {{$t('customService.unauth.baseInfoTip')}}&nbsp;
12 <span class="pointer btn" @click="gotoInformationPage">{{$t('customService.unauth.infoBtn')}}</span>
13 &nbsp;{{$t('customService.unauth.baseInfoTail')}}
14 </div>
15 </div>
16 </template>
17 <clarms-modal-one v-if="showModal1" @close="showModal1 = false"></clarms-modal-one>
18 <clarms-modal-two v-if="showModal2" @close="showModal2 = false"></clarms-modal-two>
19 <div class="mobile-margin">
20
21 <template v-if="step == 1">
22 <clarms-verify-form @insuredInfoList="handleInsuredInfo"></clarms-verify-form>
23 </template>
24
25 <template v-if="step == 2">
26 <clarms-material :insuredList="customerList" :cid="cid" @showModal="handleShowModal"></clarms-material>
27 </template>
28 </div>
29 </div> -->
30 </template>
31
32 <script src="./clarms-comp.js"></script>
33 <style lang="scss" scoped>
34 @import "./clarms-comp.scss";
35 </style>
...@@ -14,7 +14,7 @@ import CommonForm from './components/common-form.vue' ...@@ -14,7 +14,7 @@ import CommonForm from './components/common-form.vue'
14 import PolicyChangeGuide from './components/policy-change-guide.vue' 14 import PolicyChangeGuide from './components/policy-change-guide.vue'
15 import PolicyChangeContact from './components/policy-change-contact.vue' 15 import PolicyChangeContact from './components/policy-change-contact.vue'
16 import PolicyChangeInformation from './components/policy-change-information.vue' 16 import PolicyChangeInformation from './components/policy-change-information.vue'
17 import Clarms from './components/clarms.vue' 17 import Clarms from './components/clarms-comp.vue'
18 18
19 export default { 19 export default {
20 data() { 20 data() {
......
...@@ -82,6 +82,7 @@ ...@@ -82,6 +82,7 @@
82 82
83 .right-panel { 83 .right-panel {
84 max-width: 975px; 84 max-width: 975px;
85 width: 975px;
85 background-color: #ffffff; 86 background-color: #ffffff;
86 87
87 .panel { 88 .panel {
...@@ -106,8 +107,10 @@ ...@@ -106,8 +107,10 @@
106 .left-panel { 107 .left-panel {
107 display: none; 108 display: none;
108 } 109 }
109 .right-panel{ 110
111 .right-panel {
110 margin: 0 auto; 112 margin: 0 auto;
113
111 } 114 }
112 } 115 }
113 116
......
...@@ -189,7 +189,7 @@ export default { ...@@ -189,7 +189,7 @@ export default {
189 this.$set(this, 'bannerList', bannerList); 189 this.$set(this, 'bannerList', bannerList);
190 console.log(this.bannerList); 190 console.log(this.bannerList);
191 191
192 this.refreshVideoPlayer(targetData.videoUrl, targetData.videoPlayer); 192 this.refreshVideoPlayer(targetData.videoUrl, targetData.videoPoster);
193 // 设置标题 193 // 设置标题
194 document.title = targetData.productName; 194 document.title = targetData.productName;
195 195
......
...@@ -276,6 +276,14 @@ const routes = [ ...@@ -276,6 +276,14 @@ const routes = [
276 meta: { 276 meta: {
277 title: '平安人寿香港' 277 title: '平安人寿香港'
278 } 278 }
279 },
280 {
281 path: '/clarms',
282 name: 'clarms',
283 component: () => import('./pages/clarms/clarms.vue'),
284 meta: {
285 title: '平安人寿香港'
286 }
279 } 287 }
280 // 404页面 288 // 404页面
281 // { 289 // {
......