样式修改
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
yiqiu
2025-11-21 18:16:36 +08:00
parent fb830e03f4
commit 9aa393ccad

View File

@@ -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;