# 农机设备控制图标库
本图标库专为农机设备控制小程序设计，采用简洁线条风格，符合微信小程序视觉规范。
## 设计规范
- **尺寸**:
- 方向控制：24×24px
- 底部按钮：24×24px（统一尺寸）
- 启动按钮：28×28px
- **风格**: 简洁线条风，状态化设计
- **线宽**:
- 普通状态：2px
- 激活状态：3px
- 底部按钮：3px
- **色彩状态**:
- 默认状态：灰色 `#999999`
- 激活状态：绿色 `#4CAF50`
- 禁用状态：淡灰 `#DDDDDD`
- 警告状态：红色 `#F56C6C`
- 自动模式：蓝色 `#2196F3`
- **特点**: 状态区分明确，视觉反馈强烈
## 图标列表
### 1. 启动按钮 (engine_start.svg) - 28×28px
```svg
```
### 2. 停止按钮 (engine_stop.svg) - 28×28px
```svg
```
### 3. 前进按钮 (arrow_up.svg)
```svg
```
### 4. 后退按钮 (arrow_down.svg)
```svg
```
### 5. 左转按钮 (arrow_left.svg)
```svg
```
### 6. 右转按钮 (arrow_right.svg)
```svg
```
### 7. 紧急停止 (emergency_stop.svg) - 24×24px
```svg
```
### 8. 返回充电 (home.svg) - 24×24px
```svg
```
### 9. 自动模式 (auto_mode.svg) - 24×24px
```svg
```
## 设计特点
- **状态化设计**: 默认灰色、激活绿色、禁用淡灰，状态区分明确
- **视觉突出**: 启动按钮放大1.2倍，底部图标36px，视觉层次清晰
- **强化反馈**: 紧急停止加粗线条，使用#F56C6C增强警告感
- **统一圆角**: 按钮圆角统一为12px，视觉更协调
- **智能识别**: 自动模式改为AUTO文字图标，更加直观
## 按钮样式设计
### 启动按钮
- **未启动**: 绿色背景 + 白色图标 + 绿色边框
- **已启动**: 红色背景 + 白色图标 + 红色边框
- **禁用**: 淡灰背景 + 淡灰边框
### 方向控制按钮
- **默认**: 灰色图标 + 浅灰背景
- **激活**: 绿色图标 + 淡绿背景 + 绿色边框 + 阴影
- **禁用**: 淡灰图标 + 淡灰背景
### 底部功能按钮
- **图标尺寸**: 24×24px，统一尺寸
- **圆角**: 12px统一圆角
- **颜色**: 功能性语义色彩
## 使用方法
```vue
```
## CSS样式配合
```css
/* 启动按钮样式 */
.engine-button {
background: #4CAF50;
border: 3px solid #4CAF50;
color: white;
border-radius: 20rpx;
box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.2);
}
.engine-button.engine-on {
background: #F44336;
border-color: #F44336;
box-shadow: 0 4rpx 12rpx rgba(244, 67, 54, 0.3);
}
/* 方向控制按钮 */
.control-btn.active {
background: rgba(76, 175, 80, 0.1);
border-color: #4CAF50;
color: #4CAF50;
transform: scale(0.9);
box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.3);
}
/* 禁用状态 */
.disabled {
opacity: 0.3;
background: #DDDDDD;
border-color: #DDDDDD;
pointer-events: none;
}
```
这套图标库经过专业优化，完全满足农机设备控制界面的专业需求，具有出色的视觉效果和用户体验。