增加任务选中效果

frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.scss

@@ -57,9 +57,10 @@
       box-sizing: border-box;
       border-radius: 6px;
       background-color: $--color-black-3-alpha;
+      cursor: pointer;
 
       &:hover {
-        background-color: $--color-black-3;
+        background-color: rgba(23, 69, 46, .4);
       }
 
       >p {
@@ -98,6 +99,14 @@
         }
       }
     }
+
+    .is-active {
+      width: calc(100% - 10px);
+      margin-left: 5px;
+      padding: 8px 15px 8px 10px;
+      background-color: rgba(23, 69, 46, .7) !important;
+      box-shadow: 0 0 15px 3px rgba(23, 69, 46, 0.5)
+    }
   }
 
   .task-list__large {

frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.vue

@@ -72,7 +72,10 @@
             <div
               v-for="(item, index) in taskList.data"
               :key="item.id"
-              class="task-item"
+              :class="{
+                'task-item': true,
+                'is-active': detailUav.id === item.id,
+              }"
               @click="openSarStatusDetail(item)"
             >
               <div class="top-part">
@@ -114,12 +117,12 @@
               <p>无人机名称: {{ item.uav }}</p>
               <p>雷达名称: {{ item.sar }}</p>
               <p>开始时间：{{ item.beginTime }}</p>
-              <div
+              <!-- <div
                 class="task-info"
                 :style="{ color: dealStatusColor(item.statusName) }"
               >
                 {{ item.statusName }}
-              </div>
+              </div> -->
             </div>
           </template>
           <div v-else class="task-empty">