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

fix: 改用CSS Grid保证三行列宽完全一致
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
- row-1/row-2/row-3统一用grid-template-columns:3fr 2fr
- Grid列轨道共享确保像素级对齐
- 响应式改为grid-template-columns:1fr
This commit is contained in:
yiqiu
2026-03-20 22:37:15 +08:00
parent b858a115f8
commit a9435b88af
1 changed files with 7 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
clientarea/home/hgcloud_home/css/home.css
View File

@@ -45,11 +45,9 @@
/* ====== ROW 1 — 用户信息 + 统计卡片（并排） ====== */ /* ====== ROW 1 — 用户信息 + 统计卡片（并排） ====== */
.row-1 { .row-1 {
display: flex !important; display: grid !important;
flex-direction: row !important; grid-template-columns: 3fr 2fr !important;
flex-wrap: nowrap !important;
gap: 16px !important; gap: 16px !important;
align-items: stretch !important;
} }
/* 用户卡片：占 60% */ /* 用户卡片：占 60% */
.card-user { .card-user {
@@ -136,11 +134,9 @@
/* ====== ROW 2 — 余额 + 侧边 ====== */ /* ====== ROW 2 — 余额 + 侧边 ====== */
.row-2 { .row-2 {
display: flex !important; display: grid !important;
flex-direction: row !important; grid-template-columns: 3fr 2fr !important;
flex-wrap: nowrap !important;
gap: 16px !important; gap: 16px !important;
align-items: stretch !important;
} }
/* 余额卡 60% */ /* 余额卡 60% */
@@ -237,11 +233,9 @@
/* ====== ROW 3 — 产品列表 + 侧栏 ====== */ /* ====== ROW 3 — 产品列表 + 侧栏 ====== */
.row-3 { .row-3 {
display: flex !important; display: grid !important;
flex-direction: row !important; grid-template-columns: 3fr 2fr !important;
flex-wrap: nowrap !important;
gap: 16px !important; gap: 16px !important;
align-items: stretch !important;
} }
/* 产品卡 65% */ /* 产品卡 65% */
@@ -318,9 +312,7 @@
/* Responsive */ /* Responsive */
@media (max-width: 1100px) { @media (max-width: 1100px) {
.row-1, .row-2, .row-3 { flex-wrap: wrap !important; } .row-1, .row-2, .row-3 { grid-template-columns: 1fr !important; }
.card-user, .card-balance, .card-products { flex: 1 1 100% !important; }
.stats-group, .card-side, .card-sidebar { flex: 1 1 100% !important; }
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
* { transition-duration: 0.01ms !important; } * { transition-duration: 0.01ms !important; }