89 lines
6.5 KiB
HTML
89 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>手机样式图标候选 · 小米橙 · 透明底</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #fff; color: #111; padding: 28px; }
|
|
h1 { font-size: 18px; margin-bottom: 4px; }
|
|
p.tip { font-size: 13px; color: #6b7280; margin-bottom: 20px; }
|
|
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
|
|
.card { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: #fff; }
|
|
.stage {
|
|
height: 120px; display: flex; align-items: center; justify-content: center;
|
|
background-image:
|
|
linear-gradient(45deg, #f1f5f9 25%, transparent 25%, transparent 75%, #f1f5f9 75%),
|
|
linear-gradient(45deg, #f1f5f9 25%, #fff 25%, #fff 75%, #f1f5f9 75%);
|
|
background-size: 16px 16px; background-position: 0 0, 8px 8px; /* 棋盘格 = 透明区域示意，非底色 */
|
|
}
|
|
.stage svg { width: 72px; height: 72px; display: block; }
|
|
.cap { font-size: 13px; padding: 8px 10px 2px; }
|
|
.meta { font-size: 11px; color: #9ca3af; padding: 0 10px 8px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>手机样式 App 图标候选 · 小米橙 #FF6900（透明底，棋盘区域 = 透明）</h1>
|
|
<p class="tip">10 个候选，挑好后把编号发我。小米橙渲染，可再微调。</p>
|
|
<div class="grid">
|
|
<div class="card">
|
|
<div class="stage"><svg viewBox="0 0 24 24" fill="#FF6900"><path d="M17,19H7V5H17M17,1H7C5.89,1 5,1.89 5,3V21A2,2 0 0,0 7,23H17A2,2 0 0,0 19,21V3C19,1.89 18.1,1 17,1Z" /></svg></div>
|
|
<div class="cap"><b>1</b> 纯手机（实心）</div>
|
|
<div class="meta">mdi:cellphone</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="stage"><svg viewBox="0 0 24 24" fill="none" stroke="#FF6900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="20" x="5" y="2" rx="2" ry="2" /> <path d="M12 18h.01" /></svg></div>
|
|
<div class="cap"><b>2</b> 纯手机（线条）</div>
|
|
<div class="meta">lucide:smartphone</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="stage"><svg viewBox="0 0 24 24" fill="#FF6900"><path d="M14.54 23H7C5.9 23 5 22.11 5 21V3C5 1.89 5.89 1 7 1H17C18.1 1 19 1.89 19 3V13C18.3 13 17.63 13.13 17 13.35V5H7V19H13C13 20.54 13.58 21.94 14.54 23M17.75 22.16L15 19.16L16.16 18L17.75 19.59L21.34 16L22.5 17.41L17.75 22.16" /></svg></div>
|
|
<div class="cap"><b>3</b> 手机+对勾（办结）</div>
|
|
<div class="meta">mdi:cellphone-check</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="stage"><svg viewBox="0 0 24 24" fill="#FF6900"><path d="M9.82,12.5C9.84,12.33 9.86,12.17 9.86,12C9.86,11.83 9.84,11.67 9.82,11.5L10.9,10.69C11,10.62 11,10.5 10.96,10.37L9.93,8.64C9.87,8.53 9.73,8.5 9.62,8.53L8.34,9.03C8.07,8.83 7.78,8.67 7.47,8.54L7.27,7.21C7.27,7.09 7.16,7 7.03,7H5C4.85,7 4.74,7.09 4.72,7.21L4.5,8.53C4.21,8.65 3.92,8.83 3.65,9L2.37,8.5C2.25,8.47 2.12,8.5 2.06,8.63L1.03,10.36C0.97,10.5 1,10.61 1.1,10.69L2.18,11.5C2.16,11.67 2.15,11.84 2.15,12C2.15,12.17 2.17,12.33 2.19,12.5L1.1,13.32C1,13.39 1,13.53 1.04,13.64L2.07,15.37C2.13,15.5 2.27,15.5 2.38,15.5L3.66,15C3.93,15.18 4.22,15.34 4.53,15.47L4.73,16.79C4.74,16.91 4.85,17 5,17H7.04C7.17,17 7.28,16.91 7.29,16.79L7.5,15.47C7.8,15.35 8.09,15.17 8.36,15L9.64,15.5C9.76,15.53 9.89,15.5 9.95,15.37L11,13.64C11.04,13.53 11,13.4 10.92,13.32L9.82,12.5M6,13.75C5,13.75 4.2,12.97 4.2,12C4.2,11.03 5,10.25 6,10.25C7,10.25 7.8,11.03 7.8,12C7.8,12.97 7,13.75 6,13.75M17,1H7A2,2 0 0,0 5,3V6H7V4H17V20H7V18H5V21A2,2 0 0,0 7,23H17A2,2 0 0,0 19,21V3A2,2 0 0,0 17,1Z" /></svg></div>
|
|
<div class="cap"><b>4</b> 手机+齿轮（设置）</div>
|
|
<div class="meta">mdi:cellphone-cog</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="stage"><svg viewBox="0 0 24 24" fill="#FF6900"><path d="M11,17V7H4V17H11M11,3A2,2 0 0,1 13,5V19A2,2 0 0,1 11,21H4C2.89,21 2,20.1 2,19V5A2,2 0 0,1 4,3H11M16.5,3H21.5A1.5,1.5 0 0,1 23,4.5V7.5A1.5,1.5 0 0,1 21.5,9H18L15,12V9L15,4.5A1.5,1.5 0 0,1 16.5,3Z" /></svg></div>
|
|
<div class="cap"><b>5</b> 手机+聊天（沟通）</div>
|
|
<div class="meta">mdi:cellphone-message</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="stage"><svg viewBox="0 0 24 24" fill="#FF6900"><path d="M19.1,8.7C20.9,10.5 20.9,13.3 19.1,15.2L20.1,16.2C22.6,13.9 22.6,10.1 20.1,7.7L19.1,8.7M18,9.8L17,10.8C17.5,11.5 17.5,12.4 17,13.1L18,14.1C19.2,12.9 19.2,11.1 18,9.8M14,1H4A2,2 0 0,0 2,3V21A2,2 0 0,0 4,23H14A2,2 0 0,0 16,21V3A2,2 0 0,0 14,1M14,20H4V4H14V20Z" /></svg></div>
|
|
<div class="cap"><b>6</b> 手机+声波（通知）</div>
|
|
<div class="meta">mdi:cellphone-sound</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="stage"><svg viewBox="0 0 24 24" fill="none" stroke="#FF6900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 3h10v8h-3l-4 2v-2h-3l0 -8"/><path d="M15 16v4a1 1 0 0 1 -1 1h-8a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1h2"/><path d="M10 18v.01"/></svg></div>
|
|
<div class="cap"><b>7</b> 手机+消息（线条）</div>
|
|
<div class="meta">tabler:device-mobile-message</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="stage"><svg viewBox="0 0 24 24" fill="none" stroke="#FF6900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21h-4a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v6"/><path d="M15 18a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"/><path d="M20.2 20.2l1.8 1.8"/><path d="M11 4h2"/><path d="M12 17v.01"/></svg></div>
|
|
<div class="cap"><b>8</b> 手机+搜索</div>
|
|
<div class="meta">tabler:device-mobile-search</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="stage"><svg viewBox="0 0 24 24" fill="none" stroke="#FF6900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 21h-3a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v5"/><path d="M11 4h2"/><path d="M17.8 20.817l-2.172 1.138a.392 .392 0 0 1 -.568 -.41l.415 -2.411l-1.757 -1.707a.389 .389 0 0 1 .217 -.665l2.428 -.352l1.086 -2.193a.392 .392 0 0 1 .702 0l1.086 2.193l2.428 .352a.39 .39 0 0 1 .217 .665l-1.757 1.707l.414 2.41a.39 .39 0 0 1 -.567 .411l-2.172 -1.138"/></svg></div>
|
|
<div class="cap"><b>9</b> 手机+星标</div>
|
|
<div class="meta">tabler:device-mobile-star</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="stage"><svg viewBox="0 0 24 24" fill="none" stroke="#FF6900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="20" x="5" y="2" rx="2" ry="2" /> <path d="M12.667 8 10 12h4l-2.667 4" /></svg></div>
|
|
<div class="cap"><b>10</b> 手机+闪电</div>
|
|
<div class="meta">lucide:smartphone-charging</div>
|
|
</div></div>
|
|
</body>
|
|
</html> |