upd(price): 优化官网展示 demo

src/packages/__VUE/price/demo.vue

@@ -1,30 +1,35 @@
 <template>
   <div class="demo">
-    <h2>基本用法</h2>
+    <nut-cell-group title="基本用法 small normal large">
+      <nut-cell>
+        <nut-price :price="0" size="small" :need-symbol="true" :thousands="true" />
+      </nut-cell>
+      <nut-cell>
+        <nut-price :price="0" size="normal" :need-symbol="true" :thousands="true" />
+      </nut-cell>
+      <nut-cell>
+        <nut-price :price="0" size="large" :need-symbol="true" :thousands="true" />
+      </nut-cell>
+    </nut-cell-group>
+    <h2>不保留小数</h2>
     <nut-cell>
-      <nut-price :price="0" :need-symbol="false" :thousands="true" />
+      <nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" />
+    </nut-cell>
+    <h2>调整 symbol 符号位置</h2>
+    <nut-cell>
+      <nut-price :price="8888.01" position="after" symbol="元" size="normal" :need-symbol="true" :thousands="true" />
     </nut-cell>
     <h2>有人民币符号，无千位分隔</h2>
     <nut-cell>
-      <nut-price :price="10010.01" :need-symbol="true" :thousands="false" />
+      <nut-price :price="10010.01" size="normal" :need-symbol="true" :thousands="false" />
     </nut-cell>
     <h2>带人民币符号，有千位分隔，保留小数点后三位</h2>
     <nut-cell>
-      <nut-price
-        :price="15213.1221"
-        :decimal-digits="3"
-        :need-symbol="true"
-        :thousands="true"
-      />
+      <nut-price :price="15213.1221" size="normal" :decimal-digits="3" :need-symbol="true" :thousands="true" />
     </nut-cell>
     <h2>异步随机变更</h2>
     <nut-cell>
-      <nut-price
-        :price="price"
-        :decimal-digits="3"
-        :need-symbol="true"
-        :thousands="true"
-      />
+      <nut-price :price="price" size="normal" :decimal-digits="3" :need-symbol="true" :thousands="true" />
     </nut-cell>
   </div>
 </template>

src/packages/__VUE/price/doc.md

@@ -19,10 +19,21 @@ app.use(Price);
 ```
 
 
-### 基本用法
+### 基本用法 small normal large
 
 ``` html
