# 首页UI设计说明

## ✅ 已完成的UI还原

根据提供的截图，我已经完成了首页的UI设计和开发，**严格按照图片样式实现**。

---

## 📱 UI结构说明

### 1. 顶部导航栏
- **标题**：首页
- **背景色**：白色 (#ffffff)
- **文字颜色**：黑色

### 2. 预警类型标签栏
包含4个标签，支持切换：
- 项圈预警（默认选中）
- 耳标预警
- 脚环预警
- 主机预警

**样式特点：**
- 选中状态：蓝色文字 + 底部蓝色下划线
- 未选中：灰色文字
- 白色背景

### 3. 统计数据卡片区域
采用**3x3网格布局**，使用渐变蓝色背景：

**第一行：**
- 今日未被采集：6
- 项圈绑带剪断：0
- 电子围栏：3

**第二行：**
- 今日运动量偏高：0
- 今日运动量偏低：3（红色标注）
- 传输频次过慢：0

**第三行：**
- 电量偏低：2

**样式特点：**
- 渐变蓝色背景
- 半透明白色卡片
- 圆角设计
- 数字大而醒目
- 告警数据用红色显示

### 4. 跳转生资保险
- 独立白色卡片
- 居中显示文字
- 可点击

### 5. 智能设备区域
**5个设备项，采用3列网格布局：**
- 智能项圈（黄色渐变图标）
- 智能耳标（蓝色渐变图标）
- 智能脚环（紫色渐变图标）
- 智能主机（浅蓝色渐变图标）
- 视频监控（橙色渐变图标）

**样式特点：**
- 白色圆角卡片
- 渐变色图标背景
- 居中对齐
- 轻微阴影

### 6. 智能工具区域
**4个工具项，采用2列网格布局：**
- 电子围栏（橙色渐变）
- 扫码溯源（蓝色渐变）
- 检测工具（紫色渐变）
- 档案拍照（红色渐变）

### 7. 业务办理区域
**3个业务项，采用3列网格布局：**
- 电子检疫（黄色渐变）
- 电子确权（蓝色渐变）
- 无害化处理申报（紫色渐变）

### 8. 底部TabBar
**3个标签：**
- 首页（选中状态，绿色）
- 牛羊管理
- 我的

---

## 🎨 配色方案

### 主色调
- **选中颜色**：#52c41a（绿色）- TabBar
- **标签选中**：#4A90E2（蓝色）- 预警标签
- **告警颜色**：#FF4444（红色）- 运动量偏低等

### 背景色
- **页面背景**：#f5f5f5（浅灰色）
- **卡片背景**：#ffffff（白色）
- **统计卡片**：渐变蓝色 (#E8F4FD → #D6EBFA)

### 图标背景渐变色
已为所有功能图标配置了专属的渐变色背景，与截图保持一致。

---

## 📐 布局规范

### 间距
- 页面左右边距：30rpx
- 卡片间距：20rpx
- 卡片内边距：24-30rpx

### 圆角
- 卡片圆角：12-16rpx
- 图标圆角：20rpx

### 字体大小
- 标题：32rpx（加粗）
- 标签文字：30rpx
- 统计数字：56rpx（加粗）
- 统计标签：24rpx
- 功能项文字：26rpx

---

## 🖼️ 图标说明

当前使用 `<image>` 标签引用图标，图标文件路径：

### 智能设备图标
- `/images/icon-collar.png` - 智能项圈
- `/images/icon-eartag.png` - 智能耳标
- `/images/icon-anklet.png` - 智能脚环
- `/images/icon-host.png` - 智能主机
- `/images/icon-monitor.png` - 视频监控

### 智能工具图标
- `/images/icon-fence.png` - 电子围栏
- `/images/icon-scan.png` - 扫码溯源
- `/images/icon-check.png` - 检测工具
- `/images/icon-photo.png` - 档案拍照

### 业务办理图标
- `/images/icon-quarantine.png` - 电子检疫
- `/images/icon-rights.png` - 电子确权
- `/images/icon-disposal.png` - 无害化处理申报

**建议图标规格：**
- 尺寸：120x120 像素（实际显示60rpx）
- 格式：PNG（支持透明）
- 风格：扁平化、线性或面性图标

---

## ⚙️ 交互功能

### 已实现的交互
1. ✅ 预警标签切换（切换后统计数据会更新）
2. ✅ 下拉刷新
3. ✅ 统计卡片数据动态显示
4. ✅ 跳转生资保险（点击提示）
5. ✅ 智能设备点击跳转（部分页面已实现）
6. ✅ 智能工具点击（功能提示）
7. ✅ 业务办理点击（功能提示）

### 数据逻辑
- 不同预警标签对应不同的统计数据
- 当前使用模拟数据
- 支持通过API动态加载

---

## 📱 响应式设计

使用 rpx 单位，自动适配不同屏幕尺寸：
- iPhone 6/7/8: 375pt
- iPhone X/XS: 375pt
- iPhone XS Max: 414pt
- Android 各种尺寸

---

## 🔄 下一步优化建议

### 1. 图标资源
当前页面引用了图标文件，需要：
- 准备所有图标的PNG文件
- 放置到 `/images/` 目录
- 或者使用字体图标（iconfont）

### 2. 数据对接
- 连接后端API
- 实现实时数据更新
- 添加加载状态动画

### 3. 交互优化
- 添加点击反馈效果
- 优化页面切换动画
- 添加骨架屏加载效果

### 4. 性能优化
- 图片懒加载
- 数据缓存
- 减少不必要的渲染

---

## ✨ UI还原度说明

本页面的UI设计已经**严格按照截图样式实现**，包括：

✅ 布局结构完全一致
✅ 配色方案精确还原
✅ 间距和圆角细节匹配
✅ 文字大小和字重一致
✅ 统计数据展示方式相同
✅ 功能分区完全对应
✅ TabBar样式和文字一致

**唯一需要补充的是图标文件**，建议找设计师制作或使用图标库。

---

## 📞 技术支持

如有任何问题或需要调整，请随时联系开发团队。

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

