新增研学联建

src/views/map/index.vue

@@ -22,6 +22,9 @@
     <div class="science-bg" v-show="state.activeIndex === '5'">
       <img src="@/assets/images/背景图.png" alt="背景图" />
     </div>
+    <div class="study-bg" v-show="state.activeIndex === '6'">
+      <img src="@/assets/images/昆山水文站.jpg" alt="昆山水文站" />
+    </div>
     <!-- 视频背景 -->
     <div class="video-background" v-if="state.showVideoPlayer">
       <video
@@ -140,6 +143,9 @@
 
       <!-- 水文科普内容 -->
       <ScienceContent v-if="state.activeIndex === '5'" />
+      
+      <!-- 研学联建内容 -->
+      <StudyContent v-if="state.activeIndex === '6'" />
       <!-- 左右装饰线 -->
       <div class="large-screen-left-zsline"></div>
       <div class="large-screen-right-zsline"></div>
@@ -184,6 +190,7 @@ import WaterResourceContent from "@/views/waterResource/index.vue"
 import WaterStationContent from "@/views/waterStation/index.vue"
 import HistoryContent from "@/views/history/index.vue"
 import ScienceContent from "@/views/science/index.vue"
+import StudyContent from "@/views/study/index.vue"
 
 import { Assets } from "./assets.js"
 import emitter from "@/utils/emitter"
@@ -652,7 +659,7 @@ function handleMapPlayComplete() {
   }
 }
 
