Merge remote-tracking branch 'origin/master' into hotfix/waterfall

2025-04-06 03:57:59 +08:00 · 2017-02-27 10:35:19 +08:00 · 2017-02-27 10:35:19 +08:00 · 7d95d626a5
commit 7d95d626a5
parent 787ff255b8 a8bbc42cda
91 changed files with 939 additions and 268 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,8 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "transform-vue-jsx"
+  ]
+}
--- a/.gitignore
+++ b/.gitignore
@ -9,3 +9,4 @@ lib/*
 !lib/style.css
 node_modules
 example/dist
+dist
--- a/2
+++ b/2
@ -11,4 +11,4 @@ init:
 	node build/bin/init.js $(filter-out $@,$(MAKECMDGOALS))

 dev:
-	npm run docs
+	npm run dev
--- a/README.md
+++ b/README.md
@ -0,0 +1,35 @@
+## 下载项目
+```bash
+git@gitlab.qima-inc.com:fe/oxygen.git
+cd oxygen
+```
+
+## 安装组件依赖库
+```bash
+ynpm i
+```
+
+## 新建组件（以waterfall为例）
+新建一个Vue组件，比如  waterfall
+```bash
+make init waterfall
+```
+就可以在 packages目录 里面看到waterfall初始化的组件代码了。记得更新package.json和README.md里的组件描述信息
+
+## 示例预览（以waterfall为例）
+在 docs/nav.config.json 文件里合适的地方写入组件声明，根据组件类型（JS组件，CSS组件，Form等）进行区分
+在 docs/examples 目录里新建 同名的md文件，如 waterfall.md
+在项目的根目录下执行以下命令，启动server
+```
+make dev
+```
+浏览器访问 http://localhost:8080/#/ 就可以看到所有组件的示例了
+
+
+
+
+
+
+
+
+
--- a/build/bin/build-all.js
+++ b/build/bin/build-all.js
@ -10,15 +10,15 @@ let componentPaths = [];
 delete components.font;

 Object.keys(components).forEach(key => {
-  const filePath = path.join(__dirname, `../../packages/${key}/cooking.conf.js`);
+  const filePath = path.join(__dirname, `../../packages/${key}/webpack.conf.js`);

  if (existsSync(filePath)) {
-    componentPaths.push(`packages/${key}/cooking.conf.js`);
+    componentPaths.push(`packages/${key}/webpack.conf.js`);
  }
 });

 const paths = componentPaths.join(',');
-const cli = `node_modules/.bin/cooking build -c ${paths} -p`;
+const cli = `node_modules/.bin/webpack build -c ${paths} -p`;

 execSync(cli, {
  stdio: 'inherit'
--- a/build/bin/build-entry.js
+++ b/build/bin/build-entry.js
@ -8,8 +8,6 @@ var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
 var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
 var ISNTALL_COMPONENT_TEMPLATE = '  Vue.component({{name}}.name, {{name}});';
 var MAIN_TEMPLATE = `{{include}}
-// zanui
-import '../packages/zanui-css/src/index.pcss';

 const install = function(Vue) {
  if (install.installed) return;
--- a/build/release.sh
+++ b/build/release.sh
@ -0,0 +1,38 @@
+git checkout master
+git merge dev
+
+#!/usr/bin/env sh
+set -e
+echo "Enter release version: "
+read VERSION
+
+read -p "Releasing $VERSION - are you sure? (y/n)" -n 1 -r
+echo    # (optional) move to a new line
+if [[ $REPLY =~ ^[Yy]$ ]]
+then
+  echo "Releasing $VERSION ..."
+
+  # build
+  VERSION=$VERSION npm run dist
+
+  # publish zanui-css
+  echo "Releasing zanui-css $VERSION ..."
+  cd packages/zanui-css
+  npm version $VERSION --message "[release] $VERSION"
+  npm publish
+  cd ../..
+
+  # commit
+  git add -A
+  git commit -m "[build] $VERSION"
+  npm version $VERSION --message "[release] $VERSION"
+
+  # publish
+  git push origin master
+  git push origin refs/tags/v$VERSION
+  git checkout dev
+  git rebase master
+  git push origin dev
+
+  npm publish
+fi
--- a/build/webpack.build.js
+++ b/build/webpack.build.js
@ -1,13 +1,19 @@
-var config = require('./webpack.config.js')
+var config = require('./webpack.config.js');

 config.entry = {
-  'oxygen': './src/index.js'
-}
+  'zanui': './src/index.js'
+};

 config.output = {
-  filename: './dist/[name].js',
-  library: 'Oxygen',
+  filename: './lib/[name].js',
+  library: 'zanui',
  libraryTarget: 'umd'
-}
+};

-module.exports = config
+config.externals = {
+  vue: 'Vue'
+};
+
+delete config.devtool;
+
+module.exports = config;
--- a/build/webpack.build.min.js
+++ b/build/webpack.build.min.js
@ -1,19 +1,20 @@
-var config = require('./webpack.build.js')
-var webpack = require('webpack')
+var config = require('./webpack.build.js');
+var webpack = require('webpack');

-
-config.output.filename = config.output.filename.replace(/\.js$/, '.min.js')
-
-delete config.devtool
+config.output.filename = config.output.filename.replace(/\.js$/, '.min.js');

 config.plugins = [
+  new webpack.LoaderOptionsPlugin({
+    minimize: true,
+    debug: false
+  }),
  new webpack.optimize.UglifyJsPlugin({
-    sourceMap: false,
-    drop_console: true,
+    comments: false,
    compress: {
+      drop_console: true,
      warnings: false
    }
  })
-]
+];

-module.exports = config
+module.exports = config;
--- a/build/webpack.config.js
+++ b/build/webpack.config.js
@ -24,7 +24,8 @@ function wrap(render) {

 module.exports = {
  entry: {
-    'build-docs': './docs/index.js'
+    'zanui-docs': './docs/index.js',
+    'zanui-examples': './docs/examples.js'
  },
  output: {
    path: './docs/build',
@ -39,7 +40,7 @@ module.exports = {
    extensions: ['.js', '.vue', '.pcss'],
    alias: {
      'vue$': 'vue/dist/vue.runtime.common.js',
-      'oxygen': path.join(__dirname, '..'),
+      'zanui': path.join(__dirname, '..'),
      'src': path.join(__dirname, '../src'),
      'packages': path.join(__dirname, '../packages')
    }
@ -57,10 +58,6 @@ module.exports = {
      },
      {
        test: /\.css$/,
-        loader: 'style-loader!css-loader?root=./docs/'
-      },
-      {
-        test: /\.pcss$/,
        loader: 'style-loader!css-loader!postcss-loader'
      },
      {
@ -91,8 +88,12 @@ if (process.env.NODE_ENV === 'production') {
    }),
    new ExtractTextPlugin(`yzvue_base_${version}_min.css`),
    new webpack.optimize.UglifyJsPlugin({
-      compress: {warnings: false},
-      output: {comments: false},
+      compress: {
+        warnings: false
+      },
+      output: {
+        comments: false
+      },
      sourceMap: false
    }),
    new webpack.LoaderOptionsPlugin({
--- a/components.json
+++ b/components.json
@ -10,5 +10,8 @@
  "dialog": "./packages/dialog/index.js",
  "picker": "./packages/picker/index.js",
  "radio-group": "./packages/radio-group/index.js",
-  "waterfall": "./packages/waterfall/index.js"
+  "waterfall": "./packages/waterfall/index.js",
+  "loading": "./packages/loading/index.js",
+  "panel": "./packages/panel/index.js",
+  "card": "./packages/card/index.js"
 }
--- a/packages/switch/CHANGELOG.md
+++ b/packages/switch/CHANGELOG.md
--- a/docs/ExamplesDocsApp.vue
+++ b/docs/ExamplesDocsApp.vue
@ -21,6 +21,8 @@ export default {
 </script>

 <style lang="css">
+  @import './assets/docs.css';
+
  .page-container {
    width: 1140px;
    padding: 0 30px;
--- a/docs/examples-docs/button.md
+++ b/docs/examples-docs/button.md
@ -1,7 +1,7 @@
 <style lang="css">
  @component-namespace z {
    @component button-group {
-      .z-button-1-1 {
+      .z-button-1 {
        margin-bottom: 15px;
      }
    }
@ -15,13 +15,13 @@
 :::demo 只接受primary, default, danger三种类型，默认default
 ```html
 <div class="z-button-group">
-  <div class="z-button-1-1">
+  <div class="z-button-1">
    <z-button>default</z-button>
  </div>
-  <div class="z-button-1-1">
+  <div class="z-button-1">
    <z-button type="primary">primary</z-button>
  </div>
-  <div class="z-button-1-1">
+  <div class="z-button-1">
    <z-button type="danger">danger</z-button>
  </div>
 </div>
@ -33,7 +33,7 @@
 :::demo 
 ```html
 <div class="z-button-group">
-  <div class="z-button-1-1">
+  <div class="z-button-1">
    <z-button disabled>diabled</z-button>
  </div>
 </div>
@ -45,18 +45,18 @@
 :::demo 只接受large, normal, small, mini四种尺寸，默认normal
 ```html 
 <div class="z-button-group">
-  <div class="z-button-1-1">
+  <div class="z-button-1">
    <z-button size="large">large</z-button>
  </div>
 </div>
 <div class="z-button-group" :style="{ width: '50%' }">
-  <div class="z-button-3-1">
+  <div class="z-button-3">
    <z-button type="primary">normal</z-button>
  </div>
-  <div class="z-button-3-1">
+  <div class="z-button-3">
    <z-button size="small">small</z-button>
  </div>
-  <div class="z-button-3-1">
+  <div class="z-button-3">
    <z-button size="mini">mini</z-button>
  </div>
 </div>
@ -66,16 +66,27 @@

 ### 自定义按钮标签

-:::demo 有时按钮需要是一个a标签
+:::demo 按钮默认是button标签，可以使用tag属性修改为一个a标签
 ```html 
 <div class="z-button-group">
-  <div class="z-button-1-1">
+  <div class="z-button-1">
    <z-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</z-button>
  </div>
 </div>
 ```
 :::

+### button group
+:::demo 一组按钮
+```html 
+<div class="z-button-group">
+  <z-button type="primary" size="small">确认付款</z-button>
+  <z-button size="small">确认收货</z-button>
+  <z-button size="small">取消订单</z-button>
+</div>
+```
+:::
+

 ### API

--- a/docs/examples-docs/card.md
+++ b/docs/examples-docs/card.md
@ -0,0 +1,60 @@
+## Card 图文组件
+
+### 基础用法
+
+当没有底部按钮时，右侧内容会居中显示。
+
+:::demo 不带底部按钮时，右侧内容会居中显示。
+```html
+<z-card
+  title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+  desc="描述"
+  thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+</z-card>
+
+```
+:::
+
+### 高级用法
+
+可以使用具名`slot`自定义对应的内容。
+
+:::demo 可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
+```html
+<z-card
+  title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+  desc="商品SKU1，商品SKU2"
+  thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+  <div class="z-card__row" slot="title">
+    <h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+    <span class="z-card__price">¥ 2.00</span>
+  </div>
+  <div class="z-card__row" slot="desc">
+    <h4 class="z-card__desc">商品sku</h4>
+    <span class="z-card__num">x 2</span>
+  </div>
+  <div class="z-card__footer" slot="footer">
+    <z-button size="mini">按钮一</z-button>
+    <z-button size="mini">按钮二</z-button>
+  </div>
+</z-card>
+```
+:::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| thumb | 左侧图片 | string  | ''          | ''          |
+| title | 标题 | string  | ''          | ''          |
+| desc | 描述 | string  | ''          | ''          |
+
+
+### Slot
+
+| name       | 描述      |
+|-----------|-----------|
+| title | 自定义标题 |
+| desc | 自定义描述 |
+| tags | 自定义tags |
+| footer | 自定义footer |
--- a/docs/examples-docs/cell.md
+++ b/docs/examples-docs/cell.md
--- a/docs/examples-docs/checkbox.md
+++ b/docs/examples-docs/checkbox.md
--- a/docs/examples-docs/dialog.md
+++ b/docs/examples-docs/dialog.md
--- a/docs/examples-docs/field.md
+++ b/docs/examples-docs/field.md
--- a/docs/examples-docs/panel.md
+++ b/docs/examples-docs/panel.md
@ -0,0 +1,107 @@
+<style>
+.z-panel-sum {
+  background: #fff;
+  text-align: right;
+  font-size: 14px;
+  color: #333;
+  line-height: 30px;
+  padding-right: 15px;
+
+  span {
+    color: red;
+  }
+}
+
+.z-panel-buttons {
+  text-align: right;
+
+  .z-button {
+    margin-left: 5px;
+  }
+}
+</style>
+
+## Panel 面板
+
+面板只是一个容器，里面可以放入自定义的内容。
+
+### 基础用法
+
+:::demo
+```html
+<z-panel title="标题" desc="标题描述" status="状态">
+  <z-card
+    title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+    desc="商品SKU1，商品SKU2"
+    thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+    <div class="z-card__row" slot="title">
+      <h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+      <span class="z-card__price">¥ 2.00</span>
+    </div>
+    <div class="z-card__row" slot="desc">
+      <h4 class="z-card__desc">商品sku</h4>
+      <span class="z-card__num">x 2</span>
+    </div>
+    <div class="z-card__footer" slot="footer">
+      <z-button size="mini">按钮一</z-button>
+      <z-button size="mini">按钮二</z-button>
+    </div>
+  </z-card>
+  <div class="z-panel-sum">
+    合计：<span>¥ 1999.90</span>
+  </div>
+</z-panel>
+```
+:::
+
+### 高级用法
+
+使用具名`slot`自定义内容。
+
+:::demo
+```html
+<z-panel title="标题" desc="标题描述" status="状态">
+  <z-card
+    title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+    desc="商品SKU1，商品SKU2"
+    thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+    <div class="z-card__row" slot="title">
+      <h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+      <span class="z-card__price">¥ 2.00</span>
+    </div>
+    <div class="z-card__row" slot="desc">
+      <h4 class="z-card__desc">商品sku</h4>
+      <span class="z-card__num">x 2</span>
+    </div>
+    <div class="z-card__footer" slot="footer">
+      <z-button size="mini">按钮一</z-button>
+      <z-button size="mini">按钮二</z-button>
+    </div>
+  </z-card>
+  <div class="z-panel-sum">
+    合计：<span>¥ 1999.90</span>
+  </div>
+  <div class="z-panel-buttons" slot="footer">
+    <z-button size="small">按钮一</z-button>
+    <z-button size="small" type="danger">按钮二</z-button>
+  </div>
+</z-panel>
+```
+:::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| title | 标题 | string  | ''          | ''          |
+| desc | 描述 | string  | ''          | ''          |
+| status | 状态 | string  | ''          | ''          |
+
+
+### Slot
+
+| name       | 描述      |
+|-----------|-----------|
+| - | 自定义内容 |
+| header | 自定义header |
+| footer | 自定义footer |
--- a/docs/examples-docs/picker.md
+++ b/docs/examples-docs/picker.md
--- a/docs/examples-docs/popup.md
+++ b/docs/examples-docs/popup.md
--- a/docs/examples-docs/radio.md
+++ b/docs/examples-docs/radio.md
--- a/docs/examples-docs/switch.md
+++ b/docs/examples-docs/switch.md
@ -43,13 +43,17 @@ export default {
 :::demo 样例代码
 ```html
 <div class="page-switch">
-  <div class="page-switch-wrapper">
+  <div class="page-switch__wrapper">
    <o2-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></o2-switch>
-    <div class="page-switch-text">{{switchStateText}}</div>
+    <div class="page-switch__text">{{switchStateText}}</div>
  </div>
-  <div class="page-switch-wrapper">
+  <div class="page-switch__wrapper">
    <o2-switch class="some-customized-class" :checked="true" :disabled="true"></o2-switch>
-    <div class="page-switch-text">OFF, DISABLED</div>
+    <div class="page-switch__text">ON, DISABLED</div>
+  </div>
+  <div class="page-switch__wrapper">
+    <o2-switch class="some-customized-class" :checked="false" :disabled="true"></o2-switch>
+    <div class="page-switch__text">OFF, DISABLED</div>
  </div>
 </div>
 ```
--- a/docs/examples-docs/waterfall.md
+++ b/docs/examples-docs/waterfall.md
--- a/docs/examples.js
+++ b/docs/examples.js
--- a/docs/examples/button.vue
+++ b/docs/examples/button.vue
@ -0,0 +1,10 @@
+<template>
+  <div class="button-demos">
+  </div>
+</template>
+
+<script>
+export default {
+
+};
+</script>
--- a/docs/index.js
+++ b/docs/index.js
@ -1,12 +1,13 @@
-import './assets/docs.css';
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import App from './App';
+import App from './ExamplesDocsApp';
 import routes from './router.config';
 import demoBlock from './components/demo-block';
 import SideNav from './components/side-nav';
 import Oxygen from '../src/index';

+import 'packages/zanui-css/src/index.css';
+
 Vue.use(Oxygen);
 Vue.use(VueRouter);
 Vue.component('demo-block', demoBlock);
--- a/docs/nav.config.json
+++ b/docs/nav.config.json
@ -14,17 +14,33 @@
              "path": "/cell",
              "title": "Cell"
            },
-            {
-              "path": "/loading",
-              "title": "Loading"
-            },
            {
              "path": "/progress",
              "title": "Progress"
            },
+            {
+              "path": "/panel",
+              "title": "Panel"
+            },
            {
              "path": "/card",
              "title": "Card"
+            },
+            {
+              "path": "/loading",
+              "title": "Loading"
+            },
+            {
+              "path": "/steps",
+              "title": "Steps"
+            },
+            {
+              "path": "/badge",
+              "title": "Badge"
+            },
+            {
+              "path": "/search",
+              "title": "Search"
            }
          ]
        },
@ -92,10 +108,6 @@
              "path": "/waterfall",
              "title": "Waterfall"
            },
-            {
-              "path": "/dialog",
-              "title": "Dialog"
-            },
            {
              "path": "/img-preview",
              "title": "Img Preview"
--- a/docs/router.config.js
+++ b/docs/router.config.js
@ -23,7 +23,7 @@ const registerRoute = (navConfig) => {
    route.push({
      path: '/component' + page.path,
      component: function(resolve) {
-        require([`./examples${page.path}.md`], resolve);
+        require([`./examples-docs${page.path}.md`], resolve);
      }
    });
  }
--- a/examples.html
+++ b/examples.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Oxygen</title>
+</head>
+<body>
+
+  <div id="app-container">
+    <app></app>
+  </div>
+
+<script src="docs/build/zanui-examples.js"></script>
+</body>
+</html>
--- a/index.html
+++ b/index.html
@ -11,6 +11,6 @@
    <app></app>
  </div>

-<script src="docs/build/build-docs.js"></script>
+<script src="docs/build/zanui-docs.js"></script>
 </body>
 </html>
--- a/package.json
+++ b/package.json
@ -2,8 +2,8 @@
  "name": "@youzan/oxygen",
  "version": "0.0.1",
  "description": "有赞vue wap组件库",
-  "main": "lib/oxygen.js",
-  "style": "lib/style.css",
+  "main": "lib/zanui.js",
+  "style": "lib/zanui-css/index.css",
  "files": [
    "lib",
    "src",
@ -11,11 +11,13 @@
  ],
  "scripts": {
    "bootstrap": "npm i --registry=http://registry.npm.qima-inc.com",
+    "dev": "npm run bootstrap && npm run build:file && webpack-dev-server --inline --hot --config build/webpack.config.js",
    "build:file": "node build/bin/build-entry.js",
-    "build": "npm run clean && npm run lint && npm run build:file && npm run concat:dev && npm run concat:prod",
-    "dev": "npm run bootstrap && npm run build:file",
+    "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
+    "build:zanui-css": "gulp build --gulpfile packages/zanui-css/gulpfile.js && cp-cli packages/zanui-css/lib lib/zanui-css",
+    "build:zanui": "webpack --progress --hide-modules --config build/webpack.build.js && webpack --progress --hide-modules --config build/webpack.build.min.js",
+    "dist": "npm run clean && npm run build:file && npm run lint && npm run build:zanui && npm run build:utils && npm run build:zanui-css",
    "builddocs": "webpack --progress --hide-modules --config  build/webpack.config.js && set NODE_ENV=production webpack --progress --hide-modules --config  build/webpack.config.js",
-    "docs": "npm run dev && webpack-dev-server --inline --hot --config  build/webpack.config.js",
    "clean": "rimraf lib && rimraf packages/*/lib",
    "lint": "eslint src/**/*.js packages/**/*.{js,vue} --quiet"
  },
