样式修改
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user