From e62665f3bc5faaed29f7c07e9fea0fd5e49c5f6b Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Mon, 13 Feb 2017 19:24:03 +0800
Subject: [PATCH] cell component

---
 docs/examples/cell.md      | 13 ++++++++++++-
 packages/cell/src/cell.vue | 13 ++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/docs/examples/cell.md b/docs/examples/cell.md
index 2b4ac75e2..036fd737e 100644
--- a/docs/examples/cell.md
+++ b/docs/examples/cell.md
@@ -1,10 +1,21 @@
+<style>
+.cell-groups {
+  padding-left: 10px;
+  border-top: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+}
+</style>
+
 ## Cell 组件
 
 ### 基础用法
 
 :::demo 样例代码
 ```html
-<o2-cell title="单元格" value="单元格标题"></o2-cell>
+<div class="cell-groups">
+  <o2-cell title="单元格1" value="单元格1内容"></o2-cell>
+  <o2-cell title="单元格2" value="单元格2内容"></o2-cell>
+</div>
 ```
 :::
 
diff --git a/packages/cell/src/cell.vue b/packages/cell/src/cell.vue
index 4bf4265fc..115e164df 100644
--- a/packages/cell/src/cell.vue
+++ b/packages/cell/src/cell.vue
@@ -12,8 +12,8 @@
       <slot>
         <span v-text="value"></span>
       </slot>
-      <i class="o2-cell-arrow-right" v-if="isLink"></i>
     </div>
+    <i class="o2-cell-arrow-right" v-if="isLink"></i>
   </a>
 </template>
 
@@ -35,6 +35,17 @@ export default {
 @component-namespace o2 {
   @component cell {
     display: block;
+    overflow: hidden;
+    position: relative;
+    padding: 10px 10px 10px 0;
+    line-height: 22px;
+    color: #666;
+    text-decoration: none;
+    border-bottom: 1px solid #ccc;
+
+    &:last-child {
+      border-bottom: 0;
+    }
 
     @descendent title {
       float: left;