298 lines
12 KiB
HTML
298 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>全能数据版-尺码销量双显</title>
|
|
<style>
|
|
:root {
|
|
--card-width: 340px;
|
|
--primary: #0f172a;
|
|
--secondary: #64748b;
|
|
--accent-blue: #3b82f6; /* 销量色 */
|
|
--bg-page: #f1f5f9;
|
|
--danger: #ef4444;
|
|
--success: #10b981;
|
|
--border: #e2e8f0;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
background: var(--bg-page);
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
/* --- 基础卡片样式保持不变 --- */
|
|
.card {
|
|
background: #fff;
|
|
width: var(--card-width);
|
|
border-radius: 16px;
|
|
box-shadow: 0 10px 30px -10px rgba(0,0,0,0.1);
|
|
border: 1px solid #fff;
|
|
overflow: hidden;
|
|
display: flex; flex-direction: column;
|
|
}
|
|
.header-bar {
|
|
background: #f8fafc; padding: 10px 18px; border-bottom: 1px solid var(--border);
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
font-size: 13px; color: var(--secondary); font-weight: 500;
|
|
}
|
|
.color-badge { color: var(--primary); font-weight: 700; display: flex; align-items: center; gap: 6px; }
|
|
.color-dot { width: 10px; height: 10px; background: #d4b483; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); }
|
|
.card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
|
|
|
|
/* 媒体区 */
|
|
.media-row { display: flex; gap: 16px; margin-bottom: 20px; }
|
|
.thumb-box { width: 90px; height: 120px; border-radius: 8px; overflow: hidden; flex-shrink: 0; position: relative; border: 1px solid var(--border); }
|
|
.thumb-img { width: 100%; height: 100%; object-fit: cover; }
|
|
.info-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
|
|
.prod-title { font-size: 16px; font-weight: 700; color: var(--primary); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.tags-container { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
|
|
.tag-pill { font-size: 10px; padding: 2px 8px; border-radius: 4px; font-weight: 600; }
|
|
.tag-blue { background: #eff6ff; color: var(--accent-blue); border: 1px solid #dbeafe; }
|
|
.tag-purple { background: #f5f3ff; color: #7c3aed; border: 1px solid #ede9fe; }
|
|
.price-section { margin-top: auto; }
|
|
.current-price { font-size: 22px; font-weight: 800; color: var(--primary); letter-spacing: -0.5px; }
|
|
.cost-price { font-size: 12px; color: #94a3b8; text-decoration: line-through; margin-left: 6px;}
|
|
.margin-text { font-size: 12px; color: #d97706; font-weight: 600; float: right; margin-top: 8px;}
|
|
|
|
/* 重点数据区 */
|
|
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
|
|
.stat-card { padding: 14px; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; }
|
|
.stat-card.sales { background: #f0f9ff; border: 1px solid #bae6fd; }
|
|
.stat-card.stock { background: #faf5ff; border: 1px solid #e9d5ff; }
|
|
.stat-label { font-size: 11px; color: var(--secondary); margin-bottom: 2px; }
|
|
.stat-value { font-size: 28px; font-weight: 900; color: var(--primary); line-height: 1.1; font-family: 'Roboto', sans-serif; }
|
|
.stat-sub { font-size: 12px; font-weight: 500; opacity: 0.6; margin-left: 2px; }
|
|
.sales-footer { margin-top: 8px; display: flex; flex-direction: column; align-items: flex-start; }
|
|
.mini-progress { width: 100%; height: 4px; background: rgba(0,0,0,0.06); border-radius: 2px; margin-bottom: 4px; overflow: hidden; }
|
|
.mini-fill { height: 100%; background: var(--accent-blue); width: 62%; }
|
|
.rate-text { font-size: 10px; color: var(--accent-blue); font-weight: 600; }
|
|
|
|
/* --- 4. 底部库存与销量双显 (核心修改区域) --- */
|
|
.stock-footer {
|
|
border-top: 1px dashed var(--border);
|
|
padding-top: 16px;
|
|
}
|
|
.section-header {
|
|
font-size: 11px; color: #94a3b8; margin-bottom: 10px;
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
}
|
|
|
|
/* 尺码网格 */
|
|
.size-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr); /* 4列 */
|
|
gap: 8px;
|
|
}
|
|
|
|
/* 单个尺码盒子：设计成上下结构 */
|
|
.size-cell {
|
|
background: #f8fafc;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
padding: 6px 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
/* 尺码标签 (S/M/L) - 居中置顶 */
|
|
.sz-tag {
|
|
font-size: 10px;
|
|
color: #94a3b8;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
/* 数据行容器 */
|
|
.sz-data-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
/* 库存数字 (主) */
|
|
.sz-stock {
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
color: var(--primary);
|
|
line-height: 1.1;
|
|
}
|
|
|
|
/* 销量数字 (辅) */
|
|
.sz-sales {
|
|
font-size: 10px;
|
|
color: var(--accent-blue);
|
|
background: rgba(59, 130, 246, 0.1); /* 浅蓝色背景 */
|
|
padding: 1px 6px;
|
|
border-radius: 4px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* --- 缺货状态样式 (M码) --- */
|
|
.size-cell.alert {
|
|
background: #fef2f2;
|
|
border-color: #fecaca;
|
|
}
|
|
.size-cell.alert .sz-tag { color: var(--danger); }
|
|
.size-cell.alert .sz-stock { color: var(--danger); }
|
|
/* 缺货时的销量背景改红，保持统一感 */
|
|
.size-cell.alert .sz-sales {
|
|
color: #b91c1c;
|
|
background: rgba(239, 68, 68, 0.15);
|
|
}
|
|
|
|
/* 缺货角标 */
|
|
.alert-badge {
|
|
position: absolute; top: -4px; right: -4px;
|
|
background: var(--danger); color: white;
|
|
font-size: 8px; padding: 2px 4px; border-radius: 4px;
|
|
transform: scale(0.9); font-weight: bold;
|
|
}
|
|
|
|
/* 底部说明 */
|
|
.legend {
|
|
display: flex; gap: 12px; margin-top: 8px; justify-content: flex-end;
|
|
}
|
|
.legend-item { display: flex; align-items: center; gap: 4px; font-size: 9px; color: #94a3b8; }
|
|
.dot { width: 6px; height: 6px; border-radius: 50%; }
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="card">
|
|
<div class="header-bar">
|
|
<div>款号: <span style="font-family: monospace; font-weight:600;">54000245</span></div>
|
|
<div class="color-badge">
|
|
<span class="color-dot"></span>
|
|
卡其色
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="media-row">
|
|
<div class="thumb-box">
|
|
<img src="https://images.unsplash.com/photo-1624378439575-d8705ad7ae80?q=80&w=200&auto=format&fit=crop" class="thumb-img">
|
|
</div>
|
|
<div class="info-col">
|
|
<div class="prod-title">LK2025 春季纯棉修身休闲裤</div>
|
|
<div class="tags-container">
|
|
<span class="tag-pill tag-blue">25春 一波段</span>
|
|
<span class="tag-pill tag-purple">8.5折</span>
|
|
</div>
|
|
<div class="price-section">
|
|
<span class="current-price">¥369</span>
|
|
<span class="cost-price">¥158</span>
|
|
<span class="margin-text">毛利 57%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats-grid">
|
|
<div class="stat-card sales">
|
|
<div class="stat-label">总销量</div>
|
|
<div class="stat-value">450<span class="stat-sub">件</span></div>
|
|
<div class="sales-footer">
|
|
<div class="mini-progress"><div class="mini-fill"></div></div>
|
|
<div class="rate-text">售罄率 62%</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card stock">
|
|
<div class="stat-label">当前库存</div>
|
|
<div class="stat-value">280<span class="stat-sub">件</span></div>
|
|
<div style="font-size:10px; color:#a855f7; margin-top:auto; font-weight:600;">周转: 38天 (健康)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stock-footer">
|
|
<div class="section-header">
|
|
<span>SKU明细 (8码)</span>
|
|
<span style="color:#ef4444; font-weight:600; font-size:10px;">⚠️ M码断货</span>
|
|
</div>
|
|
|
|
<div class="size-grid">
|
|
<div class="size-cell">
|
|
<span class="sz-tag">XS</span>
|
|
<div class="sz-data-row">
|
|
<span class="sz-stock">12</span>
|
|
<span class="sz-sales">销 5</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="size-cell">
|
|
<span class="sz-tag">S</span>
|
|
<div class="sz-data-row">
|
|
<span class="sz-stock">45</span>
|
|
<span class="sz-sales">销 20</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="size-cell alert">
|
|
<div class="alert-badge">补</div>
|
|
<span class="sz-tag">M</span>
|
|
<div class="sz-data-row">
|
|
<span class="sz-stock">0</span>
|
|
<span class="sz-sales">销 128</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="size-cell">
|
|
<span class="sz-tag">L</span>
|
|
<div class="sz-data-row">
|
|
<span class="sz-stock">52</span>
|
|
<span class="sz-sales">销 88</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="size-cell">
|
|
<span class="sz-tag">XL</span>
|
|
<div class="sz-data-row">
|
|
<span class="sz-stock">38</span>
|
|
<span class="sz-sales">销 42</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="size-cell">
|
|
<span class="sz-tag">2XL</span>
|
|
<div class="sz-data-row">
|
|
<span class="sz-stock">24</span>
|
|
<span class="sz-sales">销 15</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="size-cell">
|
|
<span class="sz-tag">3XL</span>
|
|
<div class="sz-data-row">
|
|
<span class="sz-stock">10</span>
|
|
<span class="sz-sales">销 6</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="size-cell">
|
|
<span class="sz-tag">4XL</span>
|
|
<div class="sz-data-row">
|
|
<span class="sz-stock">5</span>
|
|
<span class="sz-sales">销 2</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item"><div class="dot" style="background:#0f172a"></div>库存</div>
|
|
<div class="legend-item"><div class="dot" style="background:#3b82f6"></div>销量</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |