|
|
@@ -38,14 +38,14 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- 锚点导航 -->
|
|
|
+ <!-- Tab 切换 -->
|
|
|
<div class="report-tabs">
|
|
|
<div
|
|
|
v-for="tab in tabs"
|
|
|
:key="tab.key"
|
|
|
class="report-tabs__item"
|
|
|
:class="{ active: activeTab === tab.key }"
|
|
|
- @click="scrollToSection(tab.key)"
|
|
|
+ @click="activeTab = tab.key"
|
|
|
>
|
|
|
<svg class="report-tabs__icon" viewBox="0 0 24 24" fill="none">
|
|
|
<path
|
|
|
@@ -63,19 +63,14 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div
|
|
|
- v-for="tab in tabs"
|
|
|
- :id="`report-section-${tab.key}`"
|
|
|
- :key="tab.key"
|
|
|
- class="report-panel"
|
|
|
- >
|
|
|
+ <div class="report-panel">
|
|
|
<div class="report-panel__title">
|
|
|
- <span>{{ tab.label }}</span>
|
|
|
+ <span>{{ tabs.find((t) => t.key === activeTab)?.label }}</span>
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
- v-for="(section, sIdx) in SECTION_MAP[tab.key]"
|
|
|
- :key="sIdx"
|
|
|
+ v-for="(section, sIdx) in SECTION_MAP[activeTab]"
|
|
|
+ :key="`${activeTab}-${sIdx}`"
|
|
|
class="report-block"
|
|
|
>
|
|
|
<div v-if="section.title" class="report-block__divider">
|
|
|
@@ -310,16 +305,6 @@ const route = useRoute();
|
|
|
const activeTab = ref("weather");
|
|
|
const tabs = TABS;
|
|
|
|
|
|
-// ---------------------------------------------------------------------------
|
|
|
-// 锚点定位
|
|
|
-// ---------------------------------------------------------------------------
|
|
|
-const scrollToSection = (key) => {
|
|
|
- activeTab.value = key;
|
|
|
- const el = document.getElementById(`report-section-${key}`);
|
|
|
- if (!el) return;
|
|
|
- el.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
|
-};
|
|
|
-
|
|
|
const handleShare = () => {
|
|
|
const query = {
|
|
|
askInfo: { title: "转发报告", content: "是否分享给好友" },
|
|
|
@@ -490,7 +475,6 @@ const handleShare = () => {
|
|
|
border-radius: 12px;
|
|
|
background: #fff;
|
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
|
|
|
- scroll-margin-top: 8px;
|
|
|
|
|
|
&__title {
|
|
|
position: relative;
|