--- a/packages/button/package.json
+++ b/packages/button/package.json
@ -2,7 +2,7 @@
  "name": "@youzan/z-button",
  "version": "0.0.1",
  "description": "button component",
-  "main": "./lib/index.js",
+  "main": "./index.js",
  "author": "niunai",
  "license": "MIT",
  "devDependencies": {},
--- a/packages/button/src/button.js
+++ b/packages/button/src/button.js
@ -42,6 +42,12 @@ export default {
    }
  },

+  methods: {
+    handleClick() {
+      this.$emit('click');
+    }
+  },
+
  render(h) {
    let { type, nativeType, size, disabled, loading, block } = this;
    let Tag = this.tag;
@ -60,6 +66,7 @@ export default {
            'is-block': block
          }
        ]}
+        onClick={this.handleClick}
      >
        {
          loading ? <i class="z-icon-loading"></i> : null
--- a/packages/radio-group/CHANGELOG.md
+++ b/packages/radio-group/CHANGELOG.md
--- a/packages/radio-group/README.md
+++ b/packages/radio-group/README.md
--- a/packages/card/index.js
+++ b/packages/card/index.js
@ -0,0 +1,3 @@
+import Card from './src/card';
+
+export default Card;
--- a/packages/radio-group/package.json
+++ b/packages/radio-group/package.json
--- a/packages/card/src/card.vue
+++ b/packages/card/src/card.vue
@ -0,0 +1,31 @@
+<template>
+  <div class="z-card">
+    <img :src="thumb" alt="" class="z-card__img">
+    <div class="z-card__content" :class="{'is-center': !this.$slots.footer}">
+      <div class="z-card__info">
+        <slot name="title">
+          <h4 v-text="title" class="z-card__title"></h4>
+        </slot>
+        <slot name="desc">
+          <p v-if="desc" v-text="desc" class="z-card__title"></p>
+        </slot>
+        <slot name="tags"></slot>
+      </div>
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'z-card',
+  props: {
+    thumb: {
+      type: String,
+      required: true
+    },
+    title: String,
+    desc: String
+  }
+};
+</script>
--- a/packages/cell/package.json
+++ b/packages/cell/package.json
@ -1,10 +1,10 @@
 {
-  "name": "<%= name %>",
-  "version": "<%= version %>",
-  "description": "<%= description %>",
-  "main": "./lib/index.js",
-  "author": "<%= author %>",
-  "license": "<%= license %>",
+  "name": "@youzan/z-cell",
+  "version": "0.0.1",
+  "description": "cell component",
+  "main": "./index.js",
+  "author": "zhangmin <zhangmin@youzan.com>",
+  "license": "MIT",
  "devDependencies": {},
  "dependencies": {}
 }
