From f5e114cf085a9855295666c14a402479a659a8ca Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Tue, 9 Oct 2018 11:47:28 +0800
Subject: [PATCH] [improvement] Cell: optimize border (#1902)

---
 .../test/__snapshots__/demo.spec.js.snap      | 14 +++++------
 .../test/__snapshots__/index.spec.js.snap     | 24 +++++++++----------
 .../test/__snapshots__/demo.spec.js.snap      |  6 ++---
 .../test/__snapshots__/demo.spec.js.snap      |  4 ++--
 packages/cell/index.vue                       |  4 ++--
 .../cell/test/__snapshots__/demo.spec.js.snap | 20 ++++++++--------
 .../test/__snapshots__/demo.spec.js.snap      |  6 ++---
 .../test/__snapshots__/demo.spec.js.snap      | 16 ++++++-------
 .../test/__snapshots__/demo.spec.js.snap      | 10 ++++----
 .../test/__snapshots__/demo.spec.js.snap      |  2 +-
 .../test/__snapshots__/index.spec.js.snap     |  4 ++--
 .../test/__snapshots__/demo.spec.js.snap      |  4 ++--
 .../test/__snapshots__/demo.spec.js.snap      | 16 ++++++-------
 .../test/__snapshots__/index.spec.js.snap     |  2 +-
 .../test/__snapshots__/demo.spec.js.snap      |  4 ++--
 .../test/__snapshots__/demo.spec.js.snap      |  4 ++--
 .../test/__snapshots__/demo.spec.js.snap      |  6 ++---
 .../test/__snapshots__/demo.spec.js.snap      |  4 ++--
 .../test/__snapshots__/demo.spec.js.snap      |  6 ++---
 packages/vant-css/src/cell.css                |  7 ++++--
 packages/vant-css/src/mixins/hairline.css     | 23 ++++++++++++++----
 21 files changed, 102 insertions(+), 84 deletions(-)

diff --git a/packages/address-edit/test/__snapshots__/demo.spec.js.snap b/packages/address-edit/test/__snapshots__/demo.spec.js.snap
index b555d5f23..34e5699e2 100644
--- a/packages/address-edit/test/__snapshots__/demo.spec.js.snap
+++ b/packages/address-edit/test/__snapshots__/demo.spec.js.snap
@@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-address-edit">
       <div class="van-cell-group van-hairline--top-bottom">
-        <div maxlength="15" placeholder="收货人姓名" class="van-cell van-hairline van-field">
+        <div maxlength="15" placeholder="收货人姓名" class="van-cell van-field">
           <!---->
           <div class="van-cell__title"><span>姓名</span>
             <!---->
@@ -21,7 +21,7 @@ exports[`renders demo correctly 1`] = `
           </div>
           <!---->
         </div>
-        <div placeholder="收货人手机号" class="van-cell van-hairline van-field">
+        <div placeholder="收货人手机号" class="van-cell van-field">
           <!---->
           <div class="van-cell__title"><span>电话</span>
             <!---->
@@ -37,7 +37,7 @@ exports[`renders demo correctly 1`] = `
           </div>
           <!---->
         </div>
-        <div placeholder="选择省 / 市 / 区" class="van-cell van-hairline van-field">
+        <div placeholder="选择省 / 市 / 区" class="van-cell van-field">
           <!---->
           <div class="van-cell__title"><span>地区</span>
             <!---->
@@ -53,11 +53,11 @@ exports[`renders demo correctly 1`] = `
           </div>
           <!---->
         </div>
-        <div class="van-cell van-hairline van-address-edit-detail">
+        <div class="van-cell van-address-edit-detail">
           <!---->
           <!---->
           <div class="van-cell__value van-cell__value--alone">
-            <div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-hairline van-field">
+            <div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
               <!---->
               <div class="van-cell__title"><span>详细地址</span>
                 <!---->
@@ -76,7 +76,7 @@ exports[`renders demo correctly 1`] = `
           </div>
           <!---->
         </div>
-        <div maxlength="6" placeholder="邮政编码" class="van-cell van-hairline van-field">
+        <div maxlength="6" placeholder="邮政编码" class="van-cell van-field">
           <!---->
           <div class="van-cell__title"><span>邮政编码</span>
             <!---->
@@ -92,7 +92,7 @@ exports[`renders demo correctly 1`] = `
           </div>
           <!---->
         </div>
-        <div class="van-cell van-cell--center van-switch-cell">
+        <div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
           <!---->
           <div class="van-cell__title"><span>设为默认收货地址</span>
             <!---->
diff --git a/packages/address-edit/test/__snapshots__/index.spec.js.snap b/packages/address-edit/test/__snapshots__/index.spec.js.snap
index d651318c1..c6a9d58a6 100644
--- a/packages/address-edit/test/__snapshots__/index.spec.js.snap
+++ b/packages/address-edit/test/__snapshots__/index.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`create a AddressEdit 1`] = `
 <div class="van-address-edit">
   <div class="van-cell-group van-hairline--top-bottom">
-    <div maxlength="15" placeholder="收货人姓名" class="van-cell van-hairline van-field">
+    <div maxlength="15" placeholder="收货人姓名" class="van-cell van-field">
       <!---->
       <div class="van-cell__title"><span>姓名</span>
         <!---->
@@ -19,7 +19,7 @@ exports[`create a AddressEdit 1`] = `
       </div>
       <!---->
     </div>
-    <div placeholder="收货人手机号" class="van-cell van-hairline van-field">
+    <div placeholder="收货人手机号" class="van-cell van-field">
       <!---->
       <div class="van-cell__title"><span>电话</span>
         <!---->
@@ -35,7 +35,7 @@ exports[`create a AddressEdit 1`] = `
       </div>
       <!---->
     </div>
-    <div placeholder="选择省 / 市 / 区" class="van-cell van-hairline van-field">
+    <div placeholder="选择省 / 市 / 区" class="van-cell van-field">
       <!---->
       <div class="van-cell__title"><span>地区</span>
         <!---->
@@ -51,11 +51,11 @@ exports[`create a AddressEdit 1`] = `
       </div>
       <!---->
     </div>
-    <div class="van-cell van-hairline van-address-edit-detail">
+    <div class="van-cell van-address-edit-detail">
       <!---->
       <!---->
       <div class="van-cell__value van-cell__value--alone">
-        <div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-hairline van-field">
+        <div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
           <!---->
           <div class="van-cell__title"><span>详细地址</span>
             <!---->
@@ -113,7 +113,7 @@ exports[`create a AddressEdit 1`] = `
 exports[`create a AddressEdit with props 1`] = `
 <div class="van-address-edit">
   <div class="van-cell-group van-hairline--top-bottom">
-    <div maxlength="15" placeholder="收货人姓名" class="van-cell van-hairline van-field">
+    <div maxlength="15" placeholder="收货人姓名" class="van-cell van-field">
       <!---->
       <div class="van-cell__title"><span>姓名</span>
         <!---->
@@ -129,7 +129,7 @@ exports[`create a AddressEdit with props 1`] = `
       </div>
       <!---->
     </div>
-    <div placeholder="收货人手机号" class="van-cell van-hairline van-field">
+    <div placeholder="收货人手机号" class="van-cell van-field">
       <!---->
       <div class="van-cell__title"><span>电话</span>
         <!---->
@@ -145,7 +145,7 @@ exports[`create a AddressEdit with props 1`] = `
       </div>
       <!---->
     </div>
-    <div placeholder="选择省 / 市 / 区" class="van-cell van-hairline van-field">
+    <div placeholder="选择省 / 市 / 区" class="van-cell van-field">
       <!---->
       <div class="van-cell__title"><span>地区</span>
         <!---->
@@ -161,11 +161,11 @@ exports[`create a AddressEdit with props 1`] = `
       </div>
       <!---->
     </div>
-    <div class="van-cell van-hairline van-address-edit-detail">
+    <div class="van-cell van-address-edit-detail">
       <!---->
       <!---->
       <div class="van-cell__value van-cell__value--alone">
-        <div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-hairline van-field">
+        <div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
           <!---->
           <div class="van-cell__title"><span>详细地址</span>
             <!---->
@@ -184,7 +184,7 @@ exports[`create a AddressEdit with props 1`] = `
       </div>
       <!---->
     </div>
-    <div maxlength="6" placeholder="邮政编码" class="van-cell van-hairline van-field">
+    <div maxlength="6" placeholder="邮政编码" class="van-cell van-field">
       <!---->
       <div class="van-cell__title"><span>邮政编码</span>
         <!---->
@@ -200,7 +200,7 @@ exports[`create a AddressEdit with props 1`] = `
       </div>
       <!---->
     </div>
-    <div class="van-cell van-cell--center van-switch-cell">
+    <div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
       <!---->
       <div class="van-cell__title"><span>设为默认收货地址</span>
         <!---->
diff --git a/packages/address-list/test/__snapshots__/demo.spec.js.snap b/packages/address-list/test/__snapshots__/demo.spec.js.snap
index ba7d797b7..d9de9b5ba 100644
--- a/packages/address-list/test/__snapshots__/demo.spec.js.snap
+++ b/packages/address-list/test/__snapshots__/demo.spec.js.snap
@@ -6,7 +6,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-address-list">
       <div class="van-radio-group">
         <div class="van-cell-group van-hairline--top-bottom">
-          <div class="van-cell van-cell--clickable van-hairline van-address-item">
+          <div class="van-cell van-cell--clickable van-address-item">
             <!---->
             <!---->
             <div class="van-cell__value van-cell__value--alone">
@@ -16,7 +16,7 @@ exports[`renders demo correctly 1`] = `
               <!---->
             </i>
           </div>
-          <div class="van-cell van-cell--clickable van-hairline van-address-item">
+          <div class="van-cell van-cell--clickable van-address-item">
             <!---->
             <!---->
             <div class="van-cell__value van-cell__value--alone">
@@ -30,7 +30,7 @@ exports[`renders demo correctly 1`] = `
       </div>
       <div class="van-address-list__disabled-text">以下地址超出配送范围</div>
       <div class="van-cell-group van-hairline--top-bottom">
-        <div class="van-cell van-hairline van-address-item van-address-item--disabled">
+        <div class="van-cell van-address-item van-address-item--disabled">
           <!---->
           <!---->
           <div class="van-cell__value van-cell__value--alone">
diff --git a/packages/button/test/__snapshots__/demo.spec.js.snap b/packages/button/test/__snapshots__/demo.spec.js.snap
index 1a6fa580a..9803e29e5 100644
--- a/packages/button/test/__snapshots__/demo.spec.js.snap
+++ b/packages/button/test/__snapshots__/demo.spec.js.snap
@@ -11,8 +11,8 @@ exports[`renders demo correctly 1`] = `
     <button class="van-button van-button--warning van-button--normal"><span class="van-button__text">警告按钮</span></button>
   </div>
   <div>
-    <button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">警告按钮</span></button>
-    <button class="van-button van-button--danger van-button--normal van-button--plain"><span class="van-button__text">危险按钮</span></button>
+    <button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button>
+    <button class="van-button van-button--danger van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button>
   </div>
   <div>
     <button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled van-button--unclickable"><span class="van-button__text">禁用状态</span></button>
diff --git a/packages/cell/index.vue b/packages/cell/index.vue
index 1d136527b..9967802ca 100644
--- a/packages/cell/index.vue
+++ b/packages/cell/index.vue
@@ -4,9 +4,9 @@
       b({
         center,
         required,
+        borderless: !border,
         clickable: isLink || clickable
-      }),
-      { 'van-hairline': border }
+      })
     ]"
     @click="onClick"
   >
diff --git a/packages/cell/test/__snapshots__/demo.spec.js.snap b/packages/cell/test/__snapshots__/demo.spec.js.snap
index 431a08069..8668eb376 100644
--- a/packages/cell/test/__snapshots__/demo.spec.js.snap
+++ b/packages/cell/test/__snapshots__/demo.spec.js.snap
@@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
-      <div class="van-cell van-hairline">
+      <div class="van-cell">
         <!---->
         <div class="van-cell__title"><span>单元格</span>
           <!---->
@@ -12,7 +12,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-cell__value"><span>内容</span></div>
         <!---->
       </div>
-      <div class="van-cell van-hairline">
+      <div class="van-cell">
         <!---->
         <div class="van-cell__title"><span>单元格</span>
           <div class="van-cell__label">描述信息</div>
@@ -24,7 +24,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
-      <div class="van-cell van-hairline">
+      <div class="van-cell">
         <!---->
         <!---->
         <div class="van-cell__value van-cell__value--alone"><span>内容</span></div>
@@ -34,7 +34,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
-      <div class="van-cell van-hairline">
+      <div class="van-cell">
         <i class="van-icon van-icon-location van-cell__left-icon" style="color:undefined;font-size:undefined;">
           <!---->
         </i>
@@ -48,7 +48,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
-      <div class="van-cell van-cell--clickable van-hairline">
+      <div class="van-cell van-cell--clickable">
         <!---->
         <div class="van-cell__title"><span>单元格</span>
           <!---->
@@ -58,7 +58,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
         </i>
       </div>
-      <div class="van-cell van-cell--clickable van-hairline">
+      <div class="van-cell van-cell--clickable">
         <!---->
         <div class="van-cell__title"><span>单元格</span>
           <!---->
@@ -68,7 +68,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
         </i>
       </div>
-      <div class="van-cell van-cell--clickable van-hairline">
+      <div class="van-cell van-cell--clickable">
         <!---->
         <div class="van-cell__title"><span>单元格</span>
           <!---->
@@ -82,7 +82,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
-      <div class="van-cell van-cell--clickable van-hairline">
+      <div class="van-cell van-cell--clickable">
         <i class="van-icon van-icon-shop van-cell__left-icon" style="color:undefined;font-size:undefined;">
           <!---->
         </i>
@@ -92,7 +92,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
         </i>
       </div>
-      <div class="van-cell van-cell--clickable van-hairline">
+      <div class="van-cell van-cell--clickable">
         <i class="van-icon van-icon-location van-cell__left-icon" style="color:undefined;font-size:undefined;">
           <!---->
         </i>
@@ -104,7 +104,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
         </i>
       </div>
-      <div class="van-cell van-hairline">
+      <div class="van-cell">
         <!---->
         <div class="van-cell__title"><span>单元格</span>
           <!---->
diff --git a/packages/checkbox/test/__snapshots__/demo.spec.js.snap b/packages/checkbox/test/__snapshots__/demo.spec.js.snap
index 50dd9812f..8f1dee5e9 100644
--- a/packages/checkbox/test/__snapshots__/demo.spec.js.snap
+++ b/packages/checkbox/test/__snapshots__/demo.spec.js.snap
@@ -91,7 +91,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-checkbox-group">
       <div class="van-cell-group van-hairline--top-bottom">
-        <div class="van-cell van-cell--clickable van-hairline">
+        <div class="van-cell van-cell--clickable">
           <!---->
           <div class="van-cell__title"><span>复选框a</span>
             <!---->
@@ -108,7 +108,7 @@ exports[`renders demo correctly 1`] = `
           </div>
           <!---->
         </div>
-        <div class="van-cell van-cell--clickable van-hairline">
+        <div class="van-cell van-cell--clickable">
           <!---->
           <div class="van-cell__title"><span>复选框b</span>
             <!---->
@@ -125,7 +125,7 @@ exports[`renders demo correctly 1`] = `
           </div>
           <!---->
         </div>
-        <div class="van-cell van-cell--clickable van-hairline">
+        <div class="van-cell van-cell--clickable">
           <!---->
           <div class="van-cell__title"><span>复选框c</span>
             <!---->
diff --git a/packages/collapse/test/__snapshots__/demo.spec.js.snap b/packages/collapse/test/__snapshots__/demo.spec.js.snap
index 4fe18e2be..33708bd00 100644
--- a/packages/collapse/test/__snapshots__/demo.spec.js.snap
+++ b/packages/collapse/test/__snapshots__/demo.spec.js.snap
@@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-hairline--top-bottom van-collapse">
       <div class="van-collapse-item">
-        <div class="van-cell van-cell--clickable van-hairline van-collapse-item__title van-collapse-item__title--expanded">
+        <div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
           <!---->
           <div class="van-cell__title"><span>有赞微商城</span>
             <!---->
@@ -20,7 +20,7 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-collapse-item van-hairline--top">
-        <div class="van-cell van-cell--clickable van-hairline van-collapse-item__title">
+        <div class="van-cell van-cell--clickable van-collapse-item__title">
           <!---->
           <div class="van-cell__title"><span>有赞零售</span>
             <!---->
@@ -33,7 +33,7 @@ exports[`renders demo correctly 1`] = `
         <!---->
       </div>
       <div class="van-collapse-item van-hairline--top">
-        <div disabled="disabled" class="van-cell van-cell--clickable van-hairline van-collapse-item__title van-collapse-item__title--disabled">
+        <div disabled="disabled" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled">
           <!---->
           <div class="van-cell__title"><span>有赞美业</span>
             <!---->
@@ -50,7 +50,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-hairline--top-bottom van-collapse">
       <div class="van-collapse-item">
-        <div class="van-cell van-cell--clickable van-hairline van-collapse-item__title van-collapse-item__title--expanded">
+        <div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
           <!---->
           <div class="van-cell__title"><span>有赞微商城</span>
             <!---->
@@ -65,7 +65,7 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-collapse-item van-hairline--top">
-        <div class="van-cell van-cell--clickable van-hairline van-collapse-item__title">
+        <div class="van-cell van-cell--clickable van-collapse-item__title">
           <!---->
           <div class="van-cell__title"><span>有赞零售</span>
             <!---->
@@ -78,7 +78,7 @@ exports[`renders demo correctly 1`] = `
         <!---->
       </div>
       <div class="van-collapse-item van-hairline--top">
-        <div class="van-cell van-cell--clickable van-hairline van-collapse-item__title">
+        <div class="van-cell van-cell--clickable van-collapse-item__title">
           <!---->
           <div class="van-cell__title"><span>有赞美业</span>
             <!---->
@@ -95,7 +95,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-hairline--top-bottom van-collapse">
       <div class="van-collapse-item">
-        <div class="van-cell van-cell--clickable van-hairline van-collapse-item__title">
+        <div class="van-cell van-cell--clickable van-collapse-item__title">
           <!---->
           <div class="van-cell__title">
             <div>有赞微商城
@@ -112,7 +112,7 @@ exports[`renders demo correctly 1`] = `
         <!---->
       </div>
       <div class="van-collapse-item van-hairline--top">
-        <div class="van-cell van-cell--clickable van-hairline van-collapse-item__title">
+        <div class="van-cell van-cell--clickable van-collapse-item__title">
           <i class="van-icon van-icon-shop van-cell__left-icon" style="color:undefined;font-size:undefined;">
             <!---->
           </i>
diff --git a/packages/contact-card/test/__snapshots__/demo.spec.js.snap b/packages/contact-card/test/__snapshots__/demo.spec.js.snap
index 815447e8d..5e0a6e95b 100644
--- a/packages/contact-card/test/__snapshots__/demo.spec.js.snap
+++ b/packages/contact-card/test/__snapshots__/demo.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-cell van-cell--center van-cell--clickable van-contact-card van-contact-card--add">
+    <div class="van-cell van-cell--center van-cell--borderless van-cell--clickable van-contact-card van-contact-card--add">
       <i class="van-icon van-icon-add2 van-cell__left-icon" style="color:undefined;font-size:undefined;">
         <!---->
       </i>
@@ -17,7 +17,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-contact-list">
         <div class="van-radio-group">
           <div class="van-cell-group van-hairline--top-bottom">
-            <div class="van-cell van-cell--clickable van-hairline">
+            <div class="van-cell van-cell--clickable">
               <!---->
               <!---->
               <div class="van-cell__value van-cell__value--alone">
@@ -35,7 +35,7 @@ exports[`renders demo correctly 1`] = `
     <div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
       <div class="van-contact-edit">
         <div class="van-cell-group van-hairline--top-bottom">
-          <div maxlength="30" placeholder="请填写姓名" class="van-cell van-hairline van-field">
+          <div maxlength="30" placeholder="请填写姓名" class="van-cell van-field">
             <!---->
             <div class="van-cell__title"><span>张三</span>
               <!---->
@@ -51,7 +51,7 @@ exports[`renders demo correctly 1`] = `
             </div>
             <!---->
           </div>
-          <div placeholder="请填写电话" class="van-cell van-hairline van-field">
+          <div placeholder="请填写电话" class="van-cell van-field">
             <!---->
             <div class="van-cell__title"><span>电话</span>
               <!---->
@@ -76,7 +76,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-cell van-cell--center van-contact-card van-contact-card--edit">
+    <div class="van-cell van-cell--center van-cell--borderless van-contact-card van-contact-card--edit">
       <i class="van-icon van-icon-contact van-cell__left-icon" style="color:undefined;font-size:undefined;">
         <!---->
       </i>
diff --git a/packages/coupon-list/test/__snapshots__/demo.spec.js.snap b/packages/coupon-list/test/__snapshots__/demo.spec.js.snap
index 016900be8..049f278ca 100644
--- a/packages/coupon-list/test/__snapshots__/demo.spec.js.snap
+++ b/packages/coupon-list/test/__snapshots__/demo.spec.js.snap
@@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom van-coupon-cell">
-      <div class="van-cell van-cell--clickable van-hairline">
+      <div class="van-cell van-cell--clickable">
         <!---->
         <div class="van-cell__title"><span>优惠券</span>
           <!---->
diff --git a/packages/coupon-list/test/__snapshots__/index.spec.js.snap b/packages/coupon-list/test/__snapshots__/index.spec.js.snap
index eb66883f1..f70e77c9e 100644
--- a/packages/coupon-list/test/__snapshots__/index.spec.js.snap
+++ b/packages/coupon-list/test/__snapshots__/index.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`coupon cell 1`] = `
 <div class="van-cell-group van-hairline--top-bottom van-coupon-cell">
-  <div class="van-cell van-cell--clickable van-hairline">
+  <div class="van-cell van-cell--clickable">
     <!---->
     <div class="van-cell__title"><span>优惠券</span>
       <!---->
@@ -17,7 +17,7 @@ exports[`coupon cell 1`] = `
 
 exports[`coupon cell 2`] = `
 <div class="van-cell-group van-hairline--top-bottom van-coupon-cell">
-  <div class="van-cell van-cell--clickable van-hairline">
+  <div class="van-cell van-cell--clickable">
     <!---->
     <div class="van-cell__title"><span>优惠券</span>
       <!---->
diff --git a/packages/dialog/test/__snapshots__/demo.spec.js.snap b/packages/dialog/test/__snapshots__/demo.spec.js.snap
index a63a99b3e..81879e6d3 100644
--- a/packages/dialog/test/__snapshots__/demo.spec.js.snap
+++ b/packages/dialog/test/__snapshots__/demo.spec.js.snap
@@ -14,7 +14,7 @@ exports[`renders demo correctly 1`] = `
     <div name="van-dialog-bounce" class="van-dialog" style="display:none;">
       <!---->
       <div class="van-dialog__content">
