diff --git a/src/views/business/alarm/list.vue b/src/views/business/alarm/list.vue
index 1e54264..0dcd27a 100644
--- a/src/views/business/alarm/list.vue
+++ b/src/views/business/alarm/list.vue
@@ -2,21 +2,45 @@
   <div class="emergency-list-wrapper">
     <div :class="['alarm-content', isFold ? 'fold' : '']">
       <div class="tab-wrapper">
-        <div :class="['tab-button', current === index ? 'active' : '']" v-for="(item, index) in tabs" :key="index"
-          @click="toggle(index)">{{ item.label }}</div>
+        <div
+          :class="['tab-button', current === index ? 'active' : '']"
+          v-for="(item, index) in tabs"
+          :key="index"
+          @click="toggle(index)"
+        >
+          {{ item.label }}
+        </div>
       </div>
       <div>
-      <SubtitleComponent  title="告警列表" :more="true" element-loading-text="拼命加载中" @handle="handle"/>
-        <div v-loading="isLoading" element-loading-background="rgba(0, 0, 0, 0.8)" class="list-wrapper">
-          <div class="list-item" v-for="(item,index) in data" :key="item.id">
+        <SubtitleComponent
+          title="告警列表"
+          :more="true"
+          element-loading-text="拼命加载中"
+          @handle="handle"
+        />
+        <div
+          v-loading="isLoading"
+          element-loading-background="rgba(0, 0, 0, 0.8)"
+          class="list-wrapper"
+        >
+          <div
+            class="list-item"
+            :class="{ selected: isSelected(item) }"
+            v-for="(item, index) in data"
+            :key="item.id"
+             @click="selectItem(item)"
+          >
             <div class="time">
               {{ item.createAt }}
-              <img src="@/assets/images/alarm/time-more.png" alt="">
+              <img src="@/assets/images/alarm/time-more.png" alt="" />
             </div>
             <div class="content">
-              <div class="index">{{ (index + 1).toString().padStart(2, '0') }}</div>
+              <div class="index">
+                {{ (index + 1).toString().padStart(2, "0") }}
+              </div>
               <div class="info">
-                {{ item.boatName }} - {{ item.illegalType }} ,请相关人员尽快前往协调
+                {{ item.boatName }} -
+                {{ item.illegalType }} ,请相关人员尽快前往协调
               </div>
             </div>
           </div>
@@ -25,11 +49,11 @@
     </div>
     <div class="fold-button" @click="toggleFold()">
       <template v-if="isFold">
-        <img src="@/assets/images/common/icon-arrow-right.png" alt="">
+        <img src="@/assets/images/common/icon-arrow-right.png" alt="" />
         <div>展开</div>
       </template>
       <template v-else>
-        <img src="@/assets/images/common/icon-arrow-left.png" alt="">
+        <img src="@/assets/images/common/icon-arrow-left.png" alt="" />
         <div>收起</div>
       </template>
     </div>
