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

请求223
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
yiqiu
2025-11-23 00:05:20 +08:00
parent 864a5fdd6e
commit 5c26937860
2 changed files with 347 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
css/index.css
View File

@@ -88,6 +88,7 @@
overflow: hidden;
}
/* banner 轮播容器 */
.banner-cont .swiper-slide {
position: relative;
height: 650px;
@@ -98,6 +99,12 @@
radial-gradient(ellipse at 80% 70%, rgba(56, 189, 248, 0.12) 0%, transparent 50%),
linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
overflow: hidden;
/* 背景图设置 */
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
/* 多重背景层叠：先渐变遮罩，再背景图 */
background-blend-mode: normal, normal, normal;
}
/* 动态网格背景 */
@@ -108,12 +115,15 @@
left: 0;
right: 0;
bottom: 0;
background-image:
/* 添加深色遮罩，让文字更清晰 */
background:
linear-gradient(90deg, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.5) 50%, rgba(15, 23, 42, 0.3) 100%),
linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px);
background-size: 50px 50px;
background-size: 100% 100%, 50px 50px, 50px 50px;
animation: gridMove 20s linear infinite;
pointer-events: none;
z-index: 1;
}
@keyframes gridMove {
@@ -149,6 +159,7 @@
}
}
/* 原 img 标签样式已废弃，现使用背景图
.banner-cont .swiper-slide .img {
display: block;
position: absolute;
@@ -160,7 +171,6 @@
max-height: 85%;
object-fit: contain;
opacity: 0.95;
/* 移除 mix-blend-mode，让图片更清晰 */
filter: drop-shadow(0 20px 60px rgba(56, 189, 248, 0.3));
animation: floatImage 6s ease-in-out infinite;
}
@@ -173,8 +183,9 @@
transform: translateY(-50%) translateX(-20px);
}
}
*/
/* 轮播文字层：左侧排列，为右侧图片留出空间 */
/* 轮播文字层：左侧排列，z-index确保在遮罩之上 */
.banner-cont .swiper-slide .section-content {
position: absolute;
top: 50%;
@@ -1377,9 +1388,11 @@ html {
left: 5%;
}
/* 已废弃：背景图不需要宽度设置
.banner-cont .swiper-slide .img {
width: 50%;
}
*/
.banner-s .banner-list .banner-item {
padding: 30px 40px;
@@ -1418,20 +1431,13 @@ html {
font-size: 15px;
}
/* 平板尺寸下，图片改为背景，文字居中 */
.banner-cont .swiper-slide .img {
width: 100%;
height: 100%;
opacity: 0.15;
filter: none;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: none;
animation: none;
/* 平板尺寸下，调整遮罩透明度，文字居中 */
.banner-cont .swiper-slide::before {
background:
linear-gradient(rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.7) 100%),
linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px);
background-size: 100% 100%, 50px 50px, 50px 50px;
}
.banner-cont .swiper-slide .section-content {