update progress

src/demo/progress.vue

@@ -3,12 +3,12 @@
         <nut-demoheader 
         :name="$route.name"
         ></nut-demoheader>
-        <h5>默认用法</h5>
-        <nut-progress percent="15" />
-        <h5>设置高度和颜色</h5>
-        <nut-progress height="0.15rem" color="#F54C12" />
-        <h5>显示进度数</h5>
-        <nut-progress percent="15" :showText="true" />
+        <p>默认用法</p>
+        <nut-progress percent="15" height="10px"/>
+        <p>设置高度和颜色</p>
+        <nut-progress height="18px" color="#33C3F0" percent="23" />
+        <p>内联显示进度数</p>
+        <nut-progress percent="20" showText="in" height="20px" />
     </div>
 </template>
 

src/package/progress/src/progress.vue

@@ -26,7 +26,7 @@ export default {
         },
         showText: {
             type: String,
-            default: 'in'
+            default: 'out'
         }
     },
     computed: {
@@ -50,6 +50,9 @@ export default {
 }
 </script>
 <style lang="scss">
+.nut-progress{
+    position: relative;
+}
 .nut-progress-cont{
     border-radius: 100px;
     background-color: #ebeef5;
@@ -74,9 +77,13 @@ export default {
     }
 }
 .nut-progress-out{
-    margin-right: 50px;
+    margin-right: 38px;
     &+.nut-progress-text{
-        width: 50px;
+        width: 31px;
+        position: absolute;
+        right: 0;
+        top: 0;
+        color: #666;
     }
 }
 </style>

src/view/progress.vue

@@ -13,15 +13,62 @@ height='10px' />" />
         </div>
         <h6>设置高度和颜色</h6>
         <nut-codebox code="<nut-progress 
-height='10px' 
-color='#F54C12' />" />
+height='18px' 
+color='#33C3F0' />" />
         <div class="cont">
-          <nut-progress height="10px" color="#F54C12" percent="23" />
+          <nut-progress height="18px" color="#33C3F0" percent="23" />
         </div>
-        <h6>显示进度数</h6>
-        <nut-codebox code="<nut-progress height='0.25rem' percent='20' showText='out' />" />
+        <h6>内联显示进度数</h6>
+        <nut-codebox code="<nut-progress 
+height='0.25rem' 
+percent='20' 
+showText='in' />" />
         <div class="cont">
-          <nut-progress percent="20" showText="out" height="20px" />
+          <nut-progress percent="20" showText="in" height="20px" />
+        </div>
+        <h5>Props</h5>
+        <div class="tbl-wrapper">
+            <table class="u-full-width">
+              <thead>
+                <tr>
+                  <th>参数</th>
+                  <th>说明</th>
+                  <th>类型</th>
+                  <th>默认值</th>
+                  <th>可选值</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>percent</td>
+                  <td>百分比</td>
+                  <td>String, Number</td>
+                  <td>0</td>
+                  <td>--</td>
+                </tr>
+                <tr>
+                  <td>color</td>
+                  <td>背景色</td>
+                  <td>String</td>
+                  <td>#f23030</td>
+                  <td>--</td>
+                </tr>
+                <tr>
+                  <td>height</td>
+                  <td>高度</td>
+                  <td>String</td>
+                  <td>.06rem</td>
+                  <td>--</td>
+                </tr>
+                <tr>
+                  <td>showText</td>
+                  <td>显示百分比的位置</td>
+                  <td>String</td>
+                  <td>out</td>
+                  <td>--</td>
+                </tr>
+              </tbody>
+            </table>
         </div>
     </div>
 </template>