diff --git a/css/index.css b/css/index.css index e82ef95..3df2efd 100644 --- a/css/index.css +++ b/css/index.css @@ -2,75 +2,46 @@ .banner-cont { position: relative; width: 100%; - overflow: hidden; } .banner-cont .swiper-slide { - position: relative; height: 500px; width: 100%; - background: #0b1020; - overflow: hidden; -} - -/* 背景图铺满,并增加左侧渐变遮罩,保证文字可读性 */ -.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; + background: linear-gradient(0, #f7f9fa, #f9fafb); } .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; + max-width: 100%; + width: 100%; } -/* 固定文案区域位置,避免不同轮播内容导致上下抖动 */ +/* 文案区域:固定在左侧,顶部留出一致间距,避免切换时轻微位移 */ .banner-cont .banner-text { position: absolute; left: 0; top: 0; width: 100%; height: 100%; + display: flex; + align-items: flex-start; 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-top: 120px; padding-bottom: 0; display: flex; flex-direction: column; align-items: flex-start; - z-index: 2; + z-index: 1; } .banner-cont .banner-text h1 { font-size: 40px; line-height: 1.2; - color: #ffffff; + color: #111827; } .banner-cont .banner-desc { @@ -78,7 +49,7 @@ margin-top: 16px; margin-bottom: 32px; max-width: 550px; - color: rgba(255, 255, 255, 0.85); + color: rgba(0, 0, 0, 0.65); } /* 按钮保持可点击 */ @@ -89,20 +60,15 @@ .banner-cont .swiper-pagination-bullet { width: 36px; height: 4px; - background: #D7DCE4; - opacity: 1; - border-radius: 3px; -} + background: #D7DCE4; + opacity: 1; + border-radius: 3px; +} .banner-cont .swiper-pagination-bullet-active { background: rgba(255, 103, 57, 1); } -/* 调整分页器位置,避免与文案重叠 */ -.banner-cont .swiper-pagination { - bottom: 40px !important; -} - .banner .banner-s { box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16); border-radius: 3px;