优化标签保证两行

2026-05-23 10:14:28 +08:00
parent 40f5252b2e
commit 7a52cecf8c
3 changed files with 374 additions and 127 deletions
@@ -368,9 +368,9 @@
 .mobile-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
-  grid-template-rows: 132px 62px;
+  grid-template-rows: 132px 56px;
  gap: 10px 12px;
-  min-height: 230px;
+  min-height: 222px;
  border-radius: 16px;
  background: #ffffff;
  padding: 12px;
@@ -512,27 +512,36 @@
 .card-chip-row {
  grid-column: 1 / -1;
  align-content: flex-start;
+  row-gap: 6px;
+  column-gap: 6px;
+  height: 56px;
  margin-top: 0;
-  min-height: 62px;
+  overflow: hidden;
 }

 .card-chip-row span {
  display: inline-flex;
  align-items: center;
-  min-height: 25px;
+  max-width: 100%;
+  height: 25px;
+  min-width: 0;
  border: 1px solid #ff8a1f;
  border-radius: 4px;
  color: #ff7900;
  padding: 0 5px;
  font-size: 11.5px;
  font-weight: 700;
+  line-height: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

@media (max-width: 374px) {
  .mobile-card {
    grid-template-columns: 112px minmax(0, 1fr);
-    grid-template-rows: 112px 62px;
-    min-height: 210px;
+    grid-template-rows: 112px 56px;
+    min-height: 202px;
  }

  .card-cover {