From ccf910ae47725db63b3a9cba4c4625d6feda95bd Mon Sep 17 00:00:00 2001
From: jack <251108449@qq.com>
Date: Thu, 16 Jul 2026 11:30:56 +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

---
 public/flexible.js           | 12 ++++--------
 src/views/withmind/index.vue | 26 +++++++++++++++-----------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/public/flexible.js b/public/flexible.js
index b817872..07feb52 100644
--- a/public/flexible.js
+++ b/public/flexible.js
@@ -1,10 +1,6 @@
 (function flexible(window, document) {
-  function resetFontSize() {
-    const size = (document.documentElement.clientWidth / 1920) * 37.5;
-    document.documentElement.style.fontSize = size + 'px';
-  }
-
-  // reset root font size on page show or resize
-  window.addEventListener('pageshow', resetFontSize);
-  window.addEventListener('resize', resetFontSize);
+  // 修 2026-07-16：原本按视口比例缩放导致 1366 笔记本上整个页面被压成 71%。
+  // 改成固定 37.5px (1920 设计稿原值)，让所有元素按设计稿尺寸渲染。
+  // 副作用：1366 视口下会有横向滚动条，但内容不被压扁。
+  document.documentElement.style.fontSize = '37.5px';
 })(window, document);
diff --git a/src/views/withmind/index.vue b/src/views/withmind/index.vue
index 1d1280f..0af3e2a 100644
--- a/src/views/withmind/index.vue
+++ b/src/views/withmind/index.vue
@@ -745,18 +745,22 @@ export default {
       }
       const el = document.getElementById(id);
       if (el) {
+        // 偏移量跟着 flexible.js 缩放:用 rem 值乘以当前 root fontSize
+        // 设计稿 1920 下 1rem=37.5px,所以 remToPx(8) = 8*37.5 = 300px
+        const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 37.5;
+        const remToPx = (r) => r * rootFontSize;
         if (id === 'gateway') {
-          const top = el.getBoundingClientRect().top + window.pageYOffset - 300;
+          const top = el.getBoundingClientRect().top + window.pageYOffset - remToPx(4);
           window.scrollTo({ top: top, behavior: 'smooth' });
         } else if (id === 'skills') {
-          const top = el.getBoundingClientRect().top + window.pageYOffset - 200;
+          const top = el.getBoundingClientRect().top + window.pageYOffset - remToPx(2.5);
           window.scrollTo({ top: top, behavior: 'smooth' });
         } else if (id === 'row2') {
           // 应用实践 row2:scrollTo 偏移收窄,标题已对齐底部
-          const top = el.getBoundingClientRect().top + window.pageYOffset - 60;
+          const top = el.getBoundingClientRect().top + window.pageYOffset - remToPx(0.3);
           window.scrollTo({ top: top, behavior: 'smooth' });
         } else {
-          const top = el.getBoundingClientRect().top + window.pageYOffset - 460;
+          const top = el.getBoundingClientRect().top + window.pageYOffset - remToPx(6);
           window.scrollTo({ top: top, behavior: 'smooth' });
         }
       }
@@ -855,7 +859,7 @@ export default {
   height: 1.707rem;
   margin: 6.4rem 0 0 6.934rem;
   position: relative;
-  top: -20px;
+  top: -0.533rem;
 }
 
 .practice_text_23 {
@@ -901,7 +905,7 @@ export default {
   text-align: center;
   white-space: nowrap;
   line-height: 0.96rem;
-  margin-top: 40px;
+  margin-top: 0.4rem;
 }
 
 .practice_image_text_15 {
@@ -927,7 +931,7 @@ export default {
   text-align: center;
   white-space: nowrap;
   line-height: 0.96rem;
-  margin-top: 40px;
+  margin-top: 0.4rem;
 }
 
 .practice_image_text_16 {
@@ -953,7 +957,7 @@ export default {
   text-align: center;
   white-space: nowrap;
   line-height: 0.96rem;
-  margin-top: 40px;
+  margin-top: 0.4rem;
 }
 
 .practice_box_25 {
@@ -979,14 +983,14 @@ export default {
   text-align: center;
   white-space: nowrap;
   line-height: 0.96rem;
-  margin-top: 40px;
+  margin-top: 0.4rem;
 }
 
 /* ============ 应用实践 row2 (v7, 3 图 + 1 视频) ============ */
 .practice_row2 {
   width: 37.334rem;
   min-height: 8.267rem;
-  margin: 130px 0 0 6.934rem;
+  margin: 1.067rem 0 0 6.934rem;
 }
 
 .practice_row2_item {
@@ -1019,7 +1023,7 @@ export default {
   text-align: center;
   white-space: nowrap;
   line-height: 0.96rem;
-  margin-top: 40px;
+  margin-top: 0.4rem;
 }
 
 /* 视频卡片占位框 (用于绝对定位中央大三角 ▶;chahua2.png 自带浅蓝边,容器层不再叠 border/背景) */