优化样式

src/pages/Index/Regular/Emergency.vue

@@ -52,11 +52,13 @@
       </div>
       <div class="project-list">
         
-        <div v-for="(item, index) in projects" :style="`background:${item.color}`" :key="index" @click="selectProject(item)" :class="[
-          isEmergencyEnabled ? 'project-item' : 'disabled-project-item',
-          { 'active-project-item': emergencyPosition.projIds.includes(item.projId) && isEmergencyEnabled },
-        ]">
-          <span :disabled="!isEmergencyEnabled">{{ item.projName }}</span>
+        <div v-for="(item, index) in projects" 
+          :style="`background:${emergencyPosition.projIds.includes(item.projId)?`${item.color}`:''}`" 
+          :key="index"
+          :class="projectStyle(item)"
+          @click="selectProject(item)" 
+        >
+          <span :disabled="!isEmergencyEnabled" :style="`color:${emergencyPosition.projIds.includes(item.projId)?'':`${item.color}`}`">{{ item.projName }}</span>
           <span :disabled="!isEmergencyEnabled"> {{ item.num }}/25</span>
         </div>
       </div>
@@ -153,6 +155,14 @@ const getTypeClass = (project: { projectType: string }) => {
   ];
 };
 
+//项目选中样式及背景色
+const projectStyle = (item:any)=>{
+  return [
+    isEmergencyEnabled.value ? 'project-item' : 'disabled-project-item',
+    { 'active-project-item': emergencyPosition.value.projIds.includes(item.projId) && isEmergencyEnabled },
+  ]
+}
+
 // 公共状态管理
 const projectName = ref('');
 const bloodType = ref('');
@@ -704,7 +714,6 @@ label {
       justify-content: flex-start;
 
       .active-project-item {
-        background-color: #528dfe !important;
         color: white !important;
       }