diff --git a/src/assets/less/common.less b/src/assets/less/common.less
index 3fc9224..6e4faad 100644
--- a/src/assets/less/common.less
+++ b/src/assets/less/common.less
@@ -157,3 +157,9 @@
     }
   }
 }
+
+/deep/ .van-field {
+  .van-field__control[readonly]{
+    color: #969799;
+  }
+}
diff --git a/src/components/CalendarField.vue b/src/components/CalendarField.vue
index 1a32a99..389e6be 100644
--- a/src/components/CalendarField.vue
+++ b/src/components/CalendarField.vue
@@ -3,6 +3,7 @@
   <div>
     <van-field
       readonly
+      :class="readonly ? 'field-readonly' : 'not-field-readonly'"
       clickable
       type="text"
       name="calendar"
@@ -70,3 +71,18 @@ export default {
   }
 }
 </script>
+
+<style scoped lang="less">
+
+.not-field-readonly {
+  /deep/ .van-field__control{
+    color: #1D2129 !important;
+  }
+}
+
+.field-readonly {
+  /deep/ .van-field__control{
+    color: #969799 !important;
+  }
+}
+</style>
diff --git a/src/components/PickerDictCheckboxField.vue b/src/components/PickerDictCheckboxField.vue
index 6a32fe7..9771a44 100644
--- a/src/components/PickerDictCheckboxField.vue
+++ b/src/components/PickerDictCheckboxField.vue
@@ -3,6 +3,7 @@
   <div>
     <van-field
       readonly
+      :class="readonly ? 'field-readonly' : 'not-field-readonly'"
       clickable
       name="picker"
       :value="showValue"
@@ -185,4 +186,16 @@ export default {
   }
 }
 
+.not-field-readonly {
+  /deep/ .van-field__control{
+    color: #1D2129 !important;
+  }
+}
+
+.field-readonly {
+  /deep/ .van-field__control{
+    color: #969799 !important;
+  }
+}
+
 </style>
diff --git a/src/components/PickerDictField.vue b/src/components/PickerDictField.vue
index d039695..4064653 100644
--- a/src/components/PickerDictField.vue
+++ b/src/components/PickerDictField.vue
@@ -3,6 +3,7 @@
   <div>
     <van-field
       readonly
+      :class="readonly ? 'field-readonly' : 'not-field-readonly'"
       clickable
       name="picker"
       :value="showValue"
@@ -135,6 +136,16 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
+.not-field-readonly {
+  /deep/ .van-field__control{
+    color: #1D2129 !important;
+  }
+}
 
+.field-readonly {
+  /deep/ .van-field__control{
+    color: #969799 !important;
+  }
+}
 </style>
diff --git a/src/components/PickerField.vue b/src/components/PickerField.vue
index 7ef7324..cf06b7f 100644
--- a/src/components/PickerField.vue
+++ b/src/components/PickerField.vue
@@ -3,6 +3,7 @@
   <div>
     <van-field
       readonly
+      :class="readonly ? 'field-readonly' : 'not-field-readonly'"
       clickable
       name="picker"
       :value="showValue"
@@ -261,4 +262,15 @@ export default {
   }
 }
 
+.not-field-readonly {
+  /deep/ .van-field__control{
+    color: #1D2129 !important;
+  }
+}
+
+.field-readonly {
+  /deep/ .van-field__control{
+    color: #969799 !important;
+  }
+}
 </style>
diff --git a/src/components/SelectDepartmentField.vue b/src/components/SelectDepartmentField.vue
index bc47975..440869e 100644
--- a/src/components/SelectDepartmentField.vue
+++ b/src/components/SelectDepartmentField.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <van-field
-      :class="(required ? 'required ' : '') + 'form-item label-weight'"
+      :class="(required ? 'required ' : '') + 'form-item label-weight ' + (readonly ? 'field-readonly' : 'not-field-readonly')"
       type="textarea"
       :label="label"
       clearable
@@ -270,4 +270,16 @@ export default {
   width: 100%;
   flex: 1;
 }
+
+.not-field-readonly {
+  /deep/ .van-field__control{
+    color: #1D2129 !important;
+  }
+}
+
+.field-readonly {
+  /deep/ .van-field__control{
+    color: #969799 !important;
+  }
+}
 </style>
diff --git a/src/components/SelectUserByWorkGroupField.vue b/src/components/SelectUserByWorkGroupField.vue
index c44e743..a52b2e0 100644
--- a/src/components/SelectUserByWorkGroupField.vue
+++ b/src/components/SelectUserByWorkGroupField.vue
@@ -5,6 +5,7 @@
       :label="label"
       :placeholder="$t('pleaseSelect') + label"
       readonly
+      :class="readonly ? 'field-readonly' : 'not-field-readonly'"
       rows="1"
       autosize
       :rules="rules"
@@ -120,6 +121,18 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
+@import '~@assets/less/common.less';
 
+.not-field-readonly {
+  /deep/ .van-field__control{
+    color: #1D2129 !important;
+  }
+}
+
+.field-readonly {
+  /deep/ .van-field__control{
+    color: #969799 !important;
+  }
+}
 </style>
diff --git a/src/components/SelectUserField.vue b/src/components/SelectUserField.vue
index 72b43fb..298618c 100644
--- a/src/components/SelectUserField.vue
+++ b/src/components/SelectUserField.vue
@@ -5,6 +5,7 @@
       :label="label"
       :placeholder="$t('pleaseSelect') + (label ? label : '')"
       readonly
+      :class="readonly ? 'field-readonly' : 'not-field-readonly'"
       rows="1"
       autosize
       :required="rules ? rules[0].required : false"
@@ -124,4 +125,15 @@ export default {
 <style scoped lang="less">
 @import '~@assets/less/common.less';
 
+.not-field-readonly {
+  /deep/ .van-field__control{
+    color: #1D2129 !important;
+  }
+}
+
+.field-readonly {
+  /deep/ .van-field__control{
+    color: #969799 !important;
+  }
+}
 </style>