From a8bbc42cda17f030bad91381bac236fa2f1f4cad Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Sun, 26 Feb 2017 19:30:40 +0800
Subject: [PATCH] panel component

---
 docs/examples-docs/panel.md      | 107 +++++++++++++++++++++++++++++++
 docs/nav.config.json             |   4 ++
 packages/panel/src/panel.vue     |  19 +++++-
 packages/zanui-css/src/card.css  |   6 +-
 packages/zanui-css/src/panel.css |  35 +++++++++-
 5 files changed, 166 insertions(+), 5 deletions(-)
 create mode 100644 docs/examples-docs/panel.md

diff --git a/docs/examples-docs/panel.md b/docs/examples-docs/panel.md
new file mode 100644
index 000000000..7a7064979
--- /dev/null
+++ b/docs/examples-docs/panel.md
@@ -0,0 +1,107 @@
+<style>
+.z-panel-sum {
+  background: #fff;
+  text-align: right;
+  font-size: 14px;
+  color: #333;
+  line-height: 30px;
+  padding-right: 15px;
+
+  span {
+    color: red;
+  }
+}
+
+.z-panel-buttons {
+  text-align: right;
+
+  .z-button {
+    margin-left: 5px;
+  }
+}
+</style>
+
+## Panel 面板
+
+面板只是一个容器，里面可以放入自定义的内容。
+
+### 基础用法
+
+:::demo
+```html
+<z-panel title="标题" desc="标题描述" status="状态">
+  <z-card
+    title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+    desc="商品SKU1，商品SKU2"
+    thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+    <div class="z-card__row" slot="title">
+      <h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+      <span class="z-card__price">¥ 2.00</span>
+    </div>
+    <div class="z-card__row" slot="desc">
+      <h4 class="z-card__desc">商品sku</h4>
+      <span class="z-card__num">x 2</span>
+    </div>
+    <div class="z-card__footer" slot="footer">
+      <z-button size="mini">按钮一</z-button>
+      <z-button size="mini">按钮二</z-button>
+    </div>
+  </z-card>
+  <div class="z-panel-sum">
+    合计：<span>¥ 1999.90</span>
+  </div>
+</z-panel>
+```
+:::
+
+### 高级用法
+
+使用具名`slot`自定义内容。
+
+:::demo
+```html
+<z-panel title="标题" desc="标题描述" status="状态">
+  <z-card
+    title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+    desc="商品SKU1，商品SKU2"
+    thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+    <div class="z-card__row" slot="title">
+      <h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+      <span class="z-card__price">¥ 2.00</span>
+    </div>
+    <div class="z-card__row" slot="desc">
+      <h4 class="z-card__desc">商品sku</h4>
+      <span class="z-card__num">x 2</span>
+    </div>
+    <div class="z-card__footer" slot="footer">
+      <z-button size="mini">按钮一</z-button>
+      <z-button size="mini">按钮二</z-button>
+    </div>
+  </z-card>
+  <div class="z-panel-sum">
+    合计：<span>¥ 1999.90</span>
+  </div>
+  <div class="z-panel-buttons" slot="footer">
+    <z-button size="small">按钮一</z-button>
+    <z-button size="small" type="danger">按钮二</z-button>
+  </div>
+</z-panel>
+```
+:::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| title | 标题 | string  | ''          | ''          |
+| desc | 描述 | string  | ''          | ''          |
+| status | 状态 | string  | ''          | ''          |
+
+
+### Slot
+
+| name       | 描述      |
+|-----------|-----------|
+| - | 自定义内容 |
+| header | 自定义header |
+| footer | 自定义footer |
diff --git a/docs/nav.config.json b/docs/nav.config.json
index b5fa757ab..c7e8e536f 100644
--- a/docs/nav.config.json
+++ b/docs/nav.config.json
@@ -18,6 +18,10 @@
               "path": "/progress",
               "title": "Progress"
             },
+            {
+              "path": "/panel",
+              "title": "Panel"
+            },
             {
               "path": "/card",
               "title": "Card"
diff --git a/packages/panel/src/panel.vue b/packages/panel/src/panel.vue
index cef7f4526..c82d273b9 100644
--- a/packages/panel/src/panel.vue
+++ b/packages/panel/src/panel.vue
@@ -1,11 +1,28 @@
 <template>
   <div class="z-panel">
+    <div class="z-panel__header">
+      <slot name="header">
+        <h4 class="z-panel__title" v-text="title"></h4>
+        <span class="z-panel__desc" v-if="desc" v-text="desc"></span>
+        <span class="z-panel__status" v-if="status" v-text="status"></span>
+      </slot>
+    </div>
+    <div class="z-panel__content">
+      <slot></slot>
+    </div>
+    <div class="z-panel__footer" v-if="this.$slots.footer">
+      <slot name="footer"></slot>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   name: 'z-panel',
-  props: []
+  props: {
+    title: String,
+    desc: String,
+    status: String
+  }
 };
 </script>
diff --git a/packages/zanui-css/src/card.css b/packages/zanui-css/src/card.css
index 47a6d29af..992b599a4 100644
--- a/packages/zanui-css/src/card.css
+++ b/packages/zanui-css/src/card.css
@@ -6,7 +6,11 @@
     background: #FAFAFA;
     overflow: hidden;
     position: relative;
-    margin-bottom: 10px;
+    margin-top: 10px;
+
+    &:first-child {
+      margin-top: 0;
+    }
 
     @e img {
       float: left;
diff --git a/packages/zanui-css/src/panel.css b/packages/zanui-css/src/panel.css
index acf82a9ef..1baa903c7 100644
--- a/packages/zanui-css/src/panel.css
+++ b/packages/zanui-css/src/panel.css
@@ -1,7 +1,36 @@
 @component-namespace z {
   @b panel {
-    padding: 5px 15px;
-    background: #D8D8D8;
-    overflow: hidden;
+    background: #fff;
+    border-top: 1px solid #E5E5E5;
+    border-bottom: 1px solid #E5E5E5;
+
+    @e header {
+      padding: 10px 15px;
+      position: relative;
+      border-bottom: 1px solid #E5E5E5;
+    }
+
+    @e title {
+      font-size: 14px;
+      color: #333;
+    }
+
+    @e desc {
+      font-size: 12px;
+      color: #666;
+    }
+
+    @e status {
+      font-size: 14px;
+      position: absolute;
+      top: 10px;
+      right: 15px;
+      color: #FF4444;
+    }
+
+    @e footer {
+      border-top: 1px solid #E5E5E5;
+      padding: 10px 15px;
+    }
   }
 }