创建历史沿革页，修改标题名称

src/views/history/index.vue

@@ -0,0 +1,330 @@
+<template>
+  <div class="history-content">
+    <div class="right-panel">
+      <div class="event-card">
+        <div class="card-header">
+          <div class="header-icon">📜</div>
+          <div class="header-title">历史沿革</div>
+        </div>
+        <div class="event-list">
+          <div 
+            v-for="(event, index) in events" 
+            :key="index" 
+            class="event-item"
+            :class="{ active: selectedIndex === index }"
+            @click="selectEvent(index)"
+          >
+            <div class="event-year">{{ event.year }}</div>
+            <div class="event-title">{{ event.title }}</div>
+          </div>
+        </div>
+        <div class="event-detail">
+          <div class="detail-header">
+            <div class="detail-year">{{ currentEvent.year }}</div>
+            <div class="detail-title">{{ currentEvent.title }}</div>
+          </div>
+          <div class="detail-content">{{ currentEvent.description }}</div>
+          <div class="detail-impact">
+            <div class="impact-label">重要意义</div>
+            <div class="impact-text">{{ currentEvent.impact }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="timeline-panel">
+      <div class="timeline-container">
+        <div class="timeline-track">
+          <div 
+            v-for="(event, index) in events" 
+            :key="index"
+            class="timeline-item"
+            :class="{ active: selectedIndex === index }"
+            @click="selectEvent(index)"
+          >
+            <div class="timeline-dot"></div>
+            <div class="timeline-year">{{ event.year }}</div>
+            <div class="timeline-label">{{ event.shortTitle }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue"
+
+const events = ref([
+  {
+    year: "1954",
+    title: "昆山水文站成立",
+    shortTitle: "水文站成立",
+    description: "昆山水文站正式成立，开始系统开展水文监测工作，建立了首个水文观测点，开启了昆山水文事业的起点。",
+    impact: "奠定了昆山水文监测体系的基础，为后续水资源管理提供了数据支撑。"
+  },
+  {
+    year: "1978",
+    title: "自动化监测起步",
+    shortTitle: "自动化起步",
+    description: "引入自动化水位自动记录设备，逐步实现水位监测数据的自动采集，提高了数据采集效率。",
+    impact: "提升了水文监测的准确性和时效性。"
+  },
+  {
+    year: "1995",
+    title: "水质监测体系建立",
+    shortTitle: "水质监测建立",
+    description: "建立完善的水质监测网络，增设多个水质监测点，全面监控水体质量变化。",
+    impact: "实现了从水量监测向水量水质综合监测的转变。"
+  },
+  {
+    year: "2005",
+    title: "信息化建设启动",
+    shortTitle: "信息化建设",
+    description: "启动水文信息化建设，建立数据中心，实现监测数据远程传输和集中管理。",
+    impact: "推动了水文管理向数字化、智能化方向发展。"
+  },
+  {
+    year: "2015",
+    title: "智慧水务平台上线",
+    shortTitle: "智慧水务平台",
+    description: "智慧水务综合管理平台正式上线，整合各类监测数据，实现统一可视化展示。",
+    impact: "实现了水文数据的全面整合和智能分析。"
+  },
+  {
+    year: "2023",
+    title: "融合发展新阶段",
+    shortTitle: "融合发展",
+    description: "进入多部门融合发展新阶段，建立协同工作机制，提升综合管理能力。",
+    impact: "开启了水文管理现代化的新篇章。"
+  }
+])
+
+const selectedIndex = ref(0)
+
+const currentEvent = computed(() => events.value[selectedIndex.value])
+
+function selectEvent(index) {
+  selectedIndex.value = index
+}
+</script>
+
+<style lang="scss">
+.history-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.right-panel {
+  position: absolute;
+  z-index: 4;
+  width: 380px;
+  right: 32px;
+  top: 150px;
+  bottom: 400px;
+  perspective: 800px;
+  perspective-origin: 50% 50%;
+}
+
+.event-card {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 20, 40, 0.85);
+  border: 1px solid rgba(48, 220, 255, 0.3);
+  border-radius: 10px;
+  box-shadow: 0 0 20px rgba(48, 220, 255, 0.1);
+  transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1) rotateX(0deg) rotateY(-6deg) rotateZ(0deg) skewX(0deg) skewY(0deg);
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  transform: translateX(150%);
+  opacity: 0;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgba(48, 220, 255, 0.2);
+  .header-icon {
+    font-size: 24px;
+  }
+  .header-title {
+    font-size: 18px;
+    font-weight: bold;
+    color: #30dcff;
+    letter-spacing: 2px;
+  }
+}
+
+.event-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  .event-item {
+    padding: 8px 12px;
+    background: rgba(48, 220, 255, 0.1);
+    border: 1px solid rgba(48, 220, 255, 0.2);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    pointer-events: auto;
+    &:hover {
+      background: rgba(48, 220, 255, 0.2);
+      border-color: rgba(48, 220, 255, 0.4);
+    }
+    &.active {
+      background: rgba(48, 220, 255, 0.3);
+      border-color: rgba(48, 220, 255, 0.6);
+      box-shadow: 0 0 10px rgba(48, 220, 255, 0.3);
+    }
+    .event-year {
+      font-size: 12px;
+      color: #00bfff;
+      font-weight: bold;
+    }
+    .event-title {
+      font-size: 13px;
+      color: #c4f3fe;
+    }
+  }
+}
+
+.event-detail {
+  flex: 1;
+  background: rgba(0, 180, 255, 0.05);
+  border-radius: 8px;
+  padding: 15px;
+  border: 1px solid rgba(48, 220, 255, 0.1);
+  .detail-header {
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+    margin-bottom: 10px;
+    .detail-year {
+      font-size: 28px;
+      font-weight: bold;
+      color: #30dcff;
+    }
+    .detail-title {
+      font-size: 16px;
+      color: #fff;
+    }
+  }
+  .detail-content {
+    font-size: 14px;
+    color: #a3dcde;
+    line-height: 1.6;
+    margin-bottom: 15px;
+  }
+  .detail-impact {
+    padding-top: 10px;
+    border-top: 1px solid rgba(48, 220, 255, 0.2);
+    .impact-label {
+      font-size: 12px;
+      color: #43e97b;
+      margin-bottom: 5px;
+    }
+    .impact-text {
+      font-size: 13px;
+      color: #c4f3fe;
+      line-height: 1.5;
+    }
+  }
+}
+
+.timeline-panel {
+  position: absolute;
+  left: 100px;
+  right: 100px;
+  bottom: 30px;
+  height: 100px;
+  z-index: 4;
+}
+
+.timeline-container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  background: rgba(0, 20, 40, 0.7);
+  border: 1px solid rgba(48, 220, 255, 0.2);
+  border-radius: 10px;
+  padding: 15px 20px;
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+.timeline-track {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  height: 100%;
+  position: relative;
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 20px;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, rgba(48, 220, 255, 0.5), transparent);
+  }
+}
+
+.timeline-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  pointer-events: auto;
+  transition: all 0.3s ease;
+  &:hover {
+    transform: translateY(-5px);
+  }
+  .timeline-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: rgba(48, 220, 255, 0.3);
+    border: 2px solid rgba(48, 220, 255, 0.5);
+    margin-bottom: 8px;
+    transition: all 0.3s ease;
+  }
+  .timeline-year {
+    font-size: 12px;
+    color: #a3dcde;
+    margin-bottom: 5px;
+  }
+  .timeline-label {
+    font-size: 11px;
+    color: #c4f3fe;
+    text-align: center;
+    max-width: 80px;
+  }
+  &.active {
+    .timeline-dot {
+      background: #30dcff;
+      box-shadow: 0 0 10px rgba(48, 220, 255, 0.5);
+      transform: scale(1.3);
+    }
+    .timeline-year {
+      color: #30dcff;
+      font-weight: bold;
+    }
+    .timeline-label {
+      color: #fff;
+    }
+  }
+}
+</style>

