优化益寿缘医生端用户采集信息详情数据展示样式

src/views/components/collection/collectionDetail.vue

@@ -11,13 +11,14 @@
           <el-checkbox-group
             v-model="form.answers[index].value"
             size="mini"
+            :disabled="true"
           >
             <el-checkbox
-              v-for="dict in filteredOptions(answer)"
+              v-for="dict in getSelectedOptions(answer)"
               :key="dict.value"
               :label="dict.value"
             >
-              {{ dict.name }}
+            {{ dict.name }}
             </el-checkbox>
           </el-checkbox-group>
         </div>
@@ -64,8 +65,7 @@ export default {
     }
   },
   methods: {
-    // 过滤出 answer.options 中 value 在 answer.value 数组里的选项
-    filteredOptions(answer) {
+    getSelectedOptions(answer) {
       if (!Array.isArray(answer.value) || !Array.isArray(answer.options)) {
         return [];
       }
@@ -75,11 +75,9 @@ export default {
 
     fetchCollectionInfo(userId) {
       this.loading = true;
-      console.log("传入的用户信息:", userId);
       getCollectionByUserId(userId)
         .then(res => {
           const data = res.data;
-          //只更新 answers，不替换整个 form
           if (data && Array.isArray(data.answers)) {
             this.form.answers = data.answers;
           } else {
@@ -98,3 +96,19 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+.app-container >>> .el-checkbox.is-disabled .el-checkbox__input.is-checked .el-checkbox__inner {
+  background-color: #409eff !important;
+  border-color: #409eff !important;
+}
+
+.app-container >>> .el-checkbox.is-disabled .el-checkbox__input.is-checked .el-checkbox__inner::after {
+  border-color: #fff !important;
+}
+
+/*让已选中禁用状态的文字也高亮为蓝色 */
+.app-container >>> .el-checkbox.is-disabled .el-checkbox__input.is-checked + .el-checkbox__label {
+  color: #409eff !important;
+}
+</style>