From effc9591a3617b46d35e800dbde5291907cfaa64 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Tue, 24 Apr 2018 17:34:36 +0800
Subject: [PATCH] [Improvement] Panel: use cell instead of extra style (#927)

---
 packages/panel/index.vue        | 18 +++++++-----------
 packages/vant-css/src/panel.css | 22 +++-------------------
 2 files changed, 10 insertions(+), 30 deletions(-)

diff --git a/packages/panel/index.vue b/packages/panel/index.vue
index 28c3783d3..cf0c2c144 100644
--- a/packages/panel/index.vue
+++ b/packages/panel/index.vue
@@ -1,19 +1,15 @@
 <template>
-  <div class="van-panel van-hairline--top-bottom">
-    <div class="van-panel__header van-hairline--bottom">
-      <slot name="header">
-        <div class="van-panel__title" v-text="title" />
-        <span class="van-panel__desc" v-if="desc" v-text="desc" />
-        <span class="van-panel__status" v-if="status" v-text="status" />
-      </slot>
-    </div>
-    <div class="van-panel__content">
+  <cell-group :class="b()">
+    <slot name="header">
+      <cell :class="b('header')" :title="title" :label="desc" :value="status" />
+    </slot>
+    <div :class="b('content')">
       <slot />
     </div>
-    <div class="van-panel__footer van-hairline--top" v-if="$slots.footer">
+    <div v-if="$slots.footer" :class="b('footer')" class="van-hairline--top">
       <slot name="footer" />
     </div>
-  </div>
+  </cell-group>
 </template>
 
 <script>
diff --git a/packages/vant-css/src/panel.css b/packages/vant-css/src/panel.css
index 0a5857ab0..e41dcbdff 100644
--- a/packages/vant-css/src/panel.css
+++ b/packages/vant-css/src/panel.css
@@ -4,25 +4,9 @@
   background: $white;
 
   &__header {
-    padding: 10px 15px;
-  }
-
-  &__title {
-    font-size: 14px;
-    color: $text-color;
-  }
-
-  &__desc {
-    font-size: 12px;
-    color: $gray-darker;
-  }
-
-  &__status {
-    font-size: 14px;
-    position: absolute;
-    top: 10px;
-    right: 15px;
-    color: $red;
+    .van-cell__value {
+      color: $red;
+    }
   }
 
   &__footer {