diff --git a/css/index.css b/css/index.css index c3a2a1c..e82ef95 100644 --- a/css/index.css +++ b/css/index.css @@ -1,35 +1,94 @@ -/* banner */ +/* banner */ .banner-cont { + position: relative; width: 100%; + overflow: hidden; } .banner-cont .swiper-slide { + position: relative; height: 500px; width: 100%; - background: linear-gradient(0, #f7f9fa, #f9fafb); + background: #0b1020; + overflow: hidden; } - -.banner-cont .swiper-slide .img { - /* position: absolute; */ - z-index: -1; - max-height: 100%; - max-width: 100%; - width: 100%; - /* object-fit: fill; */ -} - - -.banner-cont .banner-desc { - font-size: 16px; - margin-top: 30px; - margin-bottom: 80px; - max-width: 550px; - -} - -.banner-cont .swiper-pagination-bullet { - width: 36px; - height: 4px; + +/* 背景图铺满,并增加左侧渐变遮罩,保证文字可读性 */ +.banner-cont .swiper-slide::before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: linear-gradient( + 90deg, + rgba(9, 10, 15, 0.9) 0%, + rgba(9, 10, 15, 0.55) 40%, + rgba(9, 10, 15, 0) 72% + ); + z-index: 1; +} + +.banner-cont .swiper-slide .img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + max-width: 100%; + max-height: 100%; + display: block; + z-index: 0; +} + +/* 固定文案区域位置,避免不同轮播内容导致上下抖动 */ +.banner-cont .banner-text { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + pointer-events: none; +} + +.banner-cont .banner-text .section-content { + position: absolute; + top: 120px; + left: 50%; + transform: translateX(-50%); + max-width: 1440px; + padding-top: 0; + padding-bottom: 0; + display: flex; + flex-direction: column; + align-items: flex-start; + z-index: 2; +} + +.banner-cont .banner-text h1 { + font-size: 40px; + line-height: 1.2; + color: #ffffff; +} + +.banner-cont .banner-desc { + font-size: 16px; + margin-top: 16px; + margin-bottom: 32px; + max-width: 550px; + color: rgba(255, 255, 255, 0.85); +} + +/* 按钮保持可点击 */ +.banner-cont .banner-text .btn { + pointer-events: auto; +} + +.banner-cont .swiper-pagination-bullet { + width: 36px; + height: 4px; background: #D7DCE4; opacity: 1; border-radius: 3px; @@ -39,31 +98,14 @@ background: rgba(255, 103, 57, 1); } -.banner-cont { - position: relative; +/* 调整分页器位置,避免与文案重叠 */ +.banner-cont .swiper-pagination { + bottom: 40px !important; } -.banner-cont .banner-text { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - display: flex; - align-items: center; -} - -.banner-cont .banner-text .section-content { - z-index: 1; -} - -.banner-cont .banner-text .btn { - pointer-events: auto; -} - -.banner .banner-s { - box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16); - border-radius: 3px; +.banner .banner-s { + box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16); + border-radius: 3px; } .banner .banner-s .banner-list {