Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
18c697e5 by simon
Options

默认提交

1 parent ded81416
Inline Side-by-side
Showing 13 changed files with 219 additions and 70 deletions
...@@ -438,6 +438,7 @@ textarea { ...@@ -438,6 +438,7 @@ textarea {
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 }
......
1 <template> 1 <template>
2 2
3 <div class="comp"> 3 <div class="comp clarms-plugins-material">
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">
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
19 <div class="title default-mt"> 19 <div class="title default-mt">
20 <span class="t1">{{$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 <div class="down-arrow"></div>
22 <el-select class="clarms-select" v-model="data.insuredIndex" :placeholder="$t('clarms.step2.placeHolder1')"> 23 <el-select class="clarms-select" v-model="data.insuredIndex" :placeholder="$t('clarms.step2.placeHolder1')">
23 <template v-if="lan == 'en'"> 24 <template v-if="lan == 'en'">
24 <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">
...@@ -32,7 +33,7 @@ ...@@ -32,7 +33,7 @@
32 </div> 33 </div>
33 <span class="t1">{{$t('clarms.step2.label2')}}</span> 34 <span class="t1">{{$t('clarms.step2.label2')}}</span>
34 </div> 35 </div>
35 <hr> 36 <hr v-if="data.insuredIndex">
36 <div class="gird-g form default-mt"> 37 <div class="gird-g form default-mt">
37 <div class="pure-u-1 form-item-2" v-if="data.insuredIndex"> 38 <div class="pure-u-1 form-item-2" v-if="data.insuredIndex">
38 <div class="label"> 39 <div class="label">
...@@ -68,7 +69,9 @@ ...@@ -68,7 +69,9 @@
68 <span>{{$t('clarms.step2.op5')}}</span> 69 <span>{{$t('clarms.step2.op5')}}</span>
69 </div> 70 </div>
70 </div> 71 </div>
71 <div class="tips"><img src="@/assets/images/clarms/impor.png"> <span>{{$t('clarms.step2.label5')}}</span></div> 72 <div class="tips"><img src="@/assets/images/clarms/impor.png">
73 <span>{{$t('clarms.step2.label5')}}</span>
74 </div>
72 </div> 75 </div>
73 </div> 76 </div>
74 77
...@@ -85,7 +88,9 @@ ...@@ -85,7 +88,9 @@
85 <input class="ipt2" type="number" v-model="data.amount" @blur="amountCheck"> 88 <input class="ipt2" type="number" v-model="data.amount" @blur="amountCheck">
86 </div> 89 </div>
87 </div> 90 </div>
88 <div class="tips"><img src="@/assets/images/clarms/impor.png"> <span>{{$t('clarms.step2.label8')}}</span></div> 91 <div class="tips"><img src="@/assets/images/clarms/impor.png">
92 <span>{{$t('clarms.step2.label8')}}</span>
93 </div>
89 </div> 94 </div>
90 </div> 95 </div>
91 96
...@@ -98,7 +103,11 @@ ...@@ -98,7 +103,11 @@
98 <div class="value"> 103 <div class="value">
99 <div class="ipt-wrap date-container"> 104 <div class="ipt-wrap date-container">
100 <div class="down-arrow"></div> 105 <div class="down-arrow"></div>
101 <date-picker class="ipt-date" v-model="data.contactDate" :filtModel="['future']" :check="checkDate" :cusStyle="{border:'none !important','background-color':'transparent !important',height:'3rem', 'color':'#f05a23','font-weight':'600'}"></date-picker> 106 <div class="cont">
107 <div class="ipt-date">
108 <date-picker v-model="data.contactDate" :filtModel="['future']" :check="checkDate" :cusStyle="{border:'none !important','background-color':'transparent !important', 'color':'#ff6839','font-weight':'600'}"></date-picker>
109 </div>
110 </div>
102 </div> 111 </div>
103 </div> 112 </div>
104 </div> 113 </div>
...@@ -130,7 +139,8 @@ ...@@ -130,7 +139,8 @@
130 </div> 139 </div>
131 </template> 140 </template>
132 </div> 141 </div>
133 <hr v-if="data.amount > 0" > 142 <template v-if="(data.HT41 && data.HT41.length > 0) && (data.HT26 && data.HT26.length > 0)">
143 <hr v-if="data.amount > 0">
134 <div class="bottom-tip orange mt20">{{$t('clarms.step2.label17')}}</div> 144 <div class="bottom-tip orange mt20">{{$t('clarms.step2.label17')}}</div>
135 <div class="bottom-tip gray mt10">{{$t('clarms.step2.tip1')}}</div> 145 <div class="bottom-tip gray mt10">{{$t('clarms.step2.tip1')}}</div>
136 146
...@@ -145,8 +155,7 @@ ...@@ -145,8 +155,7 @@
145 </div> 155 </div>
146 156
147 <div class="submit-btn pointer flex-center" :class="{disabled: submitBtnDisabled || showTips}" @click="submitMaterial"> 157 <div class="submit-btn pointer flex-center" :class="{disabled: submitBtnDisabled || showTips}" @click="submitMaterial">
148 <van-loading v-if="loading" /> 158 <van-loading v-if="loading" /> {{$t('clarms.step2.btn')}}
149 {{$t('clarms.step2.btn')}}
150 </div> 159 </div>
151 160
152 <div class="contact" v-if="!showTips" @click="toContact">{{$t('clarms.step2.contact')}}</div> 161 <div class="contact" v-if="!showTips" @click="toContact">{{$t('clarms.step2.contact')}}</div>
...@@ -158,6 +167,9 @@ ...@@ -158,6 +167,9 @@
158 <span class="pointer btn" @click="toContact">{{$t('clarms.step2.failureContact')}}</span> 167 <span class="pointer btn" @click="toContact">{{$t('clarms.step2.failureContact')}}</span>
159 </div> 168 </div>
160 </div> 169 </div>
170
171 </template>
172
161 </div> 173 </div>
162 </template> 174 </template>
163 </div> 175 </div>
...@@ -168,3 +180,14 @@ ...@@ -168,3 +180,14 @@
168 <style lang="scss" scoped> 180 <style lang="scss" scoped>
169 @import "./clarms-plugins-material.scss"; 181 @import "./clarms-plugins-material.scss";
170 </style> 182 </style>
183
184 <style lang="scss">
185 .clarms-plugins-material {
186 .clarms-select {
187 .el-input__inner {
188 height: 58px;
189 border-radius: 8px;
190 }
191 }
192 }
193 </style>
......
...@@ -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;
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
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="border">
5 <div class="modal"> 6 <div class="modal">
6 <div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div> 7 <div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div>
7 <div class="content"> 8 <div class="content">
...@@ -9,7 +10,9 @@ ...@@ -9,7 +10,9 @@
9 <img src="@/assets/images/clarms/info.png"> 10 <img src="@/assets/images/clarms/info.png">
10 </div> 11 </div>
11 <div class="message"> 12 <div class="message">
12 {{$t('clarms.step2.tip5')}}<span @click="toContact">{{$t('clarms.step2.tip6')}}</span> 13 {{$t('clarms.step2.tip5')}}
14 <span @click="toContact">{{$t('clarms.step2.tip6')}}</span>
15 </div>
13 </div> 16 </div>
14 </div> 17 </div>
15 </div> 18 </div>
......
...@@ -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 {
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
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="border">
5 <div class="modal"> 6 <div class="modal">
6 <div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div> 7 <div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div>
7 <div class="content"> 8 <div class="content">
...@@ -9,11 +10,14 @@ ...@@ -9,11 +10,14 @@
9 <img src="@/assets/images/clarms/suc.png"> 10 <img src="@/assets/images/clarms/suc.png">
10 </div> 11 </div>
11 <div class="message"> 12 <div class="message">
12 {{$t('clarms.step2.tip7')}}<span @click="toAccountInformation">{{$t('clarms.step2.tip8')}}</span> 13 {{$t('clarms.step2.tip7')}}
14 <span @click="toAccountInformation">{{$t('clarms.step2.tip8')}}</span>
13 </div> 15 </div>
14 </div> 16 </div>
15 </div> 17 </div>
16 </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 <u>
5 <span class="pointer" @click="toRegisterPage">{{$t('clarms.step1.register')}}</span>/
6 <span class="pointer" @click="toLoginPage">{{$t('clarms.step1.login')}}</span>
7 </u>{{$t('clarms.step1.t1')}}</div>
4 <div class="form-name default-mt"> {{$t('clarms.step1.label0')}}</div> 8 <div class="form-name default-mt"> {{$t('clarms.step1.label0')}}</div>
5 <div class="gird-g form default-mt"> 9 <div class="gird-g form default-mt">
6 <div class="form-item"> 10 <div class="form-item">
...@@ -8,18 +12,23 @@ ...@@ -8,18 +12,23 @@
8 {{$t('clarms.step1.label1')}} 12 {{$t('clarms.step1.label1')}}
9 </div> 13 </div>
10 <div class="ipt-wrap"> 14 <div class="ipt-wrap">
15 <div class="cont">
11 <input class="ipt" type="text" v-model="data.lastName"> 16 <input class="ipt" type="text" v-model="data.lastName">
12 </div> 17 </div>
13 </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">
26 <div class="cont">
27
20 <input class="ipt" type="text" v-model="data.firstName"> 28 <input class="ipt" type="text" v-model="data.firstName">
21 </div> 29 </div>
22 </div> 30 </div>
31 </div>
23 32
24 <div class="form-item"> 33 <div class="form-item">
25 <div class="label"> 34 <div class="label">
...@@ -27,10 +36,13 @@ ...@@ -27,10 +36,13 @@
27 </div> 36 </div>
28 <div class="ipt-wrap"> 37 <div class="ipt-wrap">
29 <div class="down-arrow"></div> 38 <div class="down-arrow"></div>
39 <div class="cont">
30 <el-select class="ipt" v-model="data.idType" :placeholder="$t('clarms.step2.placeHolder1')"> 40 <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> 41 <el-option v-for="(item, index) in policyIdTypeList" :key="index" :label="item.n" :value="item.v"></el-option>
32 </el-select> 42 </el-select>
33 </div> 43 </div>
44
45 </div>
34 </div> 46 </div>
35 47
36 <div class="form-item"> 48 <div class="form-item">
...@@ -38,9 +50,11 @@ ...@@ -38,9 +50,11 @@
38 {{$t('clarms.step1.label4')}} 50 {{$t('clarms.step1.label4')}}
39 </div> 51 </div>
40 <div class="ipt-wrap"> 52 <div class="ipt-wrap">
53 <div class="cont">
41 <input class="ipt" type="text" v-model="data.idNo"> 54 <input class="ipt" type="text" v-model="data.idNo">
42 </div> 55 </div>
43 </div> 56 </div>
57 </div>
44 58
45 <div class="form-item"> 59 <div class="form-item">
46 <div class="label"> 60 <div class="label">
...@@ -48,7 +62,9 @@ ...@@ -48,7 +62,9 @@
48 </div> 62 </div>
49 <div class="ipt-wrap"> 63 <div class="ipt-wrap">
50 <div class="down-arrow"></div> 64 <div class="down-arrow"></div>
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> 65 <div class="cont">
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>
52 </div> 68 </div>
53 </div> 69 </div>
54 </div> 70 </div>
......
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,6 +8,7 @@ ...@@ -8,6 +8,7 @@
8 </div> 8 </div>
9 </div> 9 </div>
10 <div class="content clarms"> 10 <div class="content clarms">
11 <div class="clarms-cont">
11 <template v-if="step == 3"> 12 <template v-if="step == 3">
12 <div class="alert"> 13 <div class="alert">
13 <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt=""> 14 <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
...@@ -20,7 +21,7 @@ ...@@ -20,7 +21,7 @@
20 </div> 21 </div>
21 </template> 22 </template>
22 <clarms-modal-one v-if="showModal1" @close="showModal1 = false"></clarms-modal-one> 23 <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 <clarms-modal-two @close="showModal2 = false"></clarms-modal-two>
24 <div class="mobile-margin"> 25 <div class="mobile-margin">
25 26
26 <template v-if="step == 1"> 27 <template v-if="step == 1">
...@@ -32,6 +33,8 @@ ...@@ -32,6 +33,8 @@
32 </template> 33 </template>
33 </div> 34 </div>
34 </div> 35 </div>
36
37 </div>
35 </div> 38 </div>
36 39
37 </template> 40 </template>
......
...@@ -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: {
......