wanzhe/withmindwebsite
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

样式修改

Browse Source
This commit is contained in:
jack
2026-07-16 11:30:56 +08:00
parent 8d4f4278c9
commit ccf910ae47
2 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/flexible.js
+4 -8
View File
@@ -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);
src/views/withmind/index.vue
+15 -11
View File
@@ -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/背景) */