From d8f08a7dafbea42846c92d9730a6fddd979d0b9e Mon Sep 17 00:00:00 2001 From: cyc <342930982@qq.com> Date: Fri, 8 Jul 2016 21:21:58 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E9=85=8D=E7=BD=AEless=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/web-style.js | 294 +++++++++++++++++++++++++++++++++++++++ config/webpack.config.js | 2 +- index.html | 15 ++ src/components/index.js | 2 +- src/less/index.less | 167 ++++++++++++++++++++++ 5 files changed, 478 insertions(+), 2 deletions(-) create mode 100644 index.html create mode 100644 src/less/index.less diff --git a/build/web-style.js b/build/web-style.js index 3c22d27..122032a 100644 --- a/build/web-style.js +++ b/build/web-style.js @@ -52,6 +52,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + __webpack_require__(8); + var WebStyle = { hello: _Hello2.default }; @@ -444,5 +446,297 @@ module.exports = "\n

\n {{msg}}\n

\n"; +/***/ }, +/* 8 */ +/***/ function(module, exports, __webpack_require__) { + + // style-loader: Adds some css to the DOM by adding a + +/***/ }, +/* 11 */ +/***/ function(module, exports) { + + module.exports = "\n

\n {{msg}}\n

\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 122032a..0000000 --- a/build/web-style.js +++ /dev/null @@ -1,742 +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 }; } - - __webpack_require__(8); - - 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 - -/***/ }, -/* 7 */ -/***/ function(module, exports) { - - module.exports = "\n

\n {{msg}}\n

\n"; - -/***/ }, -/* 8 */ -/***/ function(module, exports, __webpack_require__) { - - // style-loader: Adds some css to the DOM by adding a + +/***/ }, +/* 5 */ +/***/ function(module, exports) { + + module.exports = "\n

\n {{msg}}\n

\n"; + +/***/ }, +/* 6 */ +/***/ function(module, exports) { + + // removed by extract-text-webpack-plugin + +/***/ } +/******/ ]); \ No newline at end of file diff --git a/index.html b/index.html index 3001eef..d63e144 100644 --- a/index.html +++ b/index.html @@ -3,12 +3,19 @@ Document +
1
-
2
+
+ +
+
+ + +
diff --git a/package.json b/package.json index d343007..038ad78 100644 --- a/package.json +++ b/package.json @@ -27,21 +27,21 @@ "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", + "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" } -} \ No newline at end of file +} diff --git a/src/components/TimePicker.vue b/src/components/TimePicker.vue new file mode 100644 index 0000000..0044be4 --- /dev/null +++ b/src/components/TimePicker.vue @@ -0,0 +1,192 @@ + + + + + + + \ 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 @@ } - diff --git a/src/components/index.js b/src/components/index.js index ceb9a13..81813fb 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,8 +1,11 @@ import hello from './Hello.vue' -require('../less/index.less') +// import timePicker from './TimePicker.vue' +require('../sass/index.scss') +// require('../less/a.css') const WebStyle = { - hello + 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 index aa4ac96..34c91e8 100644 --- a/src/less/index.less +++ b/src/less/index.less @@ -1,167 +1,6 @@ -@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 - } -} +@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/index.scss b/src/sass/index.scss index 8ef59ee..5a07b7c 100644 --- a/src/sass/index.scss +++ b/src/sass/index.scss @@ -1,13 +1,8 @@ -@import "base"; -@import "animate"; -@import "button"; -@import "fonts"; -@import "table"; -@import "form"; +//@import "base"; +//@import "animate"; +//@import "button"; +////@import "fonts"; +//@import "table"; +//@import "form"; + -@import "components/autoComplete"; -@import "components/carousel"; -@import "components/datePicker"; -@import "components/message"; -@import "components/menu"; -@import "components/tabs" From 221f4f00abaa1a1f7173796c5fe4fbb4d01faceb Mon Sep 17 00:00:00 2001 From: cyc <342930982@qq.com> Date: Mon, 11 Jul 2016 22:01:41 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E5=BC=95=E5=85=A5vue-cli=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/webpack.config.js | 5 +- dist/css/web-style.css | 1250 ++++++++++++++++++++++++++++++++- dist/js/web-style.js | 603 +++++++++++++++- index.html | 20 +- package.json | 6 +- src/components/TimePicker.vue | 90 ++- src/components/index.js | 5 +- src/sass/fonts.scss | 10 +- src/sass/index.scss | 12 +- 9 files changed, 1945 insertions(+), 56 deletions(-) diff --git a/config/webpack.config.js b/config/webpack.config.js index eb3a212..84c5d3f 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -17,7 +17,10 @@ module.exports = { }, { 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'], diff --git a/dist/css/web-style.css b/dist/css/web-style.css index ddae0e7..27fb34c 100644 --- a/dist/css/web-style.css +++ b/dist/css/web-style.css @@ -1,4 +1,1246 @@ -.text { - color: red; } - .text .xx { - color: honeydew; } +@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 c2f1d66..12bae68 100644 --- a/dist/js/web-style.js +++ b/dist/js/web-style.js @@ -46,19 +46,18 @@ 'use strict'; - var _Hello = __webpack_require__(1); + var _TimePicker = __webpack_require__(1); - var _Hello2 = _interopRequireDefault(_Hello); + var _TimePicker2 = _interopRequireDefault(_TimePicker); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - // import timePicker from './TimePicker.vue' - __webpack_require__(6); + __webpack_require__(8); // require('../less/a.css') + // import hello from './Hello.vue' var WebStyle = { - hello: _Hello2.default, - timePicker: timePicker + timePicker: _TimePicker2.default }; if (typeof window != 'undefined') window.WebStyle = WebStyle; @@ -70,12 +69,12 @@ var __vue_script__, __vue_template__ __webpack_require__(2) - __vue_script__ = __webpack_require__(4) + __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__(5) + 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__) { @@ -85,7 +84,7 @@ var hotAPI = require("vue-hot-reload-api") hotAPI.install(require("vue"), false) if (!hotAPI.compatible) return - var id = "_v-4a681ef9/Hello.vue" + var id = "_v-2565e8b8/TimePicker.vue" if (!module.hot.data) { hotAPI.createRecord(id, module.exports) } else { @@ -95,13 +94,324 @@ /***/ }, /* 2 */ -/***/ function(module, exports) { +/***/ function(module, exports, __webpack_require__) { + + // style-loader: Adds some css to the DOM by adding a /***/ }, -/* 5 */ +/* 7 */ /***/ function(module, exports) { - module.exports = "\n

