[Improvement] Reorganize demos (#1052)

packages/panel/demo/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-panel :title="$t('title')" :desc="$t('desc')" :status="$t('status')">
+        <div>{{ $t('content') }}</div>
+      </van-panel>
+    </demo-block>
+
+    <demo-block :title="$t('advancedUsage')">
+      <van-panel :title="$t('title')" :desc="$t('desc')" :status="$t('status')">
+        <div>{{ $t('content') }}</div>
+        <div slot="footer">
+          <van-button size="small">{{ $t('button') }}</van-button>
+          <van-button size="small" type="danger">{{ $t('button') }}</van-button>
+        </div>
+      </van-panel>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="postcss">
+.demo-panel {
+  .van-panel__footer {
+    text-align: right;
+
+    .van-button {
+      margin-left: 5px;
+    }
+  }
+
+  .van-panel__content {
+    padding: 20px;
+  }
+}
+</style>