71 lines
4.1 KiB
HTML
71 lines
4.1 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>P02 · 卡片网格视图</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="ui-richness-shared.css" />
|
|
</head>
|
|
<body>
|
|
<div class="demo-banner">
|
|
<div><span class="level-tag level-PAT">模式 P02</span> <strong>卡片网格视图</strong> — 表格之外的实体展示</div>
|
|
<a href="ui-richness-index.html">← 返回对比入口</a>
|
|
</div>
|
|
<div class="page-wrap">
|
|
<header class="page-head">
|
|
<h1>商品管理</h1>
|
|
<p class="page-desc">工具栏提供「列表 / 卡片」切换；卡片视图用封面 + Tag + 价格强化实体感。</p>
|
|
</header>
|
|
<section class="panel">
|
|
<div class="panel-top">
|
|
<h2 class="title-bar-heading">商品卡片</h2>
|
|
<div style="display:flex;gap:6px">
|
|
<button class="btn btn-ghost" type="button" style="height:32px;font-size:12px">列表</button>
|
|
<button class="btn btn-main" type="button" style="height:32px;font-size:12px">卡片</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-grid">
|
|
<article class="entity-card">
|
|
<div class="entity-card-cover"><img src="https://picsum.photos/seed/p1/400/240" alt="" /></div>
|
|
<div class="entity-card-body">
|
|
<h3 class="entity-card-title">鲜切草莓 500g</h3>
|
|
<div class="entity-card-meta">SKU-10021 · 水果 / 浆果</div>
|
|
<div style="display:flex;gap:6px;margin-bottom:8px"><span class="tag success">上架</span><span class="tag muted">库存 128</span></div>
|
|
<div class="entity-card-ft"><span style="color:var(--primary-dark);font-weight:700">¥28.00</span><button class="btn btn-op primary" type="button">查看</button></div>
|
|
</div>
|
|
</article>
|
|
<article class="entity-card">
|
|
<div class="entity-card-cover"><img src="https://picsum.photos/seed/p2/400/240" alt="" /></div>
|
|
<div class="entity-card-body">
|
|
<h3 class="entity-card-title">有机菠菜 300g</h3>
|
|
<div class="entity-card-meta">SKU-10035 · 蔬菜 / 叶菜</div>
|
|
<div style="display:flex;gap:6px;margin-bottom:8px"><span class="tag success">上架</span><span class="tag warning">库存 12</span></div>
|
|
<div class="entity-card-ft"><span style="color:var(--primary-dark);font-weight:700">¥6.50</span><button class="btn btn-op primary" type="button">查看</button></div>
|
|
</div>
|
|
</article>
|
|
<article class="entity-card">
|
|
<div class="entity-card-cover"><img src="https://picsum.photos/seed/p3/400/240" alt="" /></div>
|
|
<div class="entity-card-body">
|
|
<h3 class="entity-card-title">精品苹果 2kg</h3>
|
|
<div class="entity-card-meta">SKU-10008 · 水果 / 苹果</div>
|
|
<div style="display:flex;gap:6px;margin-bottom:8px"><span class="tag muted">下架</span><span class="tag muted">库存 0</span></div>
|
|
<div class="entity-card-ft"><span style="color:var(--primary-dark);font-weight:700">¥32.00</span><button class="btn btn-op primary" type="button">查看</button></div>
|
|
</div>
|
|
</article>
|
|
<article class="entity-card">
|
|
<div class="entity-card-cover" style="border:2px dashed var(--border);background:var(--primary-bg)">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--primary-dark)" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
|
|
</div>
|
|
<div class="entity-card-body" style="text-align:center;padding:24px">
|
|
<h3 class="entity-card-title">新增商品</h3>
|
|
<p class="entity-card-meta">点击创建新商品</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
<p class="dim-note"><strong>适用：</strong>商品、设备、工艺路线、SOP 文档等「有封面/图标」的实体。不必全站卡片化，可作为视图切换选项。</p>
|
|
</div>
|
|
</body>
|
|
</html>
|