diff --git a/txw-mhzc-web/src/pages/index/views/home2/index.vue b/txw-mhzc-web/src/pages/index/views/home2/index.vue index e90e7bc..006f3aa 100644 --- a/txw-mhzc-web/src/pages/index/views/home2/index.vue +++ b/txw-mhzc-web/src/pages/index/views/home2/index.vue @@ -101,7 +101,7 @@
五大核心能力,全面支撑企业绿色转型
+ @@ -128,7 +128,7 @@政策要求、合规指引、案例分享,一站式信息与系统入口
+ @@ -1023,14 +1023,84 @@ export default { .core-section { width: 100%; height: 100vh; + position: relative; background: #fff; padding: 80px 0; } -.core-container{ - position: relative; - top: 50%; - transform: translateY(-50%); +/* 三屏标题:距顶、占位高度一致;下方内容区单独页面垂直居中 */ +.core-section, +.capability-section, +.overseas2-section { + --block-title-top: 80px; + --block-title-height: 56px; + --block-title-bar-top: 9px; + --block-title-bar-left: 9px; + --block-title-bar-width: 189px; + --block-title-bar-height: 56px; + --block-content-offset-y: 45px; + --block-content-scale: 1.05; +} + +.core-container, +.capability-container, +.overseas2-container { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + transform: none; +} + +.capability-container, +.overseas2-container { + z-index: 1; +} + +.core-section .section-title.core-title, +.capability-section .capability-header, +.overseas2-section .overseas2-header { + position: absolute; + top: var(--block-title-top); + left: 50%; + transform: translateX(-50%); + width: 100%; + max-width: 1400px; + height: var(--block-title-height); + min-height: var(--block-title-height); + /* padding: 0 40px; */ + margin-left: 40px; + box-sizing: border-box; + margin: 0; + z-index: 2; +} + +.core-section .section-title.core-title { + margin-bottom: 0; +} + +.capability-section .capability-header, +.overseas2-section .overseas2-header { + margin-bottom: 0; +} + +.core-container .core-grid, +.capability-container .capability-grid, +.overseas2-container .overseas2-grid { + margin-top: 0; + transform: translateY(var(--block-content-offset-y)) scale(var(--block-content-scale)); + transform-origin: center center; +} + +.section-title.core-title .title-text, +.capability-title-text, +.overseas2-title-text { + line-height: 1.4; } .section-container { @@ -1081,14 +1151,19 @@ export default { background-size: 100% 100%; } +.section-title.core-title::after, +.capability-title-bar, +.overseas2-title-bar { + position: absolute; + top: var(--block-title-bar-top); + left: var(--block-title-bar-left); + width: var(--block-title-bar-width); + height: var(--block-title-bar-height); + z-index: -1; +} + .section-title.core-title::after { - content: ''; - position: absolute; - top: 3px; - left: 11px; - z-index: 9; - width: 189px; - height: 56px; + content: ''; } .section-title.core-title .title-bar { @@ -1190,10 +1265,7 @@ export default { } .capability-container { - position: relative; z-index: 1; - top: 50%; - transform: translateY(-50%); } .capability-header { @@ -1217,6 +1289,7 @@ export default { } .capability-title-content { + position: relative; display: flex; flex-direction: column; align-items: center; @@ -1232,14 +1305,6 @@ export default { .capability-title-bar { display: block; - content: ''; - position: absolute; - top: 9px; - left: 50px; - z-index: 9; - width: 189px; - height: 56px; - z-index: -1; } .capability-desc { @@ -1253,7 +1318,7 @@ export default { .capability-grid { display: grid; grid-template-columns: repeat(3, 378px); - gap: 24px; + gap: 70px; justify-content: center; } @@ -1321,10 +1386,7 @@ export default { } .overseas2-container { - position: relative; z-index: 1; - top: 50%; - transform: translateY(-50%); } .overseas2-header { @@ -1348,6 +1410,7 @@ export default { } .overseas2-title-content { + position: relative; display: flex; flex-direction: column; align-items: center; @@ -1363,14 +1426,6 @@ export default { .overseas2-title-bar { display: block; - content: ''; - position: absolute; - top: 9px; - left: 50px; - z-index: 9; - width: 189px; - height: 56px; - z-index: -1; } .overseas2-desc { @@ -2137,9 +2192,8 @@ export default { } .section-title.core-title::after { - left: 36px; - width: 100px; - height: 32px; + top: var(--block-title-bar-top); + left: var(--block-title-bar-left); } .section-title .title-bar { @@ -2155,6 +2209,23 @@ export default { padding: 40px 0; } + .core-section, + .capability-section, + .overseas2-section { + --block-title-top: 40px; + --block-title-height: 48px; + --block-title-bar-width: 100px; + --block-title-bar-height: 32px; + --block-content-offset-y: 32px; + --block-content-scale: 1.05; + } + + .core-section .section-title.core-title, + .capability-section .capability-header, + .overseas2-section .overseas2-header { + padding: 0 16px; + } + .core-grid { grid-template-columns: 1fr; gap: 16px; @@ -2208,9 +2279,7 @@ export default { } .capability-title-bar { - width: 100px; - height: 32px; - margin-top: -22px; + margin-top: 0; } @@ -2404,9 +2473,7 @@ export default { } .overseas2-title-bar { - width: 100px; - height: 32px; - margin-top: -22px; + margin-top: 0; } .overseas2-desc {