diff --git a/public/css/admin-components.css b/public/css/admin-components.css index c1cf845..500a548 100644 --- a/public/css/admin-components.css +++ b/public/css/admin-components.css @@ -506,6 +506,18 @@ margin-top:0; } +/* 通用:所有 grid 容器内的卡片,都应清理 `.card + .card{margin-top:20px;}` 的纵向堆叠规则。 + * 否则会出现“同一行/同一网格里的第2张卡开始整体下沉”的错位。 + */ +.grid > .card, +.grid-2 > .card, +.grid-3 > .card, +.grid-4 > .card, +.grid-5 > .card, +.grid-6 > .card{ + margin-top:0; +} + @media (max-width: 1024px){ .kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); diff --git a/tests/Feature/AdminCardGridShouldNotApplyCardPlusCardMarginTest.php b/tests/Feature/AdminCardGridShouldNotApplyCardPlusCardMarginTest.php new file mode 100644 index 0000000..1465ec8 --- /dev/null +++ b/tests/Feature/AdminCardGridShouldNotApplyCardPlusCardMarginTest.php @@ -0,0 +1,23 @@ +assertStringContainsString('.grid > .card', $css); + $this->assertStringContainsString('.grid-2 > .card', $css); + $this->assertStringContainsString('.grid-3 > .card', $css); + $this->assertStringContainsString('.grid-4 > .card', $css); + $this->assertStringContainsString('.grid-5 > .card', $css); + $this->assertStringContainsString('.grid-6 > .card', $css); + $this->assertStringContainsString('margin-top:0', $css); + } +}