cell component

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>
 ```
 :::
 

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;