[Improvement] Panel: use cell instead of extra style (youzan#927)

xuxiaoxiao312 · Apr 24, 2018 · effc959 · effc959
1 parent ba33733
commit effc959
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 30 deletions.
diff --git 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
@@ -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 {