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;
+ }
}
}