diff --git a/css/index.css b/css/index.css index 3df2efd..a7e16bd 100644 --- a/css/index.css +++ b/css/index.css @@ -1,60 +1,36 @@ -/* banner */ -.banner-cont { +/* banner 整体区域:轮播作为背景,文字和下方模块在同一内容宽度内左对齐 */ +.banner { position: relative; - width: 100%; + background: #f7f9fa; + overflow: hidden; } -.banner-cont .swiper-slide { - height: 500px; - width: 100%; - background: linear-gradient(0, #f7f9fa, #f9fafb); -} - -.banner-cont .swiper-slide .img { - /* 保持图片占满宽度,避免拉伸过度 */ - max-height: 100%; - max-width: 100%; - width: 100%; -} - -/* 文案区域:固定在左侧,顶部留出一致间距,避免切换时轻微位移 */ -.banner-cont .banner-text { +/* 背景轮播图 */ +.banner-cont { position: absolute; left: 0; top: 0; width: 100%; + height: 420px; +} + +.banner-cont .swiper-wrapper, +.banner-cont .swiper-slide { height: 100%; - display: flex; - align-items: flex-start; - pointer-events: none; } -.banner-cont .banner-text .section-content { - padding-top: 120px; - padding-bottom: 0; - display: flex; - flex-direction: column; - align-items: flex-start; - z-index: 1; +.banner-cont .swiper-slide { + background: transparent; } -.banner-cont .banner-text h1 { - font-size: 40px; - line-height: 1.2; - color: #111827; +.banner-cont .swiper-slide .img { + width: 100%; + height: 100%; + object-fit: cover; } -.banner-cont .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 { + bottom: 24px; } .banner-cont .swiper-pagination-bullet { @@ -69,39 +45,70 @@ background: rgba(255, 103, 57, 1); } +/* 文案和下方快捷模块统一放在 section-content 内,保证左对齐 */ +.banner .banner-layout { + position: relative; + z-index: 1; + padding-top: 120px; /* 覆盖 .section-content 默认的 80px,让文字进入轮播区域 */ + padding-bottom: 40px; +} + +.banner .banner-copy { + max-width: 560px; + margin-bottom: 32px; +} + +.banner .banner-copy #bannerTitle { + font-size: 40px; + line-height: 1.2; + color: #111827; +} + +.banner .banner-copy .banner-desc { + font-size: 16px; + margin-top: 16px; + margin-bottom: 32px; + max-width: 550px; + color: rgba(0, 0, 0, 0.65); +} + +.banner .banner-copy #bannerButton { + pointer-events: auto; +} + .banner .banner-s { box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16); border-radius: 3px; -} - -.banner .banner-s .banner-list { - display: flex; - flex-wrap: wrap; - padding: 0 20px; -} - -.banner-s .banner-list .banner-item { - flex: 1; - cursor: pointer; - width: 335px; - padding: 30px 60px; -} - -.banner-s .banner-list .banner-item:hover { - background: rgba(247, 248, 249, 1); -} - -.banner-s .banner-list .banner-item:hover h5 { - color: #FF6739; -} - -.banner-list .banner-item .banner-tag { - font-size: 12px; - color: #FF6739; - border: 1px solid #FF6739; - padding: 5px 8px; - border-radius: 3px; -} +} + +.banner .banner-s .banner-list { + display: flex; + flex-wrap: wrap; + padding: 0 20px; +} + +.banner-s .banner-list .banner-item { + flex: 1; + cursor: pointer; + width: 335px; + padding: 30px 60px; +} + +.banner-s .banner-list .banner-item:hover { + background: rgba(247, 248, 249, 1); +} + +.banner-s .banner-list .banner-item:hover h5 { + color: #FF6739; +} + +.banner-list .banner-item .banner-tag { + font-size: 12px; + color: #FF6739; + border: 1px solid #FF6739; + padding: 5px 8px; + border-radius: 3px; +} /* 服务内容 */ .service-content { diff --git a/index.html b/index.html index 26dde2f..f969d87 100644 --- a/index.html +++ b/index.html @@ -13,51 +13,51 @@ +