From 69755ac7df2d6ada220be55378a92a9aa4e06275 Mon Sep 17 00:00:00 2001
From: jack <251108449@qq.com>
Date: Mon, 13 Jul 2026 16:01:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/withmind/assets/index.rem.css |  25 ++---
 src/views/withmind/index.vue            | 124 +++++++++---------------
 2 files changed, 55 insertions(+), 94 deletions(-)

diff --git a/src/views/withmind/assets/index.rem.css b/src/views/withmind/assets/index.rem.css
index 8a51970..edc3696 100644
--- a/src/views/withmind/assets/index.rem.css
+++ b/src/views/withmind/assets/index.rem.css
@@ -48,8 +48,6 @@ html {
   width: 1.814rem;
   height: 0.694rem;
   overflow-wrap: break-word;
-  /* 原 color: rgba(25, 140, 255, 1) 已改:不再固定蓝色,
-     改用 .nav-active 类由 scroll-spy 控制高亮(滚动到对应 section 才变蓝) */
   color: rgba(22, 22, 22, 1);
   font-size: 0.48rem;
   font-family: Source Han Sans CN-Medium;
@@ -57,7 +55,7 @@ html {
   text-align: right;
   white-space: nowrap;
   line-height: 0.694rem;
-  /* 比照 newcss:.text_1(首页)margin-left 12.294rem;用户微调 → 11.3rem(再右移 0.3rem) */
+  /* margin-left 11.3rem,比照 newcss .text_1 */
   margin: 0.72rem 0 0 11.3rem;
 }
 
@@ -120,7 +118,7 @@ html {
 
 /* footer 新增的"应用实践"项:跟其他 footer nav-link 字体一致 */
 .text_nav_practice_footer {
-  /* 比照 newcss .text_34:width 2.134rem(原 1.92rem,跟其他 4 个镜像标题宽度一致) */
+  /* width 2.134rem,比照 newcss .text_34 */
   width: 2.134rem;
   height: 0.694rem;
   overflow-wrap: break-word;
@@ -195,8 +193,6 @@ html {
   white-space: nowrap;
   line-height: 1.6rem;
   vertical-align: middle;
-  /* 原 margin-right: 0.293rem 已删:导致"关于"和"WithMind"间距过大,
-     改用 HTML 里的 &nbsp; 控制间距(更精确) */
 }
 
 .text_7 {
@@ -210,7 +206,7 @@ html {
      源图宽高比 7.44:1,显示比例保持一致 */
   width: 8rem;
   height: 1.067rem;
-  margin-left: 0.187rem;
+  margin: 0.1rem 0 0 0.187rem;
   vertical-align: middle;
   display: inline-block;
   image-rendering: -webkit-optimize-contrast;
@@ -296,7 +292,6 @@ html {
   overflow-wrap: break-word;
   color: rgba(153, 153, 153, 1);
   font-size: 0.426rem;
-  letter-spacing: -0.5px;
   font-family: Source Han Sans CN-Regular;
   font-weight: 400;
   text-align: center;
@@ -370,7 +365,6 @@ html {
   overflow-wrap: break-word;
   color: rgba(153, 153, 153, 1);
   font-size: 0.426rem;
-  letter-spacing: -0.5px;
   font-family: Source Han Sans CN-Regular;
   font-weight: 400;
   text-align: center;
@@ -430,7 +424,6 @@ html {
   overflow-wrap: break-word;
   color: rgba(153, 153, 153, 1);
   font-size: 0.426rem;
-  letter-spacing: -0.5px;
   font-family: Source Han Sans CN-Regular;
   font-weight: 400;
   text-align: center;
@@ -490,7 +483,6 @@ html {
   overflow-wrap: break-word;
   color: rgba(153, 153, 153, 1);
   font-size: 0.426rem;
-  letter-spacing: -0.5px;
   font-family: Source Han Sans CN-Regular;
   font-weight: 400;
   text-align: center;
@@ -499,7 +491,6 @@ html {
 }
 
 .image-wrapper_5 {
-  /* 原 background-color: rgba(249, 250, 252, 1) 已删除：会让 Skills 段视觉发蓝 */
   height: 24.507rem;
   margin-top: 3.2rem;
   width: 51.2rem;
@@ -600,7 +591,7 @@ html {
 .group_10 {
   width: 38.054rem;
   height: 13.36rem;
-  margin: 3.2rem 0 0 5.434rem;     /* 左移 0.5+0.3+0.3+0.2+0.2rem(共 1.5rem,原 6.934rem) */
+  margin: 3.2rem 0 0 5.434rem;
 }
 
 .image_9 {
@@ -1268,15 +1259,12 @@ html {
 .group_23 {
   width: 37.12rem;
   height: 6.267rem;
-  /* 用户要求整体左移让下方 5 列文字对齐顶部 5 个镜像标题:
-     左移 0.3rem 后再回退 0.1rem(6.134 → 6.234rem),比 newcss 原版 6.934rem 仍左移 0.7rem */
   margin: 0.56rem 0 0 6.234rem;
 }
 
 .group_24 {
   width: 15.947rem;
   height: 6.054rem;
-  /* 描述区再右移 0.2rem(原 0.6rem → 0.8rem) */
   margin: 0.214rem 0 0 0.8rem;
 }
 
@@ -1482,7 +1470,6 @@ html {
   font-size: 0.48rem;
   font-family: Source Han Sans CN-Regular;
   font-weight: NaN;
-  /* 原 text-align: right 已改:left 对齐"文档"两字 */
   text-align: left;
   line-height: 0.96rem;
   margin-top: 0.427rem;
@@ -2103,3 +2090,7 @@ html {
   height: 8.747rem;
 }
 
+
+.text_nav_practice.nav-active {
+  color: rgba(25, 140, 255, 1) !important;
+}
diff --git a/src/views/withmind/index.vue b/src/views/withmind/index.vue
index 8f08413..8f348c0 100644
--- a/src/views/withmind/index.vue
+++ b/src/views/withmind/index.vue
@@ -534,7 +534,7 @@
         />
       </div>
       <div class="section_12 flex-row">
-        <div class="box_16 flex-row">
+        <div class="box_16 flex-row" @click="onLearnMore">
           <div class="image-text_8 flex-row justify-between">
             <span class="text-group_17">了解更多</span>
             <div class="image-wrapper_16 flex-col">
@@ -556,29 +556,21 @@ export default {
   data() {
     return {
       constants: {},
-      activeSection: 'top'  /* 当前高亮的 nav 对应的 section id */
+      activeSection: 'top',
+      scrollLocked: false
     };
   },
   mounted() {
     this.initScrollSpy();
   },
   methods: {
-    /* scroll-spy:用 Vue 响应式 data(activeSection) 驱动 nav-link 的 :class 绑定。
-       关键设计:点击 nav-link 后,锁定 activeSection = id,屏蔽一切自动 update,
-       直到平滑滚动结束再校准。这样彻底避免"点击瞬间设的 activeSection
-       被 IO/scroll 回调里的 compute() 改掉"的竞态。 */
     initScrollSpy() {
       const sectionIds = ['about', 'skills', 'platform', 'agent', 'media', 'practice', 'gateway'];
 
-      // 单一 compute:section 顶 ≤ 视口高度的 50%(即"section 顶已过视口中线")就算激活
-      // 这避开 about 段高度只有 ~144px 的边界问题:
-      //   点 skills 后,skills 顶 ≈ 260px < 375px(50% vh),platform 顶 > 375 → 选 skills
-      //   而 about 顶 ≈ 116px 也 ≤ 375,但 for 循环从上到下遍历,后一个 skills 覆盖前一个
       const compute = () => {
         const scrollY = window.scrollY || window.pageYOffset || 0;
         if (scrollY < 100) return 'top';
-        const vh = window.innerHeight || document.documentElement.clientHeight;
-        const trigger = vh * 0.5;
+        const trigger = 200;
         let activeId = 'top';
         for (const id of sectionIds) {
           const el = document.getElementById(id);
@@ -594,14 +586,13 @@ export default {
       };
 
       const update = () => {
-        // 抑制期(scrollTo 触发的平滑滚动过程中)不响应任何 update
+        if (this.scrollLocked) return;
         if (Date.now() < (this.scrollSuppressUntil || 0)) return;
         this.activeSection = compute();
       };
 
-      // IO 兜底:section 进入/退出视口时重算
       const observer = new IntersectionObserver(() => update(), {
-        rootMargin: '0px 0px -50% 0px',
+        rootMargin: '0px 0px -200px 0px',
         threshold: 0
       });
       sectionIds.forEach((id) => {
@@ -621,37 +612,27 @@ export default {
 
       update();
     },
+    onLearnMore(event) {
+      const btn = event.currentTarget;
+      if (btn) {
+        btn.classList.add('btn-flash');
+        setTimeout(() => btn.classList.remove('btn-flash'), 300);
+      }
+      setTimeout(() => this.scrollTo('about'), 200);
+    },
     scrollTo(id) {
-      // 1) 立即同步响应式状态(不等滚动动画)
       this.activeSection = id;
-      // 2) 抑制一切自动 update 1.2s(覆盖 smooth 滚动动画)
-      const suppressMs = 1200;
+      const suppressMs = 2000;
       this.scrollSuppressUntil = Date.now() + suppressMs;
-      // 3) 抑制期结束后,按当前 scrollY 校准一次
+      // 用一个标志区分"用户点击锁定"和"自由滚动"
+      // 锁定期间,scroll/IO 触发的 update() 全部 return,绝不覆盖 activeSection
+      this.scrollLocked = true;
       setTimeout(() => {
-        this.scrollSuppressUntil = 0; // 解除抑制
-        // 此时页面已稳定,scrollY 是最终值,compute() 必然正确
-        this.activeSection = (() => {
-          const sectionIds = ['about', 'skills', 'platform', 'agent', 'media', 'practice', 'gateway'];
-          const scrollY = window.scrollY || window.pageYOffset || 0;
-          if (scrollY < 100) return 'top';
-          const vh = window.innerHeight || document.documentElement.clientHeight;
-          const trigger = vh * 0.5;
-          let activeId = 'top';
-          for (const sid of sectionIds) {
-            const el = document.getElementById(sid);
-            if (!el) continue;
-            const top = el.getBoundingClientRect().top;
-            if (top <= trigger) {
-              activeId = sid;
-            } else {
-              break;
-            }
-          }
-          return activeId;
-        })();
+        this.scrollSuppressUntil = 0;
+        this.activeSection = id;
+        // 再延迟 200ms 才解锁,防止抑制期结束后第一次 scroll 事件又触发 compute
+        setTimeout(() => { this.scrollLocked = false; }, 200);
       }, suppressMs);
-      // 4) 触发滚动
       if (id === 'top') {
         window.scrollTo({ top: 0, behavior: 'smooth' });
         return;
@@ -659,17 +640,13 @@ export default {
       const el = document.getElementById(id);
       if (el) {
         if (id === 'gateway') {
-          // gateway 段高度 23.574rem 可能超过视口,按"底部对齐"算会让顶部滚出视口看不见
-          // 改成顶部对齐(留 100px 给 nav,不让"统一的大模型接口网关"标题被挡)
-          const top = el.getBoundingClientRect().top + window.pageYOffset - 100;
+          const top = el.getBoundingClientRect().top + window.pageYOffset - 300;
           window.scrollTo({ top: top, behavior: 'smooth' });
         } else if (id === 'skills') {
-          // skills 段是 absolute 定位 (group_27 top: 35.547rem),点击时让它顶部贴视口顶部,
-          // 不要再留 260px(否则会露出上面 gateway 段的"降本/增效/留资/安全"等模块内容)
-          const top = el.getBoundingClientRect().top + window.pageYOffset;
+          const top = el.getBoundingClientRect().top + window.pageYOffset - 200;
           window.scrollTo({ top: top, behavior: 'smooth' });
         } else {
-          const top = el.getBoundingClientRect().top + window.pageYOffset - 260;
+          const top = el.getBoundingClientRect().top + window.pageYOffset - 460;
           window.scrollTo({ top: top, behavior: 'smooth' });
         }
       }
@@ -679,18 +656,14 @@ export default {
 </script>
 <style scoped lang="css" src="./assets/index.rem.css" />
 <style scoped>
-/* 顶部导航固定，滚动时始终可见、可点击 */
 .section_2 {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 100;
-  /* will-change:transform + 自身 transform:translateZ(0):把 fixed 导航推到独立 GPU 合成层,
-     滚动时导航不再走主线程重绘,避免每帧重新画整个 nav 元素造成顶部闪/卡 */
   will-change: transform;
   transform: translateZ(0);
 }
-/* 导航被 fixed 移出文档流，给内容补回 80px 顶部间距，避免上移错位 */
 .section_1 {
   margin-top: 2.133rem;
 }
@@ -708,10 +681,24 @@ export default {
 .nav-link.nav-active {
   color: rgba(25, 140, 255, 1) !important;
 }
+/* 应用实践 nav 项(全局 CSS 的 .text_nav_practice 没被 scope,需要单独覆盖高亮) */
+.text_nav_practice.nav-active {
+  color: rgba(25, 140, 255, 1) !important;
+}
+.box_16 {
+  cursor: pointer !important;
+  transition: background-color 0.3s, transform 0.15s, box-shadow 0.2s;
+}
+.box_16:hover {
+  background-color: rgba(40, 40, 40, 1) !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+.btn-flash {
+  background-color: rgba(60, 60, 60, 1) !important;
+  transform: scale(0.95);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
+}
 
-/* ===== 修复 logo：底部用与首页 image_1 同款整张合并图 ===== */
-/* 顶部 image_1 (slice-3-black, 浅色页头) + 底部 .footer-logo (slice-3-white, 深色页脚 group_21 bg: rgba(16,16,16,1)) */
-/* 尺寸/比例与首页 6.347rem × 0.854rem 完全一致,无图-字缝隙 */
 .footer-logo {
   width: 6.347rem;
   height: 0.854rem;
@@ -720,9 +707,6 @@ export default {
   margin: 0;
 }
 
-/* ===== 4 个价值标签(降本/增效/留资/安全)的小字描述：强制两行 + 居中 + 跟参考图断句一字不差(不改文案) ===== */
-/* 调小 font-size 到 0.39rem + letter-spacing 0rem 让 6.4rem 容器能容纳 16-17 字(留 1-2 字余量),
-   配合 <br /> 在 14-15 字处硬换行,避免自然换行与 <br /> 重复触发导致 3 行 */
 .text-group_1,
 .text-group_2,
 .text-group_3,
@@ -733,11 +717,9 @@ export default {
 .text_12,
 .text_14,
 .text_16 {
-  /* 还原:不强制 2 行、不改 font-size / line-height,文字回到原本单行布局,行间距恢复默认 */
 }
 
-/* ===== 底部 footer 版权信息上方加横线分隔 ===== */
-/* 写在 <style scoped> 里(用 !important),因为外部 index.rem.css 的 .text-wrapper_7 没被 scoped 处理,匹配不上 */
+/* 底部 footer 版权信息上方加横线分隔(用 !important 覆盖全局 .text-wrapper_7) */
 .text-wrapper_7 {
   border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
   padding-top: 1.067rem !important;
@@ -746,10 +728,9 @@ export default {
 }
 .group_20,
 .group_21 {
-  height: 16rem !important;    /* footer 内容实际累加 ≈ 16rem,缩 3.3rem 消除底部黑色空白 */
+  height: 16rem !important;
 }
 
-/* 知识大脑右侧装饰图（新版蓝湖：单张 339x327 替代原 image_35 + label_5 拼接） */
 .image-26-knowledge {
   width: 9.04rem;
   height: 8.72rem;
@@ -757,9 +738,8 @@ export default {
   display: block;
 }
 
-/* ============ 应用实践板块(全部 class 用 practice_ 前缀避开与 gateway 的 class 冲突)============ */
-/* 关键设计:这些 CSS 写在 <style scoped> 里(不是 index.rem.css),
-   自动带 [data-v-xxx] 属性选择器,scope 隔离不会被全局污染 */
+/* ============ 应用实践板块 ============ */
+
 .practice_text_wrapper_13 {
   width: 4.694rem;
   height: 1.707rem;
@@ -916,20 +896,10 @@ export default {
   margin-top: 0.374rem;
 }
 
-/* ============ footer 应用实践列(比照 newcss text-wrapper_16,放在"创作平台"和"模型网关"之间)============ */
-/* 比照 newcss .text-wrapper_16:
-   - width: 1.92rem(原 withmind 误用 2.4rem)
-   - height: 5.12rem(原 withmind 误用 3.734rem,4 项需要 5.12rem)
-   - margin-left: 0.934rem(原 withmind 误用 1.787rem)
-   写在 <style scoped> 里自动带 [data-v-xxx],scope 隔离不会污染其他列。
-
-   关键修复:不要用 justify-between,改用普通流式布局 + 每项固定 margin-top,
-   这样 4 项的实际渲染高度 = 4*0.96 + 3*0.427 = 5.121rem ≈ 5.12rem,精确填满,
-   不会因 justify-between 撑开产生视觉间距不一致 */
+/* ============ footer 应用实践列 ============ */
 .practice_footer_col {
   width: 1.92rem;
   height: 5.12rem;
-  /* 再右移 0.2rem(原 0.747rem → 0.947rem) */
   margin-left: 0.947rem;
 }