src/views/map/index.vue

@@ -2,7 +2,10 @@
   <div class="large-screen">
     <!-- 地图 -->
     <mapScene ref="mapSceneRef" v-show="state.activeIndex === '1'"></mapScene>
-    <div class="fusion-bg" v-show="state.activeIndex === '4'">
+    <div class="fusion-bg" v-show="state.activeIndex === '2'">
+      <img src="@/assets/images/昆山水文站.jpg" alt="昆山水文站" />
+    </div>
+    <div class="history-bg" v-show="state.activeIndex === '4'">
       <img src="@/assets/images/昆山水文站.jpg" alt="昆山水文站" />
     </div>
     <div class="vignette-overlay"></div>
@@ -21,12 +24,12 @@
       <div class="top-menu">
         <mMenu :default-active="state.activeIndex" @select="handleMenuSelect">
           <mMenuItem index="1">区域总览</mMenuItem>
-          <mMenuItem index="2">水质监测</mMenuItem>
-          <mMenuItem index="3">水文数据</mMenuItem>
+          <mMenuItem index="2">融合体系</mMenuItem>
+          <mMenuItem index="3">水文测站</mMenuItem>
           <div class="top-menu-mid-space"></div>
-          <mMenuItem index="4">融合体系</mMenuItem>
-          <mMenuItem index="5">历史沿革</mMenuItem>
-          <mMenuItem index="6">水文科普</mMenuItem>
+          <mMenuItem index="4">历史沿革</mMenuItem>
+          <mMenuItem index="5">水文科普</mMenuItem>
+          <mMenuItem index="6">研学联建</mMenuItem>
         </mMenu>
       </div>
       <!-- 区域总览内容 -->