-.fusion-bg, .business-bg, .history-bg, .culture-bg, .science-bg {
+.fusion-bg, .business-bg, .history-bg, .culture-bg, .science-bg, .study-bg {
   position: absolute;
   z-index: 1;
   left: 0;

src/views/study/components/StudyBase.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="study-base">
+    <div class="m-card">
+      <div class="m-card-hd">
+        <div class="title">示范基地全景</div>
+      </div>
+      <div class="m-card-bd">
+        <div class="base-panorama">
+          <img src="@/assets/images/昆山水文站.jpg" alt="昆山水文站全景" class="panorama-image">
+          <div class="panorama-info">
+            <h3>昆山水文站示范基地</h3>
+            <p>占地面积：10000平方米</p>
+            <p>建设时间：2023年</p>
+            <p>功能定位：水文监测、研学教育、科普展示</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss">
+.study-base {
+  height: 100%;
+  .m-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .m-card-hd {
+      padding: 15px 20px;
+      border-bottom: 1px solid rgba(48, 220, 255, 0.3);
+      .title {
+        font-size: 18px;
+        font-weight: bold;
+        color: #30dcfd;
+      }
+    }
+    .m-card-bd {
+      flex: 1;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      .base-panorama {
+        position: relative;
+        width: 100%;
+        height: 280px;
+        border-radius: 8px;
+        overflow: hidden;
+        .panorama-image {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+        .panorama-info {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          background: linear-gradient(transparent, rgba(0, 20, 40, 0.9));
+          padding: 15px;
+          color: white;
+          h3 {
+            font-size: 16px;
+            margin-bottom: 10px;
+          }
+          p {
+            font-size: 12px;
+            margin-bottom: 5px;
+            opacity: 0.8;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/study/components/StudyEffect.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="study-effect">
+    <div class="m-card">
+      <div class="m-card-hd">
+        <div class="title">研学成效数据</div>
+      </div>
+      <div class="m-card-bd">
+        <div class="effect-content">
+          <div class="effect-item">
+            <div class="item-value">1200+</div>
+            <div class="item-label">参与学生</div>
+          </div>
+          <div class="effect-item">
+            <div class="item-value">50+</div>
+            <div class="item-label">研学课程</div>
+          </div>
+          <div class="effect-item">
+            <div class="item-value">20+</div>
+            <div class="item-label">合作学校</div>
+          </div>
+          <div class="effect-item">
+            <div class="item-value">98%</div>
+            <div class="item-label">满意度</div>
+          </div>
+        </div>
+        <div class="effect-chart">
+          <div class="chart-title">近一年研学活动趋势</div>
+          <div class="chart-content">
+            <div class="chart-bar">
+              <div class="bar" style="height: 30%"></div>
+              <div class="bar-label">1月</div>
+            </div>
+            <div class="chart-bar">
+              <div class="bar" style="height: 45%"></div>
+              <div class="bar-label">3月</div>
+            </div>
+            <div class="chart-bar">
+              <div class="bar" style="height: 80%"></div>
+              <div class="bar-label">6月</div>
+            </div>
+            <div class="chart-bar">
+              <div class="bar" style="height: 60%"></div>
+              <div class="bar-label">9月</div>
+            </div>
+            <div class="chart-bar">
+              <div class="bar" style="height: 95%"></div>
+              <div class="bar-label">12月</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss">
+.study-effect {
+  height: 100%;
+  .m-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .m-card-hd {
+      padding: 15px 20px;
+      border-bottom: 1px solid rgba(48, 220, 255, 0.3);
+      .title {
+        font-size: 18px;
+        font-weight: bold;
+        color: #30dcfd;
+      }
+    }
+    .m-card-bd {
+      flex: 1;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .effect-content {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 15px;
+        margin-bottom: 20px;
+        .effect-item {
+          background: rgba(0, 20, 40, 0.5);
+          border: 1px solid rgba(48, 220, 255, 0.2);
+          border-radius: 8px;
+          padding: 15px;
+          text-align: center;
+          .item-value {
+            font-size: 24px;
+            font-weight: bold;
+            color: #30dcfd;
+            margin-bottom: 5px;
+          }
+          .item-label {
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.8);
+          }
+        }
+      }
+      .effect-chart {
+        flex: 1;
+        .chart-title {
+          font-size: 14px;
+          font-weight: bold;
+          color: white;
+          margin-bottom: 15px;
+        }
+        .chart-content {
+          display: flex;
+          align-items: flex-end;
+          justify-content: space-around;
+          height: 120px;
+          .chart-bar {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 5px;
+            .bar {
+              width: 20px;
+              background: linear-gradient(to top, #30dcfd, rgba(48, 220, 255, 0.3));
+              border-radius: 4px 4px 0 0;
+              transition: height 1s ease;
+            }
+            .bar-label {
+              font-size: 10px;
+              color: rgba(255, 255, 255, 0.6);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/study/components/StudyIntegration.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="study-integration">
+    <div class="m-card">
+      <div class="m-card-hd">
+        <div class="title">研学机制融合</div>
+      </div>
+      <div class="m-card-bd">
+        <div class="integration-content">
+          <div class="integration-item">
+            <div class="item-icon">1</div>
+            <div class="item-content">
+              <h4>理论与实践结合</h4>
+              <p>将水文理论知识与实际监测操作相结合，通过实地观测、数据采集等实践活动，加深对水文知识的理解。</p>
+            </div>
+          </div>
+          <div class="integration-item">
+            <div class="item-icon">2</div>
+            <div class="item-content">
+              <h4>多学科融合</h4>
+              <p>融合水文、地理、环境、信息技术等多学科知识，构建完整的研学课程体系，培养综合能力。</p>
+            </div>
+          </div>
+          <div class="integration-item">
+            <div class="item-icon">3</div>
+            <div class="item-content">
+              <h4>产学研合作</h4>
+              <p>与高校、科研机构、企业建立合作关系，提供专业指导和技术支持，提升研学质量。</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss">
+.study-integration {
+  height: 100%;
+  .m-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .m-card-hd {
+      padding: 15px 20px;
+      border-bottom: 1px solid rgba(48, 220, 255, 0.3);
+      .title {
+        font-size: 18px;
+        font-weight: bold;
+        color: #30dcfd;
+      }
+    }
+    .m-card-bd {
+      flex: 1;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .integration-content {
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+        .integration-item {
+          display: flex;
+          gap: 15px;
+          .item-icon {
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            background: rgba(48, 220, 255, 0.2);
+            border: 1px solid rgba(48, 220, 255, 0.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 14px;
+            font-weight: bold;
+            color: #30dcfd;
+            flex-shrink: 0;
+          }
+          .item-content {
+            flex: 1;
+            h4 {
+              font-size: 14px;
+              font-weight: bold;
+              color: white;
+              margin-bottom: 5px;
+            }
+            p {
+              font-size: 12px;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 1.4;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/study/components/StudyProcess.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="study-process">
+    <div class="m-card">
+      <div class="m-card-hd">
+        <div class="title">研学联建流程</div>
+      </div>
+      <div class="m-card-bd">
+        <div class="process-content">
+          <div class="process-step">
+            <div class="step-number">01</div>
+            <div class="step-content">
+              <h4>需求对接</h4>
+              <p>与学校、教育机构等合作方进行需求沟通，了解研学目标、参与人数、时间安排等具体要求。</p>
+            </div>
+          </div>
+          <div class="process-arrow"></div>
+          <div class="process-step">
+            <div class="step-number">02</div>
+            <div class="step-content">
+              <h4>方案定制</h4>
+              <p>根据需求定制专属研学方案，包括课程内容、活动安排、安全保障等，确保符合教育目标和学生特点。</p>
+            </div>
+          </div>
+          <div class="process-arrow"></div>
+          <div class="process-step">
+            <div class="step-number">03</div>
+            <div class="step-content">
+              <h4>活动实施</h4>
+              <p>组织专业导师团队，开展实地研学活动，包括水文监测体验、数据采集分析、科普讲座等环节。</p>
+            </div>
+          </div>
+          <div class="process-arrow"></div>
+          <div class="process-step">
+            <div class="step-number">04</div>
+            <div class="step-content">
+              <h4>效果评估</h4>
+              <p>通过问卷调查、学生反馈、成果展示等方式，评估研学活动效果，持续优化研学方案。</p>
+            </div>
+          </div>
+          <div class="process-arrow"></div>
+          <div class="process-step">
+            <div class="step-number">05</div>
+            <div class="step-content">
+              <h4>长期合作</h4>
+              <p>建立长期合作关系，定期开展研学活动，共同推进水文科普教育，培养更多水文人才。</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss">
+.study-process {
+  height: 100%;
+  .m-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .m-card-hd {
+      padding: 15px 20px;
+      border-bottom: 1px solid rgba(48, 220, 255, 0.3);
+      .title {
+        font-size: 18px;
+        font-weight: bold;
+        color: #30dcfd;
+      }
+    }
+    .m-card-bd {
+      flex: 1;
+      padding: 20px;
+      overflow-y: auto;
+      .process-content {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        .process-step {
+          display: flex;
+          gap: 15px;
+          .step-number {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: rgba(48, 220, 255, 0.2);
+            border: 1px solid rgba(48, 220, 255, 0.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            font-weight: bold;
+            color: #30dcfd;
+            flex-shrink: 0;
+          }
+          .step-content {
+            flex: 1;
+            h4 {
+              font-size: 14px;
+              font-weight: bold;
+              color: white;
+              margin-bottom: 5px;
+            }
+            p {
+              font-size: 12px;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 1.4;
+            }
+          }
+        }
+        .process-arrow {
+          width: 2px;
+          height: 20px;
+          background: linear-gradient(to bottom, rgba(48, 220, 255, 0.5), rgba(48, 220, 255, 0.1));
+          margin-left: 19px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/study/index.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="study-content">
+    <div class="left-column">
+      <div class="left-column-3d">
+        <div class="module-card">
+          <StudyBase />
+        </div>
+        <div class="module-card">
+          <StudyIntegration />
+        </div>
+      </div>
+    </div>
+    <div class="right-column">
+      <div class="right-column-3d">
+        <div class="module-card">
+          <StudyEffect />
+        </div>
+        <div class="module-card">
+          <StudyProcess />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import StudyBase from "./components/StudyBase.vue"
+import StudyIntegration from "./components/StudyIntegration.vue"
+import StudyEffect from "./components/StudyEffect.vue"
+import StudyProcess from "./components/StudyProcess.vue"
+</script>
+
+<style lang="scss">
+.study-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.left-column {
+  position: absolute;
+  z-index: 4;
+  width: 398px;
+  left: 32px;
+  top: 150px;
+  bottom: 50px;
+  perspective: 500px;
+  perspective-origin: 50% 50%;
+  .left-column-3d {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 20px;
+    transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1) rotateX(0deg) rotateY(6deg) rotateZ(0deg) skewX(0deg) skewY(0deg);
+    z-index: 4;
+  }
+  .module-card {
+    height: 450px;
+    background: rgba(0, 20, 40, 0.8);
+    border: 1px solid rgba(48, 220, 255, 0.3);
+    border-radius: 10px;
+    box-shadow: 0 0 20px rgba(48, 220, 255, 0.1);
+    transform: translateX(-150%);
+    opacity: 0;
+    &:first-child {
+      margin-top: -50px;
+    }
+  }
+}
+
+.right-column {
+  position: absolute;
+  z-index: 4;
+  width: 398px;
+  right: 32px;
+  top: 150px;
+  bottom: 50px;
+  perspective: 800px;
+  perspective-origin: 50% 50%;
+  .right-column-3d {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 20px;
+    transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1) rotateX(0deg) rotateY(-6deg) rotateZ(0deg) skewX(0deg) skewY(0deg);
+  }
+  .module-card {
+    height: 450px;
+    background: rgba(0, 20, 40, 0.8);
+    border: 1px solid rgba(48, 220, 255, 0.3);
+    border-radius: 10px;
+    box-shadow: 0 0 20px rgba(48, 220, 255, 0.1);
+    transform: translateX(150%);
+    opacity: 0;
+    &:first-child {
+      margin-top: -30px;
+    }
+  }
+}
+</style>