--- a/packages/cell/src/cell.vue
+++ b/packages/cell/src/cell.vue
@ -1,15 +1,15 @@
 <template>
  <a class="z-cell" :href="url" @click="handleClick">
-    <div class="z-cell-title">
+    <div class="z-cell__title">
      <slot name="icon">
        <i v-if="icon" class="zui-icon" :class="'zui-icon-' + icon"></i>
      </slot>
      <slot name="title">
-        <span class="z-cell-text" v-text="title"></span>
-        <span class="z-cell-label" v-if="label" v-text="label"></span>
+        <span class="z-cell__text" v-text="title"></span>
+        <span class="z-cell__label" v-if="label" v-text="label"></span>
      </slot>
    </div>
-    <div class="z-cell-value" :class="{ 'is-link' : isLink }">
+    <div class="z-cell__value" :class="{ 'is-link' : isLink }">
      <slot>
        <span v-text="value"></span>
      </slot>
--- a/packages/dialog/package.json
+++ b/packages/dialog/package.json
@ -1,10 +1,10 @@
 {
-  "name": "<%= name %>",
-  "version": "<%= version %>",
-  "description": "<%= description %>",
-  "main": "./lib/index.js",
-  "author": "<%= author %>",
-  "license": "<%= license %>",
+  "name": "@youzan/z-dialog",
+  "version": "0.0.1",
+  "description": "dialog component",
+  "main": "./index.js",
+  "author": "zhangmin <zhangmin@youzan.com>",
+  "license": "MIT",
  "devDependencies": {},
  "dependencies": {}
 }
