b8d2cdc5 by joe

修改样式

1 parent 8da1eaf7
......@@ -60,9 +60,11 @@ export default {
type: Function,
default: null
},
showStyle: {
type: Boolean,
default: true
cusStyle: {
type: Object,
default() {
return {};
}
},
},
data() {
......
......@@ -3,7 +3,7 @@
<div class="comp">
<div class="date-mask" v-if="visible" @click="showCalendar()"></div>
<div class="ipt-wrap" :class="{'readonly':readonly}">
<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')">
<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')">
</div>
<div v-if="visible" class="date-wrap">
<div class="calendar-wrap">
......
......@@ -47,7 +47,12 @@ export default {
} else {
this.typeSelected.push(t);
}
}
},
toContact() {
this.$router.push({
path: "/custom/service?q=m1"
});
},
},
watch: {
......
@import '@/styles/_support';
input {
padding: 0 2.083333rem;
color: #333333;
......@@ -15,6 +14,7 @@ input {
color: #747474;
}
.value .ipt-wrap .comp .ipt-wrap .ipt {}
.submit-btn{
background: url("~@assets/images/vhis/vhis-btn.png");
......@@ -144,6 +144,10 @@ input {
margin-left: .833333rem;
}
.mr10 {
margin-right: .833333rem;
}
.mt20 {
margin-top: 1.666667rem;
}
......@@ -160,6 +164,7 @@ input {
margin-top: .833333rem ;
text-align: center;
width: 8.333333rem ;
letter-spacing: 1px;
}
.upload-icon-1 {
......@@ -254,6 +259,15 @@ input {
padding-left: 15px;
}
.ipt-date {
width: 100%;
border: 1px solid $cOrange !important;
border-radius: .416667rem ;
height: 3rem;
align-items: center;
padding-left: .833333rem;
}
&-item {
width: 50%;
display: flex;
......@@ -339,6 +353,11 @@ input {
}
}
.date-container {
width: 60%;
position: relative;
}
.value {
width: 75%;
position: relative;
......@@ -353,6 +372,7 @@ input {
align-items: center;
}
.ipt2 {
width: 100%;
border-bottom: 1px solid #ccc;
......@@ -438,7 +458,6 @@ input {
}
@media (max-width: 1000px) {
.reservation-container-2 {
padding: 1.666667rem 2rem 2.833333rem 2rem;
}
......@@ -454,11 +473,16 @@ input {
width: 70%;
}
}
&-item-2 {
.date-container {
width: 80%;
}
}
}
}
@media (max-width: 600px) {
.reservation-container {
padding: 2.666667rem 2rem 2.833333rem 2rem;
}
......@@ -491,6 +515,10 @@ input {
.value {
width: 70%;
}
.date-container {
width: 100%;
}
}
&-item3 {
......@@ -507,3 +535,10 @@ input {
margin: 0;
}
}
@media (max-width: 400px) {
.reservation-container-2 {
padding: 1.666667rem 1rem;
}
}
\ No newline at end of file
......
......@@ -50,7 +50,7 @@
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<date-picker class="ipt" v-model="data.contactDate" :check="checkDate" :showStyle="false"></date-picker>
<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>
</div>
</div>
</div>
......@@ -67,7 +67,7 @@
</div>
<hr>
<div class="gird-g form default-mt">
<div class="pure-u-1 pure-u-md-1-2 form-item-2">
<div class="pure-u-1 form-item-2">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label3')}}
......@@ -106,15 +106,15 @@
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item-2 mt20">
<div class="pure-u-1 form-item-2 mt20">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label6')}}
</div>
<div class="sub-label">{{$t('clarms.step2.label7')}} </div>
</div>
<div>
<div class="value">
<div >
<div class="ipt-wrap">
<input class="ipt2" type="number">
</div>
......@@ -123,23 +123,21 @@
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item-2 mt20">
<div class="pure-u-1 form-item-2 mt20">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label9')}}
</div>
</div>
<div>
<div class="value">
<div class="ipt-wrap item-group">
<div class="ipt-wrap date-container">
<div class="down-arrow"></div>
<date-picker class="ipt" v-model="data.contactDate" :check="checkDate" :showStyle="false"></date-picker>
</div>
<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>
</div>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item-2 mt20">
<div class="pure-u-1 form-item-2 mt20">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label10')}}
......@@ -160,32 +158,30 @@
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item-2 mt20">
<div class="pure-u-1 form-item-2 mt20">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label13')}}
</div>
</div>
<div>
<div class="value" style="display:flex;">
<div class="upload-item pointer">
<div class="value pure-g">
<div class="upload-item pointer pure-u-md-2 pure-u-lg-3 mr10">
<div class="upload-icon-3"></div>
<div class="tip">{{$t('clarms.step2.label14')}}</div>
</div>
<div class="upload-item ml10 pointer">
<div class="upload-item pointer pure-u-md-2 pure-u-lg-3 mr10">
<div class="upload-icon-4"></div>
<div class="tip">{{$t('clarms.step2.label15')}}</div>
</div>
<div class="upload-item ml10 pointer">
<div class="upload-item pointer pure-u-md-2 pure-u-lg-3 mr10">
<div class="upload-icon-5"></div>
<div class="tip">{{$t('clarms.step2.label16')}}</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="bottom-tip orange mt20">{{$t('clarms.step2.label17')}}</div>
<div class="bottom-tip gray mt10">{{$t('clarms.step2.tip1')}}</div>
......@@ -202,7 +198,7 @@
<div class="submit-btn">{{$t('clarms.step2.btn')}}</div>
<div class="contact">{{$t('clarms.step2.contact')}}</div>
<div class="contact" @click="toContact">{{$t('clarms.step2.contact')}}</div>
</div>
</div>
</template>
......
......@@ -73,7 +73,7 @@ export default {
return getNationsList(this.$i18n.locale);
},
marryList() {
return getMarryList();
return getMarryList(this.$i18n.locale);
},
policyIdTypeList() {
return getPolicyIdTypeList(this.$i18n.locale);
......