From ec77685afc8cf14845927fe23a260d86293a5276 Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Mon, 13 Mar 2017 14:30:21 +0800
Subject: [PATCH] fix card

---
 docs/examples-docs/card.md      |  2 -
 docs/examples-docs/picker.md    | 68 +++++++++++++++++++++++++++++++++
 packages/card/src/card.vue      |  2 +-
 packages/zanui-css/src/card.css | 11 ++++--
 4 files changed, 77 insertions(+), 6 deletions(-)

diff --git a/docs/examples-docs/card.md b/docs/examples-docs/card.md
index 281fc69a1..eb1678365 100644
--- a/docs/examples-docs/card.md
+++ b/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>
diff --git a/docs/examples-docs/picker.md b/docs/examples-docs/picker.md
index 535c18272..de0bb20b5 100644
--- a/docs/examples-docs/picker.md
+++ b/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>
 ```
 :::
 
diff --git a/packages/card/src/card.vue b/packages/card/src/card.vue
index e50f1fbd5..4725242e1 100644
--- a/packages/card/src/card.vue
+++ b/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>
diff --git a/packages/zanui-css/src/card.css b/packages/zanui-css/src/card.css
index 2cc36085e..279f93bc9 100644
--- a/packages/zanui-css/src/card.css
+++ b/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;
     }