mjz update

docs/10.文档/10.快速开始/10.介绍.md

@@ -23,8 +23,8 @@ Color UI 我想大家都知晓吧，我就不过多阐述了，是 **文晓港**
 
 文档左侧目录，基础元素、交互组件、插件扩展分别对应，Color UI 底部对应的三个大模块，而三个模块下二级目录，也分别对应三个页面里的模块，点击目录右侧会跳转到对应的页面。
 
-每一个页面，会分别将对应的代码块展示出来，部分对应的页面最下方点击**点此查看页面原代码**即可查看对应页面的完整代码。
+在查看文档的同时，可以根据右侧预览图对比当前查看模块的预览效果
 
 ### 视图/目录 切换
 
-点击h5预览模板左上角的切换视图，可以切换目录/视图
+点击h5预览模板左上角的切换视图，可以随心所欲切换目录/视图，方便快速定位需要查找的内容

docs/10.文档/20.基础元素/80.进度条.md

@@ -5,10 +5,132 @@ permalink: /pages/basics/progress
 article: false
 ---
 
-## 进度条
+父容器加上 `cu-progress`，该容器内放一个元素加上背景 `.bg-red|...`，设置样式 `width: '10%'`，10% 就是该进度条的所占比例。
 
-::: details 点此查看页面源代码
+子容器内的文字会展示在比例中间，进度条展示的时候，作者已经封装好了动画样式，因此 `width` 属性，配合动态变量即可做到好看的动画效果
-页面位置：`/pages/basics/progress`
+
-```vue
+## 进度条形状
+
+> css 代码
+```css
+.cu-progress  默认　
+.cu-progress round  圆
+.cu-progress radius  椭圆
+```
+
+> 演示代码
+```vue
+<view class="cu-progress">
+    <view class="bg-red" :style="[{ width:loading?'92.8%':''}]">61.8%</view>
+</view>
+<view class="cu-progress radius margin-top">
+    <view class="bg-red" :style="[{ width:loading?'61.8%':''}]">61.8%</view>
+</view>
+<view class="cu-progress round margin-top">
+    <view class="bg-red" :style="[{ width:loading?'61.8%':''}]">61.8%</view>
+</view>
+
+<script>
+	export default {
+		data() {
+			return {
+				loading: false,
+			};
+		},
+		onLoad: function() {
+			let that = this;
+			setTimeout(function() {
+				that.loading = true
+			}, 500)
+		},
+		methods: {
+		}
+	}
+</script>
+```
+
+## 进度条尺寸
+
+> css 代码
+```css
+.cu-progress     默认  
+.cu-progress sm  小    
+.cu-progress xs  较小 
+```
+
+> 演示代码
+```vue
+<view class="cu-progress round">
+    <view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
+</view>
+<view class="cu-progress round margin-top sm">
+    <view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
+</view>
+<view class="cu-progress round margin-top xs">
+    <view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
+</view>
+
+// 以下js代码参照 进度条形状 演示代码js
+```
+
+## 进度条颜色
+
+子容器加上 `.bg-red|...`
+
+> 演示代码
+```vue
+<view class="cu-progress round">
+    <view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
+</view>
+```
+
+## 进度条条纹
+
+父容器加上 `striped` 属性，进度条就会以条纹形式展示。
+
+再加上 `active`，进度条纹便以动画形式展示。
+
+> 演示代码
+```vue
+<!-- 静态条纹 -->
+<view class="cu-progress round striped">
+    <view class="bg-green" :style="[{ width:loading?'60%':''}]"></view>
+</view>
+<!-- 动画条纹 -->
+<view class="cu-progress round striped active">
+    <view class="bg-black" :style="[{ width:loading?'40%':''}]"></view>
+</view>
+```
+
+## 进度条比列
+
+子容器，多个元素设置不同的宽度即可
+
+> 演示代码
+```vue
+<view class="cu-progress radius striped active">
+    <view class="bg-red" :style="[{ width:loading?'30%':''}]">30%</view>
+    <view class="bg-olive" :style="[{ width:loading?'45%':''}]">45%</view>
+    <view class="bg-cyan" :style="[{ width:loading?'25%':''}]">25%</view>
+</view>
+```
+
+## 进度条布局
+
+用flex布局，自定义右侧内容
+
+> 演示代码
+```vue
+<view class="flex">
+    <view class="cu-progress round">
+        <view class="bg-green" :style="[{ width:loading?'100%':''}]"></view>
+    </view>
+    <text class="cuIcon-roundcheckfill text-green margin-left-sm"></text>
+</view>
+<view class="flex margin-top">
+    <view class="cu-progress round">
+        <view class="bg-green" :style="[{ width:loading?'80%':''}]"></view>
+    </view>
+    <text class="margin-left">80%</text>
+</view>
 ```
-:::