yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
yiqiu
2025-11-21 18:16:36 +08:00
parent fb830e03f4
commit 9aa393ccad
1 changed files with 15 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
css/index.css
View File

@@ -2,75 +2,46 @@
.banner-cont { .banner-cont {
position: relative; position: relative;
width: 100%; width: 100%;
overflow: hidden;
} }
.banner-cont .swiper-slide { .banner-cont .swiper-slide {
position: relative;
height: 500px; height: 500px;
width: 100%; width: 100%;
background: #0b1020; background: linear-gradient(0, #f7f9fa, #f9fafb);
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;
} }
.banner-cont .swiper-slide .img { .banner-cont .swiper-slide .img {
position: absolute; /* 保持图片占满宽度，避免拉伸过度 */
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
max-width: 100%;
max-height: 100%; max-height: 100%;
display: block; max-width: 100%;
z-index: 0; width: 100%;
} }
/* 固定文案区域位置，避免不同轮播内容导致上下抖动 */ /* 文案区域：固定在左侧，顶部留出一致间距，避免切换时轻微位移 */
.banner-cont .banner-text { .banner-cont .banner-text {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex;
align-items: flex-start;
pointer-events: none; pointer-events: none;
} }
.banner-cont .banner-text .section-content { .banner-cont .banner-text .section-content {
position: absolute; padding-top: 120px;
top: 120px;
left: 50%;
transform: translateX(-50%);
max-width: 1440px;
padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
z-index: 2; z-index: 1;
} }
.banner-cont .banner-text h1 { .banner-cont .banner-text h1 {
font-size: 40px; font-size: 40px;
line-height: 1.2; line-height: 1.2;
color: #ffffff; color: #111827;
} }
.banner-cont .banner-desc { .banner-cont .banner-desc {
@@ -78,7 +49,7 @@
margin-top: 16px; margin-top: 16px;
margin-bottom: 32px; margin-bottom: 32px;
max-width: 550px; 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 { .banner-cont .swiper-pagination-bullet {
width: 36px; width: 36px;
height: 4px; height: 4px;
background: #D7DCE4; background: #D7DCE4;
opacity: 1; opacity: 1;
border-radius: 3px; border-radius: 3px;
} }
.banner-cont .swiper-pagination-bullet-active { .banner-cont .swiper-pagination-bullet-active {
background: rgba(255, 103, 57, 1); background: rgba(255, 103, 57, 1);
} }
/* 调整分页器位置，避免与文案重叠 */
.banner-cont .swiper-pagination {
bottom: 40px !important;
}
.banner .banner-s { .banner .banner-s {
box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16); box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16);
border-radius: 3px; border-radius: 3px;