wooo/ewoooc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: show product identity in ai recommendations
All checks were successful
CD Pipeline / deploy (push) Successful in 1m5s
Details

Browse Source
This commit is contained in:
ogt
2026-06-26 18:33:11 +08:00
parent 1dfeee0506
commit c268b5cc02
8 changed files with 226 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
web/static/css/page-ai-recommend-bem.css
View File

@@ -123,6 +123,113 @@
.ai-recommend-page .ar-card--insights { border-color: var(--momo-warm-caramel, #c96442) !important; }
.ai-recommend-page .ar-card--trends { border-color: var(--momo-warm-olive, #6f7a4a) !important; }
/* ── Product identity cards ────────────────────────── */
.ai-recommend-page .ar-product-card {
display: grid;
grid-template-columns: 1.6rem 4.5rem minmax(0, 1fr) auto;
gap: 0.7rem;
align-items: center;
min-height: 5.25rem;
padding: 0.7rem 0.8rem;
border-bottom: 1px solid var(--momo-border-subtle);
cursor: pointer;
}
.ai-recommend-page .ar-product-card:hover {
background: color-mix(in srgb, var(--momo-page-accent) 5%, var(--momo-surface));
}
.ai-recommend-page .ar-product-card__rank {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.55rem;
height: 1.55rem;
border-radius: 999px;
background: var(--momo-text-strong);
color: var(--momo-on-accent, #fff8ef);
font-size: 0.75rem;
font-weight: 800;
}
.ai-recommend-page .ar-product-card__media {
width: 4.5rem;
height: 4.5rem;
}
.ai-recommend-page .ar-product-card__img,
.ai-recommend-page .ar-product-card__missing-img {
width: 100%;
height: 100%;
border: 1px solid var(--momo-border-subtle);
border-radius: var(--momo-radius-sm, 6px);
background: var(--momo-surface-2);
}
.ai-recommend-page .ar-product-card__img {
display: block;
object-fit: contain;
}
.ai-recommend-page .ar-product-card__missing-img {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.2rem;
color: var(--momo-text-tertiary);
font-size: 0.68rem;
font-weight: 800;
}
.ai-recommend-page .ar-product-card__body {
min-width: 0;
}
.ai-recommend-page .ar-product-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
margin-bottom: 0.25rem;
}
.ai-recommend-page .ar-product-card__id {
color: var(--momo-text-tertiary);
font-size: 0.72rem;
font-weight: 800;
}
.ai-recommend-page .ar-product-card__name {
overflow: hidden;
color: var(--momo-text-strong);
font-size: 0.86rem;
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-recommend-page .ar-product-card__price {
margin-top: 0.2rem;
color: var(--momo-warm-rose, #a84428);
font-size: 0.86rem;
font-weight: 900;
}
.ai-recommend-page .ar-product-card__actions {
display: flex;
justify-content: flex-end;
min-width: 5.25rem;
}
.ai-recommend-page .ar-product-card__link {
white-space: nowrap;
}
.ai-recommend-page .ar-product-card__pending {
white-space: nowrap;
}
@media (max-width: 640px) {
.ai-recommend-page .ar-product-card {
grid-template-columns: 1.6rem 3.8rem minmax(0, 1fr);
}
.ai-recommend-page .ar-product-card__media {
width: 3.8rem;
height: 3.8rem;
}
.ai-recommend-page .ar-product-card__actions {
grid-column: 2 / -1;
justify-content: flex-start;
}
}
/* ── Dropdown / quick tags / keywords ──────────────── */
.ai-recommend-page .ar-dropdown { max-height: 300px; overflow-y: auto; }
.ai-recommend-page .ar-quick-tags { display: flex; flex-wrap: wrap; gap: 6px; }