@@ -89,7 +92,10 @@
       </template>
 
       <!-- 融合体系内容 -->
-      <WaterResourceContent v-if="state.activeIndex === '4'" />
+      <WaterResourceContent v-if="state.activeIndex === '2'" />
+
+      <!-- 历史沿革内容 -->
+      <HistoryContent v-if="state.activeIndex === '4'" />
       <!-- 左右装饰线 -->
       <div class="large-screen-left-zsline"></div>
       <div class="large-screen-right-zsline"></div>
@@ -131,6 +137,7 @@ import ProportionPopulationConsumption from "./components/ProportionPopulationCo
 import ElectricityUsage from "./components/ElectricityUsage.vue"
 import QuarterlyGrowthSituation from "./components/QuarterlyGrowthSituation.vue"
 import WaterResourceContent from "@/views/waterResource/index.vue"
+import HistoryContent from "@/views/history/index.vue"
 
 import { Assets } from "./assets.js"
 import emitter from "@/utils/emitter"
@@ -252,8 +259,11 @@ function handleMenuSelect(index) {
       gsap.to(".count-card", { y: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
       gsap.to(".bottom-tray", { y: 0, opacity: 1, duration: 0.5 })
       gsap.to(".bottom-radar", { y: 0, opacity: 1, duration: 0.5 })
-    } else if (index === "4") {
+    } else if (index === "2") {
       gsap.to(".water-resource-content .module-card", { x: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
+    } else if (index === "4") {
+      gsap.to(".history-content .event-card", { x: 0, opacity: 1, duration: 0.5 })
+      gsap.to(".history-content .timeline-container", { y: 0, opacity: 1, duration: 0.5, delay: 0.2 })
     }
   })
 }
@@ -415,7 +425,7 @@ function handleMapPlayComplete() {
   opacity: 0;
 }
 
-.fusion-bg {
+.fusion-bg, .history-bg {
   position: absolute;
   z-index: 1;
   left: 0;