# mui-course-alipay

**Repository Path**: geeksss/mui-course-alipay

## Basic Information

- **Project Name**: mui-course-alipay
- **Description**: 《轻巧、漂亮的前端开源框架-MUI》系列视频课程演示案例，仿支付宝APP布局。
- **Primary Language**: HTML
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2023-05-27
- **Last Updated**: 2025-09-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: mui, HTML

## README

### 仓库介绍
《轻巧、漂亮的前端开源框架-MUI》系列视频课程演示案例，仿支付宝APP布局。

### 相关说明
因视频录制于2018年05月，已过5年之久，故而代码可能存在差异。

### 课程大纲
- 课程介绍：
    - 01 课程介绍 (00:05:58)
    - 02 HBuilder (00:08:29)
    - 03 基础布局+真机调试 (00:09:34)
- 常用组件：
    - 04 Icon 图标 (00:12:14)
    - 05 Badge 数字角标 (00:03:24)
    - 06 Button 按钮 (00:14:14)
    - 07 Switch 开关 (00:12:19)
    - 08 Dialog 消息框 (00:15:16)
    - 09 Input 输入表单 (00:10:17)
    - 10 单选和多选 (00:13:45)
    - 11 NumBox 数字输入框 (07:25)
    - 12 Range 滑块 (00:04:49)
    - 13 CardView 卡片视图 (00:11:18)
    - 14 List 列表 (00:21:36)
    - 15 Accoridion 折叠面板 (00:03:58)
    - 16 弹出菜单 操作表 (00:11:50)
    - 17 Slide 轮播组件 (00:12:06)
    - 18 Grid 栅格系统 (00:08:41)
    - 19 OffCanvas 侧滑菜单 (00:05:13)
    - 20 Tab 选项卡 Scroll 滚动 (00:10:24)
    - 21 下拉刷新 上拉加载 (00:12:10)
    - 22 窗口管理 (00:11:02)
- 演示案例（仿支付宝APP页面）：
    - 23 支付宝 01 引导页 (00:11:29)
    - 24 支付宝 02 主页 上 (00:25:28)
    - 25 支付宝 03 主页 下 (00:23:29)
    - 26 支付宝 04 沉浸式 (00:02:21)
    - 27 支付宝 05 朋友 (00:20:12)
    - 28 支付宝 06 窗口切换 (00:03:30)

### 视频地址
- [哔哩哔哩](https://space.bilibili.com/429606170)

### 墨菲安全
[![Security Status](https://www.murphysec.com/platform3/v31/badge/1672809118875860992.svg)](https://www.murphysec.com/console/report/1672809118594842624/1672809118875860992)