yangg преди 1 месец
родител
ревизия
6f3eaa5f5f
променени са 1 файла, в които са добавени 159 реда и са изтрити 7 реда
  1. 159 7
      src/views/JobApplication/report/index.vue

+ 159 - 7
src/views/JobApplication/report/index.vue

@@ -722,6 +722,23 @@ onMounted(() => {
       console.log(`ID ${id} 存在:`, !!element);
     });
   }, 1000);
+  
+  // 添加滚动监听
+  window.addEventListener('scroll', () => {
+    const sections = ['comprehensive-assessment', 'image-analysis', 'answer-records', 'other-info'];
+    
+    // 找到当前在视口中的部分
+    for (const sectionId of sections) {
+      const element = document.getElementById(sectionId);
+      if (element) {
+        const rect = element.getBoundingClientRect();
+        if (rect.top <= 150 && rect.bottom >= 150) {
+          setActiveTab(sectionId);
+          break;
+        }
+      }
+    }
+  }, { passive: true });
 })
 
 const evaluationScore = ref<number>(0)
@@ -1098,13 +1115,47 @@ const handleTabClick = (tab: any) => {
 };
 
 // 添加一个备用的滚动函数,可以通过按钮直接调用
-const scrollToSection = (sectionId: string) => {
+/* const scrollToSection = (sectionId: string) => {
+  console.log('尝试滚动到部分:', sectionId);
+  const element = document.getElementById(sectionId);
+  if (element) {
+    element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    setTimeout(() => {
+      window.scrollBy({ top: -100, behavior: 'smooth' });
+    }, 100);
+  }
+}; */
+
+// 添加到methods部分或直接在setup中定义
+const setActiveTab = (sectionId) => {
+  // 移除所有标签的active类
+  document.querySelectorAll('.tab-item').forEach(tab => {
+    tab.classList.remove('active');
+  });
+  
+  // 根据sectionId找到对应的标签并添加active类
+  const tabMap = {
+    'comprehensive-assessment': 0,
+    'image-analysis': 1,
+    'answer-records': 2,
+    'other-info': 3
+  };
+  
+  const index = tabMap[sectionId];
+  if (index !== undefined) {
+    document.querySelectorAll('.tab-item')[index].classList.add('active');
+  }
+};
+
+// 修改scrollToSection函数
+const scrollToSection = (sectionId) => {
   console.log('尝试滚动到部分:', sectionId);
   const element = document.getElementById(sectionId);
   if (element) {
     element.scrollIntoView({ behavior: 'smooth', block: 'start' });
     setTimeout(() => {
       window.scrollBy({ top: -100, behavior: 'smooth' });
+      setActiveTab(sectionId); // 设置激活的标签
     }, 100);
   }
 };
@@ -1202,12 +1253,20 @@ const scrollToSection = (sectionId: string) => {
 
           <!-- 将原来的标签导航移到更上层,并添加固定定位 -->
           <div class="sticky-tabs">
-            <el-tabs @tab-click="handleTabClick">
-              <el-tab-pane label="综合评估" name="comprehensive-assessment"></el-tab-pane>
-              <el-tab-pane label="图片分析" name="image-analysis"></el-tab-pane>
-              <el-tab-pane label="回答记录" name="answer-records"></el-tab-pane>
-              <el-tab-pane label="其他信息" name="other-info"></el-tab-pane>
-            </el-tabs>
+            <div class="custom-tabs">
+              <div class="tab-item active" @click="scrollToSection('comprehensive-assessment')">
+                <span>综合评估</span>
+              </div>
+              <div class="tab-item" @click="scrollToSection('image-analysis')">
+                <span>图片分析评估</span>
+              </div>
+              <div class="tab-item" @click="scrollToSection('answer-records')">
+                <span>回答记录</span>
+              </div>
+              <div class="tab-item" @click="scrollToSection('other-info')">
+                <span>其他信息</span>
+              </div>
+            </div>
           </div>
 
           <!-- 为每个主要章节添加id -->
@@ -2083,4 +2142,97 @@ body {
   margin-bottom: 20px;
   /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
 }
+
+/* 自定义标签样式 - 匹配图片中的深色标签 */
+:deep(.custom-tabs) {
+  background-color: #1d1e3a;
+  border-radius: 0;
+}
+
+:deep(.custom-tabs .el-tabs__header) {
+  margin: 0;
+  border: none;
+  background-color: #1d1e3a;
+}
+
+:deep(.custom-tabs .el-tabs__nav) {
+  border: none;
+  background-color: #1d1e3a;
+}
+
+:deep(.custom-tabs .el-tabs__item) {
+  color: white;
+  font-size: 14px;
+  padding: 0 20px;
+  height: 40px;
+  line-height: 40px;
+  border: none;
+  background-color: transparent;
+}
+
+:deep(.custom-tabs .el-tabs__item.is-active) {
+  color: white;
+  font-weight: 500;
+  background-color: #4e4e8b;
+}
+
+:deep(.custom-tabs .el-tabs__item:hover) {
+  color: white;
+  background-color: #4e4e8b;
+}
+
+:deep(.custom-tabs .el-tabs__nav-wrap::after) {
+  display: none;
+}
+
+.sticky-tabs {
+  position: sticky;
+  top: -25px;
+  z-index: 10;
+  margin-bottom: 20px;
+  
+}
+
+.custom-tabs {
+  display: flex;
+  background-color: #1d1e3a;
+  width: 100%;
+  overflow-x: auto;
+  white-space: nowrap;
+  border-radius: 5px;
+}
+
+.tab-item {
+  padding: 0 20px;
+  height: 40px;
+  line-height: 40px;
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  text-align: center;
+  transition: background-color 0.3s;
+  width: 25%;
+  /* flex: 1; */
+  min-width: max-content;
+}
+
+.tab-item:hover {
+  background-color: #4e4e8b;
+}
+
+.tab-item.active {
+  background-color: #4e4e8b;
+  font-weight: 500;
+}
+
+/* 确保在移动设备上也能正常滚动 */
+@media (max-width: 768px) {
+  .custom-tabs {
+    justify-content: flex-start;
+  }
+  
+  .tab-item {
+    flex: 0 0 auto;
+  }
+}
 </style>