\n {{msg}}\n

\n"; + module.exports = "\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"; /***/ }, -/* 6 */ +/* 8 */ /***/ function(module, exports) { // removed by extract-text-webpack-plugin diff --git a/index.html b/index.html index d63e144..f8bbed2 100644 --- a/index.html +++ b/index.html @@ -3,20 +3,32 @@ Document - + -
+
1
- +
+ +
- + + + \ No newline at end of file diff --git a/package.json b/package.json index 038ad78..66572ea 100644 --- a/package.json +++ b/package.json @@ -37,11 +37,13 @@ "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" + "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 index 0044be4..572ee21 100644 --- a/src/components/TimePicker.vue +++ b/src/components/TimePicker.vue @@ -183,10 +183,92 @@ - \ No newline at end of file diff --git a/src/components/index.js b/src/components/index.js index 81813fb..dd8abdb 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,10 +1,9 @@ -import hello from './Hello.vue' -// import timePicker from './TimePicker.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/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 5a07b7c..2a2a607 100644 --- a/src/sass/index.scss +++ b/src/sass/index.scss @@ -1,8 +1,8 @@ -//@import "base"; -//@import "animate"; -//@import "button"; -////@import "fonts"; -//@import "table"; -//@import "form"; +@import "base"; +@import "animate"; +@import "button"; +@import "fonts"; +@import "table"; +@import "form";