MUD6 推广移动统一设计

client/src/styles/mobile-touch.css

@@ -16,8 +16,10 @@
   --mobile-bottom-nav-height: 68px;
   --mobile-sticky-action-height: 78px;
   --mobile-icon-action-min-height: 72px;
-  --mobile-me-slot-gap: clamp(12px, 3.7vw, 16px);
-  --mobile-me-action-icon-slot: 36px;
+  --mobile-slot-gap: clamp(12px, 3.7vw, 16px);
+  --mobile-action-icon-slot: 36px;
+  --mobile-me-slot-gap: var(--mobile-slot-gap);
+  --mobile-me-action-icon-slot: var(--mobile-action-icon-slot);
 }
 
 .page-scaffold.mobile-fixed-action-page {
@@ -119,6 +121,7 @@
   min-width: 0;
 }
 
+.mobile-entry-grid,
 .mobile-me-entry-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -126,14 +129,16 @@
   min-width: 0;
 }
 
+.mobile-slot-row,
 .mobile-me-profile-row {
   display: grid;
   grid-template-columns: 44px minmax(0, 1fr);
-  column-gap: var(--mobile-me-slot-gap);
+  column-gap: var(--mobile-slot-gap);
   align-items: center;
   min-width: 0;
 }
 
+.mobile-slot-avatar,
 .mobile-me-avatar-slot {
   width: 44px;
   min-width: 44px;
@@ -142,10 +147,12 @@
   justify-content: center;
 }
 
+.mobile-slot-copy,
 .mobile-me-profile-copy {
   min-width: 0;
 }
 
+.mobile-slot-copy > *,
 .mobile-me-profile-copy > * {
   min-width: 0;
   overflow: hidden;
@@ -153,10 +160,11 @@
   white-space: nowrap;
 }
 
+.mobile-action-link,
 .mobile-me-action-link {
   display: grid;
-  grid-template-columns: var(--mobile-me-action-icon-slot) minmax(0, 1fr);
-  column-gap: var(--mobile-me-slot-gap);
+  grid-template-columns: var(--mobile-action-icon-slot) minmax(0, 1fr);
+  column-gap: var(--mobile-slot-gap);
   align-items: center;
   min-width: 0;
   min-height: 48px;
@@ -169,30 +177,35 @@
   transition: background-color 150ms ease, border-color 150ms ease;
 }
 
+.mobile-action-link:hover,
 .mobile-me-action-link:hover {
   background: rgb(250 250 250);
 }
 
+.mobile-action-icon,
 .mobile-me-action-icon {
-  width: var(--mobile-me-action-icon-slot);
-  height: var(--mobile-me-action-icon-slot);
+  width: var(--mobile-action-icon-slot);
+  height: var(--mobile-action-icon-slot);
   border-radius: 10px;
   background: rgb(244 244 245);
   color: rgb(63 63 70);
   padding: 7px;
 }
 
+.mobile-action-icon svg,
 .mobile-me-action-icon svg {
   display: block;
   width: 100%;
   height: 100%;
 }
 
+.mobile-action-copy,
 .mobile-me-action-copy {
   display: block;
   min-width: 0;
 }
 
+.mobile-action-copy > *,
 .mobile-me-action-copy > * {
   min-width: 0;
   overflow: hidden;
@@ -200,6 +213,34 @@
   white-space: nowrap;
 }
 
+.mobile-list-card {
+  min-width: 0;
+  border: 1px solid rgb(228 228 231);
+  border-radius: 12px;
+  background: rgb(255 255 255);
+  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
+  padding: var(--mobile-card-padding);
+}
+
+.mobile-subcard {
+  min-width: 0;
+  border: 1px solid rgb(228 228 231);
+  border-radius: 10px;
+  background: rgb(255 255 255);
+  padding: 10px 12px;
+}
+
+.mobile-empty-state {
+  min-width: 0;
+  border: 1px dashed rgb(228 228 231);
+  border-radius: 12px;
+  padding: 20px 12px;
+  text-align: center;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: rgb(113 113 122);
+}
+
 .mobile-info-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
@@ -238,8 +279,8 @@
     --mobile-card-gap: 6px;
     --mobile-card-padding: 10px;
     --mobile-icon-action-min-height: 68px;
-    --mobile-me-slot-gap: 12px;
-    --mobile-me-action-icon-slot: 34px;
+    --mobile-slot-gap: 12px;
+    --mobile-action-icon-slot: 34px;
   }
 
   .mobile-icon-action__icon {