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

dfafas
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
yiqiu
2025-12-25 22:44:34 +08:00
parent eb91bf74ff
commit 26851b9d5a
1 changed files with 101 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
css/index.css
View File

@@ -697,12 +697,12 @@
@media (max-width: 768px) { @media (max-width: 768px) {
/* 调整 banner 高度 - 进一步缩小 */ /* 调整 banner 高度 - 移动端优化 */
.banner-cont .swiper-slide { .banner-cont .swiper-slide {
height: 100px; height: 180px;
/* Reduced from 240px to 200px */ /* 调整为合适的高度 */
padding-top: 56px; padding-top: 56px;
/* Compensate for sticky header overlap if needed, or if under header */ /* 补偿顶部导航栏高度 */
margin-top: 0; margin-top: 0;
/* Mobile Background Optimization */ /* Mobile Background Optimization */
@@ -4935,120 +4935,123 @@ html {
/* Mobile Overrides for Index Page */ /* Mobile Overrides for Index Page */
/* 注释掉重复的 banner 样式，统一使用第 698 行的移动端样式 */
/*
@media (max-width: 768px) { @media (max-width: 768px) {
/* Banner Adjustment */ /* Banner Adjustment */
.banner-cont .swiper-slide { .banner-cont .swiper-slide {
/* height: auto !important; */ /* height: auto !important; */
/* min-height: 400px; */ /* min-height: 400px; */
height: 50px !important; height: 50px !important;
padding-bottom: 60px; padding-bottom: 60px;
/* Space for pagination */ width: 50%;
} /* Space for pagination */
}
.banner-cont .swiper-slide .section-content { .banner-cont .swiper-slide .section-content {
position: relative; position: relative;
top: auto; top: auto;
left: auto; left: auto;
transform: none; transform: none;
padding: 80px 20px 40px; padding: 80px 20px 40px;
text-align: center; text-align: center;
} }
.banner-cont .swiper-slide .section-content .title-wrapper { .banner-cont .swiper-slide .section-content .title-wrapper {
max-width: 100%; max-width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
} }
.banner-cont .swiper-slide h1 { .banner-cont .swiper-slide h1 {
font-size: 32px; font-size: 32px;
line-height: 1.3; line-height: 1.3;
} }
.banner-tags { .banner-tags {
justify-content: center; justify-content: center;
margin-bottom: 12px; margin-bottom: 12px;
} }
.banner-cont .banner-desc { .banner-cont .banner-desc {
font-size: 15px; font-size: 15px;
margin: 0 auto 30px; margin: 0 auto 30px;
line-height: 1.6; line-height: 1.6;
} }
/* Feature Cards (Banner-S) */ /* Feature Cards (Banner-S) */
.banner .banner-s { .banner .banner-s {
margin-top: 0; margin-top: 0;
padding-top: 0; padding-top: 0;
padding-bottom: 40px; padding-bottom: 40px;
} }
.banner .banner-s .banner-list { .banner .banner-s .banner-list {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 15px; gap: 15px;
padding: 0 15px; padding: 0 15px;
} }
.banner-s .banner-list .banner-item { .banner-s .banner-list .banner-item {
max-width: 100%; max-width: 100%;
min-width: 0; min-width: 0;
flex: auto; flex: auto;
} }
/* Hot Products - Card View */ /* Hot Products - Card View */
.products-table thead { .products-table thead {
display: none; display: none;
} }
.products-table, .products-table,
.products-table tbody, .products-table tbody,
.products-table tr, .products-table tr,
.products-table td { .products-table td {
display: block; display: block;
width: 100%; width: 100%;
} }
.products-table tr { .products-table tr {
margin-bottom: 15px; margin-bottom: 15px;
background: rgba(30, 41, 59, 0.4); background: rgba(30, 41, 59, 0.4);
border: 1px solid rgba(148, 163, 184, 0.1); border: 1px solid rgba(148, 163, 184, 0.1);
border-radius: 12px; border-radius: 12px;
padding: 15px; padding: 15px;
} }
.products-table td { .products-table td {
text-align: right; text-align: right;
padding: 8px 0; padding: 8px 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1px solid rgba(148, 163, 184, 0.05); border-bottom: 1px solid rgba(148, 163, 184, 0.05);
} }
.products-table td:last-child { .products-table td:last-child {
border-bottom: none; border-bottom: none;
} }
.products-table td::before { .products-table td::before {
content: attr(data-label); content: attr(data-label);
float: left; float: left;
font-weight: 600; font-weight: 600;
color: rgba(148, 163, 184, 0.8); color: rgba(148, 163, 184, 0.8);
} }
/* Solution Wrapper - Stacked */ /* Solution Wrapper - Stacked */
.solution-wrapper { .solution-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.solution-tabs { .solution-tabs {
display: none; display: none;
/* Hide desktop tabs */ /* Hide desktop tabs */
} }
/* We might need to restructure the HTML to show all solutions stacked or use a mobile slider /* We might need to restructure the HTML to show all solutions stacked or use a mobile slider
For now, let's assume we stack them or show a simple list. For now, let's assume we stack them or show a simple list.
Actually, if HTML structure depends on clicks to show/hide, we need JS or CSS modification. Actually, if HTML structure depends on clicks to show/hide, we need JS or CSS modification.
Let's style the active one well first, or maybe show all? Let's style the active one well first, or maybe show all?