-        <div placeholder="请输入用户名" class="van-cell van-hairline van-field">
+        <div placeholder="请输入用户名" class="van-cell van-field">
           <!---->
           <div class="van-cell__title"><span>用户名</span>
             <!---->
@@ -30,7 +30,7 @@ exports[`renders demo correctly 1`] = `
           </div>
           <!---->
         </div>
-        <div placeholder="请输入密码" class="van-cell van-hairline van-field">
+        <div placeholder="请输入密码" class="van-cell van-field">
           <!---->
           <div class="van-cell__title"><span>密码</span>
             <!---->
diff --git a/packages/field/test/__snapshots__/demo.spec.js.snap b/packages/field/test/__snapshots__/demo.spec.js.snap
index 9d19d7ade..74cd4bdad 100644
--- a/packages/field/test/__snapshots__/demo.spec.js.snap
+++ b/packages/field/test/__snapshots__/demo.spec.js.snap
@@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
-      <div placeholder="请输入用户名" class="van-cell van-hairline van-field">
+      <div placeholder="请输入用户名" class="van-cell van-field">
         <!---->
         <!---->
         <div class="van-cell__value van-cell__value--alone">
@@ -22,7 +22,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
-      <div placeholder="请输入用户名" class="van-cell van-cell--required van-hairline van-field">
+      <div placeholder="请输入用户名" class="van-cell van-cell--required van-field">
         <!---->
         <div class="van-cell__title"><span>用户名</span>
           <!---->
@@ -42,7 +42,7 @@ exports[`renders demo correctly 1`] = `
         </div>
         <!---->
       </div>
