style 太保权益领取样式调整

src/views/sz-public-new/date-picker.vue

@@ -8,7 +8,11 @@
       class="appoint-form-items"
       @click="handleOpenPopup"
     />
-    <van-popup v-model="visible" position="bottom" :transition-appear="false">
+    <van-popup
+      v-model="visible"
+      position="bottom"
+      :transition-appear="false"
+    >
       <van-datetime-picker
         type="date"
         title="选择年月日"

src/views/sz-public-new/index.vue

@@ -26,6 +26,8 @@
               clearable
               required
               class="appoint-form-items"
+              :class="{ 'field-readonly': isReadonly('name') }"
+              :readonly="isReadonly('name')"
               placeholder="点击此处输入"
               :rules="[
                 { required: true, message: '请输入参保人姓名' },
@@ -34,7 +36,6 @@
                   message: '参保人姓名请填写2-40位',
                 },
               ]"
-              :readonly="isReadonly('name')"
             />
             <van-field
               :value="cardTypeName"
@@ -42,6 +43,7 @@
               required
               disabled
               class="appoint-form-items"
+              :class="{ 'field-readonly': isReadonly('cardTypeName') }"
               :right-icon="isReadonly('cardTypeName') ? '' : 'arrow'"
               :readonly="isReadonly('cardTypeName')"
               @click="
@@ -51,6 +53,7 @@
             <van-field
               v-model="dectionForm.idCard"
               class="appoint-form-items"
+              :class="{ 'field-readonly': isReadonly('idCard') }"
               clearable
               required
               label="参保人证件号"
@@ -61,6 +64,7 @@
             <van-field
               v-if="dectionForm.idType != 1"
               class="appoint-form-items"
+              :class="{ 'field-readonly': isReadonly('sex') }"
               required
               label="参保人性别"
             >
@@ -78,6 +82,7 @@
             <van-field
               v-if="dectionForm.idType != 1"
               class="appoint-form-items"
+              :class="{ 'field-readonly': isReadonly('birthTime') }"
               required
               label="参保人出生日期"
               :right-icon="isReadonly('birthTime') ? '' : 'arrow'"
@@ -93,6 +98,7 @@
             <van-field
               v-model="dectionForm.mobilePhone"
               class="appoint-form-items"
+              :class="{ 'field-readonly': isReadonly('mobilePhone') }"
               label="参保人手机号"
               label-width="100%"
               clearable
@@ -484,7 +490,7 @@ export default {
     }
     /deep/ .van-field__control:disabled {
       color: #323233;
-      -webkit-text-fill-color: #323233;
+      -webkit-text-fill-color: inherit;
     }
     .item {
       color: #212121;
@@ -529,6 +535,25 @@ export default {
       color: #212121;
       width: auto;
     }
+    &.field-readonly {
+      /deep/ .van-field__label {
+        color: #999999;
+        width: auto;
+      }
+      &::before {
+        color: #999999;
+      }
+      /deep/ .van-field__control {
+        &:disabled,
+        &:read-only {
+          color: #999999;
+          -webkit-text-fill-color: inherit;
+          .van-radio__label {
+            color: inherit;
+          }
+        }
+      }
+    }
   }
   .appoint-form-placeholder {
     color: #999999;