peixue-dev/Archive/peidu-temp-files/docs/[一次性]家长端首页按钮图标替换完成-2026-01-26.md

3.7 KiB
Raw Blame History

家长端首页按钮图标替换完成

时间: 2026-01-26
状态: 已完成


📋 任务说明

将家长端首页的功能按钮图标替换为新的图片文件。


🎯 实施内容

1. 图标文件位置

源文件位置:

D:\project\peixu\peidu\uniapp\button\

目标位置:

D:\project\peixu\peidu\uniapp\src\static\button\

2. 图标文件列表

已复制的图标文件共10个

  1. 陪伴员.jpg
  2. 暑假营.jpg
  3. 测评师.jpg
  4. 规划师.jpg
  5. 家长学院.jpg
  6. 一对一陪伴.jpg
  7. 研学活动.jpg
  8. 专项突破.jpg
  9. 兴趣培养.jpg
  10. 线上督学.jpg

3. 代码中的图标路径

文件: peidu/uniapp/src/pages/index/components/UserHome.vue

图标配置:

functionIcons: [
  // 第一行
  { id: 1, icon: '/static/button/陪伴员.jpg', label: '陪伴员', path: '/pages/teacher/list' },
  { id: 2, icon: '/static/button/暑假营.jpg', label: '暑假营', path: '/activity-package/pages/camp/list' },
  { id: 3, icon: '/static/button/测评师.jpg', label: '测评师', path: '/service-package/pages/assessment/index' },
  { id: 4, icon: '/static/button/规划师.jpg', label: '成长规划师', path: '/service-package/pages/planning/index' },
  { id: 5, icon: '/static/button/家长学院.jpg', label: '家长学院', path: '/activity-package/pages/academy/index' },
  // 第二行
  { id: 6, icon: '/static/button/一对一陪伴.jpg', label: '一对一陪伴', path: '/pages/service/list', params: { category: '基准式陪伴' } },
  { id: 7, icon: '/static/button/研学活动.jpg', label: '研学活动', path: '/activity-package/pages/study-tour/category' },
  { id: 8, icon: '/static/button/专项突破.jpg', label: '专项突破', path: '/service-package/pages/special/list' },
  { id: 9, icon: '/static/button/兴趣培养.jpg', label: '兴趣培养', path: '/activity-package/pages/interest/category' },
  { id: 10, icon: '/static/button/线上督学.jpg', label: '线上督学', path: '/activity-package/pages/supervision/category' }
]

完成状态

  • 创建 static/button/ 目录
  • 复制所有图标文件到目标位置
  • 验证文件完整性10个文件全部到位
  • 代码中的路径已正确配置

🧪 测试建议

1. 清除缓存重新编译

# 进入uniapp目录
cd peidu/uniapp

# 清除缓存
npm run clean

# 重新编译
npm run dev:mp-weixin

2. 微信开发者工具

  1. 打开微信开发者工具
  2. 清除缓存:工具 → 清除缓存 → 清除全部缓存
  3. 重新编译:编译 → 重新编译
  4. 查看家长端首页,确认按钮图标显示正常

3. 检查要点

  • 10个按钮图标是否全部显示
  • 图标是否清晰(不模糊)
  • 图标尺寸是否合适
  • 点击按钮是否能正常跳转

📝 注意事项

  1. 图标尺寸: 建议图标尺寸为 200x200px 或更高,保证清晰度
  2. 文件格式: 当前使用 .jpg 格式,如需透明背景可改为 .png
  3. 路径规范: 使用 /static/ 开头的绝对路径,确保在各端都能正确加载

🎨 按钮布局

家长端首页按钮采用 2行×5列 的网格布局:

第一行:
[陪伴员] [暑假营] [测评师] [成长规划师] [家长学院]

第二行:
[一对一陪伴] [研学活动] [专项突破] [兴趣培养] [线上督学]

📌 相关文件

  • 图标源文件:peidu/uniapp/button/
  • 图标目标位置:peidu/uniapp/src/static/button/
  • 首页组件:peidu/uniapp/src/pages/index/components/UserHome.vue

完成时间: 2026-01-26 16:33