feat: add mobile bottom nav, compact navbar search, update vite proxy to 8002
This commit is contained in:
chunyu
@@ -0,0 +1,35 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
|
||||
<defs>
|
||||
<!-- 主渐变：橙红到暖红，可乐色调 -->
|
||||
<linearGradient id="colaGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FF6B35"/>
|
||||
<stop offset="50%" stop-color="#E8453C"/>
|
||||
<stop offset="100%" stop-color="#D62828"/>
|
||||
</linearGradient>
|
||||
<!-- 高光渐变 -->
|
||||
<linearGradient id="shineGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FF8C5A" stop-opacity="0.8"/>
|
||||
<stop offset="100%" stop-color="#FF6B35" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<!-- 气泡高光 -->
|
||||
<radialGradient id="bubbleGlow" cx="40%" cy="35%" r="50%">
|
||||
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.6"/>
|
||||
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
|
||||
<!-- 圆角背景 -->
|
||||
<rect x="2" y="2" width="44" height="44" rx="12" ry="12" fill="url(#colaGrad)"/>
|
||||
|
||||
<!-- C 字母 - 加粗圆润风格 -->
|
||||
<path d="M33 14.5C30.2 11.5 26.3 10 22 10C15.4 10 10 15.4 10 22C10 28.6 15.4 34 22 34C26.3 34 30.2 32.5 33 29.5"
|
||||
stroke="#FFFFFF" stroke-width="5.5" stroke-linecap="round" fill="none"/>
|
||||
|
||||
<!-- C 内部的气泡装饰 - 右侧开口处的小圆点，暗示气泡 -->
|
||||
<circle cx="36" cy="19" r="2.2" fill="#FFFFFF" opacity="0.5"/>
|
||||
<circle cx="34.5" cy="14" r="1.3" fill="#FFFFFF" opacity="0.35"/>
|
||||
<circle cx="37.5" cy="23" r="1.5" fill="#FFFFFF" opacity="0.3"/>
|
||||
|
||||
<!-- 顶部高光层 -->
|
||||
<rect x="2" y="2" width="44" height="22" rx="12" ry="12" fill="url(#shineGrad)" opacity="0.3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,55 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
|
||||
<defs>
|
||||
<!-- 杯身渐变：深棕到焦糖色 -->
|
||||
<linearGradient id="cupGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#5C3317"/>
|
||||
<stop offset="40%" stop-color="#8B4513"/>
|
||||
<stop offset="100%" stop-color="#A0522D"/>
|
||||
</linearGradient>
|
||||
<!-- 液体渐变 -->
|
||||
<linearGradient id="liquidGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#C0392B"/>
|
||||
<stop offset="50%" stop-color="#922B21"/>
|
||||
<stop offset="100%" stop-color="#6E2C00"/>
|
||||
</linearGradient>
|
||||
<!-- 高光 -->
|
||||
<linearGradient id="cupShine" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.3"/>
|
||||
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<clipPath id="cupClip">
|
||||
<path d="M14 10 L34 10 L31 40 L17 40 Z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
|
||||
<!-- 圆角背景 -->
|
||||
<rect x="2" y="2" width="44" height="44" rx="12" ry="12" fill="#1A1A2E"/>
|
||||
|
||||
<!-- 杯身 - 梯形 -->
|
||||
<path d="M14 11 L34 11 L31.5 39 L16.5 39 Z" fill="url(#cupGrad)" opacity="0.9"/>
|
||||
|
||||
<!-- 液体填充 -->
|
||||
<g clip-path="url(#cupClip)">
|
||||
<rect x="14" y="18" width="20" height="22" fill="url(#liquidGrad)"/>
|
||||
<!-- 液面波浪 -->
|
||||
<path d="M14 18 Q19 15 24 18 Q29 21 34 18 L34 40 L14 40 Z" fill="#C0392B" opacity="0.6"/>
|
||||
</g>
|
||||
|
||||
<!-- 气泡 - 大小不一，从底部上升 -->
|
||||
<circle cx="20" cy="32" r="2.5" fill="none" stroke="#FFFFFF" stroke-width="1" opacity="0.7"/>
|
||||
<circle cx="27" cy="28" r="1.8" fill="none" stroke="#FFFFFF" stroke-width="0.8" opacity="0.6"/>
|
||||
<circle cx="23" cy="24" r="2" fill="none" stroke="#FFFFFF" stroke-width="0.8" opacity="0.5"/>
|
||||
<circle cx="29" cy="35" r="1.5" fill="none" stroke="#FFFFFF" stroke-width="0.7" opacity="0.65"/>
|
||||
<circle cx="18" cy="26" r="1.2" fill="none" stroke="#FFFFFF" stroke-width="0.7" opacity="0.45"/>
|
||||
<circle cx="25" cy="21" r="1.4" fill="none" stroke="#FFFFFF" stroke-width="0.7" opacity="0.4"/>
|
||||
<circle cx="22" cy="36" r="1" fill="none" stroke="#FFFFFF" stroke-width="0.6" opacity="0.55"/>
|
||||
<circle cx="30" cy="22" r="0.9" fill="none" stroke="#FFFFFF" stroke-width="0.6" opacity="0.35"/>
|
||||
|
||||
<!-- 飘出杯口的气泡 - 表示冒泡活力 -->
|
||||
<circle cx="20" cy="7" r="2" fill="none" stroke="#FF6B35" stroke-width="0.8" opacity="0.7"/>
|
||||
<circle cx="27" cy="4" r="1.5" fill="none" stroke="#FF8C5A" stroke-width="0.7" opacity="0.6"/>
|
||||
<circle cx="32" cy="8" r="1" fill="none" stroke="#FFB088" stroke-width="0.6" opacity="0.5"/>
|
||||
|
||||
<!-- 杯身高光 -->
|
||||
<path d="M16 11 L17 39" stroke="url(#cupShine)" stroke-width="3" opacity="0.4" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
@@ -0,0 +1,67 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
|
||||
<defs>
|
||||
<!-- 主渐变：紫到蓝 -->
|
||||
<linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#6C63FF"/>
|
||||
<stop offset="50%" stop-color="#5B52E0"/>
|
||||
<stop offset="100%" stop-color="#3F8BFC"/>
|
||||
</linearGradient>
|
||||
<!-- 内部渐变 -->
|
||||
<linearGradient id="innerGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#8B83FF"/>
|
||||
<stop offset="100%" stop-color="#6EA8FE"/>
|
||||
</linearGradient>
|
||||
<!-- 发光效果 -->
|
||||
<radialGradient id="glow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.2"/>
|
||||
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<!-- 阴影 -->
|
||||
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#3F8BFC" flood-opacity="0.3"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- 外层六边形 - 发光底座 -->
|
||||
<polygon points="24,3 42,13.5 42,34.5 24,45 6,34.5 6,13.5"
|
||||
fill="url(#hexGrad)" filter="url(#shadow)"/>
|
||||
|
||||
<!-- 内层六边形 - 产生层次感 -->
|
||||
<polygon points="24,7 38,15 38,33 24,41 10,33 10,15"
|
||||
fill="url(#innerGrad)" opacity="0.3"/>
|
||||
|
||||
<!-- 中心工具符号 - 齿轮/扳手组合 -->
|
||||
|
||||
<!-- 齿轮外圈 -->
|
||||
<circle cx="24" cy="23" r="10" fill="none" stroke="#FFFFFF" stroke-width="2" opacity="0.9"/>
|
||||
|
||||
<!-- 齿轮齿 -->
|
||||
<rect x="22.5" y="10.5" width="3" height="4" rx="1" fill="#FFFFFF" opacity="0.9"/>
|
||||
<rect x="22.5" y="31.5" width="3" height="4" rx="1" fill="#FFFFFF" opacity="0.9"/>
|
||||
<rect x="11.5" y="21.5" width="4" height="3" rx="1" fill="#FFFFFF" opacity="0.9"/>
|
||||
<rect x="32.5" y="21.5" width="4" height="3" rx="1" fill="#FFFFFF" opacity="0.9"/>
|
||||
|
||||
<!-- 对角齿 -->
|
||||
<rect x="14" y="13" width="3" height="3.5" rx="1" fill="#FFFFFF" opacity="0.85"
|
||||
transform="rotate(-30 15.5 14.75)"/>
|
||||
<rect x="31" y="13" width="3" height="3.5" rx="1" fill="#FFFFFF" opacity="0.85"
|
||||
transform="rotate(30 32.5 14.75)"/>
|
||||
<rect x="14" y="31.5" width="3" height="3.5" rx="1" fill="#FFFFFF" opacity="0.85"
|
||||
transform="rotate(30 15.5 33.25)"/>
|
||||
<rect x="31" y="31.5" width="3" height="3.5" rx="1" fill="#FFFFFF" opacity="0.85"
|
||||
transform="rotate(-30 32.5 33.25)"/>
|
||||
|
||||
<!-- 齿轮中心孔 -->
|
||||
<circle cx="24" cy="23" r="4.5" fill="#5B52E0"/>
|
||||
<circle cx="24" cy="23" r="3" fill="#3F8BFC" opacity="0.5"/>
|
||||
|
||||
<!-- 中心小点 -->
|
||||
<circle cx="24" cy="23" r="1.5" fill="#FFFFFF" opacity="0.8"/>
|
||||
|
||||
<!-- 顶部发光层 -->
|
||||
<polygon points="24,3 42,13.5 42,24 24,14 6,24 6,13.5"
|
||||
fill="url(#glow)" opacity="0.5"/>
|
||||
|
||||
<!-- 右上角装饰弧线 -->
|
||||
<path d="M35 8 Q40 12 38 18" fill="none" stroke="#FFFFFF" stroke-width="0.8" opacity="0.3" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
@@ -0,0 +1,55 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
|
||||
<defs>
|
||||
<!-- 顶面渐变：珊瑚色 -->
|
||||
<linearGradient id="topFace" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FF7F6E"/>
|
||||
<stop offset="100%" stop-color="#E85D4A"/>
|
||||
</linearGradient>
|
||||
<!-- 左面渐变：青色 -->
|
||||
<linearGradient id="leftFace" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2EC4B6"/>
|
||||
<stop offset="100%" stop-color="#1A9E92"/>
|
||||
</linearGradient>
|
||||
<!-- 右面渐变：紫色 -->
|
||||
<linearGradient id="rightFace" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#7B61FF"/>
|
||||
<stop offset="100%" stop-color="#5A3FD6"/>
|
||||
</linearGradient>
|
||||
<!-- 高光 -->
|
||||
<linearGradient id="topShine" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.4"/>
|
||||
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- 阴影 -->
|
||||
<ellipse cx="24" cy="44" rx="14" ry="2.5" fill="#000000" opacity="0.12"/>
|
||||
|
||||
<!-- 等距立方体 - 顶面 -->
|
||||
<polygon points="24,8 40,17 24,26 8,17" fill="url(#topFace)"/>
|
||||
<polygon points="24,8 40,17 24,26 8,17" fill="url(#topShine)"/>
|
||||
|
||||
<!-- 等距立方体 - 左面 -->
|
||||
<polygon points="8,17 24,26 24,40 8,31" fill="url(#leftFace)"/>
|
||||
|
||||
<!-- 等距立方体 - 右面 -->
|
||||
<polygon points="24,26 40,17 40,31 24,40" fill="url(#rightFace)"/>
|
||||
|
||||
<!-- 工具箱把手 - 顶面上的横线 -->
|
||||
<line x1="17" y1="14" x2="31" y2="14" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" opacity="0.7"/>
|
||||
<rect x="17" y="12" width="14" height="4" rx="2" fill="none" stroke="#FFFFFF" stroke-width="1.5" opacity="0.6"/>
|
||||
|
||||
<!-- 顶面上的小工具图标 - 螺丝刀 -->
|
||||
<line x1="15" y1="19" x2="20" y2="22" stroke="#FFFFFF" stroke-width="1.8" stroke-linecap="round" opacity="0.6"/>
|
||||
<!-- 顶面上的小扳手 -->
|
||||
<path d="M28 18 L32 21" stroke="#FFFFFF" stroke-width="1.8" stroke-linecap="round" opacity="0.6"/>
|
||||
<circle cx="33" cy="21.5" r="1.5" fill="none" stroke="#FFFFFF" stroke-width="1.2" opacity="0.6"/>
|
||||
|
||||
<!-- 左面的装饰线 -->
|
||||
<line x1="10" y1="22" x2="22" y2="28" stroke="#FFFFFF" stroke-width="1" stroke-linecap="round" opacity="0.25"/>
|
||||
<line x1="10" y1="26" x2="18" y2="30" stroke="#FFFFFF" stroke-width="1" stroke-linecap="round" opacity="0.2"/>
|
||||
|
||||
<!-- 右面的装饰 -->
|
||||
<circle cx="32" cy="30" r="2" fill="#FFFFFF" opacity="0.2"/>
|
||||
<circle cx="35" cy="26" r="1.2" fill="#FFFFFF" opacity="0.15"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@@ -0,0 +1,348 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: #0f0f1a;
|
||||
color: #e0e0e0;
|
||||
min-height: 100vh;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
margin-bottom: 8px;
|
||||
background: linear-gradient(135deg, #FF6B35, #6C63FF);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
color: #888;
|
||||
margin-bottom: 40px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.current-section {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
padding: 20px;
|
||||
border: 1px solid #333;
|
||||
border-radius: 12px;
|
||||
background: #1a1a2e;
|
||||
}
|
||||
.current-section h2 { font-size: 16px; color: #ff4444; margin-bottom: 12px; }
|
||||
.current-section .current-icon { width: 64px; height: 64px; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 24px;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.card {
|
||||
background: #1a1a2e;
|
||||
border-radius: 16px;
|
||||
padding: 30px 20px 24px;
|
||||
text-align: center;
|
||||
border: 1px solid #2a2a3e;
|
||||
transition: transform 0.2s, border-color 0.2s;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.card:hover {
|
||||
transform: translateY(-4px);
|
||||
border-color: #6C63FF;
|
||||
}
|
||||
.card.selected {
|
||||
border-color: #4CAF50;
|
||||
box-shadow: 0 0 20px rgba(76, 175, 80, 0.2);
|
||||
}
|
||||
.card.selected::after {
|
||||
content: '✓ 已选择';
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.card-icon {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
margin: 0 auto 16px;
|
||||
}
|
||||
.card h3 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 8px;
|
||||
color: #fff;
|
||||
}
|
||||
.card .desc {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.tags {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tag {
|
||||
background: rgba(108, 99, 255, 0.15);
|
||||
color: #8B83FF;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.sizes-section {
|
||||
max-width: 1100px;
|
||||
margin: 50px auto 0;
|
||||
text-align: center;
|
||||
}
|
||||
.sizes-section h2 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 20px;
|
||||
color: #ccc;
|
||||
}
|
||||
.sizes-grid {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.size-group { text-align: center; }
|
||||
.size-group .size-label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.size-group img, .size-group svg {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.compare-table {
|
||||
max-width: 1100px;
|
||||
margin: 50px auto 0;
|
||||
}
|
||||
.compare-table h2 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 20px;
|
||||
color: #ccc;
|
||||
text-align: center;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: #1a1a2e;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
th {
|
||||
background: #252540;
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
color: #aaa;
|
||||
}
|
||||
td {
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid #2a2a3e;
|
||||
font-size: 13px;
|
||||
}
|
||||
td:first-child { color: #fff; font-weight: 600; }
|
||||
|
||||
.apply-btn {
|
||||
display: block;
|
||||
margin: 40px auto 0;
|
||||
padding: 12px 32px;
|
||||
background: linear-gradient(135deg, #6C63FF, #3F8BFC);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.apply-btn:hover { opacity: 0.9; }
|
||||
.apply-btn:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>可乐项目 - 图标模板预览</h1>
|
||||
<p class="subtitle">点击选择你喜欢的图标设计，然后应用为项目 Favicon</p>
|
||||
|
||||
<!-- 当前图标 -->
|
||||
<div class="current-section">
|
||||
<h2>当前图标</h2>
|
||||
<img class="current-icon" src="/favicon.svg" alt="当前图标">
|
||||
</div>
|
||||
|
||||
<!-- 新图标选项 -->
|
||||
<div class="grid">
|
||||
<div class="card" data-file="icon-c-letter.svg" onclick="selectCard(this)">
|
||||
<img class="card-icon" src="icon-c-letter.svg" alt="C字母图标">
|
||||
<h3>字母 C 标识</h3>
|
||||
<p class="desc">圆润加粗的"C"字母，搭配气泡装饰，呼应可乐品牌。橙红到深红的渐变色调，温暖而有辨识度。</p>
|
||||
<div class="tags">
|
||||
<span class="tag">品牌辨识</span>
|
||||
<span class="tag">极简</span>
|
||||
<span class="tag">可乐色调</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-file="icon-toolbox.svg" onclick="selectCard(this)">
|
||||
<img class="card-icon" src="icon-toolbox.svg" alt="工具箱图标">
|
||||
<h3>等距工具箱</h3>
|
||||
<p class="desc">3D等距视角的彩色工具箱，珊瑚色/青色/紫色多面体设计，展现平台多工具属性，现代科技感。</p>
|
||||
<div class="tags">
|
||||
<span class="tag">3D等距</span>
|
||||
<span class="tag">多色</span>
|
||||
<span class="tag">工具平台</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-file="icon-colabubbles.svg" onclick="selectCard(this)">
|
||||
<img class="card-icon" src="icon-colabubbles.svg" alt="气泡可乐图标">
|
||||
<h3>抽象气泡杯</h3>
|
||||
<p class="desc">深色背景上的极简可乐杯，液体中冒出的气泡传递活力感。暗色系设计，科技感十足。</p>
|
||||
<div class="tags">
|
||||
<span class="tag">暗色系</span>
|
||||
<span class="tag">抽象</span>
|
||||
<span class="tag">活力</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-file="icon-hextool.svg" onclick="selectCard(this)">
|
||||
<img class="card-icon" src="icon-hextool.svg" alt="六边形工具图标">
|
||||
<h3>六边形齿轮</h3>
|
||||
<p class="desc">六边形底座搭配齿轮符号，紫蓝渐变光效。传达精密工具与技术平台的气质，科技前沿感。</p>
|
||||
<div class="tags">
|
||||
<span class="tag">科技感</span>
|
||||
<span class="tag">几何</span>
|
||||
<span class="tag">工具符号</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 多尺寸预览 -->
|
||||
<div class="sizes-section">
|
||||
<h2>不同尺寸预览</h2>
|
||||
<div id="sizes-grid" class="sizes-grid" style="display:none;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 特性对比 -->
|
||||
<div class="compare-table">
|
||||
<h2>设计特性对比</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>图标</th>
|
||||
<th>风格</th>
|
||||
<th>配色</th>
|
||||
<th>适用场景</th>
|
||||
<th>辨识度</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>字母 C</td>
|
||||
<td>扁平极简</td>
|
||||
<td>暖色系（橙红→深红）</td>
|
||||
<td>品牌一致性最强，适合正式场合</td>
|
||||
<td>⭐⭐⭐⭐⭐</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>等距工具箱</td>
|
||||
<td>3D 等距</td>
|
||||
<td>多色（珊瑚+青+紫）</td>
|
||||
<td>展现工具多样性，视觉冲击力强</td>
|
||||
<td>⭐⭐⭐⭐</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>气泡可乐杯</td>
|
||||
<td>暗色抽象</td>
|
||||
<td>暗色系（深棕+焦糖）</td>
|
||||
<td>暗色主题搭配最佳，独特有记忆点</td>
|
||||
<td>⭐⭐⭐⭐</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>六边形齿轮</td>
|
||||
<td>科技几何</td>
|
||||
<td>冷色系（紫→蓝）</td>
|
||||
<td>技术平台定位，专业现代</td>
|
||||
<td>⭐⭐⭐⭐</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<button class="apply-btn" id="applyBtn" disabled onclick="applyIcon()">
|
||||
选择一个图标后点击应用
|
||||
</button>
|
||||
|
||||
<script>
|
||||
let selectedFile = null;
|
||||
|
||||
function selectCard(card) {
|
||||
document.querySelectorAll('.card').forEach(c => c.classList.remove('selected'));
|
||||
card.classList.add('selected');
|
||||
selectedFile = card.dataset.file;
|
||||
|
||||
const btn = document.getElementById('applyBtn');
|
||||
btn.disabled = false;
|
||||
btn.textContent = `应用 "${card.querySelector('h3').textContent}" 为项目图标`;
|
||||
|
||||
// 展示多尺寸预览
|
||||
showSizes(selectedFile);
|
||||
}
|
||||
|
||||
function showSizes(file) {
|
||||
const grid = document.getElementById('sizes-grid');
|
||||
grid.style.display = 'flex';
|
||||
const sizes = [
|
||||
{ w: 16, h: 16, label: '16×16 浏览器标签' },
|
||||
{ w: 32, h: 32, label: '32×32 标准' },
|
||||
{ w: 48, h: 48, label: '48×48 推荐' },
|
||||
{ w: 64, h: 64, label: '64×64 收藏夹' },
|
||||
{ w: 128, h: 128, label: '128×128 高清' },
|
||||
];
|
||||
grid.innerHTML = sizes.map(s =>
|
||||
`<div class="size-group">
|
||||
<img src="${file}" width="${s.w}" height="${s.h}" alt="${s.label}">
|
||||
<div class="size-label">${s.label}</div>
|
||||
</div>`
|
||||
).join('');
|
||||
}
|
||||
|
||||
function applyIcon() {
|
||||
if (!selectedFile) return;
|
||||
if (confirm(`确认将项目图标替换为 "${selectedFile}"？\n\n原 favicon.svg 将被替换。`)) {
|
||||
// 复制文件
|
||||
fetch(selectedFile).then(r => r.text()).then(svg => {
|
||||
const blob = new Blob([svg], { type: 'image/svg+xml' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'favicon.svg';
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
alert('已下载新图标文件 favicon.svg\n请将它替换到 public/ 目录下覆盖原文件。');
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user