cell and cell-group component

packages/button/index.pcss

@@ -1 +0,0 @@
-@import "./src/button.pcss";

packages/cell-group/index.js

@@ -0,0 +1,3 @@
+import CellGroup from '../cell/src/cell-group';
+
+export default CellGroup;

packages/cell/src/cell-group.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="o2-cell-group">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'o2-cell-group'
+};
+</script>

packages/cell/src/cell.vue

@@ -6,9 +6,10 @@
       </slot>
       <slot name="title">
         <span class="o2-cell-text" v-text="title"></span>
+        <span class="o2-cell-label" v-text="label"></span>
       </slot>
     </div>
-    <div class="o2-cell-value">
+    <div class="o2-cell-value" :class="{ 'is-link' : isLink }">
       <slot>
         <span v-text="value"></span>
       </slot>
@@ -26,34 +27,8 @@ export default {
     title: String,
     value: String,
     url: String,
+    label: String,
     isLink: Boolean
   }
 };
 </script>
-
-<style>
-@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;
-    }
-
-    @descendent value {
-      float: right;
-    }
-  }
-}
-</style>

packages/switch/index.pcss

@@ -1 +0,0 @@
-@import "./src/switch.pcss";

packages/zanui/src/button.pcss

@@ -1,4 +1,4 @@
-@import "../../zenui/src/common/var.pcss";
+@import "./common/var.pcss";
 
 @component-namespace o2 {
   @component button {

packages/zanui/src/cell.pcss

@@ -0,0 +1,63 @@
+@import "./common/var.pcss";
+@import "./mixins/border_retina.pcss";
+
+@component-namespace o2 {
+  @component cell-group {
+    padding-left: 10px;
+    position: relative;
+
+    &::after {
+      @mixin border-retina (top, bottom);
+    }
+  }
+
+  @component cell {
+    display: block;
+    overflow: hidden;
+    position: relative;
+    padding: 10px 10px 10px 0;
+    line-height: 22px;
+    background-color: $c-white;
+    color: #333;
+    font-size: 14px;
+    text-decoration: none;
+
+    &::after {
+      @mixin border-retina (bottom);
+    }
+
+    &:last-child {
+      &::after {
+        border-bottom: 0;
+      }
+    }
+
+    @descendent title {
+      float: left;
+    }
+
+    @descendent label {
+      display: block;
+      font-size: 12px;
+      line-height: 1.2;
+      color: #666;
+    }
+
+    @descendent value {
+      float: right;
+
+      @when link {
+        margin-right: 20px;
+      }
+    }
+
+    .zui-icon-arrow {
+      position: absolute;
+      top: 50%;
+      right: 10px;
+      transform: translateY(-50%);
+      color: #999;
+      font-size: 12px;
+    }
+  }
+}

packages/zanui/src/index.pcss

@@ -0,0 +1,7 @@
+/**
+  css组件库入口，组装成css组件库
+ */
+@import './button.pcss';
+@import './cell.pcss';
+@import './icon.pcss';
+@import './switch.pcss';

packages/zanui/src/mixins/border_retina.pcss

@@ -0,0 +1,20 @@
+$border-poses: top, right, bottom, left;
+
+@define-mixin border-retina $poses: $border-poses, $border-retina-color: #e5e5e5 {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  transform: scale(.5);
+  transform-origin: left top;
+  -webkit-perspective: 1000;
+  -webkit-backface-visibility: hidden;
+  pointer-events: none;
+
+  @each $pos in $poses {
+    border-$(pos): 1px solid $border-retina-color;
+  }
+}

packages/zenui/src/index.pcss

@@ -1,6 +0,0 @@
-/**
-  css组件库 入口,从各个地方拿css文件，组装成css组件库
- */
-@import '../../button/index.pcss';
-@import '../../switch/index.pcss';
-@import './icon.pcss';