feat: 修改主页面添加交互功能

txw-mhzc-web/src/pages/index/views/home2/index.vue

@@ -3,8 +3,9 @@
     <!-- 主页面 -->
     <div class="container">
       <!-- 顶部背景轮播 -->
-      <div class="top-box">
+      <div class="top-box" id="section-hero">
-        <t-swiper class="top-banner-swiper" animation="fade" :height="topBannerHeight" :interval="6000" :duration="500" :loop="true" :autoplay="true" theme="dark">
+        <t-swiper class="top-banner-swiper" animation="fade" :height="topBannerHeight" :interval="6000" :duration="500"
+          :loop="true" :autoplay="true" theme="dark">
           <t-swiper-item v-for="(src, idx) in topBannerImages" :key="idx">
             <div class="banner-slide" :style="{ backgroundImage: `url(${src})` }" />
           </t-swiper-item>
@@ -27,7 +28,8 @@
             </div>
             <div class="top-search-hot">
               <div class="hot-label">热门搜索: </div>
-              <div class="hot-tag" v-for="(tag, index) in hotSearchTags" :key="index" @click="handleHotSearch(tag)">{{ tag }}</div>
+              <div class="hot-tag" v-for="(tag, index) in hotSearchTags" :key="index" @click="handleHotSearch(tag)">{{
+                tag }}</div>
             </div>
           </div>
 
@@ -71,8 +73,8 @@
       </div>
 
       <!-- 中间核心驱动 -->
-      <section class="core-section">
+      <section class="core-section" id="section-core">
-        <div class="section-container">
+        <div class="section-container core-container">
           <div class="section-title core-title">
             <!-- <span class="title-bar"></span> -->
             <span class="title-text">核心驱动</span>
@@ -90,7 +92,7 @@
       </section>
 
       <!-- 共性能力模块 -->
-      <section class="capability-section">
+      <section class="capability-section" id="section-capability">
         <div class="section-container capability-container">
           <div class="capability-header">
             <div class="capability-title-group">
@@ -103,7 +105,8 @@
           </div>
 
           <div class="capability-grid">
-            <div class="capability-card" v-for="(item, index) in capabilityList" :key="index" @click="handleCapabilityClick(item)">
+            <div class="capability-card" v-for="(item, index) in capabilityList" :key="index"
+              @click="handleCapabilityClick(item)">
               <div class="capability-card-content">
                 <img :src="item.icon" :alt="item.name" class="capability-icon" />
                 <span class="capability-name">{{ item.name }}</span>
@@ -115,7 +118,7 @@
       </section>
 
       <!-- 企业出海模块 -->
-      <section class="overseas2-section">
+      <section class="overseas2-section" id="section-overseas">
         <div class="section-container overseas2-container">
           <div class="overseas2-header">
             <div class="overseas2-title-group">
@@ -144,7 +147,7 @@
       </section>
 
       <!-- 行业动态 -->
-      <section class="news-section">
+      <section class="news-section" id="section-news">
         <div class="section-container news-container">
           <div class="news-header">
             <div class="news-title-group">
@@ -156,7 +159,8 @@
           </div>
 
           <div class="news-tabs">
-            <div class="news-tab" :class="{ 'news-tab-active': activeTab === index }" v-for="(tab, index) in newsTabs" :key="index" @click="activeTab = index">
+            <div class="news-tab" :class="{ 'news-tab-active': activeTab === index }" v-for="(tab, index) in newsTabs"
+              :key="index" @click="activeTab = index">
               {{ tab.name }}
             </div>
           </div>
@@ -195,7 +199,7 @@
       </section>
 
       <!-- 合作伙伴模块 -->
-      <section class="partner-section">
+      <section class="partner-section" id="section-partner">
         <div class="section-container">
           <div class="partner-title-area">
             <div class="partner-title-content">
@@ -242,7 +246,7 @@
       </section>
 
       <!-- 建立您的碳数字身份 -->
-      <div class="bottom-box">
+      <div class="bottom-box" id="section-bottom">
         <div class="content">
           <div class="bottom-box-content-title">立刻获取第一张碳身份证</div>
           <div class="desc">让中国的每一个碳都拥有独一无二的可信数字身份</div>
