peixue-dev/peidu/uniapp/static/README.md

静态资源说明

📁 目录结构

static/
├── tabbar/          # 底部导航栏图标
├── images/          # 通用图片资源
├── icons/           # 图标资源
└── css/             # 全局样式

🎨 需要添加的图标文件

1. 底部导航栏图标 (tabbar/)

尺寸要求：81px × 81px（推荐）

需要的文件：

• home.png - 首页图标（未选中）
• home-active.png - 首页图标（选中）
• service.png - 服务图标（未选中）
• service-active.png - 服务图标（选中）
• order.png - 订单图标（未选中）
• order-active.png - 订单图标（选中）
• user.png - 我的图标（未选中）
• user-active.png - 我的图标（选中）

颜色建议：

• 未选中：灰色 (#999999)
• 选中：主题色 (#4a9b9f)

2. 通用图片 (images/)

需要的文件：

• empty.png - 空状态图片（300px × 300px）
• logo.png - 应用Logo
• avatar-default.jpg - 默认头像
• service-default.jpg - 默认服务图片
• banner-default.jpg - 默认轮播图

3. 图标资源 (icons/)

根据需要添加各种小图标

🚀 快速解决方案

方案1：使用占位图片（临时）

在开发阶段，可以先使用纯色占位图片：

1. 使用在线工具生成占位图：

   • https://placeholder.com/
   • https://via.placeholder.com/

2. 或者使用uni-app的图标字体代替

方案2：使用iconfont图标（推荐）

1. 访问 https://www.iconfont.cn/
2. 搜索并下载需要的图标
3. 放入对应目录

方案3：设计图标

使用设计工具（如Figma、Sketch）设计图标

📝 临时解决方案

如果暂时没有图标，可以修改pages.json使用文字代替：

{
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#4a9b9f",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
        // 暂时不设置iconPath
      }
    ]
  }
}

🎯 推荐的图标资源网站

1. iconfont - https://www.iconfont.cn/

   • 阿里巴巴矢量图标库
   • 免费、资源丰富

2. IconPark - https://iconpark.oceanengine.com/

   • 字节跳动图标库
   • 可自定义颜色

3. Flaticon - https://www.flaticon.com/

   • 国际图标库
   • 需要注册

4. Icons8 - https://icons8.com/

   • 多种风格图标
   • 部分免费

⚠️ 注意事项

1. 图片格式：推荐使用PNG格式（支持透明）
2. 图片大小：控制在100KB以内
3. 命名规范：使用小写字母和连字符
4. 路径引用：使用相对路径，不要以/开头

🔧 当前状态

• ✅ 目录已创建
• ⏳ 图标文件待添加
• ⏳ 图片资源待添加

📌 下一步操作

1. 准备图标文件
2. 放入对应目录
3. 重新编译项目
4. 测试显示效果