/** * AKSRT Product Archive — 商品归档页样式 * * 商品分类页、标签页共用样式。 * 卡片网格、价格徽章、空状态。 * * Tokens: 颜色 / 间距 / 圆角 / 阴影 全部来自 core/tokens.css */ /* ================================================ * 页面头:标题 + 计数 * ================================================ */ .aksrt-product-archive { padding-top: var(--space-6); padding-bottom: var(--space-9); } .aksrt-product-archive__header { margin-bottom: var(--space-6); padding: var(--space-5); background: var(--surface-1, #fff); border-radius: var(--radius-lg, 8px); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } .aksrt-product-archive__title { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--color-ink); display: flex; align-items: center; gap: 8px; } .aksrt-product-archive__title i { color: var(--color-primary, var(--color-primary)); } .aksrt-product-archive__desc { margin: 0 0 8px; font-size: 14px; color: var(--color-ink-3); line-height: 1.6; } .aksrt-product-archive__count { margin: 0; font-size: 13px; color: var(--color-ink-4, #8A8F98); } .aksrt-product-archive__eyebrow { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; margin-bottom: 10px; border-radius: 999px; background: var(--surface-2, #f4f5f7); color: var(--color-ink-3); font-size: 12px; font-weight: 600; } .aksrt-product-archive__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-5); margin-bottom: var(--space-8); } /* ================================================ * 商品卡片 * ================================================ */ .aksrt-product-card { display: flex; flex-direction: column; background: var(--surface-1, #fff); border: 1px solid var(--color-line); border-radius: var(--radius-lg, 8px); overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .aksrt-product-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-line, #e5e7eb)); } .aksrt-product-card__link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; } /* 商品图片 */ .aksrt-product-card__image { position: relative; aspect-ratio: 4 / 3; background-color: var(--surface-2, #F4F5F7); overflow: hidden; } .aksrt-product-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .aksrt-product-card:hover .aksrt-product-card__image img { transform: scale(1.02); } .aksrt-product-card__image--placeholder { display: flex; align-items: center; justify-content: center; color: var(--color-ink-4, #8A8F98); font-size: 32px; } /* 卡片正文 */ .aksrt-product-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); flex: 1; } .aksrt-product-card__title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--color-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aksrt-product-card__excerpt { margin: 0; font-size: 13px; color: var(--color-ink-3); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 底部:价格 + 销量 */ .aksrt-product-card__footer { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-line-soft, #F0F1F3); } .aksrt-product-card__price { font-size: 18px; font-weight: 700; color: var(--color-error, #EF4444); } .aksrt-product-card__sales { font-size: 12px; color: var(--color-ink-4, #8A8F98); } /* ================================================ * 分页 * ================================================ */ .aksrt-product-archive__pagination { display: flex; justify-content: center; padding: var(--space-5) 0; } .aksrt-product-archive__pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px; margin: 0 4px; border: 1px solid var(--color-line); border-radius: var(--radius, 10px); background: var(--surface-1, #fff); color: var(--color-ink-2); font-size: 14px; text-decoration: none; transition: all 0.15s ease; } .aksrt-product-archive__pagination .page-numbers:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-line, #e5e7eb)); color: var(--color-primary, var(--color-primary)); } .aksrt-product-archive__pagination .page-numbers.current { background: var(--color-primary, var(--color-primary)); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-line, #e5e7eb)); color: #fff; } /* ================================================ * 空状态 * ================================================ */ .aksrt-product-archive__empty { text-align: center; padding: var(--space-9) var(--space-5); color: var(--color-ink-3); } .aksrt-product-archive__empty i { font-size: 48px; color: var(--color-ink-4, #8A8F98); margin-bottom: var(--space-4); display: block; } .aksrt-product-archive__empty p { margin: 0; font-size: 15px; } /* ================================================ * 响应式 * ================================================ */ @media (max-width: 640px) { .aksrt-product-archive__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } .aksrt-product-card__body { padding: var(--space-3); } .aksrt-product-card__title { font-size: 14px; } .aksrt-product-card__price { font-size: 16px; } } @media (max-width: 380px) { .aksrt-product-archive__grid { grid-template-columns: 1fr; } } /* ================================================ * 产品详情页样式补充 * ================================================ */ .aksrt-product { padding-top: var(--space-6); padding-bottom: var(--space-9); } .aksrt-product__layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); margin-bottom: var(--space-7); } .aksrt-product__image { border-radius: var(--radius-lg, 8px); overflow: hidden; background: var(--surface-2, #F4F5F7); } .aksrt-product__img { width: 100%; display: block; } .aksrt-product__img-placeholder { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; color: var(--color-ink-4, #8A8F98); font-size: 64px; } .aksrt-product__info { display: flex; flex-direction: column; gap: var(--space-4); } .aksrt-product__title { margin: 0; font-size: 24px; font-weight: 700; color: var(--color-ink); line-height: 1.3; } .aksrt-product__price-row { display: flex; align-items: baseline; gap: var(--space-3); } .aksrt-product__price { font-size: 28px; font-weight: 700; color: var(--color-error, #EF4444); } .aksrt-product__sales { font-size: 13px; color: var(--color-ink-4, #8A8F98); } .aksrt-product__excerpt { margin: 0; font-size: 14px; color: var(--color-ink-3); line-height: 1.6; } .aksrt-product__meta { font-size: 14px; color: var(--color-ink-2); } .aksrt-product__meta i { margin-right: 4px; } .aksrt-product__actions { margin-top: var(--space-4); } .aksrt-product__buy-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 32px; border: none; border-radius: var(--radius, 10px); background: var(--color-primary, var(--color-primary)); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; } .aksrt-product__buy-btn:hover { opacity: 0.85; } .aksrt-product__detail { padding: var(--space-6); background: var(--surface-1, #fff); border-radius: var(--radius-lg, 8px); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } .aksrt-product__detail-title { margin: 0 0 var(--space-4); font-size: 18px; font-weight: 600; color: var(--color-ink); } .aksrt-product__detail-content { font-size: 15px; line-height: 1.8; color: var(--color-ink-2); } .aksrt-product__detail-content img { max-width: 100%; border-radius: var(--radius, 10px); } .aksrt-product__empty { text-align: center; padding: var(--space-10) var(--space-5); color: var(--color-ink-3); } .aksrt-product__empty i { display: block; margin-bottom: var(--space-4); } .aksrt-product__empty p { margin: 0; font-size: 16px; } /* 产品详情页响应式 */ @media (max-width: 767px) { .aksrt-product__layout { grid-template-columns: 1fr; gap: var(--space-5); } .aksrt-product__title { font-size: 20px; } .aksrt-product__price { font-size: 24px; } } /* ================================================ * 购物车页样式 * ================================================ */ .aksrt-cart { padding-top: var(--space-6); padding-bottom: var(--space-9); } .aksrt-cart__title { margin: 0 0 var(--space-6); font-size: 24px; font-weight: 700; color: var(--color-ink); } .aksrt-cart__layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-6); } .aksrt-cart__items { min-height: 200px; } .aksrt-cart__item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--surface-1, #fff); border: 1px solid var(--color-line); border-radius: var(--radius, 10px); margin-bottom: var(--space-3); } .aksrt-cart__item-img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-sm, 6px); } .aksrt-cart__item-info { flex: 1; min-width: 0; } .aksrt-cart__item-info h4 { margin: 0 0 4px; font-size: 15px; font-weight: 500; color: var(--color-ink); } .aksrt-cart__item-price { font-size: 14px; color: var(--color-ink-3); } .aksrt-cart__item-qty { display: flex; align-items: center; gap: var(--space-2); } .aksrt-cart__qty-btn { width: 28px; height: 28px; border: 1px solid var(--color-line); border-radius: var(--radius-sm, 6px); background: var(--surface-1, #fff); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; } .aksrt-cart__qty-btn:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-line, #e5e7eb)); } .aksrt-cart__item-subtotal { font-weight: 600; color: var(--color-error, #EF4444); min-width: 80px; text-align: right; } .aksrt-cart__remove-btn { width: 32px; height: 32px; border: none; background: none; cursor: pointer; color: var(--color-ink-4, #8A8F98); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm, 6px); } .aksrt-cart__remove-btn:hover { background: var(--surface-2, #F4F5F7); color: var(--color-error, #EF4444); } .aksrt-cart__sidebar { position: sticky; top: 24px; } .aksrt-cart__summary { padding: var(--space-5); background: var(--surface-1, #fff); border: 1px solid var(--color-line); border-radius: var(--radius-lg, 8px); } .aksrt-cart__summary-title { margin: 0 0 var(--space-4); font-size: 16px; font-weight: 600; color: var(--color-ink); } .aksrt-cart__summary-row { display: flex; justify-content: space-between; margin-bottom: var(--space-3); font-size: 14px; color: var(--color-ink-2); } .aksrt-cart__summary-total { display: flex; justify-content: space-between; padding-top: var(--space-3); border-top: 1px solid var(--color-line); margin-bottom: var(--space-5); font-weight: 600; } .aksrt-cart__total-price { font-size: 20px; color: var(--color-error, #EF4444); } .aksrt-cart__checkout-btn { width: 100%; padding: 12px; border: none; border-radius: var(--radius, 10px); background: var(--color-primary, var(--color-primary)); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; } .aksrt-cart__checkout-btn:hover { opacity: 0.85; } .aksrt-cart__checkout-btn:disabled { opacity: 0.5; cursor: not-allowed; } .aksrt-cart__empty { text-align: center; padding: var(--space-9) var(--space-5); color: var(--color-ink-3); } .aksrt-cart__empty i { display: block; margin-bottom: var(--space-4); } .aksrt-cart__empty p { margin: 0 0 var(--space-4); font-size: 15px; } /* 购物车响应式 */ @media (max-width: 767px) { .aksrt-cart__layout { grid-template-columns: 1fr; } .aksrt-cart__sidebar { position: static; } } /* ================================================ * 商品编辑页样式 * ================================================ */ .aksrt-product-edit { padding-top: var(--space-6); padding-bottom: var(--space-9); max-width: 720px; margin: 0 auto; } .aksrt-product-edit__title { margin: 0 0 var(--space-6); font-size: 24px; font-weight: 700; color: var(--color-ink); } .aksrt-product-edit__form { padding: var(--space-6); background: var(--surface-1, #fff); border-radius: var(--radius-lg, 8px); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } .aksrt-product-edit__field { margin-bottom: var(--space-5); } .aksrt-product-edit__field label { display: block; font-size: 14px; font-weight: 500; color: var(--color-ink); margin-bottom: var(--space-2); } .aksrt-product-edit__field input, .aksrt-product-edit__field textarea { width: 100%; padding: 10px 14px; font-size: 14px; color: var(--color-ink); background: var(--surface-1, #fff); border: 1px solid var(--color-line); border-radius: var(--radius, 10px); transition: border-color 0.15s; } .aksrt-product-edit__field input:focus, .aksrt-product-edit__field textarea:focus { outline: none; border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-line, #e5e7eb)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent); } .aksrt-product-edit__field textarea { resize: vertical; min-height: 100px; } .aksrt-product-edit__actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); } .aksrt-product-edit__actions .btn-primary { padding: 10px 24px; border: none; border-radius: var(--radius, 10px); background: var(--color-primary, var(--color-primary)); color: #fff; font-size: 15px; font-weight: 500; cursor: pointer; transition: opacity 0.15s; } .aksrt-product-edit__actions .btn-primary:hover { opacity: 0.85; } .aksrt-product-edit__actions .btn-ghost { padding: 10px 24px; border: 1px solid var(--color-line); border-radius: var(--radius, 10px); background: var(--surface-1, #fff); color: var(--color-ink-2); font-size: 15px; text-decoration: none; transition: border-color 0.15s; } .aksrt-product-edit__actions .btn-ghost:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-line, #e5e7eb)); } .aksrt-product-archive__toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px} .aksrt-product-archive__sort{display:inline-flex;padding:8px 14px;border-radius:999px;background:var(--surface-1,#fff);color:var(--color-ink-3,#5c6370);text-decoration:none;font-weight:600;font-size:14px;box-shadow:var(--shadow-sm)} .aksrt-product-archive__sort.is-active,.aksrt-product-archive__sort:hover{background:var(--color-primary,#f04494);color:#fff} .aksrt-product-archive__load-more{display:flex;justify-content:center;margin:20px 0} .aksrt-revenue-page__layout{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:20px 0} .aksrt-revenue-page__panel{padding:18px;border-radius:16px;background:var(--surface-1,#fff);box-shadow:var(--shadow-sm)} .aksrt-revenue-page__withdraw-form label{display:flex;flex-direction:column;gap:6px;margin-bottom:12px} .aksrt-revenue-page__withdraw-form input,.aksrt-revenue-page__withdraw-form select,.aksrt-revenue-page__withdraw-form textarea{width:100%;padding:10px 12px;border:1px solid var(--color-line-soft,rgba(0,0,0,.08));border-radius:10px} .aksrt-revenue-page__item{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--color-line-soft,rgba(0,0,0,.06))} .aksrt-revenue-page__item .is-in{color:#27ae60;font-weight:700} .aksrt-revenue-page__item .is-out{color:#e74c3c;font-weight:700} .aksrt-product-editor__hint{font-size:13px;color:var(--color-ink-4,#8a909c);margin:0 0 10px} /* ===== zibll-parity cat filter / skeleton ===== */ .aksrt-shop-cat-filter.shop-cat-filter{margin-top:14px} .shop-cat-filter-tab{display:flex;gap:10px;overflow-x:auto;list-style:none;margin:0 0 10px;padding:0 0 4px;-webkit-overflow-scrolling:touch} .shop-cat-filter-tab li{flex:0 0 auto} .shop-cat-filter-tab a, .shop-cat-filter-tab span, .shop-cat-filter-child a, .shop-cat-filter-child span{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;text-decoration:none;color:var(--color-ink-2,#5c6370);background:var(--surface-4,#f3f4f6)} .shop-cat-filter-tab .active span, .shop-cat-filter-child .focus-color, .shop-cat-filter-orderby .focus-color{color:var(--color-primary,#f04494);background:color-mix(in srgb,var(--color-primary,#f04494) 12%, #fff)} .shop-cat-filter-child{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px} .shop-cat-filter-orderby{gap:8px} .shop-cat-filter-orderby .opacity5{opacity:.55;margin-right:4px;font-size:13px} .aksrt-product-archive__skeleton{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:8px 0 16px} .aksrt-product-card--placeholder{min-height:220px;border-radius:12px;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 37%,#f3f4f6 63%);background-size:400% 100%;animation:aksrtShopSk 1.2s ease infinite} @keyframes aksrtShopSk{0%{background-position:100% 0}100%{background-position:0 0}} @media (max-width:992px){.aksrt-product-archive__skeleton{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.aksrt-product-archive__skeleton{grid-template-columns:1fr}}