diff --git a/build/css/web-style.css b/build/css/web-style.css
new file mode 100644
index 0000000..fd7c983
--- /dev/null
+++ b/build/css/web-style.css
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.text{
+    color: red;
+}
diff --git a/build/js/web-style.js b/build/js/web-style.js
new file mode 100644
index 0000000..c9ed690
--- /dev/null
+++ b/build/js/web-style.js
@@ -0,0 +1,215 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	var _Hello = __webpack_require__(7);
+
+	var _Hello2 = _interopRequireDefault(_Hello);
+
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+	__webpack_require__(12);
+	// require('../less/a.css')
+
+	var WebStyle = {
+	  hello: _Hello2.default
+	};
+	if (typeof window != 'undefined') window.WebStyle = WebStyle;
+
+	module.exports = WebStyle;
+
+/***/ },
+/* 1 */,
+/* 2 */,
+/* 3 */,
+/* 4 */,
+/* 5 */,
+/* 6 */,
+/* 7 */
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_script__, __vue_template__
+	__webpack_require__(8)
+	__vue_script__ = __webpack_require__(10)
+	if (__vue_script__ &&
+	    __vue_script__.__esModule &&
+	    Object.keys(__vue_script__).length > 1) {
+	  console.warn("[vue-loader] src/components/Hello.vue: named exports in *.vue files are ignored.")}
+	__vue_template__ = __webpack_require__(11)
+	module.exports = __vue_script__ || {}
+	if (module.exports.__esModule) module.exports = module.exports.default
+	if (__vue_template__) {
+	(typeof module.exports === "function" ? (module.exports.options || (module.exports.options = {})) : module.exports).template = __vue_template__
+	}
+	if (false) {(function () {  module.hot.accept()
+	  var hotAPI = require("vue-hot-reload-api")
+	  hotAPI.install(require("vue"), false)
+	  if (!hotAPI.compatible) return
+	  var id = "_v-4a681ef9/Hello.vue"
+	  if (!module.hot.data) {
+	    hotAPI.createRecord(id, module.exports)
+	  } else {
+	    hotAPI.update(id, module.exports, __vue_template__)
+	  }
+	})()}
+
+/***/ },
+/* 8 */
+/***/ function(module, exports) {
+
+	// removed by extract-text-webpack-plugin
+
+/***/ },
+/* 9 */
+/***/ function(module, exports) {
+
+	/*
+		MIT License http://www.opensource.org/licenses/mit-license.php
+		Author Tobias Koppers @sokra
+	*/
+	// css base code, injected by the css-loader
+	module.exports = function() {
+		var list = [];
+
+		// return the list of modules as css string
+		list.toString = function toString() {
+			var result = [];
+			for(var i = 0; i < this.length; i++) {
+				var item = this[i];
+				if(item[2]) {
+					result.push("@media " + item[2] + "{" + item[1] + "}");
+				} else {
+					result.push(item[1]);
+				}
+			}
+			return result.join("");
+		};
+
+		// import a list of modules into the list
+		list.i = function(modules, mediaQuery) {
+			if(typeof modules === "string")
+				modules = [[null, modules, ""]];
+			var alreadyImportedModules = {};
+			for(var i = 0; i < this.length; i++) {
+				var id = this[i][0];
+				if(typeof id === "number")
+					alreadyImportedModules[id] = true;
+			}
+			for(i = 0; i < modules.length; i++) {
+				var item = modules[i];
+				// skip already imported module
+				// this implementation is not 100% perfect for weird media query combinations
+				//  when a module is imported multiple times with different media queries.
+				//  I hope this will never occur (Hey this way we have smaller bundles)
+				if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
+					if(mediaQuery && !item[2]) {
+						item[2] = mediaQuery;
+					} else if(mediaQuery) {
+						item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
+					}
+					list.push(item);
+				}
+			}
+		};
+		return list;
+	};
+
+
+/***/ },
+/* 10 */
+/***/ function(module, exports) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	// <template lang="html">
+	//     <p class="text">
+	//         {{msg}}
+	//     </p>
+	// </template>
+	//
+	// <script>
+	exports.default = {
+	    data: function data() {
+	        return {
+	            msg: 'hello world'
+	        };
+	    }
+
+	};
+	// </script>
+	//
+	// <style lang="css">
+	//     .text{
+	//         color: red;
+	//     }
+	// </style>
+
+/***/ },
+/* 11 */
+/***/ function(module, exports) {
+
+	module.exports = "\n<p class=\"text\">\n    {{msg}}\n</p>\n";
+
+/***/ },
+/* 12 */
+/***/ function(module, exports, __webpack_require__) {
+
+	exports = module.exports = __webpack_require__(9)();
+	// imports
+
+
+	// module
+	exports.push([module.id, "body,\ndiv,\ndl,\ndt,\ndd,\nul,\nol,\nli,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\npre,\ncode,\nform,\nfieldset,\nlegend,\ninput,\ntextarea,\np,\nblockquote,\nth,\ntd,\nhr,\nbutton,\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nmenu,\nnav,\nsection {\n  margin: 0;\n  padding: 0;\n}\nhtml,\nbody {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  color: #666;\n}\nul,\nol {\n  list-style: none;\n}\nbody {\n  font-family: \"Helvetica Neue\", Helvetica, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"\\5FAE\\8F6F\\96C5\\9ED1\", Arial, sans-serif;\n  font-size: 14px;\n}\nh1,\nh2,\nh3,\nh4,\nh5 {\n  font-weight: 500;\n  line-height: 1.1;\n  margin-top: 20px;\n  margin-bottom: 10px;\n}\nh1 {\n  font-size: 20px;\n}\nh2 {\n  font-size: 18px;\n}\np {\n  margin: 8px 0;\n}\na {\n  color: #2db7f5;\n  text-decoration: none;\n  transition: color .3s ease;\n  cursor: pointer;\n}\na:hover {\n  color: #4DC4F0;\n}\n.clear::after {\n  content: \"\";\n  height: 0;\n  display: block;\n  clear: both;\n}\n.row {\n  position: relative;\n  width: 100%;\n  height: auto;\n  display: block;\n}\n.row::after {\n  content: \"\";\n  display: block;\n  height: 0;\n  clear: both;\n}\n.row .center {\n  float: none;\n  margin: 0 auto;\n}\n.col-1 {\n  width: 8.33333333%;\n  float: left;\n  padding-right: 8px;\n  box-sizing: border-box;\n  position: relative;\n  min-height: 1px;\n}\n.col-offset-1 {\n  width: 8.33333333%;\n  float: left;\n  padding-right: 8px;\n  box-sizing: border-box;\n  position: relative;\n  min-height: 1px;\n}\n.col-2 {\n  width: 16.66666667%;\n  float: left;\n  padding-right: 8px;\n  box-sizing: border-box;\n  position: relative;\n  min-height: 1px;\n}\n.col-offset-2 {\n  width: 16.66666667%;\n  float: left;\n  padding-right: 8px;\n  box-sizing: border-box;\n  position: relative;\n  min-height: 1px;\n}\n.col-3 {\n  width: 25%;\n  float: left;\n  padding-right: 8px;\n  box-sizing: border-box;\n  position: relative;\n  min-height: 1px;\n}\n.col-offset-3 {\n  width: 25%;\n  float: left;\n  padding-right: 8px;\n  box-sizing: border-box;\n  position: relative;\n  min-height: 1px;\n}\n.col-4 {\n  width: 33.33333333%;\n  float: left;\n  padding-right: 8px;\n  box-sizing: border-box;\n  position: relative;\n  min-height: 1px;\n}\n.col-offset-4 {\n  width: 33.33333333%;\n  float: left;\n  padding-right: 8px;\n  box-sizing: border-box;\n  position: relative;\n  min-height: 1px;\n}\n.col-5 {\n  width: 41.66666667%;\n  float: left;\n  padding-right: 8px;\n  box-sizing: border-box;\n  position: relative;\n  min-height: 1px;\n}\n.col-offset-5 {\n  width: 41.66666667%;\n  float: left;\n  padding-right: 8px;\n  box-sizing: border-box;\n  position: relative;\n  min-height: 1px;\n}\n.col-6 {\n  width: 50%;\n  float: left;\n  padding-right: 8px;\n  box-sizing: border-box;\n  position: relative;\n  min-height: 1px;\n}\n.col-offset-6 {\n  width: 50%;\n  float: left;\n  padding-right: 8px;\n  box-sizing: border-box;\n  position: relative;\n  min-height: 1px;\n}\n.col-7 {\n  width: 58.33333333%;\n  float: left;\n  padding-right: 8px;\n  box-sizing: border-box;\n  position: relative;\n  min-height: 1px;\n}\n.col-offset-7 {\n  width: 58.33333333%;\n  float: left;\n  padding-right: 8px;\n  box-sizing: border-box;\n  position: relative;\n  min-height: 1px;\n}\n.col-8 {\n  width: 66.66666667%;\n  float: left;\n  padding-right: 8px;\n  box-sizing: border-box;\n  position: relative;\n  min-height: 1px;\n}\n.col-offset-8 {\n  width: 66.66666667%;\n  float: left;\n  padding-right: 8px;\n  box-sizing: border-box;\n  position: relative;\n  min-height: 1px;\n}\n.col-9 {\n  width: 75%;\n  float: left;\n  padding-right: 8px;\n  box-sizing: border-box;\n  position: relative;\n  min-height: 1px;\n}\n.col-offset-9 {\n  width: 75%;\n  float: left;\n  padding-right: 8px;\n  box-sizing: border-box;\n  position: relative;\n  min-height: 1px;\n}\n.col-10 {\n  width: 83.33333333%;\n  float: left;\n  padding-right: 8px;\n  box-sizing: border-box;\n  position: relative;\n  min-height: 1px;\n}\n.col-offset-10 {\n  width: 83.33333333%;\n  float: left;\n  padding-right: 8px;\n  box-sizing: border-box;\n  position: relative;\n  min-height: 1px;\n}\n.col-11 {\n  width: 91.66666667%;\n  float: left;\n  padding-right: 8px;\n  box-sizing: border-box;\n  position: relative;\n  min-height: 1px;\n}\n.col-offset-11 {\n  width: 91.66666667%;\n  float: left;\n  padding-right: 8px;\n  box-sizing: border-box;\n  position: relative;\n  min-height: 1px;\n}\n.col-12 {\n  width: 100%;\n  float: left;\n  padding-right: 8px;\n  box-sizing: border-box;\n  position: relative;\n  min-height: 1px;\n}\n.col-offset-12 {\n  width: 100%;\n  float: left;\n  padding-right: 8px;\n  box-sizing: border-box;\n  position: relative;\n  min-height: 1px;\n}\n.text-center {\n  text-align: center;\n}\n.loading {\n  font-family: \"iconfont\" !important;\n  font-size: 14px;\n  font-style: normal;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke-width: 0.2px;\n  -moz-osx-font-smoothing: grayscale;\n  display: inline-block;\n  animation: spin 1s linear infinite;\n}\n.loading::after {\n  content: \"\\E6A1\";\n}\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@media only screen and (max-width: 640px) {\n  .col-1 {\n    float: left;\n    width: 100%;\n    padding-right: 0;\n    box-sizing: border-box;\n  }\n  .col-2 {\n    float: left;\n    width: 100%;\n    padding-right: 0;\n    box-sizing: border-box;\n  }\n  .col-3 {\n    float: left;\n    width: 100%;\n    padding-right: 0;\n    box-sizing: border-box;\n  }\n  .col-4 {\n    float: left;\n    width: 100%;\n    padding-right: 0;\n    box-sizing: border-box;\n  }\n  .col-5 {\n    float: left;\n    width: 100%;\n    padding-right: 0;\n    box-sizing: border-box;\n  }\n  .col-6 {\n    float: left;\n    width: 100%;\n    padding-right: 0;\n    box-sizing: border-box;\n  }\n  .col-7 {\n    float: left;\n    width: 100%;\n    padding-right: 0;\n    box-sizing: border-box;\n  }\n  .col-8 {\n    float: left;\n    width: 100%;\n    padding-right: 0;\n    box-sizing: border-box;\n  }\n  .col-9 {\n    float: left;\n    width: 100%;\n    padding-right: 0;\n    box-sizing: border-box;\n  }\n  .col-10 {\n    float: left;\n    width: 100%;\n    padding-right: 0;\n    box-sizing: border-box;\n  }\n  .col-11 {\n    float: left;\n    width: 100%;\n    padding-right: 0;\n    box-sizing: border-box;\n  }\n  .col-12 {\n    float: left;\n    width: 100%;\n    padding-right: 0;\n    box-sizing: border-box;\n  }\n}\n.box-920 {\n  width: 920px;\n  box-sizing: border-box;\n  margin: 0 auto;\n}\n@media only screen and (max-width: 640px) {\n  .box-920 {\n    width: 100%;\n    margin: 0;\n  }\n}\n.btn {\n  display: inline-block;\n  margin-bottom: 0;\n  font-weight: 500;\n  text-align: center;\n  cursor: pointer;\n  border: 1px solid #d9d9d9;\n  white-space: nowrap;\n  line-height: 1.5;\n  padding: 2px 14px;\n  font-size: 14px;\n  border-radius: 6px;\n  -webkit-user-select: none;\n  user-select: none;\n  color: #666;\n  outline: none;\n  background-color: #fff;\n}\n.btn:hover {\n  background: #f7f7f7;\n}\n.btn:active {\n  background: #efefef;\n  transition: none;\n}\n.btn:disabled {\n  color: #ccc;\n  cursor: no-drop;\n}\n.btn-primary {\n  color: #fff;\n  background-color: #2db7f5;\n  border-color: #2db7f5;\n}\n.btn-primary:hover {\n  background-color: #45bff6;\n}\n.btn-primary:active {\n  background-color: #15aff4;\n}\n.btn-primary:disabled {\n  cursor: no-drop;\n  background-color: #8ed8fa;\n}\n.btn-success {\n  color: #fff;\n  background-color: #5FBC29;\n  border-color: #5FBC29;\n}\n.btn-success:hover {\n  background-color: #6ad12e;\n}\n.btn-success:active {\n  background-color: #54a724;\n}\n.btn-success:disabled {\n  cursor: no-drop;\n  background-color: #96df6c;\n}\n.btn-info {\n  color: #fff;\n  background-color: #01B3CA;\n  border-color: #01B3CA;\n}\n.btn-info:hover {\n  background-color: #01c9e3;\n}\n.btn-info:active {\n  background-color: #019db1;\n}\n.btn-info:disabled {\n  cursor: no-drop;\n  background-color: #33e7fe;\n}\n.btn-warning {\n  color: #fff;\n  background-color: #FAC450;\n  border-color: #FAC450;\n}\n.btn-warning:hover {\n  background-color: #fbcc69;\n}\n.btn-warning:active {\n  background-color: #f9bc37;\n}\n.btn-warning:disabled {\n  cursor: no-drop;\n  background-color: #fde5b3;\n}\n.btn-danger {\n  color: #fff;\n  background-color: #E01515;\n  border-color: #E01515;\n}\n.btn-danger:hover {\n  background-color: #ea2424;\n}\n.btn-danger:active {\n  background-color: #c91313;\n}\n.btn-danger:disabled {\n  cursor: no-drop;\n  background-color: #f16a6a;\n}\n.btn-lg {\n  padding: 6px 18px;\n}\n.btn-sm {\n  padding: 0px 10px;\n}\n.btn-block {\n  display: block;\n  width: 100%;\n}\n.table {\n  width: 100%;\n  margin-bottom: 24px;\n  border-spacing: 0;\n  border-collapse: collapse;\n  border: 1px solid #ddd;\n}\n.table tbody th,\n.table td {\n  border-top: 1px solid #ddd;\n}\n.table thead th {\n  border-bottom: 2px solid #ddd;\n}\n.table th,\n.table td {\n  text-align: left;\n  padding: 8px;\n  border-left: 1px solid #ddd;\n}\ncaption {\n  padding-top: 8px;\n  padding-bottom: 8px;\n  color: #777;\n  text-align: left;\n}\n.table-striped tbody tr:nth-of-type(odd) {\n  background-color: #f9f9f9;\n}\n.table-hover tbody tr:hover {\n  background-color: #f9f9f9;\n}\n.table-sm th,\n.table-sm td {\n  padding: 5px;\n}\n.table-responsive {\n  overflow: scroll;\n}\n.table-responsive thead tr {\n  white-space: nowrap;\n}\n.table-responsive tbody td {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.pagination {\n  float: right;\n}\n.pagination:after {\n  content: ' ';\n  clear: both;\n}\n.pagination .quick {\n  float: left;\n  width: 100px;\n  padding-left: 8px;\n  line-height: 30px;\n  height: 30px;\n  text-align: right;\n}\n.pagination .quick input {\n  width: 40px;\n  margin: 0 5px;\n}\n.pagination li {\n  float: left;\n  border-radius: 6px;\n  -webkit-user-select: none;\n  user-select: none;\n  min-width: 28px;\n  height: 28px;\n  border: 1px solid #d9d9d9;\n  background-color: #fff;\n  text-align: center;\n  line-height: 28px;\n  margin: 0 5px;\n  cursor: pointer;\n  transition: all .3s ease;\n}\n.pagination li:hover {\n  border-color: #2db7f5;\n  color: #2db7f5;\n}\n.pagination a {\n  color: #666;\n  padding: 0 6px;\n  display: inline-block;\n}\n.pagination .next:before {\n  content: \"\\E600\";\n}\n.pagination .active {\n  background-color: #2db7f5;\n  color: #fff;\n  cursor: default;\n}\n.pagination .active:hover {\n  color: #fff;\n}\n.pagination .jump {\n  border: none;\n}\n.pagination .jump:before {\n  content: \"\\2022\\2022\\2022\";\n  letter-spacing: 2px;\n}\n.form .row {\n  margin-bottom: 24px;\n}\n.search-8 > div {\n  padding: 8px;\n}\n.padding-08 > div {\n  padding-right: 8px;\n}\ninput,\ntextarea {\n  background: #fff none;\n  outline: none;\n  -webkit-appearance: none;\n  /*去除input默认样式*/\n}\n.form input[type=checkbox] {\n  -webkit-appearance: checkbox;\n}\n.form input[type=radio] {\n  -webkit-appearance: radio;\n}\n.form textarea {\n  position: relative;\n  display: inline-block;\n  vertical-align: bottom;\n  cursor: text;\n  font-size: 14px;\n  line-height: 1.5;\n  color: #666;\n  border: 1px solid #d9d9d9;\n  border-radius: 6px;\n  background-color: #fff;\n  background-image: none;\n  width: 100%;\n  min-height: 100px;\n  padding: 4px 7px;\n  box-sizing: border-box;\n}\n.input {\n  padding: 4px 7px;\n  width: 100%;\n  height: 28px;\n  cursor: text;\n  font-size: 14px;\n  line-height: 1;\n  color: #666;\n  border: 1px solid #d9d9d9;\n  border-radius: 6px;\n  box-sizing: border-box;\n  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.input:hover {\n  border-color: #57c5f7;\n}\n.input:focus {\n  box-shadow: 0 0 0 2px rgba(45, 183, 245, 0.2);\n  border-color: #57c5f7;\n}\n.require:before {\n  display: inline-block;\n  margin-right: 4px;\n  content: \"*\";\n  font-family: SimSun;\n  font-size: 12px;\n  color: #f60;\n}\n.label {\n  text-align: right;\n  height: 28px;\n  line-height: 28px;\n  float: left;\n  box-sizing: border-box;\n  padding-right: 8px;\n}\n@media only screen and (max-width: 640px) {\n  .label {\n    text-align: left;\n  }\n}\n.form .text {\n  height: 28px;\n  line-height: 28px;\n  padding-right: 8px;\n}\n.form .input {\n  width: 100%;\n}\n.split {\n  margin-right: 8px;\n  line-height: 28px;\n  height: 28px;\n  float: left;\n}\n.select {\n  border: 1px solid #d9d9d9;\n  border-radius: 6px;\n  background-color: #fff;\n  margin: 0;\n  outline: 0;\n  height: 28px;\n  line-height: 28px;\n  width: 100%;\n}\n.radio,\n.checkbox {\n  font-size: 14px;\n  cursor: pointer;\n  height: 28px;\n  line-height: 28px;\n  margin-right: 8px;\n}\n.radio span,\n.checkbox span {\n  margin: 0 8px;\n  display: inline-block;\n}\n.radio input,\n.checkbox input {\n  width: 14px;\n  height: 14px;\n}\n.drop {\n  position: absolute;\n  top: 0px;\n  left: 0;\n}\n.drop .drop-ul {\n  outline: none;\n  position: relative;\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  text-align: left;\n  background-color: #fff;\n  border-radius: 6px;\n  box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);\n  background-clip: padding-box;\n  border: 1px solid #d9d9d9;\n}\n.drop .drop-ul li {\n  padding: 7px 15px;\n  transition: background .3s ease;\n}\n.drop .drop-ul li:hover {\n  background-color: #eaf8fe;\n}\n.tags-wrap {\n  width: 100%;\n  height: 100%;\n  outline: none;\n}\n.tags-wrap::after {\n  content: \"\";\n  display: block;\n  height: 0;\n  clear: both;\n}\n.tags,\n.tags-input {\n  position: relative;\n  float: left;\n  color: #fff;\n  line-height: 28px;\n  margin: 0 4px 4px 0;\n  padding: 0 22px 0 10px;\n  border-radius: 6px;\n}\n.tags .content,\n.tags-input .content {\n  line-height: 28px;\n}\n.tags .del,\n.tags-input .del {\n  width: 22px;\n  height: 28px;\n  text-align: center;\n  cursor: pointer;\n  position: absolute;\n  top: -1px;\n  right: 0;\n}\n.tags-input {\n  font-size: 14px;\n  padding: 0;\n  background-color: inherit;\n  border: none;\n  color: inherit;\n  width: 10em;\n}\n.tags-enter,\n.tags-leave {\n  transform: scale(0.9);\n  opacity: 0;\n}\n.tags-transition {\n  transition: all .3s ease;\n}\n.fade-transition {\n  transition: opacity .3s;\n}\n.fade-enter {\n  opacity: 0;\n}\n.fade-leave {\n  opacity: 0;\n}\n.slide-transition {\n  transition: transform .3s ease, opacity .3s ease;\n  transform: translate(0, 0);\n}\n.slide-enter {\n  transform: translate(0, 5px);\n  opacity: 0;\n}\n.slide-leave {\n  transform: translate(0, 30px);\n  opacity: 0;\n}\n@font-face {\n  font-family: \"iconfont\";\n  src: url(" + __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"../fonts/iconfont.eot?t=1458285388\""); e.code = 'MODULE_NOT_FOUND'; throw e; }())) + ");\n  /* IE9*/\n  src: url(" + __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"../fonts/iconfont.eot?t=1458285388\""); e.code = 'MODULE_NOT_FOUND'; throw e; }())) + "#iefix) format('embedded-opentype'),  url(" + __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"../fonts/iconfont.woff?t=1458285388\""); e.code = 'MODULE_NOT_FOUND'; throw e; }())) + ") format('woff'),  url(" + __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"../fonts/iconfont.ttf?t=1458285388\""); e.code = 'MODULE_NOT_FOUND'; throw e; }())) + ") format('truetype'),  url(" + __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"../fonts/iconfont.svg?t=1458285388\""); e.code = 'MODULE_NOT_FOUND'; throw e; }())) + "#iconfont) format('svg');\n  /* iOS 4.1- */\n}\n.iconfont {\n  font-family: \"iconfont\" !important;\n  font-size: 14px;\n  font-style: normal;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke-width: 0.2px;\n  -moz-osx-font-smoothing: grayscale;\n}\n.icon-arrowleft:before {\n  content: \"\\E620\";\n}\n.icon-arrowright:before {\n  content: \"\\E621\";\n}\n.icon-arrowup:before {\n  content: \"\\E622\";\n}\n.icon-arrowdown:before {\n  content: \"\\E623\";\n}\n.icon-caretcircleleft:before {\n  content: \"\\E604\";\n}\n.icon-caretcircleright:before {\n  content: \"\\E605\";\n}\n.icon-caretcircleup:before {\n  content: \"\\E606\";\n}\n.icon-caretcircledown:before {\n  content: \"\\E607\";\n}\n.icon-forward:before {\n  content: \"\\E608\";\n}\n.icon-backward:before {\n  content: \"\\E609\";\n}\n.icon-caretcircleoleft:before {\n  content: \"\\E60B\";\n}\n.icon-caretcircleoright:before {\n  content: \"\\E60D\";\n}\n.icon-caretcircleodown:before {\n  content: \"\\E60E\";\n}\n.icon-caretright:before {\n  content: \"\\E60A\";\n}\n.icon-caretleft:before {\n  content: \"\\E60F\";\n}\n.icon-caretup:before {\n  content: \"\\E610\";\n}\n.icon-caretdown:before {\n  content: \"\\E611\";\n}\n.icon-fastforward:before {\n  content: \"\\E612\";\n}\n.icon-fastbackward:before {\n  content: \"\\E613\";\n}\n.icon-stepbackward:before {\n  content: \"\\E614\";\n}\n.icon-stepforward:before {\n  content: \"\\E615\";\n}\n.icon-circleodown:before {\n  content: \"\\E617\";\n}\n.icon-circleoup:before {\n  content: \"\\E618\";\n}\n.icon-circleoleft:before {\n  content: \"\\E619\";\n}\n.icon-circleoright:before {\n  content: \"\\E616\";\n}\n.icon-circleright:before {\n  content: \"\\E61A\";\n}\n.icon-circleup:before {\n  content: \"\\E61C\";\n}\n.icon-playcircle:before {\n  content: \"\\E61E\";\n}\n.icon-playcircleo:before {\n  content: \"\\E61F\";\n}\n.icon-circleleft:before {\n  content: \"\\E61B\";\n}\n.icon-right:before {\n  content: \"\\E600\";\n}\n.icon-left:before {\n  content: \"\\E601\";\n}\n.icon-up:before {\n  content: \"\\E602\";\n}\n.icon-down:before {\n  content: \"\\E603\";\n}\n.icon-reload:before {\n  content: \"\\E626\";\n}\n.icon-doubleleft:before {\n  content: \"\\E624\";\n}\n.icon-doubleright:before {\n  content: \"\\E625\";\n}\n.icon-retweet:before {\n  content: \"\\E627\";\n}\n.icon-shrink:before {\n  content: \"\\E628\";\n}\n.icon-arrowsalt:before {\n  content: \"\\E629\";\n}\n.icon-rollback:before {\n  content: \"\\E62A\";\n}\n.icon-verticleleft:before {\n  content: \"\\E62B\";\n}\n.icon-verticleright:before {\n  content: \"\\E62C\";\n}\n.icon-cross:before {\n  content: \"\\E62D\";\n}\n.icon-check:before {\n  content: \"\\E62E\";\n}\n.icon-checkcircle:before {\n  content: \"\\E62F\";\n}\n.icon-checkcircleo:before {\n  content: \"\\E630\";\n}\n.icon-crosscircle:before {\n  content: \"\\E631\";\n}\n.icon-crosscircleo:before {\n  content: \"\\E632\";\n}\n.icon-exclamation:before {\n  content: \"\\E633\";\n}\n.icon-exclamationcircle:before {\n  content: \"\\E634\";\n}\n.icon-exclamationcircleo:before {\n  content: \"\\E635\";\n}\n.icon-info:before {\n  content: \"\\E636\";\n}\n.icon-infocircle:before {\n  content: \"\\E637\";\n}\n.icon-infocircleo:before {\n  content: \"\\E638\";\n}\n.icon-minuscircle:before {\n  content: \"\\E639\";\n}\n.icon-minuscircleo:before {\n  content: \"\\E63A\";\n}\n.icon-minus:before {\n  content: \"\\E63B\";\n}\n.icon-pluscircleo:before {\n  content: \"\\E63C\";\n}\n.icon-pluscircle:before {\n  content: \"\\E63D\";\n}\n.icon-plus:before {\n  content: \"\\E63E\";\n}\n.icon-swapleft:before {\n  content: \"\\E63F\";\n}\n.icon-swapright:before {\n  content: \"\\E640\";\n}\n.icon-swap:before {\n  content: \"\\E641\";\n}\n.icon-clockcircle:before {\n  content: \"\\E642\";\n}\n.icon-clockcircleo:before {\n  content: \"\\E643\";\n}\n.icon-pausecircle:before {\n  content: \"\\E644\";\n}\n.icon-pausecircleo:before {\n  content: \"\\E645\";\n}\n.icon-pause:before {\n  content: \"\\E646\";\n}\n.icon-questioncircle:before {\n  content: \"\\E647\";\n}\n.icon-questioncircleo:before {\n  content: \"\\E648\";\n}\n.icon-question:before {\n  content: \"\\E649\";\n}\n.icon-areachart:before {\n  content: \"\\E64C\";\n}\n.icon-appstore:before {\n  content: \"\\E64D\";\n}\n.icon-apple:before {\n  content: \"\\E64E\";\n}\n.icon-android:before {\n  content: \"\\E64F\";\n}\n.icon-bars:before {\n  content: \"\\E650\";\n}\n.icon-barchart:before {\n  content: \"\\E651\";\n}\n.icon-calendar:before {\n  content: \"\\E654\";\n}\n.icon-book:before {\n  content: \"\\E655\";\n}\n.icon-chrome:before {\n  content: \"\\E65C\";\n}\n.icon-code:before {\n  content: \"\\E65D\";\n}\n.icon-creditcard:before {\n  content: \"\\E65F\";\n}\n.icon-customerservice:before {\n  content: \"\\E65E\";\n}\n.icon-copy:before {\n  content: \"\\E660\";\n}\n.icon-delete:before {\n  content: \"\\E661\";\n}\n.icon-ellipsis:before {\n  content: \"\\E667\";\n}\n.icon-edit:before {\n  content: \"\\E668\";\n}\n.icon-export:before {\n  content: \"\\E669\";\n}\n.icon-exception:before {\n  content: \"\\E66A\";\n}\n.icon-file:before {\n  content: \"\\E66B\";\n}\n.icon-filetext:before {\n  content: \"\\E66C\";\n}\n.icon-filter:before {\n  content: \"\\E66F\";\n}\n.icon-folder:before {\n  content: \"\\E670\";\n}\n.icon-frowncircle:before {\n  content: \"\\E672\";\n}\n.icon-frown:before {\n  content: \"\\E673\";\n}\n.icon-smilecircle:before {\n  content: \"\\E676\";\n}\n.icon-smile:before {\n  content: \"\\E677\";\n}\n.icon-mehcircle:before {\n  content: \"\\E678\";\n}\n.icon-meh:before {\n  content: \"\\E679\";\n}\n.icon-github:before {\n  content: \"\\E674\";\n}\n.icon-laptop:before {\n  content: \"\\E67A\";\n}\n.icon-inbox:before {\n  content: \"\\E67B\";\n}\n.icon-ie:before {\n  content: \"\\E67C\";\n}\n.icon-home:before {\n  content: \"\\E67D\";\n}\n.icon-linechart:before {\n  content: \"\\E67F\";\n}\n.icon-link:before {\n  content: \"\\E67E\";\n}\n.icon-logout:before {\n  content: \"\\E681\";\n}\n.icon-mail:before {\n  content: \"\\E682\";\n}\n.icon-menuunfold:before {\n  content: \"\\E683\";\n}\n.icon-menufold:before {\n  content: \"\\E684\";\n}\n.icon-mobile:before {\n  content: \"\\E685\";\n}\n.icon-notification:before {\n  content: \"\\E686\";\n}\n.icon-paperclip:before {\n  content: \"\\E687\";\n}\n.icon-phone:before {\n  content: \"\\E688\";\n}\n.icon-picture:before {\n  content: \"\\E689\";\n}\n.icon-piechart:before {\n  content: \"\\E68A\";\n}\n.icon-poweroff:before {\n  content: \"\\E68B\";\n}\n.icon-setting:before {\n  content: \"\\E68D\";\n}\n.icon-sharealt:before {\n  content: \"\\E68E\";\n}\n.icon-search:before {\n  content: \"\\E690\";\n}\n.icon-poweroff1:before {\n  content: \"\\E691\";\n}\n.icon-solution:before {\n  content: \"\\E68F\";\n}\n.icon-tablet:before {\n  content: \"\\E695\";\n}\n.icon-team:before {\n  content: \"\\E680\";\n}\n.icon-totop:before {\n  content: \"\\E69A\";\n}\n.icon-videocamera:before {\n  content: \"\\E69B\";\n}\n.icon-user:before {\n  content: \"\\E69C\";\n}\n.icon-save:before {\n  content: \"\\E69E\";\n}\n.icon-unlock:before {\n  content: \"\\E69F\";\n}\n.icon-shoppingcart:before {\n  content: \"\\E692\";\n}\n.icon-windows:before {\n  content: \"\\E6A0\";\n}\n.icon-aliwangwango:before {\n  content: \"\\E64A\";\n}\n.icon-aliwangwang:before {\n  content: \"\\E64B\";\n}\n.icon-camerao:before {\n  content: \"\\E652\";\n}\n.icon-camera:before {\n  content: \"\\E653\";\n}\n.icon-eyeo:before {\n  content: \"\\E66D\";\n}\n.icon-eye:before {\n  content: \"\\E66E\";\n}\n.icon-enviroment:before {\n  content: \"\\E665\";\n}\n.icon-enviromento:before {\n  content: \"\\E666\";\n}\n.icon-staro:before {\n  content: \"\\E693\";\n}\n.icon-star:before {\n  content: \"\\E694\";\n}\n.icon-tags:before {\n  content: \"\\E656\";\n}\n.icon-tagso:before {\n  content: \"\\E657\";\n}\n.icon-tag:before {\n  content: \"\\E658\";\n}\n.icon-tago:before {\n  content: \"\\E659\";\n}\n.icon-cloud:before {\n  content: \"\\E65A\";\n}\n.icon-clouddownload:before {\n  content: \"\\E65B\";\n}\n.icon-cloudupload:before {\n  content: \"\\E696\";\n}\n.icon-clouduploado:before {\n  content: \"\\E697\";\n}\n.icon-clouddownloado:before {\n  content: \"\\E698\";\n}\n.icon-cloudo:before {\n  content: \"\\E699\";\n}\n.icon-iconfontcaretcircleoup:before {\n  content: \"\\E60C\";\n}\n.icon-loading:before {\n  content: \"\\E6A1\";\n}\n.icon-dislike:before {\n  content: \"\\E6A2\";\n}\n.icon-like:before {\n  content: \"\\E6A3\";\n}\n.icon-message:before {\n  content: \"\\E6A4\";\n}\n.icon-download:before {\n  content: \"\\E663\";\n}\n.icon-upload:before {\n  content: \"\\E664\";\n}\n.icon-paycircle:before {\n  content: \"\\E6A8\";\n}\n.icon-paycircleo:before {\n  content: \"\\E6A9\";\n}\n.icon-exclefile:before {\n  content: \"\\E6AC\";\n}\n.icon-pdffile:before {\n  content: \"\\E6AB\";\n}\n.icon-pptfile:before {\n  content: \"\\E6A7\";\n}\n.icon-jpgfile:before {\n  content: \"\\E6AA\";\n}\n.icon-unknowfile:before {\n  content: \"\\E6A6\";\n}\n.icon-minussquareo:before {\n  content: \"\\E6AD\";\n}\n.icon-plussquareo:before {\n  content: \"\\E6AE\";\n}\n.icon-iconfontdesktop:before {\n  content: \"\\E662\";\n}\n.icon-hdd:before {\n  content: \"\\E675\";\n}\n.icon-folderopen:before {\n  content: \"\\E671\";\n}\n.icon-circledown:before {\n  content: \"\\E61D\";\n}\n.icon-qrcode:before {\n  content: \"\\E6A5\";\n}\n.icon-scan:before {\n  content: \"\\E6AF\";\n}\n.icon-heart:before {\n  content: \"\\E68C\";\n}\n.icon-hearto:before {\n  content: \"\\E6B0\";\n}\n.icon-calculator:before {\n  content: \"\\E6B1\";\n}\n.icon-appstoreo:before {\n  content: \"\\E6B2\";\n}\n.icon-lock:before {\n  content: \"\\E69D\";\n}\n", ""]);
+
+	// exports
+
+
+/***/ }
+/******/ ]);
\ No newline at end of file
diff --git a/build/web-style.js b/build/web-style.js
deleted file mode 100644
index 3c22d27..0000000
--- a/build/web-style.js
+++ /dev/null
@@ -1,448 +0,0 @@
-/******/ (function(modules) { // webpackBootstrap
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
-
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-
-/******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId])
-/******/ 			return installedModules[moduleId].exports;
-
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			exports: {},
-/******/ 			id: moduleId,
-/******/ 			loaded: false
-/******/ 		};
-
-/******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-
-/******/ 		// Flag the module as loaded
-/******/ 		module.loaded = true;
-
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-
-
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
-
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
-
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "";
-
-/******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(0);
-/******/ })
-/************************************************************************/
-/******/ ([
-/* 0 */
-/***/ function(module, exports, __webpack_require__) {
-
-	'use strict';
-
-	var _Hello = __webpack_require__(1);
-
-	var _Hello2 = _interopRequireDefault(_Hello);
-
-	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-	var WebStyle = {
-	  hello: _Hello2.default
-	};
-	if (typeof window != 'undefined') window.WebStyle = WebStyle;
-
-	module.exports = WebStyle;
-
-/***/ },
-/* 1 */
-/***/ function(module, exports, __webpack_require__) {
-
-	var __vue_script__, __vue_template__
-	__webpack_require__(2)
-	__vue_script__ = __webpack_require__(6)
-	if (__vue_script__ &&
-	    __vue_script__.__esModule &&
-	    Object.keys(__vue_script__).length > 1) {
-	  console.warn("[vue-loader] src/components/Hello.vue: named exports in *.vue files are ignored.")}
-	__vue_template__ = __webpack_require__(7)
-	module.exports = __vue_script__ || {}
-	if (module.exports.__esModule) module.exports = module.exports.default
-	if (__vue_template__) {
-	(typeof module.exports === "function" ? (module.exports.options || (module.exports.options = {})) : module.exports).template = __vue_template__
-	}
-	if (false) {(function () {  module.hot.accept()
-	  var hotAPI = require("vue-hot-reload-api")
-	  hotAPI.install(require("vue"), false)
-	  if (!hotAPI.compatible) return
-	  var id = "_v-4a681ef9/Hello.vue"
-	  if (!module.hot.data) {
-	    hotAPI.createRecord(id, module.exports)
-	  } else {
-	    hotAPI.update(id, module.exports, __vue_template__)
-	  }
-	})()}
-
-/***/ },
-/* 2 */
-/***/ function(module, exports, __webpack_require__) {
-
-	// style-loader: Adds some css to the DOM by adding a <style> tag
-
-	// load the styles
-	var content = __webpack_require__(3);
-	if(typeof content === 'string') content = [[module.id, content, '']];
-	// add the styles to the DOM
-	var update = __webpack_require__(5)(content, {});
-	if(content.locals) module.exports = content.locals;
-	// Hot Module Replacement
-	if(false) {
-		// When the styles change, update the <style> tags
-		if(!content.locals) {
-			module.hot.accept("!!./../../node_modules/.npminstall/css-loader/0.23.1/css-loader/index.js!./../../node_modules/.npminstall/vue-loader/8.5.3/vue-loader/lib/style-rewriter.js!./../../node_modules/.npminstall/vue-loader/8.5.3/vue-loader/lib/selector.js?type=style&index=0!./Hello.vue", function() {
-				var newContent = require("!!./../../node_modules/.npminstall/css-loader/0.23.1/css-loader/index.js!./../../node_modules/.npminstall/vue-loader/8.5.3/vue-loader/lib/style-rewriter.js!./../../node_modules/.npminstall/vue-loader/8.5.3/vue-loader/lib/selector.js?type=style&index=0!./Hello.vue");
-				if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
-				update(newContent);
-			});
-		}
-		// When the module is disposed, remove the <style> tags
-		module.hot.dispose(function() { update(); });
-	}
-
-/***/ },
-/* 3 */
-/***/ function(module, exports, __webpack_require__) {
-
-	exports = module.exports = __webpack_require__(4)();
-	// imports
-
-
-	// module
-	exports.push([module.id, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.text{\n    color: red;\n}\n", ""]);
-
-	// exports
-
-
-/***/ },
-/* 4 */
-/***/ function(module, exports) {
-
-	/*
-		MIT License http://www.opensource.org/licenses/mit-license.php
-		Author Tobias Koppers @sokra
-	*/
-	// css base code, injected by the css-loader
-	module.exports = function() {
-		var list = [];
-
-		// return the list of modules as css string
-		list.toString = function toString() {
-			var result = [];
-			for(var i = 0; i < this.length; i++) {
-				var item = this[i];
-				if(item[2]) {
-					result.push("@media " + item[2] + "{" + item[1] + "}");
-				} else {
-					result.push(item[1]);
-				}
-			}
-			return result.join("");
-		};
-
-		// import a list of modules into the list
-		list.i = function(modules, mediaQuery) {
-			if(typeof modules === "string")
-				modules = [[null, modules, ""]];
-			var alreadyImportedModules = {};
-			for(var i = 0; i < this.length; i++) {
-				var id = this[i][0];
-				if(typeof id === "number")
-					alreadyImportedModules[id] = true;
-			}
-			for(i = 0; i < modules.length; i++) {
-				var item = modules[i];
-				// skip already imported module
-				// this implementation is not 100% perfect for weird media query combinations
-				//  when a module is imported multiple times with different media queries.
-				//  I hope this will never occur (Hey this way we have smaller bundles)
-				if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
-					if(mediaQuery && !item[2]) {
-						item[2] = mediaQuery;
-					} else if(mediaQuery) {
-						item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
-					}
-					list.push(item);
-				}
-			}
-		};
-		return list;
-	};
-
-
-/***/ },
-/* 5 */
-/***/ function(module, exports, __webpack_require__) {
-
-	/*
-		MIT License http://www.opensource.org/licenses/mit-license.php
-		Author Tobias Koppers @sokra
-	*/
-	var stylesInDom = {},
-		memoize = function(fn) {
-			var memo;
-			return function () {
-				if (typeof memo === "undefined") memo = fn.apply(this, arguments);
-				return memo;
-			};
-		},
-		isOldIE = memoize(function() {
-			return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
-		}),
-		getHeadElement = memoize(function () {
-			return document.head || document.getElementsByTagName("head")[0];
-		}),
-		singletonElement = null,
-		singletonCounter = 0,
-		styleElementsInsertedAtTop = [];
-
-	module.exports = function(list, options) {
-		if(false) {
-			if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
-		}
-
-		options = options || {};
-		// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
-		// tags it will allow on a page
-		if (typeof options.singleton === "undefined") options.singleton = isOldIE();
-
-		// By default, add <style> tags to the bottom of <head>.
-		if (typeof options.insertAt === "undefined") options.insertAt = "bottom";
-
-		var styles = listToStyles(list);
-		addStylesToDom(styles, options);
-
-		return function update(newList) {
-			var mayRemove = [];
-			for(var i = 0; i < styles.length; i++) {
-				var item = styles[i];
-				var domStyle = stylesInDom[item.id];
-				domStyle.refs--;
-				mayRemove.push(domStyle);
-			}
-			if(newList) {
-				var newStyles = listToStyles(newList);
-				addStylesToDom(newStyles, options);
-			}
-			for(var i = 0; i < mayRemove.length; i++) {
-				var domStyle = mayRemove[i];
-				if(domStyle.refs === 0) {
-					for(var j = 0; j < domStyle.parts.length; j++)
-						domStyle.parts[j]();
-					delete stylesInDom[domStyle.id];
-				}
-			}
-		};
-	}
-
-	function addStylesToDom(styles, options) {
-		for(var i = 0; i < styles.length; i++) {
-			var item = styles[i];
-			var domStyle = stylesInDom[item.id];
-			if(domStyle) {
-				domStyle.refs++;
-				for(var j = 0; j < domStyle.parts.length; j++) {
-					domStyle.parts[j](item.parts[j]);
-				}
-				for(; j < item.parts.length; j++) {
-					domStyle.parts.push(addStyle(item.parts[j], options));
-				}
-			} else {
-				var parts = [];
-				for(var j = 0; j < item.parts.length; j++) {
-					parts.push(addStyle(item.parts[j], options));
-				}
-				stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};
-			}
-		}
-	}
-
-	function listToStyles(list) {
-		var styles = [];
-		var newStyles = {};
-		for(var i = 0; i < list.length; i++) {
-			var item = list[i];
-			var id = item[0];
-			var css = item[1];
-			var media = item[2];
-			var sourceMap = item[3];
-			var part = {css: css, media: media, sourceMap: sourceMap};
-			if(!newStyles[id])
-				styles.push(newStyles[id] = {id: id, parts: [part]});
-			else
-				newStyles[id].parts.push(part);
-		}
-		return styles;
-	}
-
-	function insertStyleElement(options, styleElement) {
-		var head = getHeadElement();
-		var lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];
-		if (options.insertAt === "top") {
-			if(!lastStyleElementInsertedAtTop) {
-				head.insertBefore(styleElement, head.firstChild);
-			} else if(lastStyleElementInsertedAtTop.nextSibling) {
-				head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling);
-			} else {
-				head.appendChild(styleElement);
-			}
-			styleElementsInsertedAtTop.push(styleElement);
-		} else if (options.insertAt === "bottom") {
-			head.appendChild(styleElement);
-		} else {
-			throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
-		}
-	}
-
-	function removeStyleElement(styleElement) {
-		styleElement.parentNode.removeChild(styleElement);
-		var idx = styleElementsInsertedAtTop.indexOf(styleElement);
-		if(idx >= 0) {
-			styleElementsInsertedAtTop.splice(idx, 1);
-		}
-	}
-
-	function createStyleElement(options) {
-		var styleElement = document.createElement("style");
-		styleElement.type = "text/css";
-		insertStyleElement(options, styleElement);
-		return styleElement;
-	}
-
-	function addStyle(obj, options) {
-		var styleElement, update, remove;
-
-		if (options.singleton) {
-			var styleIndex = singletonCounter++;
-			styleElement = singletonElement || (singletonElement = createStyleElement(options));
-			update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);
-			remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);
-		} else {
-			styleElement = createStyleElement(options);
-			update = applyToTag.bind(null, styleElement);
-			remove = function() {
-				removeStyleElement(styleElement);
-			};
-		}
-
-		update(obj);
-
-		return function updateStyle(newObj) {
-			if(newObj) {
-				if(newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap)
-					return;
-				update(obj = newObj);
-			} else {
-				remove();
-			}
-		};
-	}
-
-	var replaceText = (function () {
-		var textStore = [];
-
-		return function (index, replacement) {
-			textStore[index] = replacement;
-			return textStore.filter(Boolean).join('\n');
-		};
-	})();
-
-	function applyToSingletonTag(styleElement, index, remove, obj) {
-		var css = remove ? "" : obj.css;
-
-		if (styleElement.styleSheet) {
-			styleElement.styleSheet.cssText = replaceText(index, css);
-		} else {
-			var cssNode = document.createTextNode(css);
-			var childNodes = styleElement.childNodes;
-			if (childNodes[index]) styleElement.removeChild(childNodes[index]);
-			if (childNodes.length) {
-				styleElement.insertBefore(cssNode, childNodes[index]);
-			} else {
-				styleElement.appendChild(cssNode);
-			}
-		}
-	}
-
-	function applyToTag(styleElement, obj) {
-		var css = obj.css;
-		var media = obj.media;
-		var sourceMap = obj.sourceMap;
-
-		if (media) {
-			styleElement.setAttribute("media", media);
-		}
-
-		if (sourceMap) {
-			// https://developer.chrome.com/devtools/docs/javascript-debugging
-			// this makes source maps inside style tags work properly in Chrome
-			css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */';
-			// http://stackoverflow.com/a/26603875
-			css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
-		}
-
-		if (styleElement.styleSheet) {
-			styleElement.styleSheet.cssText = css;
-		} else {
-			while(styleElement.firstChild) {
-				styleElement.removeChild(styleElement.firstChild);
-			}
-			styleElement.appendChild(document.createTextNode(css));
-		}
-	}
-
-
-/***/ },
-/* 6 */
-/***/ function(module, exports) {
-
-	'use strict';
-
-	Object.defineProperty(exports, "__esModule", {
-	    value: true
-	});
-	// <template lang="html">
-	//     <p class="text">
-	//         {{msg}}
-	//     </p>
-	// </template>
-	//
-	// <script>
-	exports.default = {
-	    data: function data() {
-	        return {
-	            msg: 'hello world'
-	        };
-	    }
-
-	};
-	// </script>
-	//
-	// <style lang="css">
-	//     .text{
-	//         color: red;
-	//     }
-	// </style>
-
-/***/ },
-/* 7 */
-/***/ function(module, exports) {
-
-	module.exports = "\n<p class=\"text\">\n    {{msg}}\n</p>\n";
-
-/***/ }
-/******/ ]);
\ No newline at end of file
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 08b8ce0..84c5d3f 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -1,8 +1,10 @@
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
+
 module.exports = {
   entry: "./src/components/index.js",
   output: {
-    path: './build',
-    filename: "web-style.js"
+    path: './dist',
+    filename: "./js/web-style.js"
   },
   module: {
     loaders: [{
@@ -13,9 +15,12 @@ module.exports = {
       exclude: /node_modules/,
       loader: 'babel'
     }, {
-      test: /\.less$/,
-      loader: 'less'
-    }]
+      test: /\.scss$/,
+      loader: ExtractTextPlugin.extract("css!sass")
+    },
+      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
+      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
+    ]
   },
   babel: {
     presets: ['es2015'],
@@ -24,6 +29,13 @@ module.exports = {
   vue: {
     autoprefixer: {
       browsers: ['android >= 4.2']
+    },
+    loaders: {
+      scss: ExtractTextPlugin.extract("css!sass")
+      // css: ExtractTextPlugin.extract("css")
     }
-  }
+  },
+  plugins: [
+    new ExtractTextPlugin("./css/web-style.css")
+  ]
 };
