From 76f69492991440d9667f2c3c22354d62c77357c0 Mon Sep 17 00:00:00 2001
From: jack <251108449@qq.com>
Date: Thu, 16 Jul 2026 15:08:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/withmind/assets/index.rem.css | 28 ++++++++++++-------------
 src/views/withmind/index.vue            |  2 +-
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/views/withmind/assets/index.rem.css b/src/views/withmind/assets/index.rem.css
index 250bffc..e8c79b9 100644
--- a/src/views/withmind/assets/index.rem.css
+++ b/src/views/withmind/assets/index.rem.css
@@ -3,20 +3,19 @@ html {
 }
 
 body {
-  /* .page 用 absolute 脱离文档流,需要给 body 一个最小高度让滚动条出现 */
-  min-height: 152.4rem;
-  position: relative;
+  /* 不需要 min-height 了,.page 用 relative 不会脱离文档流 */
+  margin: 0;
 }
 
 .page {
   background-color: rgba(255, 255, 255, 1);
-  /* 不用 transform 居中!transform 会让子元素 fixed/sticky 元素的 containing block 变成 .page,
-     导致 fixed 元素相对 .page 而不是 viewport。
-     改用 absolute 居中:position: absolute + left: 50% + margin-left: -25.6rem */
-  position: absolute;
-  left: 50%;
-  margin-left: -25.6rem;
-  width: 51.2rem;
+  /* 响应式居中:width 100% + max-width 51.2rem + margin: 0 auto
+     视口 >= 1920: .page 占满 1920 居中
+     视口 < 1920: .page 跟着视口收缩,小屏也能完整看到内容(可能有横向滚动条) */
+  position: relative;
+  width: 100%;
+  max-width: 51.2rem;
+  margin: 0 auto;
   /* 改用 min-height:页面跟内容自适应,后续插入任何板块不会被 page 高度裁掉。
      152.4rem 是历史基线高度,内容多了 page 会自动撑开。 */
   min-height: 152.4rem;
@@ -42,16 +41,17 @@ body {
 
 .section_2 {
   background-color: rgba(255, 255, 255, 0.95);
-  /* 用 fixed 而不是 sticky:sticky 会被 .page 的 transform 父链失效,
-     fixed 永远相对 viewport 定位,不受 transform 影响 */
+  /* 用 fixed 锁定顶部:fixed 相对 viewport 定位,不受任何父链影响 */
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
-  /* 居中:用 margin: 0 auto (fixed 元素也支持 auto margin) */
+  /* 居中:用 margin: 0 auto (fixed 元素也支持 auto margin),
+     width 100% + max-width 51.2rem 跟 .page 同步 */
   margin: 0 auto;
   z-index: 1000;
-  width: 51.2rem;
+  width: 100%;
+  max-width: 51.2rem;
   height: 2.134rem;
   border: 1px solid rgba(239, 239, 239, 1);
 }
diff --git a/src/views/withmind/index.vue b/src/views/withmind/index.vue
index 0af3e2a..128e38e 100644
--- a/src/views/withmind/index.vue
+++ b/src/views/withmind/index.vue
@@ -753,7 +753,7 @@ export default {
           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 - remToPx(2.5);
+          const top = el.getBoundingClientRect().top + window.pageYOffset - remToPx(1.5);
           window.scrollTo({ top: top, behavior: 'smooth' });
         } else if (id === 'row2') {
           // 应用实践 row2:scrollTo 偏移收窄,标题已对齐底部