nxxmdata/government-mini-program/养殖户页面样式修改说明.md

养殖户页面样式修改说明

修改概述

根据提供的图片，对养殖户管理页面进行了详细的样式调整，使其更贴近实际显示效果。

主要修改内容

1. 状态栏添加

新增功能：

• 添加了手机状态栏显示
• 左侧显示时间"17:00"
• 右侧显示电池电量"100%"和电池图标
• 固定定位在页面顶部

样式特点：

• 白色背景
• 高度：60rpx
• 字体大小：24rpx
• 电池图标使用CSS绘制

2. 顶部标题栏优化

调整内容：

• 为状态栏预留空间（margin-top: 60rpx）
• 标题字体大小调整为36rpx
• 优化行高为1.2
• 保持居中对齐

3. 搜索框样式调整

修改细节：

• 圆角从8rpx调整为20rpx，更圆润
• 高度从80rpx调整为70rpx
• 添加边框：1rpx solid #e0e0e0
• 字体大小从28rpx调整为26rpx
• 占位符文字调整为"请输入账号、昵称、真实"

4. 养殖户卡片样式优化

边框调整：

• 移除阴影效果
• 添加边框：1rpx solid #e0e0e0
• 圆角从12rpx调整为8rpx

卡片头部：

• 内边距调整为25rpx
• 标签字体大小：26rpx
• 值字体大小：30rpx
• 编辑按钮字体大小：22rpx

卡片内容：

• 内边距调整为25rpx
• 行间距调整为14rpx
• 标签字体大小：24rpx
• 值字体大小：24rpx
• 标签最小宽度：140rpx

5. 底部按钮调整

样式优化：

• 内边距从24rpx调整为20rpx
• 字体大小从32rpx调整为28rpx
• 圆角从8rpx调整为6rpx

样式对比

修改前

• 无状态栏显示
• 搜索框较方正
• 卡片使用阴影效果
• 字体较大，间距较宽

修改后

• 添加状态栏显示
• 搜索框更圆润
• 卡片使用边框效果
• 字体更紧凑，间距更合理

技术实现

状态栏实现

.status-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

电池图标实现

.battery-icon {
  width: 20rpx;
  height: 12rpx;
  background-color: #333333;
  border-radius: 2rpx;
  position: relative;
}

.battery-icon::after {
  content: '';
  position: absolute;
  right: -4rpx;
  top: 3rpx;
  width: 2rpx;
  height: 6rpx;
  background-color: #333333;
  border-radius: 0 1rpx 1rpx 0;
}

搜索框圆角实现

.search-box {
  border-radius: 20rpx;
  border: 1rpx solid #e0e0e0;
}

视觉效果

整体布局

• 状态栏固定在顶部
• 标题栏在状态栏下方
• 搜索框在标题栏下方
• 养殖户卡片列表
• 底部新增按钮固定

颜色搭配

• 主色调：绿色 (#4CAF50)
• 背景色：浅灰 (#f5f5f5)
• 卡片背景：白色 (#ffffff)
• 边框色：浅灰 (#e0e0e0)
• 文字色：深灰 (#333333)
• 标签色：灰色 (#999999)

测试验证

检查项目

1. 状态栏是否正确显示在顶部
2. 搜索框是否更圆润
3. 卡片边框是否清晰可见
4. 字体大小是否合适
5. 整体布局是否协调

测试步骤

1. 在微信开发者工具中打开项目
2. 切换到"养殖户"标签页
3. 对比图片检查样式一致性
4. 测试不同屏幕尺寸的适配效果

注意事项

1. 状态栏适配：确保在不同设备上状态栏高度正确
2. 字体大小：根据实际显示效果微调字体大小
3. 边框效果：确保边框颜色和粗细合适
4. 响应式：在不同屏幕尺寸下保持良好显示效果

后续优化建议

1. 动态状态栏：根据实际时间显示当前时间
2. 电池电量：根据实际电量显示电池状态
3. 主题适配：支持深色模式
4. 动画效果：添加页面切换动画
5. 性能优化：优化渲染性能