增加隐患图片收起功能

src/views/tips_report.vue

@@ -35,8 +35,18 @@
 
       <div class="content-body">
         <div class="center-panel">
-          <div class="image-section">
-            <img :src="currentTask.image" alt="现场图片" class="main-image" />
+          <div :class="['image-section', { collapsed: isImageCollapsed }]">
+            <div class="image-toolbar">
+              <span>图片</span>
+              <button type="button" @click="isImageCollapsed = !isImageCollapsed">
+                {{ isImageCollapsed ? '展开' : '收起' }}
+              </button>
+            </div>
+            <img v-show="!isImageCollapsed" :src="currentTask.image" alt="现场图片" class="main-image" />
+            <div v-show="isImageCollapsed" class="image-collapsed-summary">
+              <img :src="currentTask.image" alt="现场缩略图" />
+              <span>图片已收起</span>
+            </div>
           </div>
 
           <div class="ai-section">
@@ -210,6 +220,7 @@
         </div>
       </div>
     </div>
+
   </div>
 </template>
 
@@ -419,6 +430,7 @@ const detectionGroups = computed(() => [
 const expandedGroupId = ref(null)
 const collapsedCaseKeys = ref([])
 const showCaseViewer = ref(false)
+const isImageCollapsed = ref(false)
 
 const selectTask = (task) => {
   currentTaskId.value = task.id
@@ -649,6 +661,61 @@ const closeCaseViewer = () => {
   background: #f5f5f5 url('/demo1.png') center center no-repeat;
   background-size: contain;
 
+  &.collapsed {
+    min-height: 72px;
+    background: #fff;
+  }
+
+  .image-toolbar {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 8px;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
+
+    span {
+      font-size: 12px;
+      color: #4b5568;
+    }
+
+    button {
+      border: 0;
+      border-radius: 4px;
+      background: #3f7cff;
+      color: #fff;
+      font-size: 12px;
+      padding: 3px 8px;
+      cursor: pointer;
+    }
+  }
+
+  .image-collapsed-summary {
+    height: 72px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+
+    img {
+      width: 64px;
+      height: 48px;
+      border-radius: 5px;
+      object-fit: cover;
+    }
+
+    span {
+      font-size: 14px;
+      color: #4b5568;
+      font-weight: 600;
+    }
+  }
+
   .main-image {
     width: 100%;
     height: auto;
@@ -906,6 +973,7 @@ const closeCaseViewer = () => {
       font-size: 15px;
       font-weight: 700;
     }
+
   }
 
   .checklist {
@@ -1218,4 +1286,5 @@ const closeCaseViewer = () => {
     grid-template-columns: 1fr;
   }
 }
+
 </style>