样式修改
This commit is contained in:
@@ -3,19 +3,18 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
/* 不需要 min-height 了,.page 用 relative 不会脱离文档流 */
|
||||
/* .page 用 relative 不脱离文档流,不需要 body 撑滚动 */
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
/* 响应式居中:width 100% + max-width 51.2rem + margin: 0 auto
|
||||
视口 >= 1920: .page 占满 1920 居中
|
||||
视口 < 1920: .page 跟着视口收缩,小屏也能完整看到内容(可能有横向滚动条) */
|
||||
/* 整体居中:用 relative + left: 50% + margin-left: -25.6rem (-page 宽度一半)
|
||||
.page 真正在视口中央居中,内容在 .page 内的左边距由内容自己控制 */
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 51.2rem;
|
||||
margin: 0 auto;
|
||||
left: 50%;
|
||||
margin-left: -25.6rem;
|
||||
width: 51.2rem;
|
||||
/* 改用 min-height:页面跟内容自适应,后续插入任何板块不会被 page 高度裁掉。
|
||||
152.4rem 是历史基线高度,内容多了 page 会自动撑开。 */
|
||||
min-height: 152.4rem;
|
||||
@@ -34,26 +33,23 @@ body {
|
||||
.section_1 {
|
||||
width: 51.2rem;
|
||||
height: 60.054rem;
|
||||
/* .section_2 浮起来后,给 section_1 加 padding-top 防止 logo 被覆盖 */
|
||||
padding-top: 2.134rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section_2 {
|
||||
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;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* 居中:用 margin: 0 auto (fixed 元素也支持 auto margin),
|
||||
width 100% + max-width 51.2rem 跟 .page 同步 */
|
||||
margin: 0 auto;
|
||||
left: 50%;
|
||||
margin-left: -25.6rem;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
max-width: 51.2rem;
|
||||
width: 51.2rem;
|
||||
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) */
|
||||
@@ -61,7 +57,7 @@ body {
|
||||
.image_1 {
|
||||
width: 6.347rem;
|
||||
height: 0.854rem;
|
||||
margin: 0.64rem 0 0 7.067rem;
|
||||
margin: 0.64rem 0 0 6.934rem;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@@ -770,14 +770,9 @@ export default {
|
||||
</script>
|
||||
<style scoped lang="css" src="./assets/index.rem.css" />
|
||||
<style scoped>
|
||||
.section_2 {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
will-change: transform;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
/* 2026-07-16: 删掉这里的 .section_2 规则(position: fixed; left: 0; transform: translateZ(0)),
|
||||
它覆盖了 index.rem.css 里的 left: 50%; margin-left: -22.133rem 居中规则,
|
||||
导致导航条定位在视口左上角偏左。居中规则全部在 index.rem.css 里。 */
|
||||
.section_1 {
|
||||
margin-top: 2.133rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user