wangjia
a642bf16a2
design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
46 lines
3.0 KiB
HTML
46 lines
3.0 KiB
HTML
<!doctype html>
|
|
<!-- @dsCard group="Brand" name="App 图标家族" subtitle="clay 渐变圆角方,多尺寸" viewport="700x170" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
|
<style>
|
|
body{margin:0;background:var(--bg);font-family:var(--font-sans);padding:22px;color:var(--fg1);display:flex;align-items:center;gap:34px}
|
|
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);position:absolute;top:12px;left:24px}
|
|
.hero{display:flex;flex-direction:column;align-items:center;gap:10px}
|
|
.sizes{display:flex;align-items:flex-end;gap:22px}
|
|
.unit{display:flex;flex-direction:column;align-items:center;gap:8px}
|
|
.tile{border-radius:23px;background:linear-gradient(160deg,#C8794A,#9E5630);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md)}
|
|
.n{font-family:var(--font-mono);font-size:10px;color:var(--fg3)}
|
|
.name{font-size:12px;font-weight:700}
|
|
</style></head><body>
|
|
<div class="lab">APP ICON · 行走穿山甲(纹路 + 眼睛,与 Logo 一致;40/28 仅纹路) — 最终锁版</div>
|
|
|
|
<!-- body + scale strokes -->
|
|
<template id="body">
|
|
<g transform="translate(96,0) scale(-1,1)">
|
|
<path d="M16 59 Q17 51 26 50 Q34 31 45 30 Q55 30 62 37 Q69 41 75 45 Q85 49 89 44 Q92 50 84 52 Q75 53 67 53 Q66 62 60 62 L56 62 Q54 55 49 55 Q47 62 37 62 L33 62 Q31 56 26 56 Q20 59 16 59 Z" fill="#fff"/>
|
|
<g stroke="#B96A3D" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.9">
|
|
<path d="M26 50 Q34 43 42 50"/><path d="M36 48 Q44 41 52 48"/><path d="M46 48 Q54 41 62 49"/>
|
|
</g>
|
|
</g>
|
|
</template>
|
|
<template id="eye"><circle cx="73" cy="55" r="2.3" fill="#9E5630"/></template>
|
|
|
|
<div class="hero">
|
|
<div class="tile" style="width:104px;height:104px"><svg width="80" height="80" viewBox="0 0 96 96" fill="none" class="full"></svg></div>
|
|
<div class="name">主图标 104px</div>
|
|
</div>
|
|
|
|
<div class="sizes">
|
|
<div class="unit"><div class="tile" style="width:64px;height:64px;border-radius:15px"><svg width="50" height="50" viewBox="0 0 96 96" fill="none" class="full"></svg></div><span class="n">64 · 纹路+眼睛</span></div>
|
|
<div class="unit"><div class="tile" style="width:40px;height:40px;border-radius:9px"><svg width="32" height="32" viewBox="0 0 96 96" fill="none" class="tex"></svg></div><span class="n">40 · 仅纹路</span></div>
|
|
<div class="unit"><div class="tile" style="width:28px;height:28px;border-radius:6px"><svg width="23" height="23" viewBox="0 0 96 96" fill="none" class="tex"></svg></div><span class="n">28 · 仅纹路</span></div>
|
|
</div>
|
|
|
|
<script>
|
|
const body = document.getElementById('body').innerHTML;
|
|
// insert eye just before the final (mirror group) closing tag so it mirrors to the head side
|
|
const lastClose = body.lastIndexOf('</g>');
|
|
const bodyWithEye = body.slice(0, lastClose) + '<circle cx="23" cy="55" r="2.3" fill="#9E5630"/>' + body.slice(lastClose);
|
|
document.querySelectorAll('svg.full').forEach(s => s.innerHTML = bodyWithEye);
|
|
document.querySelectorAll('svg.tex').forEach(s => s.innerHTML = body);
|
|
</script>
|
|
</body></html>
|