diff --git a/css/index.css b/css/index.css index c2a5e2c..6c45ce7 100644 --- a/css/index.css +++ b/css/index.css @@ -1,66 +1,41 @@ /* banner */ -.banner-cont { +.banner { position: relative; - width: 100%; + background: #f7f9fa; + overflow: hidden; } -.banner-cont .swiper-slide { - width: 100%; - background: linear-gradient(0, #f7f9fa, #f9fafb); -} - -.banner-cont .swiper-slide .img { - /* 保持图片占满宽度，避免拉伸过度 */ - width: 100%; - height: auto; - max-width: 100%; -} - -/* 文案区域：固定在左侧，顶部留出一致间距，避免切换时轻微位移 */ -.banner-cont .banner-text { +/* 轮播图作为背景层，图片负责铺满顶部区域 */ +.banner-bg { position: absolute; - left: 0; top: 0; + left: 0; + width: 100%; + height: 420px; + overflow: hidden; +} + +.banner-bg .banner-cont, +.banner-bg .banner-cont .swiper-wrapper, +.banner-bg .banner-cont .swiper-slide { + height: 100%; +} + +.banner-bg .banner-cont .swiper-slide { + background: transparent; +} + +.banner-bg .banner-cont .swiper-slide .img { width: 100%; height: 100%; - display: flex; - align-items: center; /* 垂直居中，水平方向由内部 .section-content 控制 */ - pointer-events: none; + object-fit: cover; } -.banner-cont .banner-text .section-content { - /* 继承 .section-content 的左右 padding 和宽度，只单独控制上下间距 */ - padding-top: 120px; - padding-bottom: 0; - z-index: 1; +.banner-bg .banner-cont .swiper-pagination { + bottom: 24px; } -/* 文案块：控制具体的左边距，让其与下方 banner-s 第一列内容对齐 */ -.banner-cont .banner-copy { - max-width: 560px; - text-align: left; /* 与下方内容同样左对齐 */ -} - -.banner-cont .banner-copy h1 { - font-size: 40px; - line-height: 1.2; - color: #111827; -} - -.banner-cont .banner-copy .banner-desc { - font-size: 16px; - margin-top: 16px; - margin-bottom: 32px; - max-width: 550px; - color: rgba(0, 0, 0, 0.65); -} - -/* 按钮保持可点击 */ -.banner-cont .banner-text .btn { - pointer-events: auto; -} - -.banner-cont .swiper-pagination-bullet { +.banner-bg .banner-cont .swiper-pagination-bullet { width: 36px; height: 4px; background: #D7DCE4; @@ -68,10 +43,44 @@ border-radius: 3px; } -.banner-cont .swiper-pagination-bullet-active { +.banner-bg .banner-cont .swiper-pagination-bullet-active { background: rgba(255, 103, 57, 1); } +/* 文案 + 下方模块共用一个 section-content 容器，天然同宽 */ +.banner-main { + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + gap: 24px; + padding-top: 140px; /* 控制文案距离顶部的位置 */ + padding-bottom: 40px; +} + +.banner-copy { + max-width: 560px; + text-align: left; +} + +.banner-copy #bannerTitle { + font-size: 40px; + line-height: 1.2; + color: #111827; +} + +.banner-copy .banner-desc { + font-size: 16px; + margin-top: 16px; + margin-bottom: 32px; + max-width: 550px; + color: rgba(0, 0, 0, 0.65); +} + +.banner-copy #bannerButton { + pointer-events: auto; +} + .banner .banner-s { box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16); border-radius: 3px; diff --git a/index.html b/index.html index 6e25044..32cfce7 100644 --- a/index.html +++ b/index.html @@ -13,52 +13,54 @@