iye
f420af2069
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 6s
页面 (电商AI平台/) - account / team / settings / index / products / projects: 累积迭代 - restraint.css: 设计 token 补充 - login.html / register.html: 新增登录注册页 - _ARCHIVE.md: 归档说明 Next.js 工程骨架 - app/ + components/: 新一代 SPA 雏形 (page / layout / sidebar / topbar / GridBg / Icon) - package.json / package-lock.json / next.config.mjs / tsconfig.json / postcss.config.mjs / next-env.d.ts 历史归档 / 文档 - v1/: 原 V1 静态稿镜像 (含 mockup-A/B/C) - PRD.md / deployment-guide.md / _check.html - ui参考/ / screenshots/ 杂项 - .gitignore 调整 - 删除根 README.md Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
71 lines
4.6 KiB
HTML
71 lines
4.6 KiB
HTML
<!doctype html>
|
||
<html><head>
|
||
<style>
|
||
:root {
|
||
--ink: #15140F; --ink-2: #5A584F; --ink-3: #9C988C;
|
||
--orange: #E55B26; --orange-tint: #FFF4ED; --orange-soft: #FAE8DC;
|
||
--card: #FFFFFF; --border: #E9E5DB; --bg-soft: #F4F2EC; --bg: #FAF9F5;
|
||
}
|
||
body { margin: 36px; background: var(--bg); font-family: Inter, sans-serif; font-size: 13px; }
|
||
.demo { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 24px; }
|
||
.demo > div { background: var(--card); border: 1px solid var(--border); padding: 18px; position: relative; }
|
||
.lbl { font-family: monospace; font-size: 10px; color: #888; margin-bottom: 12px; letter-spacing: 0.04em; }
|
||
|
||
/* V1 char version */
|
||
.v1-corner::before, .v1-corner::after { content: '+'; position: absolute; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1; }
|
||
.v1-corner::before { top: -8px; left: -8px; }
|
||
.v1-corner::after { bottom: -8px; right: -8px; }
|
||
|
||
/* V2.1 SVG version */
|
||
.v2-corner::before, .v2-corner::after { content: ''; position: absolute; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21' fill='%239C988C'%3E%3Cpath d='M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z'/%3E%3C/svg%3E") no-repeat center; background-size: contain; }
|
||
.v2-corner::before { top: -7px; left: -7px; }
|
||
.v2-corner::after { bottom: -7px; right: -7px; }
|
||
|
||
/* Card selected check */
|
||
.card-radio { width: 160px; height: 90px; padding: 14px; background: var(--orange-tint); border: 1px solid var(--orange); position: relative; }
|
||
.card-radio h4 { font-size: 13px; font-weight: 600; }
|
||
.card-radio .sub { font-family: monospace; font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }
|
||
.v1-check::after { content: '✓'; position: absolute; top: 8px; right: 10px; width: 16px; height: 16px; background: var(--orange); color: #FFF; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
|
||
.v2-check::after { content: ''; position: absolute; top: 8px; right: 10px; width: 16px; height: 16px; background-color: var(--orange); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 10px 10px; }
|
||
|
||
/* List item check */
|
||
.pv-list { list-style: none; padding: 0; margin: 0; }
|
||
.pv-list li { font-size: 11.5px; color: var(--ink-2); padding: 4px 0; display: flex; align-items: center; gap: 6px; }
|
||
.v1-list li::before { content: '✓'; color: var(--orange); font-size: 11px; font-weight: 700; }
|
||
.v2-list li::before { content: ''; width: 11px; height: 11px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E55B26' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") no-repeat center; background-size: contain; }
|
||
</style></head>
|
||
<body>
|
||
|
||
<div class="lbl">// 容器四角准星 · V1 字符 (左) vs V2.1 SVG 圆弧内凹 (右)</div>
|
||
<div class="demo">
|
||
<div class="v1-corner"><strong>V1 · 字符 +</strong><br><span style="color:#999;font-size:11px">font-family: 'JetBrains Mono' · 13px</span></div>
|
||
<div class="v2-corner"><strong>V2.1 · SVG 准星</strong><br><span style="color:#999;font-size:11px">viewBox 22×21 · 圆弧内凹 · #9C988C</span></div>
|
||
</div>
|
||
|
||
<div class="lbl">// 选中卡片 ✓ 角标 · V1 字符 (左) vs V2.1 SVG (右)</div>
|
||
<div class="demo" style="grid-template-columns: 200px 200px;">
|
||
<div class="card-radio v1-check"><h4>V1 · 字符 ✓</h4><div class="sub">font-weight 700</div></div>
|
||
<div class="card-radio v2-check"><h4>V2.1 · SVG check</h4><div class="sub">stroke 3 · linecap round</div></div>
|
||
</div>
|
||
|
||
<div class="lbl">// 列表项 bullet · V1 字符 (左) vs V2.1 SVG (右)</div>
|
||
<div class="demo">
|
||
<div>
|
||
<strong style="display:block;margin-bottom:10px">V1 · 字符 ✓</strong>
|
||
<ul class="pv-list v1-list">
|
||
<li>透明质酸 + B5</li>
|
||
<li>30g 大容量精华</li>
|
||
<li>都市白领女性 · 25-30 岁</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<strong style="display:block;margin-bottom:10px">V2.1 · SVG check (stroke 2.5)</strong>
|
||
<ul class="pv-list v2-list">
|
||
<li>透明质酸 + B5</li>
|
||
<li>30g 大容量精华</li>
|
||
<li>都市白领女性 · 25-30 岁</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</body></html>
|