docs(card): edit style (#2133)

src/packages/__VUE/card/doc.en-US.md

@@ -62,37 +62,30 @@ app.use(Price);
 ```
 :::
 
-### Custom Content
+
+### Custom prolist
+
 :::demo
 ```html
 <template>
-<nut-card
-:img-url="state.imgUrl"
-:title="state.title"
-:price="state.price"
-:vipPrice="state.vipPrice"
-:shopDesc="state.shopDesc"
-:delivery="state.delivery"
-:shopName="state.shopName"
->
-  <template #prolist>
-    <div class="search_prolist_attr">
-      <span class="word">word</span>
-      <span class="word">word</span>
-      <span class="word">word</span>
-    </div>
-  </template>
-  <template #tag>
-    <img
-        class="tag" 
-        src="https://img11.360buyimg.com/jdphoto/s58x28_jfs/t9451/359/415622649/15318/b0943e5d/59a78495N3bd2a9f8.png"
-        alt=""
-    />
-  </template>
-    <template #footer>
-      <div class="customize">cuttom</div>
-    </template>
-</nut-card>
+  <nut-card
+    :img-url="state.imgUrl"
+    :title="state.title"
+    :price="state.price"
+    :vipPrice="state.vipPrice"
+    :shopDesc="state.shopDesc"
+    :delivery="state.delivery"
+    :shopName="state.shopName"
+  >
+        <template #prolist>
+        <div class="search_prolist_attr">
+          <span class="word">tag</span>
+          <span class="word">tag</span>
+          <span class="word">tag</span>
+        </div>
+      </template>
+  
+  </nut-card>
 </template>
 <script>
   import { reactive } from 'vue';
@@ -114,14 +107,12 @@ app.use(Price);
   }
 }
 </script>