-      <div placeholder="请输入密码" class="van-cell van-cell--required van-hairline van-field">
+      <div placeholder="请输入密码" class="van-cell van-cell--required van-field">
         <!---->
         <div class="van-cell__title"><span>密码</span>
           <!---->
@@ -62,7 +62,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
-      <div disabled="disabled" class="van-cell van-hairline van-field">
+      <div disabled="disabled" class="van-cell van-field">
         <i class="van-icon van-icon-contact van-cell__left-icon" style="color:undefined;font-size:undefined;">
           <!---->
         </i>
@@ -84,7 +84,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
-      <div placeholder="请输入用户名" class="van-cell van-hairline van-field van-field--error">
+      <div placeholder="请输入用户名" class="van-cell van-field van-field--error">
         <!---->
         <div class="van-cell__title"><span>用户名</span>
           <!---->
@@ -100,7 +100,7 @@ exports[`renders demo correctly 1`] = `
         </div>
         <!---->
       </div>
-      <div placeholder="请输入手机号" class="van-cell van-hairline van-field">
+      <div placeholder="请输入手机号" class="van-cell van-field">
         <!---->
         <div class="van-cell__title"><span>手机号</span>
           <!---->
@@ -120,7 +120,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
-      <div placeholder="请输入留言" rows="1" class="van-cell van-hairline van-field">
+      <div placeholder="请输入留言" rows="1" class="van-cell van-field">
         <!---->
         <div class="van-cell__title"><span>留言</span>
           <!---->
@@ -140,7 +140,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
-      <div placeholder="请输入短信验证码" class="van-cell van-cell--center van-hairline van-field">
+      <div placeholder="请输入短信验证码" class="van-cell van-cell--center van-field">
         <!---->
         <div class="van-cell__title"><span>短信验证码</span>
           <!---->
diff --git a/packages/field/test/__snapshots__/index.spec.js.snap b/packages/field/test/__snapshots__/index.spec.js.snap
index 6e64ba46d..203fdc2de 100644
--- a/packages/field/test/__snapshots__/index.spec.js.snap
+++ b/packages/field/test/__snapshots__/index.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`render textarea 1`] = `
-<div class="van-cell van-hairline van-field">
+<div class="van-cell van-field">
   <!---->
   <!---->
   <div class="van-cell__value van-cell__value--alone">
