|
@@ -722,6 +722,23 @@ onMounted(() => {
|
|
console.log(`ID ${id} 存在:`, !!element);
|
|
console.log(`ID ${id} 存在:`, !!element);
|
|
});
|
|
});
|
|
}, 1000);
|
|
}, 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)
|
|
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);
|
|
console.log('尝试滚动到部分:', sectionId);
|
|
const element = document.getElementById(sectionId);
|
|
const element = document.getElementById(sectionId);
|
|
if (element) {
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
window.scrollBy({ top: -100, behavior: 'smooth' });
|
|
window.scrollBy({ top: -100, behavior: 'smooth' });
|
|
|
|
+ setActiveTab(sectionId); // 设置激活的标签
|
|
}, 100);
|
|
}, 100);
|
|
}
|
|
}
|
|
};
|
|
};
|
|
@@ -1202,12 +1253,20 @@ const scrollToSection = (sectionId: string) => {
|
|
|
|
|
|
<!-- 将原来的标签导航移到更上层,并添加固定定位 -->
|
|
<!-- 将原来的标签导航移到更上层,并添加固定定位 -->
|
|
<div class="sticky-tabs">
|
|
<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>
|
|
</div>
|
|
|
|
|
|
<!-- 为每个主要章节添加id -->
|
|
<!-- 为每个主要章节添加id -->
|
|
@@ -2083,4 +2142,97 @@ body {
|
|
margin-bottom: 20px;
|
|
margin-bottom: 20px;
|
|
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
|
|
/* 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>
|
|
</style>
|