完成任务跟踪样式

src/views/emergencyCommandMap/RightSection/RenWuGenZong.vue

@@ -1,20 +1,24 @@
 <template>
-  <div class="table-content">
-    <div v-for="(item, index) in dataList" :key="index" class="box1">
-      <div :class="item.processing_status === '已完成' ? 'success-icon' : 'processing-icon'"></div>
-      <div class="box2">
-        <div class="box-header">
-          <div class="header-left">
-            <div class="box-title">{{ item.unit_name }}</div>
-            <div class="time">{{ item.update_time }}</div>
-            <div :class="item.processing_status === '已完成' ? 'success' : 'processing'">{{ item.processing_status }}</div>
+  <div>
+    <div class="table-content" :class="{ 'show-scroll': showScroll }">
+      <div v-for="(item, index) in dataList" :key="index" class="box1">
+        <div :class="item.processing_status === '已完成' ? 'success-icon' : 'processing-icon'"></div>
+        <div class="box2">
+          <div class="box-header">
+            <div class="header-left">
+              <div class="box-title">{{ item.unit_name }}</div>
+              <div class="time">{{ item.update_time }}</div>
+              <div :class="item.processing_status === '已完成' ? 'success' : 'processing'">{{ item.processing_status }}</div>
+            </div>
+            <div class="btn" @click="openUpdateDialog(item)">更新</div>
           </div>
-          <div class="btn" @click="openUpdateDialog(item)">更新</div>
+          <div class="box-content">{{ item.task_description }}</div>
         </div>
-        <div class="box-content">{{ item.task_description }}</div>
       </div>
     </div>
+    <button @click="toggleScroll" class="toggle-scroll-btn">{{ showScroll ? '收起' : '查看更多 >>' }}</button>
   </div>
+
   <RenWuTanChuan
     v-model="newSectionState.showListDialog"
     :task="selectedTask"
@@ -42,6 +46,7 @@ const selectedTask = ref({
 });
 
 const dataList = ref([]);
+const showScroll = ref(false);
 
 const props = defineProps<{
   eventId?: string; // 使用可选属性
@@ -70,6 +75,10 @@ const handleUpdateSuccess = (updatedData) => {
   fetchData(); // 重新加载任务列表
 };
 
+const toggleScroll = () => {
+  showScroll.value = !showScroll.value;
+};
+
 onMounted(() => {
   if (props.eventId) {
     fetchData();
@@ -82,7 +91,10 @@ onMounted(() => {
 <style lang="scss" scoped>
 .table-content {
   height: 600px;
-  overflow-y: auto;
+  overflow-y: hidden;
+  &.show-scroll {
+    overflow-y: auto;
+  }
   .box1 {
     display: flex;
     align-items: center;
@@ -167,4 +179,14 @@ onMounted(() => {
     background: url('@/assets/images/taskTracking/processing.png') no-repeat;
   }
 }
+
+.toggle-scroll-btn {
+  display: block;
+  margin: 20px auto;
+  font-size: 36px;
+  color: #3498db;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
 </style>