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 464 additions and 315 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 }
......
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">
7 <div class="tips"> 7 <div class="tips">
8 <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt=""> 8 <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
9 <div class="txt"> 9 <div class="txt">
10 {{$t('customService.insuranceQuery.noPolicy')}} 10 {{$t('customService.insuranceQuery.noPolicy')}}
11 <span class="pointer btn" @click="toContactUs">{{$t('customService.insuranceQuery.customService')}}</span> 11 <span class="pointer btn" @click="toContactUs">{{$t('customService.insuranceQuery.customService')}}</span>
12 </div> 12 </div>
13 </div> 13 </div>
14 </div> 14 </div>
15 </div> 15 </div>
16 </template> 16 </template>
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 <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 <div class="down-arrow"></div>
23 <template v-if="lan == 'en'"> 23 <el-select class="clarms-select" v-model="data.insuredIndex" :placeholder="$t('clarms.step2.placeHolder1')">
24 <el-option v-for="(item,index) in insuredList" :key="index" :label="item.insuredNameEn" :value="index + 1"> 24 <template v-if="lan == 'en'">
25 </el-option> 25 <el-option v-for="(item,index) in insuredList" :key="index" :label="item.insuredNameEn" :value="index + 1">
26 </template> 26 </el-option>
27 <template v-else> 27 </template>
28 <el-option v-for="(item,index) in insuredList" :key="index" :label="item.insuredNameCn" :value="index + 1"> 28 <template v-else>
29 </el-option> 29 <el-option v-for="(item,index) in insuredList" :key="index" :label="item.insuredNameCn" :value="index + 1">
30 </template> 30 </el-option>
31 </el-select> 31 </template>
32 </div> 32 </el-select>
33 <span class="t1">{{$t('clarms.step2.label2')}}</span> 33 </div>
34 </div> 34 <span class="t1">{{$t('clarms.step2.label2')}}</span>
35 <hr> 35 </div>
36 <div class="gird-g form default-mt"> 36 <hr v-if="data.insuredIndex">
37 <div class="pure-u-1 form-item-2" v-if="data.insuredIndex"> 37 <div class="gird-g form default-mt">
38 <div class="label"> 38 <div class="pure-u-1 form-item-2" v-if="data.insuredIndex">
39 <div class="main-label"> 39 <div class="label">
40 {{$t('clarms.step2.label3')}} 40 <div class="main-label">
41 </div> 41 {{$t('clarms.step2.label3')}}
42 <div class="sub-label">{{$t('clarms.step2.label4')}}</div> 42 </div>
43 </div> 43 <div class="sub-label">{{$t('clarms.step2.label4')}}</div>
44 <div class="value"> 44 </div>
45 <div class="ipt-wrap item-group"> 45 <div class="value">
46 <div class="check-item pointer" v-if="typeCandidates.indexOf('1') > -1" @click="typeClickHandle('1')"> 46 <div class="ipt-wrap item-group">
47 <img v-if="typeSelected.indexOf('1') > -1" src="@/assets/images/clarms/checked.png"> 47 <div class="check-item pointer" v-if="typeCandidates.indexOf('1') > -1" @click="typeClickHandle('1')">
48 <img v-else src="@/assets/images/clarms/uncheck.png"> 48 <img v-if="typeSelected.indexOf('1') > -1" src="@/assets/images/clarms/checked.png">
49 <span>{{$t('clarms.step2.op1')}}</span> 49 <img v-else src="@/assets/images/clarms/uncheck.png">
50 </div> 50 <span>{{$t('clarms.step2.op1')}}</span>
51 <div class="check-item pointer" v-if="typeCandidates.indexOf('2') > -1" @click="typeClickHandle('2')"> 51 </div>
52 <img v-if="typeSelected.indexOf('2') > -1" src="@/assets/images/clarms/checked.png"> 52 <div class="check-item pointer" v-if="typeCandidates.indexOf('2') > -1" @click="typeClickHandle('2')">
53 <img v-else src="@/assets/images/clarms/uncheck.png"> 53 <img v-if="typeSelected.indexOf('2') > -1" src="@/assets/images/clarms/checked.png">
54 <span>{{$t('clarms.step2.op3')}}</span> 54 <img v-else src="@/assets/images/clarms/uncheck.png">
55 </div> 55 <span>{{$t('clarms.step2.op3')}}</span>
56 <div class="check-item check-disabled"> 56 </div>
57 <img src="@/assets/images/clarms/uncheck-disabled.png"> 57 <div class="check-item check-disabled">
58 <!-- <img v-if="typeSelected.indexOf('2') > -1" src="@/assets/images/clarms/checked.png"> 58 <img src="@/assets/images/clarms/uncheck-disabled.png">
59 <!-- <img v-if="typeSelected.indexOf('2') > -1" src="@/assets/images/clarms/checked.png">
59 <img v-else src="@/assets/images/clarms/uncheck.png"> --> 60 <img v-else src="@/assets/images/clarms/uncheck.png"> -->
60 <span>{{$t('clarms.step2.op2')}}</span> 61 <span>{{$t('clarms.step2.op2')}}</span>
61 </div> 62 </div>
62 <div class="check-item check-disabled"> 63 <div class="check-item check-disabled">
63 <img src="@/assets/images/clarms/uncheck-disabled.png"> 64 <img src="@/assets/images/clarms/uncheck-disabled.png">
64 <span>{{$t('clarms.step2.op4')}}</span> 65 <span>{{$t('clarms.step2.op4')}}</span>
65 </div> 66 </div>
66 <div class="check-item check-disabled"> 67 <div class="check-item check-disabled">
67 <img src="@/assets/images/clarms/uncheck-disabled.png"> 68 <img src="@/assets/images/clarms/uncheck-disabled.png">
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">
72 </div> 73 <span>{{$t('clarms.step2.label5')}}</span>
73 </div> 74 </div>
75 </div>
76 </div>
74 77
75 <div class="pure-u-1 form-item-2 mt20" v-if="typeSelected && typeSelected.length > 0"> 78 <div class="pure-u-1 form-item-2 mt20" v-if="typeSelected && typeSelected.length > 0">
76 <div class="label"> 79 <div class="label">
77 <div class="main-label"> 80 <div class="main-label">
78 {{$t('clarms.step2.label6')}} 81 {{$t('clarms.step2.label6')}}
79 </div> 82 </div>
80 <div class="sub-label">{{$t('clarms.step2.label7')}} </div> 83 <div class="sub-label">{{$t('clarms.step2.label7')}} </div>
81 </div> 84 </div>
82 <div class="value"> 85 <div class="value">
83 <div> 86 <div>
84 <div class="ipt-wrap"> 87 <div class="ipt-wrap">
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">
89 </div> 92 <span>{{$t('clarms.step2.label8')}}</span>
90 </div> 93 </div>
94 </div>
95 </div>
91 96
92 <div class="pure-u-1 form-item-2 mt20" v-if="data.amount && data.amount > 0"> 97 <div class="pure-u-1 form-item-2 mt20" v-if="data.amount && data.amount > 0">
93 <div class="label"> 98 <div class="label">
94 <div class="main-label"> 99 <div class="main-label">
95 {{$t('clarms.step2.label9')}} 100 {{$t('clarms.step2.label9')}}
96 </div> 101 </div>
97 </div> 102 </div>
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">
102 </div> 107 <div class="ipt-date">
103 </div> 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>
104 </div> 109 </div>
110 </div>
111 </div>
112 </div>
113 </div>
105 114
106 <template v-if="data.contactDate"> 115 <template v-if="data.contactDate">
107 <div class="pure-u-1 form-item-2 mt20"> 116 <div class="pure-u-1 form-item-2 mt20">
108 <div class="label"> 117 <div class="label">
109 <div class="main-label"> 118 <div class="main-label">
110 {{$t('clarms.step2.label10')}} 119 {{$t('clarms.step2.label10')}}
111 </div> 120 </div>
112 </div> 121 </div>
113 <div class="value"> 122 <div class="value">
114 <clarms-upload :icon="require('@/assets/images/clarms/icon1.png')" :options="{name:$t('clarms.step2.label11'),imageTypeID:'HT41',imageMainTypeID:'HT11',toast:$t('clarms.step2.toast1')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload> 123 <clarms-upload :icon="require('@/assets/images/clarms/icon1.png')" :options="{name:$t('clarms.step2.label11'),imageTypeID:'HT41',imageMainTypeID:'HT11',toast:$t('clarms.step2.toast1')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload>
115 <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon2.png')" :options="{name:$t('clarms.step2.label12'),imageTypeID:'HT26',imageMainTypeID:'HT06',toast:$t('clarms.step2.toast2')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload> 124 <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon2.png')" :options="{name:$t('clarms.step2.label12'),imageTypeID:'HT26',imageMainTypeID:'HT06',toast:$t('clarms.step2.toast2')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload>
116 </div> 125 </div>
117 </div> 126 </div>
118 127
119 <div class="pure-u-1 form-item-2 mt20"> 128 <div class="pure-u-1 form-item-2 mt20">
120 <div class="label"> 129 <div class="label">
121 <div class="main-label"> 130 <div class="main-label">
122 {{$t('clarms.step2.label13')}} 131 {{$t('clarms.step2.label13')}}
123 </div> 132 </div>
124 </div> 133 </div>
125 <div class="value"> 134 <div class="value">
126 <clarms-upload :icon="require('@/assets/images/clarms/icon3.png')" :options="{name:$t('clarms.step2.label14'),imageTypeID:'HT29',imageMainTypeID:'HT06',toast:$t('clarms.step2.toast3')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload> 135 <clarms-upload :icon="require('@/assets/images/clarms/icon3.png')" :options="{name:$t('clarms.step2.label14'),imageTypeID:'HT29',imageMainTypeID:'HT06',toast:$t('clarms.step2.toast3')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload>
127 <clarms-upload id="sc" ref="sc" class="mt20" :icon="require('@/assets/images/clarms/icon4.png')" :options="{name:$t('clarms.step2.label15'),imageTypeID:'HT34',imageMainTypeID:'HT08',toast:$t('clarms.step2.toast4')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload> 136 <clarms-upload id="sc" ref="sc" class="mt20" :icon="require('@/assets/images/clarms/icon4.png')" :options="{name:$t('clarms.step2.label15'),imageTypeID:'HT34',imageMainTypeID:'HT08',toast:$t('clarms.step2.toast4')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload>
128 <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon5.png')" :options="{name:$t('clarms.step2.label16'),imageTypeID:'HT16',imageMainTypeID:'HT03',toast:$t('clarms.step2.toast5')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload> 137 <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon5.png')" :options="{name:$t('clarms.step2.label16'),imageTypeID:'HT16',imageMainTypeID:'HT03',toast:$t('clarms.step2.toast5')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload>
129 </div> 138 </div>
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)">
134 <div class="bottom-tip orange mt20">{{$t('clarms.step2.label17')}}</div> 143 <hr v-if="data.amount > 0">
135 <div class="bottom-tip gray mt10">{{$t('clarms.step2.tip1')}}</div> 144 <div class="bottom-tip orange mt20">{{$t('clarms.step2.label17')}}</div>
145 <div class="bottom-tip gray mt10">{{$t('clarms.step2.tip1')}}</div>
136 146
137 <div class="bottom-tip orange mt20">{{$t('clarms.step2.label18')}}</div> 147 <div class="bottom-tip orange mt20">{{$t('clarms.step2.label18')}}</div>
138 <div class="bottom-tip gray mt10">{{$t('clarms.step2.tip2')}}</div> 148 <div class="bottom-tip gray mt10">{{$t('clarms.step2.tip2')}}</div>
139 <div class="bottom-tip gray mt10">{{$t('clarms.step2.tip3')}}</div> 149 <div class="bottom-tip gray mt10">{{$t('clarms.step2.tip3')}}</div>
140 150
141 <div class="bottom-tip orange mt10 pointer" @click="agress = !agress"> 151 <div class="bottom-tip orange mt10 pointer" @click="agress = !agress">
142 <img v-if="agress" src="@/assets/images/clarms/checked.png"> 152 <img v-if="agress" src="@/assets/images/clarms/checked.png">
143 <img v-else src="@/assets/images/clarms/uncheck.png"> 153 <img v-else src="@/assets/images/clarms/uncheck.png">
144 <span>{{$t('clarms.step2.tip4')}}</span> 154 <span>{{$t('clarms.step2.tip4')}}</span>
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')}} 159 </div>
150 </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>
153 162
154 <div class="fail-tips" v-if="showTips"> 163 <div class="fail-tips" v-if="showTips">
155 <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt=""> 164 <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
156 <div class="txt"> 165 <div class="txt">
157 {{$t('clarms.step2.failure')}} 166 {{$t('clarms.step2.failure')}}
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>
161 </div> 170
162 </template> 171 </template>
163 </div> 172
173 </div>
174 </template>
175 </div>
164 176
165 </template> 177 </template>
166 178
...@@ -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;
......
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')}}&nbsp; 15 <div class="txt">
16 <span class="pointer btn" @click="gotoInformationPage">{{$t('customService.unauth.infoBtn')}}</span> 16 {{$t('customService.unauth.baseInfoTip')}}&nbsp;
17 &nbsp;{{$t('customService.unauth.baseInfoTail')}} 17 <span class="pointer btn" @click="gotoInformationPage">{{$t('customService.unauth.infoBtn')}}</span>
18 &nbsp;{{$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: {
......