项目信息管理详情头部样式优化

src/views/manage-info/index.vue

@@ -22,7 +22,7 @@
                 </div>
             </div>
         </xiding>
-        <div class="containerbody" v-if="isContainerVisible">
+        <div class="containerbody" v-if="isContainerVisible" @srorll="handleScroll">
             <!-- 基本信息 -->
             <div id="basic">
                 <Basic :action="action" :basicInfo="basicInformation"
@@ -223,11 +223,25 @@ export default {
         };
     },
     created() {
-        // 从路由参数中获取 projectId
-        this.projectId = Number(this.$route.params.id);
-        this.loadData();
-        this.action = this.$route.query.action;
-    },
+    // 从路由参数中获取 projectId
+    this.projectId = Number(this.$route.params.id);
+    this.loadData();
+    this.action = this.$route.query.action;
+    this.loadData();
+    // 添加滚动监听
+    window.addEventListener("scroll", this.handleScroll);
+    const container = document.querySelector(".containerbody");
+    if (container) {
+      container.addEventListener("scroll", this.handleScroll);
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener("scroll", this.handleScroll);
+    const container = document.querySelector(".containerbody");
+    if (container) {
+      container.removeEventListener("scroll", this.handleScroll);
+    }
+  },
     methods: {
         checkPermi,
         checkRole,
@@ -262,6 +276,30 @@ export default {
         goBack() {
             this.$router.go(-1); 
         },
+        handleScroll() {
+      // 获取滚动容器
+      const container = document.querySelector(".containerbody");
+      if (!container) return;
+
+      // 获取容器的滚动位置
+      const scrollPosition = container.scrollTop; // 添加偏移量，让菜单提前高亮
+
+      // 从下往上检查各部分，找到第一个顶部位置小于等于滚动位置的部分
+      for (let i = this.sections.length - 1; i >= 0; i--) {
+        const element = document.getElementById(this.sections[i].id);
+        if (element) {
+          // 计算元素相对于滚动容器的位置
+          const elementPosition = element.offsetTop - container.offsetTop;
+
+          if (elementPosition <= scrollPosition) {
+            if (this.activeSection !== this.sections[i].id) {
+              this.activeSection = this.sections[i].id;
+            }
+            break;
+          }
+        }
+      }
+    },
         // 子组件的
         handleDataUpdate(dataKey, updatedData) {
             if (dataKey === 'projectOtherInfos' || dataKey === 'wysmxInformations') {