diff --git a/packages/panel/test/__snapshots__/demo.spec.js.snap b/packages/panel/test/__snapshots__/demo.spec.js.snap
index c6d57f2dc..c15935b60 100644
--- a/packages/panel/test/__snapshots__/demo.spec.js.snap
+++ b/packages/panel/test/__snapshots__/demo.spec.js.snap
@@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom van-panel">
-      <div class="van-cell van-hairline van-panel__header">
+      <div class="van-cell van-panel__header">
         <!---->
         <div class="van-cell__title"><span>标题</span>
           <div class="van-cell__label">描述信息</div>
@@ -20,7 +20,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom van-panel">
-      <div class="van-cell van-hairline van-panel__header">
+      <div class="van-cell van-panel__header">
         <!---->
         <div class="van-cell__title"><span>标题</span>
           <div class="van-cell__label">描述信息</div>
diff --git a/packages/radio/test/__snapshots__/demo.spec.js.snap b/packages/radio/test/__snapshots__/demo.spec.js.snap
index 2aaf12d87..47444dd2c 100644
--- a/packages/radio/test/__snapshots__/demo.spec.js.snap
+++ b/packages/radio/test/__snapshots__/demo.spec.js.snap
@@ -17,7 +17,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-radio-group">
       <div class="van-cell-group van-hairline--top-bottom">