@@ -269,6 +273,9 @@ export default {
       activeTab: 0,
       topBannerHeight: 820,
       newsLoading: true,
+      isScrolling: false,
+      scrollThreshold: 1,
+      sectionIds: ['section-hero', 'section-core', 'section-capability', 'section-overseas', 'section-news', 'section-partner', 'section-bottom'],
       newsListByType: {
         gjzc: [],  // 国家政策
         hyzx: [],   // 行业资讯
@@ -372,11 +379,80 @@ export default {
     this.syncBannerHeight();
     window.addEventListener('resize', this.syncBannerHeight);
     this.fetchNewsData();
+    window.addEventListener('wheel', this.handleWheel, { passive: false });
   },
   beforeDestroy() {
     window.removeEventListener('resize', this.syncBannerHeight);
+    window.removeEventListener('wheel', this.handleWheel);
   },
   methods: {
+    handleWheel(e) {
+      if (this.isScrolling) return;
+      const delta = Math.abs(e.deltaY);
+      if (delta < this.scrollThreshold) return;
+
+      e.preventDefault();
+      this.isScrolling = true;
+
+      const direction = e.deltaY > 0 ? 1 : -1;
+      const viewHeight = window.innerHeight;
+
+      let currentIndex = -1;
+      let minDistance = Infinity;
+
+      // 找到当前视口中最靠近顶部的模块
+      for (let i = 0; i < this.sectionIds.length; i++) {
+        const el = document.getElementById(this.sectionIds[i]);
+        if (el) {
+          const rect = el.getBoundingClientRect();
+          // 模块的顶部在视口内或视口上方，且底部在视口下方
+          if (rect.top <= viewHeight && rect.bottom > 0) {
+            const distance = Math.abs(rect.top);
+            if (distance < minDistance) {
+              minDistance = distance;
+              currentIndex = i;
+            }
+          }
+        }
+      }
+
+      // 如果没找到，尝试用另一种方式定位
+      if (currentIndex === -1) {
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        for (let i = 0; i < this.sectionIds.length; i++) {
+          const el = document.getElementById(this.sectionIds[i]);
+          if (el && el.offsetTop <= scrollTop) {
+            currentIndex = i;
+          }
+        }
+      }
+
+      let targetIndex;
+      if (direction > 0) {
+        // 向下滚动：到下一个模块
+        targetIndex = currentIndex === -1 ? 0 : Math.min(currentIndex + 1, this.sectionIds.length - 1);
+      } else {
+        // 向上滚动：到上一个模块
+        targetIndex = currentIndex === -1 ? 0 : Math.max(currentIndex - 1, 0);
+      }
+
+      const targetEl = document.getElementById(this.sectionIds[targetIndex]);
+      if (targetEl) {
+        const rect = targetEl.getBoundingClientRect();
+        const elHeight = rect.height;
+        if (elHeight < viewHeight) {
+          // 模块高度小于视口，垂直居中
+          targetEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        } else {
+          // 模块高度大于视口，顶部落底
+          targetEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+      }
+
+      setTimeout(() => {
+        this.isScrolling = false;
+      }, 800);
+    },
     openNewTab(url) {
       window.open(url);
     },
@@ -528,6 +604,7 @@ export default {
 
   z-index: 9999;
 }
+
 .logo-box {
   text-align: center;
 }
@@ -630,7 +707,8 @@ export default {
   margin-top: 64px;
   width: 100%;
   /* max-width: 1920px; */
-  margin: 0 auto; /* 左右居中 */
+  margin: 0 auto;
+  /* 左右居中 */
   min-height: 100vh;
 }
 
@@ -881,6 +959,7 @@ export default {
 .cyan-card .card-header {
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 100%);
 }
+
 .cyan-card .card-body {
   box-shadow: 0px 8px 12px 0px rgba(0, 185, 107, 0.1);
   backdrop-filter: blur(8px);
@@ -895,6 +974,7 @@ export default {
 .green-card .card-header {
   background: linear-gradient(180deg, rgba(107, 255, 204, 0.4) 0%, rgba(107, 255, 204, 0.2) 100%);
 }
+
 .green-card .card-body {
   box-shadow: 0px 8px 12px 0px rgba(0, 185, 107, 0.1);
   backdrop-filter: blur(8px);
@@ -909,10 +989,17 @@ export default {
 /* ==================== 核心驱动模块 ==================== */
 .core-section {
   width: 100%;
+  height: 100vh;
   background: #fff;
   padding: 80px 0;
 }
 
+.core-container{
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
 .section-container {
   max-width: 1400px;
   margin: 0 auto;
@@ -1022,6 +1109,7 @@ export default {
 
 /* ==================== 共性能力模块 ==================== */
 .capability-section {
+  height: 100vh;
   position: relative;
   padding: 80px 0;
   overflow: hidden;
@@ -1052,17 +1140,17 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(
+  background: linear-gradient(180deg,
-    180deg,
       rgba(245, 247, 250, 1) 0%,
       rgba(255, 255, 255, 0.8) 50%,
-    rgba(245, 247, 250, 1) 100%
+      rgba(245, 247, 250, 1) 100%);
-  );
 }
 
 .capability-container {
   position: relative;
   z-index: 1;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
 .capability-header {
@@ -1177,9 +1265,8 @@ export default {
 
 /* ==================== 企业出海模块（新样式） ==================== */
 .overseas2-section {
-  /* position: relative; */
+  height: 100vh;
-  position:sticky;
+  position: relative;
-  top: 64px;
   padding: 80px 0;
   overflow: hidden;
   background-image: url('~@/pages/index/assets/qych-bg.png');
@@ -1191,6 +1278,8 @@ export default {
 .overseas2-container {
   position: relative;
   z-index: 1;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
 .overseas2-header {
@@ -1342,8 +1431,7 @@ export default {
   z-index: 1;
 }
 
-.news-header {
+.news-header {}
-}
 
 .news-title-group {
   display: flex;
@@ -1552,6 +1640,7 @@ export default {
   0% {
     background-position: 200% 0;
   }
+
   100% {
     background-position: -200% 0;
   }
@@ -1647,6 +1736,7 @@ export default {
 
 /* ==================== 合作伙伴模块 ==================== */
 .partner-section {
+  height: 100vh;
   position: relative;
   background: #f5f7fa;
   padding: 80px 0;
@@ -1686,6 +1776,7 @@ export default {
   0% {
     transform: translateX(0);
   }
+
   100% {
     transform: translateX(-50%);
   }
@@ -1695,6 +1786,7 @@ export default {
   0% {
     transform: translateX(-50%);
   }
+
   100% {
     transform: translateX(0);
   }
@@ -1823,9 +1915,12 @@ export default {
 
   background-image: url(~@/pages/index/assets/home-szsf-bg.png);
 
-  background-repeat: no-repeat; /* 不重复 */
+  background-repeat: no-repeat;
-  background-size: cover; /* 不拉伸，保持原图尺寸 */
+  /* 不重复 */
-  background-position: left; /* 永远显示中间部分 */
+  background-size: cover;
+  /* 不拉伸，保持原图尺寸 */
+  background-position: left;
+  /* 永远显示中间部分 */
 
   display: flex;
   justify-content: center;
@@ -1893,6 +1988,7 @@ export default {
 }
 
 @media (max-width: 767px) {
+
   /* 容器调整 */
   .container {
     margin-top: 64px;

txw-mhzc-web/vue.config.js

@@ -287,14 +287,14 @@ module.exports = {
     // 会误伤 SPA 路由 /view/mhzc/...，刷新时整页请求被转发到后端导致 Proxy error。必须用 ^ 限定为路径前缀。
     proxy: {
       '^/sso': {
-        // target: 'http://localhost:9301',
+        target: 'http://192.168.110.29:9301',
-        target: 'http://carbon.liantu.tech',
+        // target: 'http://carbon.liantu.tech',
         // target: 'http://10.23.20.13:94/',
         changeOrigin: true,
       },
       '^/mhzc': {
-        // target: 'http://localhost:9302',
+        target: 'http://192.168.110.29:9302',
-        target: 'http://carbon.liantu.tech',
+        // target: 'http://carbon.liantu.tech',
         // target: 'http://10.23.20.13:94/',
         changeOrigin: true,
       },