--- a/packages/dialog/src/dialog.vue
+++ b/packages/dialog/src/dialog.vue
@ -2,15 +2,15 @@
  <transition name="dialog-bounce">
    <div class="z-dialog-wrapper">
      <div class="z-dialog" v-show="value">
-        <div class="z-dialog-header" v-if="title">
-          <div class="z-dialog-title" v-text="title"></div>
+        <div class="z-dialog__header" v-if="title">
+          <div class="z-dialog__title" v-text="title"></div>
        </div>
-        <div class="z-dialog-content" v-if="message">
-          <div class="z-dialog-message" v-html="message"></div>
+        <div class="z-dialog__content" v-if="message">
+          <div class="z-dialog__message" v-html="message"></div>
        </div>
-        <div class="z-dialog-footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
-          <button class="z-dialog-btn z-dialog-cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
-          <button class="z-dialog-btn z-dialog-confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
+        <div class="z-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
+          <button class="z-dialog__btn z-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
+          <button class="z-dialog__btn z-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
        </div>
      </div>
    </div>
@ -18,7 +18,7 @@
 </template>

 <script>
-import Popup from 'packages/popup';
+import Popup from 'src/mixins/popup';

 const CANCEL_TEXT = '取消';
 const CONFIRM_TEXT = '确认';
--- a/packages/field/package.json
+++ b/packages/field/package.json
@ -1,3 +1,10 @@
 {
-  "name": "z-field"
+  "name": "@youzan/z-field",
+  "version": "0.0.1",
+  "description": "form field component",
+  "main": "./index.js",
+  "author": "zhangmin <zhangmin@youzan.com>",
+  "license": "MIT",
+  "devDependencies": {},
+  "dependencies": {}
 }
--- a/packages/field/src/field.vue
+++ b/packages/field/src/field.vue
@ -8,7 +8,7 @@
    }">
    <textarea
      v-if="type === 'textarea'"
-      class="z-field-control"
+      class="z-field__control"
      v-model="currentValue"
      @change="$emit('change', currentValue)"
      :placeholder="placeholder"
@ -18,7 +18,7 @@
    </textarea>
    <input
      v-else
-      class="z-field-control"
+      class="z-field__control"
      :value="currentValue"
      @change="$emit('change', currentValue)"
      @input="handleInput"
