xiaoyu/txw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style:修改首页前端样式

Browse Source
This commit is contained in:
liulong 2026-05-19 11:32:31 +08:00
parent 5ba99fddc0
commit 08f66e895b
1 changed files with 112 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
txw-mhzc-web/src/pages/index/views/home2/index.vue
View File

@ -101,7 +101,7 @@
<h3 class="capability-title-text">共性能力</h3>
<span class="capability-title-bar"></span>
</div>
<p class="capability-desc">五大核心能力，全面支撑企业绿色转型</p>
<!-- <p class="capability-desc">五大核心能力，全面支撑企业绿色转型</p> -->
</div>
</div>
@ -128,7 +128,7 @@
<h3 class="overseas2-title-text">企业出海</h3>
<span class="overseas2-title-bar"></span>
</div>
<p class="overseas2-desc">政策要求、合规指引、案例分享，一站式信息与系统入口</p>
<!-- <p class="overseas2-desc">政策要求、合规指引、案例分享，一站式信息与系统入口</p> -->
</div>
</div>
@ -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;
}
.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 {