283 lines
9.8 KiB
Plaintext
283 lines
9.8 KiB
Plaintext
<!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', sans-serif;
|
||
background: linear-gradient(135deg, #6366F1, #8B5CF6);
|
||
min-height: 100vh;
|
||
padding: 40px 20px;
|
||
}
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
background: white;
|
||
border-radius: 20px;
|
||
padding: 40px;
|
||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||
}
|
||
h1 {
|
||
color: #6366F1;
|
||
margin-bottom: 10px;
|
||
}
|
||
.subtitle {
|
||
color: #64748B;
|
||
margin-bottom: 40px;
|
||
}
|
||
.icon-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 40px;
|
||
}
|
||
.icon-card {
|
||
border: 2px solid #E2E8F0;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
text-align: center;
|
||
transition: all 0.3s;
|
||
}
|
||
.icon-card:hover {
|
||
border-color: #6366F1;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 16px rgba(99,102,241,0.2);
|
||
}
|
||
.icon-preview {
|
||
width: 80px;
|
||
height: 80px;
|
||
margin: 0 auto 15px;
|
||
background: #F8FAFC;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 40px;
|
||
}
|
||
.icon-name {
|
||
font-weight: 600;
|
||
color: #0F172A;
|
||
margin-bottom: 8px;
|
||
}
|
||
.icon-size {
|
||
font-size: 14px;
|
||
color: #64748B;
|
||
margin-bottom: 12px;
|
||
}
|
||
.btn {
|
||
display: inline-block;
|
||
padding: 8px 20px;
|
||
background: #6366F1;
|
||
color: white;
|
||
border-radius: 8px;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
transition: all 0.3s;
|
||
}
|
||
.btn:hover {
|
||
background: #4F46E5;
|
||
transform: scale(1.05);
|
||
}
|
||
.instructions {
|
||
background: #F8FAFC;
|
||
padding: 24px;
|
||
border-radius: 12px;
|
||
margin-bottom: 30px;
|
||
}
|
||
.instructions h3 {
|
||
color: #0F172A;
|
||
margin-bottom: 12px;
|
||
}
|
||
.instructions ol {
|
||
padding-left: 20px;
|
||
color: #64748B;
|
||
line-height: 1.8;
|
||
}
|
||
.download-all {
|
||
text-align: center;
|
||
margin: 30px 0;
|
||
}
|
||
.download-all .btn {
|
||
padding: 15px 40px;
|
||
font-size: 18px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>🎨 图标批量下载工具</h1>
|
||
<p class="subtitle">一键下载项目所需的所有图标素材</p>
|
||
|
||
<div class="instructions">
|
||
<h3>📖 使用说明</h3>
|
||
<ol>
|
||
<li>点击下方任意图标卡片的"下载"按钮</li>
|
||
<li>会自动跳转到 RemixIcon 图标库（免费、开源）</li>
|
||
<li>点击下载图标，选择 PNG 格式</li>
|
||
<li>调整颜色为对应的颜色代码</li>
|
||
<li>下载并保存到项目的 <code>static/icons/</code> 目录</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="icon-grid">
|
||
<!-- 底部导航栏 -->
|
||
<div class="icon-card">
|
||
<div class="icon-preview">🏠</div>
|
||
<div class="icon-name">首页</div>
|
||
<div class="icon-size">48x48 px | #94A3B8 / #6366F1</div>
|
||
<a href="https://remixicon.com/icon/home-line" class="btn" target="_blank">下载</a>
|
||
</div>
|
||
<div class="icon-card">
|
||
<div class="icon-preview">👤</div>
|
||
<div class="icon-name">我的</div>
|
||
<div class="icon-size">48x48 px | #94A3B8 / #6366F1</div>
|
||
<a href="https://remixicon.com/icon/user-line" class="btn" target="_blank">下载</a>
|
||
</div>
|
||
|
||
<!-- 首页图标 -->
|
||
<div class="icon-card">
|
||
<div class="icon-preview">🔍</div>
|
||
<div class="icon-name">搜索</div>
|
||
<div class="icon-size">24x24 px | #94A3B8</div>
|
||
<a href="https://remixicon.com/icon/search-line" class="btn" target="_blank">下载</a>
|
||
</div>
|
||
<div class="icon-card">
|
||
<div class="icon-preview">📍</div>
|
||
<div class="icon-name">位置</div>
|
||
<div class="icon-size">24x24 px | #94A3B8</div>
|
||
<a href="https://remixicon.com/icon/map-pin-line" class="btn" target="_blank">下载</a>
|
||
</div>
|
||
<div class="icon-card">
|
||
<div class="icon-preview">🍽️</div>
|
||
<div class="icon-name">餐饮</div>
|
||
<div class="icon-size">32x32 px | #6366F1</div>
|
||
<a href="https://remixicon.com/icon/restaurant-line" class="btn" target="_blank">下载</a>
|
||
</div>
|
||
<div class="icon-card">
|
||
<div class="icon-preview">🍷</div>
|
||
<div class="icon-name">酒馆</div>
|
||
<div class="icon-size">32x32 px | #6366F1</div>
|
||
<a href="https://remixicon.com/icon/goblet-line" class="btn" target="_blank">下载</a>
|
||
</div>
|
||
<div class="icon-card">
|
||
<div class="icon-preview">🏪</div>
|
||
<div class="icon-name">超市</div>
|
||
<div class="icon-size">32x32 px | #6366F1</div>
|
||
<a href="https://remixicon.com/icon/shop-3-line" class="btn" target="_blank">下载</a>
|
||
</div>
|
||
<div class="icon-card">
|
||
<div class="icon-preview">📦</div>
|
||
<div class="icon-name">全部</div>
|
||
<div class="icon-size">32x32 px | #6366F1</div>
|
||
<a href="https://remixicon.com/icon/apps-line" class="btn" target="_blank">下载</a>
|
||
</div>
|
||
|
||
<!-- 个人中心图标 -->
|
||
<div class="icon-card">
|
||
<div class="icon-preview">✏️</div>
|
||
<div class="icon-name">编辑</div>
|
||
<div class="icon-size">24x24 px | #FFFFFF</div>
|
||
<a href="https://remixicon.com/icon/edit-line" class="btn" target="_blank">下载</a>
|
||
</div>
|
||
<div class="icon-card">
|
||
<div class="icon-preview">💎</div>
|
||
<div class="icon-name">会员</div>
|
||
<div class="icon-size">32x32 px | #FFFFFF</div>
|
||
<a href="https://remixicon.com/icon/vip-diamond-line" class="btn" target="_blank">下载</a>
|
||
</div>
|
||
<div class="icon-card">
|
||
<div class="icon-preview">🎫</div>
|
||
<div class="icon-name">优惠券</div>
|
||
<div class="icon-size">32x32 px | #FFFFFF</div>
|
||
<a href="https://remixicon.com/icon/coupon-line" class="btn" target="_blank">下载</a>
|
||
</div>
|
||
<div class="icon-card">
|
||
<div class="icon-preview">💰</div>
|
||
<div class="icon-name">积分</div>
|
||
<div class="icon-size">32x32 px | #FFFFFF</div>
|
||
<a href="https://remixicon.com/icon/coin-line" class="btn" target="_blank">下载</a>
|
||
</div>
|
||
<div class="icon-card">
|
||
<div class="icon-preview">📋</div>
|
||
<div class="icon-name">订单</div>
|
||
<div class="icon-size">32x32 px | #FFFFFF</div>
|
||
<a href="https://remixicon.com/icon/file-list-line" class="btn" target="_blank">下载</a>
|
||
</div>
|
||
<div class="icon-card">
|
||
<div class="icon-preview">⭐</div>
|
||
<div class="icon-name">收藏</div>
|
||
<div class="icon-size">24x24 px | #64748B</div>
|
||
<a href="https://remixicon.com/icon/star-line" class="btn" target="_blank">下载</a>
|
||
</div>
|
||
<div class="icon-card">
|
||
<div class="icon-preview">❓</div>
|
||
<div class="icon-name">帮助</div>
|
||
<div class="icon-size">24x24 px | #64748B</div>
|
||
<a href="https://remixicon.com/icon/question-line" class="btn" target="_blank">下载</a>
|
||
</div>
|
||
<div class="icon-card">
|
||
<div class="icon-preview">⚙️</div>
|
||
<div class="icon-name">设置</div>
|
||
<div class="icon-size">24x24 px | #64748B</div>
|
||
<a href="https://remixicon.com/icon/settings-3-line" class="btn" target="_blank">下载</a>
|
||
</div>
|
||
<div class="icon-card">
|
||
<div class="icon-preview">→</div>
|
||
<div class="icon-name">箭头</div>
|
||
<div class="icon-size">20x20 px | #CBD5E1</div>
|
||
<a href="https://remixicon.com/icon/arrow-right-line" class="btn" target="_blank">下载</a>
|
||
</div>
|
||
|
||
<!-- 店铺详情图标 -->
|
||
<div class="icon-card">
|
||
<div class="icon-preview">📞</div>
|
||
<div class="icon-name">电话</div>
|
||
<div class="icon-size">32x32 px | #FFFFFF</div>
|
||
<a href="https://remixicon.com/icon/phone-line" class="btn" target="_blank">下载</a>
|
||
</div>
|
||
<div class="icon-card">
|
||
<div class="icon-preview">🧭</div>
|
||
<div class="icon-name">导航</div>
|
||
<div class="icon-size">32x32 px | #FFFFFF</div>
|
||
<a href="https://remixicon.com/icon/compass-line" class="btn" target="_blank">下载</a>
|
||
</div>
|
||
<div class="icon-card">
|
||
<div class="icon-preview">🕐</div>
|
||
<div class="icon-name">时间</div>
|
||
<div class="icon-size">24x24 px | #64748B</div>
|
||
<a href="https://remixicon.com/icon/time-line" class="btn" target="_blank">下载</a>
|
||
</div>
|
||
|
||
<!-- 优惠券图标 -->
|
||
<div class="icon-card">
|
||
<div class="icon-preview">✓</div>
|
||
<div class="icon-name">已使用</div>
|
||
<div class="icon-size">24x24 px | #10B981</div>
|
||
<a href="https://remixicon.com/icon/check-line" class="btn" target="_blank">下载</a>
|
||
</div>
|
||
<div class="icon-card">
|
||
<div class="icon-preview">✕</div>
|
||
<div class="icon-name">已过期</div>
|
||
<div class="icon-size">24x24 px | #94A3B8</div>
|
||
<a href="https://remixicon.com/icon/close-line" class="btn" target="_blank">下载</a>
|
||
</div>
|
||
<div class="icon-card">
|
||
<div class="icon-preview">📭</div>
|
||
<div class="icon-name">空状态</div>
|
||
<div class="icon-size">80x80 px | #CBD5E1</div>
|
||
<a href="https://remixicon.com/icon/inbox-line" class="btn" target="_blank">下载</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="download-all">
|
||
<p style="color: #64748B; margin-bottom: 20px;">
|
||
💡 提示：所有图标来自 RemixIcon，完全免费开源
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|