--- a/packages/icon/package.json
+++ b/packages/icon/package.json
@ -1,5 +1,5 @@
 {
-  "name": "z-icon",
+  "name": "@youzan/z-icon",
  "version": "0.0.1",
  "description": "z-icon",
  "main": "index.js",
--- a/packages/loading/CHANGELOG.md
+++ b/packages/loading/CHANGELOG.md
@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版
--- a/packages/loading/README.md
+++ b/packages/loading/README.md
@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)
--- a/packages/loading/index.js
+++ b/packages/loading/index.js
@ -0,0 +1,3 @@
+import Loading from './src/loading';
+
+export default Loading;
--- a/packages/loading/package.json
+++ b/packages/loading/package.json
@ -0,0 +1,10 @@
+{
+  "name": "@youzan/z-loading",
+  "version": "0.0.1",
+  "description": "loading component",
+  "main": "./lib/index.js",
+  "author": "jiangruowei",
+  "license": "MIT",
+  "devDependencies": {},
+  "dependencies": {}
+}
--- a/packages/loading/src/loading.vue
+++ b/packages/loading/src/loading.vue
@ -0,0 +1,9 @@
+<template>
+  <div class="z-loading"></div>
+</template>
+
+<script>
+export default {
+  name: 'z-loading'
+};
+</script>
--- a/packages/panel/CHANGELOG.md
+++ b/packages/panel/CHANGELOG.md
@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版
--- a/packages/panel/README.md
+++ b/packages/panel/README.md
@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)
--- a/packages/panel/index.js
+++ b/packages/panel/index.js
@ -0,0 +1,3 @@
+import Panel from './src/panel';
+
+export default Panel;
--- a/packages/panel/package.json
+++ b/packages/panel/package.json
@ -0,0 +1,10 @@
+{
+  "name": "@youzan/z-panel",
+  "version": "0.0.1",
+  "description": "picker component",
+  "main": "./index.js",
+  "author": "zhangmin <zhangmin@youzan.com>",
+  "license": "MIT",
+  "devDependencies": {},
+  "dependencies": {}
+}
--- a/packages/panel/src/panel.vue
+++ b/packages/panel/src/panel.vue
@ -0,0 +1,28 @@
+<template>
+  <div class="z-panel">
+    <div class="z-panel__header">
+      <slot name="header">
+        <h4 class="z-panel__title" v-text="title"></h4>
+        <span class="z-panel__desc" v-if="desc" v-text="desc"></span>
+        <span class="z-panel__status" v-if="status" v-text="status"></span>
+      </slot>
+    </div>
+    <div class="z-panel__content">
+      <slot></slot>
+    </div>
+    <div class="z-panel__footer" v-if="this.$slots.footer">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'z-panel',
+  props: {
+    title: String,
+    desc: String,
+    status: String
+  }
+};
+</script>
--- a/packages/picker/package.json
+++ b/packages/picker/package.json
@ -1,10 +1,10 @@
 {
-  "name": "<%= name %>",
-  "version": "<%= version %>",
-  "description": "<%= description %>",
-  "main": "./lib/index.js",
-  "author": "<%= author %>",
-  "license": "<%= license %>",
+  "name": "@youzan/z-picker",
+  "version": "0.0.1",
+  "description": "picker component",
+  "main": "./index.js",
+  "author": "zhangmin <zhangmin@youzan.com>",
+  "license": "MIT",
  "devDependencies": {},
  "dependencies": {}
 }
