From 4e572e6b8b9adc5b08868a2349a49d2e14120c3e Mon Sep 17 00:00:00 2001 From: yiqiu Date: Fri, 21 Nov 2025 18:25:06 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9banner-s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/index.css | 95 ++++++++++++++++++++++++--------------------------- index.html | 76 ++++++++++++++++++++--------------------- 2 files changed, 82 insertions(+), 89 deletions(-) diff --git a/css/index.css b/css/index.css index a7e16bd..18390e8 100644 --- a/css/index.css +++ b/css/index.css @@ -1,36 +1,60 @@ -/* banner 整体区域：轮播作为背景，文字和下方模块在同一内容宽度内左对齐 */ -.banner { +/* banner */ +.banner-cont { position: relative; - background: #f7f9fa; - overflow: hidden; + width: 100%; } -/* 背景轮播图 */ -.banner-cont { +.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 { 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 .swiper-slide { - background: transparent; +.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 .img { - width: 100%; - height: 100%; - object-fit: cover; +.banner-cont .banner-text h1 { + font-size: 40px; + line-height: 1.2; + color: #111827; } -.banner-cont .swiper-pagination { - bottom: 24px; +.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-bullet { @@ -40,42 +64,11 @@ opacity: 1; border-radius: 3px; } - + .banner-cont .swiper-pagination-bullet-active { 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; diff --git a/index.html b/index.html index f969d87..28c9b9e 100644 --- a/index.html +++ b/index.html @@ -13,50 +13,50 @@