Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
b8d2cdc5 by joe
Options

修改样式

1 parent 8da1eaf7
Expand all
Inline Side-by-side
Showing 7 changed files with 65 additions and 27 deletions
...@@ -60,9 +60,11 @@ export default { ...@@ -60,9 +60,11 @@ export default {
60 type: Function, 60 type: Function,
61 default: null 61 default: null
62 }, 62 },
63 showStyle: { 63 cusStyle: {
64 type: Boolean, 64 type: Object,
65 default: true 65 default() {
66 return {};
67 }
66 }, 68 },
67 }, 69 },
68 data() { 70 data() {
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 <div class="comp"> 3 <div class="comp">
4 <div class="date-mask" v-if="visible" @click="showCalendar()"></div> 4 <div class="date-mask" v-if="visible" @click="showCalendar()"></div>
5 <div class="ipt-wrap" :class="{'readonly':readonly}"> 5 <div class="ipt-wrap" :class="{'readonly':readonly}">
6 <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" @click="showCalendar(true)" :class="{ipt: showStyle}" type="type" :readonly="readonly" :placeholder="placeholder || $t('form.datePicker.datePlaceholder')"> 6 <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" @click="showCalendar(true)" class="ipt" :style="cusStyle" type="type" :readonly="readonly" :placeholder="placeholder || $t('form.datePicker.datePlaceholder')">
7 </div> 7 </div>
8 <div v-if="visible" class="date-wrap"> 8 <div v-if="visible" class="date-wrap">
9 <div class="calendar-wrap"> 9 <div class="calendar-wrap">
......
...@@ -47,7 +47,12 @@ export default { ...@@ -47,7 +47,12 @@ export default {
47 } else { 47 } else {
48 this.typeSelected.push(t); 48 this.typeSelected.push(t);
49 } 49 }
50 } 50 },
51 toContact() {
52 this.$router.push({
53 path: "/custom/service?q=m1"
54 });
55 },
51 }, 56 },
52 watch: { 57 watch: {
53 58
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 3
4
5 input { 4 input {
6 padding: 0 2.083333rem; 5 padding: 0 2.083333rem;
7 color: #333333; 6 color: #333333;
...@@ -15,6 +14,7 @@ input { ...@@ -15,6 +14,7 @@ input {
15 color: #747474; 14 color: #747474;
16 } 15 }
17 16
17 .value .ipt-wrap .comp .ipt-wrap .ipt {}
18 18
19 .submit-btn{ 19 .submit-btn{
20 background: url("~@assets/images/vhis/vhis-btn.png"); 20 background: url("~@assets/images/vhis/vhis-btn.png");
...@@ -144,6 +144,10 @@ input { ...@@ -144,6 +144,10 @@ input {
144 margin-left: .833333rem; 144 margin-left: .833333rem;
145 } 145 }
146 146
147 .mr10 {
148 margin-right: .833333rem;
149 }
150
147 .mt20 { 151 .mt20 {
148 margin-top: 1.666667rem; 152 margin-top: 1.666667rem;
149 } 153 }
...@@ -160,6 +164,7 @@ input { ...@@ -160,6 +164,7 @@ input {
160 margin-top: .833333rem ; 164 margin-top: .833333rem ;
161 text-align: center; 165 text-align: center;
162 width: 8.333333rem ; 166 width: 8.333333rem ;
167 letter-spacing: 1px;
163 } 168 }
164 169
165 .upload-icon-1 { 170 .upload-icon-1 {
...@@ -254,6 +259,15 @@ input { ...@@ -254,6 +259,15 @@ input {
254 padding-left: 15px; 259 padding-left: 15px;
255 } 260 }
256 261
262 .ipt-date {
263 width: 100%;
264 border: 1px solid $cOrange !important;
265 border-radius: .416667rem ;
266 height: 3rem;
267 align-items: center;
268 padding-left: .833333rem;
269 }
270
257 &-item { 271 &-item {
258 width: 50%; 272 width: 50%;
259 display: flex; 273 display: flex;
...@@ -339,6 +353,11 @@ input { ...@@ -339,6 +353,11 @@ input {
339 } 353 }
340 } 354 }
341 355
356 .date-container {
357 width: 60%;
358 position: relative;
359 }
360
342 .value { 361 .value {
343 width: 75%; 362 width: 75%;
344 position: relative; 363 position: relative;
...@@ -353,6 +372,7 @@ input { ...@@ -353,6 +372,7 @@ input {
353 align-items: center; 372 align-items: center;
354 } 373 }
355 374
375
356 .ipt2 { 376 .ipt2 {
357 width: 100%; 377 width: 100%;
358 border-bottom: 1px solid #ccc; 378 border-bottom: 1px solid #ccc;
...@@ -438,7 +458,6 @@ input { ...@@ -438,7 +458,6 @@ input {
438 } 458 }
439 459
440 @media (max-width: 1000px) { 460 @media (max-width: 1000px) {
441
442 .reservation-container-2 { 461 .reservation-container-2 {
443 padding: 1.666667rem 2rem 2.833333rem 2rem; 462 padding: 1.666667rem 2rem 2.833333rem 2rem;
444 } 463 }
...@@ -454,11 +473,16 @@ input { ...@@ -454,11 +473,16 @@ input {
454 width: 70%; 473 width: 70%;
455 } 474 }
456 } 475 }
476
477 &-item-2 {
478 .date-container {
479 width: 80%;
480 }
481 }
457 } 482 }
458 } 483 }
459 484
460 @media (max-width: 600px) { 485 @media (max-width: 600px) {
461
462 .reservation-container { 486 .reservation-container {
463 padding: 2.666667rem 2rem 2.833333rem 2rem; 487 padding: 2.666667rem 2rem 2.833333rem 2rem;
464 } 488 }
...@@ -491,6 +515,10 @@ input { ...@@ -491,6 +515,10 @@ input {
491 .value { 515 .value {
492 width: 70%; 516 width: 70%;
493 } 517 }
518
519 .date-container {
520 width: 100%;
521 }
494 } 522 }
495 523
496 &-item3 { 524 &-item3 {
...@@ -507,3 +535,10 @@ input { ...@@ -507,3 +535,10 @@ input {
507 margin: 0; 535 margin: 0;
508 } 536 }
509 } 537 }
538
539
540 @media (max-width: 400px) {
541 .reservation-container-2 {
542 padding: 1.666667rem 1rem;
543 }
544 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
50 </div> 50 </div>
51 <div class="ipt-wrap"> 51 <div class="ipt-wrap">
52 <div class="down-arrow"></div> 52 <div class="down-arrow"></div>
53 <date-picker class="ipt" v-model="data.contactDate" :check="checkDate" :showStyle="false"></date-picker> 53 <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>
54 </div> 54 </div>
55 </div> 55 </div>
56 </div> 56 </div>
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
67 </div> 67 </div>
68 <hr> 68 <hr>
69 <div class="gird-g form default-mt"> 69 <div class="gird-g form default-mt">
70 <div class="pure-u-1 pure-u-md-1-2 form-item-2"> 70 <div class="pure-u-1 form-item-2">
71 <div class="label"> 71 <div class="label">
72 <div class="main-label"> 72 <div class="main-label">
73 {{$t('clarms.step2.label3')}} 73 {{$t('clarms.step2.label3')}}
...@@ -106,15 +106,15 @@ ...@@ -106,15 +106,15 @@
106 </div> 106 </div>
107 </div> 107 </div>
108 108
109 <div class="pure-u-1 pure-u-md-1-2 form-item-2 mt20"> 109 <div class="pure-u-1 form-item-2 mt20">
110 <div class="label"> 110 <div class="label">
111 <div class="main-label"> 111 <div class="main-label">
112 {{$t('clarms.step2.label6')}} 112 {{$t('clarms.step2.label6')}}
113 </div> 113 </div>
114 <div class="sub-label">{{$t('clarms.step2.label7')}} </div> 114 <div class="sub-label">{{$t('clarms.step2.label7')}} </div>
115 </div> 115 </div>
116 <div>
117 <div class="value"> 116 <div class="value">
117 <div >
118 <div class="ipt-wrap"> 118 <div class="ipt-wrap">
119 <input class="ipt2" type="number"> 119 <input class="ipt2" type="number">
120 </div> 120 </div>
...@@ -123,23 +123,21 @@ ...@@ -123,23 +123,21 @@
123 </div> 123 </div>
124 </div> 124 </div>
125 125
126 <div class="pure-u-1 pure-u-md-1-2 form-item-2 mt20"> 126 <div class="pure-u-1 form-item-2 mt20">
127 <div class="label"> 127 <div class="label">
128 <div class="main-label"> 128 <div class="main-label">
129 {{$t('clarms.step2.label9')}} 129 {{$t('clarms.step2.label9')}}
130 </div> 130 </div>
131 </div> 131 </div>
132 <div>
133 <div class="value"> 132 <div class="value">
134 <div class="ipt-wrap item-group"> 133 <div class="ipt-wrap date-container">
135 <div class="down-arrow"></div> 134 <div class="down-arrow"></div>
136 <date-picker class="ipt" v-model="data.contactDate" :check="checkDate" :showStyle="false"></date-picker> 135 <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>
137 </div>
138 </div> 136 </div>
139 </div> 137 </div>
140 </div> 138 </div>
141 139
142 <div class="pure-u-1 pure-u-md-1-2 form-item-2 mt20"> 140 <div class="pure-u-1 form-item-2 mt20">
143 <div class="label"> 141 <div class="label">
144 <div class="main-label"> 142 <div class="main-label">
145 {{$t('clarms.step2.label10')}} 143 {{$t('clarms.step2.label10')}}
...@@ -160,32 +158,30 @@ ...@@ -160,32 +158,30 @@
160 </div> 158 </div>
161 </div> 159 </div>
162 160
163 <div class="pure-u-1 pure-u-md-1-2 form-item-2 mt20"> 161 <div class="pure-u-1 form-item-2 mt20">
164 <div class="label"> 162 <div class="label">
165 <div class="main-label"> 163 <div class="main-label">
166 {{$t('clarms.step2.label13')}} 164 {{$t('clarms.step2.label13')}}
167 </div> 165 </div>
168 </div> 166 </div>
169 <div> 167 <div class="value pure-g">
170 <div class="value" style="display:flex;"> 168 <div class="upload-item pointer pure-u-md-2 pure-u-lg-3 mr10">
171 <div class="upload-item pointer">
172 <div class="upload-icon-3"></div> 169 <div class="upload-icon-3"></div>
173 <div class="tip">{{$t('clarms.step2.label14')}}</div> 170 <div class="tip">{{$t('clarms.step2.label14')}}</div>
174 </div> 171 </div>
175 172
176 <div class="upload-item ml10 pointer"> 173 <div class="upload-item pointer pure-u-md-2 pure-u-lg-3 mr10">
177 <div class="upload-icon-4"></div> 174 <div class="upload-icon-4"></div>
178 <div class="tip">{{$t('clarms.step2.label15')}}</div> 175 <div class="tip">{{$t('clarms.step2.label15')}}</div>
179 </div> 176 </div>
180 177
181 <div class="upload-item ml10 pointer"> 178 <div class="upload-item pointer pure-u-md-2 pure-u-lg-3 mr10">
182 <div class="upload-icon-5"></div> 179 <div class="upload-icon-5"></div>
183 <div class="tip">{{$t('clarms.step2.label16')}}</div> 180 <div class="tip">{{$t('clarms.step2.label16')}}</div>
184 </div> 181 </div>
185 </div> 182 </div>
186 </div> 183 </div>
187 </div> 184 </div>
188 </div>
189 <hr> 185 <hr>
190 <div class="bottom-tip orange mt20">{{$t('clarms.step2.label17')}}</div> 186 <div class="bottom-tip orange mt20">{{$t('clarms.step2.label17')}}</div>
191 <div class="bottom-tip gray mt10">{{$t('clarms.step2.tip1')}}</div> 187 <div class="bottom-tip gray mt10">{{$t('clarms.step2.tip1')}}</div>
...@@ -202,7 +198,7 @@ ...@@ -202,7 +198,7 @@
202 198
203 <div class="submit-btn">{{$t('clarms.step2.btn')}}</div> 199 <div class="submit-btn">{{$t('clarms.step2.btn')}}</div>
204 200
205 <div class="contact">{{$t('clarms.step2.contact')}}</div> 201 <div class="contact" @click="toContact">{{$t('clarms.step2.contact')}}</div>
206 </div> 202 </div>
207 </div> 203 </div>
208 </template> 204 </template>
......
...@@ -73,7 +73,7 @@ export default { ...@@ -73,7 +73,7 @@ export default {
73 return getNationsList(this.$i18n.locale); 73 return getNationsList(this.$i18n.locale);
74 }, 74 },
75 marryList() { 75 marryList() {
76 return getMarryList(); 76 return getMarryList(this.$i18n.locale);
77 }, 77 },
78 policyIdTypeList() { 78 policyIdTypeList() {
79 return getPolicyIdTypeList(this.$i18n.locale); 79 return getPolicyIdTypeList(this.$i18n.locale);
......