--- a/packages/picker/src/picker-column.vue
+++ b/packages/picker/src/picker-column.vue
@ -154,7 +154,9 @@ export default {
      var el = this.$refs.wrapper;
      var dragState = {};

-      var velocityTranslate, prevTranslate, pickerItems;
+      var velocityTranslate;
+      var prevTranslate;
+      var pickerItems; // eslint-disable-line

      draggable(el, {
        start: (event) => {
@ -166,7 +168,7 @@ export default {
            startTop: event.pageY,
            startTranslateTop: translateUtil.getElementTranslate(el).top
          };
-          pickerItems = el.querySelectorAll('.z-picker-item');
+          pickerItems = el.querySelectorAll('.z-picker-item'); // eslint-disable-line
        },

        drag: (event) => {
--- a/packages/picker/src/picker.vue
+++ b/packages/picker/src/picker.vue
@ -98,7 +98,6 @@ export default {
     */
    getColumnValue(index) {
      let column = this.getColumn(index);
-      console.log(column)
      return column && column.values[column.valueIndex];
    },

--- a/packages/popup/package.json
+++ b/packages/popup/package.json
@ -1,10 +1,10 @@
 {
-  "name": "<%= name %>",
-  "version": "<%= version %>",
-  "description": "<%= description %>",
-  "main": "./lib/index.js",
-  "author": "<%= author %>",
-  "license": "<%= license %>",
+  "name": "@youzan/z-popup",
+  "version": "0.0.1",
+  "description": "popup component",
+  "main": "./index.js",
+  "author": "zhangmin <zhangmin@youzan.com>",
+  "license": "MIT",
  "devDependencies": {},
  "dependencies": {}
 }
--- a/packages/radio/package.json
+++ b/packages/radio/package.json
@ -1,10 +1,10 @@
 {
-  "name": "<%= name %>",
-  "version": "<%= version %>",
-  "description": "<%= description %>",
-  "main": "./lib/index.js",
-  "author": "<%= author %>",
-  "license": "<%= license %>",
+  "name": "@youzan/z-radio",
+  "version": "0.0.1",
+  "description": "radio component",
+  "main": "./index.js",
+  "author": "zhangmin <zhangmin@youzan.com>",
+  "license": "MIT",
  "devDependencies": {},
  "dependencies": {}
 }
--- a/packages/radio/src/radio.vue
+++ b/packages/radio/src/radio.vue
@ -1,5 +1,5 @@
 <template>
-  <z-cell
+  <div
    class="z-radio"
    :class="{
      'is-disabled': disabled
@ -11,19 +11,13 @@
    <span class="z-radio__label">
      <slot></slot>
    </span>
-  </z-cell>
+  </div>
 </template>

 <script>
-import zCell from 'packages/cell';
-
 export default {
  name: 'z-radio',

-  components: {
-    zCell
-  },
-
  props: {
    disabled: Boolean,
    value: {},
--- a/packages/switch/package.json
+++ b/packages/switch/package.json
@ -2,7 +2,7 @@
  "name": "@youzan/z-switch",
  "version": "0.0.1",
  "description": "switch component",
-  "main": "./lib/index.js",
+  "main": "./index.js",
  "author": "jiangruowei",
  "license": "MIT",
  "devDependencies": {},
--- a/packages/switch/src/switch.vue
+++ b/packages/switch/src/switch.vue
@ -1,6 +1,6 @@
 <template>
-  <div class="o2-switch" :class="['is-' + switchState]" @click="toggleState">
-    <div class="o2-switch-node" :class="['is-' + switchState]"></div>
+  <div class="z-switch" :class="switchState" @click="toggleState">
+    <div class="z-switch__node" :class="switchState"></div>
  </div>
 </template>

@ -39,15 +39,12 @@ export default {
  },
  computed: {
    switchState: function() {
-      if (this.disabled) {
-        return 'disabled';
-      } else if (this.loading) {
-        return 'loading';
-      } else if (this.checked) {
-        return 'on';
-      } else {
-        return 'off';
-      }
+      let switchState = this.checked ? ['is-on'] : ['is-off'];
+
+      if (this.disabled) switchState.push('is-disabled');
+      if (this.loading) switchState.push('is-loading');
+
+      return switchState;
    }
  },
  methods: {
--- a/packages/zanui-css/README.md
+++ b/packages/zanui-css/README.md
@ -0,0 +1 @@
+# zanui-css
--- a/packages/zanui-css/gulpfile.js
+++ b/packages/zanui-css/gulpfile.js
@ -0,0 +1,13 @@
+var gulp = require('gulp');
+var postcss = require('gulp-postcss');
+var cssmin = require('gulp-cssmin');
+var salad = require('postcss-salad')(require('./salad.config.json'));
+
+gulp.task('compile', function() {
+  return gulp.src('./src/*.css')
+    .pipe(postcss([salad]))
+    .pipe(cssmin())
+    .pipe(gulp.dest('./lib'));
+});
+
+gulp.task('build', ['compile']);
--- a/packages/zanui-css/package.json
+++ b/packages/zanui-css/package.json
@ -1,10 +1,22 @@
 {
-  "name": "@youzan/zenui",
+  "name": "@youzan/zanui-css",
  "version": "0.0.1",
-  "description": "wap component style",
-  "main": "./lib/index.js",
-  "author": "niunai",
+  "description": "zanui css.",
+  "main": "lib/index.css",
+  "style": "lib/index.css",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "build": "gulp build"
+  },
  "license": "MIT",
-  "devDependencies": {},
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-cssmin": "^0.1.7",
+    "gulp-postcss": "^6.1.1",
+    "postcss-salad": "^1.0.5"
+  },
  "dependencies": {}
 }
--- a/packages/zanui-css/salad.config.json
+++ b/packages/zanui-css/salad.config.json
@ -0,0 +1,16 @@
+{
+  "browsers": ["ie > 8", "last 2 versions"],
+  "features": {
+    "bem": {
+      "shortcuts": {
+        "component": "b",
+        "modifier": "m",
+        "descendent": "e"
+      },
+      "separators": {
+        "descendent": "__",
+        "modifier": "--"
+      }
+    }
+  }
+}
--- a/packages/zanui-css/src/button.pcss
+++ b/packages/zanui-css/src/button.pcss
@ -1,4 +1,4 @@
-@import "./common/var.pcss";
+@import "./common/var.css";

@component-namespace z {
  @b button {
@ -63,6 +63,9 @@
      font-size: 12px;
    }

+    /*
+      mini图标默认宽度50px，文字不能超过4个
+     */
    @m mini {
      display: inline-block;
      width: 50px;
--- a/packages/zanui-css/src/button_group.pcss
+++ b/packages/zanui-css/src/button_group.pcss
@ -2,7 +2,7 @@
  display: inline-block;
  box-sizing: border-box;
  padding-right: 10px;
-  &:last-child {
+  &::last-child {
    padding-right: 0;
  }
  .z-button {
@ -13,16 +13,23 @@
@component-namespace z {
  @b button-group {
    font-size: 0;
+
+    > .z-button {
+      margin-right: 10px;
+      &::last-child {
+        margin-right: 0;
+      }
+    }
  }
-  @b button-1-1 {
+  @b button-1 {
    @mixin button-wrap;
    width: 100%;
  }
-  @b button-2-1 {
+  @b button-2 {
    @mixin button-wrap;
    width: 50%;
  }
-  @b button-3-1 {
+  @b button-3 {
    @mixin button-wrap;
    width: 33.33%;
  }
--- a/packages/zanui-css/src/card.css
+++ b/packages/zanui-css/src/card.css
@ -0,0 +1,86 @@
+@import "./mixins/ellipsis.css";
+
+@component-namespace z {
+  @b card {
+    padding: 5px 15px;
+    background: #FAFAFA;
+    overflow: hidden;
+    position: relative;
+    margin-top: 10px;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    @e img {
+      float: left;
+      width: 90px;
+      height: 90px;
+      border: 0;
+    }
+
+    @e content {
+      margin-left: 100px;
+      display: table;
+
+      @when center {
+        display: table;
+        height: 90px;
+
+        .z-card__info {
+          display: table-cell;
+          vertical-align: middle;
+        }
+      }
+    }
+
+    @e row {
+      overflow: hidden;
+      padding-right: 80px;
+      position: relative;
+    }
+
+    @e title {
+      line-height: 20px;
+      color: #333;
+      max-height: 40px;
+      margin-bottom: 5px;
+      @mixin multi-ellipsis 2;
+    }
+
+    @e desc {
+      font-size: 12px;
+      color: #666;
+    }
+
+    @e price {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 80px;
+      text-align: right;
+      font-size: 14px;
+      color: #333;
+    }
+
+    @e num {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 80px;
+      text-align: right;
+      font-size: 12px;
+      color: #666;
+    }
+
+    @e footer {
+      position: absolute;
+      right: 15px;
+      bottom: 5px;
+
+      .z-button {
+        margin-left: 5px;
+      }
+    }
+  }
+}
--- a/packages/zanui-css/src/cell.pcss
+++ b/packages/zanui-css/src/cell.pcss
@ -1,8 +1,8 @@
-@import "./common/var.pcss";
-@import "./mixins/border_retina.pcss";
+@import "./common/var.css";
+@import "./mixins/border_retina.css";

@component-namespace z {
-  @component cell-group {
+  @b cell-group {
    padding-left: 10px;
    position: relative;

@ -11,7 +11,7 @@
    }
  }

-  @component cell {
+  @b cell {
    display: block;
    overflow: hidden;
    position: relative;
@ -33,19 +33,19 @@
      }
    }

-    @descendent title {
+    @e title {
      float: left;
      overflow: hidden;
    }

-    @descendent label {
+    @e label {
      display: block;
      font-size: 12px;
      line-height: 1.2;
      color: #666;
    }

-    @descendent value {
+    @e value {
      float: right;
      overflow: hidden;

--- a/packages/zanui-css/src/common/var.pcss
+++ b/packages/zanui-css/src/common/var.pcss
--- a/packages/zanui-css/src/dialog.pcss
+++ b/packages/zanui-css/src/dialog.pcss
@ -1,11 +1,11 @@
-@import "./mixins/border_retina.pcss";
+@import "./mixins/border_retina.css";

@component-namespace z {
-  @component dialog-wrapper {
+  @b dialog-wrapper {
    position: absolute;
  }

-  @component dialog {
+  @b dialog {
    position: fixed;
    top: 50%;
    left: 50%;
@ -18,11 +18,11 @@
    backface-visibility: hidden;
    transition: .2s;

-    @descendent header {
+    @e header {
      padding: 15px 0 0;
    }

-    @descendent content {
+    @e content {
      padding: 15px 20px;
      min-height: 36px;
      position: relative;
@ -32,7 +32,7 @@
      }
    }

-    @descendent title {
+    @e title {
      text-align: center;
      padding-left: 0;
      margin-bottom: 0;
@ -40,31 +40,31 @@
      color: #333;
    }

-    @descendent message {
+    @e message {
      color: #999;
      margin: 0;
      font-size: 14px;
      line-height: 1.5;
    }

-    @descendent footer {
+    @e footer {
      font-size: 14px;
      overflow: hidden;
-    }

-    .is-twobtn {
-      .z-dialog-btn {
-        width: 50%;
-      }
+      @when twobtn {
+        .z-dialog__btn {
+          width: 50%;
+        }

-      .z-dialog-cancel {
-        &::after {
-          @mixin border-retina (right);
+        .z-dialog__cancel {
+          &::after {
+            @mixin border-retina (right);
+          }
        }
      }
    }

-    @descendent btn {
+    @e btn {
      line-height: 40px;
      border: 0;
      background-color: #fff;
@ -74,11 +74,11 @@
      position: relative;
    }

-    @descendent cancel {
+    @e cancel {
      color: #333;
    }

-    @descendent confirm {
+    @e confirm {
      color: #00C000;
      width: 100%;
    }
--- a/packages/zanui-css/src/field.pcss
+++ b/packages/zanui-css/src/field.pcss
@ -1,47 +1,47 @@
-@import "./common/var.pcss";
-@import "./mixins/border_retina.pcss";
+@import "./common/var.css";
+@import "./mixins/border_retina.css";

@component-namespace z {
-  @component field {
+  @b field {
    width: 100%;
    overflow: hidden;

    @when textarea {
-      .z-field-control {
+      .z-field__control {
        min-height: 60px;
      }
    }

    @when nolabel {
-      .z-cell-title {
+      .z-cell__title {
        display: none;
      }

-      .z-cell-value {
+      .z-cell__value {
        width: 100%;
        padding-left: 0;
      }
    }

-    .z-cell-title,
-    .z-cell-value {
+    .z-cell__title,
+    .z-cell__value {
      float: none;
      box-sizing: border-box;
    }

-    .z-cell-title {
+    .z-cell__title {
      width: 90px;
      position: absolute;
      top: 10px;
      left: 0;
    }

-    .z-cell-value {
+    .z-cell__value {
      width: 100%;
      padding-left: 90px;
    }

-    .z-field-control {
+    @e control {
      border: 0;
      font-size: 14px;
      line-height: 22px;
--- a/packages/zanui-css/src/icon.pcss
+++ b/packages/zanui-css/src/icon.pcss
--- a/packages/zanui-css/src/index.css
+++ b/packages/zanui-css/src/index.css
@ -0,0 +1,16 @@
+/**
+  css组件库入口，组装成css组件库
+ */
+@import './button.css';
+@import './button_group.css';
+@import './cell.css';
+@import './card.css';
+@import './dialog.css';
+@import './field.css';
+@import './icon.css';
+@import './loading.css';
+@import './picker.css';
+@import './popup.css';
+@import './radio.css';
+@import './switch.css';
+@import './panel.css';
--- a/packages/zanui-css/src/index.pcss
+++ b/packages/zanui-css/src/index.pcss
@ -1,12 +0,0 @@
-/**
-  css组件库入口，组装成css组件库
- */
-@import './button.pcss';
-@import './button_group.pcss';
-@import './cell.pcss';
-@import './dialog.pcss';
-@import './field.pcss';
-@import './icon.pcss';
-@import './popup.pcss';
-@import './picker.pcss';
-@import './switch.pcss';
--- a/packages/zanui-css/src/loading.css
+++ b/packages/zanui-css/src/loading.css
@ -0,0 +1,33 @@
+@-webkit-keyframes loading {
+  from {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@keyframes loading {
+  from {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+
+@component-namespace z {
+  @b loading { 
+    height: 30px;
+    width: 30px;
+    background: url('data:image/png;base64,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') no-repeat center;
+    background-size: contain;
+    -webkit-animation: loading 0.8s linear;
+    -webkit-animation-iteration-count: infinite;
+    animation: loading 0.8s linear;
+    animation-iteration-count: infinite;
+  }
+}
--- a/packages/zanui-css/src/mixins/border_retina.pcss
+++ b/packages/zanui-css/src/mixins/border_retina.pcss
--- a/packages/zanui-css/src/mixins/ellipsis.css
+++ b/packages/zanui-css/src/mixins/ellipsis.css
@ -0,0 +1,7 @@
+@define-mixin multi-ellipsis $lines {
+  overflow : hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+}
--- a/packages/zanui-css/src/panel.css
+++ b/packages/zanui-css/src/panel.css
@ -0,0 +1,36 @@
+@component-namespace z {
+  @b panel {
+    background: #fff;
+    border-top: 1px solid #E5E5E5;
+    border-bottom: 1px solid #E5E5E5;
+
+    @e header {
+      padding: 10px 15px;
+      position: relative;
+      border-bottom: 1px solid #E5E5E5;
+    }
+
+    @e title {
+      font-size: 14px;
+      color: #333;
+    }
+
+    @e desc {
+      font-size: 12px;
+      color: #666;
+    }
+
+    @e status {
+      font-size: 14px;
+      position: absolute;
+      top: 10px;
+      right: 15px;
+      color: #FF4444;
+    }
+
+    @e footer {
+      border-top: 1px solid #E5E5E5;
+      padding: 10px 15px;
+    }
+  }
+}
--- a/packages/zanui-css/src/picker.pcss
+++ b/packages/zanui-css/src/picker.pcss
--- a/packages/zanui-css/src/popup.pcss
+++ b/packages/zanui-css/src/popup.pcss
@ -1,14 +1,14 @@
-.v-modal {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.701961);
-}
-
@component-namespace z {
-  @component popup {
+  @b modal {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.701961);
+  }
+
+  @b popup {
    position: fixed;
    background-color: #fff;
    top: 50%;
@ -17,7 +17,7 @@
    backface-visibility: hidden;
    transition: .2s ease-out;

-    @modifier top {
+    @m top {
      top: 0;
      right: auto;
      bottom: auto;
@ -25,7 +25,7 @@
      transform: translate3d(-50%, 0, 0);
    }

-    @modifier right {
+    @m right {
      top: 50%;
      right: 0;
      bottom: auto;
@ -33,7 +33,7 @@
      transform: translate3d(0, -50%, 0);
    }

-    @modifier bottom {
+    @m bottom {
      top: auto;
      bottom: 0;
      right: auto;
@ -41,7 +41,7 @@
      transform: translate3d(-50%, 0, 0);
    }

-    @modifier left {
+    @m left {
      top: 50%;
      right: auto;
      bottom: auto;
--- a/packages/zanui-css/src/radio.pcss
+++ b/packages/zanui-css/src/radio.pcss
--- a/packages/zanui-css/src/switch.pcss
+++ b/packages/zanui-css/src/switch.pcss
@ -17,28 +17,23 @@
      box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
      @when on {
        left: 0;
+        transition: all .5s ease-in-out;
      }

      @when off {
-        right: 0;
+        left: 20px;
+        transition: all .5s ease-in-out;
      }
-
    }

    @when on {
      background-color: #44db5e;
      border-color: #44db5e;
-      @descendent node {
-        left: 0;
-      }
    }

    @when off {
      background-color: #fff;
      border-color: rgba(0, 0, 0, .1);
-      @descendent node {
-        right: 0;
-      }
    }

    @when loading {
@ -46,8 +41,13 @@
    }

    @when disabled {
-      background-color: #f2f2f2;
-      border-color: rgba(0, 0, 0, .1);
+      @when off {
+        background-color: #f2f2f2;
+        border-color: rgba(0, 0, 0, .1);
+      }
+      @when on {
+        background-color: #a6e7b1;
+      }
    }
  }
 }
--- a/src/index.js
+++ b/src/index.js
@ -10,8 +10,9 @@ import Dialog from '../packages/dialog/index.js';
 import Picker from '../packages/picker/index.js';
 import RadioGroup from '../packages/radio-group/index.js';
 import Waterfall from '../packages/waterfall/index.js';
-// zanui
-import '../packages/zanui-css/src/index.pcss';
+import Loading from '../packages/loading/index.js';
+import Panel from '../packages/panel/index.js';
+import Card from '../packages/card/index.js';

 const install = function(Vue) {
  if (install.installed) return;
@ -26,6 +27,9 @@ const install = function(Vue) {
  Vue.component(Popup.name, Popup);
  Vue.component(Picker.name, Picker);
  Vue.component(RadioGroup.name, RadioGroup);
+  Vue.component(Loading.name, Loading);
+  Vue.component(Panel.name, Panel);
+  Vue.component(Card.name, Card);
 };

 // auto install
@ -47,5 +51,8 @@ module.exports = {
  Dialog,
  Picker,
  RadioGroup,
-  Waterfall
+  Waterfall,
+  Loading,
+  Panel,
+  Card
 };
--- a/src/mixins/popup/index.js
+++ b/src/mixins/popup/index.js
@ -12,30 +12,6 @@ const getDOM = function(dom) {
  return dom;
 };

-let scrollBarWidth;
-const getScrollBarWidth = () => {
-  if (scrollBarWidth !== undefined) return scrollBarWidth;
-
-  const outer = document.createElement('div');
-  outer.style.visibility = 'hidden';
-  outer.style.width = '100px';
-  outer.style.position = 'absolute';
-  outer.style.top = '-9999px';
-  document.body.appendChild(outer);
-
-  const widthNoScroll = outer.offsetWidth;
-  outer.style.overflow = 'scroll';
-
-  const inner = document.createElement('div');
-  inner.style.width = '100%';
-  outer.appendChild(inner);
-
-  const widthWithScroll = inner.offsetWidth;
-  outer.parentNode.removeChild(outer);
-
-  return widthNoScroll - widthWithScroll;
-};
-
 export default {
  props: {
    /**
@ -92,8 +68,7 @@ export default {
      opening: false,
      opened: false,
      closing: false,
-      bodyOverflow: null,
-      bodyPaddingRight: null
+      bodyOverflow: null
    };
  },

@ -128,19 +103,11 @@ export default {

        // 如果滚动时需要锁定
        if (props.lockOnScroll) {
-          // 将原来的`bodyOverflow`和`bodyPaddingRight`存起来
+          // 将原来的`bodyOverflow`存起来
          if (!this.bodyOverflow) {
-            this.bodyPaddingRight = document.body.style.paddingRight;
            this.bodyOverflow = document.body.style.overflow;
          }

-          scrollBarWidth = getScrollBarWidth();
-
-          // 页面是否`overflow`
-          let bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
-          if (scrollBarWidth > 0 && bodyHasOverflow) {
-            document.body.style.paddingRight = scrollBarWidth + 'px';
-          }
          document.body.style.overlay = 'hidden';
        }
      }
@ -164,10 +131,8 @@ export default {
        setTimeout(() => {
          if (this.modal && this.bodyOverflow !== 'hidden') {
            document.body.style.overflow = this.bodyOverflow;
-            document.body.style.paddingRight = this.bodyPaddingRight;
          }
          this.bodyOverflow = null;
-          this.bodyPaddingRight = null;
        }, 200);
      }

@ -187,9 +152,7 @@ export default {

    if (this.modal && this.bodyOverflow !== null && this.bodyOverflow !== 'hidden') {
      document.body.style.overflow = this.bodyOverflow;
-      document.body.style.paddingRight = this.bodyPaddingRight;
    }
    this.bodyOverflow = null;
-    this.bodyPaddingRight = null;
  }
 };
--- a/src/mixins/popup/popup-manager.js
+++ b/src/mixins/popup/popup-manager.js
@ -70,7 +70,7 @@ const PopupManager = {

    const modalStack = this.modalStack;

-    for (let i = 0, j = modalStack.length; i < j; i++) {
+    for (let i = 0, len = modalStack.length; i < len; i++) {
      const item = modalStack[i];
      if (item.id === id) {
        return;
@ -79,10 +79,7 @@ const PopupManager = {

    const modalDom = getModal();

-    addClass(modalDom, 'v-modal');
-    setTimeout(() => {
-      removeClass(modalDom, 'v-modal-enter');
-    }, 200);
+    addClass(modalDom, 'z-modal');

    if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
      dom.parentNode.appendChild(modalDom);
@ -125,9 +122,8 @@ const PopupManager = {
          if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);

          modalDom.style.display = 'none';
-          this.modalDom = undefined;
+          this.modalDom = null;
        }
-        removeClass(modalDom, 'v-modal-leave');
      }, 200);
    }
  }
--- a/src/utils/transition.js
+++ b/src/utils/transition.js
@ -7,7 +7,7 @@ if (!Vue.prototype.$isServer) {
  var engine;
  var translate3d = false;

-  if (window.opera && Object.prototype.toString.call(opera) === '[object Opera]') {
+  if (window.opera && Object.prototype.toString.call(window.opera) === '[object Opera]') {
    engine = 'presto';
  } else if ('MozAppearance' in docStyle) {
    engine = 'gecko';
@ -77,7 +77,7 @@ if (!Vue.prototype.$isServer) {
    if (element === null || element.style === null) return;

    var transformValue = element.style[transformProperty];
-    
+
    if (transformValue) {
      transformValue = transformValue.replace(/translate\(\s*(-?\d+(\.?\d+?)?)px,\s*(-?\d+(\.\d+)?)px\)\s*translateZ\(0px\)/g, '');
      element.style[transformProperty] = transformValue;