-<nut-price :price="1010" :need-symbol="false" :thousands="true" />
+<nut-price :price="0" size="small" :need-symbol="false" :thousands="true" />
+<nut-price :price="0" size="normal" :need-symbol="false" :thousands="true" />
+<nut-price :price="0" size="large" :need-symbol="false" :thousands="true" />
+```
+
+### 不保留小数
+``` html
+<nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" />
+```
+### 调整 symbol 符号位置
+``` html
+<nut-price :price="8888.01" position="after" symbol="元" size="normal" :need-symbol="true" :thousands="true" />
 ```
 
 ### 有人民币符号，无千位分隔
@@ -55,12 +66,12 @@ setup() {
 
 ### Prop
 
-| 字段           | 说明                     | 类型    | 默认值 |
-|----------------|--------------------------|---------|--------|
-| price          | 价格数量                 | Number  | 0      |
-| need-symbol    | 是否需要加上 symbol 符号 | Boolean | true   |
-| symbol         | 符号类型                 | String  | &yen;  |
-| decimal-digits | 小数位位数               | Number  | 2      |
-| thousands      | 是否按照千分号形式显示   | Boolean | false  |
-| position      | 符号显示在(价格)前或者后(before、after)   | String | before  |
-| size      | 价格尺寸(large、normal、small)   | String | normal  |
+| 字段           | 说明                                    | 类型    | 默认值 |
+|----------------|-----------------------------------------|---------|--------|
+| price          | 价格数量                                | Number  | 0      |
+| need-symbol    | 是否需要加上 symbol 符号                | Boolean | true   |
+| symbol         | 符号类型                                | String  | &yen;  |
+| decimal-digits | 小数位位数                              | Number  | 2      |
+| thousands      | 是否按照千分号形式显示                  | Boolean | false  |
+| position       | 符号显示在(价格)前或者后(before、after) | String  | before |
+| size           | 价格尺寸(large、normal、small)          | String  | large |

src/packages/__VUE/price/index.taro.vue

@@ -57,7 +57,7 @@ export default create({
     },
     size: {
       type: String,
-      default: 'normal'
+      default: 'large'
     }
   },
 

src/packages/__VUE/price/index.vue

@@ -55,7 +55,7 @@ export default create({
     },
     size: {
       type: String,
-      default: 'normal'
+      default: 'large'
     }
   },
 

src/packages/styles/variables.scss

@@ -150,19 +150,19 @@ $shortpsd-error: rgba(242, 39, 12, 1) !default;
 $shortpsd-forget: rgba(128, 128, 128, 1) !default;
 
 //large price
-$price-symbol-big-size: 16px !default;
-$price-big-size: 30px !default;
+$price-symbol-big-size: 18px !default;
+$price-big-size: 24px !default;
 $price-decimal-big-size: 18px !default;
 
 //normal price
-$price-symbol-medium-size: 13px !default;
+$price-symbol-medium-size: 14px !default;
 $price-medium-size: 16px !default;
-$price-decimal-medium-size: 13px !default;
+$price-decimal-medium-size: 14px !default;
 
 // small price
-$price-symbol-small-size: 11px !default;
-$price-small-size: 14.2px !default;
-$price-decimal-small-size: 14.2px !default;
+$price-symbol-small-size: 10px !default;
+$price-small-size: 12px !default;
+$price-decimal-small-size: 10px !default;
 
 //avatar
 $avatar-square: 5px !default;

src/sites/mobile-taro/vue/src/base/pages/price/index.vue

@@ -1,20 +1,35 @@
 <template>
   <div class="demo">
-    <h2>基本用法&yen;</h2>
+    <nut-cell-group title="基本用法 small normal large">
+      <nut-cell>
+        <nut-price :price="0" size="small" :need-symbol="true" :thousands="true" />
+      </nut-cell>
+      <nut-cell>
+        <nut-price :price="0" size="normal" :need-symbol="true" :thousands="true" />
+      </nut-cell>
+      <nut-cell>
+        <nut-price :price="0" size="large" :need-symbol="true" :thousands="true" />
+      </nut-cell>
+    </nut-cell-group>
+    <h2>不保留小数</h2>
     <nut-cell>
-      <nut-price :price="1010" :need-symbol="false" :thousands="true" />
+      <nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" />
+    </nut-cell>
+    <h2>调整 symbol 符号位置</h2>
+    <nut-cell>
+      <nut-price :price="8888.01" position="after" symbol="元" size="normal" :need-symbol="true" :thousands="true" />
     </nut-cell>
     <h2>有人民币符号，无千位分隔</h2>
     <nut-cell>
-      <nut-price :price="10010.01" :need-symbol="true" :thousands="false" />
+      <nut-price :price="10010.01" size="normal" :need-symbol="true" :thousands="false" />
     </nut-cell>
     <h2>带人民币符号，有千位分隔，保留小数点后三位</h2>
     <nut-cell>
-      <nut-price :price="15213.1221" :decimal-digits="2" :need-symbol="true" :thousands="true" />
+      <nut-price :price="15213.1221" size="normal" :decimal-digits="3" :need-symbol="true" :thousands="true" />
     </nut-cell>
     <h2>异步随机变更</h2>
     <nut-cell>
-      <nut-price :price="price" :decimal-digits="3" :need-symbol="false" :thousands="true" />
+      <nut-price :price="price" size="normal" :decimal-digits="3" :need-symbol="true" :thousands="true" />
     </nut-cell>
   </div>
 </template>