diff --git a/dist/css/web-style.css b/dist/css/web-style.css
index 5a71244..27fb34c 100644
--- a/dist/css/web-style.css
+++ b/dist/css/web-style.css
@@ -1 +1,1246 @@
-@charset "UTF-8";.clear::after,.row::after{content:"";display:block;clear:both}.btn,.text-center{text-align:center}.btn,a{cursor:pointer}.btn,.form textarea{border:1px solid #d9d9d9}.dp-table,.table{border-collapse:collapse}.fade-enter,.fade-leave,.modal-enter,.modal-leave,.slide-enter,.slide-leave{opacity:0}.btn,.menu-line .menu-name,.table-responsive thead tr{white-space:nowrap}article,aside,blockquote,body,button,code,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul{margin:0;padding:0}.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-7,.col-8,.col-9{padding-right:8px;min-height:1px;position:relative}body,html{width:100%;height:100%;position:relative;color:#666}ol,ul{list-style:none}body{font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;font-size:14px}.iconfont,.loading{font-family:iconfont!important;-moz-osx-font-smoothing:grayscale;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:.2px}h1,h2,h3,h4,h5{font-weight:500;line-height:1.1;margin-top:20px;margin-bottom:10px}h1{font-size:20px}h2{font-size:18px}p{margin:8px 0}a{color:#2db7f5;text-decoration:none;transition:color .3s ease}a:hover{color:#4DC4F0}.clear::after{height:0}.row{position:relative;width:100%;height:auto;display:block}.row::after{height:0}.btn,.loading{display:inline-block;font-size:14px}.row .center{float:none;margin:0 auto}.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-offset-1,.col-offset-10,.col-offset-11,.col-offset-12,.col-offset-2,.col-offset-3,.col-offset-4,.col-offset-5,.col-offset-7,.col-offset-8,.col-offset-9{float:left;box-sizing:border-box}.col-1{width:8.33333%}.col-offset-1{margin-left:8.33333%}.col-2{width:16.66667%}.col-offset-2{margin-left:16.66667%}.col-3{width:25%}.col-offset-3{margin-left:25%}.col-4{width:33.33333%}.col-offset-4{margin-left:33.33333%}.col-5{width:41.66667%}.col-offset-5{margin-left:41.66667%}.col-6{padding-right:8px;width:50%;position:relative;min-height:1px}.col-offset-6{float:left;margin-left:50%;box-sizing:border-box}.col-7{width:58.33333%}.col-offset-7{margin-left:58.33333%}.col-8{width:66.66667%}.col-offset-8{margin-left:66.66667%}.col-9{width:75%}.col-offset-9{margin-left:75%}.col-10{width:83.33333%}.col-offset-10{margin-left:83.33333%}.col-11{width:91.66667%}.col-offset-11{margin-left:91.66667%}.col-12{width:100%}.col-offset-12{margin-left:100%}.loading{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}.loading::after{content:"\e6a1"}@-webkit-keyframes spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@media only screen and (max-width:640px){.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{float:left;width:100%;padding-right:0;box-sizing:border-box}}.box-920{width:920px;box-sizing:border-box;margin:0 auto}@media only screen and (max-width:640px){.box-920{width:100%;margin:0}}.fade-transition{transition:opacity .3s}.slide-transition{transition:opacity .3s ease,-webkit-transform .3s ease;transition:transform .3s ease,opacity .3s ease;transition:transform .3s ease,opacity .3s ease,-webkit-transform .3s ease;-webkit-transform:translate(0,0);transform:translate(0,0)}.slide-enter{-webkit-transform:translate(0,5px);transform:translate(0,5px)}.slide-leave{-webkit-transform:translate(0,30px);transform:translate(0,30px)}.btn{margin-bottom:0;font-weight:500;line-height:1.5;padding:2px 14px;border-radius:6px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#666;outline:0;background-color:#fff}.btn:hover{background:#f7f7f7}.btn:active{background:#efefef;transition:none}.btn:disabled{color:#ccc;cursor:no-drop}.btn-primary{color:#fff;background-color:#2db7f5;border-color:#2db7f5}.btn-primary:hover{color:#fff;background-color:#45bff6;border-color:#45bff6}.btn-primary:active{color:#fff;background-color:#15aff4;border-color:#15aff4;transition:none}.btn-primary:disabled{color:#fff;background-color:#8ed8fa;border-color:#8ed8fa;transition:none;cursor:no-drop}.btn-success{color:#fff;background-color:#5FBC29;border-color:#5FBC29}.btn-success:hover{color:#fff;background-color:#6ad12e;border-color:#6ad12e}.btn-success:active{color:#fff;background-color:#54a724;border-color:#54a724;transition:none}.btn-success:disabled{color:#fff;background-color:#96df6c;border-color:#96df6c;transition:none;cursor:no-drop}.btn-info{color:#fff;background-color:#01B3CA;border-color:#01B3CA}.btn-info:hover{color:#fff;background-color:#01c9e3;border-color:#01c9e3}.btn-info:active{color:#fff;background-color:#019db1;border-color:#019db1;transition:none}.btn-info:disabled{color:#fff;background-color:#33e7fe;border-color:#33e7fe;transition:none;cursor:no-drop}.btn-warning{color:#fff;background-color:#FAC450;border-color:#FAC450}.btn-warning:hover{color:#fff;background-color:#fbcc69;border-color:#fbcc69}.btn-warning:active{color:#fff;background-color:#f9bc37;border-color:#f9bc37;transition:none}.btn-warning:disabled{color:#fff;background-color:#fde5b3;border-color:#fde5b3;transition:none;cursor:no-drop}.btn-danger{color:#fff;background-color:#E01515;border-color:#E01515}.btn-danger:hover{color:#fff;background-color:#ea2424;border-color:#ea2424}.btn-danger:active{color:#fff;background-color:#c91313;border-color:#c91313;transition:none}.btn-danger:disabled{color:#fff;background-color:#f16a6a;border-color:#f16a6a;transition:none;cursor:no-drop}.btn-lg{padding:6px 18px}.btn-sm{padding:0 10px}.btn-block{display:block;width:100%}@font-face{font-family:iconfont;src:url(../fonts/iconfont.eot?t=1458285388);src:url(../fonts/iconfont.eot?t=1458285388#iefix) format("embedded-opentype"),url(../fonts/iconfont.woff?t=1458285388) format("woff"),url(../fonts/iconfont.ttf?t=1458285388) format("truetype"),url(../fonts/iconfont.svg?t=1458285388#iconfont) format("svg")}.iconfont{font-size:14px}.icon-arrowleft:before{content:"\e620"}.icon-arrowright:before{content:"\e621"}.icon-arrowup:before{content:"\e622"}.icon-arrowdown:before{content:"\e623"}.icon-caretcircleleft:before{content:"\e604"}.icon-caretcircleright:before{content:"\e605"}.icon-caretcircleup:before{content:"\e606"}.icon-caretcircledown:before{content:"\e607"}.icon-forward:before{content:"\e608"}.icon-backward:before{content:"\e609"}.icon-caretcircleoleft:before{content:"\e60b"}.icon-caretcircleoright:before{content:"\e60d"}.icon-caretcircleodown:before{content:"\e60e"}.icon-caretright:before{content:"\e60a"}.icon-caretleft:before{content:"\e60f"}.icon-caretup:before{content:"\e610"}.icon-caretdown:before{content:"\e611"}.icon-fastforward:before{content:"\e612"}.icon-fastbackward:before{content:"\e613"}.icon-stepbackward:before{content:"\e614"}.icon-stepforward:before{content:"\e615"}.icon-circleodown:before{content:"\e617"}.icon-circleoup:before{content:"\e618"}.icon-circleoleft:before{content:"\e619"}.icon-circleoright:before{content:"\e616"}.icon-circleright:before{content:"\e61a"}.icon-circleup:before{content:"\e61c"}.icon-playcircle:before{content:"\e61e"}.icon-playcircleo:before{content:"\e61f"}.icon-circleleft:before{content:"\e61b"}.icon-right:before{content:"\e600"}.icon-left:before{content:"\e601"}.icon-up:before{content:"\e602"}.icon-down:before{content:"\e603"}.icon-reload:before{content:"\e626"}.icon-doubleleft:before{content:"\e624"}.icon-doubleright:before{content:"\e625"}.icon-retweet:before{content:"\e627"}.icon-shrink:before{content:"\e628"}.icon-arrowsalt:before{content:"\e629"}.icon-rollback:before{content:"\e62a"}.icon-verticleleft:before{content:"\e62b"}.icon-verticleright:before{content:"\e62c"}.icon-cross:before{content:"\e62d"}.icon-check:before{content:"\e62e"}.icon-checkcircle:before{content:"\e62f"}.icon-checkcircleo:before{content:"\e630"}.icon-crosscircle:before{content:"\e631"}.icon-crosscircleo:before{content:"\e632"}.icon-exclamation:before{content:"\e633"}.icon-exclamationcircle:before{content:"\e634"}.icon-exclamationcircleo:before{content:"\e635"}.icon-info:before{content:"\e636"}.icon-infocircle:before{content:"\e637"}.icon-infocircleo:before{content:"\e638"}.icon-minuscircle:before{content:"\e639"}.icon-minuscircleo:before{content:"\e63a"}.icon-minus:before{content:"\e63b"}.icon-pluscircleo:before{content:"\e63c"}.icon-pluscircle:before{content:"\e63d"}.icon-plus:before{content:"\e63e"}.icon-swapleft:before{content:"\e63f"}.icon-swapright:before{content:"\e640"}.icon-swap:before{content:"\e641"}.icon-clockcircle:before{content:"\e642"}.icon-clockcircleo:before{content:"\e643"}.icon-pausecircle:before{content:"\e644"}.icon-pausecircleo:before{content:"\e645"}.icon-pause:before{content:"\e646"}.icon-questioncircle:before{content:"\e647"}.icon-questioncircleo:before{content:"\e648"}.icon-question:before{content:"\e649"}.icon-areachart:before{content:"\e64c"}.icon-appstore:before{content:"\e64d"}.icon-apple:before{content:"\e64e"}.icon-android:before{content:"\e64f"}.icon-bars:before{content:"\e650"}.icon-barchart:before{content:"\e651"}.icon-calendar:before{content:"\e654"}.icon-book:before{content:"\e655"}.icon-chrome:before{content:"\e65c"}.icon-code:before{content:"\e65d"}.icon-creditcard:before{content:"\e65f"}.icon-customerservice:before{content:"\e65e"}.icon-copy:before{content:"\e660"}.icon-delete:before{content:"\e661"}.icon-ellipsis:before{content:"\e667"}.icon-edit:before{content:"\e668"}.icon-export:before{content:"\e669"}.icon-exception:before{content:"\e66a"}.icon-file:before{content:"\e66b"}.icon-filetext:before{content:"\e66c"}.icon-filter:before{content:"\e66f"}.icon-folder:before{content:"\e670"}.icon-frowncircle:before{content:"\e672"}.icon-frown:before{content:"\e673"}.icon-smilecircle:before{content:"\e676"}.icon-smile:before{content:"\e677"}.icon-mehcircle:before{content:"\e678"}.icon-meh:before{content:"\e679"}.icon-github:before{content:"\e674"}.icon-laptop:before{content:"\e67a"}.icon-inbox:before{content:"\e67b"}.icon-ie:before{content:"\e67c"}.icon-home:before{content:"\e67d"}.icon-linechart:before{content:"\e67f"}.icon-link:before{content:"\e67e"}.icon-logout:before{content:"\e681"}.icon-mail:before{content:"\e682"}.icon-menuunfold:before{content:"\e683"}.icon-menufold:before{content:"\e684"}.icon-mobile:before{content:"\e685"}.icon-notification:before{content:"\e686"}.icon-paperclip:before{content:"\e687"}.icon-phone:before{content:"\e688"}.icon-picture:before{content:"\e689"}.icon-piechart:before{content:"\e68a"}.icon-poweroff:before{content:"\e68b"}.icon-setting:before{content:"\e68d"}.icon-sharealt:before{content:"\e68e"}.icon-search:before{content:"\e690"}.icon-poweroff1:before{content:"\e691"}.icon-solution:before{content:"\e68f"}.icon-tablet:before{content:"\e695"}.icon-team:before{content:"\e680"}.icon-totop:before{content:"\e69a"}.icon-videocamera:before{content:"\e69b"}.icon-user:before{content:"\e69c"}.icon-save:before{content:"\e69e"}.icon-unlock:before{content:"\e69f"}.icon-shoppingcart:before{content:"\e692"}.icon-windows:before{content:"\e6a0"}.icon-aliwangwango:before{content:"\e64a"}.icon-aliwangwang:before{content:"\e64b"}.icon-camerao:before{content:"\e652"}.icon-camera:before{content:"\e653"}.icon-eyeo:before{content:"\e66d"}.icon-eye:before{content:"\e66e"}.icon-enviroment:before{content:"\e665"}.icon-enviromento:before{content:"\e666"}.icon-staro:before{content:"\e693"}.icon-star:before{content:"\e694"}.icon-tags:before{content:"\e656"}.icon-tagso:before{content:"\e657"}.icon-tag:before{content:"\e658"}.icon-tago:before{content:"\e659"}.icon-cloud:before{content:"\e65a"}.icon-clouddownload:before{content:"\e65b"}.icon-cloudupload:before{content:"\e696"}.icon-clouduploado:before{content:"\e697"}.icon-clouddownloado:before{content:"\e698"}.icon-cloudo:before{content:"\e699"}.icon-iconfontcaretcircleoup:before{content:"\e60c"}.icon-loading:before{content:"\e6a1"}.icon-dislike:before{content:"\e6a2"}.icon-like:before{content:"\e6a3"}.icon-message:before{content:"\e6a4"}.icon-download:before{content:"\e663"}.icon-upload:before{content:"\e664"}.icon-paycircle:before{content:"\e6a8"}.icon-paycircleo:before{content:"\e6a9"}.icon-exclefile:before{content:"\e6ac"}.icon-pdffile:before{content:"\e6ab"}.icon-pptfile:before{content:"\e6a7"}.icon-jpgfile:before{content:"\e6aa"}.icon-unknowfile:before{content:"\e6a6"}.icon-minussquareo:before{content:"\e6ad"}.icon-plussquareo:before{content:"\e6ae"}.icon-iconfontdesktop:before{content:"\e662"}.icon-hdd:before{content:"\e675"}.icon-folderopen:before{content:"\e671"}.icon-circledown:before{content:"\e61d"}.icon-qrcode:before{content:"\e6a5"}.icon-scan:before{content:"\e6af"}.icon-heart:before{content:"\e68c"}.icon-hearto:before{content:"\e6b0"}.icon-calculator:before{content:"\e6b1"}.icon-appstoreo:before{content:"\e6b2"}.icon-lock:before{content:"\e69d"}.table{width:100%;margin-bottom:24px;border-spacing:0;border:1px solid #ddd}.table tbody th,.table td{border-top:1px solid #ddd}.table thead th{border-bottom:2px solid #ddd}.table td,.table th{text-align:left;padding:8px;border-left:1px solid #ddd}caption{padding-top:8px;padding-bottom:8px;color:#777;text-align:left}.table-hover tbody tr:hover,.table-striped tbody tr:nth-of-type(odd){background-color:#f9f9f9}.table-sm td,.table-sm th{padding:5px}.table-responsive{overflow:scroll}.table-responsive tbody td{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.pagination{float:right}.pagination:after{content:' ';clear:both}.pagination .quick{float:left;width:100px;padding-left:8px;line-height:30px;height:30px;text-align:right}.pagination .quick input{width:40px;margin:0 5px}.pagination li{float:left;border-radius:6px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-width:28px;height:28px;border:1px solid #d9d9d9;background-color:#fff;text-align:center;line-height:28px;margin:0 5px;cursor:pointer;transition:all .3s ease}.label,.modal-confirm .confirm-btns,.modal-footer{text-align:right}.pagination li:hover{border-color:#2db7f5;color:#2db7f5}.pagination a{color:#666;padding:0 6px;display:inline-block}.pagination .next:before{content:"\E600"}.pagination .active{background-color:#2db7f5;color:#fff;cursor:default}.drop .drop-ul,.form textarea,.select{background-color:#fff}.pagination .active:hover{color:#fff}.pagination .jump{border:none}.pagination .jump:before{content:"\2022\2022\2022";letter-spacing:2px}.form .row{margin-bottom:24px}.search-8>div{padding:8px}.padding-08>div{padding-right:8px}.form textarea,.input{padding:4px 7px;cursor:text;font-size:14px;color:#666;width:100%;box-sizing:border-box}input,textarea{background:#fff;outline:0;-webkit-appearance:none}.form input[type=checkbox]{-webkit-appearance:checkbox}.form input[type=radio]{-webkit-appearance:radio}.form textarea{position:relative;display:inline-block;vertical-align:bottom;line-height:1.5;border-radius:6px;background-image:none;min-height:100px}.input{height:28px;line-height:1;border:1px solid #d9d9d9;border-radius:6px;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.form .text,.label{padding-right:8px;height:28px}.checkbox,.form .text,.label,.radio,.select,.split,.tags .content,.tags-input .content{line-height:28px}.input:focus,.input:hover{border-color:#57c5f7}.input:focus{box-shadow:0 0 0 2px rgba(45,183,245,.2)}.require:before{display:inline-block;margin-right:4px;content:"*";font-family:SimSun;font-size:12px;color:#f60}.label{float:left;box-sizing:border-box}@media only screen and (max-width:640px){.label{text-align:left}}.form .input{width:100%}.split{margin-right:8px;height:28px;float:left}.select{border:1px solid #d9d9d9;border-radius:6px;margin:0;outline:0;height:28px;width:100%}.checkbox,.radio{font-size:14px;cursor:pointer;height:28px;margin-right:8px}.checkbox span,.radio span{margin:0 8px;display:inline-block}.checkbox input,.radio input{width:14px;height:14px}.drop{position:absolute;top:0;left:0}.drop .drop-ul{outline:0;position:relative;list-style-type:none;padding:0;margin:0;text-align:left;border-radius:6px;box-shadow:0 1px 6px rgba(99,99,99,.2);background-clip:padding-box;border:1px solid #d9d9d9}.dp-footer,.dp-header2,.dp-table,.tp-body ul li,.v-carousel-dots{text-align:center}.dp,.tp{box-shadow:0 0 4px rgba(0,0,0,.17)}.drop .drop-ul li{padding:7px 15px;transition:background .3s ease}.drop .drop-ul li:hover{background-color:#eaf8fe}.tags-wrap{width:100%;height:100%;outline:0}.tags-wrap::after{content:"";display:block;height:0;clear:both}.tags,.tags-input{position:relative;float:left;color:#fff;line-height:28px;margin:0 4px 4px 0;padding:0 22px 0 10px;border-radius:6px}.tags .del,.tags-input .del{width:22px;height:28px;text-align:center;cursor:pointer;position:absolute;top:-1px;right:0}.dp-out,.v-carousel-dots li,.v-drop{position:relative}.tags-input{font-size:14px;padding:0;background-color:inherit;border:none;color:inherit;width:10em}.tags-enter,.tags-leave{-webkit-transform:scale(.9);transform:scale(.9);opacity:0}.tags-transition{transition:all .3s ease}.v-auto{outline:0}.v-drop{border:1px solid #E4E6E7;margin-right:2px;border-radius:0 0 2px 2px;background-color:#fff}.v-drop li{padding:4px 7px;cursor:pointer}.v-drop .active{background-color:#eee}.v-carousel-wrap{width:100%;height:100%;overflow-x:hidden}.v-carousel-content{position:relative;transition:left .6s ease}.v-carousel-one{height:100%;float:left;background-repeat:no-repeat;background-position:center;background-size:cover}.v-carousel-dots{background-color:inherit;overflow:hidden}.menu,.tp-body ul{overflow-y:scroll}.v-carousel-dots li{display:inline-block;width:20px;height:18px;margin:auto 5px;cursor:pointer;font-size:16px;color:#999;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.v-carousel-dots li:hover{color:#666}.v-carousel-dots .active{color:#000!important}.dp,.dp-out i{position:absolute}.dp-out i{right:10px;top:50%;margin-top:-7px}.dp{width:231px;border:1px solid #d9d9d9;border-radius:6px;top:-2px;left:-2px;background:#fff;z-index:10}.dp .dp-text{height:100%;line-height:1.5;padding-left:4px}.dp .icon-crosscircle{cursor:pointer;color:#ccc;position:absolute;right:5px;top:10px;font-size:12px;transition:color .3s ease}.dp .icon-crosscircle:hover{color:#999}.dp .dp-body{padding:4px 8px}.dp-table{width:100%}.dp-table th{padding:6px 0;border:0}.dp-table td{padding:4px 0;border:0}.dp-table th span{display:block;font-weight:400}.dp-table td span{display:block;width:20px;height:20px;border:1px solid transparent;margin:0 auto;transition:background .3s ease;border-radius:4px;padding:0;box-sizing:border-box;font-size:12px;line-height:20px}.dp-footer a,.dp-header2 a{display:inline-block;line-height:34px}.dp-table td span:hover{background:#eaf8fe;cursor:pointer}.dp-table .dp-last span{color:#ccc}.dp-table .dp-today span{border-color:#2db7f5;font-weight:700;color:#2db7f5}.dp-table .dp-select span{background:#2db7f5;color:#fff;border:1px solid transparent}.dp-header1,.dp-header2{position:relative;border-bottom:1px solid #e9e9e9;height:34px;box-sizing:border-box}.dp-table .dp-select span:hover{background:#2db7f5}.dp-header1{padding:6px}.dp-header2{line-height:34px}.dp-header2 .dp-ym{font-weight:700}.dp-header2 a{color:#999;height:34px;font-size:16px;padding:0 5px;position:absolute;font-family:Arial,Hiragino Sans GB,Microsoft Yahei,Microsoft Sans Serif,sans-serif}.dp-footer a,.dp-footer span,.tp-out .input{font-size:12px}.dp-header2 a:hover{color:#2db7f5;cursor:pointer}.dp-header2 .dp-h-1{left:7px}.dp-header2 .dp-h-2{left:29px}.dp-header2 .dp-h-3{right:29px}.dp-header2 .dp-h-4{right:7px}.dp-footer{height:38px;border-top:1px solid #e9e9e9;position:relative}.dp-footer a{height:34px;cursor:pointer}.dp-footer span{position:absolute;right:16px;top:4px;padding:2px 4px;border:1px solid transparent}.dp-input-wrap,.tp-out{position:relative;width:96px}.dp-input-wrap{float:left;margin-right:5px}.dp-input-wrap .input{box-sizing:border-box;margin-right:5px;height:22px;font-size:12px;border-radius:4px}.tp-out{min-width:80px}.tp,.tp-out i,.tp-out:after{position:absolute}.tp-out i{right:10px;top:6px}.tp-out:after{content:"\e643";font-family:iconfont!important;font-size:14px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:.2px;top:50%;margin-top:-8px;right:8px}.tp{width:168px;height:178px;border-radius:6px;border:1px solid #ccc;line-height:1.5;background:#fff;top:-2px;left:-2px;z-index:102}.tp-header{padding:6px;position:relative;border-bottom:1px solid #e9e9e9}.tp-header input{margin:0;padding:0;border:0;width:100%;cursor:auto;line-height:1.5;outline:0;color:#666}.tp-header input::-moz-selection{background:#4BB8FF;color:#fff}.tp-header input::selection{background:#4BB8FF;color:#fff}.tp-header i{position:absolute;right:10px;top:6px;font-size:12px;color:#ccc;transition:color ease .3s;cursor:pointer}.tp-header i:hover{color:#999}.tp-body ul{float:left;height:144px;width:55px}.tp-body ul .tp-active{background:#f7f7f7;font-weight:700}.tp-body ul .tp-active:hover{background:#f7f7f7}.tp-body ul li{height:24px;line-height:24px;transition:background .3s ease;cursor:pointer}.tp-body ul li:hover{background:#eaf8fe}.tp-body ul:after{content:'';display:block;height:120px}.tp-body .tp-line{float:left;width:1px;height:144px;background:#e9e9e9}.message{position:fixed;left:50%;top:-45px;box-sizing:border-box;transition:top .5s ease;z-index:10001}.message .message-content{position:relative;right:50%;padding:5px 14px;border-radius:6px;border:1px solid #d9d9d9;background:#fff;display:block;box-sizing:border-box;box-shadow:0 1px 8px rgba(99,99,99,.2)}.message .icon-checkcircle{color:#87d068;font-size:12px;-webkit-text-stroke-width:0}.message .icon-crosscircle{color:#f50;font-size:12px;-webkit-text-stroke-width:0}.message-move{top:24px}.modal-mask{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(55,55,55,.6);z-index:100;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.modal-box,.modal-confirm,.v-popover-box{background-color:#fff;box-sizing:border-box}.confirm-content{padding-left:30px;padding-top:30px;padding-bottom:30px}.modal-confirm{width:400px;padding:30px 40px;border-radius:6px;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.modal-confirm i{color:#fa0;font-size:24px;position:relative;top:2px}.modal-box{width:520px;border-radius:6px;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}@media only screen and (max-width:640px){.modal-box,.modal-confirm{width:100%;margin:0 20px}.modal-confirm{padding:10px 20px}}.modal-header{padding:13px 18px 14px 16px;border-bottom:1px solid #e9e9e9;position:relative}.modal-header i,.v-popover-wrap{position:absolute}.modal-header i{right:20px;top:15px;font-size:14px;cursor:pointer}.modal-header h3{font-size:14px}.modal-body{padding:16px}.modal-footer{padding:10px 18px 10px 10px;border-top:1px solid #e9e9e9;background:#fff;border-radius:0 0 6px 6px}.modal-transition{transition:all .3s ease}.modal-enter .modal-box,.modal-enter .modal-confirm,.modal-leave .modal-box,.modal-leave .modal-confirm{-webkit-transform:scale(1.1);transform:scale(1.1)}.v-popover-tag{display:inline-block}.v-popover-box{width:177px;background-clip:padding-box;border:1px solid #d9d9d9;border-radius:6px;box-shadow:0 1px 6px rgba(99,99,99,.2);position:relative}.v-popover-title{padding:0 16px;line-height:32px;height:32px;border-bottom:1px solid #e9e9e9;color:#666}.v-popover-content{padding:8px 16px;color:#666;word-break:break-all}.v-popover-arrow{position:absolute;width:0;height:0;border:5px solid transparent;margin-left:-5px}.v-popover-arrow:after{content:" ";margin-left:-4px;border:4px solid transparent;position:absolute;width:0;height:0}.main,.menu{height:100vh}.v-popover-arrow-top{border-bottom-width:0;border-top-color:#d9d9d9;bottom:-5px}.v-popover-arrow-top:after{border-top-color:#fff;bottom:-3px}.v-popover-arrow-bottom{border-top-width:0;border-bottom-color:#d9d9d9;top:-5px}.v-popover-arrow-bottom:after{border-bottom-color:#fff;top:-3px}.menu{width:220px;overflow-x:hidden;position:fixed;border-right:1px solid #ddd;box-sizing:border-box}.menu ul{background:#FAFAFA;transition:height .3s;overflow:hidden}.menu li{padding:7px 0 7px 46px}.menu li :hover{color:#61b98e}.menu a{color:#666}.header li a,.menu .active a{color:#61b98e}.menu .menu-top{text-align:center;padding:20px 0;color:#61b98e}.main{display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:220px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.main .content{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow:scroll;padding:0 10px}.menu-line{height:20px;padding-top:14px;padding-bottom:6px;cursor:pointer}.menu-line .menu-name{width:130px;overflow:hidden;display:inline-block;text-overflow:ellipsis}.v-tabs-nav-wrap,.v-tabs-wrap{width:100%;overflow-x:hidden}.menu-line i{margin-left:10px;padding:3px 12px 0;font-size:12px;float:left;min-width:12px}.menu-line b{margin-right:20px;font-size:12px;font-weight:700;-webkit-transform:scale(.8);transform:scale(.8);transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;float:right}.active-line b{font-size:12px;font-weight:700;-webkit-transform:scale(.8) rotate(90deg);transform:scale(.8) rotate(90deg)}.header{height:64px;box-sizing:border-box;padding:20px;background-color:#f5f5f5}.header .left-part{float:left}.header ul{float:right}.header li{display:inline-block;margin:0 5px}@media screen and (max-width:640px){.menu{display:none}.main{margin-left:0}}.v-tabs-nav-wrap{height:37px;border-bottom:1px solid #d9d9d9;margin-bottom:16px}.v-tabs-nav-wrap .v-tabs-nav{position:relative;height:100%;transition:left .6s ease}.v-tabs-nav-wrap .v-tabs-nav .v-tabs-nav-item{float:left;padding:8px 20px;margin-right:24px;cursor:pointer;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:transparent}.v-tabs-nav-wrap .v-tabs-nav .v-tabs-nav-item:last-child{margin-right:0}.v-tabs-nav-wrap .v-tabs-nav .v-tabs-nav-active{border-bottom-color:#2db7f5}.v-tabs-wrap .v-tabs-content{position:relative;display:-webkit-flex;display:-ms-flexbox;display:flex;transition:left .6s cubic-bezier(.65,.05,.36,1)}.v-tabs-wrap .v-tabs-content>*{display:block;-webkit-flex:1;-ms-flex:1;flex:1}
\ No newline at end of file
+@charset "UTF-8";
+body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, menu, nav, section {
+  margin: 0;
+  padding: 0; }
+
+html, body {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  color: #666; }
+
+ul, ol {
+  list-style: none; }
+
+body {
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
+  font-size: 14px; }
+
+h1, h2, h3, h4, h5 {
+  font-weight: 500;
+  line-height: 1.1;
+  margin-top: 20px;
+  margin-bottom: 10px; }
+
+h1 {
+  font-size: 20px; }
+
+h2 {
+  font-size: 18px; }
+
+p {
+  margin: 8px 0; }
+
+a {
+  color: #2db7f5;
+  text-decoration: none;
+  transition: color .3s ease;
+  cursor: pointer; }
+  a:hover {
+    color: #4DC4F0; }
+
+.clear::after {
+  content: "";
+  height: 0;
+  display: block;
+  clear: both; }
+
+.row {
+  position: relative;
+  width: 100%;
+  height: auto;
+  display: block; }
+  .row::after {
+    content: "";
+    display: block;
+    height: 0;
+    clear: both; }
+  .row .center {
+    float: none;
+    margin: 0 auto; }
+
+.col-1 {
+  float: left;
+  padding-right: 8px;
+  width: 8.33333%;
+  box-sizing: border-box;
+  position: relative;
+  min-height: 1px; }
+
+.col-offset-1 {
+  float: left;
+  margin-left: 8.33333%;
+  box-sizing: border-box; }
+
+.col-2 {
+  float: left;
+  padding-right: 8px;
+  width: 16.66667%;
+  box-sizing: border-box;
+  position: relative;
+  min-height: 1px; }
+
+.col-offset-2 {
+  float: left;
+  margin-left: 16.66667%;
+  box-sizing: border-box; }
+
+.col-3 {
+  float: left;
+  padding-right: 8px;
+  width: 25%;
+  box-sizing: border-box;
+  position: relative;
+  min-height: 1px; }
+
+.col-offset-3 {
+  float: left;
+  margin-left: 25%;
+  box-sizing: border-box; }
+
+.col-4 {
+  float: left;
+  padding-right: 8px;
+  width: 33.33333%;
+  box-sizing: border-box;
+  position: relative;
+  min-height: 1px; }
+
+.col-offset-4 {
+  float: left;
+  margin-left: 33.33333%;
+  box-sizing: border-box; }
+
+.col-5 {
+  float: left;
+  padding-right: 8px;
+  width: 41.66667%;
+  box-sizing: border-box;
+  position: relative;
+  min-height: 1px; }
+
+.col-offset-5 {
+  float: left;
+  margin-left: 41.66667%;
+  box-sizing: border-box; }
+
+.col-6 {
+  float: left;
+  padding-right: 8px;
+  width: 50%;
+  box-sizing: border-box;
+  position: relative;
+  min-height: 1px; }
+
+.col-offset-6 {
+  float: left;
+  margin-left: 50%;
+  box-sizing: border-box; }
+
+.col-7 {
+  float: left;
+  padding-right: 8px;
+  width: 58.33333%;
+  box-sizing: border-box;
+  position: relative;
+  min-height: 1px; }
+
+.col-offset-7 {
+  float: left;
+  margin-left: 58.33333%;
+  box-sizing: border-box; }
+
+.col-8 {
+  float: left;
+  padding-right: 8px;
+  width: 66.66667%;
+  box-sizing: border-box;
+  position: relative;
+  min-height: 1px; }
+
+.col-offset-8 {
+  float: left;
+  margin-left: 66.66667%;
+  box-sizing: border-box; }
+
+.col-9 {
+  float: left;
+  padding-right: 8px;
+  width: 75%;
+  box-sizing: border-box;
+  position: relative;
+  min-height: 1px; }
+
+.col-offset-9 {
+  float: left;
+  margin-left: 75%;
+  box-sizing: border-box; }
+
+.col-10 {
+  float: left;
+  padding-right: 8px;
+  width: 83.33333%;
+  box-sizing: border-box;
+  position: relative;
+  min-height: 1px; }
+
+.col-offset-10 {
+  float: left;
+  margin-left: 83.33333%;
+  box-sizing: border-box; }
+
+.col-11 {
+  float: left;
+  padding-right: 8px;
+  width: 91.66667%;
+  box-sizing: border-box;
+  position: relative;
+  min-height: 1px; }
+
+.col-offset-11 {
+  float: left;
+  margin-left: 91.66667%;
+  box-sizing: border-box; }
+
+.col-12 {
+  float: left;
+  padding-right: 8px;
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+  min-height: 1px; }
+
+.col-offset-12 {
+  float: left;
+  margin-left: 100%;
+  box-sizing: border-box; }
+
+.text-center {
+  text-align: center; }
+
+.loading {
+  font-family: "iconfont" !important;
+  font-size: 14px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: 0.2px;
+  -moz-osx-font-smoothing: grayscale;
+  display: inline-block;
+  animation: spin 1s linear infinite; }
+  .loading::after {
+    content: "\E6A1"; }
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg); }
+  to {
+    transform: rotate(360deg); } }
+
+@media only screen and (max-width: 640px) {
+  .col-1 {
+    float: left;
+    width: 100%;
+    padding-right: 0;
+    box-sizing: border-box; }
+  .col-2 {
+    float: left;
+    width: 100%;
+    padding-right: 0;
+    box-sizing: border-box; }
+  .col-3 {
+    float: left;
+    width: 100%;
+    padding-right: 0;
+    box-sizing: border-box; }
+  .col-4 {
+    float: left;
+    width: 100%;
+    padding-right: 0;
+    box-sizing: border-box; }
+  .col-5 {
+    float: left;
+    width: 100%;
+    padding-right: 0;
+    box-sizing: border-box; }
+  .col-6 {
+    float: left;
+    width: 100%;
+    padding-right: 0;
+    box-sizing: border-box; }
+  .col-7 {
+    float: left;
+    width: 100%;
+    padding-right: 0;
+    box-sizing: border-box; }
+  .col-8 {
+    float: left;
+    width: 100%;
+    padding-right: 0;
+    box-sizing: border-box; }
+  .col-9 {
+    float: left;
+    width: 100%;
+    padding-right: 0;
+    box-sizing: border-box; }
+  .col-10 {
+    float: left;
+    width: 100%;
+    padding-right: 0;
+    box-sizing: border-box; }
+  .col-11 {
+    float: left;
+    width: 100%;
+    padding-right: 0;
+    box-sizing: border-box; }
+  .col-12 {
+    float: left;
+    width: 100%;
+    padding-right: 0;
+    box-sizing: border-box; } }
+
+.box-920 {
+  width: 920px;
+  box-sizing: border-box;
+  margin: 0 auto; }
+
+@media only screen and (max-width: 640px) {
+  .box-920 {
+    width: 100%;
+    margin: 0; } }
+
+.fade-transition {
+  transition: opacity .3s; }
+
+.fade-enter {
+  opacity: 0; }
+
+.fade-leave {
+  opacity: 0; }
+
+.slide-transition {
+  transition: transform .3s ease, opacity .3s ease;
+  transform: translate(0, 0); }
+
+.slide-enter {
+  transform: translate(0, 5px);
+  opacity: 0; }
+
+.slide-leave {
+  transform: translate(0, 30px);
+  opacity: 0; }
+
+.btn {
+  display: inline-block;
+  margin-bottom: 0;
+  font-weight: 500;
+  text-align: center;
+  cursor: pointer;
+  border: 1px solid #d9d9d9;
+  white-space: nowrap;
+  line-height: 1.5;
+  padding: 2px 14px;
+  font-size: 14px;
+  border-radius: 6px;
+  -webkit-user-select: none;
+  user-select: none;
+  color: #666;
+  outline: none;
+  background-color: #fff; }
+  .btn:hover {
+    background: #f7f7f7; }
+  .btn:active {
+    background: #efefef;
+    transition: none; }
+  .btn:disabled {
+    color: #ccc;
+    cursor: no-drop; }
+
+.btn-primary {
+  color: #fff;
+  background-color: #2db7f5;
+  border-color: #2db7f5; }
+  .btn-primary:hover {
+    background-color: #45bff6; }
+  .btn-primary:active {
+    background-color: #15aff4; }
+  .btn-primary:disabled {
+    background-color: #8ed8fa;
+    cursor: no-drop; }
+
+.btn-success {
+  color: #fff;
+  background-color: #5FBC29;
+  border-color: #5FBC29; }
+  .btn-success:hover {
+    background-color: #6ad12e; }
+  .btn-success:active {
+    background-color: #54a724; }
+  .btn-success:disabled {
+    background-color: #96df6c;
+    cursor: no-drop; }
+
+.btn-info {
+  color: #fff;
+  background-color: #01B3CA;
+  border-color: #01B3CA; }
+  .btn-info:hover {
+    background-color: #01c9e3; }
+  .btn-info:active {
+    background-color: #019db1; }
+  .btn-info:disabled {
+    background-color: #33e7fe;
+    cursor: no-drop; }
+
+.btn-warning {
+  color: #fff;
+  background-color: #FAC450;
+  border-color: #FAC450; }
+  .btn-warning:hover {
+    background-color: #fbcc69; }
+  .btn-warning:active {
+    background-color: #f9bc37; }
+  .btn-warning:disabled {
+    background-color: #fde5b3;
+    cursor: no-drop; }
+
+.btn-danger {
+  color: #fff;
+  background-color: #E01515;
+  border-color: #E01515; }
+  .btn-danger:hover {
+    background-color: #ea2424; }
+  .btn-danger:active {
+    background-color: #c91313; }
+  .btn-danger:disabled {
+    background-color: #f16a6a;
+    cursor: no-drop; }
+
+.btn-lg {
+  padding: 6px 18px; }
+
+.btn-sm {
+  padding: 0px 10px; }
+
+.btn-block {
+  display: block;
+  width: 100%; }
+
+@font-face {
+  font-family: "iconfont";
+  src: url(cae736108db2b1c4594bd2a2ab62aced.eot);
+  /* IE9*/
+  src: url(cae736108db2b1c4594bd2a2ab62aced.eot) format("embedded-opentype"), url(65034af05eab6c38e61dd9de2ca567ac.woff) format("woff"), url(54f09b7b1bac84e5ff0504ea675ad445.ttf) format("truetype"), url(864f536ffea703bdd089875c954bf5c0.svg) format("svg");
+  /* iOS 4.1- */ }
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 14px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: 0.2px;
+  -moz-osx-font-smoothing: grayscale; }
+
+.icon-arrowleft:before {
+  content: "\E620"; }
+
+.icon-arrowright:before {
+  content: "\E621"; }
+
+.icon-arrowup:before {
+  content: "\E622"; }
+
+.icon-arrowdown:before {
+  content: "\E623"; }
+
+.icon-caretcircleleft:before {
+  content: "\E604"; }
+
+.icon-caretcircleright:before {
+  content: "\E605"; }
+
+.icon-caretcircleup:before {
+  content: "\E606"; }
+
+.icon-caretcircledown:before {
+  content: "\E607"; }
+
+.icon-forward:before {
+  content: "\E608"; }
+
+.icon-backward:before {
+  content: "\E609"; }
+
+.icon-caretcircleoleft:before {
+  content: "\E60B"; }
+
+.icon-caretcircleoright:before {
+  content: "\E60D"; }
+
+.icon-caretcircleodown:before {
+  content: "\E60E"; }
+
+.icon-caretright:before {
+  content: "\E60A"; }
+
+.icon-caretleft:before {
+  content: "\E60F"; }
+
+.icon-caretup:before {
+  content: "\E610"; }
+
+.icon-caretdown:before {
+  content: "\E611"; }
+
+.icon-fastforward:before {
+  content: "\E612"; }
+
+.icon-fastbackward:before {
+  content: "\E613"; }
+
+.icon-stepbackward:before {
+  content: "\E614"; }
+
+.icon-stepforward:before {
+  content: "\E615"; }
+
+.icon-circleodown:before {
+  content: "\E617"; }
+
+.icon-circleoup:before {
+  content: "\E618"; }
+
+.icon-circleoleft:before {
+  content: "\E619"; }
+
+.icon-circleoright:before {
+  content: "\E616"; }
+
+.icon-circleright:before {
+  content: "\E61A"; }
+
+.icon-circleup:before {
+  content: "\E61C"; }
+
+.icon-playcircle:before {
+  content: "\E61E"; }
+
+.icon-playcircleo:before {
+  content: "\E61F"; }
+
+.icon-circleleft:before {
+  content: "\E61B"; }
+
+.icon-right:before {
+  content: "\E600"; }
+
+.icon-left:before {
+  content: "\E601"; }
+
+.icon-up:before {
+  content: "\E602"; }
+
+.icon-down:before {
+  content: "\E603"; }
+
+.icon-reload:before {
+  content: "\E626"; }
+
+.icon-doubleleft:before {
+  content: "\E624"; }
+
+.icon-doubleright:before {
+  content: "\E625"; }
+
+.icon-retweet:before {
+  content: "\E627"; }
+
+.icon-shrink:before {
+  content: "\E628"; }
+
+.icon-arrowsalt:before {
+  content: "\E629"; }
+
+.icon-rollback:before {
+  content: "\E62A"; }
+
+.icon-verticleleft:before {
+  content: "\E62B"; }
+
+.icon-verticleright:before {
+  content: "\E62C"; }
+
+.icon-cross:before {
+  content: "\E62D"; }
+
+.icon-check:before {
+  content: "\E62E"; }
+
+.icon-checkcircle:before {
+  content: "\E62F"; }
+
+.icon-checkcircleo:before {
+  content: "\E630"; }
+
+.icon-crosscircle:before {
+  content: "\E631"; }
+
+.icon-crosscircleo:before {
+  content: "\E632"; }
+
+.icon-exclamation:before {
+  content: "\E633"; }
+
+.icon-exclamationcircle:before {
+  content: "\E634"; }
+
+.icon-exclamationcircleo:before {
+  content: "\E635"; }
+
+.icon-info:before {
+  content: "\E636"; }
+
+.icon-infocircle:before {
+  content: "\E637"; }
+
+.icon-infocircleo:before {
+  content: "\E638"; }
+
+.icon-minuscircle:before {
+  content: "\E639"; }
+
+.icon-minuscircleo:before {
+  content: "\E63A"; }
+
+.icon-minus:before {
+  content: "\E63B"; }
+
+.icon-pluscircleo:before {
+  content: "\E63C"; }
+
+.icon-pluscircle:before {
+  content: "\E63D"; }
+
+.icon-plus:before {
+  content: "\E63E"; }
+
+.icon-swapleft:before {
+  content: "\E63F"; }
+
+.icon-swapright:before {
+  content: "\E640"; }
+
+.icon-swap:before {
+  content: "\E641"; }
+
+.icon-clockcircle:before {
+  content: "\E642"; }
+
+.icon-clockcircleo:before {
+  content: "\E643"; }
+
+.icon-pausecircle:before {
+  content: "\E644"; }
+
+.icon-pausecircleo:before {
+  content: "\E645"; }
+
+.icon-pause:before {
+  content: "\E646"; }
+
+.icon-questioncircle:before {
+  content: "\E647"; }
+
+.icon-questioncircleo:before {
+  content: "\E648"; }
+
+.icon-question:before {
+  content: "\E649"; }
+
+.icon-areachart:before {
+  content: "\E64C"; }
+
+.icon-appstore:before {
+  content: "\E64D"; }
+
+.icon-apple:before {
+  content: "\E64E"; }
+
+.icon-android:before {
+  content: "\E64F"; }
+
+.icon-bars:before {
+  content: "\E650"; }
+
+.icon-barchart:before {
+  content: "\E651"; }
+
+.icon-calendar:before {
+  content: "\E654"; }
+
+.icon-book:before {
+  content: "\E655"; }
+
+.icon-chrome:before {
+  content: "\E65C"; }
+
+.icon-code:before {
+  content: "\E65D"; }
+
+.icon-creditcard:before {
+  content: "\E65F"; }
+
+.icon-customerservice:before {
+  content: "\E65E"; }
+
+.icon-copy:before {
+  content: "\E660"; }
+
+.icon-delete:before {
+  content: "\E661"; }
+
+.icon-ellipsis:before {
+  content: "\E667"; }
+
+.icon-edit:before {
+  content: "\E668"; }
+
+.icon-export:before {
+  content: "\E669"; }
+
+.icon-exception:before {
+  content: "\E66A"; }
+
+.icon-file:before {
+  content: "\E66B"; }
+
+.icon-filetext:before {
+  content: "\E66C"; }
+
+.icon-filter:before {
+  content: "\E66F"; }
+
+.icon-folder:before {
+  content: "\E670"; }
+
+.icon-frowncircle:before {
+  content: "\E672"; }
+
+.icon-frown:before {
+  content: "\E673"; }
+
+.icon-smilecircle:before {
+  content: "\E676"; }
+
+.icon-smile:before {
+  content: "\E677"; }
+
+.icon-mehcircle:before {
+  content: "\E678"; }
+
+.icon-meh:before {
+  content: "\E679"; }
+
+.icon-github:before {
+  content: "\E674"; }
+
+.icon-laptop:before {
+  content: "\E67A"; }
+
+.icon-inbox:before {
+  content: "\E67B"; }
+
+.icon-ie:before {
+  content: "\E67C"; }
+
+.icon-home:before {
+  content: "\E67D"; }
+
+.icon-linechart:before {
+  content: "\E67F"; }
+
+.icon-link:before {
+  content: "\E67E"; }
+
+.icon-logout:before {
+  content: "\E681"; }
+
+.icon-mail:before {
+  content: "\E682"; }
+
+.icon-menuunfold:before {
+  content: "\E683"; }
+
+.icon-menufold:before {
+  content: "\E684"; }
+
+.icon-mobile:before {
+  content: "\E685"; }
+
+.icon-notification:before {
+  content: "\E686"; }
+
+.icon-paperclip:before {
+  content: "\E687"; }
+
+.icon-phone:before {
+  content: "\E688"; }
+
+.icon-picture:before {
+  content: "\E689"; }
+
+.icon-piechart:before {
+  content: "\E68A"; }
+
+.icon-poweroff:before {
+  content: "\E68B"; }
+
+.icon-setting:before {
+  content: "\E68D"; }
+
+.icon-sharealt:before {
+  content: "\E68E"; }
+
+.icon-search:before {
+  content: "\E690"; }
+
+.icon-poweroff1:before {
+  content: "\E691"; }
+
+.icon-solution:before {
+  content: "\E68F"; }
+
+.icon-tablet:before {
+  content: "\E695"; }
+
+.icon-team:before {
+  content: "\E680"; }
+
+.icon-totop:before {
+  content: "\E69A"; }
+
+.icon-videocamera:before {
+  content: "\E69B"; }
+
+.icon-user:before {
+  content: "\E69C"; }
+
+.icon-save:before {
+  content: "\E69E"; }
+
+.icon-unlock:before {
+  content: "\E69F"; }
+
+.icon-shoppingcart:before {
+  content: "\E692"; }
+
+.icon-windows:before {
+  content: "\E6A0"; }
+
+.icon-aliwangwango:before {
+  content: "\E64A"; }
+
+.icon-aliwangwang:before {
+  content: "\E64B"; }
+
+.icon-camerao:before {
+  content: "\E652"; }
+
+.icon-camera:before {
+  content: "\E653"; }
+
+.icon-eyeo:before {
+  content: "\E66D"; }
+
+.icon-eye:before {
+  content: "\E66E"; }
+
+.icon-enviroment:before {
+  content: "\E665"; }
+
+.icon-enviromento:before {
+  content: "\E666"; }
+
+.icon-staro:before {
+  content: "\E693"; }
+
+.icon-star:before {
+  content: "\E694"; }
+
+.icon-tags:before {
+  content: "\E656"; }
+
+.icon-tagso:before {
+  content: "\E657"; }
+
+.icon-tag:before {
+  content: "\E658"; }
+
+.icon-tago:before {
+  content: "\E659"; }
+
+.icon-cloud:before {
+  content: "\E65A"; }
+
+.icon-clouddownload:before {
+  content: "\E65B"; }
+
+.icon-cloudupload:before {
+  content: "\E696"; }
+
+.icon-clouduploado:before {
+  content: "\E697"; }
+
+.icon-clouddownloado:before {
+  content: "\E698"; }
+
+.icon-cloudo:before {
+  content: "\E699"; }
+
+.icon-iconfontcaretcircleoup:before {
+  content: "\E60C"; }
+
+.icon-loading:before {
+  content: "\E6A1"; }
+
+.icon-dislike:before {
+  content: "\E6A2"; }
+
+.icon-like:before {
+  content: "\E6A3"; }
+
+.icon-message:before {
+  content: "\E6A4"; }
+
+.icon-download:before {
+  content: "\E663"; }
+
+.icon-upload:before {
+  content: "\E664"; }
+
+.icon-paycircle:before {
+  content: "\E6A8"; }
+
+.icon-paycircleo:before {
+  content: "\E6A9"; }
+
+.icon-exclefile:before {
+  content: "\E6AC"; }
+
+.icon-pdffile:before {
+  content: "\E6AB"; }
+
+.icon-pptfile:before {
+  content: "\E6A7"; }
+
+.icon-jpgfile:before {
+  content: "\E6AA"; }
+
+.icon-unknowfile:before {
+  content: "\E6A6"; }
+
+.icon-minussquareo:before {
+  content: "\E6AD"; }
+
+.icon-plussquareo:before {
+  content: "\E6AE"; }
+
+.icon-iconfontdesktop:before {
+  content: "\E662"; }
+
+.icon-hdd:before {
+  content: "\E675"; }
+
+.icon-folderopen:before {
+  content: "\E671"; }
+
+.icon-circledown:before {
+  content: "\E61D"; }
+
+.icon-qrcode:before {
+  content: "\E6A5"; }
+
+.icon-scan:before {
+  content: "\E6AF"; }
+
+.icon-heart:before {
+  content: "\E68C"; }
+
+.icon-hearto:before {
+  content: "\E6B0"; }
+
+.icon-calculator:before {
+  content: "\E6B1"; }
+
+.icon-appstoreo:before {
+  content: "\E6B2"; }
+
+.icon-lock:before {
+  content: "\E69D"; }
+
+.table {
+  width: 100%;
+  margin-bottom: 24px;
+  border-spacing: 0;
+  border-collapse: collapse;
+  border: 1px solid #ddd; }
+  .table tbody th, .table td {
+    border-top: 1px solid #ddd; }
+  .table thead th {
+    border-bottom: 2px solid #ddd; }
+  .table th, .table td {
+    text-align: left;
+    padding: 8px;
+    border-left: 1px solid #ddd; }
+
+caption {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: #777;
+  text-align: left; }
+
+.table-striped tbody tr:nth-of-type(odd) {
+  background-color: #f9f9f9; }
+
+.table-hover tbody tr:hover {
+  background-color: #f9f9f9; }
+
+.table-sm th, .table-sm td {
+  padding: 5px; }
+
+.table-responsive {
+  overflow: scroll; }
+  .table-responsive thead tr {
+    white-space: nowrap; }
+  .table-responsive tbody td {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden; }
+
+.pagination {
+  float: right; }
+  .pagination:after {
+    content: ' ';
+    clear: both; }
+  .pagination .quick {
+    float: left;
+    width: 100px;
+    padding-left: 8px;
+    line-height: 30px;
+    height: 30px;
+    text-align: right; }
+    .pagination .quick input {
+      width: 40px;
+      margin: 0 5px; }
+  .pagination li {
+    float: left;
+    border-radius: 6px;
+    -webkit-user-select: none;
+    user-select: none;
+    min-width: 28px;
+    height: 28px;
+    border: 1px solid #d9d9d9;
+    background-color: #fff;
+    text-align: center;
+    line-height: 28px;
+    margin: 0 5px;
+    cursor: pointer;
+    transition: all .3s ease; }
+    .pagination li:hover {
+      border-color: #2db7f5;
+      color: #2db7f5; }
+  .pagination a {
+    color: #666;
+    padding: 0 6px;
+    display: inline-block; }
+  .pagination .next:before {
+    content: "\E600"; }
+  .pagination .active {
+    background-color: #2db7f5;
+    color: #fff;
+    cursor: default; }
+    .pagination .active:hover {
+      color: #fff; }
+  .pagination .jump {
+    border: none; }
+    .pagination .jump:before {
+      content: "\2022\2022\2022";
+      letter-spacing: 2px; }
+
+.form .row {
+  margin-bottom: 24px; }
+
+.search-8 > div {
+  padding: 8px; }
+
+.padding-08 > div {
+  padding-right: 8px; }
+
+input, textarea {
+  background: #fff none;
+  outline: none;
+  -webkit-appearance: none;
+  /*去除input默认样式*/ }
+
+.form input[type=checkbox] {
+  -webkit-appearance: checkbox; }
+
+.form input[type=radio] {
+  -webkit-appearance: radio; }
+
+.form textarea {
+  position: relative;
+  display: inline-block;
+  vertical-align: bottom;
+  cursor: text;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #666;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  background-color: #fff;
+  background-image: none;
+  width: 100%;
+  min-height: 100px;
+  padding: 4px 7px;
+  box-sizing: border-box; }
+
+.input {
+  padding: 4px 7px;
+  width: 100%;
+  height: 28px;
+  cursor: text;
+  font-size: 14px;
+  line-height: 1;
+  color: #666;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  box-sizing: border-box;
+  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; }
+  .input:hover {
+    border-color: #57c5f7; }
+  .input:focus {
+    box-shadow: 0 0 0 2px rgba(45, 183, 245, 0.2);
+    border-color: #57c5f7; }
+
+.require:before {
+  display: inline-block;
+  margin-right: 4px;
+  content: "*";
+  font-family: SimSun;
+  font-size: 12px;
+  color: #f60; }
+
+.label {
+  text-align: right;
+  height: 28px;
+  line-height: 28px;
+  float: left;
+  box-sizing: border-box;
+  padding-right: 8px; }
+
+@media only screen and (max-width: 640px) {
+  .label {
+    text-align: left; } }
+
+.form .text {
+  height: 28px;
+  line-height: 28px;
+  padding-right: 8px; }
+
+.form .input {
+  width: 100%; }
+
+.split {
+  margin-right: 8px;
+  line-height: 28px;
+  height: 28px;
+  float: left; }
+
+.select {
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  background-color: #fff;
+  margin: 0;
+  outline: 0;
+  height: 28px;
+  line-height: 28px;
+  width: 100%; }
+
+.radio, .checkbox {
+  font-size: 14px;
+  cursor: pointer;
+  height: 28px;
+  line-height: 28px;
+  margin-right: 8px; }
+  .radio span, .checkbox span {
+    margin: 0 8px;
+    display: inline-block; }
+  .radio input, .checkbox input {
+    width: 14px;
+    height: 14px; }
+
+.drop {
+  position: absolute;
+  top: 0px;
+  left: 0; }
+  .drop .drop-ul {
+    outline: none;
+    position: relative;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    text-align: left;
+    background-color: #fff;
+    border-radius: 6px;
+    box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
+    background-clip: padding-box;
+    border: 1px solid #d9d9d9; }
+    .drop .drop-ul li {
+      padding: 7px 15px;
+      transition: background .3s ease; }
+      .drop .drop-ul li:hover {
+        background-color: #eaf8fe; }
+
+.tags-wrap {
+  width: 100%;
+  height: 100%;
+  outline: none; }
+  .tags-wrap::after {
+    content: "";
+    display: block;
+    height: 0;
+    clear: both; }
+
+.tags, .tags-input {
+  position: relative;
+  float: left;
+  color: #fff;
+  line-height: 28px;
+  margin: 0 4px 4px 0;
+  padding: 0 22px 0 10px;
+  border-radius: 6px; }
+  .tags .content, .tags-input .content {
+    line-height: 28px; }
+  .tags .del, .tags-input .del {
+    width: 22px;
+    height: 28px;
+    text-align: center;
+    cursor: pointer;
+    position: absolute;
+    top: -1px;
+    right: 0; }
+
+.tags-input {
+  font-size: 14px;
+  padding: 0;
+  background-color: inherit;
+  border: none;
+  color: inherit;
+  width: 10em; }
+
+.tags-enter, .tags-leave {
+  transform: scale(0.9);
+  opacity: 0; }
+
+.tags-transition {
+  transition: all .3s ease; }
diff --git a/dist/js/web-style.js b/dist/js/web-style.js
index e623867..12bae68 100644
--- a/dist/js/web-style.js
+++ b/dist/js/web-style.js
@@ -1,12 +1,700 @@
-"use strict";!function(e,t){var n='<div class="v-auto" tabindex="-1"\n                 @keydown="keyDown"\n                 @keydown.enter="enter"\n                 @keyup="keyUp"\n                 v-el:box>\n                <div class="v-input">\n                    <input type="text" class="input" :placeholder="placeholder" v-model="val" autocomplete="off"\n                           @focus="show=true">\n                </div>\n                <div class="v-drop" v-show="show">\n                    <ul>\n                        <li v-for="item in source"\n                            :class="{active: $index == select}"\n                            @click="click(item)"\n                            @mouseenter="select = $index"\n                            @mouseleave="select = -1"\n                        >{{item.title}}\n                        </li>\n                    </ul>\n                </div>\n            </div>',o=e.extend({template:n,props:{val:{coerce:function(e){return e}},max:{coerce:function(e){return e?parseInt(e):4}},placeholder:{coerce:function(e){return e?e:""}}},data:function(){return{show:!1,source:[],flag:null}},ready:function(){this.$els.box.addEventListener("click",function(e){e.stopPropagation()});var e=this;document.body.addEventListener("click",function(t){e.show=!1})},methods:{keyDown:function(e){var t=e.keyCode;if(38==t||40==t){var n=this.select,o=this.max;return 40==t&&(this.select=n==o-1?-1:n+1),38==t&&(this.select=n==-1?o-1:n-1),e.stopPropagation(),e.preventDefault(),!1}},keyUp:function(e){var t=e.keyCode;if(38!=t&&40!=t)return 8==t&&""==this.val?(this.select=-1,this.show=!1,void(this.source=[])):void this.search()},enter:function(){if(this.select!=-1){var e=this;this.source.forEach(function(t,n){n==e.select&&(e.val=t.title)}),e.show=!1,e.select=-1}},click:function(e){this.select=-1,this.show=!1,this.val=e.title},search:function(){}}});t.autoComplete=o}(Vue,function(){return window.components=window.components?window.components:{},window.components}());
-"use strict";!function(t,e){var i='\n  <div class="v-carousel-wrap">\n    <div class="v-carousel-content" :style="{width: source.length + \'00%\', height: contentHeight, left: -100 * activeIndex + \'%\'}" >\n      <div class="v-carousel-one" :style="{backgroundImage: \'url(\' + item + \')\', width: 100 / ( source.length ) + \'%\' }" v-for="item in source"></div>\n    </div>\n    <ul class="v-carousel-dots" :style="{height: ctrlHeight}">\n      <li v-for="item in source" @click="toTarget($index)" :class="$index == activeIndex ? \'active\' : \'\'">&bull;</li>\n    </ul>\n  </div>',n=t.extend({template:i,props:{source:{type:Array,"default":[]},contentHeight:{type:String,"default":"100%"},ctrlHeight:{type:String,"default":"0"},delayTime:{type:Number,"default":3e3}},data:function(){return"0%"!=this.ctrlHeight&&"0px"!=this.ctrlHeight&&"0em"!=this.ctrlHeight||(this.ctrlHeight=0),this.delayTime>0&&this.autoPlay(),{activeIndex:0,timer:""}},methods:{toTarget:function(t){this.activeIndex!=t&&(clearInterval(this.timer),this.activeIndex=t,this.move(this.activeIndex),this.autoPlay())},autoPlay:function(){this.timer=setInterval(function(){console.log(Date.now()),this.activeIndex++,this.move(this.activeIndex)}.bind(this),this.delayTime)},move:function(t){this.activeIndex>=this.source.length&&(this.activeIndex=0)}}});components.carousel=n}(Vue,function(){return window.components=window.components?window.components:{},window.components}());
-"use strict";!function(n,t){var o='<div class="modal-mask" v-show="show" transition="modal">\n          <div class="modal-confirm">\n            <h2 class="confirm-header">\n                <i class="iconfont icon-questioncircle"></i> {{ title }}\n            </h2>\n            <div class="confirm-content">\n                {{ content }}\n            </div>\n            <div class="confirm-btns">\n                <button class="btn" @click="op(1)">取 消</button>\n                <button class="btn btn-primary" @click="op(2)">确 定</button>\n            </div>\n        </div>\n    </div>',i=document.createElement("div");i.id="V-confirm",i.innerHTML=o,document.body.appendChild(i);var c=new n({el:"#V-confirm",data:{show:!1,onCancel:!1,onOk:!1,title:"",content:""},methods:{op:function(n){this.show=!1,"1"==n?this.onCancel&&this.onCancel():this.onOk&&this.onOk(),this.onCancel=!1,this.onOk=!1,document.body.style.overflow=""},alert:function(n){this.title=n.title||"提示信息",this.content=n.content||"确认操作",this.onOk=n.onOk||!1,this.onCancel=n.onCancel||!1,this.show=!0,document.body.style.overflow="hidden"}}});t.$confirm=c}(Vue,window);
-"use strict";!function(t,e){function n(t,e){t=parseInt(t),e=parseInt(e);var n,s,i=new Date(t,e-1,1),a=e-1,c=e+1;1==e?(n=""+(t-1)+"-12-",s=""+t+"-2-",a=12):12==e?(n=""+t+"-11-",s=""+(t+1)+"-1-",c=1):(n=""+t+"-"+(e-1)+"-",s=""+t+"-"+(e+1)+"-");var o=42,h=[],l=[],r=[],d=i.getDay()-1;d=d<0?d+7:d;var p,v,u=new Date(t,e-1,0).getDate(),m=new Date(t,e,0).getDate();for(p=0;p<d;p++)v=u-d+p+1,h[p]={month:a,day:v,data:n+v};for(p=0;p<m;p++)v=p+1,l[p]={month:e,day:v,data:""+t+"-"+ +e+"-"+v};var f=o-m-d;for(p=0;p<f;p++)v=p+1,r[p]={month:c,day:v,data:s+v};var w=h.concat(l,r),g=[];for(p=0;p<6;p++)g.push(w.splice(0,7));return g}var s=t.extend({props:["items","cur","sel","month"],data:function(){return{}},template:"<tr>\n                     <td v-for=\"item in items\" v-bind:class=\"{'dp-last': month!= item.month, 'dp-today': cur == item.data, 'dp-select': sel == item.data}\">\n                                <span @click=\"click(item)\">{{ item.day }}</span>\n                            </td>\n                        </tr>",methods:{click:function(t){this.$dispatch("click",t.data)}}}),i=' \n                    <div v-el:dp>\n                      <div class="dp-out">\n                      <input type="text" class="input" placeholder="请选择时间" @focus="show=true" :value="out">\n                        <i class="iconfont icon-calendar"></i>\n                      </div>\n                    <div class="dp" v-show="show" v-el:dp2 transition="slide">\n                    <div class="dp-header1">\n                       <div class="dp-input-wrap" v-if="showtime">\n                            <input class="input" placeholder="请选择日期" :value="outd">\n                        </div>\n                        \n                          <div class="dp-input-wrap" v-if="showtime">\n                            <div class="input-wrap">\n                                <v-time :val="time" v-on:time-change="change" v-ref:time></v-time>\n                            </div>\n                          </div>\n                          \n                        <div class="dp-text" v-if="!showtime">{{out}}</div>  \n                        <i class="iconfont icon-crosscircle" @click="show=false"></i>\n                    </div>\n                    <div class="dp-header2"><a class="dp-h-1" @click="cy(-1)">«</a><a class="dp-h-2" @click="cm(-1)">‹</a>\n                        <span class="dp-ym">{{y}}年 {{m}}月</span>\n                        <a class="dp-h-3" @click="cm(1)">›</a><a class="dp-h-4" @click="cy(1)">»</a></div>\n                    <div class="dp-body">\n                        <table class="dp-table">\n                            <thead>\n                            <tr>\n                                <th><span>一</span></th>\n                                <th><span>二</span></th>\n                                <th><span>三</span></th>\n                                <th><span>四</span></th>\n                                <th><span>五</span></th>\n                                <th><span>六</span></th>\n                                <th><span>日</span></th>\n                            </tr>\n                            </thead>\n                            <tbody>\n                                  <tr is="v-line" v-for="cell in lineDate" :items="cell" :month="m" :cur="cur" :sel="sel"></tr>   \n                            </tbody>\n                        </table>\n\n                    </div>\n                    <div class="dp-footer"><a>今天</a>  <span class="btn btn-primary btn-sm" @click="show=false">确 定</span></div>\n                </div>\n                </div>\n',a=t.extend({template:i,props:{val:{coerce:function(t){return t}},"short":{coerce:function(t){return!!t}},showtime:{coerce:function(t){return!!t}}},data:function(){var t=new Date,e="";if(this.val){var s=this["short"]?1e3*this.val:this.val;t=new Date(parseInt(s));var i=t.getFullYear()+"-"+(t.getMonth()+1)+"-"+t.getDate();e=t.getHours()+":"+t.getMinutes()+":"+t.getSeconds()}var a=new Date,c=""+a.getFullYear()+"-"+(a.getMonth()+1)+"-"+a.getDate(),o=t.getFullYear(),h=t.getMonth()+1,l=n(o,h);return{cur:c,sel:i,y:o,m:h,lineDate:l,time:e,show:!1}},computed:{out:function(){if(!this.val)return"";var t=this["short"]?new Date(1e3*this.val):new Date(parseInt(this.val)),e=t.getFullYear()+"-"+("0"+(t.getMonth()+1)).slice(-2)+"-"+("0"+t.getDate()).slice(-2),n=("0"+t.getHours()).slice(-2)+":"+("0"+t.getMinutes()).slice(-2)+":"+("0"+t.getSeconds()).slice(-2);return this.showtime?e+" "+n:e},outd:function(){if(!this.val)return"";var t=this["short"]?new Date(1e3*this.val):new Date(parseInt(this.val)),e=t.getFullYear()+"-"+("0"+(t.getMonth()+1)).slice(-2)+"-"+("0"+t.getDate()).slice(-2);return e}},ready:function(){var t=this.$els.dp,e=this.$els.dp2,n=this.$refs.time;e.addEventListener("click",function(t){console.log(111),n&&(n.show=!1),t.stopPropagation()}),t.addEventListener("click",function(t){t.stopPropagation()}),document.body.addEventListener("click",function(){this.show=!1}.bind(this))},methods:{cm:function(t){t==-1?1==this.m?this.init(parseInt(this.y)-1,12):this.init(this.y,parseInt(this.m)-1):12==this.m?this.init(parseInt(this.y)+1,1):this.init(this.y,parseInt(this.m)+1)},cy:function(t){var e=t==-1?parseInt(this.y)-1:parseInt(this.y)+1;this.init(e,this.m)},init:function(t,e){this.lineDate=n(t,e),this.y=t,this.m=e},change:function(t){var e=t.split(":");if(this.sel){for(var n=this.sel.split("-"),s=0;s<e.length;s++)e[s]=parseInt(e[s]),n[s]=parseInt(n[s]);this.val=new Date(n[0],n[1]-1,n[2],e[0],e[1],e[2]).getTime(),this["short"]&&(this.val=this.val/1e3)}}},events:{click:function(t){this.sel=t;var e=t.split("-"),n=e[1],s=e[0];if(this.showtime){var i=this["short"]?new Date(1e3*this.val):new Date(parseInt(this.val));this.val=new Date(e[0],e[1]-1,e[2],i.getHours(),i.getMinutes(),i.getSeconds()).getTime()}else this.val=new Date(e[0],e[1]-1,e[2]).getTime();this["short"]&&(this.val=this.val/1e3),n!=this.m&&this.init(s,n)}},components:{"v-line":s,"v-time":e.timePicker}});e.datePicker=a}(Vue,function(){return window.components=window.components?window.components:{},window.components}());
-"use strict";!function(n,e){var o='<div class="list" v-for="item in source">\n        <div class="menu-line" @click="toggle(item)" :class="{\'active-line\': item.open}">\n          <i class="iconfont{{item.icon? \' icon-\' + item.icon: \'\' }}"></i> <span class="menu-name">{{ item.name }}</span><b class="iconfont">&#xe600;</b>\n        </div>\n\n        <ul :style="{ height: item.open? 34*item.routes.length + \'px\': \'0px\'}">\n            <li v-for="route in item.routes" :class="{active: route.url == curPath}"><a :href="route.url">{{ route.name }}</a></li>\n        </ul>\n\n    </div>',t=n.extend({props:{source:{coerce:function(e){var o=location.href.replace(location.origin,"");return e.forEach(function(e){e.routes.some(function(n){return n.url==o})?n.set(e,"open",!0):n.set(e,"open",!1)}),e}}},data:function(){return{curPath:location.href.replace(location.origin,"")}},template:o,methods:{toggle:function(n){return n.open?n.open=!1:(this.source.forEach(function(n){n.open=!1}),void(n.open=!0))}}});components.menu=t}(Vue,function(){return window.components=window.components?window.components:{},window.components}());
-"use strict";!function(e,s){var n='<div class="message" :class="{\'message-move\': show}">\n        <div class="message-content">\n            <i class="iconfont" :class="{\'icon-checkcircle\': type == 1, \'icon-crosscircle\': type == 2}"></i>\n            <span>{{ content }}</span>\n        </div>\n    </div>',t=document.createElement("div");t.id="V-message",t.innerHTML=n,document.body.appendChild(t);var i=new e({el:"#V-message",data:{show:!1,type:"1",content:"",flag:""},methods:{success:function(e){this.appear(e,1)},error:function(e){this.appear(e,2)},appear:function(e,s){this.content=e,this.type=s,this.show=!0,clearTimeout(this.flag),this.flag=setTimeout(function(){this.show=!1}.bind(this),2e3)}}});s.$message=i}(Vue,window);
-"use strict";!function(n,o){var t='<div class="modal-mask" @click="show=false" v-show="show" transition="modal">\n        <div class="modal-box">\n            <div class="modal-header">\n                <h3>{{title}}</h3>\n                <i class="iconfont icon-cross" @click="show=false"></i>\n            </div>\n            <div class="modal-body">\n\n                <slot></slot>\n\n\n            </div>\n            <div class="modal-footer">\n                <button class="btn">取 消</button>\n                <button class="btn btn-primary">确 定</button>\n            </div>\n        </div>\n    </div>',s=n.extend({template:t,props:{title:{"default":"标题"}},data:function(){return{show:!1}}});o.modal=s}(Vue,function(){return window.components=window.components?window.components:{},window.components}());
-"use strict";!function(i,n){var l='\n    <ul class="pagination">\n        <li v-show="cur!=1" @click="page(cur-1)">«</li>\n        <li v-for="item in tags" :class="{active: cur == item}" @click="page(item)">{{item}}</li>\n        <li class="jump" v-show="all>10"></li>\n        <li v-show="all>10" @click="page(all)"><a>{{all}}</a></li>\n        <li v-show="cur!=all" @click="page(cur+1)">»</li>\n        <div class="quick" v-if="quick" @keydown.enter="page(num)"> 跳至 <input class="input" v-model="num"> 页</div>\n    </ul>',t=i.extend({template:l,props:{cur:null,all:null,quick:{"default":!0}},data:function(){return{num:""}},computed:{tags:function(){var i=1,n=this.all,l=[];for(this.all>10&&(this.cur>5&&this.cur<this.all-4?(i=this.cur-5,n=this.cur+4):this.cur<=5?(i=1,n=10):(n=this.all,i=this.all-9));i<=n;)l.push(i),i++;return l}},methods:{page:function(i){isNaN(parseInt(i))||i!=this.cur&&(this.num="",this.$dispatch("page-change",i))}}});n.pagination=t}(Vue,function(){return window.components=window.components?window.components:{},window.components}());
-"use strict";!function(t,o){var e="\n  <div class=\"v-popover-tag\" @click.stop=\"pop($event)\">\n    <slot></slot>\n  </div>\n  <div class=\"v-popover-wrap\" :style=\"{left: x + 'px', top: y + 'px', visibility: show ? 'visible' : 'hidden'}\" v-el:pop>\n    <div class=\"v-popover-box\">\n      <div class=\"v-popover-title\">{{title}}</div>\n      <div class=\"v-popover-content\">{{content}}</div>\n      <div :class=\"['v-popover-arrow', placement == 'top' ? 'v-popover-arrow-top' : 'v-popover-arrow-bottom']\" :style=\"{left: arrowLeft + 'px'}\"></div>\n    </div>\n  </div>",p=t.extend({template:e,props:{title:{type:String,"default":"标题"},content:{type:String,"default":"内容"},placement:{type:String,"default":"top"}},data:function(){return{show:!1,arrowLeft:0,x:0,y:0}},methods:{pop:function(t){if(this.show)return void(this.show=!1);var o=t.target;this.arrowLeft=o.offsetWidth/2,this.x=o.offsetLeft,"top"==this.placement?this.y=o.offsetTop-this.$els.pop.offsetHeight-3:this.y=o.offsetTop+o.offsetHeight+3,this.show=!0}}});components.popover=p}(Vue,function(){return window.components=window.components?window.components:{},window.components}());
-"use strict";!function(t,n){var i='\n  <div class="v-tabs-nav-wrap" v-el:tabs>\n    <div class="v-tabs-nav clear" :style="{width: navWidth + \'px\'}">\n      <div class="v-tabs-nav-item" v-for="item in source" @click="switch($index)">{{item.title}}</div>\n    </div>\n  </div>\n  <div class="v-tabs-wrap">\n    <div class="v-tabs-content" :style="{width: source.length * 100 + \'%\', left: - active + \'00%\'}">\n      <slot></slot>\n    </div>\n  </div>',e=t.extend({template:i,compute:{},props:{source:{type:Array,"default":[]}},data:function(){return{active:0,navWidth:"auto"}},methods:{"switch":function(t){this.active!=t&&(this.active=t)}},ready:function(){var t=this.$els.tabs.querySelectorAll(".v-tabs-nav-item"),n=0;t.forEach(function(t){n+=Math.ceil(getComputedStyle(t,null).width.slice(0,-2))+64}),this.navWidth=n-24}});n.tabs=e}(Vue,function(){return window.components=window.components?window.components:{},window.components}());
-"use strict";!function(t,e){var s='\n  <div class="input tags-wrap" @paste="pasteText($event)">\n    <div class="tags" transition="tags" :style="{backgroundColor: bgc[item.bgc_no]}" v-for="item in disSource">\n      <span class="content">{{item.text}}</span><span class="del" @click="delTag($index, false)">&times;</span>\n    </div>\n    <input class="tags-input" type="text" placeholder="标签，按 enter 创建" v-model="text" @keyup.enter="addTag(text)" @keydown.delete="delTag(source.length - 1, true)">\n  </div>',a=t.extend({template:s,props:{source:{type:Array,"default":[]}},data:function(){var t=[];return this.source.forEach(function(e){var s={text:e,bgc_no:Math.ceil(10*Math.random())-1};t.push(s)}),{text:"",bgc:["#e961b4","#ed664b","#7b6ac7","#56abd1","#f7af4c","#fe5467","#52c7bd","#a479b7","#cb81ce","#5eabc5"],disSource:t}},methods:{pasteText:function(t){t.preventDefault();var e=(t.clipboardData||window.clipboardData).getData("text");this.addTag(e)},addTag:function(t){if(""!=t.trim()){var e=this.source.length;this.source.$set(e,t),this.disSource.$set(e,{text:t,bgc_no:Math.ceil(10*Math.random())-1}),this.text=""}},delTag:function(t,e){e?t>=0&&""==this.text&&(this.source.splice(t,1),this.disSource.splice(t,1)):(this.source.splice(t,1),this.disSource.splice(t,1))}}});e.tags=a}(Vue,function(){return window.components=window.components?window.components:{},window.components}());
-"use strict";!function(s,i){var t='\n                    <div>\n\n                      <div class="tp-out">\n                            <input type="text" class="input" placeholder="请选择时间" @focus="show=true" :value="out">\n                      </div>\n\n                      <div class="tp" v-show="show" v-el:tp transition="slide">\n                        <div class="tp-header">\n                            <input placeholder="请选择时间" :value="out">\n                            <i class="iconfont icon-crosscircle" @click="show=false"></i>\n                        </div>\n                        <div class="tp-body">\n                            <ul v-el:h>\n                                <li v-for="n in h" :class="{\'tp-active\': n == sh}" @click="click(n, \'h\')">{{n}}</li>\n                            </ul>\n                            <div class="tp-line"></div>\n                            <ul v-el:m>\n                                <li v-for="n in m" :class="{\'tp-active\': n == sm}" @click="click(n, \'m\')">{{n}}</li>\n                            </ul>\n                            <div class="tp-line"></div>\n                            <ul v-el:s>\n                               <li v-for="n in s" :class="{\'tp-active\': n == ss}" @click="click(n, \'s\')">{{n}}</li>\n                            </ul>\n                        </div>\n                      </div>\n\n                    </div>\n\n                ',n=s.extend({template:t,props:{val:{coerce:function(s){if(!s)return"";if(s.indexOf(":")!=-1){var i=s.split(":");s=parseInt(i[0])+":"+parseInt(i[1])+":"+parseInt(i[2])}return s}}},data:function(){var s=this.val.split(":");return this.val||(s=[-1,-1,-1]),{sh:s[0],sm:s[1],ss:s[2],show:!1,op:!1}},ready:function(){this.$els.h.scrollTop=24*this.sh,this.$els.m.scrollTop=24*this.sm,this.$els.s.scrollTop=24*this.ss,this.$els.tp.addEventListener("click",function(s){return s.stopPropagation(),!1}),document.body.addEventListener("click",function(){this.show=!1}.bind(this))},computed:{h:function(){return 24},m:function(){return 60},s:function(){return 60},out:function(){if(!this.val)return"";var s=this.val.split(":");return("0"+s[0]).slice(-2)+":"+("0"+s[1]).slice(-2)+":"+("0"+s[2]).slice(-2)}},watch:{val:function(s){if(this.op)this.$dispatch("time-change",this.val);else if(s){var i=s.split(":");this.sh=parseInt(i[0]),this.sm=parseInt(i[1]),this.ss=parseInt(i[2]),this.$els.h.scrollTop=24*this.sh,this.$els.m.scrollTop=24*this.sm,this.$els.s.scrollTop=24*this.ss}else this.clear();this.op=!1}},methods:{click:function(s,i){this.op=!0,this["s"+i]=s,this.scroll(s,i),this.change()},scroll:function(s,i){function t(){var i=24*s-n.scrollTop;i>0?(n.scrollTop+=12,requestAnimationFrame(t)):i<-12?(n.scrollTop-=12,requestAnimationFrame(t)):n.scrollTop+=i}var n=this.$els[i];requestAnimationFrame(t)},change:function(){this.sh==-1&&(this.sh=0),this.sm==-1&&(this.sm=0),this.ss==-1&&(this.ss=0);var s=("0"+this.sh).slice(-2)+":"+("0"+this.sm).slice(-2)+":"+("0"+this.ss).slice(-2);this.val=s},clear:function(){this.sh=-1,this.sm=-1,this.ss=-1,this.op=!1,this.$els.h.scrollTop=0,this.$els.m.scrollTop=0,this.$els.s.scrollTop=0,this.val=""}}});return i.timePicker=n,n}(Vue,function(){return window.components=window.components?window.components:{},window.components}());
\ No newline at end of file
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	var _TimePicker = __webpack_require__(1);
+
+	var _TimePicker2 = _interopRequireDefault(_TimePicker);
+
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+	__webpack_require__(8);
+	// require('../less/a.css')
+
+	// import hello from './Hello.vue'
+	var WebStyle = {
+	  timePicker: _TimePicker2.default
+	};
+	if (typeof window != 'undefined') window.WebStyle = WebStyle;
+
+	module.exports = WebStyle;
+
+/***/ },
+/* 1 */
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_script__, __vue_template__
+	__webpack_require__(2)
+	__vue_script__ = __webpack_require__(6)
+	if (__vue_script__ &&
+	    __vue_script__.__esModule &&
+	    Object.keys(__vue_script__).length > 1) {
+	  console.warn("[vue-loader] src/components/TimePicker.vue: named exports in *.vue files are ignored.")}
+	__vue_template__ = __webpack_require__(7)
+	module.exports = __vue_script__ || {}
+	if (module.exports.__esModule) module.exports = module.exports.default
+	if (__vue_template__) {
+	(typeof module.exports === "function" ? (module.exports.options || (module.exports.options = {})) : module.exports).template = __vue_template__
+	}
+	if (false) {(function () {  module.hot.accept()
+	  var hotAPI = require("vue-hot-reload-api")
+	  hotAPI.install(require("vue"), false)
+	  if (!hotAPI.compatible) return
+	  var id = "_v-2565e8b8/TimePicker.vue"
+	  if (!module.hot.data) {
+	    hotAPI.createRecord(id, module.exports)
+	  } else {
+	    hotAPI.update(id, module.exports, __vue_template__)
+	  }
+	})()}
+
+/***/ },
+/* 2 */
+/***/ function(module, exports, __webpack_require__) {
+
+	// style-loader: Adds some css to the DOM by adding a <style> tag
+
+	// load the styles
+	var content = __webpack_require__(3);
+	if(typeof content === 'string') content = [[module.id, content, '']];
+	// add the styles to the DOM
+	var update = __webpack_require__(5)(content, {});
+	if(content.locals) module.exports = content.locals;
+	// Hot Module Replacement
+	if(false) {
+		// When the styles change, update the <style> tags
+		if(!content.locals) {
+			module.hot.accept("!!./../../node_modules/.npminstall/css-loader/0.23.1/css-loader/index.js!./../../node_modules/.npminstall/vue-loader/8.5.3/vue-loader/lib/style-rewriter.js!./../../node_modules/.npminstall/vue-loader/8.5.3/vue-loader/lib/selector.js?type=style&index=0!./TimePicker.vue", function() {
+				var newContent = require("!!./../../node_modules/.npminstall/css-loader/0.23.1/css-loader/index.js!./../../node_modules/.npminstall/vue-loader/8.5.3/vue-loader/lib/style-rewriter.js!./../../node_modules/.npminstall/vue-loader/8.5.3/vue-loader/lib/selector.js?type=style&index=0!./TimePicker.vue");
+				if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
+				update(newContent);
+			});
+		}
+		// When the module is disposed, remove the <style> tags
+		module.hot.dispose(function() { update(); });
+	}
+
+/***/ },
+/* 3 */
+/***/ function(module, exports, __webpack_require__) {
+
+	exports = module.exports = __webpack_require__(4)();
+	// imports
+
+
+	// module
+	exports.push([module.id, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.tp{\n    width: 168px;\n    height: 178px;\n    border-radius: 6px;\n    box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);\n    border: 1px solid #ccc;\n    line-height: 1.5;\n    background: #fff;\n    position: absolute;\n    top: -2px;\n    left: -2px;\n    z-index: 102;\n}\n.tp-header{\n    padding: 6px;\n    position: relative;\n    border-bottom: 1px solid #e9e9e9;\ninput{\n    margin: 0;\n    padding: 0;\n    border: 0;\n    width: 100%;\n    cursor: auto;\n    line-height: 1.5;\n    outline: 0;\n    color: #666;\n&::selection {\n     background: #4BB8FF;\n     color: #fff;\n }\n}\ni{\n    position: absolute;\n    right: 10px;\n    top: 6px;\n    font-size: 12px;\n    color: #ccc;\n    -webkit-transition: color ease .3s;\n    transition: color ease .3s;\n    cursor: pointer;\n&:hover{\n     color: #999;\n }\n}\n}\n.tp-body{\nul{\n    float: left;\n    height: 144px;\n    width: 55px;\n    overflow-y: scroll;\n\n.tp-active{\n    background: #f7f7f7;\n    font-weight: 700;\n\n&:hover{\n     background: #f7f7f7;\n }\n}\nli{\n    height: 24px;\n    line-height: 24px;\n    text-align: center;\n    -webkit-transition: background 0.3s ease;\n    transition: background 0.3s ease;\n    cursor: pointer;\n&:hover{\n     background: #eaf8fe;\n }\n}\n&:after{\n     content: '';\n     display: block;\n     height:120px;\n\n }\n}\n.tp-line{\n    float: left;\n    width: 1px;\n    height: 144px;\n    background: #e9e9e9\n}\n}\n\n", ""]);
+
+	// exports
+
+
+/***/ },
+/* 4 */
+/***/ function(module, exports) {
+
+	/*
+		MIT License http://www.opensource.org/licenses/mit-license.php
+		Author Tobias Koppers @sokra
+	*/
+	// css base code, injected by the css-loader
+	module.exports = function() {
+		var list = [];
+
+		// return the list of modules as css string
+		list.toString = function toString() {
+			var result = [];
+			for(var i = 0; i < this.length; i++) {
+				var item = this[i];
+				if(item[2]) {
+					result.push("@media " + item[2] + "{" + item[1] + "}");
+				} else {
+					result.push(item[1]);
+				}
+			}
+			return result.join("");
+		};
+
+		// import a list of modules into the list
+		list.i = function(modules, mediaQuery) {
+			if(typeof modules === "string")
+				modules = [[null, modules, ""]];
+			var alreadyImportedModules = {};
+			for(var i = 0; i < this.length; i++) {
+				var id = this[i][0];
+				if(typeof id === "number")
+					alreadyImportedModules[id] = true;
+			}
+			for(i = 0; i < modules.length; i++) {
+				var item = modules[i];
+				// skip already imported module
+				// this implementation is not 100% perfect for weird media query combinations
+				//  when a module is imported multiple times with different media queries.
+				//  I hope this will never occur (Hey this way we have smaller bundles)
+				if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
+					if(mediaQuery && !item[2]) {
+						item[2] = mediaQuery;
+					} else if(mediaQuery) {
+						item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
+					}
+					list.push(item);
+				}
+			}
+		};
+		return list;
+	};
+
+
+/***/ },
+/* 5 */
+/***/ function(module, exports, __webpack_require__) {
+
+	/*
+		MIT License http://www.opensource.org/licenses/mit-license.php
+		Author Tobias Koppers @sokra
+	*/
+	var stylesInDom = {},
+		memoize = function(fn) {
+			var memo;
+			return function () {
+				if (typeof memo === "undefined") memo = fn.apply(this, arguments);
+				return memo;
+			};
+		},
+		isOldIE = memoize(function() {
+			return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
+		}),
+		getHeadElement = memoize(function () {
+			return document.head || document.getElementsByTagName("head")[0];
+		}),
+		singletonElement = null,
+		singletonCounter = 0,
+		styleElementsInsertedAtTop = [];
+
+	module.exports = function(list, options) {
+		if(false) {
+			if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
+		}
+
+		options = options || {};
+		// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
+		// tags it will allow on a page
+		if (typeof options.singleton === "undefined") options.singleton = isOldIE();
+
+		// By default, add <style> tags to the bottom of <head>.
+		if (typeof options.insertAt === "undefined") options.insertAt = "bottom";
+
+		var styles = listToStyles(list);
+		addStylesToDom(styles, options);
+
+		return function update(newList) {
+			var mayRemove = [];
+			for(var i = 0; i < styles.length; i++) {
+				var item = styles[i];
+				var domStyle = stylesInDom[item.id];
+				domStyle.refs--;
+				mayRemove.push(domStyle);
+			}
+			if(newList) {
+				var newStyles = listToStyles(newList);
+				addStylesToDom(newStyles, options);
+			}
+			for(var i = 0; i < mayRemove.length; i++) {
+				var domStyle = mayRemove[i];
+				if(domStyle.refs === 0) {
+					for(var j = 0; j < domStyle.parts.length; j++)
+						domStyle.parts[j]();
+					delete stylesInDom[domStyle.id];
+				}
+			}
+		};
+	}
+
+	function addStylesToDom(styles, options) {
+		for(var i = 0; i < styles.length; i++) {
+			var item = styles[i];
+			var domStyle = stylesInDom[item.id];
+			if(domStyle) {
+				domStyle.refs++;
+				for(var j = 0; j < domStyle.parts.length; j++) {
+					domStyle.parts[j](item.parts[j]);
+				}
+				for(; j < item.parts.length; j++) {
+					domStyle.parts.push(addStyle(item.parts[j], options));
+				}
+			} else {
+				var parts = [];
+				for(var j = 0; j < item.parts.length; j++) {
+					parts.push(addStyle(item.parts[j], options));
+				}
+				stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};
+			}
+		}
+	}
+
+	function listToStyles(list) {
+		var styles = [];
+		var newStyles = {};
+		for(var i = 0; i < list.length; i++) {
+			var item = list[i];
+			var id = item[0];
+			var css = item[1];
+			var media = item[2];
+			var sourceMap = item[3];
+			var part = {css: css, media: media, sourceMap: sourceMap};
+			if(!newStyles[id])
+				styles.push(newStyles[id] = {id: id, parts: [part]});
+			else
+				newStyles[id].parts.push(part);
+		}
+		return styles;
+	}
+
+	function insertStyleElement(options, styleElement) {
+		var head = getHeadElement();
+		var lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];
+		if (options.insertAt === "top") {
+			if(!lastStyleElementInsertedAtTop) {
+				head.insertBefore(styleElement, head.firstChild);
+			} else if(lastStyleElementInsertedAtTop.nextSibling) {
+				head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling);
+			} else {
+				head.appendChild(styleElement);
+			}
+			styleElementsInsertedAtTop.push(styleElement);
+		} else if (options.insertAt === "bottom") {
+			head.appendChild(styleElement);
+		} else {
+			throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
+		}
+	}
+
+	function removeStyleElement(styleElement) {
+		styleElement.parentNode.removeChild(styleElement);
+		var idx = styleElementsInsertedAtTop.indexOf(styleElement);
+		if(idx >= 0) {
+			styleElementsInsertedAtTop.splice(idx, 1);
+		}
+	}
+
+	function createStyleElement(options) {
+		var styleElement = document.createElement("style");
+		styleElement.type = "text/css";
+		insertStyleElement(options, styleElement);
+		return styleElement;
+	}
+
+	function addStyle(obj, options) {
+		var styleElement, update, remove;
+
+		if (options.singleton) {
+			var styleIndex = singletonCounter++;
+			styleElement = singletonElement || (singletonElement = createStyleElement(options));
+			update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);
+			remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);
+		} else {
+			styleElement = createStyleElement(options);
+			update = applyToTag.bind(null, styleElement);
+			remove = function() {
+				removeStyleElement(styleElement);
+			};
+		}
+
+		update(obj);
+
+		return function updateStyle(newObj) {
+			if(newObj) {
+				if(newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap)
+					return;
+				update(obj = newObj);
+			} else {
+				remove();
+			}
+		};
+	}
+
+	var replaceText = (function () {
+		var textStore = [];
+
+		return function (index, replacement) {
+			textStore[index] = replacement;
+			return textStore.filter(Boolean).join('\n');
+		};
+	})();
+
+	function applyToSingletonTag(styleElement, index, remove, obj) {
+		var css = remove ? "" : obj.css;
+
+		if (styleElement.styleSheet) {
+			styleElement.styleSheet.cssText = replaceText(index, css);
+		} else {
+			var cssNode = document.createTextNode(css);
+			var childNodes = styleElement.childNodes;
+			if (childNodes[index]) styleElement.removeChild(childNodes[index]);
+			if (childNodes.length) {
+				styleElement.insertBefore(cssNode, childNodes[index]);
+			} else {
+				styleElement.appendChild(cssNode);
+			}
+		}
+	}
+
+	function applyToTag(styleElement, obj) {
+		var css = obj.css;
+		var media = obj.media;
+		var sourceMap = obj.sourceMap;
+
+		if (media) {
+			styleElement.setAttribute("media", media);
+		}
+
+		if (sourceMap) {
+			// https://developer.chrome.com/devtools/docs/javascript-debugging
+			// this makes source maps inside style tags work properly in Chrome
+			css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */';
+			// http://stackoverflow.com/a/26603875
+			css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
+		}
+
+		if (styleElement.styleSheet) {
+			styleElement.styleSheet.cssText = css;
+		} else {
+			while(styleElement.firstChild) {
+				styleElement.removeChild(styleElement.firstChild);
+			}
+			styleElement.appendChild(document.createTextNode(css));
+		}
+	}
+
+
+/***/ },
+/* 6 */
+/***/ function(module, exports) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	// <template lang="html">
+	//     <div>
+	//         <div class="tp-out">
+	//             <input type="text" class="input" placeholder="请选择时间" @focus="show=true" :value="out">
+	//         </div>
+	//
+	//         <div class="tp" v-show="show" v-el:tp transition="slide">
+	//             <div class="tp-header">
+	//                 <input placeholder="请选择时间" :value="out">
+	//                 <i class="iconfont icon-crosscircle" @click="show=false"></i>
+	//             </div>
+	//             <div class="tp-body">
+	//                 <ul v-el:h>
+	//                     <li v-for="n in h" :class="{'tp-active': n == sh}" @click="click(n, 'h')">{{n}}</li>
+	//                 </ul>
+	//                 <div class="tp-line"></div>
+	//                 <ul v-el:m>
+	//                     <li v-for="n in m" :class="{'tp-active': n == sm}" @click="click(n, 'm')">{{n}}</li>
+	//                 </ul>
+	//                 <div class="tp-line"></div>
+	//                 <ul v-el:s>
+	//                     <li v-for="n in s" :class="{'tp-active': n == ss}" @click="click(n, 's')">{{n}}</li>
+	//                 </ul>
+	//             </div>
+	//         </div>
+	//
+	//     </div>
+	// </template>
+	//
+	//
+	// <script>
+	exports.default = {
+	    props: {
+	        val: {
+	            coerce: function coerce(val) {
+
+	                if (!val) return '';
+
+	                if (val.indexOf(':') != -1) {
+
+	                    // val = ('0' + n.getHours()).slice(-2) + ':' + ('0' + n.getMinutes()).slice(-2) + ':' + ('0' + n.getSeconds()).slice(-2)
+	                    var sp = val.split(':');
+	                    val = parseInt(sp[0]) + ':' + parseInt(sp[1]) + ':' + parseInt(sp[2]);
+	                }
+
+	                return val;
+	            }
+	        }
+	    },
+	    data: function data() {
+
+	        var sp = this.val.split(':');
+
+	        if (!this.val) sp = [-1, -1, -1];
+
+	        return {
+	            sh: sp[0],
+	            sm: sp[1],
+	            ss: sp[2],
+	            show: false,
+	            op: false
+	        };
+	    },
+	    ready: function ready() {
+	        this.$els.h.scrollTop = this.sh * 24;
+	        this.$els.m.scrollTop = this.sm * 24;
+	        this.$els.s.scrollTop = this.ss * 24;
+
+	        this.$els.tp.addEventListener('click', function (e) {
+	            e.stopPropagation();
+	            return false;
+	        });
+
+	        document.body.addEventListener('click', function () {
+	            this.show = false;
+	            // if(this.show){
+	            //   this.show = false
+	            // }
+	        }.bind(this));
+	    },
+
+	    computed: {
+	        h: function h() {
+	            return 24;
+	        },
+	        m: function m() {
+	            return 60;
+	        },
+	        s: function s() {
+	            return 60;
+	        },
+	        out: function out() {
+	            if (!this.val) return '';
+	            var sp = this.val.split(':');
+
+	            return ('0' + sp[0]).slice(-2) + ':' + ('0' + sp[1]).slice(-2) + ':' + ('0' + sp[2]).slice(-2);
+	        }
+	    },
+	    watch: {
+	        val: function val(_val) {
+	            if (this.op) {
+
+	                this.$dispatch('time-change', this.val);
+	            } else {
+	                //外部赋值
+	                if (_val) {
+	                    var sp = _val.split(':');
+	                    this.sh = parseInt(sp[0]);
+	                    this.sm = parseInt(sp[1]);
+	                    this.ss = parseInt(sp[2]);
+	                    this.$els.h.scrollTop = this.sh * 24;
+	                    this.$els.m.scrollTop = this.sm * 24;
+	                    this.$els.s.scrollTop = this.ss * 24;
+	                } else {
+	                    this.clear();
+	                }
+	            }
+
+	            this.op = false;
+	        }
+	    },
+	    methods: {
+	        click: function click(num, type) {
+	            this.op = true;
+	            this['s' + type] = num;
+	            this.scroll(num, type);
+	            this.change();
+	        },
+	        scroll: function scroll(num, type) {
+
+	            var dom = this.$els[type];
+
+	            requestAnimationFrame(step);
+	            function step() {
+	                var pg = num * 24 - dom.scrollTop;
+	                if (pg > 0) {
+	                    dom.scrollTop += 12;
+	                    requestAnimationFrame(step);
+	                } else if (pg < -12) {
+	                    dom.scrollTop -= 12;
+	                    requestAnimationFrame(step);
+	                } else {
+	                    dom.scrollTop += pg;
+	                }
+	            }
+	        },
+	        change: function change() {
+	            if (this.sh == -1) {
+	                this.sh = 0;
+	            }
+	            if (this.sm == -1) {
+	                this.sm = 0;
+	            }
+	            if (this.ss == -1) {
+	                this.ss = 0;
+	            }
+
+	            var val = ('0' + this.sh).slice(-2) + ':' + ('0' + this.sm).slice(-2) + ':' + ('0' + this.ss).slice(-2);
+
+	            this.val = val;
+	        },
+	        clear: function clear() {
+	            this.sh = -1;
+	            this.sm = -1;
+	            this.ss = -1;
+	            this.op = false;
+	            this.$els.h.scrollTop = 0;
+	            this.$els.m.scrollTop = 0;
+	            this.$els.s.scrollTop = 0;
+	            this.val = '';
+	        }
+	    }
+	};
+
+	// </script>
+	//
+	//
+	// <style style="scss">
+	//
+	//     .tp{
+	//         width: 168px;
+	//         height: 178px;
+	//         border-radius: 6px;
+	//         box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
+	//         border: 1px solid #ccc;
+	//         line-height: 1.5;
+	//         background: #fff;
+	//         position: absolute;
+	//         top: -2px;
+	//         left: -2px;
+	//         z-index: 102;
+	//     }
+	//     .tp-header{
+	//         padding: 6px;
+	//         position: relative;
+	//         border-bottom: 1px solid #e9e9e9;
+	//     input{
+	//         margin: 0;
+	//         padding: 0;
+	//         border: 0;
+	//         width: 100%;
+	//         cursor: auto;
+	//         line-height: 1.5;
+	//         outline: 0;
+	//         color: #666;
+	//     &::selection {
+	//          background: #4BB8FF;
+	//          color: #fff;
+	//      }
+	//     }
+	//     i{
+	//         position: absolute;
+	//         right: 10px;
+	//         top: 6px;
+	//         font-size: 12px;
+	//         color: #ccc;
+	//         transition: color ease .3s;
+	//         cursor: pointer;
+	//     &:hover{
+	//          color: #999;
+	//      }
+	//     }
+	//     }
+	//     .tp-body{
+	//     ul{
+	//         float: left;
+	//         height: 144px;
+	//         width: 55px;
+	//         overflow-y: scroll;
+	//
+	//     .tp-active{
+	//         background: #f7f7f7;
+	//         font-weight: 700;
+	//
+	//     &:hover{
+	//          background: #f7f7f7;
+	//      }
+	//     }
+	//     li{
+	//         height: 24px;
+	//         line-height: 24px;
+	//         text-align: center;
+	//         transition: background 0.3s ease;
+	//         cursor: pointer;
+	//     &:hover{
+	//          background: #eaf8fe;
+	//      }
+	//     }
+	//     &:after{
+	//          content: '';
+	//          display: block;
+	//          height:120px;
+	//
+	//      }
+	//     }
+	//     .tp-line{
+	//         float: left;
+	//         width: 1px;
+	//         height: 144px;
+	//         background: #e9e9e9
+	//     }
+	//     }
+	//
+	// </style>
+
+/***/ },
+/* 7 */
+/***/ function(module, exports) {
+
+	module.exports = "\n<div>\n    <div class=\"tp-out\">\n        <input type=\"text\" class=\"input\" placeholder=\"请选择时间\" @focus=\"show=true\" :value=\"out\">\n    </div>\n\n    <div class=\"tp\" v-show=\"show\" v-el:tp transition=\"slide\">\n        <div class=\"tp-header\">\n            <input placeholder=\"请选择时间\" :value=\"out\">\n            <i class=\"iconfont icon-crosscircle\" @click=\"show=false\"></i>\n        </div>\n        <div class=\"tp-body\">\n            <ul v-el:h>\n                <li v-for=\"n in h\" :class=\"{'tp-active': n == sh}\" @click=\"click(n, 'h')\">{{n}}</li>\n            </ul>\n            <div class=\"tp-line\"></div>\n            <ul v-el:m>\n                <li v-for=\"n in m\" :class=\"{'tp-active': n == sm}\" @click=\"click(n, 'm')\">{{n}}</li>\n            </ul>\n            <div class=\"tp-line\"></div>\n            <ul v-el:s>\n                <li v-for=\"n in s\" :class=\"{'tp-active': n == ss}\" @click=\"click(n, 's')\">{{n}}</li>\n            </ul>\n        </div>\n    </div>\n\n</div>\n";
+
+/***/ },
+/* 8 */
+/***/ function(module, exports) {
+
+	// removed by extract-text-webpack-plugin
+
+/***/ }
+/******/ ]);
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f8bbed2
--- /dev/null
+++ b/index.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <link rel="stylesheet" href="./dist/css/web-style.css">
+</head>
+<body>
+
+<div class="row" id="app">
+    <div class="col-2">1</div>
+    <div class="col-4">
+        <v-time></v-time>
+    </div>
+    <div class="col-5">
+        <button class="btn btn-primary">按钮</button>
+        <button class="btn btn-success">按钮</button>
+    </div>
+
+
+</div>
+<script src="./dist/js/vue.js"></script>
+<script src="./dist/js/web-style.js"></script>
+<script>
+
+new Vue({
+    el: '#app',
+    components:{
+        'v-time': WebStyle.timePicker
+    }
+})
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/package.json b/package.json
index d343007..66572ea 100644
--- a/package.json
+++ b/package.json
@@ -27,21 +27,23 @@
     "vue": "^1.0.26"
   },
   "devDependencies": {
-    "webpack": "^1.13.1",
-    "webpack-dev-server": "^1.14.1",
-    "vue-loader": "^8.5.3",
-    "vue-html-loader": "^1.2.3",
-    "css-loader": "^0.23.1",
-    "vue-style-loader": "^1.0.0",
-    "vue-hot-reload-api": "^2.0.5",
-    "babel-loader": "^6.2.4",
     "babel-core": "^6.10.4",
+    "babel-loader": "^6.2.4",
     "babel-plugin-transform-runtime": "^6.9.0",
     "babel-preset-es2015": "^6.9.0",
     "babel-runtime": "^6.9.2",
+    "css-loader": "^0.23.1",
     "extract-text-webpack-plugin": "^1.0.1",
-    "less-loader": "^2.2.3",
-    "less": "^2.7.1",
-    "style-loader": "^0.13.1"
+    "node-sass": "^3.8.0",
+    "sass-loader": "^4.0.0",
+    "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
+    "vue-hot-reload-api": "^2.0.5",
+    "vue-html-loader": "^1.2.3",
+    "vue-loader": "^8.5.3",
+    "vue-style-loader": "^1.0.0",
+    "webpack": "^1.13.1",
+    "webpack-dev-server": "^1.14.1",
+    "file-loader": "^0.9.0"
   }
 }
\ No newline at end of file
diff --git a/src/components/TimePicker.vue b/src/components/TimePicker.vue
new file mode 100644
index 0000000..572ee21
--- /dev/null
+++ b/src/components/TimePicker.vue
@@ -0,0 +1,274 @@
+<template lang="html">
+    <div>
+        <div class="tp-out">
+            <input type="text" class="input" placeholder="请选择时间" @focus="show=true" :value="out">
+        </div>
+
+        <div class="tp" v-show="show" v-el:tp transition="slide">
+            <div class="tp-header">
+                <input placeholder="请选择时间" :value="out">
+                <i class="iconfont icon-crosscircle" @click="show=false"></i>
+            </div>
+            <div class="tp-body">
+                <ul v-el:h>
+                    <li v-for="n in h" :class="{'tp-active': n == sh}" @click="click(n, 'h')">{{n}}</li>
+                </ul>
+                <div class="tp-line"></div>
+                <ul v-el:m>
+                    <li v-for="n in m" :class="{'tp-active': n == sm}" @click="click(n, 'm')">{{n}}</li>
+                </ul>
+                <div class="tp-line"></div>
+                <ul v-el:s>
+                    <li v-for="n in s" :class="{'tp-active': n == ss}" @click="click(n, 's')">{{n}}</li>
+                </ul>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+
+<script>
+    export default {
+        props: {
+            val: {
+                coerce: function (val) {
+
+                    if (!val) return ''
+
+                    if (val.indexOf(':') != -1) {
+
+                        // val = ('0' + n.getHours()).slice(-2) + ':' + ('0' + n.getMinutes()).slice(-2) + ':' + ('0' + n.getSeconds()).slice(-2)
+                        let sp = val.split(':')
+                        val = parseInt(sp[0]) + ':' + parseInt(sp[1]) + ':' + parseInt(sp[2])
+                    }
+
+
+                    return val
+                }
+            }
+        },
+        data(){
+
+            var sp = this.val.split(':')
+
+            if (!this.val) sp = [-1, -1, -1]
+
+            return {
+                sh: sp[0],
+                sm: sp[1],
+                ss: sp[2],
+                show: false,
+                op: false
+            }
+        },
+        ready(){
+            this.$els.h.scrollTop = this.sh * 24
+            this.$els.m.scrollTop = this.sm * 24
+            this.$els.s.scrollTop = this.ss * 24
+
+
+            this.$els.tp.addEventListener('click', function (e) {
+                e.stopPropagation()
+                return false
+            })
+
+
+            document.body.addEventListener('click', function () {
+                this.show = false
+                // if(this.show){
+                //   this.show = false
+                // }
+            }.bind(this))
+        },
+        computed: {
+            h(){
+                return 24
+            },
+            m(){
+                return 60
+            },
+            s(){
+                return 60
+            },
+            out(){
+                if (!this.val) return ''
+                let sp = this.val.split(':')
+
+                return ('0' + sp[0]).slice(-2) + ':' + ('0' + sp[1]).slice(-2) + ':' + ('0' + sp[2]).slice(-2)
+            }
+        },
+        watch: {
+            val(val){
+                if (this.op) {
+
+                    this.$dispatch('time-change', this.val)
+
+                } else {
+                    //外部赋值
+                    if (val) {
+                        let sp = val.split(':')
+                        this.sh = parseInt(sp[0])
+                        this.sm = parseInt(sp[1])
+                        this.ss = parseInt(sp[2])
+                        this.$els.h.scrollTop = this.sh * 24
+                        this.$els.m.scrollTop = this.sm * 24
+                        this.$els.s.scrollTop = this.ss * 24
+                    } else {
+                        this.clear()
+                    }
+
+                }
+
+                this.op = false
+
+            }
+        },
+        methods: {
+            click(num, type){
+                this.op = true
+                this['s' + type] = num
+                this.scroll(num, type)
+                this.change()
+
+            },
+            scroll(num, type){
+
+                var dom = this.$els[type]
+
+                requestAnimationFrame(step)
+                function step() {
+                    var pg = num * 24 - dom.scrollTop
+                    if (pg > 0) {
+                        dom.scrollTop += 12
+                        requestAnimationFrame(step)
+                    } else if (pg < -12) {
+                        dom.scrollTop -= 12
+                        requestAnimationFrame(step)
+                    } else {
+                        dom.scrollTop += pg
+                    }
+                }
+            },
+            change(){
+                if (this.sh == -1) {
+                    this.sh = 0
+                }
+                if (this.sm == -1) {
+                    this.sm = 0
+                }
+                if (this.ss == -1) {
+                    this.ss = 0
+                }
+
+                let val = ('0' + this.sh).slice(-2) + ':' + ('0' + this.sm).slice(-2) + ':' + ('0' + this.ss).slice(-2)
+
+                this.val = val
+
+            },
+            clear(){
+                this.sh = -1
+                this.sm = -1
+                this.ss = -1
+                this.op = false
+                this.$els.h.scrollTop = 0
+                this.$els.m.scrollTop = 0
+                this.$els.s.scrollTop = 0
+                this.val = ''
+            }
+        }
+    }
+
+
+</script>
+
+
+<style style="scss">
+
+    .tp {
+        width: 168px;
+        height: 178px;
+        border-radius: 6px;
+        box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
+        border: 1px solid #ccc;
+        line-height: 1.5;
+        background: #fff;
+        position: absolute;
+        top: -2px;
+        left: -2px;
+        z-index: 102;
+    }
+
+    .tp-header {
+        padding: 6px;
+        position: relative;
+        border-bottom: 1px solid #e9e9e9;
+        input {
+            margin: 0;
+            padding: 0;
+            border: 0;
+            width: 100%;
+            cursor: auto;
+            line-height: 1.5;
+            outline: 0;
+            color: #666;
+            &::selection {
+                background: #4BB8FF;
+                color: #fff;
+            }
+        }
+        i {
+            position: absolute;
+            right: 10px;
+            top: 6px;
+            font-size: 12px;
+            color: #ccc;
+            transition: color ease .3s;
+            cursor: pointer;
+            &:hover {
+                color: #999;
+            }
+        }
+    }
+
+    .tp-body {
+        ul {
+            float: left;
+            height: 144px;
+            width: 55px;
+            overflow-y: scroll;
+
+            .tp-active {
+                background: #f7f7f7;
+                font-weight: 700;
+
+                &:hover {
+                    background: #f7f7f7;
+                }
+            }
+            li {
+                height: 24px;
+                line-height: 24px;
+                text-align: center;
+                transition: background 0.3s ease;
+                cursor: pointer;
+                &:hover {
+                    background: #eaf8fe;
+                }
+            }
+            &:after {
+                content: '';
+                display: block;
+                height: 120px;
+
+            }
+        }
+        .tp-line {
+            float: left;
+            width: 1px;
+            height: 144px;
+            background: #e9e9e9
+        }
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/components/hello.vue b/src/components/hello.vue
index 54b2684..1a950ba 100644
--- a/src/components/hello.vue
+++ b/src/components/hello.vue
@@ -15,8 +15,11 @@
     }
 </script>
 
-<style lang="css">
+<style lang="scss">
     .text{
         color: red;
+        .xx{
+            color: honeydew;
+        }
     }
 </style>
diff --git a/src/components/index.js b/src/components/index.js
index acfbbfc..dd8abdb 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,8 +1,10 @@
-import hello from './Hello.vue'
-
+// import hello from './Hello.vue'
+import timePicker from './TimePicker.vue'
+require('../sass/index.scss')
+// require('../less/a.css')
 
 const WebStyle = {
-  hello
+  timePicker
 }
 if(typeof window != 'undefined') window.WebStyle = WebStyle
 
diff --git a/src/less/animate.less b/src/less/animate.less
new file mode 100644
index 0000000..a7548d2
--- /dev/null
+++ b/src/less/animate.less
@@ -0,0 +1,22 @@
+.fade-transition {
+    transition: opacity .3s;
+}
+.fade-enter {
+    opacity: 0;
+}
+
+.fade-leave {
+    opacity: 0;
+}
+.slide-transition {
+    transition: transform .3s ease, opacity .3s ease;
+    transform: translate(0, 0);
+}
+.slide-enter{
+    transform: translate(0, 5px);
+    opacity: 0;
+}
+.slide-leave{
+    transform: translate(0, 30px);
+    opacity: 0;
+}
diff --git a/src/less/base.less b/src/less/base.less
new file mode 100644
index 0000000..aa4ac96
--- /dev/null
+++ b/src/less/base.less
@@ -0,0 +1,167 @@
+@text-color: #666;
+@help-color: #999;
+@error-color: #f60;
+
+@primary-color: #2db7f5;
+
+@disable-color: #ccc;
+@font-size-base: 14px;
+@link-color: #2db7f5;
+@link-hover-color: #4DC4F0;
+@font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+
+body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, menu, nav, section {
+    margin: 0;
+    padding: 0;
+}
+
+html, body {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    color: @text-color;
+}
+
+ul, ol {
+    list-style: none;
+}
+
+body {
+    font-family: @font-family;
+    font-size: @font-size-base;
+}
+
+h1, h2, h3, h4, h5 {
+    font-weight: 500;
+    line-height: 1.1;
+    margin-top: 20px;
+    margin-bottom: 10px;
+}
+
+h1 {
+    font-size: 20px;
+}
+
+h2 {
+    font-size: 18px;
+}
+
+p {
+    margin: 8px 0;
+}
+
+a {
+    color: @link-color;
+    text-decoration: none;
+    transition: color .3s ease;
+    cursor: pointer;
+    &:hover {
+        color: @link-hover-color
+    }
+}
+
+.clear {
+    &::after {
+        content: "";
+        height: 0;
+        display: block;
+        clear: both;
+    }
+}
+
+.row {
+    position: relative;
+    width: 100%;
+    height: auto;
+    display: block;
+    &::after {
+        content: "";
+        display: block;
+        height: 0;
+        clear: both;
+    }
+
+    .center {
+        float: none;
+        margin: 0 auto;
+    }
+}
+
+.generate-columns(12);
+.generate-columns(@n, @i: 1) when (@i =< @n) {
+    .col-@{i} {
+        width: (@i * 100% / 12);
+        float: left;
+        padding-right: 8px;
+        box-sizing: border-box;
+        position: relative;
+        min-height: 1px;
+    }
+
+    .col-offset-@{i} {
+        width: (@i * 100% / 12);
+        float: left;
+        padding-right: 8px;
+        box-sizing: border-box;
+        position: relative;
+        min-height: 1px;
+    }
+
+    .generate-columns(@n, (@i + 1));
+}
+
+.text-center {
+    text-align: center;
+}
+
+.loading {
+    font-family: "iconfont" !important;
+    font-size: 14px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-stroke-width: 0.2px;
+    -moz-osx-font-smoothing: grayscale;
+    display: inline-block;
+    &::after {
+        content: "\e6a1";
+    }
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg)
+    }
+
+}
+
+@media only screen and (max-width: 640px) {
+
+    .generate-offset-columns(@n, @i: 1) when (@i =< @n) {
+        .col-@{i} {
+            float: left;
+            width: 100%;
+            padding-right: 0;
+            box-sizing: border-box;;
+        }
+
+        .generate-offset-columns(@n, (@i + 1));
+    }
+    .generate-offset-columns(12);
+}
+
+.box-920 {
+    width: 920px;
+    box-sizing: border-box;
+    margin: 0 auto;
+}
+
+@media only screen and (max-width: 640px) {
+    .box-920 {
+        width: 100%;
+        margin: 0
+    }
+}
diff --git a/src/less/button.less b/src/less/button.less
new file mode 100644
index 0000000..882ea08
--- /dev/null
+++ b/src/less/button.less
@@ -0,0 +1,89 @@
+.btn {
+    display: inline-block;
+    margin-bottom: 0;
+    font-weight: 500;
+    text-align: center;
+    cursor: pointer;
+    border: 1px solid #d9d9d9;
+    white-space: nowrap;
+    line-height: 1.5;
+    padding: 2px 14px;
+    font-size: 14px;
+    border-radius: 6px;
+    -webkit-user-select: none;
+    user-select: none;
+    // -webkit-transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
+    // transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
+    color: #666;
+    outline: none;
+    background-color: #fff;
+    &:hover {
+        background: #f7f7f7;
+    }
+    &:active {
+        background: darken(#f7f7f7, 3%);
+        transition: none;
+    }
+    &:disabled {
+        color: #ccc;
+        cursor: no-drop;
+    }
+}
+
+@primary-color: #2db7f5;
+@success-color: #5FBC29;
+@info-color: #01B3CA;
+@warning-color: #FAC450;
+@danger-color: #E01515;
+
+.btn-color(@color) {
+
+    color: #fff;
+    background-color: @color;
+    border-color: @color;
+
+    &:hover {
+        background-color: lighten(@color, 5%);
+    }
+    &:active {
+        background-color: darken(@color, 5%);
+    }
+    &:disabled {
+        cursor: no-drop;
+        background-color: lighten(@color, 20%);
+    }
+
+}
+
+.btn-primary {
+    .btn-color(@primary-color)
+}
+
+.btn-success {
+    .btn-color(@success-color)
+}
+
+.btn-info {
+    .btn-color(@info-color)
+}
+
+.btn-warning {
+    .btn-color(@warning-color)
+}
+
+.btn-danger {
+    .btn-color(@danger-color)
+}
+
+.btn-lg {
+    padding: 6px 18px;
+}
+
+.btn-sm {
+    padding: 0px 10px;
+}
+
+.btn-block {
+    display: block;
+    width: 100%;
+}
diff --git a/src/less/fonts.less b/src/less/fonts.less
new file mode 100644
index 0000000..05cb3aa
--- /dev/null
+++ b/src/less/fonts.less
@@ -0,0 +1,203 @@
+
+
+
+
+
+.font-face{
+    @font-face {
+        font-family: "iconfont";
+        src: url('../fonts/iconfont.eot?t=1458285388'); /* IE9*/
+        src: url('../fonts/iconfont.eot?t=1458285388#iefix') format('embedded-opentype'), /* IE6-IE8 */
+        url('../fonts/iconfont.woff?t=1458285388') format('woff'), /* chrome, firefox */
+        url('../fonts/iconfont.ttf?t=1458285388') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+        url('../fonts/iconfont.svg?t=1458285388#iconfont') format('svg'); /* iOS 4.1- */
+    }
+}
+
+.iconfont {
+    font-family:"iconfont" !important;
+    font-size:14px;
+    font-style:normal;
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-stroke-width: 0.2px;
+    -moz-osx-font-smoothing: grayscale;
+}
+.icon-arrowleft:before { content: "\e620"; }
+.icon-arrowright:before { content: "\e621"; }
+.icon-arrowup:before { content: "\e622"; }
+.icon-arrowdown:before { content: "\e623"; }
+.icon-caretcircleleft:before { content: "\e604"; }
+.icon-caretcircleright:before { content: "\e605"; }
+.icon-caretcircleup:before { content: "\e606"; }
+.icon-caretcircledown:before { content: "\e607"; }
+.icon-forward:before { content: "\e608"; }
+.icon-backward:before { content: "\e609"; }
+.icon-caretcircleoleft:before { content: "\e60b"; }
+.icon-caretcircleoright:before { content: "\e60d"; }
+.icon-caretcircleodown:before { content: "\e60e"; }
+.icon-caretright:before { content: "\e60a"; }
+.icon-caretleft:before { content: "\e60f"; }
+.icon-caretup:before { content: "\e610"; }
+.icon-caretdown:before { content: "\e611"; }
+.icon-fastforward:before { content: "\e612"; }
+.icon-fastbackward:before { content: "\e613"; }
+.icon-stepbackward:before { content: "\e614"; }
+.icon-stepforward:before { content: "\e615"; }
+.icon-circleodown:before { content: "\e617"; }
+.icon-circleoup:before { content: "\e618"; }
+.icon-circleoleft:before { content: "\e619"; }
+.icon-circleoright:before { content: "\e616"; }
+.icon-circleright:before { content: "\e61a"; }
+.icon-circleup:before { content: "\e61c"; }
+.icon-playcircle:before { content: "\e61e"; }
+.icon-playcircleo:before { content: "\e61f"; }
+.icon-circleleft:before { content: "\e61b"; }
+.icon-right:before { content: "\e600"; }
+.icon-left:before { content: "\e601"; }
+.icon-up:before { content: "\e602"; }
+.icon-down:before { content: "\e603"; }
+.icon-reload:before { content: "\e626"; }
+.icon-doubleleft:before { content: "\e624"; }
+.icon-doubleright:before { content: "\e625"; }
+.icon-retweet:before { content: "\e627"; }
+.icon-shrink:before { content: "\e628"; }
+.icon-arrowsalt:before { content: "\e629"; }
+.icon-rollback:before { content: "\e62a"; }
+.icon-verticleleft:before { content: "\e62b"; }
+.icon-verticleright:before { content: "\e62c"; }
+.icon-cross:before { content: "\e62d"; }
+.icon-check:before { content: "\e62e"; }
+.icon-checkcircle:before { content: "\e62f"; }
+.icon-checkcircleo:before { content: "\e630"; }
+.icon-crosscircle:before { content: "\e631"; }
+.icon-crosscircleo:before { content: "\e632"; }
+.icon-exclamation:before { content: "\e633"; }
+.icon-exclamationcircle:before { content: "\e634"; }
+.icon-exclamationcircleo:before { content: "\e635"; }
+.icon-info:before { content: "\e636"; }
+.icon-infocircle:before { content: "\e637"; }
+.icon-infocircleo:before { content: "\e638"; }
+.icon-minuscircle:before { content: "\e639"; }
+.icon-minuscircleo:before { content: "\e63a"; }
+.icon-minus:before { content: "\e63b"; }
+.icon-pluscircleo:before { content: "\e63c"; }
+.icon-pluscircle:before { content: "\e63d"; }
+.icon-plus:before { content: "\e63e"; }
+.icon-swapleft:before { content: "\e63f"; }
+.icon-swapright:before { content: "\e640"; }
+.icon-swap:before { content: "\e641"; }
+.icon-clockcircle:before { content: "\e642"; }
+.icon-clockcircleo:before { content: "\e643"; }
+.icon-pausecircle:before { content: "\e644"; }
+.icon-pausecircleo:before { content: "\e645"; }
+.icon-pause:before { content: "\e646"; }
+.icon-questioncircle:before { content: "\e647"; }
+.icon-questioncircleo:before { content: "\e648"; }
+.icon-question:before { content: "\e649"; }
+.icon-areachart:before { content: "\e64c"; }
+.icon-appstore:before { content: "\e64d"; }
+.icon-apple:before { content: "\e64e"; }
+.icon-android:before { content: "\e64f"; }
+.icon-bars:before { content: "\e650"; }
+.icon-barchart:before { content: "\e651"; }
+.icon-calendar:before { content: "\e654"; }
+.icon-book:before { content: "\e655"; }
+.icon-chrome:before { content: "\e65c"; }
+.icon-code:before { content: "\e65d"; }
+.icon-creditcard:before { content: "\e65f"; }
+.icon-customerservice:before { content: "\e65e"; }
+.icon-copy:before { content: "\e660"; }
+.icon-delete:before { content: "\e661"; }
+.icon-ellipsis:before { content: "\e667"; }
+.icon-edit:before { content: "\e668"; }
+.icon-export:before { content: "\e669"; }
+.icon-exception:before { content: "\e66a"; }
+.icon-file:before { content: "\e66b"; }
+.icon-filetext:before { content: "\e66c"; }
+.icon-filter:before { content: "\e66f"; }
+.icon-folder:before { content: "\e670"; }
+.icon-frowncircle:before { content: "\e672"; }
+.icon-frown:before { content: "\e673"; }
+.icon-smilecircle:before { content: "\e676"; }
+.icon-smile:before { content: "\e677"; }
+.icon-mehcircle:before { content: "\e678"; }
+.icon-meh:before { content: "\e679"; }
+.icon-github:before { content: "\e674"; }
+.icon-laptop:before { content: "\e67a"; }
+.icon-inbox:before { content: "\e67b"; }
+.icon-ie:before { content: "\e67c"; }
+.icon-home:before { content: "\e67d"; }
+.icon-linechart:before { content: "\e67f"; }
+.icon-link:before { content: "\e67e"; }
+.icon-logout:before { content: "\e681"; }
+.icon-mail:before { content: "\e682"; }
+.icon-menuunfold:before { content: "\e683"; }
+.icon-menufold:before { content: "\e684"; }
+.icon-mobile:before { content: "\e685"; }
+.icon-notification:before { content: "\e686"; }
+.icon-paperclip:before { content: "\e687"; }
+.icon-phone:before { content: "\e688"; }
+.icon-picture:before { content: "\e689"; }
+.icon-piechart:before { content: "\e68a"; }
+.icon-poweroff:before { content: "\e68b"; }
+.icon-setting:before { content: "\e68d"; }
+.icon-sharealt:before { content: "\e68e"; }
+.icon-search:before { content: "\e690"; }
+.icon-poweroff1:before { content: "\e691"; }
+.icon-solution:before { content: "\e68f"; }
+.icon-tablet:before { content: "\e695"; }
+.icon-team:before { content: "\e680"; }
+.icon-totop:before { content: "\e69a"; }
+.icon-videocamera:before { content: "\e69b"; }
+.icon-user:before { content: "\e69c"; }
+.icon-save:before { content: "\e69e"; }
+.icon-unlock:before { content: "\e69f"; }
+.icon-shoppingcart:before { content: "\e692"; }
+.icon-windows:before { content: "\e6a0"; }
+.icon-aliwangwango:before { content: "\e64a"; }
+.icon-aliwangwang:before { content: "\e64b"; }
+.icon-camerao:before { content: "\e652"; }
+.icon-camera:before { content: "\e653"; }
+.icon-eyeo:before { content: "\e66d"; }
+.icon-eye:before { content: "\e66e"; }
+.icon-enviroment:before { content: "\e665"; }
+.icon-enviromento:before { content: "\e666"; }
+.icon-staro:before { content: "\e693"; }
+.icon-star:before { content: "\e694"; }
+.icon-tags:before { content: "\e656"; }
+.icon-tagso:before { content: "\e657"; }
+.icon-tag:before { content: "\e658"; }
+.icon-tago:before { content: "\e659"; }
+.icon-cloud:before { content: "\e65a"; }
+.icon-clouddownload:before { content: "\e65b"; }
+.icon-cloudupload:before { content: "\e696"; }
+.icon-clouduploado:before { content: "\e697"; }
+.icon-clouddownloado:before { content: "\e698"; }
+.icon-cloudo:before { content: "\e699"; }
+.icon-iconfontcaretcircleoup:before { content: "\e60c"; }
+.icon-loading:before { content: "\e6a1"; }
+.icon-dislike:before { content: "\e6a2"; }
+.icon-like:before { content: "\e6a3"; }
+.icon-message:before { content: "\e6a4"; }
+.icon-download:before { content: "\e663"; }
+.icon-upload:before { content: "\e664"; }
+.icon-paycircle:before { content: "\e6a8"; }
+.icon-paycircleo:before { content: "\e6a9"; }
+.icon-exclefile:before { content: "\e6ac"; }
+.icon-pdffile:before { content: "\e6ab"; }
+.icon-pptfile:before { content: "\e6a7"; }
+.icon-jpgfile:before { content: "\e6aa"; }
+.icon-unknowfile:before { content: "\e6a6"; }
+.icon-minussquareo:before { content: "\e6ad"; }
+.icon-plussquareo:before { content: "\e6ae"; }
+.icon-iconfontdesktop:before { content: "\e662"; }
+.icon-hdd:before { content: "\e675"; }
+.icon-folderopen:before { content: "\e671"; }
+.icon-circledown:before { content: "\e61d"; }
+.icon-qrcode:before { content: "\e6a5"; }
+.icon-scan:before { content: "\e6af"; }
+.icon-heart:before { content: "\e68c"; }
+.icon-hearto:before { content: "\e6b0"; }
+.icon-calculator:before { content: "\e6b1"; }
+.icon-appstoreo:before { content: "\e6b2"; }
+.icon-lock:before { content: "\e69d"; }
diff --git a/src/less/form.less b/src/less/form.less
new file mode 100644
index 0000000..ab59742
--- /dev/null
+++ b/src/less/form.less
@@ -0,0 +1,207 @@
+.form .row{
+    margin-bottom: 24px;
+}
+.search-8>div{
+    padding: 8px
+}
+.padding-08>div{
+    padding-right:8px
+}
+input,textarea{
+    background: #fff none;
+    outline: none;
+    -webkit-appearance:none; /*去除input默认样式*/
+}
+
+.form input[type=checkbox]{
+    -webkit-appearance:checkbox
+}
+
+.form input[type=radio]{
+    -webkit-appearance:radio
+}
+.form textarea{
+    position: relative;
+    display: inline-block;
+    vertical-align: bottom;
+    cursor: text;
+    font-size: 14px;
+    line-height: 1.5;
+    color: #666;
+    border: 1px solid #d9d9d9;
+    border-radius: 6px;
+    background-color: #fff;
+    background-image: none;
+    width: 100%;
+    min-height: 100px;
+    padding: 4px 7px;
+    box-sizing: border-box;
+}
+
+.input{
+    padding: 4px 7px;
+    width: 100%;
+    height: 28px;
+    cursor: text;
+    font-size: 14px;
+    line-height: 1;
+    color: #666;
+    border: 1px solid #d9d9d9;
+    border-radius: 6px;
+    box-sizing: border-box;
+    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+
+    &:hover{
+        border-color: #57c5f7;
+    }
+    &:focus{
+        box-shadow: 0 0 0 2px rgba(45,183,245,.2);
+        border-color: #57c5f7;
+    }
+
+}
+
+.require:before{
+    display: inline-block;
+    margin-right: 4px;
+    content: "*";
+    font-family: SimSun;
+    font-size: 12px;
+    color: #f60;
+}
+
+.label{
+    text-align: right;
+    height: 28px;
+    line-height: 28px;
+    float: left;
+    box-sizing: border-box;
+    padding-right: 8px
+}
+
+@media only screen and (max-width: 640px) {
+    .label{
+        text-align: left;
+    }
+}
+
+.form .text{
+    height: 28px;
+    line-height: 28px;
+    padding-right: 8px;
+}
+
+.form .input{
+    width: 100%;
+}
+
+.split{
+    margin-right: 8px;
+    line-height: 28px;
+    height:28px;
+    float: left;
+}
+
+.select{
+    border: 1px solid #d9d9d9;
+    border-radius: 6px;
+    background-color: #fff;
+    margin: 0;
+    outline: 0;
+    height: 28px;
+    line-height: 28px;
+    width: 100%;
+}
+.radio,.checkbox{
+    font-size: 14px;
+    cursor: pointer;
+    height: 28px;
+    line-height: 28px;
+    margin-right: 8px;
+
+    span{
+        margin: 0 8px;
+        display: inline-block;
+    }
+    input{
+        width: 14px;
+        height: 14px
+    }
+}
+
+.drop{
+    position: absolute;
+    top: 0px;
+    left: 0;
+    .drop-ul{
+        outline: none;
+        position: relative;
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        text-align: left;
+        background-color: #fff;
+        border-radius: 6px;
+        box-shadow: 0 1px 6px hsla(0,0%,39%,.2);
+        background-clip: padding-box;
+        border: 1px solid #d9d9d9;
+        li{
+            padding: 7px 15px;
+            transition: background .3s ease;
+            &:hover{
+                background-color: #eaf8fe;
+            }
+        }
+    }
+}
+
+//输入框tags
+.tags-wrap{
+    width: 100%;
+    height: 100%;
+    outline: none;
+    &::after{
+        content: "";
+        display: block;
+        height: 0;
+        clear: both;
+    }
+}
+
+.tags, .tags-input{
+    position: relative;
+    float: left;
+    color: #fff;
+    line-height: 28px;
+    margin: 0 4px 4px 0;
+    padding: 0 22px 0 10px;
+    border-radius: 6px;
+    .content{
+        line-height: 28px;
+    }
+    .del{
+        width: 22px;
+        height: 28px;
+        text-align: center;
+        cursor: pointer;
+        position: absolute;
+        top: -1px;
+        right: 0;
+    }
+}
+
+.tags-input{
+    font-size: 14px;
+    padding: 0;
+    background-color: inherit;
+    border: none;
+    color: inherit;
+    width: 10em;
+}
+.tags-enter, .tags-leave{
+    transform: scale(0.9);
+    opacity: 0;
+}
+.tags-transition{
+    transition: all .3s ease;
+}
diff --git a/src/less/index.less b/src/less/index.less
new file mode 100644
index 0000000..34c91e8
--- /dev/null
+++ b/src/less/index.less
@@ -0,0 +1,6 @@
+@import "base";
+@import "button";
+@import "table";
+@import "form";
+@import "animate";
+@import "fonts";
\ No newline at end of file
diff --git a/src/less/table.less b/src/less/table.less
new file mode 100644
index 0000000..3620b0a
--- /dev/null
+++ b/src/less/table.less
@@ -0,0 +1,130 @@
+.table {
+    width: 100%;
+    margin-bottom: 24px;
+    border-spacing: 0;
+    border-collapse: collapse;
+    border: 1px solid #ddd;
+
+    tbody th, td {
+        border-top: 1px solid #ddd;
+    }
+
+    thead th {
+        border-bottom: 2px solid #ddd;
+    }
+    th, td {
+        text-align: left;
+        padding: 8px;
+        border-left: 1px solid #ddd;
+    }
+}
+
+caption {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    color: #777;
+    text-align: left;
+}
+
+.table-striped {
+    tbody tr:nth-of-type(odd) {
+        background-color: #f9f9f9;
+    }
+}
+
+.table-hover {
+    tbody tr:hover {
+        background-color: #f9f9f9;
+    }
+}
+
+.table-sm {
+    th, td {
+        padding: 5px;
+    }
+}
+
+.table-responsive {
+    thead tr {
+        white-space: nowrap;
+    }
+    thead th {
+        //min-width: 75px;
+    }
+    tbody td{
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+    overflow: scroll;
+}
+
+.pagination {
+    float: right;
+    &:after {
+        content: ' ';
+        clear: both;
+    }
+    .quick{
+        float: left;
+        width: 100px;
+        padding-left: 8px;
+        line-height: 30px;
+        height: 30px;
+        text-align: right;
+        input{
+            width: 40px;
+            margin: 0 5px;
+        }
+    }
+
+    li {
+        float: left;
+        border-radius: 6px;
+        -webkit-user-select: none;
+        user-select: none;
+        min-width: 28px;
+        height: 28px;
+        border: 1px solid #d9d9d9;
+        background-color: #fff;
+        text-align: center;
+        line-height: 28px;
+        margin: 0 5px;
+        cursor: pointer;
+        transition: all .3s ease;
+        &:hover{
+            border-color: #2db7f5;
+            color: #2db7f5;
+        }
+    }
+    a {
+        color: #666;
+        padding: 0 6px;
+        display: inline-block;
+    }
+    .next {
+        &:before {
+            content: "\E600";
+        }
+    }
+    .active {
+
+        background-color: #2db7f5;
+        color: #fff;
+        cursor: default;
+
+        &:hover{
+            color: #fff;
+        }
+
+
+    }
+
+    .jump {
+        border: none;
+        &:before{
+            content: "\2022\2022\2022";
+            letter-spacing: 2px;
+        }
+    }
+}
diff --git a/src/sass/button.scss b/src/sass/button.scss
index 8b6f7b1..c727187 100644
--- a/src/sass/button.scss
+++ b/src/sass/button.scss
@@ -24,41 +24,32 @@
     background: darken(#f7f7f7, 3%);
     transition: none;
   }
-  &:disabled{
+  &:disabled {
     color: #ccc;
     cursor: no-drop;
   }
 }
 
-@mixin color($color: #fff) {
-  color: #fff;
-  background-color: $color;
-  border-color: $color;
-}
-
-@mixin active($color: #fff) {
-  color: #fff;
-  background-color: $color;
-  border-color: $color;
-  transition: none;
-}
 $primary-color: #2db7f5;
 $success-color: #5FBC29;
 $info-color: #01B3CA;
 $warning-color: #FAC450;
 $danger-color: #E01515;
 
-
 @mixin btn($color: #fff) {
-  @include color($color);
+
+  color: #fff;
+  background-color: $color;
+  border-color: $color;
+
   &:hover {
-    @include color(lighten($color, 5%));
+    background-color: (lighten($color, 5%));
   }
   &:active {
-    @include active(darken($color, 5%));
+    background-color: (darken($color, 5%));
   }
-  &:disabled{
-    @include active(lighten($color, 20%));
+  &:disabled {
+    background-color: (lighten($color, 20%));
     cursor: no-drop;
   }
 }
@@ -91,7 +82,6 @@ $danger-color: #E01515;
   padding: 0px 10px;
 }
 
-
 .btn-block {
   display: block;
   width: 100%;
diff --git a/src/sass/fonts.scss b/src/sass/fonts.scss
index b54f2a7..a65131c 100644
--- a/src/sass/fonts.scss
+++ b/src/sass/fonts.scss
@@ -1,10 +1,10 @@
 
 @font-face {font-family: "iconfont";
-  src: url('../fonts/iconfont.eot?t=1458285388'); /* IE9*/
-  src: url('../fonts/iconfont.eot?t=1458285388#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('../fonts/iconfont.woff?t=1458285388') format('woff'), /* chrome, firefox */
-  url('../fonts/iconfont.ttf?t=1458285388') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('../fonts/iconfont.svg?t=1458285388#iconfont') format('svg'); /* iOS 4.1- */
+  src: url('../fonts/iconfont.eot'); /* IE9*/
+  src: url('../fonts/iconfont.eot') format('embedded-opentype'), /* IE6-IE8 */
+  url('../fonts/iconfont.woff') format('woff'), /* chrome, firefox */
+  url('../fonts/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('../fonts/iconfont.svg') format('svg'); /* iOS 4.1- */
 }
 .iconfont {
   font-family:"iconfont" !important;
diff --git a/src/sass/index.scss b/src/sass/index.scss
index 8ef59ee..2a2a607 100644
--- a/src/sass/index.scss
+++ b/src/sass/index.scss
@@ -5,9 +5,4 @@
 @import "table";
 @import "form";
 
-@import "components/autoComplete";
-@import "components/carousel";
-@import "components/datePicker";
-@import "components/message";
-@import "components/menu";
-@import "components/tabs"
+