From af4d70ea507f283c3bda5d60cdcd96ab1d8c3765 Mon Sep 17 00:00:00 2001
From: mjz <2286101414@qq.com>
Date: Mon, 29 May 2023 22:47:21 +0800
Subject: [PATCH] mjz update
---
docs/10.文档/10.快速开始/10.介绍.md | 4 +-
.../10.文档/20.基础元素/80.进度条.md | 132 +++++++++++++++++-
2 files changed, 129 insertions(+), 7 deletions(-)
diff --git a/docs/10.文档/10.快速开始/10.介绍.md b/docs/10.文档/10.快速开始/10.介绍.md
index dc26616..44509ad 100644
--- a/docs/10.文档/10.快速开始/10.介绍.md
+++ b/docs/10.文档/10.快速开始/10.介绍.md
@@ -23,8 +23,8 @@ Color UI 我想大家都知晓吧，我就不过多阐述了，是 **文晓港**
文档左侧目录，基础元素、交互组件、插件扩展分别对应，Color UI 底部对应的三个大模块，而三个模块下二级目录，也分别对应三个页面里的模块，点击目录右侧会跳转到对应的页面。
-每一个页面，会分别将对应的代码块展示出来，部分对应的页面最下方点击**点此查看页面原代码**即可查看对应页面的完整代码。
+在查看文档的同时，可以根据右侧预览图对比当前查看模块的预览效果
### 视图/目录 切换
-点击h5预览模板左上角的切换视图，可以切换目录/视图
+点击h5预览模板左上角的切换视图，可以随心所欲切换目录/视图，方便快速定位需要查找的内容
diff --git a/docs/10.文档/20.基础元素/80.进度条.md b/docs/10.文档/20.基础元素/80.进度条.md
index c0a319f..7b00bae 100644
--- a/docs/10.文档/20.基础元素/80.进度条.md
+++ b/docs/10.文档/20.基础元素/80.进度条.md
@@ -5,10 +5,132 @@ permalink: /pages/basics/progress
article: false
---
-## 进度条
+父容器加上 `cu-progress`，该容器内放一个元素加上背景 `.bg-red|...`，设置样式 `width: '10%'`，10% 就是该进度条的所占比例。
-::: details 点此查看页面源代码
-页面位置：`/pages/basics/progress`
-```vue
+子容器内的文字会展示在比例中间，进度条展示的时候，作者已经封装好了动画样式，因此 `width` 属性，配合动态变量即可做到好看的动画效果
+
+## 进度条形状
+
+> css 代码
+```css
+.cu-progress 默认
+.cu-progress round 圆
+.cu-progress radius 椭圆
```
-:::
\ No newline at end of file
+
+> 演示代码
+```vue
+
+ 61.8%
+
+
+ 61.8%
+
+
+ 61.8%
+
+
+
+```
+
+## 进度条尺寸
+
+> css 代码
+```css
+.cu-progress 默认
+.cu-progress sm 小
+.cu-progress xs 较小
+```
+
+> 演示代码
+```vue
+
+
+
+
+
+
+
+
+
+
+// 以下js代码参照 进度条形状 演示代码js
+```
+
+## 进度条颜色
+
+子容器加上 `.bg-red|...`
+
+> 演示代码
+```vue
+
+
+
+```
+
+## 进度条条纹
+
+父容器加上 `striped` 属性，进度条就会以条纹形式展示。
+
+再加上 `active`，进度条纹便以动画形式展示。
+
+> 演示代码
+```vue
+
+
+
+
+
+
+
+
+```
+
+## 进度条比列
+
+子容器，多个元素设置不同的宽度即可
+
+> 演示代码
+```vue
+
+ 30%
+ 45%
+ 25%
+
+```
+
+## 进度条布局
+
+用flex布局，自定义右侧内容
+
+> 演示代码
+```vue
+
+
+
+
+
+
+
+
+
+
+ 80%
+
+```
\ No newline at end of file