# tutor-app

**Repository Path**: manzhenhua/tutor-app

## Basic Information

- **Project Name**: tutor-app
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-24
- **Last Updated**: 2025-09-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 英语导师列表小程序

这是一个基于 uniapp 框架开发的英语导师列表小程序，参考了现代移动应用的设计风格。

## 功能特性

### 🎯 主要功能

- **导师列表展示**: 展示英语导师的基本信息，包括头像、姓名、国家、价格等
- **筛选功能**: 支持按价格、导师来源、语言等条件筛选
- **收藏功能**: 可以收藏喜欢的导师
- **排序功能**: 支持按相关性排序
- **底部导航**: 包含搜索、消息、日程、练习四个主要功能入口

### 🎨 设计特色

- **现代化 UI**: 采用简洁现代的设计风格
- **响应式布局**: 适配不同屏幕尺寸
- **渐变色彩**: 使用蓝色和粉色的渐变配色方案
- **卡片式设计**: 导师信息以卡片形式展示，信息层次清晰

## 页面结构

### 头部区域

- 语言选择器（英语）
- 主标题：寓教于乐: 36,834 位少儿英语导师
- 装饰性图标（课桌和椅子）

### 筛选器区域

- 四个筛选按钮：价格、导师来自、导师也会说、母语
- 收藏夹按钮
- 排序选项：按相关性排序

### 导师卡片

每个导师卡片包含：

- 头像（使用渐变背景和姓名缩写）
- 姓名和认证标识
- 国家旗帜和认证标记
- 标签（专业、星级导师等）
- 价格和课程时长
- 评分和评论数
- 个人简介
- 学生数量和语言能力
- 收藏按钮

### 底部导航

- 搜索 🔍
- 消息 💬
- 日程 📅
- 练习 💪

## 技术栈

- **框架**: uniapp
- **语言**: Vue.js
- **样式**: CSS3 (使用 rpx 单位适配多端)
- **图标**: Emoji 图标

## 项目结构

```
tutor_app/
├── pages/
│   └── index/
│       └── index.vue          # 主页面
├── static/
│   └── logo.png              # 项目logo
├── pages.json                # 页面配置
├── manifest.json             # 应用配置
├── main.js                   # 入口文件
├── App.vue                   # 应用根组件
└── uni.scss                  # 全局样式
```

## 开发说明

### 数据模型

```javascript
tutors: [
  {
    id: 1,
    name: "Martina Z.",
    country: "🇸🇰",
    price: 20,
    duration: "50 分钟课堂",
    status: "新加入导师",
    tags: ["专业"],
    bio: "个人简介...",
    students: 1,
    classes: 1,
    languages: ["英语 (C1)"],
    avatar: "/static/avatar1.jpg",
  },
];
```

### 样式特点

- 使用 rpx 单位确保多端适配
- 采用 flexbox 布局
- 使用 CSS 渐变和阴影效果
- 响应式设计

## 运行项目

1. 确保已安装 HBuilderX 或相关开发工具
2. 导入项目到开发工具
3. 选择运行到相应平台（微信小程序、H5、App 等）

## 自定义配置

### 修改导师数据

在 `pages/index/index.vue` 的 `data()` 中修改 `tutors` 数组

### 修改样式

在 `<style scoped>` 部分修改 CSS 样式

### 添加新功能

可以在 `methods` 中添加新的方法，并在模板中绑定事件

## 扩展建议

1. **添加搜索功能**: 实现导师搜索
2. **添加详情页**: 点击导师卡片跳转到详情页
3. **添加筛选弹窗**: 实现更复杂的筛选功能
4. **添加收藏功能**: 实现真正的收藏功能
5. **添加用户系统**: 登录注册功能
6. **添加预约功能**: 预约导师课程

## 注意事项

- 当前使用的是模拟数据，实际项目中需要连接后端 API
- 头像使用占位符，实际项目中需要真实的头像图片
- 部分功能（如收藏、筛选）需要进一步实现交互逻辑

## 许可证

MIT License