增加卡片组件

src/base/card.wc

@@ -0,0 +1,91 @@
+<template>
+  <div class="card">
+    <header class="header"><slot name="header" /></header>
+    <main class="body"><slot /></main>
+  </div>
+</template>
+
+<style lang="scss">
+:host {
+  display: flex;
+  width: 100%;
+  border-radius: 3px;
+}
+
+.header {
+  display: none;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--color-plain-2);
+  font-size: 16px;
+
+  &.show {
+    display: block;
+  }
+}
+.card {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: 1px solid var(--color-plain-2);
+  border-radius: inherit;
+  font-size: 14px;
+  background: #fff;
+  box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.3s ease-in-out;
+}
+
+:host([shadow='hover']) {
+  .card {
+    box-shadow: none;
+
+    &:hover {
+      box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
+    }
+  }
+}
+
+:host([shadow='never']) {
+  .card {
+    box-shadow: none;
+  }
+}
+
+.body {
+  padding: 16px;
+}
+</style>
+
+<script>
+export default class Card {
+  props = {
+    shadow: 'always',
+    padding: 16
+  }
+
+  __init__() {
+    /* render */
+
+    var elem = this.root.children[1]
+    this.__HEADER__ = elem.children[0]
+    this.__BODY__ = elem.children[1]
+  }
+
+  mounted() {
+    var elems = this.__HEADER__.firstChild.assignedNodes()
+
+    if (elems.length) {
+      this.__HEADER__.classList.toggle('show', true)
+    }
+  }
+
+  watch() {
+    switch (name) {
+      case 'padding':
+        val = +val
+        this.props.padding = val > 0 ? val : 0
+        this.__BODY__.style.padding = `${this.props.padding}px`
+        break
+    }
+  }
+}
+</script>

src/base/col.wc

@@ -23,8 +23,7 @@
 export default class Col {
   props = {
     span: 24,
-    offset: 0,
-    push: 0
+    offset: 0
   }
 
   __init__() {

src/index.js

@@ -1,7 +1,7 @@
 import './avatar/index'
 import './badge/index'
 import './base/row'
-// import './badge/index'
+import './base/card'
 import './code/index'
 import './color/index'
 import './drag/index'