-<style>
-.search_prolist_attr {
+<style lang="scss">
+  .search_prolist_attr {
   margin: 3px 0 1px;
   height: 15px;
   overflow: hidden;
- 
-}
-.search_prolist_attr > span{
+  > span {
     float: left;
     padding: 0 5px;
     border-radius: 1px;
@@ -131,7 +122,56 @@ app.use(Price);
     color: #999;
     background-color: #f2f2f7;
     margin-right: 5px;
+  }
+}
+</style>
+```
+:::
+### Custom Content
+
+:::demo
+```html
+<template>
+    <nut-card
+      :img-url="state.imgUrl"
+      :title="state.title"
+      :price="state.price"
+      :vipPrice="state.vipPrice"
+      :shopDesc="state.shopDesc"
+      :delivery="state.delivery"
+      :shopName="state.shopName"
+    >
+      <template #shop-tag>
+        <div>Custom Content</div>
+      </template>
+      <template #price>
+        <span>inquiry</span>
+      </template>
+      <template #origin>
+        <img
+          class="tag"
+          src="https://img11.360buyimg.com/jdphoto/s58x28_jfs/t9451/359/415622649/15318/b0943e5d/59a78495N3bd2a9f8.png"
+          alt=""
+        />
+      </template>
+    </nut-card>
+</template>
+<script>
+  import { reactive } from 'vue';
+  export default{
+    setup() {
+    const state = reactive({
+      imgUrl:'//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
+      title: 'title',
+      shopName: 'shopName>'
+    });
+    return {
+      state
+    };
+  }
 }
+</script>
+<style lang="scss">
 .tag {
   display: inline-block;
   vertical-align: middle;
@@ -139,11 +179,53 @@ app.use(Price);
   margin-left: 2px;
   height: 14px;
 }
+</style>
+```
+:::
+
+### Customize bottom right content
+:::demo
+```html
+<template>
+  <nut-card
+    :img-url="state.imgUrl"
+    :title="state.title"
+    :price="state.price"
+    :vipPrice="state.vipPrice"
+    :shopDesc="state.shopDesc"
+    :delivery="state.delivery"
+    :shopName="state.shopName"
+  >
+   <template #footer>
+        <div class="customize">custom</div>
+      </template>
+  </nut-card>
+</template>
+<script>
+  import { reactive } from 'vue';
+  export default{
+    setup() {
+    const state = reactive({
+      imgUrl:
+        '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
+      title: 'title',
+      price: '388',
+      vipPrice: '378',
+      shopDesc: 'desc',
+      delivery: 'delivery',
+      shopName: 'shopName>'
+    });
+    return {
+      state
+    };
+  }
+}
+</script>
+<style lang="scss">
 .customize {
   font-size: 12px;
 }
 </style>
-
 ```
 :::
 ## API

src/packages/__VUE/card/doc.md

@@ -61,37 +61,29 @@ app.use(Price);
 ```
 :::
 
-### 自定义内容
+### 自定义商品标签
+
 :::demo
 ```html
 <template>
-<nut-card
-:img-url="state.imgUrl"
-:title="state.title"
-:price="state.price"
-:vipPrice="state.vipPrice"
-:shopDesc="state.shopDesc"
-:delivery="state.delivery"
-:shopName="state.shopName"
->
-  <template #prolist>
-    <div class="search_prolist_attr">
-      <span class="word">活鲜</span>
-      <span class="word">礼盒</span>
-      <span class="word">国产</span>
-    </div>
-  </template>
-  <template #tag>
-    <img
-        class="tag" 
-        src="https://img11.360buyimg.com/jdphoto/s58x28_jfs/t9451/359/415622649/15318/b0943e5d/59a78495N3bd2a9f8.png"
-        alt=""
-    />
-  </template>
-    <template #footer>
-      <div class="customize">自定义</div>
-    </template>
-</nut-card>
+  <nut-card
+    :img-url="state.imgUrl"
+    :title="state.title"
+    :price="state.price"
+    :vipPrice="state.vipPrice"
+    :shopDesc="state.shopDesc"
+    :delivery="state.delivery"
+    :shopName="state.shopName"
+  >
+        <template #prolist>
+        <div class="search_prolist_attr">
+          <span class="word">活鲜</span>
+          <span class="word">礼盒</span>
+          <span class="word">国产</span>
+        </div>
+      </template>
+  
+  </nut-card>
 </template>
 <script>
   import { reactive } from 'vue';
@@ -113,14 +105,12 @@ app.use(Price);
   }
 }
 </script>
-<style>
-.search_prolist_attr {
+<style lang="scss">
+  .search_prolist_attr {
   margin: 3px 0 1px;
   height: 15px;
   overflow: hidden;
- 
-}
-.search_prolist_attr > span{
+  > span {
     float: left;
     padding: 0 5px;
     border-radius: 1px;
@@ -130,7 +120,60 @@ app.use(Price);
     color: #999;
     background-color: #f2f2f7;
     margin-right: 5px;
+  }
 }
+</style>
+```
+:::
+### 自定义店铺介绍
+
+:::demo
+```html
+<template>
+    <nut-card
+      :img-url="state.imgUrl"
+      :title="state.title"
+      :price="state.price"
+      :vipPrice="state.vipPrice"
+      :shopDesc="state.shopDesc"
+      :delivery="state.delivery"
+      :shopName="state.shopName"
+    >
+      <template #shop-tag>
+        <div>自定义店铺介绍</div>
+      </template>
+      <template #price>
+        <span>询价</span>
+      </template>
+      <template #origin>
+        <img
+          class="tag"
+          src="https://img11.360buyimg.com/jdphoto/s58x28_jfs/t9451/359/415622649/15318/b0943e5d/59a78495N3bd2a9f8.png"
+          alt=""
+        />
+      </template>
+    </nut-card>
+</template>
+<script>
+  import { reactive } from 'vue';
+  export default{
+    setup() {
+    const state = reactive({
+      imgUrl:'//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
+      title: '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
+      price: '388',
+      vipPrice: '378',
+      shopDesc: '自营',
+      delivery: '厂商配送',
+      shopName: '阳澄湖大闸蟹自营店>'
+    });
+    return {
+      state
+    };
+  }
+}
+</script>
+<style lang="scss">
 .tag {
   display: inline-block;
   vertical-align: middle;
@@ -138,11 +181,55 @@ app.use(Price);
   margin-left: 2px;
   height: 14px;
 }
+</style>
+```
+:::
+
+### 自定义右下角内容
+:::demo
+```html
+<template>
+  <nut-card
+    :img-url="state.imgUrl"
+    :title="state.title"
+    :price="state.price"
+    :vipPrice="state.vipPrice"
+    :shopDesc="state.shopDesc"
+    :delivery="state.delivery"
+    :shopName="state.shopName"
+  >
+   <template #footer>
+        <div class="customize">自定义右下角内容</div>
+      </template>
+  </nut-card>
+</template>
+<script>
+  import { reactive } from 'vue';
+  export default{
+    setup() {
+    const state = reactive({
+      imgUrl:
+        '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
+      title: '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
+      price: '388',
+      vipPrice: '378',
+      shopDesc: '自营',
+      delivery: '厂商配送',
+      shopName: '阳澄湖大闸蟹自营店>'
+    });
+    return {
+      state
+    };
+  }
+}
+</script>
+<style lang="scss">
 .customize {
   font-size: 12px;
 }
 </style>
 
+
 ```
 :::
 ## API