样式修改

This commit is contained in:
jack
2026-07-16 15:44:30 +08:00
parent 76f6949299
commit f7cca2d5a7
2 changed files with 17 additions and 26 deletions
+14 -18
View File
@@ -3,19 +3,18 @@ html {
} }
body { body {
/* 不需要 min-height 了,.page 用 relative 不脱离文档流 */ /* .page 用 relative 不脱离文档流,不需要 body 撑滚动 */
margin: 0; margin: 0;
} }
.page { .page {
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
/* 响应式居中:width 100% + max-width 51.2rem + margin: 0 auto /* 整体居中:用 relative + left: 50% + margin-left: -25.6rem (-page 宽度一半)
视口 >= 1920: .page 占满 1920 居中 .page 真正在视口中央居中,内容在 .page 内的左边距由内容自己控制 */
视口 < 1920: .page 跟着视口收缩,小屏也能完整看到内容(可能有横向滚动条) */
position: relative; position: relative;
width: 100%; left: 50%;
max-width: 51.2rem; margin-left: -25.6rem;
margin: 0 auto; width: 51.2rem;
/* 改用 min-height:页面跟内容自适应,后续插入任何板块不会被 page 高度裁掉。 /* 改用 min-height:页面跟内容自适应,后续插入任何板块不会被 page 高度裁掉。
152.4rem 是历史基线高度,内容多了 page 会自动撑开。 */ 152.4rem 是历史基线高度,内容多了 page 会自动撑开。 */
min-height: 152.4rem; min-height: 152.4rem;
@@ -34,26 +33,23 @@ body {
.section_1 { .section_1 {
width: 51.2rem; width: 51.2rem;
height: 60.054rem; height: 60.054rem;
/* .section_2 浮起来后,给 section_1 加 padding-top 防止 logo 被覆盖 */
padding-top: 2.134rem; padding-top: 2.134rem;
box-sizing: border-box; box-sizing: border-box;
} }
.section_2 { .section_2 {
background-color: rgba(255, 255, 255, 0.95); background-color: rgba(255, 255, 255, 0.95);
/* 用 fixed 锁定顶部:fixed 相对 viewport 定位,不受任何父链影响 */ /* 导航条锁定顶部:fixed + top: 0
居中:用 absolute + left: 50% + margin-left: -25.6rem 跟 .page 同步 (.page 真居中) */
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 50%;
right: 0; margin-left: -25.6rem;
/* 居中:用 margin: 0 auto (fixed 元素也支持 auto margin),
width 100% + max-width 51.2rem 跟 .page 同步 */
margin: 0 auto;
z-index: 1000; z-index: 1000;
width: 100%; width: 51.2rem;
max-width: 51.2rem;
height: 2.134rem; height: 2.134rem;
border: 1px solid rgba(239, 239, 239, 1); /* 边框去掉,让导航条和页面背景融为一体 */
border: none;
} }
/* group_2 / box_1 / section_3 / section_4 / box_2 已删除:左上角 logo 改用 image_1 整张合并图(Slice 3.png */ /* group_2 / box_1 / section_3 / section_4 / box_2 已删除:左上角 logo 改用 image_1 整张合并图(Slice 3.png */
@@ -61,7 +57,7 @@ body {
.image_1 { .image_1 {
width: 6.347rem; width: 6.347rem;
height: 0.854rem; height: 0.854rem;
margin: 0.64rem 0 0 7.067rem; margin: 0.64rem 0 0 6.934rem;
display: block; display: block;
object-fit: contain; object-fit: contain;
} }
+3 -8
View File
@@ -770,14 +770,9 @@ export default {
</script> </script>
<style scoped lang="css" src="./assets/index.rem.css" /> <style scoped lang="css" src="./assets/index.rem.css" />
<style scoped> <style scoped>
.section_2 { /* 2026-07-16: 删掉这里的 .section_2 规则(position: fixed; left: 0; transform: translateZ(0),
position: fixed; 它覆盖了 index.rem.css 里的 left: 50%; margin-left: -22.133rem 居中规则,
top: 0; 导致导航条定位在视口左上角偏左。居中规则全部在 index.rem.css 里。 */
left: 0;
z-index: 100;
will-change: transform;
transform: translateZ(0);
}
.section_1 { .section_1 {
margin-top: 2.133rem; margin-top: 2.133rem;
} }