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-22 18:31:57 +08:00
parent a18136def5
commit 0b3f5ca820
1 changed files with 141 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
css/index.css
View File

@@ -183,13 +183,28 @@ body#index .nav-right .control {
color: #E5E7EB; color: #E5E7EB;
} }
/* 服务内容 */ /* 服务内容 */
.service-content { .service-content {
display: flex; display: flex;
margin-top: 60px; margin-top: 60px;
margin: -10px; margin: -10px;
margin-top: 50px; margin-top: 50px;
} }
/* 服务模块整体背景：与首页 banner 保持暗色科技感基调 */
.section.service {
background:
radial-gradient(circle at 10% 0%, rgba(56, 189, 248, 0.18) 0%, transparent 40%),
linear-gradient(180deg, #020617 0%, #020617 100%);
}
.section.service .section-title h2 {
color: #F9FAFB;
}
.section.service .section-title .section-desc {
color: rgba(148, 163, 184, 0.95);
}
.service .service-box { .service .service-box {
min-height: 191px; min-height: 191px;
@@ -253,11 +268,11 @@ body#index .nav-right .control {
} }
/* 解决方案 */ /* 解决方案 */
.resolve { .resolve {
background: #13182C url(../assets/img/index/home-bg.png) no-repeat center center; background: #13182C url(../assets/img/index/home-bg.png) no-repeat center center;
background-size: cover; background-size: cover;
} }
.resolve-content { .resolve-content {
margin: -10px; margin: -10px;
@@ -337,8 +352,19 @@ body#index .nav-right .control {
/* 服务实践 */ /* 服务实践 */
.practice {} .practice {
/* 与解决方案区域衔接的暗色背景 */
background: linear-gradient(180deg, #020617 0%, #020617 100%);
}
.practice .section-title h2 {
color: #F9FAFB;
}
.practice .section-title .section-desc {
color: rgba(148, 163, 184, 0.95);
}
.practice .practice-content { .practice .practice-content {
margin: -10px; margin: -10px;
@@ -392,10 +418,13 @@ body#index .nav-right .control {
box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16); box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16);
} }
/* 基础措施 */ /* 基础措施 */
.section-base { .section-base {
background: rgba(247, 248, 250, 1); /* 统一为暗色科技风背景，下方 cert 卡片及地图以亮色卡片形式凸显 */
} background:
radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.18) 0%, transparent 40%),
linear-gradient(180deg, #020617 0%, #020617 100%);
}
.section-base .base { .section-base .base {
margin-top: 42px; margin-top: 42px;
@@ -405,20 +434,33 @@ body#index .nav-right .control {
padding: 62px 20px 0; padding: 62px 20px 0;
} }
.section-base .base img { .section-base .base img {
width: calc(100% - 140px); width: calc(100% - 140px);
margin-left: 35px; margin-left: 35px;
height: 520px; height: 520px;
padding-right: 80px; padding-right: 80px;
} }
.base .base-content { .base .base-content {
margin-bottom: 100px; margin-bottom: 100px;
} }
.base .base-content .title-desc { .base .base-content .title-desc {
white-space: nowrap; white-space: nowrap;
} color: rgba(148, 163, 184, 0.95);
}
.section-base .section-title h2 {
color: #F9FAFB;
}
.section-base .section-title .section-desc {
color: rgba(148, 163, 184, 0.95);
}
.section-base .base-content h2 {
color: #F9FAFB;
}
.cert { .cert {
border: 2px solid #FFFFFF; border: 2px solid #FFFFFF;
@@ -450,32 +492,48 @@ body#index .nav-right .control {
margin-top: 5px; margin-top: 5px;
} }
/* 新闻 */ /* 新闻 */
.news-content { .section.news {
margin-top: 60px; background: linear-gradient(180deg, #020617 0%, #020617 100%);
display: flex; }
flex-wrap: wrap;
gap: 130px; .section.news .section-title h2 {
} color: #F9FAFB;
}
.section.news .section-title .section-desc {
color: rgba(148, 163, 184, 0.95);
}
.news-content {
margin-top: 60px;
display: flex;
flex-wrap: wrap;
gap: 130px;
}
.news-content .news-cont { .news-content .news-cont {
flex: 1; flex: 1;
/* 新闻列表块采用深色卡片，与整体暗色背景协调 */
} background: rgba(15, 23, 42, 0.92);
border-radius: 16px;
padding: 24px 24px 16px;
box-shadow: 0 20px 45px rgba(15, 23, 42, 0.7);
border: 1px solid rgba(148, 163, 184, 0.4);
}
.news-content .news-head .news-title { .news-content .news-head .news-title {
padding-left: 5px; padding-left: 5px;
font-size: 22px; font-size: 22px;
} }
.news-content .news-head .news-title { .news-content .news-head .news-title {
position: relative; position: relative;
padding-left: 10px; padding-left: 10px;
font-size: 18px; font-size: 18px;
line-height: 20px; line-height: 20px;
height: 20px; height: 20px;
} }
.news-content .news-head .news-title::before { .news-content .news-head .news-title::before {
content: ''; content: '';
@@ -485,13 +543,21 @@ body#index .nav-right .control {
left: 0; left: 0;
top: 0; top: 0;
background: #38BDF8; background: #38BDF8;
} }
.news-content .news-head .news-more { .news-content .news-head .news-more {
font-size: 14px; font-size: 14px;
color: rgba(0, 0, 0, 0.6); color: rgba(148, 163, 184, 0.9);
} }
.news-content .news-head .news-more a {
color: inherit;
}
.news-content .news-head .news-more a:hover {
color: #E5E7EB;
}
.news-content .news-list { .news-content .news-list {
margin-top: 15px; margin-top: 15px;
@@ -516,30 +582,30 @@ body#index .nav-right .control {
background: rgba(56, 189, 248, 1); background: rgba(56, 189, 248, 1);
} }
.news-content .news-item .number { .news-content .news-item .number {
margin-right: 10px; margin-right: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
width: 14px; width: 14px;
height: 14px; height: 14px;
background: rgba(222, 222, 222, 1); background: rgba(222, 222, 222, 1);
border-radius: 3px; border-radius: 3px;
} }
.news-content .news-item .title { .news-content .news-item .title {
font-size: 14px; font-size: 14px;
color: rgba(0, 0, 0, 0.90); color: #E5E7EB;
} }
.news-content .news-item .title:hover { .news-content .news-item .title:hover {
color: rgba(56, 189, 248, 1); color: rgba(56, 189, 248, 1);
} }
.news-content .news-item .time { .news-content .news-item .time {
color: rgba(0, 0, 0, 0.4); color: rgba(148, 163, 184, 0.9);
font-size: 13px; font-size: 13px;
min-width: 100px; min-width: 100px;
text-align: right; text-align: right;