panel component

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>

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;

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