179 lines
3.2 KiB
CSS
179 lines
3.2 KiB
CSS
.mobile-seller {
|
|
padding: 16px 16px 40px;
|
|
}
|
|
|
|
.mobile-seller__hero {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 20px 18px;
|
|
border-radius: 12px;
|
|
background: var(--brand-ink);
|
|
color: var(--paper-warm);
|
|
}
|
|
|
|
.mobile-seller__eyebrow {
|
|
font-size: 10px;
|
|
letter-spacing: 0.2em;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.mobile-seller__hero h1 {
|
|
margin: 5px 0 6px;
|
|
font-family: 'Noto Serif SC', 'Songti SC', serif;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.mobile-seller__hero p {
|
|
margin: 0;
|
|
color: rgba(246, 242, 232, 0.72);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.mobile-seller__filters {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin: 14px -16px 12px;
|
|
padding: 0 16px 2px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.mobile-seller__filters button {
|
|
flex: 0 0 auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 7px 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
background: var(--paper-warm);
|
|
color: var(--ink-secondary);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.mobile-seller__filters button.is-active {
|
|
border-color: var(--brand-ink);
|
|
background: var(--brand-ink);
|
|
color: #fff;
|
|
}
|
|
|
|
.mobile-seller__filters em {
|
|
font-style: normal;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.mobile-seller__list {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.mobile-seller__empty {
|
|
display: grid;
|
|
gap: 14px;
|
|
justify-items: center;
|
|
padding: 24px 0;
|
|
}
|
|
|
|
.mobile-seller-card {
|
|
padding: 14px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background: var(--paper-warm);
|
|
}
|
|
|
|
.mobile-seller-card__top,
|
|
.mobile-seller-card__bottom,
|
|
.mobile-seller-card__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.mobile-seller-card__no {
|
|
color: var(--ink-muted);
|
|
font-family: 'Inter', monospace;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.mobile-seller-card__tags {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
.mobile-seller-card h2 {
|
|
margin: 9px 0 7px;
|
|
color: var(--ink);
|
|
font-size: 16px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.mobile-seller-card__meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px 12px;
|
|
color: var(--ink-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.mobile-seller-card__bottom {
|
|
margin-top: 10px;
|
|
padding-top: 10px;
|
|
border-top: 1px dashed var(--line);
|
|
}
|
|
|
|
.mobile-seller-card__bottom strong {
|
|
color: var(--brand-seal);
|
|
font-family: 'Inter', monospace;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.mobile-seller-card__reason {
|
|
margin: 9px 0 0;
|
|
color: var(--danger);
|
|
font-size: 11px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.mobile-seller-card__actions {
|
|
justify-content: flex-start;
|
|
margin-top: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* 移动端复用 PC 详情/发布组件时的容器适配 */
|
|
.mobile-seller-host .seller-page {
|
|
padding: 14px 12px 28px;
|
|
}
|
|
|
|
.mobile-seller-host .seller-hero,
|
|
.mobile-seller-host .seller-form-head,
|
|
.mobile-seller-host .seller-detail-head {
|
|
padding: 14px;
|
|
}
|
|
|
|
.mobile-seller-host .seller-title {
|
|
font-size: 22px !important;
|
|
}
|
|
|
|
.mobile-seller-host .seller-stat-strip {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.mobile-seller-host .seller-form-grid,
|
|
.mobile-seller-host .seller-meta-grid,
|
|
.mobile-seller-host .seller-agreements,
|
|
.mobile-seller-host .seller-price-grid,
|
|
.mobile-seller-host .seller-quantity-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.mobile-seller-host .seller-quantity-head {
|
|
display: none;
|
|
}
|
|
|
|
.mobile-seller-host .seller-summary {
|
|
position: static;
|
|
}
|