-        <div class="van-cell van-cell--clickable van-hairline">
+        <div class="van-cell van-cell--clickable">
           <!---->
           <div class="van-cell__title"><span>单选框1</span>
             <!---->
@@ -29,7 +29,7 @@ exports[`renders demo correctly 1`] = `
           </div>
           <!---->
         </div>
-        <div class="van-cell van-cell--clickable van-hairline">
+        <div class="van-cell van-cell--clickable">
           <!---->
           <div class="van-cell__title"><span>单选框2</span>
             <!---->
diff --git a/packages/search/test/__snapshots__/demo.spec.js.snap b/packages/search/test/__snapshots__/demo.spec.js.snap
index 479ade09d..140a66d57 100644
--- a/packages/search/test/__snapshots__/demo.spec.js.snap
+++ b/packages/search/test/__snapshots__/demo.spec.js.snap
@@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-search" style="background:#f2f2f2;">
-      <div placeholder="请输入搜索关键词" class="van-cell van-field">
+      <div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field">
         <i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;font-size:undefined;">
           <!---->
         </i>
@@ -26,7 +26,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <form action="/">
       <div class="van-search van-search--show-action" style="background:#f2f2f2;">
-        <div placeholder="请输入搜索关键词" class="van-cell van-field">
+        <div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field">
           <i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;font-size:undefined;">
             <!---->
           </i>
@@ -50,7 +50,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-search van-search--show-action" style="background:#f2f2f2;">
-      <div placeholder="请输入搜索关键词" class="van-cell van-field">
+      <div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field">
         <i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;font-size:undefined;">
           <!---->
         </i>
diff --git a/packages/swipe-cell/test/__snapshots__/demo.spec.js.snap b/packages/swipe-cell/test/__snapshots__/demo.spec.js.snap
index 7e5ec8fe9..0828d17c6 100644
--- a/packages/swipe-cell/test/__snapshots__/demo.spec.js.snap
+++ b/packages/swipe-cell/test/__snapshots__/demo.spec.js.snap
@@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-swipe-cell__wrapper" style="transform:translate3d(0px, 0, 0);transition:.6s cubic-bezier(0.18, 0.89, 0.32, 1);">
           <div class="van-swipe-cell__left"><span>选择</span></div>
           <div class="van-cell-group van-hairline--top-bottom">
-            <div class="van-cell van-hairline">
+            <div class="van-cell">
               <!---->
               <div class="van-cell__title"><span>单元格</span>
                 <!---->
@@ -33,7 +33,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-swipe-cell__wrapper" style="transform:translate3d(0px, 0, 0);transition:.6s cubic-bezier(0.18, 0.89, 0.32, 1);">
           <div class="van-swipe-cell__left"><span>选择</span></div>
           <div class="van-cell-group van-hairline--top-bottom">
-            <div class="van-cell van-hairline">
+            <div class="van-cell">
               <!---->
               <div class="van-cell__title"><span>单元格</span>
                 <!---->
diff --git a/packages/switch-cell/test/__snapshots__/demo.spec.js.snap b/packages/switch-cell/test/__snapshots__/demo.spec.js.snap
index 0df2046d2..6c003620b 100644
--- a/packages/switch-cell/test/__snapshots__/demo.spec.js.snap
+++ b/packages/switch-cell/test/__snapshots__/demo.spec.js.snap
@@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
-      <div class="van-cell van-cell--center van-switch-cell">
+      <div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
         <!---->
         <div class="van-cell__title"><span>标题</span>
           <!---->
@@ -22,7 +22,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
-      <div class="van-cell van-cell--center van-switch-cell">
+      <div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
         <!---->
         <div class="van-cell__title"><span>标题</span>
           <!---->
@@ -40,7 +40,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
-      <div class="van-cell van-cell--center van-switch-cell">
+      <div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
         <!---->
         <div class="van-cell__title"><span>标题</span>
           <!---->
diff --git a/packages/vant-css/src/cell.css b/packages/vant-css/src/cell.css
index f60b7e358..260c6cf78 100644
--- a/packages/vant-css/src/cell.css
+++ b/packages/vant-css/src/cell.css
@@ -13,8 +13,11 @@
   overflow: hidden;
 
   &:not(:last-child)::after {
-    margin-left: 15px;
-    border-bottom-width: 1px;
+    @include hairline-bottom($border-color, 15px);
+  }
+
+  &--borderless::after {
+    display: none;
   }
 
   &-group {
diff --git a/packages/vant-css/src/mixins/hairline.css b/packages/vant-css/src/mixins/hairline.css
index 825f83bf7..dede535a2 100644
--- a/packages/vant-css/src/mixins/hairline.css
+++ b/packages/vant-css/src/mixins/hairline.css
@@ -1,12 +1,27 @@
-@mixin hairline($border-color: #eee) {
-  content: '';
+@mixin hairline-common() {
+  content: ' ';
   position: absolute;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+@mixin hairline($border-color: #eee) {
+  @include hairline-common;
+
   top: -50%;
   left: -50%;
   right: -50%;
   bottom: -50%;
   transform: scale(0.5);
-  pointer-events: none;
-  box-sizing: border-box;
   border: 0 solid $border-color;
 }
+
+@mixin hairline-bottom($border-color: #eee, $left: 0) {
+  @include hairline-common;
+
+  left: $left;
+  right: 0;
+  bottom: 0;
+  transform: scaleY(0.5);
+  border-bottom: 1px solid $border-color;
+}