默认提交
Showing
13 changed files
with
291 additions
and
165 deletions
... | @@ -437,7 +437,8 @@ textarea { | ... | @@ -437,7 +437,8 @@ textarea { |
437 | } | 437 | } |
438 | 438 | ||
439 | .clarms .el-input__inner { | 439 | .clarms .el-input__inner { |
440 | font-size: 22px; | 440 | font-size: 22px; |
441 | border: none; | ||
441 | } | 442 | } |
442 | 443 | ||
443 | @media (max-width: 1200px) { | 444 | @media (max-width: 1200px) { | ... | ... |
... | @@ -59,25 +59,42 @@ input { | ... | @@ -59,25 +59,42 @@ input { |
59 | .reservation-container-2 { | 59 | .reservation-container-2 { |
60 | @extend .bb; | 60 | @extend .bb; |
61 | border-radius: .666667rem; | 61 | border-radius: .666667rem; |
62 | border: solid 2px $cOrange; | 62 | // border: solid 2px $cOrange; |
63 | background-color: #ffffff; | 63 | background-color: #ffffff; |
64 | // padding: 1.666667rem 10rem 2.833333rem 10rem; | 64 | // padding: 1.666667rem 10rem 2.833333rem 10rem; |
65 | padding: 20px 100px 72px; | 65 | padding: 20px 100px 72px; |
66 | 66 | ||
67 | .clarms-border { | 67 | .clarms-border { |
68 | box-sizing: border-box; | 68 | position: relative; |
69 | padding: .166667rem; | 69 | @extend .bb; |
70 | border-radius: .416667rem; | 70 | @extend .fcc; |
71 | padding: 2px; | ||
71 | background-image: linear-gradient(to right, #ffb31d, #f15907); | 72 | background-image: linear-gradient(to right, #ffb31d, #f15907); |
72 | margin: 0 1.25rem; | 73 | width: 482px; |
73 | min-width: 25rem; | 74 | height: 62px; |
75 | margin: 0 24px; | ||
76 | border-radius: 8px; | ||
74 | 77 | ||
75 | .clarms-select { | 78 | .clarms-select { |
76 | width: 100%; | 79 | width: 100%; |
77 | } | 80 | } |
81 | |||
82 | .down-arrow { | ||
83 | z-index: 10; | ||
84 | position: absolute; | ||
85 | top: 26px; | ||
86 | right: 1.2rem; | ||
87 | background-image: url('~@/assets/images/reservation/re-down-arrow-2.png'); | ||
88 | background-size: 100% 100%; | ||
89 | width: 15px; | ||
90 | height: 10px; | ||
91 | pointer-events: none; | ||
92 | cursor: default; | ||
93 | } | ||
78 | } | 94 | } |
79 | 95 | ||
80 | .title { | 96 | .title { |
97 | |||
81 | color: #ff6839; | 98 | color: #ff6839; |
82 | text-align: center; | 99 | text-align: center; |
83 | // margin: 1.666667rem auto 0 auto; | 100 | // margin: 1.666667rem auto 0 auto; |
... | @@ -86,12 +103,12 @@ input { | ... | @@ -86,12 +103,12 @@ input { |
86 | justify-content: center; | 103 | justify-content: center; |
87 | font-weight: 600; | 104 | font-weight: 600; |
88 | letter-spacing: .25rem; | 105 | letter-spacing: .25rem; |
89 | font-size: 1.5rem; | ||
90 | 106 | ||
91 | .t1 { | 107 | .t1 { |
92 | font-size: 24px; | 108 | font-size: 36px; |
93 | font-weight: bold; | 109 | font-weight: bold; |
94 | } | 110 | } |
111 | |||
95 | } | 112 | } |
96 | 113 | ||
97 | .default-mt { | 114 | .default-mt { |
... | @@ -242,13 +259,22 @@ input { | ... | @@ -242,13 +259,22 @@ input { |
242 | padding-left: 15px; | 259 | padding-left: 15px; |
243 | } | 260 | } |
244 | 261 | ||
262 | .cont { | ||
263 | @extend .bb; | ||
264 | @extend .fcc; | ||
265 | padding: 2px; | ||
266 | background-image: linear-gradient(to right, #ffb31d, #f15907); | ||
267 | height: 62px; | ||
268 | border-radius: 8px; | ||
269 | } | ||
270 | |||
245 | .ipt-date { | 271 | .ipt-date { |
246 | width: 100%; | 272 | width: 100%; |
247 | border: 1px solid #ff6839 !important; | 273 | background-color: #ffffff; |
248 | border-radius: .416667rem; | 274 | // padding-left: .833333rem; |
249 | height: 3rem; | 275 | // border-radius: 0; |
250 | align-items: center; | 276 | height: 58px; |
251 | padding-left: .833333rem; | 277 | border-radius: 8px; |
252 | } | 278 | } |
253 | 279 | ||
254 | &-item { | 280 | &-item { |
... | @@ -294,8 +320,8 @@ input { | ... | @@ -294,8 +320,8 @@ input { |
294 | right: 1.2rem; | 320 | right: 1.2rem; |
295 | background-image: url('~@/assets/images/reservation/re-down-arrow-2.png'); | 321 | background-image: url('~@/assets/images/reservation/re-down-arrow-2.png'); |
296 | background-size: 100% 100%; | 322 | background-size: 100% 100%; |
297 | width: .633333rem; | 323 | width: 15px; |
298 | height: .433333rem; | 324 | height: 10px; |
299 | pointer-events: none; | 325 | pointer-events: none; |
300 | cursor: default; | 326 | cursor: default; |
301 | } | 327 | } |
... | @@ -342,6 +368,7 @@ input { | ... | @@ -342,6 +368,7 @@ input { |
342 | .date-container { | 368 | .date-container { |
343 | width: 60%; | 369 | width: 60%; |
344 | position: relative; | 370 | position: relative; |
371 | // background-color: wheat; | ||
345 | } | 372 | } |
346 | 373 | ||
347 | .value { | 374 | .value { |
... | @@ -357,6 +384,7 @@ input { | ... | @@ -357,6 +384,7 @@ input { |
357 | height: 3rem; | 384 | height: 3rem; |
358 | display: flex; | 385 | display: flex; |
359 | align-items: center; | 386 | align-items: center; |
387 | |||
360 | } | 388 | } |
361 | 389 | ||
362 | 390 | ||
... | @@ -379,16 +407,17 @@ input { | ... | @@ -379,16 +407,17 @@ input { |
379 | .down-arrow { | 407 | .down-arrow { |
380 | z-index: 10; | 408 | z-index: 10; |
381 | position: absolute; | 409 | position: absolute; |
382 | top: 1.3rem; | 410 | top: 26px; |
383 | right: 1.2rem; | 411 | right: 1.2rem; |
384 | background-image: url('~@/assets/images/reservation/re-down-arrow-2.png'); | 412 | background-image: url('~@/assets/images/reservation/re-down-arrow-2.png'); |
385 | background-size: 100% 100%; | 413 | background-size: 100% 100%; |
386 | width: .633333rem; | 414 | width: 15px; |
387 | height: .433333rem; | 415 | height: 10px; |
388 | pointer-events: none; | 416 | pointer-events: none; |
389 | cursor: default; | 417 | cursor: default; |
390 | } | 418 | } |
391 | } | 419 | } |
420 | |||
392 | } | 421 | } |
393 | } | 422 | } |
394 | } | 423 | } | ... | ... |
This diff is collapsed.
Click to expand it.
... | @@ -21,16 +21,22 @@ | ... | @@ -21,16 +21,22 @@ |
21 | background: rgba($color: #000000, $alpha: 0.7); | 21 | background: rgba($color: #000000, $alpha: 0.7); |
22 | } | 22 | } |
23 | 23 | ||
24 | .border { | ||
25 | position: relative; | ||
26 | @extend .bb; | ||
27 | @extend .fcc; | ||
28 | padding: 2px; | ||
29 | background-image: linear-gradient(to right, #ffb31d, #f15907); | ||
30 | border-radius: 16px; | ||
31 | } | ||
32 | |||
24 | .modal { | 33 | .modal { |
25 | position: relative; | 34 | position: relative; |
26 | @extend .bb; | 35 | @extend .bb; |
27 | width: 800px; | 36 | width: 800px; |
28 | // height: 28.5rem; | 37 | border-radius: 16px; |
29 | border-radius: .8333rem; | ||
30 | background-color: #ffffff; | 38 | background-color: #ffffff; |
31 | padding: 3.5rem 2rem 2.5rem; | 39 | padding: 3.5rem 2rem 2.5rem; |
32 | border: .083333rem solid $cOrange; | ||
33 | |||
34 | 40 | ||
35 | .content { | 41 | .content { |
36 | display: flex; | 42 | display: flex; |
... | @@ -76,7 +82,7 @@ | ... | @@ -76,7 +82,7 @@ |
76 | } | 82 | } |
77 | 83 | ||
78 | 84 | ||
79 | @media (max-width: 800px) { | 85 | @media (max-width: 768px) { |
80 | .modal { | 86 | .modal { |
81 | // height: 28.5rem; | 87 | // height: 28.5rem; |
82 | padding: 3rem 1.5rem; | 88 | padding: 3rem 1.5rem; | ... | ... |
1 | 1 | ||
2 | <template> | 2 | <template> |
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="modal"> | 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="content"> | 7 | <div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div> |
8 | <div class="info-icon"> | 8 | <div class="content"> |
9 | <img src="@/assets/images/clarms/info.png"> | 9 | <div class="info-icon"> |
10 | </div> | 10 | <img src="@/assets/images/clarms/info.png"> |
11 | <div class="message"> | 11 | </div> |
12 | {{$t('clarms.step2.tip5')}}<span @click="toContact">{{$t('clarms.step2.tip6')}}</span> | 12 | <div class="message"> |
13 | </div> | 13 | {{$t('clarms.step2.tip5')}} |
14 | </div> | 14 | <span @click="toContact">{{$t('clarms.step2.tip6')}}</span> |
15 | </div> | 15 | </div> |
16 | </div> | 16 | </div> |
17 | </div> | ||
18 | </div> | ||
19 | </div> | ||
17 | </template> | 20 | </template> |
18 | 21 | ||
19 | <script src="./clarms-plugins-modal1.js"></script> | 22 | <script src="./clarms-plugins-modal1.js"></script> | ... | ... |
... | @@ -21,15 +21,22 @@ | ... | @@ -21,15 +21,22 @@ |
21 | background: rgba($color: #000000, $alpha: 0.7); | 21 | background: rgba($color: #000000, $alpha: 0.7); |
22 | } | 22 | } |
23 | 23 | ||
24 | .border { | ||
25 | position: relative; | ||
26 | @extend .bb; | ||
27 | @extend .fcc; | ||
28 | padding: 2px; | ||
29 | background-image: linear-gradient(to right, #ffb31d, #f15907); | ||
30 | border-radius: 16px; | ||
31 | } | ||
32 | |||
24 | .modal { | 33 | .modal { |
25 | position: relative; | 34 | position: relative; |
26 | @extend .bb; | 35 | @extend .bb; |
27 | width: 800px; | 36 | width: 800px; |
28 | // height: 28.5rem; | 37 | border-radius: 16px; |
29 | border-radius: .8333rem; | ||
30 | background-color: #ffffff; | 38 | background-color: #ffffff; |
31 | padding: 3.5rem 2rem 2.5rem; | 39 | padding: 3.5rem 2rem 2.5rem; |
32 | border: .083333rem solid $cOrange; | ||
33 | 40 | ||
34 | 41 | ||
35 | .content { | 42 | .content { | ... | ... |
1 | 1 | ||
2 | <template> | 2 | <template> |
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="modal"> | 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="content"> | 7 | <div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div> |
8 | <div class="info-icon"> | 8 | <div class="content"> |
9 | <img src="@/assets/images/clarms/suc.png"> | 9 | <div class="info-icon"> |
10 | </div> | 10 | <img src="@/assets/images/clarms/suc.png"> |
11 | <div class="message"> | 11 | </div> |
12 | {{$t('clarms.step2.tip7')}}<span @click="toAccountInformation">{{$t('clarms.step2.tip8')}}</span> | 12 | <div class="message"> |
13 | </div> | 13 | {{$t('clarms.step2.tip7')}} |
14 | </div> | 14 | <span @click="toAccountInformation">{{$t('clarms.step2.tip8')}}</span> |
15 | </div> | 15 | </div> |
16 | </div> | 16 | </div> |
17 | </div> | ||
18 | </div> | ||
19 | |||
20 | </div> | ||
17 | </template> | 21 | </template> |
18 | 22 | ||
19 | <script src="./clarms-plugins-modal2.js"></script> | 23 | <script src="./clarms-plugins-modal2.js"></script> | ... | ... |
... | @@ -82,7 +82,8 @@ export default { | ... | @@ -82,7 +82,8 @@ export default { |
82 | let input = document.createElement("input"); | 82 | let input = document.createElement("input"); |
83 | input.setAttribute("type", "file"); | 83 | input.setAttribute("type", "file"); |
84 | input.setAttribute("multiple", "multiple"); | 84 | input.setAttribute("multiple", "multiple"); |
85 | input.setAttribute("accept", "image/*"); | 85 | // input.setAttribute("accept", "image/*"); |
86 | input.setAttribute("accept", "image/jpeg"); | ||
86 | input.onchange = function (val) { | 87 | input.onchange = function (val) { |
87 | let position = _this.images.length; | 88 | let position = _this.images.length; |
88 | for (let index = 0; index < input.files.length; index++) { | 89 | for (let index = 0; index < input.files.length; index++) { | ... | ... |
... | @@ -6,7 +6,8 @@ | ... | @@ -6,7 +6,8 @@ |
6 | 6 | ||
7 | 7 | ||
8 | .orange { | 8 | .orange { |
9 | color: $cOrange; | 9 | // color: $cOrange; |
10 | color: #ff6839; | ||
10 | } | 11 | } |
11 | 12 | ||
12 | .gray { | 13 | .gray { |
... | @@ -14,6 +15,7 @@ | ... | @@ -14,6 +15,7 @@ |
14 | } | 15 | } |
15 | 16 | ||
16 | 17 | ||
18 | |||
17 | .submit-btn { | 19 | .submit-btn { |
18 | background: url("~@assets/images/vhis/vhis-btn.png"); | 20 | background: url("~@assets/images/vhis/vhis-btn.png"); |
19 | background-size: 100% 100%; | 21 | background-size: 100% 100%; |
... | @@ -24,7 +26,7 @@ | ... | @@ -24,7 +26,7 @@ |
24 | color: white; | 26 | color: white; |
25 | font-weight: 600; | 27 | font-weight: 600; |
26 | cursor: pointer; | 28 | cursor: pointer; |
27 | margin: 2.5rem auto; | 29 | margin: 100px auto 32px; |
28 | text-align: center; | 30 | text-align: center; |
29 | border-radius: 50px; | 31 | border-radius: 50px; |
30 | } | 32 | } |
... | @@ -32,9 +34,10 @@ | ... | @@ -32,9 +34,10 @@ |
32 | .reservation-container { | 34 | .reservation-container { |
33 | @extend .bb; | 35 | @extend .bb; |
34 | border-radius: .666667rem; | 36 | border-radius: .666667rem; |
35 | border: solid 2px $cOrange; | 37 | // border: solid 2px $cOrange; |
36 | background-color: #ffffff; | 38 | background-color: #ffffff; |
37 | padding: 2.666667rem 10rem 2.833333rem 10rem; | 39 | // padding: 2.666667rem 10rem 2.833333rem 10rem; |
40 | padding: 60px 82px 68px; | ||
38 | 41 | ||
39 | .title { | 42 | .title { |
40 | // font-size: 1.333333rem; | 43 | // font-size: 1.333333rem; |
... | @@ -48,7 +51,7 @@ | ... | @@ -48,7 +51,7 @@ |
48 | } | 51 | } |
49 | 52 | ||
50 | .default-mt { | 53 | .default-mt { |
51 | margin-top: 2.666667rem; | 54 | margin-top: 50px; |
52 | } | 55 | } |
53 | 56 | ||
54 | .flex-top { | 57 | .flex-top { |
... | @@ -106,26 +109,32 @@ | ... | @@ -106,26 +109,32 @@ |
106 | } | 109 | } |
107 | 110 | ||
108 | .ipt-date { | 111 | .ipt-date { |
109 | width: 100%; | 112 | // width: 100%; |
110 | border: 1px solid $cOrange !important; | 113 | // border: 1px solid $cOrange !important; |
111 | border-radius: .416667rem; | 114 | // border-radius: .416667rem; |
112 | height: 3rem; | 115 | // height: 3rem; |
113 | align-items: center; | 116 | // align-items: center; |
114 | padding: 0 2rem; | 117 | padding: 0 2rem; |
115 | 118 | ||
119 | width: 100%; | ||
120 | background-color: #ffffff; | ||
121 | height: 48px; | ||
122 | border-radius: 8px; | ||
116 | } | 123 | } |
117 | 124 | ||
118 | &-item { | 125 | &-item { |
119 | width: 50%; | 126 | width: 48%; |
120 | display: flex; | 127 | display: flex; |
121 | justify-content: center; | 128 | justify-content: center; |
122 | padding: 0 $marginSmall; | 129 | justify-content: space-between; |
123 | margin-bottom: 1.333333rem; | 130 | // padding: 0 $marginSmall; |
131 | margin-bottom: 32px; | ||
124 | 132 | ||
125 | .label { | 133 | .label { |
126 | display: flex; | 134 | display: flex; |
127 | align-items: center; | 135 | align-items: center; |
128 | width: 30%; | 136 | // width: 30%; |
137 | width: 140px; | ||
129 | justify-content: flex-start; | 138 | justify-content: flex-start; |
130 | padding-left: 5px; | 139 | padding-left: 5px; |
131 | letter-spacing: .25rem; | 140 | letter-spacing: .25rem; |
... | @@ -133,16 +142,31 @@ | ... | @@ -133,16 +142,31 @@ |
133 | 142 | ||
134 | .ipt-wrap { | 143 | .ipt-wrap { |
135 | 144 | ||
136 | width: 70%; | 145 | width: 352px; |
137 | position: relative; | 146 | position: relative; |
138 | 147 | ||
148 | .cont { | ||
149 | @extend .bb; | ||
150 | @extend .fcc; | ||
151 | padding: 2px; | ||
152 | background-image: linear-gradient(to right, #ffb31d, #f15907); | ||
153 | height: 52px; | ||
154 | border-radius: 8px; | ||
155 | } | ||
156 | |||
139 | // input和下拉 | 157 | // input和下拉 |
140 | .ipt { | 158 | .ipt { |
141 | border: 1px solid $cOrange !important; | 159 | // border: 1px solid $cOrange !important; |
160 | border: none !important; | ||
142 | border-radius: .416667rem; | 161 | border-radius: .416667rem; |
143 | height: 3rem; | 162 | height: 3rem; |
144 | display: flex; | 163 | // display: flex; |
145 | align-items: center; | 164 | // align-items: center; |
165 | |||
166 | width: 100%; | ||
167 | background-color: #ffffff; | ||
168 | height: 48px; | ||
169 | border-radius: 8px; | ||
146 | 170 | ||
147 | } | 171 | } |
148 | 172 | ||
... | @@ -156,12 +180,12 @@ | ... | @@ -156,12 +180,12 @@ |
156 | .down-arrow { | 180 | .down-arrow { |
157 | z-index: 10; | 181 | z-index: 10; |
158 | position: absolute; | 182 | position: absolute; |
159 | top: 1.3rem; | 183 | top: 22px; |
160 | right: 1.2rem; | 184 | right: 1.2rem; |
161 | background-image: url('~@/assets/images/reservation/re-down-arrow-2.png'); | 185 | background-image: url('~@/assets/images/reservation/re-down-arrow-2.png'); |
162 | background-size: 100% 100%; | 186 | background-size: 100% 100%; |
163 | width: .633333rem; | 187 | width: 15px; |
164 | height: .433333rem; | 188 | height: 10px; |
165 | pointer-events: none; | 189 | pointer-events: none; |
166 | cursor: default; | 190 | cursor: default; |
167 | } | 191 | } |
... | @@ -242,12 +266,12 @@ | ... | @@ -242,12 +266,12 @@ |
242 | .down-arrow { | 266 | .down-arrow { |
243 | z-index: 10; | 267 | z-index: 10; |
244 | position: absolute; | 268 | position: absolute; |
245 | top: 1.3rem; | 269 | top: 22px; |
246 | right: 1.2rem; | 270 | right: 1.2rem; |
247 | background-image: url('~@/assets/images/reservation/re-down-arrow-2.png'); | 271 | background-image: url('~@/assets/images/reservation/re-down-arrow-2.png'); |
248 | background-size: 100% 100%; | 272 | background-size: 100% 100%; |
249 | width: .633333rem; | 273 | width: 15px; |
250 | height: .433333rem; | 274 | height: 10px; |
251 | pointer-events: none; | 275 | pointer-events: none; |
252 | cursor: default; | 276 | cursor: default; |
253 | } | 277 | } | ... | ... |
1 | <template> | 1 | <template> |
2 | <div class="comp reservation-container"> | 2 | <div class="comp reservation-container clarms-plugins-verifyform"> |
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)"> |
4 | <div class="form-name default-mt"> {{$t('clarms.step1.label0')}}</div> | 4 | <u> |
5 | <div class="gird-g form default-mt"> | 5 | <span class="pointer" @click="toRegisterPage">{{$t('clarms.step1.register')}}</span>/ |
6 | <div class="form-item"> | 6 | <span class="pointer" @click="toLoginPage">{{$t('clarms.step1.login')}}</span> |
7 | <div class="label"> | 7 | </u>{{$t('clarms.step1.t1')}}</div> |
8 | {{$t('clarms.step1.label1')}} | 8 | <div class="form-name default-mt"> {{$t('clarms.step1.label0')}}</div> |
9 | </div> | 9 | <div class="gird-g form default-mt"> |
10 | <div class="ipt-wrap"> | 10 | <div class="form-item"> |
11 | <input class="ipt" type="text" v-model="data.lastName"> | 11 | <div class="label"> |
12 | </div> | 12 | {{$t('clarms.step1.label1')}} |
13 | </div> | 13 | </div> |
14 | <div class="ipt-wrap"> | ||
15 | <div class="cont"> | ||
16 | <input class="ipt" type="text" v-model="data.lastName"> | ||
17 | </div> | ||
18 | </div> | ||
19 | </div> | ||
14 | 20 | ||
15 | <div class="form-item"> | 21 | <div class="form-item"> |
16 | <div class="label"> | 22 | <div class="label"> |
17 | {{$t('clarms.step1.label2')}} | 23 | {{$t('clarms.step1.label2')}} |
18 | </div> | 24 | </div> |
19 | <div class="ipt-wrap"> | 25 | <div class="ipt-wrap"> |
20 | <input class="ipt" type="text" v-model="data.firstName"> | 26 | <div class="cont"> |
21 | </div> | ||
22 | </div> | ||
23 | 27 | ||
24 | <div class="form-item"> | 28 | <input class="ipt" type="text" v-model="data.firstName"> |
25 | <div class="label"> | 29 | </div> |
26 | {{$t('clarms.step1.label3')}} | 30 | </div> |
27 | </div> | 31 | </div> |
28 | <div class="ipt-wrap"> | ||
29 | <div class="down-arrow"></div> | ||
30 | <el-select class="ipt" v-model="data.idType" :placeholder="$t('clarms.step2.placeHolder1')"> | ||
31 | <el-option v-for="(item, index) in policyIdTypeList" :key="index" :label="item.n" :value="item.v"></el-option> | ||
32 | </el-select> | ||
33 | </div> | ||
34 | </div> | ||
35 | 32 | ||
36 | <div class="form-item"> | 33 | <div class="form-item"> |
37 | <div class="label"> | 34 | <div class="label"> |
38 | {{$t('clarms.step1.label4')}} | 35 | {{$t('clarms.step1.label3')}} |
39 | </div> | 36 | </div> |
40 | <div class="ipt-wrap"> | 37 | <div class="ipt-wrap"> |
41 | <input class="ipt" type="text" v-model="data.idNo"> | 38 | <div class="down-arrow"></div> |
42 | </div> | 39 | <div class="cont"> |
43 | </div> | 40 | <el-select class="ipt" v-model="data.idType" :placeholder="$t('clarms.step2.placeHolder1')"> |
41 | <el-option v-for="(item, index) in policyIdTypeList" :key="index" :label="item.n" :value="item.v"></el-option> | ||
42 | </el-select> | ||
43 | </div> | ||
44 | 44 | ||
45 | <div class="form-item"> | 45 | </div> |
46 | <div class="label"> | 46 | </div> |
47 | {{$t('clarms.step1.label5')}} | 47 | |
48 | </div> | 48 | <div class="form-item"> |
49 | <div class="ipt-wrap"> | 49 | <div class="label"> |
50 | <div class="down-arrow"></div> | 50 | {{$t('clarms.step1.label4')}} |
51 | <date-picker class="ipt-date" v-model="data.birthDate" :filtModel="['future']" :check="checkDate" :cusStyle="{border:'none !important','background-color':'transparent !important',height:'3rem', padding:'0', color:'#606266'}"></date-picker> | 51 | </div> |
52 | </div> | 52 | <div class="ipt-wrap"> |
53 | </div> | 53 | <div class="cont"> |
54 | </div> | 54 | <input class="ipt" type="text" v-model="data.idNo"> |
55 | <div class="submit-btn pointer flex-center" @click="handleConfirm" :class="{disabled : btnDisabled}"> | 55 | </div> |
56 | <van-loading v-if="loading" /> | 56 | </div> |
57 | <span>{{$t('clarms.step1.btn')}}</span> | 57 | </div> |
58 | </div> | 58 | |
59 | <div class="tips" v-if="showTips"> | 59 | <div class="form-item"> |
60 | <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt=""> | 60 | <div class="label"> |
61 | <div class="txt"> | 61 | {{$t('clarms.step1.label5')}} |
62 | {{$t('clarms.step1.noPolicy')}} | 62 | </div> |
63 | <span class="pointer btn" @click="toContactUs">{{$t('clarms.step1.customService')}}</span> | 63 | <div class="ipt-wrap"> |
64 | </div> | 64 | <div class="down-arrow"></div> |
65 | </div> | 65 | <div class="cont"> |
66 | </div> | 66 | <date-picker class="ipt-date" v-model="data.birthDate" :filtModel="['future']" :check="checkDate" :cusStyle="{border:'none !important','background-color':'transparent !important',height:'48px', padding:'0', color:'#606266'}"></date-picker> |
67 | </div> | ||
68 | </div> | ||
69 | </div> | ||
70 | </div> | ||
71 | <div class="submit-btn pointer flex-center" @click="handleConfirm" :class="{disabled : btnDisabled}"> | ||
72 | <van-loading v-if="loading" /> | ||
73 | <span>{{$t('clarms.step1.btn')}}</span> | ||
74 | </div> | ||
75 | <div class="tips" v-if="showTips"> | ||
76 | <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt=""> | ||
77 | <div class="txt"> | ||
78 | {{$t('clarms.step1.noPolicy')}} | ||
79 | <span class="pointer btn" @click="toContactUs">{{$t('clarms.step1.customService')}}</span> | ||
80 | </div> | ||
81 | </div> | ||
82 | </div> | ||
67 | </template> | 83 | </template> |
68 | 84 | ||
69 | <script src="./clarms-plugins-verifyform.js"></script> | 85 | <script src="./clarms-plugins-verifyform.js"></script> | ... | ... |
1 | @import '@/styles/_support'; | 1 | @import '@/styles/_support'; |
2 | 2 | ||
3 | $borderSize:8px; | ||
4 | |||
3 | .content { | 5 | .content { |
4 | // padding-bottom: 2.33rem; | ||
5 | margin: 2.333333rem auto; | 6 | margin: 2.333333rem auto; |
6 | position: relative; | 7 | position: relative; |
8 | |||
9 | } | ||
10 | |||
11 | .clarms { | ||
12 | background-image: linear-gradient(to right, #ffb31d, #f15907); | ||
13 | @extend .bb; | ||
14 | @extend .fcc; | ||
15 | padding: 2px; | ||
16 | border-radius: $borderSize; | ||
17 | |||
18 | &-cont { | ||
19 | width: 100%; | ||
20 | height: 100%; | ||
21 | background-color: #ffffff; | ||
22 | border-radius: $borderSize; | ||
23 | } | ||
7 | } | 24 | } |
8 | 25 | ||
9 | 26 | ||
... | @@ -13,7 +30,8 @@ input { | ... | @@ -13,7 +30,8 @@ input { |
13 | } | 30 | } |
14 | 31 | ||
15 | .orange { | 32 | .orange { |
16 | color: $cOrange; | 33 | // color: $cOrange; |
34 | color: #ff6839; | ||
17 | } | 35 | } |
18 | 36 | ||
19 | .gray { | 37 | .gray { |
... | @@ -71,9 +89,9 @@ input { | ... | @@ -71,9 +89,9 @@ input { |
71 | .reservation-container { | 89 | .reservation-container { |
72 | @extend .bb; | 90 | @extend .bb; |
73 | border-radius: .666667rem; | 91 | border-radius: .666667rem; |
74 | border: solid 2px $cOrange; | 92 | // border: solid 2px $cOrange; |
75 | background-color: #ffffff; | 93 | background-color: #ffffff; |
76 | padding: 2.666667rem 10rem 2.833333rem 10rem; | 94 | // padding: 2.666667rem 10rem 2.833333rem 10rem; |
77 | 95 | ||
78 | .title { | 96 | .title { |
79 | font-size: 1.333333rem; | 97 | font-size: 1.333333rem; |
... | @@ -118,7 +136,7 @@ input { | ... | @@ -118,7 +136,7 @@ input { |
118 | .reservation-container-2 { | 136 | .reservation-container-2 { |
119 | @extend .bb; | 137 | @extend .bb; |
120 | border-radius: .666667rem; | 138 | border-radius: .666667rem; |
121 | border: solid .083333rem $cOrange; | 139 | // border: solid .083333rem $cOrange; |
122 | background-color: #ffffff; | 140 | background-color: #ffffff; |
123 | padding: 1.666667rem 10rem 2.833333rem 10rem; | 141 | padding: 1.666667rem 10rem 2.833333rem 10rem; |
124 | 142 | ... | ... |
... | @@ -8,29 +8,32 @@ | ... | @@ -8,29 +8,32 @@ |
8 | </div> | 8 | </div> |
9 | </div> | 9 | </div> |
10 | <div class="content clarms"> | 10 | <div class="content clarms"> |
11 | <template v-if="step == 3"> | 11 | <div class="clarms-cont"> |
12 | <div class="alert"> | 12 | <template v-if="step == 3"> |
13 | <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt=""> | 13 | <div class="alert"> |
14 | <div class="txt"> | 14 | <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt=""> |
15 | {{$t('customService.unauth.baseInfoTip')}} | 15 | <div class="txt"> |
16 | <span class="pointer btn" @click="gotoInformationPage">{{$t('customService.unauth.infoBtn')}}</span> | 16 | {{$t('customService.unauth.baseInfoTip')}} |
17 | {{$t('customService.unauth.baseInfoTail')}} | 17 | <span class="pointer btn" @click="gotoInformationPage">{{$t('customService.unauth.infoBtn')}}</span> |
18 | {{$t('customService.unauth.baseInfoTail')}} | ||
19 | </div> | ||
20 | <!-- <img class="pointer close" src="@/assets/images/common/icon-alert-close.png" alt=""> --> | ||
18 | </div> | 21 | </div> |
19 | <!-- <img class="pointer close" src="@/assets/images/common/icon-alert-close.png" alt=""> --> | ||
20 | </div> | ||
21 | </template> | ||
22 | <clarms-modal-one v-if="showModal1" @close="showModal1 = false"></clarms-modal-one> | ||
23 | <clarms-modal-two v-if="showModal2" @close="showModal2 = false"></clarms-modal-two> | ||
24 | <div class="mobile-margin"> | ||
25 | |||
26 | <template v-if="step == 1"> | ||
27 | <clarms-verify-form @insuredInfoList="handleInsuredInfo"></clarms-verify-form> | ||
28 | </template> | 22 | </template> |
23 | <clarms-modal-one v-if="showModal1" @close="showModal1 = false"></clarms-modal-one> | ||
24 | <clarms-modal-two @close="showModal2 = false"></clarms-modal-two> | ||
25 | <div class="mobile-margin"> | ||
29 | 26 | ||
30 | <template v-if="step == 2"> | 27 | <template v-if="step == 1"> |
31 | <clarms-material :insuredList="customerList" :cid="cid" @showModal="handleShowModal"></clarms-material> | 28 | <clarms-verify-form @insuredInfoList="handleInsuredInfo"></clarms-verify-form> |
32 | </template> | 29 | </template> |
30 | |||
31 | <template v-if="step == 2"> | ||
32 | <clarms-material :insuredList="customerList" :cid="cid" @showModal="handleShowModal"></clarms-material> | ||
33 | </template> | ||
34 | </div> | ||
33 | </div> | 35 | </div> |
36 | |||
34 | </div> | 37 | </div> |
35 | </div> | 38 | </div> |
36 | 39 | ... | ... |
... | @@ -36,6 +36,13 @@ export default { | ... | @@ -36,6 +36,13 @@ export default { |
36 | if (a == "m4") { | 36 | if (a == "m4") { |
37 | a = "m41" | 37 | a = "m41" |
38 | } | 38 | } |
39 | if(a == "m5"){ | ||
40 | this.$router.push({ | ||
41 | path: "/clarms", | ||
42 | query: {} | ||
43 | }); | ||
44 | return; | ||
45 | } | ||
39 | this.$router.push({ | 46 | this.$router.push({ |
40 | path: "/custom/service", | 47 | path: "/custom/service", |
41 | query: { | 48 | query: { |
... | @@ -54,6 +61,13 @@ export default { | ... | @@ -54,6 +61,13 @@ export default { |
54 | }, | 61 | }, |
55 | created() { | 62 | created() { |
56 | let activity = this.$route.query.q; | 63 | let activity = this.$route.query.q; |
64 | if(activity == "m5"){ | ||
65 | this.$router.push({ | ||
66 | path: "/clarms", | ||
67 | query: {} | ||
68 | }); | ||
69 | return; | ||
70 | } | ||
57 | this.$set(this, 'activity', activity); | 71 | this.$set(this, 'activity', activity); |
58 | }, | 72 | }, |
59 | components: { | 73 | components: { | ... | ... |
-
Please register or sign in to post a comment