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 里的   控制间距(更精确) */ } .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 @@ />
-
+
了解更多
@@ -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 {