@@ -43,7 +67,7 @@ import { videoIdentificationPage } from '@/api/identification.js'
 
 const mapStore = useMapStore()
 const tabs = [
-   {
+  {
     label: '无船号',
     value: 'monitor'
   },
@@ -51,7 +75,6 @@ const tabs = [
     label: '有船号',
     value: 'plane'
   }
-
 ]
 const current = ref(1)
 const data = ref([])
@@ -60,31 +83,29 @@ const isFold = ref(false)
 const isLoading = ref(false)
 
 const initData = () => {
-
-// 为了撑起来框架
- data.value = [
-     {
+  // 为了撑起来框架
+  data.value = [
+    {
       id: 1,
       createAt: '2025-11-23 09:37:25',
       boatName: '浙渔BHI90',
       illegalType: '未穿救生衣预警，未封仓预警，未悬挂国旗'
     }
- ]
+  ]
   isLoading.value = true
   const params = {
     isHasBoatName: current.value == 1 ? 1 : 2,
     pageNo: 1,
     pageSize: 20
   }
-  videoIdentificationPage(params).then(res => {
-    if(res.success) {
+  videoIdentificationPage(params).then((res) => {
+    if (res.success) {
       data.value = res.result.records
-    }else {
+    } else {
       ElMessage.error(res.result)
     }
     isLoading.value = false
   })
-
 }
 const toggleFold = () => {
   isFold.value = !isFold.value
@@ -103,22 +124,41 @@ const handle = (type, item) => {
       break
   }
 }
+
+// 在 script setup 中添加
+const selectedItemId = ref(null) // 记录选中的项目ID
+
+// 判断是否选中
+const isSelected = (item) => {
+  return selectedItemId.value === item.id
+}
+
+// 更新选中状态的方法
+const selectItem = (item) => {
+  selectedItemId.value = item.id === selectedItemId.value ? null : item.id
+}
+
 initData()
 </script>
 <style scoped lang="scss">
-.emergency-list-wrapper{
+.emergency-list-wrapper {
   position: absolute;
-    top: 98px;
-    left: 40px;
-    bottom: 42px;
+  top: 98px;
+  left: 40px;
+  bottom: 42px;
   .alarm-content {
     width: 488px;
     height: 100%;
     padding: 20px 20px 10px;
-    background: linear-gradient( 90deg, #0C1929 0%, rgba(12,25,41,0.6) 100%);
+    background: linear-gradient(90deg, #0c1929 0%, rgba(12, 25, 41, 0.6) 100%);
     border-radius: 0px 0px 0px 0px;
     border: 1px solid;
-    border-image: linear-gradient(270deg, rgba(42, 159, 255, 0.2), rgba(42, 159, 255, 0.8)) 1 1;
+    border-image: linear-gradient(
+        270deg,
+        rgba(42, 159, 255, 0.2),
+        rgba(42, 159, 255, 0.8)
+      )
+      1 1;
     box-sizing: border-box;
     display: flex;
     gap: 6px;
@@ -139,7 +179,7 @@ initData()
         width: 28px;
         position: relative;
         height: 180px;
-        color: #FFFFFF;
+        color: #ffffff;
         font-size: 16px;
         text-align: center;
         align-items: center;
@@ -147,19 +187,19 @@ initData()
         line-height: 20px;
         cursor: pointer;
         margin-bottom: -47px;
-        background-image: url('@/assets/images/alarm/tab-background-first.png');
+        background-image: url("@/assets/images/alarm/tab-background-first.png");
         background-size: 100% 100%;
         background-repeat: no-repeat;
         &.active {
-          background-image: url('@/assets/images/alarm/tab-background-active-first.png');
+          background-image: url("@/assets/images/alarm/tab-background-active-first.png");
           background-size: 100% 100%;
           background-repeat: no-repeat;
         }
         &:not(:first-of-type) {
-          background-image: url('@/assets/images/alarm/tab-background.png');
+          background-image: url("@/assets/images/alarm/tab-background.png");
           &.active {
-            background-image: url('@/assets/images/alarm/tab-background-active.png');
-        }
+            background-image: url("@/assets/images/alarm/tab-background-active.png");
+          }
         }
       }
     }
@@ -176,62 +216,64 @@ initData()
         width: 100%;
         padding: 10px;
         font-size: 14px;
-        color: #E1F1FAFF;
+        color: #e1f1faff;
         box-sizing: border-box;
         border: 1px solid rgba(24, 128, 254, 0);
         flex-shrink: 0;
         cursor: pointer;
         height: 99px;
-        background: rgba(46,164,240,0.1);
+        background: rgba(46, 164, 240, 0.1);
         border-radius: 6px 6px 6px 6px;
-        .time{
+        .time {
           font-size: 18px;
-          color: #0FC8F6;
+          color: #0fc8f6;
           line-height: 27px;
           display: flex;
           align-items: center;
-          img{
+          img {
             margin-left: 16px;
           }
         }
-        .content{
+        .content {
           display: flex;
           gap: 4px;
-          .index,.info{
-            background: rgba(66,171,191,0.2);
+          .index,
+          .info {
+            background: rgba(66, 171, 191, 0.2);
             font-size: 14px;
             height: 52px;
-            &:nth-of-type(3){
-              background: rgba(255,145,31,0.2);
+            &:nth-of-type(3) {
+              background: rgba(255, 145, 31, 0.2);
             }
           }
-          .index{
-            border-left: 2px solid #3CD0ED;
+          .index {
+            border-left: 2px solid #3cd0ed;
             font-family: SHSCM;
             width: 32px;
             text-align: center;
             line-height: 52px;
           }
-          .info{
+          .info {
             width: calc(100% - 32px);
             padding: 6px 13px;
             box-sizing: border-box;
             line-height: 20px;
-            background-image: url('@/assets/images/alarm/alarm-info-background.png');
+            background-image: url("@/assets/images/alarm/alarm-info-background.png");
             background-size: 100% 100%;
             background-repeat: no-repeat;
           }
         }
-        &:nth-of-type(3){
-          .content{
-            .index,.info{
-              background: rgba(255,145,31,0.2);
+        &.selected {
+          .content {
+            .index,
+            .info {
+              background: rgba(255, 145, 31, 0.2);
             }
-            .index{
-              border-left: 2px solid #FF911F;
+            .index {
+              border-left: 2px solid #ff911f;
             }
-            .info{
-              background-image: url('@/assets/images/alarm/alarm-info-background-other.png');
+            .info {
+              background-image: url("@/assets/images/alarm/alarm-info-background-other.png");
             }
           }
         }
@@ -244,10 +286,10 @@ initData()
     top: 0;
     width: 17px;
     height: 82px;
-    background-image: url('@/assets/images/common/subscript-background-vertical.png');
+    background-image: url("@/assets/images/common/subscript-background-vertical.png");
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    color: #FFFFFFCC;
+    color: #ffffffcc;
     font-size: 12px;
     cursor: pointer;
     display: flex;
@@ -260,7 +302,7 @@ initData()
       cursor: not-allowed;
       pointer-events: none;
     }
-    div{
+    div {
       width: min-content;
     }
   }