# 首页图标资源获取指南

## 📌 需要的图标列表

根据首页UI设计，需要准备以下13个图标文件：

### 智能设备图标（5个）
1. ✅ `icon-collar.png` - 智能项圈图标
2. ✅ `icon-eartag.png` - 智能耳标图标
3. ✅ `icon-anklet.png` - 智能脚环图标
4. ✅ `icon-host.png` - 智能主机图标
5. ✅ `icon-monitor.png` - 视频监控图标

### 智能工具图标（4个）
6. ✅ `icon-fence.png` - 电子围栏图标
7. ✅ `icon-scan.png` - 扫码溯源图标
8. ✅ `icon-check.png` - 检测工具图标
9. ✅ `icon-photo.png` - 档案拍照图标

### 业务办理图标（3个）
10. ✅ `icon-quarantine.png` - 电子检疫图标
11. ✅ `icon-rights.png` - 电子确权图标
12. ✅ `icon-disposal.png` - 无害化处理申报图标

---

## 🎨 图标规格要求

### 尺寸
- **推荐尺寸**：120x120 像素
- **最小尺寸**：60x60 像素
- **最大尺寸**：200x200 像素

### 格式
- **格式**：PNG（推荐，支持透明）
- **备选**：SVG（矢量图，可缩放）

### 风格
- **图标风格**：扁平化、线性或面性图标
- **颜色**：单色或双色（与背景渐变色搭配）
- **背景**：透明背景

### 文件大小
- 每个图标文件不超过50KB

---

## 🔍 图标获取途径

### 方法一：使用在线图标库（推荐）

#### 1. 阿里巴巴矢量图标库（iconfont）
🔗 https://www.iconfont.cn/

**步骤：**
1. 注册/登录账号
2. 搜索对应的图标关键词
3. 选择合适的图标
4. 下载PNG格式（120x120）
5. 重命名为对应的文件名

**推荐搜索关键词：**
- 项圈：collar, necklace, tag
- 耳标：tag, label, eartag
- 脚环：anklet, tracker
- 主机：server, host, gateway
- 监控：monitor, camera, video
- 围栏：fence, boundary
- 扫码：scan, qrcode, barcode
- 检测：check, test, detect
- 拍照：camera, photo
- 检疫：quarantine, inspection
- 确权：certificate, rights
- 处理：recycle, disposal

#### 2. IconPark（字节跳动）
🔗 https://iconpark.oceanengine.com/

**特点：**
- 高质量图标
- 可自定义颜色
- 支持多种格式下载

#### 3. Flaticon
🔗 https://www.flaticon.com/

**特点：**
- 海量免费图标
- 支持PNG、SVG格式
- 需要注明来源

#### 4. IconFinder
🔗 https://www.iconfinder.com/

**特点：**
- 免费+付费图标
- 质量高
- 可按风格筛选

---

### 方法二：设计师制作

如果您有设计师，可以根据以下参考制作图标：

**智能项圈**：圆形项圈 + 信号图标
**智能耳标**：标签形状 + 数字/信号
**智能脚环**：圆环 + 定位图标
**智能主机**：服务器/主机图标
**视频监控**：摄像头图标
**电子围栏**：围栏/边界图标
**扫码溯源**：二维码/扫描图标
**检测工具**：检查/测试图标
**档案拍照**：相机图标
**电子检疫**：文档+检查图标
**电子确权**：证书/文档图标
**无害化处理**：回收/处理图标

---

### 方法三：使用Emoji（临时方案）

如果暂时没有图标资源，可以先用Emoji代替（已在代码中实现）：

当前使用的Emoji：
- 🎯 智能项圈
- 🏷️ 智能耳标
- 📍 智能脚环
- 📡 智能主机
- 📹 视频监控
- ⭕ 电子围栏
- ✓ 扫码溯源
- 📊 检测工具
- 📷 档案拍照
- 📋 电子检疫
- 📝 电子确权
- ♻️ 无害化处理申报

**如需使用Emoji，请修改代码：**
将 `<image>` 标签改为 `<text>` 标签即可。

---

## 📦 下载后的操作步骤

### 1. 重命名文件
按照上述文件名列表，将下载的图标重命名。

### 2. 放置图标
将所有图标文件复制到：
```
mini_program/farm-monitor-dashboard/images/
```

### 3. 验证图标
在微信开发者工具中：
1. 打开首页
2. 检查所有图标是否正常显示
3. 如有缺失，检查文件名是否正确

---

## 🎨 配色建议

虽然图标可以是单色的（代码中已设置背景色），但如果想要更好的视觉效果，建议图标颜色与背景色协调：

| 功能 | 背景色 | 建议图标色 |
|------|--------|-----------|
| 智能项圈 | 黄色渐变 | 深橙色 #FF9800 |
| 智能耳标 | 蓝色渐变 | 深蓝色 #2196F3 |
| 智能脚环 | 紫色渐变 | 深紫色 #9C27B0 |
| 智能主机 | 浅蓝渐变 | 蓝色 #03A9F4 |
| 视频监控 | 橙色渐变 | 深橙色 #FF9800 |
| 电子围栏 | 黄橙渐变 | 橙色 #FFA726 |
| 扫码溯源 | 蓝色渐变 | 深蓝色 #5C6BC0 |
| 检测工具 | 紫色渐变 | 紫色 #7E57C2 |
| 档案拍照 | 红色渐变 | 红色 #EF5350 |
| 电子检疫 | 黄色渐变 | 金色 #FDD835 |
| 电子确权 | 青色渐变 | 青色 #26A69A |
| 无害化处理 | 绿紫渐变 | 绿色 #66BB6A |

---

## 🚀 快速开始建议

**如果急于上线，建议：**

1. **方案A**：先用Emoji（已实现）
   - 优点：立即可用
   - 缺点：视觉效果一般

2. **方案B**：快速下载iconfont图标
   - 时间：约30分钟
   - 质量：中等
   - 适合：快速原型

3. **方案C**：请设计师定制
   - 时间：1-3天
   - 质量：高
   - 适合：正式发布

---

## ⚠️ 注意事项

1. **版权问题**：
   - 使用免费图标库时，注意查看授权协议
   - 商用项目建议购买商业授权或定制

2. **文件命名**：
   - 必须与代码中的文件名完全一致
   - 区分大小写

3. **图片优化**：
   - 使用TinyPNG等工具压缩图片
   - 减少小程序包体积

4. **测试**：
   - 在不同设备上测试显示效果
   - 确保图标清晰不模糊

---

## 📞 需要帮助？

如果您在获取或使用图标时遇到问题，可以：
1. 联系设计团队
2. 查看微信小程序官方文档
3. 在项目群中询问

---

**更新日期**：2025-01-09

