diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..41789ca
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": ["es2015", "stage-2"],
+  "plugins": ["transform-runtime"],
+  "comments": false
+}
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..fb7ce66
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,180 @@
+{
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "ecmaFeatures": {
+    "arrowFunctions": true,
+    "destructuring": true,
+    "classes": true,
+    "defaultParams": true,
+    "blockBindings": true,
+    "modules": true,
+    "objectLiteralComputedProperties": true,
+    "objectLiteralShorthandMethods": true,
+    "objectLiteralShorthandProperties": true,
+    "restParams": true,
+    "spread": true,
+    "forOf": true,
+    "generators": true,
+    "templateStrings": true,
+    "superInFunctions": true,
+    "experimentalObjectRestSpread": true
+  },
+
+  "rules": {
+    "accessor-pairs": 2,
+    "array-bracket-spacing": 0,
+    "block-scoped-var": 0,
+    "brace-style": [2, "allman", { "allowSingleLine": true }],
+    "camelcase": 0,
+    "comma-dangle": [2, "never"],
+    "comma-spacing": [2, { "before": false, "after": true }],
+    "comma-style": [2, "last"],
+    "complexity": 0,
+    "computed-property-spacing": 0,
+    "consistent-return": 0,
+    "consistent-this": 0,
+    "constructor-super": 2,
+    "curly": [2, "multi-line"],
+    "default-case": 0,
+    "dot-location": [2, "property"],
+    "dot-notation": 0,
+    "eol-last": 2,
+    "eqeqeq": [2, "allow-null"],
+    "func-names": 0,
+    "func-style": 0,
+    "generator-star-spacing": [2, { "before": true, "after": true }],
+    "guard-for-in": 0,
+    "handle-callback-err": [2, "^(err|error)$" ],
+    "indent": [2, 2, { "SwitchCase": 1 }],
+    "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
+    "linebreak-style": 0,
+    "lines-around-comment": 0,
+    "max-nested-callbacks": 0,
+    "new-cap": [2, { "newIsCap": true, "capIsNew": false }],
+    "new-parens": 2,
+    "newline-after-var": 0,
+    "no-alert": 0,
+    "no-array-constructor": 2,
+    "no-caller": 2,
+    "no-catch-shadow": 0,
+    "no-cond-assign": 2,
+    "no-console": 0,
+    "no-constant-condition": 0,
+    "no-continue": 0,
+    "no-control-regex": 2,
+    "no-debugger": 2,
+    "no-delete-var": 2,
+    "no-div-regex": 0,
+    "no-dupe-args": 2,
+    "no-dupe-keys": 2,
+    "no-duplicate-case": 2,
+    "no-else-return": 0,
+    "no-empty": 0,
+    "no-empty-character-class": 2,
+    "no-empty-label": 2,
+    "no-eq-null": 0,
+    "no-eval": 2,
+    "no-ex-assign": 2,
+    "no-extend-native": 2,
+    "no-extra-bind": 2,
+    "no-extra-boolean-cast": 2,
+    "no-extra-parens": 0,
+    "no-extra-semi": 0,
+    "no-fallthrough": 2,
+    "no-floating-decimal": 2,
+    "no-func-assign": 2,
+    "no-implied-eval": 2,
+    "no-inline-comments": 0,
+    "no-inner-declarations": [2, "functions"],
+    "no-invalid-regexp": 2,
+    "no-irregular-whitespace": 2,
+    "no-iterator": 2,
+    "no-label-var": 2,
+    "no-labels": 2,
+    "no-lone-blocks": 2,
+    "no-lonely-if": 0,
+    "no-loop-func": 0,
+    "no-mixed-requires": 0,
+    "no-mixed-spaces-and-tabs": 2,
+    "no-multi-spaces": 2,
+    "no-multi-str": 2,
+    "no-multiple-empty-lines": [2, { "max": 1 }],
+    "no-native-reassign": 2,
+    "no-negated-in-lhs": 2,
+    "no-nested-ternary": 0,
+    "no-new": 2,
+    "no-new-func": 0,
+    "no-new-object": 2,
+    "no-new-require": 2,
+    "no-new-wrappers": 2,
+    "no-obj-calls": 2,
+    "no-octal": 2,
+    "no-octal-escape": 2,
+    "no-param-reassign": 0,
+    "no-path-concat": 0,
+    "no-process-env": 0,
+    "no-process-exit": 0,
+    "no-proto": 0,
+    "no-redeclare": 2,
+    "no-regex-spaces": 2,
+    "no-restricted-modules": 0,
+    "no-return-assign": 2,
+    "no-script-url": 0,
+    "no-self-compare": 2,
+    "no-sequences": 2,
+    "no-shadow": 0,
+    "no-shadow-restricted-names": 2,
+    "no-spaced-func": 2,
+    "no-sparse-arrays": 2,
+    "no-sync": 0,
+    "no-ternary": 0,
+    "no-this-before-super": 2,
+    "no-throw-literal": 2,
+    "no-trailing-spaces": 2,
+    "no-undef": 2,
+    "no-undef-init": 2,
+    "no-undefined": 0,
+    "no-underscore-dangle": 0,
+    "no-unexpected-multiline": 2,
+    "no-unneeded-ternary": 2,
+    "no-unreachable": 2,
+    "no-unused-expressions": 0,
+    "no-unused-vars": [2, { "vars": "all", "args": "none" }],
+    "no-use-before-define": 0,
+    "no-var": 0,
+    "no-void": 0,
+    "no-warning-comments": 0,
+    "no-with": 2,
+    "object-curly-spacing": 0,
+    "object-shorthand": 0,
+    "one-var": [2, { "initialized": "never" }],
+    "operator-assignment": 0,
+    "operator-linebreak": [2, "after", { "overrides": { "?": "before", ":": "before" } }],
+    "padded-blocks": 0,
+    "prefer-const": 0,
+    "quote-props": 0,
+    "quotes": [2, "single", "avoid-escape"],
+    "radix": 2,
+    "semi": [2, "never"],
+    "semi-spacing": 0,
+    "sort-vars": 0,
+    "space-after-keywords": [2, "always"],
+    "space-before-blocks": [2, "always"],
+    "space-before-function-paren": [2, "always"],
+    "space-in-parens": [2, "never"],
+    "space-infix-ops": 2,
+    "space-return-throw-case": 2,
+    "space-unary-ops": [2, { "words": true, "nonwords": false }],
+    "spaced-comment": [2, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!"] }],
+    "strict": 0,
+    "use-isnan": 2,
+    "valid-jsdoc": 0,
+    "valid-typeof": 2,
+    "vars-on-top": 0,
+    "wrap-iife": [2, "any"],
+    "wrap-regex": 0,
+    "yoda": [2, "never"]
+  }
+}
diff --git a/.gitignore b/.gitignore
index e920c16..884e68a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,33 +1,15 @@
-# Logs
+.DS_Store
 logs
 *.log
 npm-debug.log*
-
-# Runtime data
 pids
 *.pid
 *.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
-
-# Coverage directory used by tools like istanbul
 coverage
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
-
-# node-waf configuration
 .lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directory
+dist/
 node_modules
-
-# Optional npm cache directory
 .npm
-
-# Optional REPL history
 .node_repl_history
diff --git a/README.md b/README.md
index 27acd30..94bf705 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,16 @@
 # vue-sui-demo
 vue 和 sui-mobile 结合的demo，禁用了sui自带的路由，使用vue-router
+
+> Vue-SUI-Demo Project
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
diff --git a/build/dev-server.js b/build/dev-server.js
new file mode 100644
index 0000000..31ad68f
--- /dev/null
+++ b/build/dev-server.js
@@ -0,0 +1,31 @@
+var path = require('path')
+var express = require('express')
+var webpack = require('webpack')
+var config = require('./webpack.dev.conf')
+var favicon = require('express-favicon')
+
+var app = express()
+var compiler = webpack(config)
+app.use('/lib', express.static(path.join(__dirname, '../src/lib')))
+
+app.use(favicon(path.join(__dirname, '../favicon.ico')))
+// handle fallback for HTML5 history API
+app.use(require('connect-history-api-fallback')())
+
+// serve webpack bundle output
+app.use(require('webpack-dev-middleware')(compiler, {
+  noInfo: true,
+  publicPath: config.output.publicPath
+}))
+
+// enable hot-reload and state-preserving
+// compilation error display
+app.use(require('webpack-hot-middleware')(compiler))
+
+app.listen(8000, '127.0.0.1', function(err) {
+  if (err) {
+    console.log(err)
+    return
+  }
+  console.log('Listening at http://127.0.0.1:8000')
+})
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
new file mode 100644
index 0000000..1ca5b06
--- /dev/null
+++ b/build/webpack.base.conf.js
@@ -0,0 +1,64 @@
+var path = require('path')
+
+module.exports = {
+  entry: {
+    app: './src/app.js'
+  },
+  output: {
+    path: path.resolve(__dirname, '../dist/static'),
+    publicPath: '/static/',
+    filename: '[name].js'
+  },
+  externals: {
+      // require("jquery") is external and available
+      //  on the global var jQuery
+      'zepto': 'Zepto'
+  },
+  resolve: {
+    extensions: ['', '.js', '.vue', '.less'],
+    alias: {
+      'src': path.resolve(__dirname, '../src')
+    }
+  },
+  resolveLoader: {
+    root: path.join(__dirname, 'node_modules'),
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.vue$/,
+        loader: 'vue'
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel!eslint',
+        exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//
+      },
+      {
+        test: /\.json$/,
+        loader: 'json'
+      },
+      {
+        test: /\.less$/,
+        loader: 'css!less'
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        loader: 'url',
+        query: {
+          limit: 10000,
+          name: '[name].[ext]?[hash]'
+        }
+      }
+    ]
+  },
+  vue: {
+    loaders: {
+      js: 'babel!eslint',
+      less: 'vue-style!css!less'
+    }
+  },
+  eslint: {
+    formatter: require('eslint-friendly-formatter')
+  }
+}
diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js
new file mode 100644
index 0000000..f8036af
--- /dev/null
+++ b/build/webpack.dev.conf.js
@@ -0,0 +1,39 @@
+var webpack = require('webpack')
+var config = require('./webpack.base.conf')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var BrowserSyncPlugin = require('browser-sync-webpack-plugin')
+config.devtool = 'eval-source-map'
+
+// add hot-reload related code to entry chunk
+config.entry.app = [
+  'eventsource-polyfill',
+  'webpack-hot-middleware/client?quiet=true&reload=true',
+  config.entry.app
+]
+
+config.output.publicPath = '/'
+
+config.plugins = (config.plugins || []).concat([
+  new webpack.optimize.OccurenceOrderPlugin(),
+  new webpack.HotModuleReplacementPlugin(),
+  new webpack.NoErrorsPlugin(),
+  new HtmlWebpackPlugin({
+    filename: 'index.html',
+    template: 'src/index.html'
+  }),
+  new BrowserSyncPlugin(
+    // BrowserSync options
+    {
+      host: '127.0.0.1',
+      port: 8080,
+      proxy: 'http://127.0.0.1:8000/',
+      logConnections: false,
+      notify: false
+    },
+    // plugin options
+    {
+      reload: true
+  })
+])
+
+module.exports = config
diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
new file mode 100644
index 0000000..56f1116
--- /dev/null
+++ b/build/webpack.prod.conf.js
@@ -0,0 +1,57 @@
+var webpack = require('webpack')
+var config = require('./webpack.base.conf')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+// naming output files with hashes for better caching.
+// dist/index.html will be auto-generated with correct URLs.
+config.output.filename = '[name].[chunkhash].js'
+config.output.chunkFilename = '[id].[chunkhash].js'
+
+// whether to generate source map for production files.
+// disabling this can speed up the build.
+var SOURCE_MAP = false
+
+config.devtool = SOURCE_MAP ? 'source-map' : false
+
+// generate loader string to be used with extract text plugin
+function generateExtractLoaders (loaders) {
+  return loaders.map(function (loader) {
+    return loader + '-loader' + (SOURCE_MAP ? '?sourceMap' : '')
+  }).join('!')
+}
+
+config.vue.loaders = {
+  js: 'babel!eslint',
+  // http://vuejs.github.io/vue-loader/configurations/extract-css.html
+  css: ExtractTextPlugin.extract('vue-style-loader', generateExtractLoaders(['css'])),
+  less: ExtractTextPlugin.extract('vue-style-loader', generateExtractLoaders(['css', 'less'])),
+  sass: ExtractTextPlugin.extract('vue-style-loader', generateExtractLoaders(['css', 'sass'])),
+  stylus: ExtractTextPlugin.extract('vue-style-loader', generateExtractLoaders(['css', 'stylus']))
+}
+
+config.plugins = (config.plugins || []).concat([
+  // http://vuejs.github.io/vue-loader/workflow/production.html
+  new webpack.DefinePlugin({
+    'process.env': {
+      NODE_ENV: '"production"'
+    }
+  }),
+  new webpack.optimize.UglifyJsPlugin({
+    compress: {
+      warnings: false
+    }
+  }),
+  new webpack.optimize.OccurenceOrderPlugin(),
+  // extract css into its own file
+  new ExtractTextPlugin('[name].[contenthash].css'),
+  // generate dist index.html with correct asset hash for caching.
+  // you can customize output by editing /build/index.template.html
+  // see https://github.com/ampedandwired/html-webpack-plugin
+  new HtmlWebpackPlugin({
+    filename: '../index.html',
+    template: 'src/index.html'
+  })
+])
+
+module.exports = config
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..59a01a5
Binary files /dev/null and b/favicon.ico differ
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..a5fabbb
--- /dev/null
+++ b/index.js
@@ -0,0 +1,18 @@
+var express = require('express');
+var path = require('path');
+var app = express();
+
+app.use('/static', express.static(path.join(__dirname, './dist/static')));
+
+app.get('/', function (req, res) {
+  res.sendFile('index.html', { root: path.join(__dirname, './dist') });
+});
+
+var server = app.listen(3030, '127.0.0.1', function () {
+
+  var host = server.address().address;
+  var port = server.address().port;
+
+  console.log('vue-sui-demo listening at http://%s:%s', host, port);
+
+});
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..29d7ce5
--- /dev/null
+++ b/package.json
@@ -0,0 +1,65 @@
+{
+  "name": "vue-sui-demo",
+  "description": "vue combine with sui-mobile",
+  "author": "eteplus <eteplus@163.com>",
+  "scripts": {
+    "main": "node index.js",
+    "dev": "node build/dev-server.js",
+    "build": "rimraf dist && webpack --progress --hide-modules --config build/webpack.prod.conf.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/eteplus/vue-sui-demo.git"
+  },
+  "dependencies": {
+    "vue": "^1.0.15",
+    "vue-resource": "^0.6.1",
+    "vue-router": "^0.7.9"
+  },
+  "devDependencies": {
+    "babel-core": "^6.0.0",
+    "babel-loader": "^6.0.0",
+    "babel-plugin-transform-runtime": "^6.0.0",
+    "babel-preset-es2015": "^6.0.0",
+    "babel-preset-stage-2": "^6.0.0",
+    "babel-runtime": "^5.8.0",
+    "browser-sync": "^2.11.1",
+    "<browser-sync-webpac></browser-sync-webpac>k-plugin": "^1.0.1",
+    "classnames": "^2.2.3",
+    "connect-history-api-fallback": "^1.1.0",
+    "css-loader": "^0.23.0",
+    "eslint": "^1.10.3",
+    "eslint-friendly-formatter": "^1.2.2",
+    "eslint-loader": "^1.2.0",
+    "eventsource-polyfill": "^0.9.6",
+    "express": "^4.13.3",
+    "express-favicon": "^1.0.1",
+    "extract-text-webpack-plugin": "^0.9.1",
+    "file-loader": "^0.8.4",
+    "function-bind": "^1.0.2",
+    "html-webpack-plugin": "^1.7.0",
+    "inject-loader": "^2.0.1",
+    "jasmine-core": "^2.4.1",
+    "json-loader": "^0.5.4",
+    "karma": "^0.13.15",
+    "karma-jasmine": "^0.3.6",
+    "karma-phantomjs-launcher": "^0.2.1",
+    "karma-spec-reporter": "0.0.23",
+    "karma-webpack": "^1.7.0",
+    "less": "^2.6.0",
+    "less-loader": "^2.2.2",
+    "phantomjs": "^1.9.19",
+    "rimraf": "^2.5.0",
+    "swiper": "^3.3.0",
+    "url-loader": "^0.5.7",
+    "vue-hot-reload-api": "^1.2.0",
+    "vue-html-loader": "^1.0.0",
+    "vue-loader": "^8.0.0",
+    "vue-style-loader": "^1.0.0",
+    "webpack": "^1.12.2",
+    "webpack-dev-middleware": "^1.4.0",
+    "webpack-dev-server": "^1.14.1",
+    "webpack-hot-middleware": "^2.6.0"
+  },
+  "license": "MIT"
+}
diff --git a/src/app.js b/src/app.js
new file mode 100644
index 0000000..e3b733c
--- /dev/null
+++ b/src/app.js
@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import VueResource from 'vue-resource'
+import routerConfig from './router'
+import pullToRefresh from './directives/pullToRefresh'
+import app from './main'
+
+// Router
+Vue.use(VueRouter)
+
+const router = new VueRouter({
+  hashbang: true
+})
+
+routerConfig(router)
+
+// Resource
+Vue.use(VueResource)
+
+Vue.http.options.root = '/api'
+Vue.http.options.emulateJSON = true
+
+// Directive
+Vue.directive('pullToRefresh', pullToRefresh)
+
+router.start(app, '#app')
+
+window.router = router
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100755
index 0000000..b37c5eb
Binary files /dev/null and b/src/assets/logo.png differ
diff --git a/src/assets/qrcode.jpg b/src/assets/qrcode.jpg
new file mode 100644
index 0000000..7dd9b10
Binary files /dev/null and b/src/assets/qrcode.jpg differ
diff --git a/src/components/Bar.vue b/src/components/Bar.vue
new file mode 100644
index 0000000..5b9d140
--- /dev/null
+++ b/src/components/Bar.vue
@@ -0,0 +1,43 @@
+<template>
+<nav :class="classes">
+  <slot></slot>
+</nav>
+</template>
+
+<script>
+import cx from 'classnames'
+
+export default {
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'bar'
+    },
+    type: {
+      type: String,
+      default: ''
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    classes () {
+      return cx({
+        [this.className]: !!this.className,
+        [`${this.prefixCls}-${this.type}`]: !!this.type,
+        [this.prefixCls]: 1
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.tab-item.active {
+  color:  #ed8e07 !important;
+}
+.tab-item.inactive {
+}
+</style>
\ No newline at end of file
diff --git a/src/components/BarTabItem.vue b/src/components/BarTabItem.vue
new file mode 100644
index 0000000..dbed9b8
--- /dev/null
+++ b/src/components/BarTabItem.vue
@@ -0,0 +1,34 @@
+<template>
+<a :class="classes"
+  v-for="item in options.items"
+  v-link="{ path: item.path, activeClass: options.activeClass, replace: true}">
+  <span class="icon" :class="'icon-' + item.icon"></span>
+  <span class="tab-label" v-text="item.label"></span>
+</a>
+</template>
+
+<script>
+import cx from 'classnames'
+
+export default {
+  props: {
+    options: {
+      type: Object,
+      require: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    classes () {
+      let defaultCls = 'tab-item'
+      return cx({
+        [defaultCls]: 1,
+        [this.className]: !!this.className
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Button.vue b/src/components/Button.vue
new file mode 100644
index 0000000..1d3e347
--- /dev/null
+++ b/src/components/Button.vue
@@ -0,0 +1,81 @@
+<template>
+  <a :class="classes">
+    <slot></slot>
+  </a>
+</template>
+
+<script>
+import cx from 'classnames'
+
+export default {
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'button'
+    },
+    types: {
+      type: String,
+      default: ''
+    },
+    status: {
+      type: String,
+      default: ''
+    },
+    shape: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String,
+      default: ''
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    classes () {
+      let typeCls = []
+      if (this.types.length !== 0) {
+        typeCls = Array.from(this.types.split(' '), (type) => { return type !== '' ? `${this.prefixCls}-${type}` : type})
+        this.types = typeCls.join(' ')
+      }
+      return cx({
+        [this.className]: !!this.className,
+        [`${this.prefixCls}-${this.status}`]: !!this.status,
+        [`${this.prefixCls}-${this.shape}`]: !!this.shape,
+        [`${this.prefixCls}-${this.size}`]: !!this.size,
+        [this.types]: !!this.types,
+        [this.prefixCls]: 1
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.button {
+  line-height: 1.55rem;
+  height: 1.65rem;
+  font-size: .75rem;
+}
+.button.button-small {
+  height: 1.35rem;
+  font-size: 0.7rem;
+}
+.button.button-large {
+  font-size: 0.85rem;
+  height: 2.4rem;
+  line-height: 2.3rem;
+}
+.button.button-fill {
+  line-height: 1.65rem;
+}
+.button.button-fill.button-small {
+  line-height: 1.35rem;
+}
+.button.button-fill.button-large {
+    line-height: 2.4rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ButtonGroup.vue b/src/components/ButtonGroup.vue
new file mode 100644
index 0000000..3273fe2
--- /dev/null
+++ b/src/components/ButtonGroup.vue
@@ -0,0 +1,34 @@
+<template>
+<div :class="classes">
+  <slot></slot>
+</div>
+</template>
+
+<script>
+import cx from 'classnames'
+
+export default {
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'buttons'
+    },
+    type: {
+      type: String,
+      require: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    classes () {
+      return cx({
+        [this.className]: !!this.className,
+        [`${this.prefixCls}-${this.type}`]: !!this.type
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Card.vue b/src/components/Card.vue
new file mode 100644
index 0000000..f0f45a5
--- /dev/null
+++ b/src/components/Card.vue
@@ -0,0 +1,30 @@
+<template>
+<div :class="classes">
+  <slot></slot>
+</div>
+</template>
+
+<script>
+import cx from 'classnames'
+
+export default {
+  props: {
+    defaultCls: {
+      type: String,
+      default: 'card'
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    classes () {
+      return cx({
+        [this.className]: !!this.className,
+        [this.defaultCls]: 1
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/CardItem.vue b/src/components/CardItem.vue
new file mode 100644
index 0000000..73fd4d5
--- /dev/null
+++ b/src/components/CardItem.vue
@@ -0,0 +1,30 @@
+<template>
+<div :class="classes">
+  <slot></slot>
+</div>
+</template>
+
+<script>
+import cx from 'classnames'
+
+export default {
+  props: {
+    type: {
+      type: String,
+      require: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    classes () {
+      return cx({
+        [this.className]: !!this.className,
+        [`card-${this.type}`]: !!this.type
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Content.vue b/src/components/Content.vue
new file mode 100644
index 0000000..ba2dd37
--- /dev/null
+++ b/src/components/Content.vue
@@ -0,0 +1,26 @@
+<template>
+<div :class="classes">
+  <slot></slot>
+</div>
+</template>
+
+<script>
+import cx from 'classnames'
+
+export default {
+  props: {
+    type: {
+      type: String,
+      default: ''
+    },
+    className: ''
+  },
+  computed: {
+    classes () {
+      return cx({
+        [this.className]: !!this.className,
+        [`content-${this.type}`]: !!this.type
+      })
+    }
+  }}
+</script>
\ No newline at end of file
diff --git a/src/components/Iconfont.vue b/src/components/Iconfont.vue
new file mode 100644
index 0000000..8b9551d
--- /dev/null
+++ b/src/components/Iconfont.vue
@@ -0,0 +1,35 @@
+<template>
+<span :class="classes">
+  <slot></slot>
+</span>
+</template>
+
+<script>
+import cx from 'classnames'
+
+export default {
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'icon'
+    },
+    type: {
+      type: String,
+      require: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    classes () {
+      return cx({
+        [this.prefixCls]: 1,
+        [`${this.prefixCls}-${this.type}`]: !!this.type,
+        [this.className]: !!this.className
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/List.vue b/src/components/List.vue
new file mode 100644
index 0000000..cce020a
--- /dev/null
+++ b/src/components/List.vue
@@ -0,0 +1,44 @@
+<template>
+<div :class="classes">
+  <ul>
+    <slot></slot>
+  </ul>
+</div>
+</template>
+
+<script>
+import cx from 'classnames'
+
+export default {
+  props: {
+    defaultCls: {
+      type: String,
+      default: 'list-block'
+    },
+    type: {
+      type: String,
+      require: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    classes () {
+      let typeCls = ''
+      if (this.type === 'media') {
+        typeCls = 'media-list'
+      }
+      else if (this.type !== '') {
+        typeCls = `${this.type}-block`
+      }
+      return cx({
+        [this.className]: !!this.className,
+        [typeCls]: !!typeCls,
+        [this.defaultCls]: 1
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/ListItem.vue b/src/components/ListItem.vue
new file mode 100644
index 0000000..629aea8
--- /dev/null
+++ b/src/components/ListItem.vue
@@ -0,0 +1,30 @@
+<template>
+<div :class="classes">
+  <slot></slot>
+</div>
+</template>
+
+<script>
+import cx from 'classnames'
+
+export default {
+  props: {
+    type: {
+      type: String,
+      require: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    classes () {
+      return cx({
+        [this.className]: !!this.className,
+        [`item-${this.type}`]: !!this.type
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/PullToRefreshLayer.vue b/src/components/PullToRefreshLayer.vue
new file mode 100644
index 0000000..946c580
--- /dev/null
+++ b/src/components/PullToRefreshLayer.vue
@@ -0,0 +1,6 @@
+<template>
+<div class="pull-to-refresh-layer">
+  <div class="preloader"></div>
+  <div class="pull-to-refresh-arrow"></div>
+</div>
+</template>
\ No newline at end of file
diff --git a/src/components/Slider.vue b/src/components/Slider.vue
new file mode 100644
index 0000000..11063f6
--- /dev/null
+++ b/src/components/Slider.vue
@@ -0,0 +1,344 @@
+<template>
+  <div class="swiper-container">
+    <div class="swiper-wrapper">
+      <div class="swiper-slide" v-for="img in imgs">
+        <a @click="redirect(img.target)"><img :src="img.src"></a>
+      </div>
+    </div>
+    <div class="swiper-pagination" ></div>
+  </div>
+</template>
+
+<script>
+import $ from 'zepto'
+
+export default {
+  props: {
+    imgs: Array,
+    config: Object
+  },
+  ready () {
+    $.slider = $(this.$el).swiper(this.config)
+  },
+  methods: {
+    redirect (target) {
+      location.href = `http://${target}`
+    }
+  }
+}
+</script>
+
+<style>
+.swiper-container {
+  height: 6rem;
+  margin: 0 auto;
+  position: relative;
+  overflow: hidden;
+  padding-bottom: 30px;
+  z-index: 1
+}
+.swiper-container-no-flexbox .swiper-slide {
+  float: left
+}
+.swiper-container-vertical>.swiper-wrapper {
+  -webkit-box-orient: vertical;
+  -webkit-flex-direction: column;
+  flex-direction: column
+}
+.swiper-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  -webkit-transition-property: -webkit-transform;
+  transition-property: transform;
+  box-sizing: content-box
+}
+
+.swiper-container-android .swiper-slide, .swiper-wrapper {
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0)
+}
+
+.swiper-container-multirow>.swiper-wrapper {
+  -webkit-box-lines: multiple;
+  -webkit-flex-wrap: wrap;
+  flex-wrap: wrap
+}
+
+.swiper-container-free-mode>.swiper-wrapper {
+  -webkit-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+  margin: 0 auto
+}
+
+.swiper-slide {
+  -webkit-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  -webkit-flex-shrink: 0;
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  position: relative
+}
+
+.swiper-container .swiper-notification {
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  opacity: 0;
+  z-index: -1000
+}
+
+.swiper-wp8-horizontal {
+  touch-action: pan-y
+}
+
+.swiper-wp8-vertical {
+  touch-action: pan-x
+}
+
+.swiper-button-next, .swiper-button-prev {
+  position: absolute;
+  top: 50%;
+  width: 1.35rem;
+  height: 2.2rem;
+  margin-top: -1.1rem;
+  z-index: 10;
+  cursor: pointer;
+  background-size: 1.35rem 2.2rem;
+  background-position: center;
+  background-repeat: no-repeat
+}
+
+.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
+  opacity: .35;
+  cursor: auto;
+  pointer-events: none
+}
+
+.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
+  left: .5rem;
+  right: auto
+}
+
+.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
+  right: .5rem;
+  left: auto
+}
+
+.swiper-pagination {
+  position: absolute;
+  text-align: center;
+  -webkit-transition: .3s;
+  transition: .3s;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  z-index: 10
+}
+
+.swiper-pagination.swiper-pagination-hidden {
+  opacity: 0
+}
+
+.swiper-pagination-bullet {
+  width: .4rem;
+  height: .4rem;
+  display: inline-block;
+  border-radius: 100%;
+  background: #000;
+  opacity: .2
+}
+
+.swiper-pagination-bullet-active {
+  opacity: 1;
+  /*background: #007aff*/
+  background: #ed8e07;
+}
+
+.swiper-container-vertical>.swiper-pagination {
+  right: .5rem;
+  top: 50%;
+  -webkit-transform: translate3d(0, -50%, 0);
+  transform: translate3d(0, -50%, 0)
+}
+
+.swiper-container-vertical>.swiper-pagination .swiper-pagination-bullet {
+  margin: .25rem 0;
+  display: block
+}
+
+.swiper-container-horizontal>.swiper-pagination {
+  bottom: .5rem;
+  left: 0;
+  width: 175%
+}
+
+.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet {
+  margin: 0 .25rem
+}
+
+.swiper-container-3d {
+  -webkit-perspective: 600rem;
+  perspective: 600rem
+}
+
+.swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper {
+  -webkit-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  transform-style: preserve-3d
+}
+
+.swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10
+}
+
+.swiper-container-3d .swiper-slide-shadow-left {
+  background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+  background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
+}
+
+.swiper-container-3d .swiper-slide-shadow-right {
+  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+  background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
+}
+
+.swiper-container-3d .swiper-slide-shadow-top {
+  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+  background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
+}
+
+.swiper-container-3d .swiper-slide-shadow-bottom {
+  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
+}
+
+.swiper-container-coverflow .swiper-wrapper {
+  -ms-perspective: 600rem
+}
+
+.swiper-container-fade.swiper-container-free-mode .swiper-slide {
+  -webkit-transition-timing-function: ease-out;
+  transition-timing-function: ease-out
+}
+
+.swiper-container-fade .swiper-slide {
+  pointer-events: none
+}
+
+.swiper-container-fade .swiper-slide-active {
+  pointer-events: auto
+}
+
+.swiper-container-cube {
+  overflow: visible
+}
+
+.swiper-container-cube .swiper-slide {
+  pointer-events: none;
+  visibility: hidden;
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  width: 100%;
+  height: 100%
+}
+
+.swiper-container-cube.swiper-container-rtl .swiper-slide {
+  -webkit-transform-origin: 100% 0;
+  transform-origin: 100% 0
+}
+
+.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next+.swiper-slide, .swiper-container-cube .swiper-slide-prev {
+  pointer-events: auto;
+  visibility: visible
+}
+
+.swiper-container-cube .swiper-cube-shadow {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  opacity: .6;
+  -webkit-filter: blur(2.5rem);
+  filter: blur(2.5rem)
+}
+
+.swiper-container-cube.swiper-container-vertical .swiper-cube-shadow {
+  z-index: 0
+}
+
+.swiper-scrollbar {
+  border-radius: .5rem;
+  position: relative;
+  -ms-touch-action: none;
+  background: rgba(0, 0, 0, .1)
+}
+
+.swiper-container-horizontal>.swiper-scrollbar {
+  position: absolute;
+  left: 1%;
+  bottom: .15rem;
+  z-index: 50;
+  height: .25rem;
+  width: 98%
+}
+
+.swiper-container-vertical>.swiper-scrollbar {
+  position: absolute;
+  right: .15rem;
+  top: 1%;
+  z-index: 50;
+  width: .25rem;
+  height: 98%
+}
+
+.swiper-scrollbar-drag {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background: rgba(0, 0, 0, .5);
+  border-radius: .5rem;
+  left: 0;
+  top: 0
+}
+
+.swiper-scrollbar-cursor-drag {
+  cursor: move
+}
+.swiper-slide .preloader {
+  width: 2.1rem;
+  height: 2.1rem;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -1.05rem;
+  margin-top: -1.05rem;
+  z-index: 10
+}
+
+.swiper-slide img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Tab.vue b/src/components/Tab.vue
new file mode 100644
index 0000000..c53ecfb
--- /dev/null
+++ b/src/components/Tab.vue
@@ -0,0 +1,50 @@
+<template>
+<div :id="name" :class="classes">
+  <slot></slot>
+</div>
+</template>
+
+<script>
+import cx from 'classnames'
+
+export default {
+  props: {
+    defaultCls: {
+      type: String,
+      default: 'tab'
+    },
+    name: {
+      type: String,
+      require: true
+    },
+    title: {
+      type: String,
+      require: true
+    },
+    status: {
+      type: String,
+      default: ''
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  created () {
+    this.$dispatch('setTabBtn', {
+      href: `#${this.name}`,
+      title: this.title,
+      status: this.status
+    })
+  },
+  computed: {
+    classes () {
+      return cx({
+        [this.className]: !!this.className,
+        [this.status]: !!this.status,
+        [this.defaultCls]: 1
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
new file mode 100644
index 0000000..49d8d94
--- /dev/null
+++ b/src/components/Tabs.vue
@@ -0,0 +1,62 @@
+<template>
+<div :class="classes">
+  <v-button-group
+    :type="type">
+    <v-button
+      v-for="btn in tabBtn"
+      :href="btn.href"
+      :class="btn.status"
+      :shape="shape"
+      class-name="tab-link">
+      {{btn.title}}
+    </v-button>
+  </v-button-group>
+  <div class="tabs">
+    <slot></slot>
+  </div>
+</div>
+</template>
+
+<script>
+import VButtonGroup from './ButtonGroup'
+import VButton from './Button'
+import cx from 'classnames'
+
+export default {
+  props: {
+    type: {
+      type: String,
+      require: true
+    },
+    shape: {
+      type: String,
+      default: ''
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      tabBtn: []
+    }
+  },
+  events: {
+    'setTabBtn' (data) {
+      this.tabBtn.push(data)
+    }
+  },
+  computed: {
+    classes () {
+      return cx({
+        [this.className]: !!this.className
+      })
+    }
+  },
+  components: {
+    VButton,
+    VButtonGroup
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/directives/pullToRefresh.js b/src/directives/pullToRefresh.js
new file mode 100644
index 0000000..85f5303
--- /dev/null
+++ b/src/directives/pullToRefresh.js
@@ -0,0 +1,15 @@
+import $ from 'zepto'
+
+export default {
+  params: ['action', 'distance'],
+  bind () {
+    let el = $(this.el)
+    el.addClass('content')
+    el.addClass('pull-to-refresh-content')
+    el.attr('data-ptr-distance', this.params.distance)
+    $(el).on('refresh', function (e) {
+      this.vm[this.params.action]()
+    }.bind(this))
+  }
+}
+
diff --git a/src/filters.js b/src/filters.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..13a462f
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>forward</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
+    <link rel="shortcut icon" href="/favicon.ico">
+    <link rel="bookmark" href="/favicon.ico"/>
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
+    {% for (var css in o.htmlWebpackPlugin.files.css) { %}
+    <link href="{%=o.htmlWebpackPlugin.files.css[css] %}" rel="stylesheet">
+    {% } %}
+  </head>
+  <body>
+    <div id="app">
+    </div>
+    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
+    <script type="text/javascript">
+    $.config = {
+      router: false
+    }
+    </script>
+    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
+    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
+    {% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %}
+    <script src="{%=o.htmlWebpackPlugin.files.chunks[chunk].entry %}"></script>
+    {% } %}
+  </body>
+</html>
diff --git a/src/main.vue b/src/main.vue
new file mode 100644
index 0000000..0ba0348
--- /dev/null
+++ b/src/main.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="page page-current">
+      <v-bar
+        type="tab"
+        v-if="isIndex">
+        <v-tab-item :options="options"></v-tab-item>
+      </v-bar>
+      <router-view transition="fade" transition-mode="out-in" keep-alive></router-view>
+  </div>
+</template>
+
+<script>
+import VBar from './components/Bar'
+import VTabItem from './components/BarTabItem'
+
+export default {
+  ready () {
+    this.options.items = [
+      {
+        path: '/home',
+        icon: 'app',
+        label: '首页'
+      },
+      {
+        path: '/article',
+        icon: 'star',
+        label: '任务'
+      },
+      {
+        path: '/user',
+        icon: 'me',
+        label: '我自己'
+      },
+      {
+        path: '/more',
+        icon: 'gift',
+        label: '更多'
+      }
+    ]
+  },
+  data () {
+    return {
+      isIndex: true,
+      title: '首页',
+      options: {
+        items: [],
+        activeClass: 'active'
+      }
+    }
+  },
+  components: {
+    VBar,
+    VTabItem
+  }
+}
+</script>
+
+<style>
+[v-cloak] {
+  display: none;
+}
+.fade-transition {
+  transition: opacity .3s ease;
+}
+.fade-enter, .fade-leave {
+  opacity: 0;
+}
+</style>
diff --git a/src/router.js b/src/router.js
new file mode 100644
index 0000000..fc2833a
--- /dev/null
+++ b/src/router.js
@@ -0,0 +1,79 @@
+import Home from './views/home'
+import Article from './views/article'
+import User from './views/user'
+import More from './views/more'
+import Feedback from './views/more/feedback'
+import About from './views/more/about'
+import Rank from './views/home/rank'
+import Tasks from './views/home/tasks'
+import Invite from './views/home/invite'
+import Profile from './views/user/profile'
+import Profit from './views/user/profit'
+import ProfitRecord from './views/user/profitRecord'
+import Withdraw from './views/user/withdraw'
+import $ from 'zepto'
+
+export default function (router) {
+  router.map({
+    '/home': {
+      component: Home
+    },
+    '/home/rank': {
+      component: Rank
+    },
+    '/home/tasks': {
+      component: Tasks
+    },
+    '/home/invite': {
+      component: Invite
+    },
+    '/article': {
+      component: Article
+    },
+    '/user': {
+      component: User
+    },
+    '/user/withdraw': {
+      component: Withdraw
+    },
+    '/user/profile': {
+      component: Profile
+    },
+    '/user/profit': {
+      component: Profit
+    },
+    '/user/profit/record': {
+      component: ProfitRecord
+    },
+    '/more': {
+      component: More
+    },
+    '/more/feedback': {
+      component: Feedback
+    },
+    '/more/about': {
+      component: About
+    }
+  })
+  router.redirect({
+    '/': '/home'
+  })
+
+  router.beforeEach(function ({to, from, next}) {
+    let toPath = to.path
+    let fromPath = from.path
+    console.log('to: ' + toPath + ' from: ' + fromPath)
+    if (toPath.replace(/[^/]/g, '').length > 1) {
+      router.app.isIndex = false
+    }
+    else {
+      router.app.isIndex = true
+    }
+    next()
+  })
+
+  router.afterEach(function ({to}) {
+    console.log(`成功浏览到: ${to.path}`)
+    $.refreshScroller()
+  })
+}
diff --git a/src/views/article.vue b/src/views/article.vue
new file mode 100644
index 0000000..981f528
--- /dev/null
+++ b/src/views/article.vue
@@ -0,0 +1,147 @@
+<template>
+<div class="content article">
+  <v-bar type="nav">
+    <h1 class="title" v-text="title"></h1>
+    <v-button types="nav link"
+      class-name="pull-right"
+      @click="openPanel">
+      <v-icon type="menu"></v-icon>
+    </v-button>
+  </v-bar>
+  <v-tabs type="tab" class-name="article-tabs">
+    <v-tab name="timer-tasks" title="限时任务" status="active"
+    action="refreshAll" distance="55" v-pull-to-refresh>
+      <v-layer></v-layer>
+      <div class="allTasks">
+          <v-card-container>
+            <card type="header">card1</card>
+            <card type="content">
+              <card type="content-inner">
+              这里是第1个card，下拉刷新会出现第2个card
+              </card>
+            </card>
+          </v-card-container>
+      </div>
+    </v-tab>
+    <v-tab name="common-tasks" title="普通任务"
+    action="refreshMine" distance="55" v-pull-to-refresh>
+      <v-layer></v-layer>
+      <div class="myTasks">
+          <v-card-container v-for="task in tasks | orderBy 'id' -1">
+            <card type="header">{{task.title}}</card>
+            <card type="content">
+              <card type="content-inner">
+              {{task.content}}
+              </card>
+            </card>
+          </v-card-container>
+      </div>
+    </v-tab>
+  </v-tabs>
+  <div class="panel-overlay"></div>
+  <div class="panel panel-right panel-cover" id='panel-demo'>
+    <div class="content-block">
+      <p>我是从右边出现的</p>
+      <p>并且我是覆盖在页面上而不是推开页面</p>
+      <p></p>
+      <p><button class="button close-panel">关闭</button></p>
+    </div>
+  </div>
+
+</div>
+</template>
+
+<script>
+import VBar from '../components/Bar'
+import VButton from '../components/Button'
+import VIcon from '../components/Iconfont'
+import VTabs from '../components/Tabs'
+import VTab from '../components/Tab'
+import VLayer from '../components/PullToRefreshLayer'
+import VCardContainer from '../components/Card'
+import Card from '../components/CardItem'
+import $ from 'zepto'
+
+export default {
+  ready () {
+    $.init()
+  },
+  data () {
+    return {
+      title: '任务列表',
+      tasks: [
+        {
+          id: 1,
+          title: 'card1',
+          content: '这里是第1个card，下拉刷新会出现第2个card'
+        }
+      ]
+    }
+  },
+  computed: {
+    length () {
+      return this.tasks.length
+    }
+  },
+  methods: {
+    openPanel () {
+      $.openPanel('#panel-demo')
+    },
+    refreshAll () {
+      $.showIndicator()
+      setTimeout(function () {
+        console.log('refreshAll')
+        var cardNumber = $(this.$el).find('.card').length
+        var cardHTML = '<div class="card">' +
+          '<div class="card-header">card' + cardNumber + '</div>' +
+          '<div class="card-content">' +
+          '<div class="card-content-inner">' +
+          '这里是第' + cardNumber + '个card，下拉刷新会出现第' + (cardNumber + 1) + '个card。' +
+          '</div>' +
+          '</div>' +
+          '</div>'
+        $(this.$el).find('.allTasks').prepend(cardHTML)
+        // 加载完毕需要重置
+        $.pullToRefreshDone('.pull-to-refresh-content')
+        $.hideIndicator()
+      }.bind(this), 1500)
+    },
+    refreshMine () {
+      $.showIndicator()
+      setTimeout(function () {
+        console.log('refreshMine')
+        let num = this.length + 1
+        let title = `card${num}`
+        let content = `这里是第${num}个card，下拉刷新会出现第${num + 1}个card。`
+        this.tasks.push({
+          id: num,
+          title: title,
+          content: content
+        })
+        $.pullToRefreshDone('.pull-to-refresh-content')
+        $.hideIndicator()
+      }.bind(this), 1500)
+    }
+  },
+  components: {
+    VBar,
+    VButton,
+    VIcon,
+    VTabs,
+    VTab,
+    VLayer,
+    VCardContainer,
+    Card
+  }
+}
+</script>
+
+<style>
+.article-tabs .buttons-tab {
+  z-index: 10;
+  margin-top:2.2rem;
+}
+#common-tasks, #timer-tasks {
+  top: 2rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/home.vue b/src/views/home.vue
new file mode 100644
index 0000000..cde71da
--- /dev/null
+++ b/src/views/home.vue
@@ -0,0 +1,174 @@
+<template>
+<div class="content home" action="refresh" distance="55" v-pull-to-refresh>
+  <v-layer></v-layer>
+  <slider :imgs="slider.imgs" :config="slider.config"></slider>
+  <v-bar
+    type="tab"
+    :class-name="bar.className">
+    <v-tab-item :options="bar"></v-tab-item>
+  </v-bar>
+  <v-content type="block-title" style="margin: 0.9rem .75rem 0.9rem;">
+    <span style="float:left;margin-left: .2rem;">任务推荐</span>
+    <span style="float:right;margin-right: .2rem;">更多任务</span>
+  </v-content>
+  <div class="card-container">
+    <v-card-container v-for="task in tasks | orderBy 'id' -1">
+      <card type="content">
+        <v-list type="media">
+            <li class="item-content">
+              <div class="item-media">
+                <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44">
+              </div>
+              <div class="item-inner">
+                <div class="item-title-row">
+                  <div class="item-text">{{task.title}}</div>
+                </div>
+              </div>
+            </li>
+        </v-list>
+      </card>
+      <card type="footer">
+        <span>赞助商：{{task.adv}}</span>
+        <span style="color:orange;font-weight: bold">{{task.point}}积分</span>
+      </card>
+    </v-card-container>
+  </div>
+</div>
+</template>
+
+<script>
+import $ from 'zepto'
+import Slider from '../components/Slider'
+import VBar from '../components/Bar'
+import VTabItem from '../components/BarTabItem'
+import VLayer from '../components/PullToRefreshLayer'
+import VCardContainer from '../components/Card'
+import Card from '../components/CardItem'
+import VContent from '../components/Content'
+import VList from '../components/List'
+
+export default {
+  ready () {
+    console.log('home ready')
+    $.init()
+  },
+  data () {
+    return {
+      slider: {
+        imgs: [
+          {
+            src: '//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg',
+            target: 'www.baidu.com'
+          },
+          {
+            src: '//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg',
+            target: 'www.baidu.com'
+          },
+          {
+            src: '//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg',
+            target: 'www.baidu.com'
+          },
+          {
+            src: '//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg',
+            target: 'www.baidu.com'
+          }
+        ],
+        config: {
+          autoplay: 1200
+        }
+      },
+      bar: {
+        items: [
+          {
+            path: '/home/rank',
+            icon: 'star',
+            label: '排行榜'
+          },
+          {
+            path: '/home/tasks',
+            icon: 'computer',
+            label: '我的任务'
+          },
+          {
+            path: '/home/invite',
+            icon: 'friends',
+            label: '邀请有奖'
+          }
+        ],
+        activeClass: 'inactive',
+        className: 'home-bar'
+      },
+      tasks: [
+        {
+          id: 1,
+          title: '标题1',
+          adv: 'abc1',
+          point: 100
+        }
+      ]
+    }
+  },
+  computed: {
+    length () {
+      return this.tasks.length
+    }
+  },
+  methods: {
+    refresh () {
+      setTimeout(function () {
+        let num = this.length + 1
+        let title = `标题${num}`
+        let adv = `abc${num}`
+        let point = 100 + num - 1
+        this.tasks.push({
+          id: num,
+          title: title,
+          adv: adv,
+          point: point
+        })
+        $.pullToRefreshDone('.pull-to-refresh-content')
+      }.bind(this), 1500)
+    }
+  },
+  components: {
+    Slider,
+    VBar,
+    VTabItem,
+    VLayer,
+    VCardContainer,
+    Card,
+    VContent,
+    VList
+  },
+  route: {
+    data ({to, next}) {
+      console.log('route home data')
+      next()
+    },
+    activate ({to, next}) {
+      console.log('route home activate')
+      if ($.slider !== undefined) {
+        $.slider.stopAutoplay()
+        $.slider.startAutoplay()
+      }
+      next()
+    }
+  }
+}
+</script>
+
+<style>
+.home {
+  top: -2.2rem !important;
+}
+.home-bar {
+  background: #efeff4;
+  height: 3.6rem;
+  position: relative;
+  box-shadow: 0 .01rem .05rem rgba(0,0,0,.3);
+}
+.home-bar .tab-item {
+  height: 3.6rem;
+  background-color: white;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/home/invite.vue b/src/views/home/invite.vue
new file mode 100644
index 0000000..73228a1
--- /dev/null
+++ b/src/views/home/invite.vue
@@ -0,0 +1,136 @@
+<template>
+<div class="content invite">
+  <v-bar type="nav">
+    <h1 class="title" v-text="title"></h1>
+    <v-button types="nav link"
+      class-name="pull-left"
+      v-link="{path: '/home', replace: true}">
+      <v-icon type="left"></v-icon>
+    </v-button>
+  </v-bar>
+  <v-list>
+    <li class="item-content">
+      <div class="item-inner">
+        <div class="item-title">邀请奖励</div>
+        <div class="item-after" style="color:green">888分</div>
+      </div>
+    </li>
+  </v-list>
+  <v-content type="block">
+    <div class="invite-card">
+        <div class="invite-card-content">
+            <div class="left_logo">
+              <img src="../../assets/logo.png" height="256" width="256" class="img_full" style="border-radius: 50px">
+            </div>
+            <div class="center_code">
+                <span class="card_text">eteplus</span>
+                <div class="wx_code">
+                    <img src="../../assets/qrcode.jpg" height="795" width="795" class="img_full">
+                </div>
+                <div class="code_down">
+                    <span>长按保存发送好友</span>
+                    <span style="color:#0894ec;">长按复制推广网址</span>
+                </div>
+            </div>
+            <div class="url"><p>http://abc.coms?i=1235</p></div>
+        </div>
+    </div>
+  </v-content>
+</div>
+</template>
+
+<script>
+import VBar from '../../components/Bar'
+import VContent from '../../components/Content'
+import VButton from '../../components/Button'
+import VIcon from '../../components/Iconfont'
+import VList from '../../components/List'
+
+export default {
+  data () {
+    return {
+      title: '邀请有奖'
+    }
+  },
+  components: {
+    VBar,
+    VContent,
+    VList,
+    VButton,
+    VIcon
+  }
+}
+</script>
+
+<style>
+.invite .list-block {
+  margin: 2.2rem 0 0 0;
+}
+.invite .content-block {
+  margin: .75rem 0;
+}
+.invite-card {
+  padding: .1rem;
+}
+.invite-card .invite-card-content {
+  width: 100%;
+  height: 380.2666429px;
+  border: 1px solid #B2B2B2;
+  border-radius: 8px;
+  background-color: #ffffff;
+  padding-top: 26.666665px;
+}
+.invite-card .left_logo {
+  width: 3rem;
+  height: 3rem;
+  float: left;
+  margin-left: .8rem;
+}
+.center_code {
+  width: 100%;
+  margin: 0 auto;
+  padding-top: 1rem;
+}
+.img_full {
+  width: 100%;
+  height: 100%;
+}
+.card_text {
+  color: #000000;
+  font-size: .8rem;
+  font-weight: 600;
+  display: block;
+  width: 100%;
+  padding-left: 43%;
+}
+.center_code .code_down {
+  font-size: 15px;
+  font-weight: 600;
+  width: 100%;
+  text-align: center;
+  line-height: 20px;
+}
+.code_down span {
+  color: #000000;
+  font-size: .8rem;
+  font-weight: 600;
+  display: block;
+  width: 100%;
+  margin-bottom: .5rem;
+}
+.center_code .wx_code {
+  margin: 0 auto;
+  width: 50%;
+  height: 50%;
+}
+.url {
+  width: 95%;
+  height: 2.8rem;
+  font-size: .8rem;
+  text-align: center;
+  border: 1px dashed black;
+  margin-left: .3rem;
+  border-radius: .8rem;
+  overflow: hidden;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/home/rank.vue b/src/views/home/rank.vue
new file mode 100644
index 0000000..691ed2a
--- /dev/null
+++ b/src/views/home/rank.vue
@@ -0,0 +1,158 @@
+<template>
+<div class="content rank">
+  <v-bar type="nav">
+    <h1 class="title" v-text="title"></h1>
+    <v-button types="nav link"
+      class-name="pull-left"
+      v-link="{path: '/home', replace: true}">
+      <v-icon type="left"></v-icon>
+    </v-button>
+  </v-bar>
+  <v-tabs type="tab" class-name="rank-tabs">
+    <v-tab name="point" title="积分排行" status="active"
+    action="refreshPoint" distance="55" v-pull-to-refresh>
+      <v-layer></v-layer>
+      <v-content type="block-title">
+        <span style="float:left;margin-left: .2rem;">积分排行榜</span>
+        <span style="float:right;margin-right: .2rem;">排名</span>
+      </v-content>
+      <v-list type="media" class-name="inset">
+        <li class="item-content" v-for="rank in ranks">
+          <div class="item-media">
+          <img :src="rank.avatar" style='width: 2.2rem;'>
+          </div>
+          <div class="item-inner">
+            <div class="item-title-row">
+              <div class="item-title" v-text="rank.nickname"></div>
+            </div>
+            <div class="rank-num" :style="rank.color">{{ $index+1 }}</div>
+            <div class="item-subtitle">总积分：{{rank.point}}</div>
+          </div>
+        </li>
+      </v-list>
+    </v-tab>
+    <v-tab name="invite" title="邀请排行"
+    action="refreshInvite" distance="55" v-pull-to-refresh>
+      <v-layer></v-layer>
+      <v-content type="block-title">
+        <span style="float:left;margin-left: .2rem;">邀请排行榜</span>
+        <span style="float:right;margin-right: .2rem;">排名</span>
+      </v-content>
+      <v-list type="media" class-name="inset">
+        <li class="item-content" v-for="rank in ranks">
+          <div class="item-media">
+          <img :src="rank.avatar" style='width: 2.2rem;'>
+          </div>
+          <div class="item-inner">
+            <div class="item-title-row">
+              <div class="item-title" v-text="rank.nickname"></div>
+            </div>
+            <div class="rank-num" :style="rank.color">{{ $index+1 }}</div>
+            <div class="item-subtitle">总邀请：{{rank.point}}</div>
+          </div>
+        </li>
+      </v-list>
+    </v-tab>
+  </v-tabs>
+</div>
+</template>
+
+<script>
+import $ from 'zepto'
+import VBar from '../../components/Bar'
+import VContent from '../../components/Content'
+import VButton from '../../components/Button'
+import VIcon from '../../components/Iconfont'
+import VList from '../../components/List'
+import VTabs from '../../components/Tabs'
+import VTab from '../../components/Tab'
+import VLayer from '../../components/PullToRefreshLayer'
+
+export default {
+  ready () {
+    $.init()
+  },
+  data () {
+    return {
+      title: '排行榜',
+      ranks: [
+        {
+          avatar: 'http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg',
+          nickname: 'A',
+          point: 1300,
+          color: 'background-color: red;'
+        },
+        {
+          avatar: 'http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg',
+          nickname: 'B',
+          point: 1200,
+          color: 'background-color: blue;'
+        },
+        {
+          avatar: 'http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg',
+          nickname: 'C',
+          point: 1100,
+          color: 'background-color: purple;'
+        }
+      ]
+    }
+  },
+  methods: {
+    refreshPoint () {
+      $.showIndicator()
+      setTimeout(function () {
+        console.log('refresh')
+        $.pullToRefreshDone('.pull-to-refresh-content')
+        $.hideIndicator()
+      }, 1500)
+    },
+    refreshInvite () {
+      $.showIndicator()
+      setTimeout(function () {
+        console.log('refresh')
+        $.pullToRefreshDone('.pull-to-refresh-content')
+        $.hideIndicator()
+      }, 1500)
+    }
+  },
+  components: {
+    VBar,
+    VContent,
+    VList,
+    VButton,
+    VIcon,
+    VTabs,
+    VTab,
+    VLayer
+  }
+}
+</script>
+
+<style>
+.rank .content-block-title {
+  margin: .75rem .75rem .5rem;
+}
+.rank .list-block.inset {
+  margin-left: .35rem;
+  margin-right: .35rem;
+}
+.rank .rank-num {
+  float: right;
+  min-width: 1.2rem;
+  line-height: 1.2rem;
+  border-radius: 50%;
+  padding-left: .35rem;
+  color: white;
+  margin-top: -.7rem;
+  vertical-align: top;
+  display: inline-block;
+  font-size: .8rem;
+}
+.rank-tabs .buttons-tab {
+  z-index: 10;
+  margin-top: 2.2rem;
+}
+#point, #invite  {
+  top: 2.2rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/home/tasks.vue b/src/views/home/tasks.vue
new file mode 100644
index 0000000..591d44a
--- /dev/null
+++ b/src/views/home/tasks.vue
@@ -0,0 +1,143 @@
+<template>
+<div class="tasks">
+  <v-bar type="nav">
+    <h1 class="title" v-text="title"></h1>
+    <v-button types="nav link"
+      class-name="pull-left"
+      v-link="{path: '/home', replace: true}">
+      <v-icon type="left"></v-icon>
+    </v-button>
+  </v-bar>
+  <v-tabs type="tab" class-name="tasks-tabs">
+    <v-tab name="all-tasks" title="所有任务" status="active"
+    action="refreshAll" distance="55" v-pull-to-refresh>
+      <v-layer></v-layer>
+      <div class="allTasks">
+          <v-card-container>
+            <card type="header">card1</card>
+            <card type="content">
+              <card type="content-inner">
+              这里是第1个card，下拉刷新会出现第2个card
+              </card>
+            </card>
+          </v-card-container>
+      </div>
+    </v-tab>
+    <v-tab name="my-tasks" title="我的任务"
+    action="refreshMine" distance="55" v-pull-to-refresh>
+      <v-layer></v-layer>
+      <div class="myTasks">
+          <v-card-container v-for="task in tasks | orderBy 'id' -1">
+            <card type="header">{{task.title}}</card>
+            <card type="content">
+              <card type="content-inner">
+              {{task.content}}
+              </card>
+            </card>
+          </v-card-container>
+      </div>
+    </v-tab>
+  </v-tabs>
+</div>
+</template>
+
+<script>
+import $ from 'zepto'
+import VBar from '../../components/Bar'
+import VButton from '../../components/Button'
+import VIcon from '../../components/Iconfont'
+import VTabs from '../../components/Tabs'
+import VTab from '../../components/Tab'
+import VLayer from '../../components/PullToRefreshLayer'
+import VCardContainer from '../../components/Card'
+import Card from '../../components/CardItem'
+
+export default {
+  ready () {
+    $.init()
+  },
+  data () {
+    return {
+      title: '任务列表',
+      tasks: [
+        {
+          id: 1,
+          title: 'card1',
+          content: '这里是第1个card，下拉刷新会出现第2个card'
+        }
+      ]
+    }
+  },
+  computed: {
+    length () {
+      return this.tasks.length
+    }
+  },
+  methods: {
+    refreshAll () {
+      $.showIndicator()
+      setTimeout(function () {
+        console.log('refreshAll')
+        var cardNumber = $(this.$el).find('.card').length
+        var cardHTML = '<div class="card">' +
+          '<div class="card-header">card' + cardNumber + '</div>' +
+          '<div class="card-content">' +
+          '<div class="card-content-inner">' +
+          '这里是第' + cardNumber + '个card，下拉刷新会出现第' + (cardNumber + 1) + '个card。' +
+          '</div>' +
+          '</div>' +
+          '</div>'
+        $(this.$el).find('.allTasks').prepend(cardHTML)
+        // 加载完毕需要重置
+        $.pullToRefreshDone('.pull-to-refresh-content')
+        $.hideIndicator()
+      }.bind(this), 1500)
+    },
+    refreshMine () {
+      $.showIndicator()
+      setTimeout(function () {
+        console.log('refreshMine')
+        let num = this.length + 1
+        let title = `card${num}`
+        let content = `这里是第${num}个card，下拉刷新会出现第${num + 1}个card。`
+        this.tasks.push({
+          id: num,
+          title: title,
+          content: content
+        })
+        $.pullToRefreshDone('.pull-to-refresh-content')
+        $.hideIndicator()
+      }.bind(this), 1500)
+    }
+  },
+  components: {
+    VBar,
+    VButton,
+    VIcon,
+    VTabs,
+    VTab,
+    VLayer,
+    VCardContainer,
+    Card
+  }
+}
+</script>
+
+<style>
+.tasks {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.tasks-tabs .buttons-tab {
+  z-index: 10;
+  margin-top:2.2rem;
+}
+#all-tasks, #my-tasks {
+  top: 2rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/more.vue b/src/views/more.vue
new file mode 100644
index 0000000..a1227be
--- /dev/null
+++ b/src/views/more.vue
@@ -0,0 +1,73 @@
+<template>
+<div class="content more">
+  <header class="bar bar-nav" style="position: fixed">
+    <h1 class="title" v-text="title"></h1>
+  </header>
+  <div class="list-block more-list">
+    <ul>
+      <li class="item-content item-link">
+        <div class="item-inner">
+          <div class="item-title">使用教程</div>
+        </div>
+      </li>
+    </ul>
+    <ul>
+      <li class="item-content item-link">
+        <div class="item-inner">
+          <div class="item-title">高阶攻略</div>
+        </div>
+      </li>
+    </ul>
+    <ul>
+      <li class="item-content item-link">
+        <div class="item-inner">
+          <div class="item-title">宣传页面</div>
+        </div>
+      </li>
+    </ul>
+    <br>
+    <ul>
+      <li class="item-content item-link" v-link="{ path: '/more/feedback', replace: true}">
+        <div class="item-inner">
+          <div class="item-title">意见反馈</div>
+        </div>
+      </li>
+    </ul>
+    <ul>
+      <li class="item-content item-link" v-link="{ path: '/more/about', replace: true}">
+        <div class="item-inner">
+          <div class="item-title">关于我们</div>
+        </div>
+      </li>
+    </ul>
+    <br>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  ready () {
+  },
+  data () {
+    return {
+      title: '更多'
+    }
+  }
+}
+</script>
+
+<style>
+.more-list {
+  margin: 2.75rem 0;
+  height: 2.9rem;
+}
+.more-list ul {
+  height: 2.9rem;
+  /*box-shadow: 0 .01rem 0 .03rem rgba(0,0,0,.3);*/
+}
+.more-list .item-content {
+  margin-top: .7rem;
+  height: inherit;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/more/about.vue b/src/views/more/about.vue
new file mode 100644
index 0000000..6f6c52b
--- /dev/null
+++ b/src/views/more/about.vue
@@ -0,0 +1,54 @@
+<template>
+<div class="content about">
+  <header class="bar bar-nav">
+    <a class="button button-link button-nav pull-left" v-link="{path: '/more', replace: true}">
+    <span class="icon icon-left"></span>
+    </a>
+    <h1 class="title" v-text="title"></h1>
+  </header>
+  <div class="content-padded" style="background-color: white;">
+    <h4 style="text-align: center"> ^_^ 感觉对您有帮助可以捐助小弟 ^_^ </h4>
+    <p class="color-gray"></p>
+    <v-content type="block">
+      <div class="invite-card">
+          <div class="invite-card-content" style="height:100%;">
+              <div class="center_code">
+                  <span class="card_text">eteplus</span>
+                  <div class="wx_code" style="width:80%;height:80%">
+                      <img src="../../assets/qrcode.jpg" height="100%" width="100%" class="img_full">
+                  </div>
+              </div>
+              <div class="url" style="margin-left: .4rem;height:3.8rem;margin-bottom: .4rem;">
+              <p>https://github.com/eteplus/vue-sui-demo.git</p></div>
+          </div>
+      </div>
+    </v-content>
+  </div>
+</div>
+</template>
+
+<script>
+import VContent from '../../components/Content'
+
+export default {
+  ready () {
+  },
+  data () {
+    return {
+      title: '关于我们'
+    }
+  },
+  components: {
+    VContent
+  }
+}
+</script>
+
+<style>
+.about .content-padded {
+  margin: 2.8rem 0 0 0;
+  height: auto;
+  padding: .4rem .4rem;
+}
+  
+</style>
\ No newline at end of file
diff --git a/src/views/more/feedback.vue b/src/views/more/feedback.vue
new file mode 100644
index 0000000..0faa62b
--- /dev/null
+++ b/src/views/more/feedback.vue
@@ -0,0 +1,98 @@
+<template>
+<div class="content feedback">
+  <header class="bar bar-nav">
+    <a class="button button-link button-nav pull-left" v-link="{path: '/more', replace: true}">
+    <span class="icon icon-left"></span>
+    </a>
+    <h1 class="title" v-text="title"></h1>
+  </header>
+<!--<div class="row sub-title">
+    欢迎每一位用户提出留言与建议
+  </div> -->
+  <div class="content-block">
+    <div class="feedback-label">
+      <span style="color:red">*</span> 反馈内容：
+    </div>
+    <div class="item-input">
+      <textarea rows="7" placeholder="请输入反馈内容，不得少于五个字"></textarea>
+    </div>
+    <div class="feedback-label">
+      如需帮助，请留下您的联系电话或邮箱，谢谢！
+    </div>
+    <div class="feedback-input">
+      <input type="text" placeholder="电话">
+      <input type="text" placeholder="邮箱">
+    </div>
+  </div>
+  <div class="submit-button">
+    <button class="button button-big button-fill">提交</button>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  ready () {
+  },
+  data () {
+    return {
+      title: '意见反馈'
+    }
+  }
+}
+</script>
+
+<style>
+.sub-title {
+  margin-top: 2.2rem;
+  background-color: white;
+  height: 2.2rem;
+  font-size: .8rem;
+  font-weight: normal;
+  line-height: 2.2rem;
+  text-align: center;
+  border-bottom: 1px solid #d8d8d9;
+}
+.feedback .content-block {
+  margin: 2.3rem 0 0 0;
+  padding: 0 .45rem;
+}
+.feedback-label {
+  font-size: .7rem;
+  line-height: 1.2rem;
+}
+.feedback-input input{
+  width: 100%;
+  height: 2.15rem;
+  font-size: .7rem;
+  padding: .4rem .5rem;
+  background-color: #fff;
+  margin-bottom: .3rem;
+  border: 1px solid rgba(0,0,0,.2);
+  border-radius: .2rem;
+}
+.feedback textarea {
+  height: auto;
+  resize: none;
+  width: 100%;
+  font-size: .7rem;
+  -webkit-appearance: none;
+  padding: .4rem .5rem;
+  -webkit-user-select: text;
+  background-color: #fff;
+  border: 1px solid rgba(0,0,0,.2);
+  border-radius: .2rem;
+  outline: 0;
+}
+.feedback .submit-button {
+  margin-top: .8rem;
+  width: 100%;
+  padding: 0 .45rem;
+}
+.feedback .submit-button button {
+  background-color: #ed8e07;
+  width: 100%;
+  line-height: 2.1rem !important;
+  height: 2.1rem !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/user.vue b/src/views/user.vue
new file mode 100644
index 0000000..d8db6a5
--- /dev/null
+++ b/src/views/user.vue
@@ -0,0 +1,183 @@
+<template>
+<div class="content user">
+  <div class="banner">
+    <div class="logo">
+        <div class="logo_img">
+            <img src="../assets/logo.png" class="img-responsive" style="border:solid 1px #fff;border-radius: 50px;overflow:hidden;" width="64" height="64">
+            <div style="color:white;line-height: 1;">eteplus</div>
+        </div>
+        <div class="logo_txt">
+            <span class="yue">我的余额(积分)</span>
+            <span class="amount timer count-title" id="count-number" data-to="300" data-speed="500" data-decimals="0">300</span>
+        </div>
+    </div>
+    <div class="in">
+        <div class="incomes">今日收入 0 积分</div>
+        <div class="students">今日邀请 0 个</div>
+    </div>
+  </div>
+  <nav class="bar bar-tab user-tab">
+    <a class="tab-item">
+      <span class="icon icon-star"></span>
+      <span class="tab-label">已提现</span>
+    </a>
+    <a class="tab-item">
+      <span class="icon icon-me"></span>
+      <span class="tab-label">余额</span>
+    </a>
+    <a class="tab-item" v-link="{ path: '/user/withdraw', replace: true}">
+      <span class="icon icon-star"></span>
+      <span class="tab-label">我要提现</span>
+    </a>
+  </nav>
+  <div class="list-block user-list">
+    <ul>
+      <li>
+        <a class="item-content item-link" v-link="{ path: '/user/profile', replace: true}">
+        <div class="item-media"><span class="icon icon-star"></sapn></div>
+        <div class="item-inner">
+          <div class="item-title">个人资料</div>
+        </div>
+        </a>
+      </li>
+    </ul>
+    <ul>
+      <li>
+        <a class="item-content item-link"  v-link="{ path: '/home/tasks', replace: true}">
+          <div class="item-media"><span class="icon icon-star"></sapn></div>
+          <div class="item-inner">
+            <div class="item-title">我的任务</div>
+          </div>
+        </a>
+      </li>
+    </ul>
+    <ul>
+      <li>
+        <a class="item-content item-link"  v-link="{ path: '/user/profit', replace: true}">
+        <div class="item-media"><span class="icon icon-star"></sapn></div>
+        <div class="item-inner">
+          <div class="item-title">我的粉丝收益</div>
+        </div>
+        </a>
+      </li>
+    </ul>
+    <ul>
+      <li>
+        <a class="item-content item-link"  v-link="{ path: '/user/profit/record', replace: true}">
+        <div class="item-media"><span class="icon icon-star"></sapn></div>
+        <div class="item-inner">
+          <div class="item-title">收益明细</div>
+        </div>
+        </a>
+      </li>
+    </ul>
+    <ul>
+      <li>
+        <a class="item-content item-link"  v-link="{ path: '/home/invite', replace: true}">
+        <div class="item-media"><span class="icon icon-star"></sapn></div>
+        <div class="item-inner">
+          <div class="item-title">邀请好友</div>
+        </div>
+        </a>
+      </li>
+    </ul>
+    <br>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style>
+.banner {
+  width: 100%;
+  background-color: white;
+  padding: 12.7999992px;
+}
+.banner .logo {
+  background-color: #ed8e07;
+  border-radius: 10px;
+  width: 100%;
+  height: 110px;
+  padding: 20.2666654px 21.333332px 5.333333px;
+  box-shadow: 0 .0rem .8rem rgba(0,0,0,.3);
+}
+.banner .logo .logo_img {
+  margin-top: 0px;
+  width: 58.666663px;
+  height: 58.666663px;
+  display: inline-block;
+}
+.banner .logo .logo_txt {
+  margin-top: 7px;
+  float: right;
+  text-align: right;
+}
+.banner .logo .logo_txt .yue {
+  color: #ffffff;
+  font-size: 15.999999px;
+}
+.banner .logo .logo_txt .amount {
+  display: block;
+  margin-top: -6px;
+  color: #ffffff;
+  font-size: 45.8666638px;
+}
+.banner .in {
+  width: 100%;
+  height: 37.333331px;
+  margin-top: 11.7333326px;
+}
+.banner .in .incomes {
+  display: inline-block;
+  width: 44%;
+  height: 37.333331px;
+  border-radius: 8px;
+  text-align: center;
+  line-height: 37.333331px;
+  color: #ffffff;
+  font-size: 12.7999992px;
+  background-color: #ed8e07;
+}
+.banner .in .students {
+  float: right;
+  width: 44%;
+  height: 37.333331px;
+  border-radius: 8px;
+  text-align: center;
+  line-height: 37.333331px;
+  color: #ffffff;
+  font-size: 12.7999992px;
+  background-color: #ed8e07 ;
+}
+.user-tab {
+  background: #efeff4;
+  height: 3rem;
+  position: relative;
+}
+.user-tab .tab-item {
+  height: 3rem;
+  background-color: white;
+}
+.user-tab:before {
+  background-color: white;
+}
+.user-list {
+  margin: .7rem 0;
+  height: 2.9rem;
+}
+.user-list ul {
+  height: 2.9rem;
+  /*box-shadow: 0 .01rem 0 .03rem rgba(0,0,0,.3);*/
+}
+.user-list li a {
+  height: 2.9rem;
+}
+.user-list li {
+  margin-top: .7rem;
+  height: inherit;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/user/profile.vue b/src/views/user/profile.vue
new file mode 100644
index 0000000..73591d0
--- /dev/null
+++ b/src/views/user/profile.vue
@@ -0,0 +1,162 @@
+<template>
+<div class="content profile">
+  <header class="bar bar-nav">
+    <a class="button button-link button-nav pull-left" v-link="{path: '/user', replace: true}">
+    <span class="icon icon-left"></span>
+    </a>
+    <h1 class="title">个人资料</h1>
+  </header>
+  <div class="list-block">
+    <ul>
+      <li style="height: 3rem;">
+        <div class="item-content" style="min-height: 3rem;">
+          <div class="item-media"><img src="../../assets/logo.png" height="auto" style='width: 2.2rem;'></div>
+          <div class="item-inner" style="min-height: 3rem;">
+            <div class="item-title-row">
+            </div>
+            <div class="item-subtitle">头像</div>
+          </div>
+        </div>
+      </li>
+      <li>
+        <div class="item-content">
+            <div class="item-inner">
+                <div class="item-title label">昵称</div>
+                <div class="item-input">
+                    <input id="nickname" type="text" name="nickname" placeholder="用户昵称" value="abc">
+                </div>
+            </div>
+        </div>
+      </li>
+    </ul>
+    <ul style="margin-top:.5rem;">
+      <li>
+        <div class="item-content">
+            <div class="item-inner">
+                <div class="item-title label">我的邀请ID</div>
+                <div class="item-input">
+                    <input id="name" type="text" name="name" placeholder="邀请ID" value="76167" readonly="true">
+                </div>
+            </div>
+        </div>
+      </li>
+      <li>
+        <div class="item-content">
+            <div class="item-inner">
+                <div class="item-title label">真实姓名</div>
+                <div class="item-input">
+                    <input id="name" type="text" name="name" placeholder="请输入真实姓名" value="一二三">
+                </div>
+            </div>
+        </div>
+      </li>
+      <li>
+        <div class="item-content">
+            <div class="item-inner">
+                <div class="item-title label">微信号</div>
+                <div class="item-input">
+                    <input id="name" type="text" name="name" placeholder="请输入微信号" value="hhhh">
+                </div>
+            </div>
+        </div>
+      </li>
+      <li>
+        <div class="item-content">
+            <div class="item-inner">
+                <div class="item-title label">性别</div>
+                <div class="item-input">
+                    <select name="sex">
+                        <option selected>男</option>
+                        <option >女</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+      </li>
+      <li>
+          <div class="item-content">
+              <div class="item-inner">
+                  <div class="item-title label">年龄</div>
+                  <div class="item-input">
+                      <input id="age" type="number" name="age" placeholder="年龄">
+                  </div>
+              </div>
+          </div>
+      </li>
+    </ul>
+    <ul style="margin-top:.5rem">
+      <li>
+        <div class="item-link item-content">
+            <div class="item-inner">
+                <div class="item-title label">手机号</div>
+                <div class="item-input">
+                    <input id="phone" type="text"  name="phone" placeholder="手机号" >
+                </div>
+            </div>
+        </div>
+      </li>
+      <li>
+          <div class="item-content">
+              <div class="item-inner">
+                  <div class="item-title label">职业</div>
+                  <div class="item-input">
+                      <input id="occupation" type="text" name="occupation" placeholder="职业">
+                  </div>
+              </div>
+          </div>
+      </li>
+      <li>
+          <div class="item-content">
+              <div class="item-inner">
+                  <div class="item-title label">地址</div>
+                  <div class="item-input">
+                      <textarea id="address" name="address" placeholder="地址" ></textarea>
+                  </div>
+              </div>
+          </div>
+      </li>
+    </ul>
+  </div>
+  <div class="submit-button">
+    <button class="button button-big button-fill">保存</button>
+  </div>
+</div>
+</template>
+
+
+<style>
+.profile .list-block {
+  margin: 2.4rem 0 1rem 0;
+  font-size: .65rem;
+}
+.profile .list-block .item-subtitle {
+  font-size: .65rem;
+}
+.profile .list-block .item-input {
+  margin-top: .06rem;
+  margin-bottom: .06rem;
+}
+.profile .list-block input {
+  font-size: .65rem;
+}
+.profile .list-block select {
+  font-size: .65rem;
+}
+.profile .list-block textarea {
+  font-size: .65rem;
+}
+.profile .list-block .item-title.label  {
+  width: 30%;
+}
+.profile .submit-button {
+  margin: 0 auto 2rem auto;
+  width: 100%;
+  padding: 0 .45rem;
+}
+.profile .submit-button button {
+  background-color: #ed8e07;
+  width: 100%;
+  line-height: 2.1rem !important;
+  height: 2.1rem !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/user/profit.vue b/src/views/user/profit.vue
new file mode 100644
index 0000000..5d26f6e
--- /dev/null
+++ b/src/views/user/profit.vue
@@ -0,0 +1,13 @@
+<template>
+<div class="content profile">
+  <header class="bar bar-nav">
+    <a class="button button-link button-nav pull-left" v-link="{path: '/user', replace: true}">
+      <span class="icon icon-left"></span>
+    </a>
+    <h1 class="title">收益</h1>
+  </header>
+  <div class="content-padded">
+
+  </div>
+</div>
+</template> 
\ No newline at end of file
diff --git a/src/views/user/profitRecord.vue b/src/views/user/profitRecord.vue
new file mode 100644
index 0000000..57b390b
--- /dev/null
+++ b/src/views/user/profitRecord.vue
@@ -0,0 +1,96 @@
+<template>
+<div class="profit-record">
+  <header class="bar bar-nav">
+    <a class="button button-link button-nav pull-left" v-link="{path: '/user', replace: true}">
+      <span class="icon icon-left"></span>
+    </a>
+    <h1 class="title">个人明细</h1>
+  </header>
+  <div class="buttons-row">
+    <a href="#system" class="tab-link button active">系统</a>
+    <a href="#task" class="tab-link button">任务</a>
+    <a href="#invite" class="tab-link button">邀请好友</a>
+    <a href="#withdraw" class="tab-link button">积分提现</a>
+  </div>
+  <div class="tabs">
+    <div id="system" class="content tab active" data-ptr-distance="55" v-pull-to-refresh>
+      <div class="pull-to-refresh-layer">
+        <div class="preloader"></div>
+        <div class="pull-to-refresh-arrow"></div>
+      </div>
+      <div class="card-container">
+        <div class="card">
+          <div class="card-header">card</div>
+          <div class="card-content">
+            <div class="card-content-inner">
+                这里是第2个card，下拉刷新会出现第2个card。
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="task" class="tab">2</div>
+    <div id="invite" class="tab">3</div>
+    <div id="withdraw" class="tab">4</div>
+  </div>
+</div>
+</template>
+
+<script>
+import $ from 'zepto'
+export default {
+  ready () {
+    $.init()
+  },
+  methods: {
+    refresh () {
+      setTimeout(function () {
+        var cardNumber = $(this.$el).find('.card').length + 1
+        var cardHTML = '<div class="card">' +
+          '<div class="card-header">card' + cardNumber + '</div>' +
+          '<div class="card-content">' +
+          '<div class="card-content-inner">' +
+          '这里是第' + cardNumber + '个card，下拉刷新会出现第' + (cardNumber + 1) + '个card。' +
+          '</div>' +
+          '</div>' +
+          '</div>'
+        $(this.$el).find('.card-container').prepend(cardHTML)
+        // 加载完毕需要重置
+        $.pullToRefreshDone('.pull-to-refresh-content')
+      }.bind(this), 1500)
+    }
+  }
+}
+</script>
+
+<style>
+.profit-record {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.profit-record .buttons-row {
+  margin: 2.7rem auto 1rem auto;
+  z-index: 10;
+  width: 94%;
+  background-color: white;
+}
+.profit-record .buttons-row .button {
+  height: 2rem;
+  line-height: 1.9rem;
+  z-index: 10;
+  background-color: white;
+}
+.profit-record .buttons-row .button.active {
+  background-color: #0894ec;
+  color: #fff;
+  z-index: 10;
+}
+.profit-record .tabs .tab{
+  top: 2.5rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/user/withdraw.vue b/src/views/user/withdraw.vue
new file mode 100644
index 0000000..9998023
--- /dev/null
+++ b/src/views/user/withdraw.vue
@@ -0,0 +1,190 @@
+<template>
+<div class="withdraw">
+  <v-bar
+    type="nav">
+    <h1 class="title" v-text="title"></h1>
+    <v-button
+      class-name="pull-left"
+      types="nav link"
+      v-link="{path: '/user', replace: true}">
+      <v-icon type="left"></v-icon>
+    </v-button>
+  </v-bar>
+  <v-tabs
+    class-name="wd-tabs"
+    type="tab">
+    <v-tab name="tab1" title="Tab1" status="active"
+    action="refresh" distance="55" v-pull-to-refresh>
+      <v-layer></v-layer>
+      <v-card>
+        <v-card-item type="header">卡头</v-card-item>
+        <v-card-item type="content">
+          <v-card-item type="content-inner">
+          这是一个用纯文本的简单卡片。但卡片可以包含自己的页头，页脚，列表视图，图像，和里面的任何元素。
+          </v-card-item>
+        </v-card-item>
+        <v-card-item type="footer">卡脚</v-card-item>
+      </v-card>
+      <v-card>
+        <v-card-item type="content">
+          <v-card-item type="content-inner">
+          这是一个用纯文本的简单卡片。但卡片可以包含自己的页头，页脚，列表视图，图像，和里面的任何元素。
+          </v-card-item>
+        </v-card-item>
+      </v-card>
+      <v-card>
+        <v-card-item
+          type="header"
+          valign="bottom"
+          class-name="color-white no-border no-padding">
+          <img class='card-cover' src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="">
+        </v-card-item>
+        <v-card-item type="content">
+          <v-card-item type="content-inner">
+            <p class="color-gray">发表于 2015/01/15</p>
+            <p>此处是内容...</p>
+          </v-card-item>
+        </v-card-item>
+        <v-card-item type="footer">
+          <a href="#" class="link">赞</a>
+          <a href="#" class="link">更多</a>
+        </v-card-item>
+      </v-card>
+      <v-card>
+        <v-card-item type="content">
+        <div class="list-block">
+          <ul>
+            <li>
+              <a href="#" class="item-link item-content">
+                <div class="item-media"><i class="icon icon-f7"></i></div>
+                <div class="item-inner">
+                  <div class="item-title">链接 1</div>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="#" class="item-link item-content">
+                <div class="item-media"><i class="icon icon-f7"></i></div>
+                <div class="item-inner">
+                  <div class="item-title">链接 1</div>
+                </div>
+              </a>
+            </li>
+          </ul>
+      </div>
+      </v-card-item>
+      </v-card>
+    </v-tab>
+    <v-tab name="tab2" title="Tab2">
+      <v-content
+        type="block">
+        tab2
+      </v-content>
+    </v-tab>
+    <v-tab name="tab3" title="Tab3">
+      <v-content
+        type="block">
+        tab3
+      </v-content>
+    </v-tab>
+  </v-tabs>
+</div>
+</template>
+
+<script>
+import VIcon from '../../components/Iconfont'
+import VButton from '../../components/Button'
+import VBar from '../../components/Bar'
+import VTabs from '../../components/Tabs'
+import VTab from '../../components/Tab'
+import VContent from '../../components/Content'
+import VLayer from '../../components/PullToRefreshLayer'
+import VCard from '../../components/Card'
+import VCardItem from '../../components/CardItem'
+import $ from 'zepto'
+
+export default {
+  ready () {
+    this.tabItem.options = [
+      {
+        path: '/home',
+        icon: 'app',
+        label: '首页'
+      },
+      {
+        path: '/article',
+        icon: 'star',
+        label: '文章'
+      },
+      {
+        path: '/user',
+        icon: 'me',
+        label: '我自己'
+      },
+      {
+        path: '/more',
+        icon: 'gift',
+        label: '更多'
+      }
+    ]
+    $.init()
+  },
+  data () {
+    return {
+      title: '我的账户',
+      tabItem: {
+        options: [],
+        activeClass: 'inactive'
+      },
+      cards: [
+        '1',
+        '2',
+        '3',
+        '4'
+      ]
+    }
+  },
+  methods: {
+    refresh () {
+      $.showIndicator()
+      setTimeout(function () {
+        console.log('refresh')
+        $.pullToRefreshDone('.pull-to-refresh-content')
+        $.hideIndicator()
+      }, 1500)
+    }
+  },
+  components: {
+    VIcon,
+    VButton,
+    VBar,
+    VTabs,
+    VTab,
+    VContent,
+    VLayer,
+    VCard,
+    VCardItem
+  }
+}
+</script>
+
+<style>
+.withdraw {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.wd-tabs {
+  margin-top: 2.2rem;
+}
+.wd-tabs .buttons-tab {
+  z-index: 10;
+}
+#tab1 {
+  top: 2.2rem;
+}
+</style>