jacy/dukang
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

feat(mini-user): redesign store list with square thumbnail cards

Browse Source 
Switch store list to horizontal card layout with square cover image, status badge, hours, address and solid redeem CTA per design mockup.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
jacy
2026-08-05 00:11:25 +08:00
parent 02d89e6385
commit 16fa07ceaf
2 changed files with 104 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/mini-user/src/styles/stores.css
+84 -22
View File
@@ -145,62 +145,124 @@
}
.store-card {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 12px;
padding: 12px;
background: var(--color-card);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
margin-bottom: 16px;
margin-bottom: 12px;
box-sizing: border-box;
}
.store-card-cover {
width: 100%;
height: 160px;
flex-shrink: 0;
width: 96px;
height: 96px;
border-radius: var(--radius-md);
background: var(--color-surface-container);
display: block;
}
.store-card-cover--empty {
height: 160px;
background: var(--color-surface-container);
}
.store-card-body {
padding: 14px 16px 16px;
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.store-card-name {
display: block;
font-family: var(--font-headline);
font-size: 16px;
font-weight: 700;
color: var(--color-on-surface);
.store-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
}
.store-card-meta {
display: block;
.store-card-name {
flex: 1;
min-width: 0;
font-family: var(--font-headline);
font-size: 15px;
font-weight: 700;
line-height: 1.35;
color: var(--color-on-surface);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.store-card-distance {
flex-shrink: 0;
font-size: 12px;
line-height: 1.35;
color: var(--color-subtle-gray);
}
.store-card-status-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 4px;
}
.store-card-status {
flex-shrink: 0;
padding: 2px 8px;
border-radius: var(--radius-sm);
background: rgba(45, 106, 79, 0.12);
color: var(--color-success-green);
font-size: 11px;
font-weight: 600;
line-height: 1.4;
}
.store-card-hours {
flex: 1;
min-width: 0;
font-size: 11px;
line-height: 1.4;
color: var(--color-subtle-gray);
}
.store-card-address {
font-size: 12px;
line-height: 1.45;
color: var(--color-subtle-gray);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.store-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 12px;
margin-top: auto;
padding-top: 8px;
}
.store-card-distance {
font-size: 12px;
color: var(--color-on-surface-variant);
.store-card-footer-spacer {
flex: 1;
}
.store-card-cta {
padding: 6px 14px;
flex-shrink: 0;
padding: 6px 16px;
border-radius: var(--radius-full);
background: rgba(166, 29, 36, 0.08);
color: var(--color-heritage-red);
background: var(--color-heritage-red);
color: #fff;
font-size: 12px;
font-weight: 600;
line-height: 1.4;
}