fix card

docs/examples-docs/card.md

@@ -21,8 +21,6 @@
 :::demo 高级用法
 ```html
 <zan-card
-  title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
-  desc="商品SKU1，商品SKU2"
   thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
   <div class="zan-card__row" slot="title">
     <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>

docs/examples-docs/picker.md

@@ -44,6 +44,37 @@ export default {
 :::demo 基础用法
 ```html
 <zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
+
+<script>
+const citys = {
+  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+  '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
+  '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
+};
+
+export default {
+  data() {
+    return {
+      pickerColumns: [
+        {
+          values: Object.keys(citys),
+          className: 'column1'
+        },
+        {
+          values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+          className: 'column2'
+        }
+      ]
+    };
+  },
+
+  methods: {
+    handlePickerChange(picker, values) {
+      picker.setColumnValues(1, citys[values[0]]);
+    }
+  }
+};
+</script>
 ```
 :::
 
@@ -52,6 +83,43 @@ export default {
 :::demo 带toolbar的Picker
 ```html
 <zan-picker :columns="pickerColumns" show-toolbar @change="handlePickerChange" @cancel="handlePickerCancel" @confirm="handlePickerConfirm"></zan-picker>
+
+<script>
+const citys = {
+  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+  '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
+  '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
+};
+
+export default {
+  data() {
+    return {
+      pickerColumns: [
+        {
+          values: Object.keys(citys),
+          className: 'column1'
+        },
+        {
+          values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+          className: 'column2'
+        }
+      ]
+    };
+  },
+
+  methods: {
+    handlePickerChange(picker, values) {
+      picker.setColumnValues(1, citys[values[0]]);
+    },
+    handlePickerCancel() {
+      alert('picker cancel');
+    },
+    handlePickerConfirm() {
+      alert('picker confirm');
+    }
+  }
+};
+</script>
 ```
 :::
 

packages/card/src/card.vue

@@ -7,7 +7,7 @@
           <h4 v-text="title" class="zan-card__title"></h4>
         </slot>
         <slot name="desc">
-          <p v-if="desc" v-text="desc" class="zan-card__title"></p>
+          <p v-if="desc" v-text="desc" class="zan-card__desc"></p>
         </slot>
         <slot name="tags"></slot>
       </div>

packages/zanui-css/src/card.css

@@ -2,7 +2,8 @@
 
 @component-namespace zan {
   @b card {
-    padding: 5px 15px;
+    padding: 5px 15px 5px 115px;
+    height: 90px;
     background: #FAFAFA;
     overflow: hidden;
     position: relative;
@@ -13,15 +14,17 @@
     }
 
     @e img {
-      float: left;
       width: 90px;
       height: 90px;
       border: 0;
+      position: absolute;
+      top: 5px;
+      left: 15px;
     }
 
     @e content {
-      margin-left: 100px;
       display: table;
+      width: 100%;
 
       @when center {
         display: table;
@@ -45,6 +48,7 @@
       color: #333;
       max-height: 40px;
       margin-bottom: 5px;
+      word-break: break-all;
       @mixin multi-ellipsis 2;
     }
 
@@ -52,6 +56,7 @@
       font-size: 12px;
       color: #666;
       max-height: 20px;
+      word-break: break-all;
       @mixin multi-ellipsis 1;
     }