├── .gitignore
├── README.md
├── data
    └── data.json
├── gulpfile.js
└── src
    ├── css
        ├── bootstrap.css
        ├── bootstrap.min.css
        ├── common.css
        ├── gymui.css
        ├── index.css
        ├── index1.css
        ├── swiper.css
        └── swiper.min.css
    ├── fonts
        ├── demo.css
        ├── demo_index.html
        ├── iconfont.css
        ├── iconfont.eot
        ├── iconfont.js
        ├── iconfont.svg
        ├── iconfont.ttf
        ├── iconfont.woff
        ├── iconfont.woff2
        ├── mui-icons-extra.ttf
        └── mui.ttf
    ├── fonts0
        ├── demo.css
        ├── demo_fontclass.html
        ├── iconfont.css
        ├── iconfont.eot
        ├── iconfont.js
        ├── iconfont.svg
        ├── iconfont.ttf
        ├── iconfont.woff
        ├── simkai.ttf
        └── ygyxsziti2.0.ttf
    ├── img
        └── 1.png
    ├── index.html
    ├── js
        ├── common
        │   ├── ajax.js
        │   ├── better-scroll.js
        │   ├── flexible.js
        │   ├── jquery-3.3.1.js
        │   ├── jquery.validate-1.13.1.js
        │   ├── mock-min.js
        │   ├── mui.min.js
        │   ├── require.js
        │   ├── swiper.min.js
        │   └── zepto.js
        └── module
        │   ├── ajax.js
        │   ├── config.js
        │   └── index.js
    └── scss
        ├── _mixin.scss
        ├── common.scss
        ├── gymui.scss
        └── index.scss


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # TypeScript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | # next.js build output
61 | .next
62 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # sort
2 | 前端拦截排序
3 | 


--------------------------------------------------------------------------------
/data/data.json:
--------------------------------------------------------------------------------
  1 | [{
  2 |         "_id": "ObjectId(5c427dfd5d22e6565883c8ed)",
  3 |         "title": "1女博士羽绒服",
  4 |         "img": "1.png",
  5 |         "price": 124,
  6 |         "sale": 677,
  7 |         "credit": 1.0
  8 |     }
  9 | 
 10 |     ,
 11 |     {
 12 |         "_id": "ObjectId(5c427e7e5d22e6565883c8ee)",
 13 |         "title": "2北极人服",
 14 |         "price": 1247,
 15 |         "img": "1.png",
 16 |         "sale": 877,
 17 |         "credit": 3.0
 18 |     }
 19 | 
 20 |     ,
 21 |     {
 22 |         "_id": "ObjectId(5c427e985d22e6565883c8ef)",
 23 |         "title": "公园人服",
 24 |         "price": 547,
 25 |         "sale": 857,
 26 |         "img": "1.png",
 27 |         "credit": 7.0
 28 |     }
 29 | 
 30 |     ,
 31 |     {
 32 |         "_id": "ObjectId(5c427ea95d22e6565883c8f0)",
 33 |         "title": "公噶苏东方服",
 34 |         "price": 247,
 35 |         "sale": 7857,
 36 |         "img": "1.png",
 37 |         "credit": 2.0
 38 |     }
 39 | 
 40 |     ,
 41 |     {
 42 |         "_id": "ObjectId(5c427eba5d22e6565883c8f1)",
 43 |         "title": "公爱使股份苏东方服",
 44 |         "price": 437,
 45 |         "sale": 7117,
 46 |         "img": "1.png",
 47 |         "credit": 6.0
 48 |     }
 49 | 
 50 |     ,
 51 |     {
 52 |         "_id": "ObjectId(5c427ec65d22e6565883c8f2)",
 53 |         "title": "汇款来了使股份苏东方服",
 54 |         "price": 4667,
 55 |         "sale": 44117,
 56 |         "img": "1.png",
 57 |         "credit": 56.0
 58 |     }
 59 | 
 60 |     ,
 61 |     {
 62 |         "_id": "ObjectId(5c427ed75d22e6565883c8f3)",
 63 |         "title": "汇哈斯卡积分过渡费服",
 64 |         "price": 45677,
 65 |         "sale": 467817,
 66 |         "img": "1.png",
 67 |         "credit": 66.0
 68 |     }
 69 | 
 70 |     ,
 71 |     {
 72 |         "_id": "ObjectId(5c427ee45d22e6565883c8f4)",
 73 |         "title": "汇哈斯卡积分过渡费服",
 74 |         "price": 45677,
 75 |         "sale": 467817,
 76 |         "img": "1.png",
 77 |         "credit": 66.0
 78 |     }
 79 | 
 80 |     ,
 81 |     {
 82 |         "_id": "ObjectId(5c427ee55d22e6565883c8f5)",
 83 |         "title": "汇哈斯卡积分过渡费服",
 84 |         "price": 45677,
 85 |         "sale": 467817,
 86 |         "img": "1.png",
 87 |         "credit": 66.0
 88 |     }
 89 | 
 90 |     ,
 91 |     {
 92 |         "_id": "ObjectId(5c427ee55d22e6565883c8f6)",
 93 |         "title": "汇哈斯卡积分过渡费服",
 94 |         "price": 45677,
 95 |         "sale": 467817,
 96 |         "img": "1.png",
 97 |         "credit": 66.0
 98 |     }
 99 | 
100 |     ,
101 |     {
102 |         "_id": "ObjectId(5c427ee55d22e6565883c8f7)",
103 |         "title": "汇哈斯卡积分过渡费服",
104 |         "price": 45677,
105 |         "sale": 467817,
106 |         "img": "1.png",
107 |         "credit": 66.0
108 |     }
109 | 
110 |     ,
111 |     {
112 |         "_id": "ObjectId(5c427ee55d22e6565883c8f8)",
113 |         "title": "汇哈斯卡积分过渡费服",
114 |         "price": 45677,
115 |         "sale": 467817,
116 |         "img": "1.png",
117 |         "credit": 66.0
118 |     }
119 | ]


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require("gulp")
 2 | var fs = require("fs")
 3 | var url = require("url")
 4 | var path = require("path")
 5 | var sass = require("gulp-sass")
 6 | var webserver = require("gulp-webserver");
 7 | var data = require("./data/data.json")
 8 | 
 9 | gulp.task("sass", function() {
10 |     return gulp.src("./src/scss/*.scss")
11 |         .pipe(sass())
12 |         .pipe(gulp.dest("./src/css"))
13 | })
14 | 
15 | gulp.task("watch", function() {
16 |     return gulp.watch("./src/scss/*.scss", gulp.series("sass"))
17 | })
18 | gulp.task("webserver", function() {
19 |     return gulp.src("./src/")
20 |         .pipe(webserver({
21 |             open: true,
22 |             port: 8087,
23 |             livereload: true,
24 |             middleware: function(req, res, next) {
25 |                 var pathname = url.parse(req.url).pathname;
26 |                 if (pathname == "/favicon.ico") {
27 |                     return res.end()
28 |                 }
29 |                 if (pathname == "/api/list") {
30 |                     var target = [];
31 |                     var key = url.parse(req.url, true).query.key;
32 |                     var type = url.parse(req.url, true).query.type;
33 |                     var page = url.parse(req.url, true).query.page;
34 |                     var limit = url.parse(req.url, true).query.limit;
35 | 
36 |                     data.forEach(function(item) {
37 |                         if (item.title.match(key) != null) {
38 |                             target.push(item)
39 |                         }
40 |                     })
41 |                     var newArr = [];
42 |                     if (type == "normal") {
43 |                         newArr = target;
44 |                     } else if (type == "sale") {
45 |                         newArr = target.slice(0).sort(function(a, b) {
46 |                             return a.sale - b.sale
47 |                         })
48 |                     } else if (type == "asort") {
49 |                         newArr = target.slice(0).sort(function(a, b) {
50 |                             return a.price - b.price
51 |                         })
52 |                     } else if (type == "desort") {
53 |                         newArr = target.slice(0).sort(function(a, b) {
54 |                             return b.price - a.price
55 |                         })
56 |                     } else if (type == "credit") {
57 |                         newArr = target.slice(0).sort(function(a, b) {
58 |                             return a.credit - b.credit
59 |                         })
60 |                     }
61 |                     var total = Math.ceil(newArr.length / limit);
62 |                     console.log(total)
63 |                     endArr = newArr.slice((page - 1) * limit, page * limit)
64 |                     res.end(JSON.stringify({ code: 1, msg: endArr, total: total }))
65 |                         //对接口
66 |                 } else {
67 |                     pathname = pathname == "/" ? "index.html" : pathname;
68 |                     res.end(fs.readFileSync(path.join(__dirname, 'src', pathname)))
69 |                 }
70 |             }
71 |         }))
72 | })
73 | gulp.task("dev", gulp.series("sass", "webserver", "watch"))


--------------------------------------------------------------------------------
/src/css/common.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box; }
  3 | 
  4 | html,
  5 | body,
  6 | div,
  7 | span,
  8 | applet,
  9 | object,
 10 | iframe,
 11 | h1,
 12 | h2,
 13 | h3,
 14 | h4,
 15 | h5,
 16 | h6,
 17 | p,
 18 | blockquote,
 19 | pre,
 20 | a,
 21 | abbr,
 22 | acronym,
 23 | address,
 24 | big,
 25 | cite,
 26 | code,
 27 | del,
 28 | dfn,
 29 | em,
 30 | img,
 31 | ins,
 32 | kbd,
 33 | q,
 34 | s,
 35 | samp,
 36 | small,
 37 | strike,
 38 | strong,
 39 | sub,
 40 | sup,
 41 | tt,
 42 | var,
 43 | b,
 44 | u,
 45 | i,
 46 | center,
 47 | dl,
 48 | dt,
 49 | dd,
 50 | ol,
 51 | ul,
 52 | li,
 53 | fieldset,
 54 | form,
 55 | label,
 56 | legend,
 57 | table,
 58 | caption,
 59 | tbody,
 60 | tfoot,
 61 | thead,
 62 | tr,
 63 | th,
 64 | td,
 65 | article,
 66 | aside,
 67 | canvas,
 68 | details,
 69 | figcaption,
 70 | figure,
 71 | footer,
 72 | header,
 73 | hgroup,
 74 | menu,
 75 | nav,
 76 | section,
 77 | summary,
 78 | time,
 79 | mark,
 80 | audio,
 81 | video {
 82 |   margin: 0;
 83 |   padding: 0;
 84 |   border: none;
 85 |   outline: 0;
 86 |   font-family: STHeitiSC-Light;
 87 |   font: inherit;
 88 |   vertical-align: baseline; }
 89 | 
 90 | html,
 91 | body,
 92 | form,
 93 | fieldset,
 94 | p,
 95 | div,
 96 | h1,
 97 | h2,
 98 | h3,
 99 | h4,
100 | h5,
101 | h6 {
102 |   -webkit-text-size-adjust: none; }
103 | 
104 | html,
105 | body {
106 |   width: 100%;
107 |   height: 100%; }
108 | 
109 | body {
110 |   font-family: arial, sans-serif; }
111 | 
112 | ol,
113 | ul {
114 |   list-style: none; }
115 | 
116 | blockquote,
117 | q {
118 |   quotes: none; }
119 | 
120 | blockquote:before,
121 | blockquote:after,
122 | q:before,
123 | q:after {
124 |   content: '';
125 |   content: none; }
126 | 
127 | ins,
128 | a {
129 |   text-decoration: none; }
130 | 
131 | del {
132 |   text-decoration: line-through; }
133 | 
134 | table {
135 |   border-collapse: collapse;
136 |   border-spacing: 0; }
137 | 
138 | img {
139 |   display: inline-block; }
140 | 
141 | textarea {
142 |   border: none;
143 |   background: none;
144 |   outline: none;
145 |   -webkit-appearance: none; }
146 | 
147 | * {
148 |   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
149 |   -moz-tap-highlight-color: rgba(0, 0, 0, 0);
150 |   -ms-tap-highlight-color: rgba(0, 0, 0, 0);
151 |   -o-tap-highlight-color: rgba(0, 0, 0, 0); }
152 | 
153 | /*html {
154 |     font-size: $browser-default-font-size;
155 | }*/
156 | html {
157 |   font-size: 37.5px; }
158 | 


--------------------------------------------------------------------------------
/src/css/index.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box; }
  3 | 
  4 | html,
  5 | body,
  6 | div,
  7 | span,
  8 | applet,
  9 | object,
 10 | iframe,
 11 | h1,
 12 | h2,
 13 | h3,
 14 | h4,
 15 | h5,
 16 | h6,
 17 | p,
 18 | blockquote,
 19 | pre,
 20 | a,
 21 | abbr,
 22 | acronym,
 23 | address,
 24 | big,
 25 | cite,
 26 | code,
 27 | del,
 28 | dfn,
 29 | em,
 30 | img,
 31 | ins,
 32 | kbd,
 33 | q,
 34 | s,
 35 | samp,
 36 | small,
 37 | strike,
 38 | strong,
 39 | sub,
 40 | sup,
 41 | tt,
 42 | var,
 43 | b,
 44 | u,
 45 | i,
 46 | center,
 47 | dl,
 48 | dt,
 49 | dd,
 50 | ol,
 51 | ul,
 52 | li,
 53 | fieldset,
 54 | form,
 55 | label,
 56 | legend,
 57 | table,
 58 | caption,
 59 | tbody,
 60 | tfoot,
 61 | thead,
 62 | tr,
 63 | th,
 64 | td,
 65 | article,
 66 | aside,
 67 | canvas,
 68 | details,
 69 | figcaption,
 70 | figure,
 71 | footer,
 72 | header,
 73 | hgroup,
 74 | menu,
 75 | nav,
 76 | section,
 77 | summary,
 78 | time,
 79 | mark,
 80 | audio,
 81 | video {
 82 |   margin: 0;
 83 |   padding: 0;
 84 |   border: none;
 85 |   outline: 0;
 86 |   font-family: STHeitiSC-Light;
 87 |   font: inherit;
 88 |   vertical-align: baseline; }
 89 | 
 90 | html,
 91 | body,
 92 | form,
 93 | fieldset,
 94 | p,
 95 | div,
 96 | h1,
 97 | h2,
 98 | h3,
 99 | h4,
100 | h5,
101 | h6 {
102 |   -webkit-text-size-adjust: none; }
103 | 
104 | html,
105 | body {
106 |   width: 100%;
107 |   height: 100%; }
108 | 
109 | body {
110 |   font-family: arial, sans-serif; }
111 | 
112 | ol,
113 | ul {
114 |   list-style: none; }
115 | 
116 | blockquote,
117 | q {
118 |   quotes: none; }
119 | 
120 | blockquote:before,
121 | blockquote:after,
122 | q:before,
123 | q:after {
124 |   content: '';
125 |   content: none; }
126 | 
127 | ins,
128 | a {
129 |   text-decoration: none; }
130 | 
131 | del {
132 |   text-decoration: line-through; }
133 | 
134 | table {
135 |   border-collapse: collapse;
136 |   border-spacing: 0; }
137 | 
138 | img {
139 |   display: inline-block; }
140 | 
141 | textarea {
142 |   border: none;
143 |   background: none;
144 |   outline: none;
145 |   -webkit-appearance: none; }
146 | 
147 | * {
148 |   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
149 |   -moz-tap-highlight-color: rgba(0, 0, 0, 0);
150 |   -ms-tap-highlight-color: rgba(0, 0, 0, 0);
151 |   -o-tap-highlight-color: rgba(0, 0, 0, 0); }
152 | 
153 | /*html {
154 |     font-size: $browser-default-font-size;
155 | }*/
156 | html {
157 |   font-size: 37.5px; }
158 | 
159 | .wrap {
160 |   width: 100%;
161 |   height: 100%;
162 |   display: flex;
163 |   display: -webkit-flex;
164 |   -webkit-flex-direction: column;
165 |   flex-direction: column; }
166 | 
167 | header {
168 |   width: 100%;
169 |   height: 1.17333rem;
170 |   display: flex;
171 |   display: -webkit-flex;
172 |   -webkit-align-items: center;
173 |   align-items: center;
174 |   background: #a65;
175 |   font-size: 0.4rem;
176 |   padding: 0 0.26667rem; }
177 |   header > input {
178 |     font-size: 0.42667rem;
179 |     width: 5.33333rem;
180 |     height: 0.74667rem;
181 |     border: 0;
182 |     outline-color: #a80; }
183 |   header > button {
184 |     width: 1.86667rem;
185 |     height: 0.8rem;
186 |     font-size: 0.42667rem;
187 |     border: 0.02667rem solid #333; }
188 | 
189 | section > div {
190 |   flex-shrink: 0; }
191 | 
192 | section {
193 |   width: 100%;
194 |   -webkit-flex: 1 1 0%;
195 |   flex: 1 1 0%;
196 |   display: flex;
197 |   display: -webkit-flex;
198 |   -webkit-flex-direction: column;
199 |   flex-direction: column; }
200 |   section .sort-wrap {
201 |     width: 100%;
202 |     height: 1.33333rem;
203 |     font-size: 0.37333rem;
204 |     display: flex;
205 |     display: -webkit-flex;
206 |     -webkit-align-items: center;
207 |     align-items: center;
208 |     -webkit-justify-content: center;
209 |     justify-content: center; }
210 |     section .sort-wrap > p {
211 |       -webkit-flex: 1 1 0%;
212 |       flex: 1 1 0%;
213 |       text-align: center;
214 |       height: 1.28rem;
215 |       line-height: 1.28rem;
216 |       font-size: 0.42667rem;
217 |       background: #eee; }
218 |     section .sort-wrap .all {
219 |       position: relative; }
220 |       section .sort-wrap .all .type {
221 |         width: 4rem;
222 |         background: #fff;
223 |         top: 1.06667rem;
224 |         left: 0;
225 |         z-index: 2;
226 |         position: absolute;
227 |         display: flex;
228 |         display: -webkit-flex;
229 |         -webkit-flex-direction: column;
230 |         flex-direction: column; }
231 |         section .sort-wrap .all .type > b {
232 |           border-bottom: 0.02667rem solid #ddd; }
233 |       section .sort-wrap .all .none {
234 |         display: none; }
235 |   section .list-wrap {
236 |     width: 100%;
237 |     overflow: hidden;
238 |     -webkit-flex: 1 1 0%;
239 |     flex: 1 1 0%;
240 |     overflow: hidden;
241 |     position: relative; }
242 |     section .list-wrap > .list-con {
243 |       width: 100%;
244 |       min-height: 100%; }
245 |       section .list-wrap > .list-con > p {
246 |         width: 100%;
247 |         height: 1.33333rem;
248 |         line-height: 1.33333rem;
249 |         font-size: 0.42667rem;
250 |         text-align: center;
251 |         background: #eee;
252 |         color: #466;
253 |         position: absolute;
254 |         left: 0; }
255 |       section .list-wrap > .list-con > #pullDown {
256 |         top: -1.33333rem; }
257 |       section .list-wrap > .list-con > #pullUp {
258 |         bottom: -1.33333rem; }
259 |       section .list-wrap > .list-con > .dl-box {
260 |         width: 100%; }
261 |         section .list-wrap > .list-con > .dl-box > dl {
262 |           width: 100%;
263 |           font-size: 0.37333rem;
264 |           display: flex;
265 |           display: -webkit-flex;
266 |           -webkit-align-items: center;
267 |           align-items: center;
268 |           padding: 0.26667rem; }
269 |           section .list-wrap > .list-con > .dl-box > dl dt {
270 |             width: 2.4rem;
271 |             height: 2.4rem;
272 |             margin-right: 0.26667rem; }
273 |             section .list-wrap > .list-con > .dl-box > dl dt > img {
274 |               width: 100%;
275 |               height: 100%; }
276 |         section .list-wrap > .list-con > .dl-box dd {
277 |           -webkit-flex: 1 1 0%;
278 |           flex: 1 1 0%;
279 |           font-size: 0.42667rem; }
280 |       section .list-wrap > .list-con .table {
281 |         width: 100%;
282 |         display: flex;
283 |         display: -webkit-flex;
284 |         -webkit-align-items: center;
285 |         align-items: center;
286 |         -webkit-flex-wrap: wrap;
287 |         flex-wrap: wrap; }
288 |         section .list-wrap > .list-con .table > dl {
289 |           width: 50%;
290 |           font-size: 0.37333rem;
291 |           display: flex;
292 |           display: -webkit-flex;
293 |           -webkit-align-items: center;
294 |           align-items: center;
295 |           -webkit-flex-direction: column;
296 |           flex-direction: column;
297 |           padding: 0.26667rem; }
298 |           section .list-wrap > .list-con .table > dl dt {
299 |             width: 4.53333rem;
300 |             height: 4.53333rem;
301 |             margin-right: 0.26667rem; }
302 |             section .list-wrap > .list-con .table > dl dt > img {
303 |               width: 100%;
304 |               height: 100%; }
305 |         section .list-wrap > .list-con .table dd {
306 |           -webkit-flex: 1 1 0%;
307 |           flex: 1 1 0%;
308 |           font-size: 0.42667rem; }
309 | 


--------------------------------------------------------------------------------
/src/css/index1.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box; }
  3 | 
  4 | html,
  5 | body,
  6 | div,
  7 | span,
  8 | applet,
  9 | object,
 10 | iframe,
 11 | h1,
 12 | h2,
 13 | h3,
 14 | h4,
 15 | h5,
 16 | h6,
 17 | p,
 18 | blockquote,
 19 | pre,
 20 | a,
 21 | abbr,
 22 | acronym,
 23 | address,
 24 | big,
 25 | cite,
 26 | code,
 27 | del,
 28 | dfn,
 29 | em,
 30 | img,
 31 | ins,
 32 | kbd,
 33 | q,
 34 | s,
 35 | samp,
 36 | small,
 37 | strike,
 38 | strong,
 39 | sub,
 40 | sup,
 41 | tt,
 42 | var,
 43 | b,
 44 | u,
 45 | i,
 46 | center,
 47 | dl,
 48 | dt,
 49 | dd,
 50 | ol,
 51 | ul,
 52 | li,
 53 | fieldset,
 54 | form,
 55 | label,
 56 | legend,
 57 | table,
 58 | caption,
 59 | tbody,
 60 | tfoot,
 61 | thead,
 62 | tr,
 63 | th,
 64 | td,
 65 | article,
 66 | aside,
 67 | canvas,
 68 | details,
 69 | figcaption,
 70 | figure,
 71 | footer,
 72 | header,
 73 | hgroup,
 74 | menu,
 75 | nav,
 76 | section,
 77 | summary,
 78 | time,
 79 | mark,
 80 | audio,
 81 | video {
 82 |   margin: 0;
 83 |   padding: 0;
 84 |   border: none;
 85 |   outline: 0;
 86 |   font-family: STHeitiSC-Light;
 87 |   font: inherit;
 88 |   vertical-align: baseline; }
 89 | 
 90 | html,
 91 | body,
 92 | form,
 93 | fieldset,
 94 | p,
 95 | div,
 96 | h1,
 97 | h2,
 98 | h3,
 99 | h4,
100 | h5,
101 | h6 {
102 |   -webkit-text-size-adjust: none; }
103 | 
104 | html,
105 | body {
106 |   width: 100%;
107 |   height: 100%; }
108 | 
109 | body {
110 |   font-family: arial, sans-serif; }
111 | 
112 | ol,
113 | ul {
114 |   list-style: none; }
115 | 
116 | blockquote,
117 | q {
118 |   quotes: none; }
119 | 
120 | blockquote:before,
121 | blockquote:after,
122 | q:before,
123 | q:after {
124 |   content: '';
125 |   content: none; }
126 | 
127 | ins,
128 | a {
129 |   text-decoration: none; }
130 | 
131 | del {
132 |   text-decoration: line-through; }
133 | 
134 | table {
135 |   border-collapse: collapse;
136 |   border-spacing: 0; }
137 | 
138 | img {
139 |   display: inline-block; }
140 | 
141 | textarea {
142 |   border: none;
143 |   background: none;
144 |   outline: none;
145 |   -webkit-appearance: none; }
146 | 
147 | * {
148 |   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
149 |   -moz-tap-highlight-color: rgba(0, 0, 0, 0);
150 |   -ms-tap-highlight-color: rgba(0, 0, 0, 0);
151 |   -o-tap-highlight-color: rgba(0, 0, 0, 0); }
152 | 
153 | /*html {
154 |     font-size: $browser-default-font-size;
155 | }*/
156 | html {
157 |   font-size: 37.5px; }
158 | 
159 | .wrap {
160 |   width: 100%;
161 |   height: 100%;
162 |   display: flex;
163 |   display: -webkit-flex;
164 |   -webkit-flex-direction: column;
165 |   flex-direction: column; }
166 | 
167 | header {
168 |   width: 100%;
169 |   height: 1.17333rem;
170 |   display: flex;
171 |   display: -webkit-flex;
172 |   -webkit-align-items: center;
173 |   align-items: center; }
174 | 
175 | section > div {
176 |   flex-shrink: 0; }
177 | 
178 | section {
179 |   -webkit-flex: 1 1 0%;
180 |   flex: 1 1 0%;
181 |   background: #f56; }
182 | 


--------------------------------------------------------------------------------
/src/css/swiper.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Swiper 4.3.3
  3 |  * Most modern mobile touch slider and framework with hardware accelerated transitions
  4 |  * http://www.idangero.us/swiper/
  5 |  *
  6 |  * Copyright 2014-2018 Vladimir Kharlampidi
  7 |  *
  8 |  * Released under the MIT License
  9 |  *
 10 |  * Released on: June 5, 2018
 11 |  */
 12 | .swiper-container {
 13 |   margin: 0 auto;
 14 |   position: relative;
 15 |   overflow: hidden;
 16 |   list-style: none;
 17 |   padding: 0;
 18 |   /* Fix of Webkit flickering */
 19 |   z-index: 1;
 20 | }
 21 | .swiper-container-no-flexbox .swiper-slide {
 22 |   float: left;
 23 | }
 24 | .swiper-container-vertical > .swiper-wrapper {
 25 |   -webkit-box-orient: vertical;
 26 |   -webkit-box-direction: normal;
 27 |   -webkit-flex-direction: column;
 28 |   -ms-flex-direction: column;
 29 |   flex-direction: column;
 30 | }
 31 | .swiper-wrapper {
 32 |   position: relative;
 33 |   width: 100%;
 34 |   height: 100%;
 35 |   z-index: 1;
 36 |   display: -webkit-box;
 37 |   display: -webkit-flex;
 38 |   display: -ms-flexbox;
 39 |   display: flex;
 40 |   -webkit-transition-property: -webkit-transform;
 41 |   transition-property: -webkit-transform;
 42 |   -o-transition-property: transform;
 43 |   transition-property: transform;
 44 |   transition-property: transform, -webkit-transform;
 45 |   -webkit-box-sizing: content-box;
 46 |   box-sizing: content-box;
 47 | }
 48 | .swiper-container-android .swiper-slide,
 49 | .swiper-wrapper {
 50 |   -webkit-transform: translate3d(0px, 0, 0);
 51 |   transform: translate3d(0px, 0, 0);
 52 | }
 53 | .swiper-container-multirow > .swiper-wrapper {
 54 |   -webkit-flex-wrap: wrap;
 55 |   -ms-flex-wrap: wrap;
 56 |   flex-wrap: wrap;
 57 | }
 58 | .swiper-container-free-mode > .swiper-wrapper {
 59 |   -webkit-transition-timing-function: ease-out;
 60 |   -o-transition-timing-function: ease-out;
 61 |   transition-timing-function: ease-out;
 62 |   margin: 0 auto;
 63 | }
 64 | .swiper-slide {
 65 |   -webkit-flex-shrink: 0;
 66 |   -ms-flex-negative: 0;
 67 |   flex-shrink: 0;
 68 |   width: 100%;
 69 |   height: 100%;
 70 |   position: relative;
 71 |   -webkit-transition-property: -webkit-transform;
 72 |   transition-property: -webkit-transform;
 73 |   -o-transition-property: transform;
 74 |   transition-property: transform;
 75 |   transition-property: transform, -webkit-transform;
 76 | }
 77 | .swiper-invisible-blank-slide {
 78 |   visibility: hidden;
 79 | }
 80 | /* Auto Height */
 81 | .swiper-container-autoheight,
 82 | .swiper-container-autoheight .swiper-slide {
 83 |   height: auto;
 84 | }
 85 | .swiper-container-autoheight .swiper-wrapper {
 86 |   -webkit-box-align: start;
 87 |   -webkit-align-items: flex-start;
 88 |   -ms-flex-align: start;
 89 |   align-items: flex-start;
 90 |   -webkit-transition-property: height, -webkit-transform;
 91 |   transition-property: height, -webkit-transform;
 92 |   -o-transition-property: transform, height;
 93 |   transition-property: transform, height;
 94 |   transition-property: transform, height, -webkit-transform;
 95 | }
 96 | /* 3D Effects */
 97 | .swiper-container-3d {
 98 |   -webkit-perspective: 1200px;
 99 |   perspective: 1200px;
100 | }
101 | .swiper-container-3d .swiper-wrapper,
102 | .swiper-container-3d .swiper-slide,
103 | .swiper-container-3d .swiper-slide-shadow-left,
104 | .swiper-container-3d .swiper-slide-shadow-right,
105 | .swiper-container-3d .swiper-slide-shadow-top,
106 | .swiper-container-3d .swiper-slide-shadow-bottom,
107 | .swiper-container-3d .swiper-cube-shadow {
108 |   -webkit-transform-style: preserve-3d;
109 |   transform-style: preserve-3d;
110 | }
111 | .swiper-container-3d .swiper-slide-shadow-left,
112 | .swiper-container-3d .swiper-slide-shadow-right,
113 | .swiper-container-3d .swiper-slide-shadow-top,
114 | .swiper-container-3d .swiper-slide-shadow-bottom {
115 |   position: absolute;
116 |   left: 0;
117 |   top: 0;
118 |   width: 100%;
119 |   height: 100%;
120 |   pointer-events: none;
121 |   z-index: 10;
122 | }
123 | .swiper-container-3d .swiper-slide-shadow-left {
124 |   background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
125 |   background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
126 |   background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
127 |   background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
128 | }
129 | .swiper-container-3d .swiper-slide-shadow-right {
130 |   background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
131 |   background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
132 |   background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
133 |   background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
134 | }
135 | .swiper-container-3d .swiper-slide-shadow-top {
136 |   background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
137 |   background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
138 |   background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
139 |   background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
140 | }
141 | .swiper-container-3d .swiper-slide-shadow-bottom {
142 |   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
143 |   background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
144 |   background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
145 |   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
146 | }
147 | /* IE10 Windows Phone 8 Fixes */
148 | .swiper-container-wp8-horizontal,
149 | .swiper-container-wp8-horizontal > .swiper-wrapper {
150 |   -ms-touch-action: pan-y;
151 |   touch-action: pan-y;
152 | }
153 | .swiper-container-wp8-vertical,
154 | .swiper-container-wp8-vertical > .swiper-wrapper {
155 |   -ms-touch-action: pan-x;
156 |   touch-action: pan-x;
157 | }
158 | .swiper-button-prev,
159 | .swiper-button-next {
160 |   position: absolute;
161 |   top: 50%;
162 |   width: 27px;
163 |   height: 44px;
164 |   margin-top: -22px;
165 |   z-index: 10;
166 |   cursor: pointer;
167 |   background-size: 27px 44px;
168 |   background-position: center;
169 |   background-repeat: no-repeat;
170 | }
171 | .swiper-button-prev.swiper-button-disabled,
172 | .swiper-button-next.swiper-button-disabled {
173 |   opacity: 0.35;
174 |   cursor: auto;
175 |   pointer-events: none;
176 | }
177 | .swiper-button-prev,
178 | .swiper-container-rtl .swiper-button-next {
179 |   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
180 |   left: 10px;
181 |   right: auto;
182 | }
183 | .swiper-button-next,
184 | .swiper-container-rtl .swiper-button-prev {
185 |   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
186 |   right: 10px;
187 |   left: auto;
188 | }
189 | .swiper-button-prev.swiper-button-white,
190 | .swiper-container-rtl .swiper-button-next.swiper-button-white {
191 |   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
192 | }
193 | .swiper-button-next.swiper-button-white,
194 | .swiper-container-rtl .swiper-button-prev.swiper-button-white {
195 |   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
196 | }
197 | .swiper-button-prev.swiper-button-black,
198 | .swiper-container-rtl .swiper-button-next.swiper-button-black {
199 |   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
200 | }
201 | .swiper-button-next.swiper-button-black,
202 | .swiper-container-rtl .swiper-button-prev.swiper-button-black {
203 |   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
204 | }
205 | .swiper-button-lock {
206 |   display: none;
207 | }
208 | .swiper-pagination {
209 |   position: absolute;
210 |   text-align: center;
211 |   -webkit-transition: 300ms opacity;
212 |   -o-transition: 300ms opacity;
213 |   transition: 300ms opacity;
214 |   -webkit-transform: translate3d(0, 0, 0);
215 |   transform: translate3d(0, 0, 0);
216 |   z-index: 10;
217 | }
218 | .swiper-pagination.swiper-pagination-hidden {
219 |   opacity: 0;
220 | }
221 | /* Common Styles */
222 | .swiper-pagination-fraction,
223 | .swiper-pagination-custom,
224 | .swiper-container-horizontal > .swiper-pagination-bullets {
225 |   bottom: 10px;
226 |   left: 0;
227 |   width: 100%;
228 | }
229 | /* Bullets */
230 | .swiper-pagination-bullets-dynamic {
231 |   overflow: hidden;
232 |   font-size: 0;
233 | }
234 | .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
235 |   -webkit-transform: scale(0.33);
236 |   -ms-transform: scale(0.33);
237 |   transform: scale(0.33);
238 |   position: relative;
239 | }
240 | .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
241 |   -webkit-transform: scale(1);
242 |   -ms-transform: scale(1);
243 |   transform: scale(1);
244 | }
245 | .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
246 |   -webkit-transform: scale(1);
247 |   -ms-transform: scale(1);
248 |   transform: scale(1);
249 | }
250 | .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
251 |   -webkit-transform: scale(0.66);
252 |   -ms-transform: scale(0.66);
253 |   transform: scale(0.66);
254 | }
255 | .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
256 |   -webkit-transform: scale(0.33);
257 |   -ms-transform: scale(0.33);
258 |   transform: scale(0.33);
259 | }
260 | .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
261 |   -webkit-transform: scale(0.66);
262 |   -ms-transform: scale(0.66);
263 |   transform: scale(0.66);
264 | }
265 | .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
266 |   -webkit-transform: scale(0.33);
267 |   -ms-transform: scale(0.33);
268 |   transform: scale(0.33);
269 | }
270 | .swiper-pagination-bullet {
271 |   width: 8px;
272 |   height: 8px;
273 |   display: inline-block;
274 |   border-radius: 100%;
275 |   background: #000;
276 |   opacity: 0.2;
277 | }
278 | button.swiper-pagination-bullet {
279 |   border: none;
280 |   margin: 0;
281 |   padding: 0;
282 |   -webkit-box-shadow: none;
283 |   box-shadow: none;
284 |   -webkit-appearance: none;
285 |   -moz-appearance: none;
286 |   appearance: none;
287 | }
288 | .swiper-pagination-clickable .swiper-pagination-bullet {
289 |   cursor: pointer;
290 | }
291 | .swiper-pagination-bullet-active {
292 |   opacity: 1;
293 |   background: #007aff;
294 | }
295 | .swiper-container-vertical > .swiper-pagination-bullets {
296 |   right: 10px;
297 |   top: 50%;
298 |   -webkit-transform: translate3d(0px, -50%, 0);
299 |   transform: translate3d(0px, -50%, 0);
300 | }
301 | .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
302 |   margin: 6px 0;
303 |   display: block;
304 | }
305 | .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
306 |   top: 50%;
307 |   -webkit-transform: translateY(-50%);
308 |   -ms-transform: translateY(-50%);
309 |   transform: translateY(-50%);
310 |   width: 8px;
311 | }
312 | .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
313 |   display: inline-block;
314 |   -webkit-transition: 200ms top, 200ms -webkit-transform;
315 |   transition: 200ms top, 200ms -webkit-transform;
316 |   -o-transition: 200ms transform, 200ms top;
317 |   transition: 200ms transform, 200ms top;
318 |   transition: 200ms transform, 200ms top, 200ms -webkit-transform;
319 | }
320 | .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
321 |   margin: 0 4px;
322 | }
323 | .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
324 |   left: 50%;
325 |   -webkit-transform: translateX(-50%);
326 |   -ms-transform: translateX(-50%);
327 |   transform: translateX(-50%);
328 |   white-space: nowrap;
329 | }
330 | .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
331 |   -webkit-transition: 200ms left, 200ms -webkit-transform;
332 |   transition: 200ms left, 200ms -webkit-transform;
333 |   -o-transition: 200ms transform, 200ms left;
334 |   transition: 200ms transform, 200ms left;
335 |   transition: 200ms transform, 200ms left, 200ms -webkit-transform;
336 | }
337 | .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
338 |   -webkit-transition: 200ms right, 200ms -webkit-transform;
339 |   transition: 200ms right, 200ms -webkit-transform;
340 |   -o-transition: 200ms transform, 200ms right;
341 |   transition: 200ms transform, 200ms right;
342 |   transition: 200ms transform, 200ms right, 200ms -webkit-transform;
343 | }
344 | /* Progress */
345 | .swiper-pagination-progressbar {
346 |   background: rgba(0, 0, 0, 0.25);
347 |   position: absolute;
348 | }
349 | .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
350 |   background: #007aff;
351 |   position: absolute;
352 |   left: 0;
353 |   top: 0;
354 |   width: 100%;
355 |   height: 100%;
356 |   -webkit-transform: scale(0);
357 |   -ms-transform: scale(0);
358 |   transform: scale(0);
359 |   -webkit-transform-origin: left top;
360 |   -ms-transform-origin: left top;
361 |   transform-origin: left top;
362 | }
363 | .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
364 |   -webkit-transform-origin: right top;
365 |   -ms-transform-origin: right top;
366 |   transform-origin: right top;
367 | }
368 | .swiper-container-horizontal > .swiper-pagination-progressbar,
369 | .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
370 |   width: 100%;
371 |   height: 4px;
372 |   left: 0;
373 |   top: 0;
374 | }
375 | .swiper-container-vertical > .swiper-pagination-progressbar,
376 | .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
377 |   width: 4px;
378 |   height: 100%;
379 |   left: 0;
380 |   top: 0;
381 | }
382 | .swiper-pagination-white .swiper-pagination-bullet-active {
383 |   background: #ffffff;
384 | }
385 | .swiper-pagination-progressbar.swiper-pagination-white {
386 |   background: rgba(255, 255, 255, 0.25);
387 | }
388 | .swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
389 |   background: #ffffff;
390 | }
391 | .swiper-pagination-black .swiper-pagination-bullet-active {
392 |   background: #000000;
393 | }
394 | .swiper-pagination-progressbar.swiper-pagination-black {
395 |   background: rgba(0, 0, 0, 0.25);
396 | }
397 | .swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
398 |   background: #000000;
399 | }
400 | .swiper-pagination-lock {
401 |   display: none;
402 | }
403 | /* Scrollbar */
404 | .swiper-scrollbar {
405 |   border-radius: 10px;
406 |   position: relative;
407 |   -ms-touch-action: none;
408 |   background: rgba(0, 0, 0, 0.1);
409 | }
410 | .swiper-container-horizontal > .swiper-scrollbar {
411 |   position: absolute;
412 |   left: 1%;
413 |   bottom: 3px;
414 |   z-index: 50;
415 |   height: 5px;
416 |   width: 98%;
417 | }
418 | .swiper-container-vertical > .swiper-scrollbar {
419 |   position: absolute;
420 |   right: 3px;
421 |   top: 1%;
422 |   z-index: 50;
423 |   width: 5px;
424 |   height: 98%;
425 | }
426 | .swiper-scrollbar-drag {
427 |   height: 100%;
428 |   width: 100%;
429 |   position: relative;
430 |   background: rgba(0, 0, 0, 0.5);
431 |   border-radius: 10px;
432 |   left: 0;
433 |   top: 0;
434 | }
435 | .swiper-scrollbar-cursor-drag {
436 |   cursor: move;
437 | }
438 | .swiper-scrollbar-lock {
439 |   display: none;
440 | }
441 | .swiper-zoom-container {
442 |   width: 100%;
443 |   height: 100%;
444 |   display: -webkit-box;
445 |   display: -webkit-flex;
446 |   display: -ms-flexbox;
447 |   display: flex;
448 |   -webkit-box-pack: center;
449 |   -webkit-justify-content: center;
450 |   -ms-flex-pack: center;
451 |   justify-content: center;
452 |   -webkit-box-align: center;
453 |   -webkit-align-items: center;
454 |   -ms-flex-align: center;
455 |   align-items: center;
456 |   text-align: center;
457 | }
458 | .swiper-zoom-container > img,
459 | .swiper-zoom-container > svg,
460 | .swiper-zoom-container > canvas {
461 |   max-width: 100%;
462 |   max-height: 100%;
463 |   -o-object-fit: contain;
464 |   object-fit: contain;
465 | }
466 | .swiper-slide-zoomed {
467 |   cursor: move;
468 | }
469 | /* Preloader */
470 | .swiper-lazy-preloader {
471 |   width: 42px;
472 |   height: 42px;
473 |   position: absolute;
474 |   left: 50%;
475 |   top: 50%;
476 |   margin-left: -21px;
477 |   margin-top: -21px;
478 |   z-index: 10;
479 |   -webkit-transform-origin: 50%;
480 |   -ms-transform-origin: 50%;
481 |   transform-origin: 50%;
482 |   -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
483 |   animation: swiper-preloader-spin 1s steps(12, end) infinite;
484 | }
485 | .swiper-lazy-preloader:after {
486 |   display: block;
487 |   content: '';
488 |   width: 100%;
489 |   height: 100%;
490 |   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
491 |   background-position: 50%;
492 |   background-size: 100%;
493 |   background-repeat: no-repeat;
494 | }
495 | .swiper-lazy-preloader-white:after {
496 |   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
497 | }
498 | @-webkit-keyframes swiper-preloader-spin {
499 |   100% {
500 |     -webkit-transform: rotate(360deg);
501 |     transform: rotate(360deg);
502 |   }
503 | }
504 | @keyframes swiper-preloader-spin {
505 |   100% {
506 |     -webkit-transform: rotate(360deg);
507 |     transform: rotate(360deg);
508 |   }
509 | }
510 | /* a11y */
511 | .swiper-container .swiper-notification {
512 |   position: absolute;
513 |   left: 0;
514 |   top: 0;
515 |   pointer-events: none;
516 |   opacity: 0;
517 |   z-index: -1000;
518 | }
519 | .swiper-container-fade.swiper-container-free-mode .swiper-slide {
520 |   -webkit-transition-timing-function: ease-out;
521 |   -o-transition-timing-function: ease-out;
522 |   transition-timing-function: ease-out;
523 | }
524 | .swiper-container-fade .swiper-slide {
525 |   pointer-events: none;
526 |   -webkit-transition-property: opacity;
527 |   -o-transition-property: opacity;
528 |   transition-property: opacity;
529 | }
530 | .swiper-container-fade .swiper-slide .swiper-slide {
531 |   pointer-events: none;
532 | }
533 | .swiper-container-fade .swiper-slide-active,
534 | .swiper-container-fade .swiper-slide-active .swiper-slide-active {
535 |   pointer-events: auto;
536 | }
537 | .swiper-container-cube {
538 |   overflow: visible;
539 | }
540 | .swiper-container-cube .swiper-slide {
541 |   pointer-events: none;
542 |   -webkit-backface-visibility: hidden;
543 |   backface-visibility: hidden;
544 |   z-index: 1;
545 |   visibility: hidden;
546 |   -webkit-transform-origin: 0 0;
547 |   -ms-transform-origin: 0 0;
548 |   transform-origin: 0 0;
549 |   width: 100%;
550 |   height: 100%;
551 | }
552 | .swiper-container-cube .swiper-slide .swiper-slide {
553 |   pointer-events: none;
554 | }
555 | .swiper-container-cube.swiper-container-rtl .swiper-slide {
556 |   -webkit-transform-origin: 100% 0;
557 |   -ms-transform-origin: 100% 0;
558 |   transform-origin: 100% 0;
559 | }
560 | .swiper-container-cube .swiper-slide-active,
561 | .swiper-container-cube .swiper-slide-active .swiper-slide-active {
562 |   pointer-events: auto;
563 | }
564 | .swiper-container-cube .swiper-slide-active,
565 | .swiper-container-cube .swiper-slide-next,
566 | .swiper-container-cube .swiper-slide-prev,
567 | .swiper-container-cube .swiper-slide-next + .swiper-slide {
568 |   pointer-events: auto;
569 |   visibility: visible;
570 | }
571 | .swiper-container-cube .swiper-slide-shadow-top,
572 | .swiper-container-cube .swiper-slide-shadow-bottom,
573 | .swiper-container-cube .swiper-slide-shadow-left,
574 | .swiper-container-cube .swiper-slide-shadow-right {
575 |   z-index: 0;
576 |   -webkit-backface-visibility: hidden;
577 |   backface-visibility: hidden;
578 | }
579 | .swiper-container-cube .swiper-cube-shadow {
580 |   position: absolute;
581 |   left: 0;
582 |   bottom: 0px;
583 |   width: 100%;
584 |   height: 100%;
585 |   background: #000;
586 |   opacity: 0.6;
587 |   -webkit-filter: blur(50px);
588 |   filter: blur(50px);
589 |   z-index: 0;
590 | }
591 | .swiper-container-flip {
592 |   overflow: visible;
593 | }
594 | .swiper-container-flip .swiper-slide {
595 |   pointer-events: none;
596 |   -webkit-backface-visibility: hidden;
597 |   backface-visibility: hidden;
598 |   z-index: 1;
599 | }
600 | .swiper-container-flip .swiper-slide .swiper-slide {
601 |   pointer-events: none;
602 | }
603 | .swiper-container-flip .swiper-slide-active,
604 | .swiper-container-flip .swiper-slide-active .swiper-slide-active {
605 |   pointer-events: auto;
606 | }
607 | .swiper-container-flip .swiper-slide-shadow-top,
608 | .swiper-container-flip .swiper-slide-shadow-bottom,
609 | .swiper-container-flip .swiper-slide-shadow-left,
610 | .swiper-container-flip .swiper-slide-shadow-right {
611 |   z-index: 0;
612 |   -webkit-backface-visibility: hidden;
613 |   backface-visibility: hidden;
614 | }
615 | .swiper-container-coverflow .swiper-wrapper {
616 |   /* Windows 8 IE 10 fix */
617 |   -ms-perspective: 1200px;
618 | }
619 | 


--------------------------------------------------------------------------------
/src/css/swiper.min.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Swiper 4.3.3
 3 |  * Most modern mobile touch slider and framework with hardware accelerated transitions
 4 |  * http://www.idangero.us/swiper/
 5 |  *
 6 |  * Copyright 2014-2018 Vladimir Kharlampidi
 7 |  *
 8 |  * Released under the MIT License
 9 |  *
10 |  * Released on: June 5, 2018
11 |  */
12 | .swiper-container{margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}.swiper-invisible-blank-slide{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height,-webkit-transform;transition-property:height,-webkit-transform;-o-transition-property:transform,height;transition-property:transform,height;transition-property:transform,height,-webkit-transform}.swiper-container-3d{-webkit-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-wp8-horizontal,.swiper-container-wp8-horizontal>.swiper-wrapper{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-container-wp8-vertical,.swiper-container-wp8-vertical>.swiper-wrapper{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s opacity;-o-transition:.3s opacity;transition:.3s opacity;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:.2s top,.2s -webkit-transform;transition:.2s top,.2s -webkit-transform;-o-transition:.2s transform,.2s top;transition:.2s transform,.2s top;transition:.2s transform,.2s top,.2s -webkit-transform}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s left,.2s -webkit-transform;transition:.2s left,.2s -webkit-transform;-o-transition:.2s transform,.2s left;transition:.2s transform,.2s left;transition:.2s transform,.2s left,.2s -webkit-transform}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s right,.2s -webkit-transform;transition:.2s right,.2s -webkit-transform;-o-transition:.2s transform,.2s right;transition:.2s transform,.2s right;transition:.2s transform,.2s right,.2s -webkit-transform}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;-ms-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-progressbar.swiper-pagination-white{background:rgba(255,255,255,.25)}.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-pagination-progressbar.swiper-pagination-black{background:rgba(0,0,0,.25)}.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill{background:#000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:'';width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-coverflow .swiper-wrapper{-ms-perspective:1200px}


--------------------------------------------------------------------------------
/src/fonts/demo.css:
--------------------------------------------------------------------------------
  1 | /* Logo 字体 */
  2 | @font-face {
  3 |   font-family: "iconfont logo";
  4 |   src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
  5 |   src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
  6 |     url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
  7 |     url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
  8 |     url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
  9 | }
 10 | 
 11 | .logo {
 12 |   font-family: "iconfont logo";
 13 |   font-size: 160px;
 14 |   font-style: normal;
 15 |   -webkit-font-smoothing: antialiased;
 16 |   -moz-osx-font-smoothing: grayscale;
 17 | }
 18 | 
 19 | /* tabs */
 20 | .nav-tabs {
 21 |   position: relative;
 22 | }
 23 | 
 24 | .nav-tabs .nav-more {
 25 |   position: absolute;
 26 |   right: 0;
 27 |   bottom: 0;
 28 |   height: 42px;
 29 |   line-height: 42px;
 30 |   color: #666;
 31 | }
 32 | 
 33 | #tabs {
 34 |   border-bottom: 1px solid #eee;
 35 | }
 36 | 
 37 | #tabs li {
 38 |   cursor: pointer;
 39 |   width: 100px;
 40 |   height: 40px;
 41 |   line-height: 40px;
 42 |   text-align: center;
 43 |   font-size: 16px;
 44 |   border-bottom: 2px solid transparent;
 45 |   position: relative;
 46 |   z-index: 1;
 47 |   margin-bottom: -1px;
 48 |   color: #666;
 49 | }
 50 | 
 51 | 
 52 | #tabs .active {
 53 |   border-bottom-color: #f00;
 54 |   color: #222;
 55 | }
 56 | 
 57 | .tab-container .content {
 58 |   display: none;
 59 | }
 60 | 
 61 | /* 页面布局 */
 62 | .main {
 63 |   padding: 30px 100px;
 64 |   width: 960px;
 65 |   margin: 0 auto;
 66 | }
 67 | 
 68 | .main .logo {
 69 |   color: #333;
 70 |   text-align: left;
 71 |   margin-bottom: 30px;
 72 |   line-height: 1;
 73 |   height: 110px;
 74 |   margin-top: -50px;
 75 |   overflow: hidden;
 76 |   *zoom: 1;
 77 | }
 78 | 
 79 | .main .logo a {
 80 |   font-size: 160px;
 81 |   color: #333;
 82 | }
 83 | 
 84 | .helps {
 85 |   margin-top: 40px;
 86 | }
 87 | 
 88 | .helps pre {
 89 |   padding: 20px;
 90 |   margin: 10px 0;
 91 |   border: solid 1px #e7e1cd;
 92 |   background-color: #fffdef;
 93 |   overflow: auto;
 94 | }
 95 | 
 96 | .icon_lists {
 97 |   width: 100% !important;
 98 |   overflow: hidden;
 99 |   *zoom: 1;
100 | }
101 | 
102 | .icon_lists li {
103 |   width: 100px;
104 |   margin-bottom: 10px;
105 |   margin-right: 20px;
106 |   text-align: center;
107 |   list-style: none !important;
108 |   cursor: default;
109 | }
110 | 
111 | .icon_lists li .code-name {
112 |   line-height: 1.2;
113 | }
114 | 
115 | .icon_lists .icon {
116 |   display: block;
117 |   height: 100px;
118 |   line-height: 100px;
119 |   font-size: 42px;
120 |   margin: 10px auto;
121 |   color: #333;
122 |   -webkit-transition: font-size 0.25s linear, width 0.25s linear;
123 |   -moz-transition: font-size 0.25s linear, width 0.25s linear;
124 |   transition: font-size 0.25s linear, width 0.25s linear;
125 | }
126 | 
127 | .icon_lists .icon:hover {
128 |   font-size: 100px;
129 | }
130 | 
131 | .icon_lists .svg-icon {
132 |   /* 通过设置 font-size 来改变图标大小 */
133 |   width: 1em;
134 |   /* 图标和文字相邻时，垂直对齐 */
135 |   vertical-align: -0.15em;
136 |   /* 通过设置 color 来改变 SVG 的颜色/fill */
137 |   fill: currentColor;
138 |   /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
139 |       normalize.css 中也包含这行 */
140 |   overflow: hidden;
141 | }
142 | 
143 | .icon_lists li .name,
144 | .icon_lists li .code-name {
145 |   color: #666;
146 | }
147 | 
148 | /* markdown 样式 */
149 | .markdown {
150 |   color: #666;
151 |   font-size: 14px;
152 |   line-height: 1.8;
153 | }
154 | 
155 | .highlight {
156 |   line-height: 1.5;
157 | }
158 | 
159 | .markdown img {
160 |   vertical-align: middle;
161 |   max-width: 100%;
162 | }
163 | 
164 | .markdown h1 {
165 |   color: #404040;
166 |   font-weight: 500;
167 |   line-height: 40px;
168 |   margin-bottom: 24px;
169 | }
170 | 
171 | .markdown h2,
172 | .markdown h3,
173 | .markdown h4,
174 | .markdown h5,
175 | .markdown h6 {
176 |   color: #404040;
177 |   margin: 1.6em 0 0.6em 0;
178 |   font-weight: 500;
179 |   clear: both;
180 | }
181 | 
182 | .markdown h1 {
183 |   font-size: 28px;
184 | }
185 | 
186 | .markdown h2 {
187 |   font-size: 22px;
188 | }
189 | 
190 | .markdown h3 {
191 |   font-size: 16px;
192 | }
193 | 
194 | .markdown h4 {
195 |   font-size: 14px;
196 | }
197 | 
198 | .markdown h5 {
199 |   font-size: 12px;
200 | }
201 | 
202 | .markdown h6 {
203 |   font-size: 12px;
204 | }
205 | 
206 | .markdown hr {
207 |   height: 1px;
208 |   border: 0;
209 |   background: #e9e9e9;
210 |   margin: 16px 0;
211 |   clear: both;
212 | }
213 | 
214 | .markdown p {
215 |   margin: 1em 0;
216 | }
217 | 
218 | .markdown>p,
219 | .markdown>blockquote,
220 | .markdown>.highlight,
221 | .markdown>ol,
222 | .markdown>ul {
223 |   width: 80%;
224 | }
225 | 
226 | .markdown ul>li {
227 |   list-style: circle;
228 | }
229 | 
230 | .markdown>ul li,
231 | .markdown blockquote ul>li {
232 |   margin-left: 20px;
233 |   padding-left: 4px;
234 | }
235 | 
236 | .markdown>ul li p,
237 | .markdown>ol li p {
238 |   margin: 0.6em 0;
239 | }
240 | 
241 | .markdown ol>li {
242 |   list-style: decimal;
243 | }
244 | 
245 | .markdown>ol li,
246 | .markdown blockquote ol>li {
247 |   margin-left: 20px;
248 |   padding-left: 4px;
249 | }
250 | 
251 | .markdown code {
252 |   margin: 0 3px;
253 |   padding: 0 5px;
254 |   background: #eee;
255 |   border-radius: 3px;
256 | }
257 | 
258 | .markdown strong,
259 | .markdown b {
260 |   font-weight: 600;
261 | }
262 | 
263 | .markdown>table {
264 |   border-collapse: collapse;
265 |   border-spacing: 0px;
266 |   empty-cells: show;
267 |   border: 1px solid #e9e9e9;
268 |   width: 95%;
269 |   margin-bottom: 24px;
270 | }
271 | 
272 | .markdown>table th {
273 |   white-space: nowrap;
274 |   color: #333;
275 |   font-weight: 600;
276 | }
277 | 
278 | .markdown>table th,
279 | .markdown>table td {
280 |   border: 1px solid #e9e9e9;
281 |   padding: 8px 16px;
282 |   text-align: left;
283 | }
284 | 
285 | .markdown>table th {
286 |   background: #F7F7F7;
287 | }
288 | 
289 | .markdown blockquote {
290 |   font-size: 90%;
291 |   color: #999;
292 |   border-left: 4px solid #e9e9e9;
293 |   padding-left: 0.8em;
294 |   margin: 1em 0;
295 | }
296 | 
297 | .markdown blockquote p {
298 |   margin: 0;
299 | }
300 | 
301 | .markdown .anchor {
302 |   opacity: 0;
303 |   transition: opacity 0.3s ease;
304 |   margin-left: 8px;
305 | }
306 | 
307 | .markdown .waiting {
308 |   color: #ccc;
309 | }
310 | 
311 | .markdown h1:hover .anchor,
312 | .markdown h2:hover .anchor,
313 | .markdown h3:hover .anchor,
314 | .markdown h4:hover .anchor,
315 | .markdown h5:hover .anchor,
316 | .markdown h6:hover .anchor {
317 |   opacity: 1;
318 |   display: inline-block;
319 | }
320 | 
321 | .markdown>br,
322 | .markdown>p>br {
323 |   clear: both;
324 | }
325 | 
326 | 
327 | .hljs {
328 |   display: block;
329 |   background: white;
330 |   padding: 0.5em;
331 |   color: #333333;
332 |   overflow-x: auto;
333 | }
334 | 
335 | .hljs-comment,
336 | .hljs-meta {
337 |   color: #969896;
338 | }
339 | 
340 | .hljs-string,
341 | .hljs-variable,
342 | .hljs-template-variable,
343 | .hljs-strong,
344 | .hljs-emphasis,
345 | .hljs-quote {
346 |   color: #df5000;
347 | }
348 | 
349 | .hljs-keyword,
350 | .hljs-selector-tag,
351 | .hljs-type {
352 |   color: #a71d5d;
353 | }
354 | 
355 | .hljs-literal,
356 | .hljs-symbol,
357 | .hljs-bullet,
358 | .hljs-attribute {
359 |   color: #0086b3;
360 | }
361 | 
362 | .hljs-section,
363 | .hljs-name {
364 |   color: #63a35c;
365 | }
366 | 
367 | .hljs-tag {
368 |   color: #333333;
369 | }
370 | 
371 | .hljs-title,
372 | .hljs-attr,
373 | .hljs-selector-id,
374 | .hljs-selector-class,
375 | .hljs-selector-attr,
376 | .hljs-selector-pseudo {
377 |   color: #795da3;
378 | }
379 | 
380 | .hljs-addition {
381 |   color: #55a532;
382 |   background-color: #eaffea;
383 | }
384 | 
385 | .hljs-deletion {
386 |   color: #bd2c00;
387 |   background-color: #ffecec;
388 | }
389 | 
390 | .hljs-link {
391 |   text-decoration: underline;
392 | }
393 | 
394 | /* 代码高亮 */
395 | /* PrismJS 1.15.0
396 | https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
397 | /**
398 |  * prism.js default theme for JavaScript, CSS and HTML
399 |  * Based on dabblet (http://dabblet.com)
400 |  * @author Lea Verou
401 |  */
402 | code[class*="language-"],
403 | pre[class*="language-"] {
404 |   color: black;
405 |   background: none;
406 |   text-shadow: 0 1px white;
407 |   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
408 |   text-align: left;
409 |   white-space: pre;
410 |   word-spacing: normal;
411 |   word-break: normal;
412 |   word-wrap: normal;
413 |   line-height: 1.5;
414 | 
415 |   -moz-tab-size: 4;
416 |   -o-tab-size: 4;
417 |   tab-size: 4;
418 | 
419 |   -webkit-hyphens: none;
420 |   -moz-hyphens: none;
421 |   -ms-hyphens: none;
422 |   hyphens: none;
423 | }
424 | 
425 | pre[class*="language-"]::-moz-selection,
426 | pre[class*="language-"] ::-moz-selection,
427 | code[class*="language-"]::-moz-selection,
428 | code[class*="language-"] ::-moz-selection {
429 |   text-shadow: none;
430 |   background: #b3d4fc;
431 | }
432 | 
433 | pre[class*="language-"]::selection,
434 | pre[class*="language-"] ::selection,
435 | code[class*="language-"]::selection,
436 | code[class*="language-"] ::selection {
437 |   text-shadow: none;
438 |   background: #b3d4fc;
439 | }
440 | 
441 | @media print {
442 | 
443 |   code[class*="language-"],
444 |   pre[class*="language-"] {
445 |     text-shadow: none;
446 |   }
447 | }
448 | 
449 | /* Code blocks */
450 | pre[class*="language-"] {
451 |   padding: 1em;
452 |   margin: .5em 0;
453 |   overflow: auto;
454 | }
455 | 
456 | :not(pre)>code[class*="language-"],
457 | pre[class*="language-"] {
458 |   background: #f5f2f0;
459 | }
460 | 
461 | /* Inline code */
462 | :not(pre)>code[class*="language-"] {
463 |   padding: .1em;
464 |   border-radius: .3em;
465 |   white-space: normal;
466 | }
467 | 
468 | .token.comment,
469 | .token.prolog,
470 | .token.doctype,
471 | .token.cdata {
472 |   color: slategray;
473 | }
474 | 
475 | .token.punctuation {
476 |   color: #999;
477 | }
478 | 
479 | .namespace {
480 |   opacity: .7;
481 | }
482 | 
483 | .token.property,
484 | .token.tag,
485 | .token.boolean,
486 | .token.number,
487 | .token.constant,
488 | .token.symbol,
489 | .token.deleted {
490 |   color: #905;
491 | }
492 | 
493 | .token.selector,
494 | .token.attr-name,
495 | .token.string,
496 | .token.char,
497 | .token.builtin,
498 | .token.inserted {
499 |   color: #690;
500 | }
501 | 
502 | .token.operator,
503 | .token.entity,
504 | .token.url,
505 | .language-css .token.string,
506 | .style .token.string {
507 |   color: #9a6e3a;
508 |   background: hsla(0, 0%, 100%, .5);
509 | }
510 | 
511 | .token.atrule,
512 | .token.attr-value,
513 | .token.keyword {
514 |   color: #07a;
515 | }
516 | 
517 | .token.function,
518 | .token.class-name {
519 |   color: #DD4A68;
520 | }
521 | 
522 | .token.regex,
523 | .token.important,
524 | .token.variable {
525 |   color: #e90;
526 | }
527 | 
528 | .token.important,
529 | .token.bold {
530 |   font-weight: bold;
531 | }
532 | 
533 | .token.italic {
534 |   font-style: italic;
535 | }
536 | 
537 | .token.entity {
538 |   cursor: help;
539 | }
540 | 


--------------------------------------------------------------------------------
/src/fonts/demo_index.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html>
   3 | <head>
   4 |   <meta charset="utf-8"/>
   5 |   <title>IconFont Demo</title>
   6 |   <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
   7 |   <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
   8 |   <link rel="stylesheet" href="demo.css">
   9 |   <link rel="stylesheet" href="iconfont.css">
  10 |   <script src="iconfont.js"></script>
  11 |   <!-- jQuery -->
  12 |   <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  13 |   <!-- 代码高亮 -->
  14 |   <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  15 | </head>
  16 | <body>
  17 |   <div class="main">
  18 |     <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
  19 |     <div class="nav-tabs">
  20 |       <ul id="tabs" class="dib-box">
  21 |         <li class="dib active"><span>Unicode</span></li>
  22 |         <li class="dib"><span>Font class</span></li>
  23 |         <li class="dib"><span>Symbol</span></li>
  24 |       </ul>
  25 |       
  26 |       <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1004882" target="_blank" class="nav-more">查看项目</a>
  27 |       
  28 |     </div>
  29 |     <div class="tab-container">
  30 |       <div class="content unicode" style="display: block;">
  31 |           <ul class="icon_lists dib-box">
  32 |           
  33 |             <li class="dib">
  34 |               <span class="icon iconfont">&#xe63b;</span>
  35 |                 <div class="name">漏斗</div>
  36 |                 <div class="code-name">&amp;#xe63b;</div>
  37 |               </li>
  38 |           
  39 |             <li class="dib">
  40 |               <span class="icon iconfont">&#xe62a;</span>
  41 |                 <div class="name">微信</div>
  42 |                 <div class="code-name">&amp;#xe62a;</div>
  43 |               </li>
  44 |           
  45 |             <li class="dib">
  46 |               <span class="icon iconfont">&#xe646;</span>
  47 |                 <div class="name">住宿</div>
  48 |                 <div class="code-name">&amp;#xe646;</div>
  49 |               </li>
  50 |           
  51 |             <li class="dib">
  52 |               <span class="icon iconfont">&#xe657;</span>
  53 |                 <div class="name">红包</div>
  54 |                 <div class="code-name">&amp;#xe657;</div>
  55 |               </li>
  56 |           
  57 |             <li class="dib">
  58 |               <span class="icon iconfont">&#xe656;</span>
  59 |                 <div class="name">餐饮</div>
  60 |                 <div class="code-name">&amp;#xe656;</div>
  61 |               </li>
  62 |           
  63 |             <li class="dib">
  64 |               <span class="icon iconfont">&#xe625;</span>
  65 |                 <div class="name">xiangxia</div>
  66 |                 <div class="code-name">&amp;#xe625;</div>
  67 |               </li>
  68 |           
  69 |             <li class="dib">
  70 |               <span class="icon iconfont">&#xe62b;</span>
  71 |                 <div class="name">汽车</div>
  72 |                 <div class="code-name">&amp;#xe62b;</div>
  73 |               </li>
  74 |           
  75 |             <li class="dib">
  76 |               <span class="icon iconfont">&#xe642;</span>
  77 |                 <div class="name">类目－粗－美妆</div>
  78 |                 <div class="code-name">&amp;#xe642;</div>
  79 |               </li>
  80 |           
  81 |             <li class="dib">
  82 |               <span class="icon iconfont">&#xe64f;</span>
  83 |                 <div class="name">微信</div>
  84 |                 <div class="code-name">&amp;#xe64f;</div>
  85 |               </li>
  86 |           
  87 |             <li class="dib">
  88 |               <span class="icon iconfont">&#xe63d;</span>
  89 |                 <div class="name">放大镜</div>
  90 |                 <div class="code-name">&amp;#xe63d;</div>
  91 |               </li>
  92 |           
  93 |             <li class="dib">
  94 |               <span class="icon iconfont">&#xe602;</span>
  95 |                 <div class="name">银行卡</div>
  96 |                 <div class="code-name">&amp;#xe602;</div>
  97 |               </li>
  98 |           
  99 |             <li class="dib">
 100 |               <span class="icon iconfont">&#xe603;</span>
 101 |                 <div class="name">圈子</div>
 102 |                 <div class="code-name">&amp;#xe603;</div>
 103 |               </li>
 104 |           
 105 |             <li class="dib">
 106 |               <span class="icon iconfont">&#xe605;</span>
 107 |                 <div class="name">资产设备</div>
 108 |                 <div class="code-name">&amp;#xe605;</div>
 109 |               </li>
 110 |           
 111 |             <li class="dib">
 112 |               <span class="icon iconfont">&#xe60c;</span>
 113 |                 <div class="name">我的</div>
 114 |                 <div class="code-name">&amp;#xe60c;</div>
 115 |               </li>
 116 |           
 117 |             <li class="dib">
 118 |               <span class="icon iconfont">&#xe606;</span>
 119 |                 <div class="name">首页</div>
 120 |                 <div class="code-name">&amp;#xe606;</div>
 121 |               </li>
 122 |           
 123 |             <li class="dib">
 124 |               <span class="icon iconfont">&#xe6b9;</span>
 125 |                 <div class="name">新增</div>
 126 |                 <div class="code-name">&amp;#xe6b9;</div>
 127 |               </li>
 128 |           
 129 |             <li class="dib">
 130 |               <span class="icon iconfont">&#xe806;</span>
 131 |                 <div class="name">支付宝</div>
 132 |                 <div class="code-name">&amp;#xe806;</div>
 133 |               </li>
 134 |           
 135 |             <li class="dib">
 136 |               <span class="icon iconfont">&#xe899;</span>
 137 |                 <div class="name"> 购物</div>
 138 |                 <div class="code-name">&amp;#xe899;</div>
 139 |               </li>
 140 |           
 141 |             <li class="dib">
 142 |               <span class="icon iconfont">&#xe60d;</span>
 143 |                 <div class="name">对话</div>
 144 |                 <div class="code-name">&amp;#xe60d;</div>
 145 |               </li>
 146 |           
 147 |             <li class="dib">
 148 |               <span class="icon iconfont">&#xe6d3;</span>
 149 |                 <div class="name">钱包</div>
 150 |                 <div class="code-name">&amp;#xe6d3;</div>
 151 |               </li>
 152 |           
 153 |             <li class="dib">
 154 |               <span class="icon iconfont">&#xe63f;</span>
 155 |                 <div class="name">结算</div>
 156 |                 <div class="code-name">&amp;#xe63f;</div>
 157 |               </li>
 158 |           
 159 |             <li class="dib">
 160 |               <span class="icon iconfont">&#xe617;</span>
 161 |                 <div class="name">现金红包</div>
 162 |                 <div class="code-name">&amp;#xe617;</div>
 163 |               </li>
 164 |           
 165 |             <li class="dib">
 166 |               <span class="icon iconfont">&#xe624;</span>
 167 |                 <div class="name">餐饮管理</div>
 168 |                 <div class="code-name">&amp;#xe624;</div>
 169 |               </li>
 170 |           
 171 |             <li class="dib">
 172 |               <span class="icon iconfont">&#xe607;</span>
 173 |                 <div class="name">分类</div>
 174 |                 <div class="code-name">&amp;#xe607;</div>
 175 |               </li>
 176 |           
 177 |             <li class="dib">
 178 |               <span class="icon iconfont">&#xe608;</span>
 179 |                 <div class="name">水果</div>
 180 |                 <div class="code-name">&amp;#xe608;</div>
 181 |               </li>
 182 |           
 183 |             <li class="dib">
 184 |               <span class="icon iconfont">&#xe614;</span>
 185 |                 <div class="name">饮料</div>
 186 |                 <div class="code-name">&amp;#xe614;</div>
 187 |               </li>
 188 |           
 189 |             <li class="dib">
 190 |               <span class="icon iconfont">&#xe632;</span>
 191 |                 <div class="name">圈子</div>
 192 |                 <div class="code-name">&amp;#xe632;</div>
 193 |               </li>
 194 |           
 195 |             <li class="dib">
 196 |               <span class="icon iconfont">&#xe616;</span>
 197 |                 <div class="name">日期</div>
 198 |                 <div class="code-name">&amp;#xe616;</div>
 199 |               </li>
 200 |           
 201 |             <li class="dib">
 202 |               <span class="icon iconfont">&#xe622;</span>
 203 |                 <div class="name">联系</div>
 204 |                 <div class="code-name">&amp;#xe622;</div>
 205 |               </li>
 206 |           
 207 |             <li class="dib">
 208 |               <span class="icon iconfont">&#xe6ad;</span>
 209 |                 <div class="name">钱包</div>
 210 |                 <div class="code-name">&amp;#xe6ad;</div>
 211 |               </li>
 212 |           
 213 |             <li class="dib">
 214 |               <span class="icon iconfont">&#xe619;</span>
 215 |                 <div class="name">首页</div>
 216 |                 <div class="code-name">&amp;#xe619;</div>
 217 |               </li>
 218 |           
 219 |             <li class="dib">
 220 |               <span class="icon iconfont">&#xe640;</span>
 221 |                 <div class="name">医疗器械</div>
 222 |                 <div class="code-name">&amp;#xe640;</div>
 223 |               </li>
 224 |           
 225 |             <li class="dib">
 226 |               <span class="icon iconfont">&#xe615;</span>
 227 |                 <div class="name">转账</div>
 228 |                 <div class="code-name">&amp;#xe615;</div>
 229 |               </li>
 230 |           
 231 |             <li class="dib">
 232 |               <span class="icon iconfont">&#xe70f;</span>
 233 |                 <div class="name">向上三角形</div>
 234 |                 <div class="code-name">&amp;#xe70f;</div>
 235 |               </li>
 236 |           
 237 |             <li class="dib">
 238 |               <span class="icon iconfont">&#xe710;</span>
 239 |                 <div class="name">向下三角形</div>
 240 |                 <div class="code-name">&amp;#xe710;</div>
 241 |               </li>
 242 |           
 243 |             <li class="dib">
 244 |               <span class="icon iconfont">&#xe611;</span>
 245 |                 <div class="name">交通</div>
 246 |                 <div class="code-name">&amp;#xe611;</div>
 247 |               </li>
 248 |           
 249 |             <li class="dib">
 250 |               <span class="icon iconfont">&#xe61d;</span>
 251 |                 <div class="name">新闻-默认</div>
 252 |                 <div class="code-name">&amp;#xe61d;</div>
 253 |               </li>
 254 |           
 255 |           </ul>
 256 |           <div class="article markdown">
 257 |           <h2 id="unicode-">Unicode 引用</h2>
 258 |           <hr>
 259 | 
 260 |           <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
 261 |           <ul>
 262 |             <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
 263 |             <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
 264 |             <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
 265 |           </ul>
 266 |           <blockquote>
 267 |             <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
 268 |           </blockquote>
 269 |           <p>Unicode 使用步骤如下：</p>
 270 |           <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
 271 | <pre><code class="language-css"
 272 | >@font-face {
 273 |   font-family: 'iconfont';
 274 |   src: url('iconfont.eot');
 275 |   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
 276 |       url('iconfont.woff2') format('woff2'),
 277 |       url('iconfont.woff') format('woff'),
 278 |       url('iconfont.ttf') format('truetype'),
 279 |       url('iconfont.svg#iconfont') format('svg');
 280 | }
 281 | </code></pre>
 282 |           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
 283 | <pre><code class="language-css"
 284 | >.iconfont {
 285 |   font-family: "iconfont" !important;
 286 |   font-size: 16px;
 287 |   font-style: normal;
 288 |   -webkit-font-smoothing: antialiased;
 289 |   -moz-osx-font-smoothing: grayscale;
 290 | }
 291 | </code></pre>
 292 |           <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
 293 | <pre>
 294 | <code class="language-html"
 295 | >&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
 296 | </code></pre>
 297 |           <blockquote>
 298 |             <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
 299 |           </blockquote>
 300 |           </div>
 301 |       </div>
 302 |       <div class="content font-class">
 303 |         <ul class="icon_lists dib-box">
 304 |           
 305 |           <li class="dib">
 306 |             <span class="icon iconfont icon-iconset0160"></span>
 307 |             <div class="name">
 308 |               漏斗
 309 |             </div>
 310 |             <div class="code-name">.icon-iconset0160
 311 |             </div>
 312 |           </li>
 313 |           
 314 |           <li class="dib">
 315 |             <span class="icon iconfont icon-weixin"></span>
 316 |             <div class="name">
 317 |               微信
 318 |             </div>
 319 |             <div class="code-name">.icon-weixin
 320 |             </div>
 321 |           </li>
 322 |           
 323 |           <li class="dib">
 324 |             <span class="icon iconfont icon-zhusu"></span>
 325 |             <div class="name">
 326 |               住宿
 327 |             </div>
 328 |             <div class="code-name">.icon-zhusu
 329 |             </div>
 330 |           </li>
 331 |           
 332 |           <li class="dib">
 333 |             <span class="icon iconfont icon-hongbao"></span>
 334 |             <div class="name">
 335 |               红包
 336 |             </div>
 337 |             <div class="code-name">.icon-hongbao
 338 |             </div>
 339 |           </li>
 340 |           
 341 |           <li class="dib">
 342 |             <span class="icon iconfont icon-canyin"></span>
 343 |             <div class="name">
 344 |               餐饮
 345 |             </div>
 346 |             <div class="code-name">.icon-canyin
 347 |             </div>
 348 |           </li>
 349 |           
 350 |           <li class="dib">
 351 |             <span class="icon iconfont icon-xiangxia"></span>
 352 |             <div class="name">
 353 |               xiangxia
 354 |             </div>
 355 |             <div class="code-name">.icon-xiangxia
 356 |             </div>
 357 |           </li>
 358 |           
 359 |           <li class="dib">
 360 |             <span class="icon iconfont icon-qiche"></span>
 361 |             <div class="name">
 362 |               汽车
 363 |             </div>
 364 |             <div class="code-name">.icon-qiche
 365 |             </div>
 366 |           </li>
 367 |           
 368 |           <li class="dib">
 369 |             <span class="icon iconfont icon-leimucumeizhuang"></span>
 370 |             <div class="name">
 371 |               类目－粗－美妆
 372 |             </div>
 373 |             <div class="code-name">.icon-leimucumeizhuang
 374 |             </div>
 375 |           </li>
 376 |           
 377 |           <li class="dib">
 378 |             <span class="icon iconfont icon-weixin1"></span>
 379 |             <div class="name">
 380 |               微信
 381 |             </div>
 382 |             <div class="code-name">.icon-weixin1
 383 |             </div>
 384 |           </li>
 385 |           
 386 |           <li class="dib">
 387 |             <span class="icon iconfont icon-fangdajing"></span>
 388 |             <div class="name">
 389 |               放大镜
 390 |             </div>
 391 |             <div class="code-name">.icon-fangdajing
 392 |             </div>
 393 |           </li>
 394 |           
 395 |           <li class="dib">
 396 |             <span class="icon iconfont icon-yinhangqiashezhi"></span>
 397 |             <div class="name">
 398 |               银行卡
 399 |             </div>
 400 |             <div class="code-name">.icon-yinhangqiashezhi
 401 |             </div>
 402 |           </li>
 403 |           
 404 |           <li class="dib">
 405 |             <span class="icon iconfont icon-quanzi"></span>
 406 |             <div class="name">
 407 |               圈子
 408 |             </div>
 409 |             <div class="code-name">.icon-quanzi
 410 |             </div>
 411 |           </li>
 412 |           
 413 |           <li class="dib">
 414 |             <span class="icon iconfont icon-zichanshebei"></span>
 415 |             <div class="name">
 416 |               资产设备
 417 |             </div>
 418 |             <div class="code-name">.icon-zichanshebei
 419 |             </div>
 420 |           </li>
 421 |           
 422 |           <li class="dib">
 423 |             <span class="icon iconfont icon-wode"></span>
 424 |             <div class="name">
 425 |               我的
 426 |             </div>
 427 |             <div class="code-name">.icon-wode
 428 |             </div>
 429 |           </li>
 430 |           
 431 |           <li class="dib">
 432 |             <span class="icon iconfont icon-shouye"></span>
 433 |             <div class="name">
 434 |               首页
 435 |             </div>
 436 |             <div class="code-name">.icon-shouye
 437 |             </div>
 438 |           </li>
 439 |           
 440 |           <li class="dib">
 441 |             <span class="icon iconfont icon-xinzeng"></span>
 442 |             <div class="name">
 443 |               新增
 444 |             </div>
 445 |             <div class="code-name">.icon-xinzeng
 446 |             </div>
 447 |           </li>
 448 |           
 449 |           <li class="dib">
 450 |             <span class="icon iconfont icon-Alipay"></span>
 451 |             <div class="name">
 452 |               支付宝
 453 |             </div>
 454 |             <div class="code-name">.icon-Alipay
 455 |             </div>
 456 |           </li>
 457 |           
 458 |           <li class="dib">
 459 |             <span class="icon iconfont icon-gouwu"></span>
 460 |             <div class="name">
 461 |                购物
 462 |             </div>
 463 |             <div class="code-name">.icon-gouwu
 464 |             </div>
 465 |           </li>
 466 |           
 467 |           <li class="dib">
 468 |             <span class="icon iconfont icon-comments"></span>
 469 |             <div class="name">
 470 |               对话
 471 |             </div>
 472 |             <div class="code-name">.icon-comments
 473 |             </div>
 474 |           </li>
 475 |           
 476 |           <li class="dib">
 477 |             <span class="icon iconfont icon-qianbao"></span>
 478 |             <div class="name">
 479 |               钱包
 480 |             </div>
 481 |             <div class="code-name">.icon-qianbao
 482 |             </div>
 483 |           </li>
 484 |           
 485 |           <li class="dib">
 486 |             <span class="icon iconfont icon-jiesuan"></span>
 487 |             <div class="name">
 488 |               结算
 489 |             </div>
 490 |             <div class="code-name">.icon-jiesuan
 491 |             </div>
 492 |           </li>
 493 |           
 494 |           <li class="dib">
 495 |             <span class="icon iconfont icon-xianjinhongbao"></span>
 496 |             <div class="name">
 497 |               现金红包
 498 |             </div>
 499 |             <div class="code-name">.icon-xianjinhongbao
 500 |             </div>
 501 |           </li>
 502 |           
 503 |           <li class="dib">
 504 |             <span class="icon iconfont icon-canyinguanli"></span>
 505 |             <div class="name">
 506 |               餐饮管理
 507 |             </div>
 508 |             <div class="code-name">.icon-canyinguanli
 509 |             </div>
 510 |           </li>
 511 |           
 512 |           <li class="dib">
 513 |             <span class="icon iconfont icon-fenlei-"></span>
 514 |             <div class="name">
 515 |               分类
 516 |             </div>
 517 |             <div class="code-name">.icon-fenlei-
 518 |             </div>
 519 |           </li>
 520 |           
 521 |           <li class="dib">
 522 |             <span class="icon iconfont icon-shuiguo"></span>
 523 |             <div class="name">
 524 |               水果
 525 |             </div>
 526 |             <div class="code-name">.icon-shuiguo
 527 |             </div>
 528 |           </li>
 529 |           
 530 |           <li class="dib">
 531 |             <span class="icon iconfont icon--yinliao"></span>
 532 |             <div class="name">
 533 |               饮料
 534 |             </div>
 535 |             <div class="code-name">.icon--yinliao
 536 |             </div>
 537 |           </li>
 538 |           
 539 |           <li class="dib">
 540 |             <span class="icon iconfont icon-quanzi1"></span>
 541 |             <div class="name">
 542 |               圈子
 543 |             </div>
 544 |             <div class="code-name">.icon-quanzi1
 545 |             </div>
 546 |           </li>
 547 |           
 548 |           <li class="dib">
 549 |             <span class="icon iconfont icon-riqi"></span>
 550 |             <div class="name">
 551 |               日期
 552 |             </div>
 553 |             <div class="code-name">.icon-riqi
 554 |             </div>
 555 |           </li>
 556 |           
 557 |           <li class="dib">
 558 |             <span class="icon iconfont icon-lianxi"></span>
 559 |             <div class="name">
 560 |               联系
 561 |             </div>
 562 |             <div class="code-name">.icon-lianxi
 563 |             </div>
 564 |           </li>
 565 |           
 566 |           <li class="dib">
 567 |             <span class="icon iconfont icon-qianbao1"></span>
 568 |             <div class="name">
 569 |               钱包
 570 |             </div>
 571 |             <div class="code-name">.icon-qianbao1
 572 |             </div>
 573 |           </li>
 574 |           
 575 |           <li class="dib">
 576 |             <span class="icon iconfont icon-shouye1"></span>
 577 |             <div class="name">
 578 |               首页
 579 |             </div>
 580 |             <div class="code-name">.icon-shouye1
 581 |             </div>
 582 |           </li>
 583 |           
 584 |           <li class="dib">
 585 |             <span class="icon iconfont icon-yiliaoqixie"></span>
 586 |             <div class="name">
 587 |               医疗器械
 588 |             </div>
 589 |             <div class="code-name">.icon-yiliaoqixie
 590 |             </div>
 591 |           </li>
 592 |           
 593 |           <li class="dib">
 594 |             <span class="icon iconfont icon-zhuanzhang"></span>
 595 |             <div class="name">
 596 |               转账
 597 |             </div>
 598 |             <div class="code-name">.icon-zhuanzhang
 599 |             </div>
 600 |           </li>
 601 |           
 602 |           <li class="dib">
 603 |             <span class="icon iconfont icon-xiangshangsanjiaoxing"></span>
 604 |             <div class="name">
 605 |               向上三角形
 606 |             </div>
 607 |             <div class="code-name">.icon-xiangshangsanjiaoxing
 608 |             </div>
 609 |           </li>
 610 |           
 611 |           <li class="dib">
 612 |             <span class="icon iconfont icon-xiangxiasanjiaoxing"></span>
 613 |             <div class="name">
 614 |               向下三角形
 615 |             </div>
 616 |             <div class="code-name">.icon-xiangxiasanjiaoxing
 617 |             </div>
 618 |           </li>
 619 |           
 620 |           <li class="dib">
 621 |             <span class="icon iconfont icon-jiaotong"></span>
 622 |             <div class="name">
 623 |               交通
 624 |             </div>
 625 |             <div class="code-name">.icon-jiaotong
 626 |             </div>
 627 |           </li>
 628 |           
 629 |           <li class="dib">
 630 |             <span class="icon iconfont icon-xinwen-moren"></span>
 631 |             <div class="name">
 632 |               新闻-默认
 633 |             </div>
 634 |             <div class="code-name">.icon-xinwen-moren
 635 |             </div>
 636 |           </li>
 637 |           
 638 |         </ul>
 639 |         <div class="article markdown">
 640 |         <h2 id="font-class-">font-class 引用</h2>
 641 |         <hr>
 642 | 
 643 |         <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
 644 |         <p>与 Unicode 使用方式相比，具有如下特点：</p>
 645 |         <ul>
 646 |           <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
 647 |           <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
 648 |           <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
 649 |           <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
 650 |         </ul>
 651 |         <p>使用步骤如下：</p>
 652 |         <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
 653 | <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
 654 | </code></pre>
 655 |         <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
 656 | <pre><code class="language-html">&lt;span class="iconfont icon--xxx"&gt;&lt;/span&gt;
 657 | </code></pre>
 658 |         <blockquote>
 659 |           <p>"
 660 |             iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
 661 |         </blockquote>
 662 |       </div>
 663 |       </div>
 664 |       <div class="content symbol">
 665 |           <ul class="icon_lists dib-box">
 666 |           
 667 |             <li class="dib">
 668 |                 <svg class="icon svg-icon" aria-hidden="true">
 669 |                   <use xlink:href="#icon-iconset0160"></use>
 670 |                 </svg>
 671 |                 <div class="name">漏斗</div>
 672 |                 <div class="code-name">#icon-iconset0160</div>
 673 |             </li>
 674 |           
 675 |             <li class="dib">
 676 |                 <svg class="icon svg-icon" aria-hidden="true">
 677 |                   <use xlink:href="#icon-weixin"></use>
 678 |                 </svg>
 679 |                 <div class="name">微信</div>
 680 |                 <div class="code-name">#icon-weixin</div>
 681 |             </li>
 682 |           
 683 |             <li class="dib">
 684 |                 <svg class="icon svg-icon" aria-hidden="true">
 685 |                   <use xlink:href="#icon-zhusu"></use>
 686 |                 </svg>
 687 |                 <div class="name">住宿</div>
 688 |                 <div class="code-name">#icon-zhusu</div>
 689 |             </li>
 690 |           
 691 |             <li class="dib">
 692 |                 <svg class="icon svg-icon" aria-hidden="true">
 693 |                   <use xlink:href="#icon-hongbao"></use>
 694 |                 </svg>
 695 |                 <div class="name">红包</div>
 696 |                 <div class="code-name">#icon-hongbao</div>
 697 |             </li>
 698 |           
 699 |             <li class="dib">
 700 |                 <svg class="icon svg-icon" aria-hidden="true">
 701 |                   <use xlink:href="#icon-canyin"></use>
 702 |                 </svg>
 703 |                 <div class="name">餐饮</div>
 704 |                 <div class="code-name">#icon-canyin</div>
 705 |             </li>
 706 |           
 707 |             <li class="dib">
 708 |                 <svg class="icon svg-icon" aria-hidden="true">
 709 |                   <use xlink:href="#icon-xiangxia"></use>
 710 |                 </svg>
 711 |                 <div class="name">xiangxia</div>
 712 |                 <div class="code-name">#icon-xiangxia</div>
 713 |             </li>
 714 |           
 715 |             <li class="dib">
 716 |                 <svg class="icon svg-icon" aria-hidden="true">
 717 |                   <use xlink:href="#icon-qiche"></use>
 718 |                 </svg>
 719 |                 <div class="name">汽车</div>
 720 |                 <div class="code-name">#icon-qiche</div>
 721 |             </li>
 722 |           
 723 |             <li class="dib">
 724 |                 <svg class="icon svg-icon" aria-hidden="true">
 725 |                   <use xlink:href="#icon-leimucumeizhuang"></use>
 726 |                 </svg>
 727 |                 <div class="name">类目－粗－美妆</div>
 728 |                 <div class="code-name">#icon-leimucumeizhuang</div>
 729 |             </li>
 730 |           
 731 |             <li class="dib">
 732 |                 <svg class="icon svg-icon" aria-hidden="true">
 733 |                   <use xlink:href="#icon-weixin1"></use>
 734 |                 </svg>
 735 |                 <div class="name">微信</div>
 736 |                 <div class="code-name">#icon-weixin1</div>
 737 |             </li>
 738 |           
 739 |             <li class="dib">
 740 |                 <svg class="icon svg-icon" aria-hidden="true">
 741 |                   <use xlink:href="#icon-fangdajing"></use>
 742 |                 </svg>
 743 |                 <div class="name">放大镜</div>
 744 |                 <div class="code-name">#icon-fangdajing</div>
 745 |             </li>
 746 |           
 747 |             <li class="dib">
 748 |                 <svg class="icon svg-icon" aria-hidden="true">
 749 |                   <use xlink:href="#icon-yinhangqiashezhi"></use>
 750 |                 </svg>
 751 |                 <div class="name">银行卡</div>
 752 |                 <div class="code-name">#icon-yinhangqiashezhi</div>
 753 |             </li>
 754 |           
 755 |             <li class="dib">
 756 |                 <svg class="icon svg-icon" aria-hidden="true">
 757 |                   <use xlink:href="#icon-quanzi"></use>
 758 |                 </svg>
 759 |                 <div class="name">圈子</div>
 760 |                 <div class="code-name">#icon-quanzi</div>
 761 |             </li>
 762 |           
 763 |             <li class="dib">
 764 |                 <svg class="icon svg-icon" aria-hidden="true">
 765 |                   <use xlink:href="#icon-zichanshebei"></use>
 766 |                 </svg>
 767 |                 <div class="name">资产设备</div>
 768 |                 <div class="code-name">#icon-zichanshebei</div>
 769 |             </li>
 770 |           
 771 |             <li class="dib">
 772 |                 <svg class="icon svg-icon" aria-hidden="true">
 773 |                   <use xlink:href="#icon-wode"></use>
 774 |                 </svg>
 775 |                 <div class="name">我的</div>
 776 |                 <div class="code-name">#icon-wode</div>
 777 |             </li>
 778 |           
 779 |             <li class="dib">
 780 |                 <svg class="icon svg-icon" aria-hidden="true">
 781 |                   <use xlink:href="#icon-shouye"></use>
 782 |                 </svg>
 783 |                 <div class="name">首页</div>
 784 |                 <div class="code-name">#icon-shouye</div>
 785 |             </li>
 786 |           
 787 |             <li class="dib">
 788 |                 <svg class="icon svg-icon" aria-hidden="true">
 789 |                   <use xlink:href="#icon-xinzeng"></use>
 790 |                 </svg>
 791 |                 <div class="name">新增</div>
 792 |                 <div class="code-name">#icon-xinzeng</div>
 793 |             </li>
 794 |           
 795 |             <li class="dib">
 796 |                 <svg class="icon svg-icon" aria-hidden="true">
 797 |                   <use xlink:href="#icon-Alipay"></use>
 798 |                 </svg>
 799 |                 <div class="name">支付宝</div>
 800 |                 <div class="code-name">#icon-Alipay</div>
 801 |             </li>
 802 |           
 803 |             <li class="dib">
 804 |                 <svg class="icon svg-icon" aria-hidden="true">
 805 |                   <use xlink:href="#icon-gouwu"></use>
 806 |                 </svg>
 807 |                 <div class="name"> 购物</div>
 808 |                 <div class="code-name">#icon-gouwu</div>
 809 |             </li>
 810 |           
 811 |             <li class="dib">
 812 |                 <svg class="icon svg-icon" aria-hidden="true">
 813 |                   <use xlink:href="#icon-comments"></use>
 814 |                 </svg>
 815 |                 <div class="name">对话</div>
 816 |                 <div class="code-name">#icon-comments</div>
 817 |             </li>
 818 |           
 819 |             <li class="dib">
 820 |                 <svg class="icon svg-icon" aria-hidden="true">
 821 |                   <use xlink:href="#icon-qianbao"></use>
 822 |                 </svg>
 823 |                 <div class="name">钱包</div>
 824 |                 <div class="code-name">#icon-qianbao</div>
 825 |             </li>
 826 |           
 827 |             <li class="dib">
 828 |                 <svg class="icon svg-icon" aria-hidden="true">
 829 |                   <use xlink:href="#icon-jiesuan"></use>
 830 |                 </svg>
 831 |                 <div class="name">结算</div>
 832 |                 <div class="code-name">#icon-jiesuan</div>
 833 |             </li>
 834 |           
 835 |             <li class="dib">
 836 |                 <svg class="icon svg-icon" aria-hidden="true">
 837 |                   <use xlink:href="#icon-xianjinhongbao"></use>
 838 |                 </svg>
 839 |                 <div class="name">现金红包</div>
 840 |                 <div class="code-name">#icon-xianjinhongbao</div>
 841 |             </li>
 842 |           
 843 |             <li class="dib">
 844 |                 <svg class="icon svg-icon" aria-hidden="true">
 845 |                   <use xlink:href="#icon-canyinguanli"></use>
 846 |                 </svg>
 847 |                 <div class="name">餐饮管理</div>
 848 |                 <div class="code-name">#icon-canyinguanli</div>
 849 |             </li>
 850 |           
 851 |             <li class="dib">
 852 |                 <svg class="icon svg-icon" aria-hidden="true">
 853 |                   <use xlink:href="#icon-fenlei-"></use>
 854 |                 </svg>
 855 |                 <div class="name">分类</div>
 856 |                 <div class="code-name">#icon-fenlei-</div>
 857 |             </li>
 858 |           
 859 |             <li class="dib">
 860 |                 <svg class="icon svg-icon" aria-hidden="true">
 861 |                   <use xlink:href="#icon-shuiguo"></use>
 862 |                 </svg>
 863 |                 <div class="name">水果</div>
 864 |                 <div class="code-name">#icon-shuiguo</div>
 865 |             </li>
 866 |           
 867 |             <li class="dib">
 868 |                 <svg class="icon svg-icon" aria-hidden="true">
 869 |                   <use xlink:href="#icon--yinliao"></use>
 870 |                 </svg>
 871 |                 <div class="name">饮料</div>
 872 |                 <div class="code-name">#icon--yinliao</div>
 873 |             </li>
 874 |           
 875 |             <li class="dib">
 876 |                 <svg class="icon svg-icon" aria-hidden="true">
 877 |                   <use xlink:href="#icon-quanzi1"></use>
 878 |                 </svg>
 879 |                 <div class="name">圈子</div>
 880 |                 <div class="code-name">#icon-quanzi1</div>
 881 |             </li>
 882 |           
 883 |             <li class="dib">
 884 |                 <svg class="icon svg-icon" aria-hidden="true">
 885 |                   <use xlink:href="#icon-riqi"></use>
 886 |                 </svg>
 887 |                 <div class="name">日期</div>
 888 |                 <div class="code-name">#icon-riqi</div>
 889 |             </li>
 890 |           
 891 |             <li class="dib">
 892 |                 <svg class="icon svg-icon" aria-hidden="true">
 893 |                   <use xlink:href="#icon-lianxi"></use>
 894 |                 </svg>
 895 |                 <div class="name">联系</div>
 896 |                 <div class="code-name">#icon-lianxi</div>
 897 |             </li>
 898 |           
 899 |             <li class="dib">
 900 |                 <svg class="icon svg-icon" aria-hidden="true">
 901 |                   <use xlink:href="#icon-qianbao1"></use>
 902 |                 </svg>
 903 |                 <div class="name">钱包</div>
 904 |                 <div class="code-name">#icon-qianbao1</div>
 905 |             </li>
 906 |           
 907 |             <li class="dib">
 908 |                 <svg class="icon svg-icon" aria-hidden="true">
 909 |                   <use xlink:href="#icon-shouye1"></use>
 910 |                 </svg>
 911 |                 <div class="name">首页</div>
 912 |                 <div class="code-name">#icon-shouye1</div>
 913 |             </li>
 914 |           
 915 |             <li class="dib">
 916 |                 <svg class="icon svg-icon" aria-hidden="true">
 917 |                   <use xlink:href="#icon-yiliaoqixie"></use>
 918 |                 </svg>
 919 |                 <div class="name">医疗器械</div>
 920 |                 <div class="code-name">#icon-yiliaoqixie</div>
 921 |             </li>
 922 |           
 923 |             <li class="dib">
 924 |                 <svg class="icon svg-icon" aria-hidden="true">
 925 |                   <use xlink:href="#icon-zhuanzhang"></use>
 926 |                 </svg>
 927 |                 <div class="name">转账</div>
 928 |                 <div class="code-name">#icon-zhuanzhang</div>
 929 |             </li>
 930 |           
 931 |             <li class="dib">
 932 |                 <svg class="icon svg-icon" aria-hidden="true">
 933 |                   <use xlink:href="#icon-xiangshangsanjiaoxing"></use>
 934 |                 </svg>
 935 |                 <div class="name">向上三角形</div>
 936 |                 <div class="code-name">#icon-xiangshangsanjiaoxing</div>
 937 |             </li>
 938 |           
 939 |             <li class="dib">
 940 |                 <svg class="icon svg-icon" aria-hidden="true">
 941 |                   <use xlink:href="#icon-xiangxiasanjiaoxing"></use>
 942 |                 </svg>
 943 |                 <div class="name">向下三角形</div>
 944 |                 <div class="code-name">#icon-xiangxiasanjiaoxing</div>
 945 |             </li>
 946 |           
 947 |             <li class="dib">
 948 |                 <svg class="icon svg-icon" aria-hidden="true">
 949 |                   <use xlink:href="#icon-jiaotong"></use>
 950 |                 </svg>
 951 |                 <div class="name">交通</div>
 952 |                 <div class="code-name">#icon-jiaotong</div>
 953 |             </li>
 954 |           
 955 |             <li class="dib">
 956 |                 <svg class="icon svg-icon" aria-hidden="true">
 957 |                   <use xlink:href="#icon-xinwen-moren"></use>
 958 |                 </svg>
 959 |                 <div class="name">新闻-默认</div>
 960 |                 <div class="code-name">#icon-xinwen-moren</div>
 961 |             </li>
 962 |           
 963 |           </ul>
 964 |           <div class="article markdown">
 965 |           <h2 id="symbol-">Symbol 引用</h2>
 966 |           <hr>
 967 | 
 968 |           <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
 969 |             这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
 970 |           <ul>
 971 |             <li>支持多色图标了，不再受单色限制。</li>
 972 |             <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
 973 |             <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
 974 |             <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
 975 |           </ul>
 976 |           <p>使用步骤如下：</p>
 977 |           <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
 978 | <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
 979 | </code></pre>
 980 |           <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
 981 | <pre><code class="language-html">&lt;style&gt;
 982 | .icon {
 983 |   width: 1em;
 984 |   height: 1em;
 985 |   vertical-align: -0.15em;
 986 |   fill: currentColor;
 987 |   overflow: hidden;
 988 | }
 989 | &lt;/style&gt;
 990 | </code></pre>
 991 |           <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
 992 | <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
 993 |   &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
 994 | &lt;/svg&gt;
 995 | </code></pre>
 996 |           </div>
 997 |       </div>
 998 | 
 999 |     </div>
1000 |   </div>
1001 |   <script>
1002 |   $(document).ready(function () {
1003 |       $('.tab-container .content:first').show()
1004 | 
1005 |       $('#tabs li').click(function (e) {
1006 |         var tabContent = $('.tab-container .content')
1007 |         var index = $(this).index()
1008 | 
1009 |         if ($(this).hasClass('active')) {
1010 |           return
1011 |         } else {
1012 |           $('#tabs li').removeClass('active')
1013 |           $(this).addClass('active')
1014 | 
1015 |           tabContent.hide().eq(index).fadeIn()
1016 |         }
1017 |       })
1018 |     })
1019 |   </script>
1020 | </body>
1021 | </html>
1022 | 


--------------------------------------------------------------------------------
/src/fonts/iconfont.css:
--------------------------------------------------------------------------------
  1 | @font-face {font-family: "iconfont";
  2 |   src: url('iconfont.eot?t=1546946293840'); /* IE9 */
  3 |   src: url('iconfont.eot?t=1546946293840#iefix') format('embedded-opentype'), /* IE6-IE8 */
  4 |   url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
  5 |   url('iconfont.woff?t=1546946293840') format('woff'),
  6 |   url('iconfont.ttf?t=1546946293840') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  7 |   url('iconfont.svg?t=1546946293840#iconfont') format('svg'); /* iOS 4.1- */
  8 | }
  9 | 
 10 | .iconfont {
 11 |   font-family: "iconfont" !important;
 12 |   font-size: 16px;
 13 |   font-style: normal;
 14 |   -webkit-font-smoothing: antialiased;
 15 |   -moz-osx-font-smoothing: grayscale;
 16 | }
 17 | 
 18 | .icon-iconset0160:before {
 19 |   content: "\e63b";
 20 | }
 21 | 
 22 | .icon-weixin:before {
 23 |   content: "\e62a";
 24 | }
 25 | 
 26 | .icon-zhusu:before {
 27 |   content: "\e646";
 28 | }
 29 | 
 30 | .icon-hongbao:before {
 31 |   content: "\e657";
 32 | }
 33 | 
 34 | .icon-canyin:before {
 35 |   content: "\e656";
 36 | }
 37 | 
 38 | .icon-xiangxia:before {
 39 |   content: "\e625";
 40 | }
 41 | 
 42 | .icon-qiche:before {
 43 |   content: "\e62b";
 44 | }
 45 | 
 46 | .icon-leimucumeizhuang:before {
 47 |   content: "\e642";
 48 | }
 49 | 
 50 | .icon-weixin1:before {
 51 |   content: "\e64f";
 52 | }
 53 | 
 54 | .icon-fangdajing:before {
 55 |   content: "\e63d";
 56 | }
 57 | 
 58 | .icon-yinhangqiashezhi:before {
 59 |   content: "\e602";
 60 | }
 61 | 
 62 | .icon-quanzi:before {
 63 |   content: "\e603";
 64 | }
 65 | 
 66 | .icon-zichanshebei:before {
 67 |   content: "\e605";
 68 | }
 69 | 
 70 | .icon-wode:before {
 71 |   content: "\e60c";
 72 | }
 73 | 
 74 | .icon-shouye:before {
 75 |   content: "\e606";
 76 | }
 77 | 
 78 | .icon-xinzeng:before {
 79 |   content: "\e6b9";
 80 | }
 81 | 
 82 | .icon-Alipay:before {
 83 |   content: "\e806";
 84 | }
 85 | 
 86 | .icon-gouwu:before {
 87 |   content: "\e899";
 88 | }
 89 | 
 90 | .icon-comments:before {
 91 |   content: "\e60d";
 92 | }
 93 | 
 94 | .icon-qianbao:before {
 95 |   content: "\e6d3";
 96 | }
 97 | 
 98 | .icon-jiesuan:before {
 99 |   content: "\e63f";
100 | }
101 | 
102 | .icon-xianjinhongbao:before {
103 |   content: "\e617";
104 | }
105 | 
106 | .icon-canyinguanli:before {
107 |   content: "\e624";
108 | }
109 | 
110 | .icon-fenlei-:before {
111 |   content: "\e607";
112 | }
113 | 
114 | .icon-shuiguo:before {
115 |   content: "\e608";
116 | }
117 | 
118 | .icon--yinliao:before {
119 |   content: "\e614";
120 | }
121 | 
122 | .icon-quanzi1:before {
123 |   content: "\e632";
124 | }
125 | 
126 | .icon-riqi:before {
127 |   content: "\e616";
128 | }
129 | 
130 | .icon-lianxi:before {
131 |   content: "\e622";
132 | }
133 | 
134 | .icon-qianbao1:before {
135 |   content: "\e6ad";
136 | }
137 | 
138 | .icon-shouye1:before {
139 |   content: "\e619";
140 | }
141 | 
142 | .icon-yiliaoqixie:before {
143 |   content: "\e640";
144 | }
145 | 
146 | .icon-zhuanzhang:before {
147 |   content: "\e615";
148 | }
149 | 
150 | .icon-xiangshangsanjiaoxing:before {
151 |   content: "\e70f";
152 | }
153 | 
154 | .icon-xiangxiasanjiaoxing:before {
155 |   content: "\e710";
156 | }
157 | 
158 | .icon-jiaotong:before {
159 |   content: "\e611";
160 | }
161 | 
162 | .icon-xinwen-moren:before {
163 |   content: "\e61d";
164 | }
165 | 
166 | 


--------------------------------------------------------------------------------
/src/fonts/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/sort/1df624687ebb489c5dff02f30db628e6b0836798/src/fonts/iconfont.eot


--------------------------------------------------------------------------------
/src/fonts/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/sort/1df624687ebb489c5dff02f30db628e6b0836798/src/fonts/iconfont.ttf


--------------------------------------------------------------------------------
/src/fonts/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/sort/1df624687ebb489c5dff02f30db628e6b0836798/src/fonts/iconfont.woff


--------------------------------------------------------------------------------
/src/fonts/iconfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/sort/1df624687ebb489c5dff02f30db628e6b0836798/src/fonts/iconfont.woff2


--------------------------------------------------------------------------------
/src/fonts/mui-icons-extra.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/sort/1df624687ebb489c5dff02f30db628e6b0836798/src/fonts/mui-icons-extra.ttf


--------------------------------------------------------------------------------
/src/fonts/mui.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/sort/1df624687ebb489c5dff02f30db628e6b0836798/src/fonts/mui.ttf


--------------------------------------------------------------------------------
/src/fonts0/demo.css:
--------------------------------------------------------------------------------
  1 | *{margin: 0;padding: 0;list-style: none;}
  2 | /*
  3 | KISSY CSS Reset
  4 | 理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
  5 | 2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
  6 | 3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
  7 | 特色：1. 适应中文；2. 基于最新主流浏览器。
  8 | 维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
  9 |  */
 10 | 
 11 | /** 清除内外边距 **/
 12 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
 13 | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
 14 | pre, /* text formatting elements 文本格式元素 */
 15 | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
 16 | th, td /* table elements 表格元素 */ {
 17 |   margin: 0;
 18 |   padding: 0;
 19 | }
 20 | 
 21 | /** 设置默认字体 **/
 22 | body,
 23 | button, input, select, textarea /* for ie */ {
 24 |   font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
 25 | }
 26 | h1, h2, h3, h4, h5, h6 { font-size: 100%; }
 27 | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
 28 | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
 29 | small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
 30 | 
 31 | /** 重置列表元素 **/
 32 | ul, ol { list-style: none; }
 33 | 
 34 | /** 重置文本格式元素 **/
 35 | a { text-decoration: none; }
 36 | a:hover { text-decoration: underline; }
 37 | 
 38 | 
 39 | /** 重置表单元素 **/
 40 | legend { color: #000; } /* for ie6 */
 41 | fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
 42 | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
 43 | /* 注：optgroup 无法扶正 */
 44 | 
 45 | /** 重置表格元素 **/
 46 | table { border-collapse: collapse; border-spacing: 0; }
 47 | 
 48 | /* 清除浮动 */
 49 | .ks-clear:after, .clear:after {
 50 |   content: '\20';
 51 |   display: block;
 52 |   height: 0;
 53 |   clear: both;
 54 | }
 55 | .ks-clear, .clear {
 56 |   *zoom: 1;
 57 | }
 58 | 
 59 | .main {
 60 |   padding: 30px 100px;
 61 | width: 960px;
 62 | margin: 0 auto;
 63 | }
 64 | .main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
 65 | 
 66 | .helps{margin-top:40px;}
 67 | .helps pre{
 68 |   padding:20px;
 69 |   margin:10px 0;
 70 |   border:solid 1px #e7e1cd;
 71 |   background-color: #fffdef;
 72 |   overflow: auto;
 73 | }
 74 | 
 75 | .icon_lists{
 76 |   width: 100% !important;
 77 | 
 78 | }
 79 | 
 80 | .icon_lists li{
 81 |   float:left;
 82 |   width: 100px;
 83 |   height:180px;
 84 |   text-align: center;
 85 |   list-style: none !important;
 86 | }
 87 | .icon_lists .icon{
 88 |   font-size: 42px;
 89 |   line-height: 100px;
 90 |   margin: 10px 0;
 91 |   color:#333;
 92 |   -webkit-transition: font-size 0.25s ease-out 0s;
 93 |   -moz-transition: font-size 0.25s ease-out 0s;
 94 |   transition: font-size 0.25s ease-out 0s;
 95 | 
 96 | }
 97 | .icon_lists .icon:hover{
 98 |   font-size: 100px;
 99 | }
100 | 
101 | 
102 | 
103 | .markdown {
104 |   color: #666;
105 |   font-size: 14px;
106 |   line-height: 1.8;
107 | }
108 | 
109 | .highlight {
110 |   line-height: 1.5;
111 | }
112 | 
113 | .markdown img {
114 |   vertical-align: middle;
115 |   max-width: 100%;
116 | }
117 | 
118 | .markdown h1 {
119 |   color: #404040;
120 |   font-weight: 500;
121 |   line-height: 40px;
122 |   margin-bottom: 24px;
123 | }
124 | 
125 | .markdown h2,
126 | .markdown h3,
127 | .markdown h4,
128 | .markdown h5,
129 | .markdown h6 {
130 |   color: #404040;
131 |   margin: 1.6em 0 0.6em 0;
132 |   font-weight: 500;
133 |   clear: both;
134 | }
135 | 
136 | .markdown h1 {
137 |   font-size: 28px;
138 | }
139 | 
140 | .markdown h2 {
141 |   font-size: 22px;
142 | }
143 | 
144 | .markdown h3 {
145 |   font-size: 16px;
146 | }
147 | 
148 | .markdown h4 {
149 |   font-size: 14px;
150 | }
151 | 
152 | .markdown h5 {
153 |   font-size: 12px;
154 | }
155 | 
156 | .markdown h6 {
157 |   font-size: 12px;
158 | }
159 | 
160 | .markdown hr {
161 |   height: 1px;
162 |   border: 0;
163 |   background: #e9e9e9;
164 |   margin: 16px 0;
165 |   clear: both;
166 | }
167 | 
168 | .markdown p,
169 | .markdown pre {
170 |   margin: 1em 0;
171 | }
172 | 
173 | .markdown > p,
174 | .markdown > blockquote,
175 | .markdown > .highlight,
176 | .markdown > ol,
177 | .markdown > ul {
178 |   width: 80%;
179 | }
180 | 
181 | .markdown ul > li {
182 |   list-style: circle;
183 | }
184 | 
185 | .markdown > ul li,
186 | .markdown blockquote ul > li {
187 |   margin-left: 20px;
188 |   padding-left: 4px;
189 | }
190 | 
191 | .markdown > ul li p,
192 | .markdown > ol li p {
193 |   margin: 0.6em 0;
194 | }
195 | 
196 | .markdown ol > li {
197 |   list-style: decimal;
198 | }
199 | 
200 | .markdown > ol li,
201 | .markdown blockquote ol > li {
202 |   margin-left: 20px;
203 |   padding-left: 4px;
204 | }
205 | 
206 | .markdown code {
207 |   margin: 0 3px;
208 |   padding: 0 5px;
209 |   background: #eee;
210 |   border-radius: 3px;
211 | }
212 | 
213 | .markdown pre {
214 |   border-radius: 6px;
215 |   background: #f7f7f7;
216 |   padding: 20px;
217 | }
218 | 
219 | .markdown pre code {
220 |   border: none;
221 |   background: #f7f7f7;
222 |   margin: 0;
223 | }
224 | 
225 | .markdown strong,
226 | .markdown b {
227 |   font-weight: 600;
228 | }
229 | 
230 | .markdown > table {
231 |   border-collapse: collapse;
232 |   border-spacing: 0px;
233 |   empty-cells: show;
234 |   border: 1px solid #e9e9e9;
235 |   width: 95%;
236 |   margin-bottom: 24px;
237 | }
238 | 
239 | .markdown > table th {
240 |   white-space: nowrap;
241 |   color: #333;
242 |   font-weight: 600;
243 | 
244 | }
245 | 
246 | .markdown > table th,
247 | .markdown > table td {
248 |   border: 1px solid #e9e9e9;
249 |   padding: 8px 16px;
250 |   text-align: left;
251 | }
252 | 
253 | .markdown > table th {
254 |   background: #F7F7F7;
255 | }
256 | 
257 | .markdown blockquote {
258 |   font-size: 90%;
259 |   color: #999;
260 |   border-left: 4px solid #e9e9e9;
261 |   padding-left: 0.8em;
262 |   margin: 1em 0;
263 |   font-style: italic;
264 | }
265 | 
266 | .markdown blockquote p {
267 |   margin: 0;
268 | }
269 | 
270 | .markdown .anchor {
271 |   opacity: 0;
272 |   transition: opacity 0.3s ease;
273 |   margin-left: 8px;
274 | }
275 | 
276 | .markdown .waiting {
277 |   color: #ccc;
278 | }
279 | 
280 | .markdown h1:hover .anchor,
281 | .markdown h2:hover .anchor,
282 | .markdown h3:hover .anchor,
283 | .markdown h4:hover .anchor,
284 | .markdown h5:hover .anchor,
285 | .markdown h6:hover .anchor {
286 |   opacity: 1;
287 |   display: inline-block;
288 | }
289 | 
290 | .markdown > br,
291 | .markdown > p > br {
292 |   clear: both;
293 | }
294 | 
295 | 
296 | .hljs {
297 |   display: block;
298 |   background: white;
299 |   padding: 0.5em;
300 |   color: #333333;
301 |   overflow-x: auto;
302 | }
303 | 
304 | .hljs-comment,
305 | .hljs-meta {
306 |   color: #969896;
307 | }
308 | 
309 | .hljs-string,
310 | .hljs-variable,
311 | .hljs-template-variable,
312 | .hljs-strong,
313 | .hljs-emphasis,
314 | .hljs-quote {
315 |   color: #df5000;
316 | }
317 | 
318 | .hljs-keyword,
319 | .hljs-selector-tag,
320 | .hljs-type {
321 |   color: #a71d5d;
322 | }
323 | 
324 | .hljs-literal,
325 | .hljs-symbol,
326 | .hljs-bullet,
327 | .hljs-attribute {
328 |   color: #0086b3;
329 | }
330 | 
331 | .hljs-section,
332 | .hljs-name {
333 |   color: #63a35c;
334 | }
335 | 
336 | .hljs-tag {
337 |   color: #333333;
338 | }
339 | 
340 | .hljs-title,
341 | .hljs-attr,
342 | .hljs-selector-id,
343 | .hljs-selector-class,
344 | .hljs-selector-attr,
345 | .hljs-selector-pseudo {
346 |   color: #795da3;
347 | }
348 | 
349 | .hljs-addition {
350 |   color: #55a532;
351 |   background-color: #eaffea;
352 | }
353 | 
354 | .hljs-deletion {
355 |   color: #bd2c00;
356 |   background-color: #ffecec;
357 | }
358 | 
359 | .hljs-link {
360 |   text-decoration: underline;
361 | }
362 | 
363 | pre{
364 |   background: #fff;
365 | }
366 | 
367 | 
368 | 
369 | 
370 | 
371 | 


--------------------------------------------------------------------------------
/src/fonts0/iconfont.css:
--------------------------------------------------------------------------------
  1 | 
  2 | @font-face {font-family: "iconfont";
  3 |   src: url('iconfont.eot?t=1479642403788'); /* IE9*/
  4 |   src: url('iconfont.eot?t=1479642403788#iefix') format('embedded-opentype'), /* IE6-IE8 */
  5 |   url('iconfont.woff?t=1479642403788') format('woff'), /* chrome, firefox */
  6 |   url('iconfont.ttf?t=1479642403788') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  7 |   url('iconfont.svg?t=1479642403788#iconfont') format('svg'); /* iOS 4.1- */
  8 | }
  9 | 
 10 | .iconfont {
 11 |   font-family:"iconfont" !important;
 12 |   font-size:16px;
 13 |   font-style:normal;
 14 |   -webkit-font-smoothing: antialiased;
 15 |   -webkit-text-stroke-width: 0.2px;
 16 |   -moz-osx-font-smoothing: grayscale;
 17 | }
 18 | 
 19 | .icon-zanting:before { content: "\f017e"; }
 20 | 
 21 | .icon-zanting1:before { content: "\3442"; }
 22 | 
 23 | .icon-zanting2:before { content: "\f0067"; }
 24 | 
 25 | .icon-bofang:before { content: "\f004c"; }
 26 | 
 27 | .icon-fenxiang:before { content: "\e62e"; }
 28 | 
 29 | .icon-fenxiang1:before { content: "\e628"; }
 30 | 
 31 | .icon-play:before { content: "\e62f"; }
 32 | 
 33 | .icon-share6:before { content: "\e602"; }
 34 | 
 35 | .icon-bofang1:before { content: "\e6ac"; }
 36 | 
 37 | .icon-ttpodicon:before { content: "\e639"; }
 38 | 
 39 | .icon-ttpodicon1:before { content: "\e63a"; }
 40 | 
 41 | .icon-ttpodicon2:before { content: "\e64d"; }
 42 | 
 43 | .icon-ttpodicon3:before { content: "\e64e"; }
 44 | 
 45 | .icon-fenxiang11:before { content: "\e654"; }
 46 | 
 47 | .icon-fenxiang2:before { content: "\e60f"; }
 48 | 
 49 | .icon-play1:before { content: "\e6bb"; }
 50 | 
 51 | .icon-zanting3:before { content: "\e661"; }
 52 | 
 53 | .icon-bofang2:before { content: "\f0088"; }
 54 | 
 55 | .icon-fenxiang3:before { content: "\e600"; }
 56 | 
 57 | .icon-infenicon18:before { content: "\e7b4"; }
 58 | 
 59 | .icon-pause-outline:before { content: "\e691"; }
 60 | 
 61 | .icon-fenxiang4:before { content: "\e631"; }
 62 | 
 63 | .icon-shangyiqu:before { content: "\e665"; }
 64 | 
 65 | .icon-xiayiqu:before { content: "\e67e"; }
 66 | 
 67 | .icon-zanting4:before { content: "\e615"; }
 68 | 
 69 | .icon-fenxiang5:before { content: "\e61c"; }
 70 | 
 71 | .icon-bofang3:before { content: "\e61a"; }
 72 | 
 73 | .icon-fenxiang6:before { content: "\e603"; }
 74 | 
 75 | .icon-share:before { content: "\e604"; }
 76 | 
 77 | .icon-iconfontcolor96:before { content: "\e6d2"; }
 78 | 
 79 | .icon-bofangqixiayiqu:before { content: "\e63d"; }
 80 | 
 81 | .icon-suopingxiayiqu:before { content: "\e68c"; }
 82 | 
 83 | .icon-suopingshangyiqu:before { content: "\e68d"; }
 84 | 
 85 | .icon-zhutixiayiqu:before { content: "\e708"; }
 86 | 
 87 | .icon-tianbiao:before { content: "\e642"; }
 88 | 
 89 | .icon-tian:before { content: "\e612"; }
 90 | 
 91 | .icon-tianmao:before { content: "\e669"; }
 92 | 
 93 | .icon-tianmao1:before { content: "\e68f"; }
 94 | 
 95 | .icon-xiayiqu1:before { content: "\e6e7"; }
 96 | 
 97 | .icon-suijibofang:before { content: "\e6f1"; }
 98 | 
 99 | .icon-weibiaoti102:before { content: "\e608"; }
100 | 
101 | .icon-icon1:before { content: "\e693"; }
102 | 
103 | .icon-icon2:before { content: "\e694"; }
104 | 
105 | .icon-tianmao2:before { content: "\e644"; }
106 | 
107 | .icon-05:before { content: "\e62a"; }
108 | 
109 | .icon-07:before { content: "\e62c"; }
110 | 
111 | .icon-10:before { content: "\e630"; }
112 | 
113 | .icon-24:before { content: "\e63e"; }
114 | 
115 | .icon-25:before { content: "\e63f"; }
116 | 
117 | .icon-26:before { content: "\e640"; }
118 | 
119 | .icon-27:before { content: "\e641"; }
120 | 
121 | .icon-28:before { content: "\e643"; }
122 | 
123 | .icon-29:before { content: "\e645"; }
124 | 
125 | .icon-31:before { content: "\e646"; }
126 | 
127 | .icon-38:before { content: "\e651"; }
128 | 
129 | .icon-crm17:before { content: "\e64f"; }
130 | 
131 | .icon-39:before { content: "\e652"; }
132 | 
133 | .icon-zanting5:before { content: "\e66a"; }
134 | 
135 | .icon-zantinghuodong:before { content: "\e621"; }
136 | 
137 | .icon-7tian:before { content: "\e60a"; }
138 | 
139 | .icon-7tian1:before { content: "\e776"; }
140 | 
141 | .icon-42:before { content: "\e65e"; }
142 | 
143 | .icon-zanting6:before { content: "\e601"; }
144 | 
145 | .icon-tianmao3:before { content: "\e775"; }
146 | 
147 | .icon-50:before { content: "\e662"; }
148 | 
149 | .icon-shangyiqu-copy:before { content: "\e609"; }
150 | 
151 | .icon-user:before { content: "\e607"; }
152 | 
153 | .icon-default-avatar:before { content: "\e627"; }
154 | 
155 | .icon-zanting7:before { content: "\e605"; }
156 | 
157 | .icon-shangyiqu-copy1:before { content: "\e606"; }
158 | 
159 | .icon-suiji2:before { content: "\e60c"; }
160 | 
161 | .icon-address:before { content: "\e675"; }
162 | 
163 | .icon-eyeoclose:before { content: "\e678"; }
164 | 
165 | .icon-eyeopen:before { content: "\e679"; }
166 | 
167 | .icon-phonenum:before { content: "\e683"; }
168 | 
169 | .icon-question:before { content: "\e685"; }
170 | 
171 | .icon-set:before { content: "\e689"; }
172 | 
173 | .icon-paynumber:before { content: "\e690"; }
174 | 
175 | .icon-yinlezanting:before { content: "\e60b"; }
176 | 
177 | .icon-tushujiemianxiayiqu40:before { content: "\e636"; }
178 | 
179 | .icon-suijibofang1:before { content: "\e61d"; }
180 | 
181 | .icon-suijibofang2:before { content: "\e61e"; }
182 | 
183 | .icon-suijibofang3:before { content: "\e622"; }
184 | 
185 | .icon-icon78:before { content: "\e663"; }
186 | 
187 | .icon-icon129:before { content: "\e686"; }
188 | 
189 | .icon-icon226:before { content: "\e69d"; }
190 | 
191 | .icon-xiaoxi1:before { content: "\e60d"; }
192 | 
193 | .icon-xiaoxi:before { content: "\e60e"; }
194 | 
195 | .icon-tongjitu111:before { content: "\e610"; }
196 | 
197 | .icon-yonghu:before { content: "\e611"; }
198 | 
199 | .icon-gongzuo:before { content: "\e613"; }
200 | 
201 | .icon-zixun:before { content: "\e614"; }
202 | 
203 | .icon-zixuntianchong:before { content: "\e616"; }
204 | 
205 | .icon-dingwei:before { content: "\e633"; }
206 | 
207 | .icon-next:before { content: "\e64c"; }
208 | 
209 | .icon-shangyiqu1:before { content: "\e634"; }
210 | 
211 | .icon-xiayiqu2:before { content: "\e637"; }
212 | 
213 | .icon-tianmao4:before { content: "\e617"; }
214 | 
215 | .icon-gouwuche-xuanzhong:before { content: "\e638"; }
216 | 
217 | .icon-wode-xuanzhong:before { content: "\e63b"; }
218 | 
219 | .icon-gouwuche:before { content: "\e63c"; }
220 | 
221 | .icon-wode:before { content: "\e647"; }
222 | 
223 | .icon-shouye:before { content: "\e648"; }
224 | 
225 | .icon-dazhongdianping:before { content: "\e692"; }
226 | 
227 | .icon-douban:before { content: "\e695"; }
228 | 
229 | .icon-taobao:before { content: "\e696"; }
230 | 
231 | .icon-tengxunweibo:before { content: "\e697"; }
232 | 
233 | .icon-renren:before { content: "\e698"; }
234 | 
235 | .icon-youxiang:before { content: "\e699"; }
236 | 
237 | .icon-weixin:before { content: "\e69a"; }
238 | 
239 | .icon-zhifubao:before { content: "\e69b"; }
240 | 
241 | .icon-yinxiangbiji:before { content: "\e69c"; }
242 | 
243 | .icon-Facebook:before { content: "\e69e"; }
244 | 
245 | .icon-dribbble:before { content: "\e69f"; }
246 | 
247 | .icon-linkedin:before { content: "\e6a0"; }
248 | 
249 | .icon-Instagram:before { content: "\e6a1"; }
250 | 
251 | .icon-pinterest:before { content: "\e6a2"; }
252 | 
253 | .icon-qqkongjian:before { content: "\e6a3"; }
254 | 
255 | .icon-reddit:before { content: "\e6a4"; }
256 | 
257 | .icon-tumblr:before { content: "\e6a5"; }
258 | 
259 | .icon-zhihu:before { content: "\e6a6"; }
260 | 
261 | .icon-youku:before { content: "\e6a7"; }
262 | 
263 | .icon-twitter:before { content: "\e6a8"; }
264 | 
265 | .icon-quora:before { content: "\e6a9"; }
266 | 
267 | .icon-path:before { content: "\e6aa"; }
268 | 
269 | .icon-youdaoyunbiji:before { content: "\e6ab"; }
270 | 
271 | .icon-snapchat:before { content: "\e6ad"; }
272 | 
273 | .icon-line:before { content: "\e6ae"; }
274 | 
275 | .icon-xinlangweibo:before { content: "\e6af"; }
276 | 
277 | .icon-qq:before { content: "\e6b0"; }
278 | 
279 | .icon-whatsapp:before { content: "\e6b1"; }
280 | 
281 | .icon-fenlei:before { content: "\e649"; }
282 | 
283 | .icon-fenlei-xuanzhong:before { content: "\e64a"; }
284 | 
285 | .icon-pengyouquan:before { content: "\e6b2"; }
286 | 
287 | .icon-xiangshang:before { content: "\e64b"; }
288 | 
289 | .icon-xiangxia:before { content: "\e650"; }
290 | 
291 | .icon-shizhong1:before { content: "\e6b3"; }
292 | 
293 | .icon-xiangzuo:before { content: "\e653"; }
294 | 
295 | .icon-01:before { content: "\e618"; }
296 | 
297 | .icon-02:before { content: "\e619"; }
298 | 
299 | .icon-03:before { content: "\e61b"; }
300 | 
301 | .icon-051:before { content: "\e61f"; }
302 | 
303 | .icon-06:before { content: "\e620"; }
304 | 
305 | .icon-071:before { content: "\e623"; }
306 | 
307 | .icon-random:before { content: "\e504"; }
308 | 
309 | .icon-08:before { content: "\e624"; }
310 | 
311 | .icon-09:before { content: "\e625"; }
312 | 
313 | .icon-101:before { content: "\e626"; }
314 | 
315 | .icon-11:before { content: "\e629"; }
316 | 
317 | .icon-12:before { content: "\e62b"; }
318 | 
319 | .icon-14:before { content: "\e62d"; }
320 | 
321 | .icon-17:before { content: "\e632"; }
322 | 
323 | .icon-18:before { content: "\e635"; }
324 | 
325 | .icon-20:before { content: "\e655"; }
326 | 
327 | .icon-21:before { content: "\e656"; }
328 | 
329 | .icon-twitter1:before { content: "\e659"; }
330 | 
331 | .icon-facebook:before { content: "\e65a"; }
332 | 
333 | .icon-weixin1:before { content: "\e657"; }
334 | 
335 | .icon-Yahoo:before { content: "\e65b"; }
336 | 
337 | .icon-Skye:before { content: "\e65c"; }
338 | 
339 | .icon-Google:before { content: "\e65d"; }
340 | 
341 | .icon-anzhuo:before { content: "\e65f"; }
342 | 
343 | .icon-yamaxun:before { content: "\e660"; }
344 | 
345 | .icon-linkedin1:before { content: "\e664"; }
346 | 
347 | .icon-weixinpengyouquan:before { content: "\e658"; }
348 | 
349 | .icon-YouTube:before { content: "\e666"; }
350 | 
351 | .icon-qq1:before { content: "\e667"; }
352 | 
353 | .icon-xinlang:before { content: "\e668"; }
354 | 
355 | .icon-facebook1:before { content: "\e66b"; }
356 | 
357 | .icon-Qzone:before { content: "\e66c"; }
358 | 
359 | .icon-QQ:before { content: "\e66d"; }
360 | 
361 | .icon-xinlang1:before { content: "\e66e"; }
362 | 
363 | .icon-QQ_weibo:before { content: "\e66f"; }
364 | 
365 | .icon-zhifubao1:before { content: "\e670"; }
366 | 
367 | .icon-taobao1:before { content: "\e671"; }
368 | 
369 | .icon-weichat:before { content: "\e672"; }
370 | 
371 | .icon-douban1:before { content: "\e673"; }
372 | 
373 | .icon-renren1:before { content: "\e674"; }
374 | 
375 | .icon-email:before { content: "\e676"; }
376 | 
377 | .icon-youku1:before { content: "\e677"; }
378 | 
379 | .icon-twitter2:before { content: "\e67a"; }
380 | 
381 | .icon-pingguo:before { content: "\e67b"; }
382 | 
383 | .icon-shoucang:before { content: "\e67c"; }
384 | 
385 | .icon-qiaquan:before { content: "\e67d"; }
386 | 
387 | .icon-wenjian:before { content: "\e67f"; }
388 | 
389 | .icon-bianji:before { content: "\e680"; }
390 | 
391 | .icon-shezhi:before { content: "\e681"; }
392 | 
393 | .icon-didian:before { content: "\e682"; }
394 | 
395 | .icon-feiji:before { content: "\e684"; }
396 | 
397 | .icon-dianhua:before { content: "\e687"; }
398 | 
399 | .icon-lajitong:before { content: "\e688"; }
400 | 
401 | .icon-shouji:before { content: "\e68a"; }
402 | 
403 | .icon-qianbao:before { content: "\e68b"; }
404 | 
405 | .icon-youxiang1:before { content: "\e68e"; }
406 | 
407 | .icon-yuechi:before { content: "\e6b4"; }
408 | 
409 | .icon-xuewei:before { content: "\e6b5"; }
410 | 
411 | .icon-pingfen:before { content: "\e6b6"; }
412 | 
413 | .icon-naozhong:before { content: "\e6b7"; }
414 | 
415 | .icon-jianpan:before { content: "\e6b8"; }
416 | 
417 | .icon-baidu:before { content: "\e6b9"; }
418 | 
419 | .icon-baidu2:before { content: "\e6ba"; }
420 | 
421 | .icon-QQ1:before { content: "\e6bc"; }
422 | 
423 | .icon-baidu1:before { content: "\e6bd"; }
424 | 
425 | .icon-QQ2:before { content: "\e6be"; }
426 | 
427 | .icon-QQ11:before { content: "\e6bf"; }
428 | 
429 | .icon-taobao2:before { content: "\e6c0"; }
430 | 
431 | .icon-taobao11:before { content: "\e6c1"; }
432 | 
433 | .icon-taobao21:before { content: "\e6c2"; }
434 | 
435 | .icon-tengxunweibo1:before { content: "\e6c3"; }
436 | 
437 | .icon-tengxunweibo2:before { content: "\e6c4"; }
438 | 
439 | .icon-weixin2:before { content: "\e6c5"; }
440 | 
441 | .icon-tengxunweibo21:before { content: "\e6c6"; }
442 | 
443 | .icon-weixin11:before { content: "\e6c7"; }
444 | 
445 | .icon-weixin21:before { content: "\e6c8"; }
446 | 
447 | .icon-xinlangweibo1:before { content: "\e6c9"; }
448 | 
449 | .icon-xinlangweibo11:before { content: "\e6ca"; }
450 | 
451 | .icon-xinlangweibo2:before { content: "\e6cb"; }
452 | 
453 | .icon-icongerenzhongxin-01:before { content: "\e6cc"; }
454 | 
455 | .icon-iconhuidaoshouye:before { content: "\e6cd"; }
456 | 
457 | .icon-angle-left:before { content: "\e6ce"; }
458 | 
459 | .icon-angle-double-left:before { content: "\e6cf"; }
460 | 
461 | .icon-angle-double-right:before { content: "\e6d0"; }
462 | 
463 | .icon-angle-down:before { content: "\e6d1"; }
464 | 
465 | .icon-angle-double-up:before { content: "\e6d3"; }
466 | 
467 | .icon-angle-double-down:before { content: "\e6d4"; }
468 | 
469 | .icon-angle-up:before { content: "\e6d5"; }
470 | 
471 | .icon-angle-right:before { content: "\e6d6"; }
472 | 
473 | .icon-arrow-small-down:before { content: "\e6d7"; }
474 | 
475 | .icon-arrow-down:before { content: "\e6d8"; }
476 | 
477 | .icon-arrow-left:before { content: "\e6d9"; }
478 | 
479 | .icon-arrow-right:before { content: "\e6da"; }
480 | 
481 | .icon-arrow-small-left:before { content: "\e6db"; }
482 | 
483 | .icon-arrow-small-right:before { content: "\e6dc"; }
484 | 
485 | .icon-arrow-up:before { content: "\e6dd"; }
486 | 
487 | .icon-arrow-small-up:before { content: "\e6de"; }
488 | 
489 | .icon-chevron-thin-left:before { content: "\e6df"; }
490 | 
491 | .icon-chevron-thin-down:before { content: "\e6e0"; }
492 | 
493 | .icon-chevron-thin-right:before { content: "\e6e1"; }
494 | 
495 | .icon-chevron-thin-up:before { content: "\e6e2"; }
496 | 
497 | .icon-triangle-down:before { content: "\e6e3"; }
498 | 
499 | .icon-rewind:before { content: "\e6e4"; }
500 | 
501 | .icon-triangle-left:before { content: "\e6e5"; }
502 | 
503 | .icon-triangle-right:before { content: "\e6e6"; }
504 | 
505 | .icon-triangle-up:before { content: "\e6e8"; }
506 | 
507 | .icon-fast-forward:before { content: "\e6e9"; }
508 | 
509 | .icon-kefu:before { content: "\e6ea"; }
510 | 
511 | .icon-shouqi-01:before { content: "\e6eb"; }
512 | 
513 | .icon-bofang4:before { content: "\e6ec"; }
514 | 
515 | .icon-biaoqian:before { content: "\e6ed"; }
516 | 
517 | .icon-WIFI:before { content: "\e6ee"; }
518 | 
519 | .icon-cuo:before { content: "\e6ef"; }
520 | 
521 | .icon-dianzan:before { content: "\e6f0"; }
522 | 
523 | .icon-dingwei1:before { content: "\e6f2"; }
524 | 
525 | .icon-dui:before { content: "\e6f3"; }
526 | 
527 | .icon-erji:before { content: "\e6f4"; }
528 | 
529 | .icon-gengduo:before { content: "\e6f5"; }
530 | 
531 | .icon-fengjing:before { content: "\e6f6"; }
532 | 
533 | .icon-guangpan:before { content: "\e6f7"; }
534 | 
535 | .icon-geren:before { content: "\e6f8"; }
536 | 
537 | .icon-gengduo-2:before { content: "\e6f9"; }
538 | 
539 | .icon-lingsheng:before { content: "\e6fa"; }
540 | 
541 | .icon-jia:before { content: "\e6fb"; }
542 | 
543 | .icon-lanya:before { content: "\e6fc"; }
544 | 
545 | .icon-nv:before { content: "\e6fd"; }
546 | 
547 | .icon-nan:before { content: "\e6fe"; }
548 | 
549 | .icon-shezhi1:before { content: "\e6ff"; }
550 | 
551 | .icon-shipin:before { content: "\e700"; }
552 | 
553 | .icon-shoucang1:before { content: "\e701"; }
554 | 
555 | .icon-sousuo:before { content: "\e702"; }
556 | 
557 | .icon-suo:before { content: "\e703"; }
558 | 
559 | .icon-xiala:before { content: "\e704"; }
560 | 
561 | .icon-tongzhi:before { content: "\e705"; }
562 | 
563 | .icon-xiayishou:before { content: "\e706"; }
564 | 
565 | .icon-xiazai:before { content: "\e707"; }
566 | 
567 | .icon-xinxi:before { content: "\e709"; }
568 | 
569 | .icon-yuyin:before { content: "\e70a"; }
570 | 
571 | .icon-zhuanhuan:before { content: "\e70b"; }
572 | 
573 | .icon-zuobiao:before { content: "\e70c"; }
574 | 
575 | .icon-shengyin:before { content: "\e70d"; }
576 | 
577 | .icon-shoucang2:before { content: "\e70e"; }
578 | 
579 | .icon-fuzhi:before { content: "\e70f"; }
580 | 
581 | .icon-anquanshezhi:before { content: "\e710"; }
582 | 
583 | .icon-shouji1:before { content: "\e711"; }
584 | 
585 | .icon-tuichu:before { content: "\e712"; }
586 | 
587 | .icon-xiaoxi2:before { content: "\e713"; }
588 | 
589 | .icon-gongzuojilu:before { content: "\e714"; }
590 | 
591 | .icon-faxiandingdan:before { content: "\e715"; }
592 | 
593 | .icon-gerenxinxi:before { content: "\e716"; }
594 | 
595 | .icon-wodedingdan:before { content: "\e717"; }
596 | 
597 | .icon-tijiaodingdan:before { content: "\e718"; }
598 | 
599 | .icon-querenwancheng:before { content: "\e719"; }
600 | 
601 | .icon-yibangding:before { content: "\e71a"; }
602 | 
603 | .icon-weibangding:before { content: "\e71b"; }
604 | 
605 | .icon-baocun:before { content: "\e71c"; }
606 | 
607 | .icon-quxiao:before { content: "\e71d"; }
608 | 
609 | .icon-tianjia:before { content: "\e71e"; }
610 | 
611 | .icon-bianji1:before { content: "\e71f"; }
612 | 
613 | .icon-riqixuanze:before { content: "\e720"; }
614 | 
615 | .icon-shanchu:before { content: "\e721"; }
616 | 
617 | .icon-dizhi-01:before { content: "\e722"; }
618 | 
619 | .icon-youjiantou-01:before { content: "\e723"; }
620 | 
621 | .icon-youhuiquan-01:before { content: "\e724"; }
622 | 
623 | .icon-daishouhuo-01:before { content: "\e725"; }
624 | 
625 | .icon-quanbudingdan-01:before { content: "\e726"; }
626 | 
627 | .icon-youhuiquan-geren-01:before { content: "\e727"; }
628 | 
629 | .icon-shanchu-01:before { content: "\e728"; }
630 | 
631 | .icon-fangdajing:before { content: "\e729"; }
632 | 
633 | .icon-guanbi-01:before { content: "\e72a"; }
634 | 
635 | .icon-meiyoudingdan-01:before { content: "\e72b"; }
636 | 
637 | .icon-xuanzhong-01:before { content: "\e72c"; }
638 | 
639 | .icon-weixuanzhong-01:before { content: "\e72d"; }
640 | 
641 | .icon-zhifu-01:before { content: "\e72e"; }
642 | 
643 | .icon-zuojiantou-01:before { content: "\e72f"; }
644 | 
645 | .icon-gengduo-01:before { content: "\e730"; }
646 | 
647 | 


--------------------------------------------------------------------------------
/src/fonts0/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/sort/1df624687ebb489c5dff02f30db628e6b0836798/src/fonts0/iconfont.eot


--------------------------------------------------------------------------------
/src/fonts0/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/sort/1df624687ebb489c5dff02f30db628e6b0836798/src/fonts0/iconfont.ttf


--------------------------------------------------------------------------------
/src/fonts0/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/sort/1df624687ebb489c5dff02f30db628e6b0836798/src/fonts0/iconfont.woff


--------------------------------------------------------------------------------
/src/fonts0/simkai.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/sort/1df624687ebb489c5dff02f30db628e6b0836798/src/fonts0/simkai.ttf


--------------------------------------------------------------------------------
/src/fonts0/ygyxsziti2.0.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/sort/1df624687ebb489c5dff02f30db628e6b0836798/src/fonts0/ygyxsziti2.0.ttf


--------------------------------------------------------------------------------
/src/img/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/sort/1df624687ebb489c5dff02f30db628e6b0836798/src/img/1.png


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <link rel="stylesheet" href="css/index.css">
 9 |     <title>Document</title>
10 | </head>
11 | 
12 | <body>
13 |     <div class="wrap">
14 |         <header>
15 |             <input type="text" class="search">
16 |             <button class="search-btn">搜索</button>
17 |         </header>
18 |         <section>
19 |             <div class="sort-wrap">
20 |                 <p class="all">
21 |                     <span>综合排序</span>
22 |                     <span class="type none">
23 |                         <b class="asort">按价格升序</b>
24 |                         <b class="desort">按价格降序</b>
25 |                         <b class="credit">按信用排序</b>
26 |                     </span>
27 |                 </p>
28 |                 <p class="sale">销量排序</p>
29 |                 <p class='changeView'>切换视图</p>
30 |             </div>
31 | 
32 |             <div class="list-wrap">
33 |                 <div class="list-con ">
34 |                     <p id="pullDown">下拉刷新</p>
35 |                     <div class="dl-box">
36 |                         <!-- <dl>
37 |                                 <dt>
38 |                                     <img src="img/1.png" alt="">
39 |                                 </dt>
40 |                                 <dd>
41 |                                     <p>
42 |                                         百题百题百题百题百题百题百题百题百题百题
43 |                                     </p>
44 |                                     <p>
45 |                                         销量：<b>6789</b>
46 |                                     </p>
47 |                                     <p>
48 |                                         价格：<b>678</b>
49 |                                     </p>
50 |                                     <p>
51 |                                         信用：<b>78</b>
52 |                                     </p>
53 |                                 </dd>
54 |                             </dl> -->
55 | 
56 |                     </div>
57 |                     <p id="pullUp">下拉刷新</p>
58 |                 </div>
59 |             </div>
60 |         </section>
61 |     </div>
62 | 
63 |     <script src="js/common/flexible.js"></script>
64 |     <script src="js/common/require.js" data-main="js/module/index.js"></script>
65 | </body>
66 | 
67 | </html>


--------------------------------------------------------------------------------
/src/js/common/ajax.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Author: fairy·guanyue 
 3 |  * @Date: 2018-12-07 19:20:00 
 4 |  * @Last Modified by: fairy·guanyue
 5 |  * @Last Modified time: 2018-12-12 20:47:40
 6 |  */
 7 | function ajax(opt) {
 8 |     var def = {
 9 |         type: "get",
10 |         url: "",
11 |         async: true,
12 |         dataType: "text",
13 |     }
14 |     var setting = extend({}, def, opt);
15 |     if (!setting.url) {
16 |         return
17 |     }
18 |     //格式化data
19 |     var data = setting.data && format(setting.data);
20 | 
21 |     // ajax发起请求
22 |     var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
23 |     xhr.onreadystatechange = function() {
24 |             if (xhr.readyState === 4) {
25 |                 if (xhr.status === 200 || xhr.status === 304) { //请求成功
26 |                     //获取相应数据responseText
27 |                     // 判断dataType
28 |                     if (setting.dataType === "json") {
29 |                         setting.success && setting.success(JSON.parse(xhr.responseText))
30 |                     } else {
31 |                         setting.success && setting.success(xhr.responseText)
32 |                     }
33 |                 } else { //请求失败
34 |                     setting.error && setting.error("err");
35 |                 }
36 | 
37 |             }
38 |         }
39 |         //4、发送请求  send  send(sss)
40 |     switch (setting.type.toUpperCase()) {
41 |         case 'GET':
42 |             var url = setting.data ? setting.url + '?' + setting.data : setting.url;
43 |             xhr.open(setting.type, url, setting.async);
44 |             xhr.send();
45 |             break;
46 |         case 'POST':
47 |             xhr.open(setting.type, setting.url, setting.async);
48 |             xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
49 |             xhr.send(data);
50 |             break;
51 |     }
52 | 
53 | }
54 | // 调用
55 | // ajax({
56 | //         type: "get",
57 | //         url: "http://localhost:8080/getData",
58 | //         data: {
59 | //             name: "gy",
60 | //             age: 18
61 | //         },
62 | //         dataType: "josn",
63 | //         success: function(data) {
64 | //             console.log(data)
65 | //         },
66 | //         err: function() {}
67 | //     })
68 | //合并对象的函数
69 | function extend() {
70 |     for (var i = 0; i < arguments.length; i++) {
71 |         for (var k in arguments[i]) {
72 |             arguments[0][k] = arguments[i][k]
73 |         }
74 |     }
75 |     return arguments[0]
76 | }
77 | //格式化 参数
78 | function format(obj) {
79 |     var arr = [];
80 |     for (var i in obj) {
81 |         arr.push(i + "=" + obj[i])
82 |     }
83 |     return arr.join("&")
84 | }


--------------------------------------------------------------------------------
/src/js/common/flexible.js:
--------------------------------------------------------------------------------
 1 | (function(d, f) { var s = d.document; var c = s.documentElement; var m = s.querySelector('meta[name="viewport"]'); var n = s.querySelector('meta[name="flexible"]'); var a = 0; var r = 0; var b = 0; var l; var e = f.flexible || (f.flexible = {}); if (n) { var j = n.getAttribute("content"); if (j) { var q = j.match(/initial\-dpr=([\d\.]+)/); var h = j.match(/maximum\-dpr=([\d\.]+)/); if (q) { a = parseFloat(q[1]);
 2 |                 r = parseFloat((1 / a).toFixed(2)) } if (h) { a = parseFloat(h[1]);
 3 |                 r = parseFloat((1 / a).toFixed(2)) } } } if (!a && !r) { var p = d.navigator.appVersion.match(/android/gi); var o = d.navigator.appVersion.match(/iphone/gi); var k = d.devicePixelRatio; if (k >= 3 && (!a || a >= 3)) { a = 3 } else { if (k >= 2 && (!a || a >= 2)) { a = 2 } else { a = 1 } }
 4 |         r = 1 / a }
 5 |     c.setAttribute("data-dpr", a);
 6 |     m = s.createElement("meta");
 7 |     m.setAttribute("name", "viewport");
 8 |     m.setAttribute("content", "width=device-width, initial-scale=" + r + ", maximum-scale=" + r + ", minimum-scale=" + r + ", user-scalable=no"); if (c.firstElementChild) { c.firstElementChild.appendChild(m) } else { var g = s.createElement("div");
 9 |         g.appendChild(m);
10 |         s.write(g.innerHTML) }
11 | 
12 |     function i() { var u = c.getBoundingClientRect().width; if (u / a > 540) { u = 540 * a } var w = u / 10;
13 |         c.style.fontSize = w + "px";
14 |         e.rem = d.rem = w; var v = parseFloat(c.style.fontSize),
15 |             t = parseFloat(window.getComputedStyle(c).getPropertyValue("font-size"));
16 |         console.log("flexible.refreshRem: fontSize && finalFontSize => ", v, t); if (v !== t) { c.style.fontSize = v * (v / t) + "px";
17 |             console.log("flexible.refreshRem.fixed: fontSize  => ", c.style.fontSize) } }
18 |     d.addEventListener("resize", function() { clearTimeout(l);
19 |         l = setTimeout(i, 300) }, false);
20 |     d.addEventListener("pageshow", function(t) { if (t.persisted) { clearTimeout(l);
21 |             l = setTimeout(i, 300) } }, false); if (s.readyState === "complete") { s.body.style.fontSize = 12 * a + "px" } else { s.addEventListener("DOMContentLoaded", function(t) { s.body.style.fontSize = 12 * a + "px" }, false) }
22 |     i();
23 |     e.dpr = d.dpr = a;
24 |     e.refreshRem = i;
25 |     e.rem2px = function(u) { var t = parseFloat(u) * this.rem; if (typeof u === "string" && u.match(/rem$/)) { t += "px" } return t };
26 |     e.px2rem = function(u) { var t = parseFloat(u) / this.rem; if (typeof u === "string" && u.match(/px$/)) { t += "rem" } return t } })(window, window["lib"] || (window["lib"] = {}));


--------------------------------------------------------------------------------
/src/js/common/jquery.validate-1.13.1.js:
--------------------------------------------------------------------------------
   1 | /*!
   2 |  * jQuery Validation Plugin v1.13.1
   3 |  *
   4 |  * http://jqueryvalidation.org/
   5 |  *
   6 |  * Copyright (c) 2014 J枚rn Zaefferer
   7 |  * Released under the MIT license
   8 |  */
   9 | (function( factory ) {
  10 | 	if ( typeof define === "function" && define.amd ) {
  11 | 		define( ["jquery"], factory );
  12 | 	} else {
  13 | 		factory( jQuery );
  14 | 	}
  15 | }(function( $ ) {
  16 | 
  17 | $.extend($.fn, {
  18 | 	// http://jqueryvalidation.org/validate/
  19 | 	validate: function( options ) {
  20 | 
  21 | 		// if nothing is selected, return nothing; can't chain anyway
  22 | 		if ( !this.length ) {
  23 | 			if ( options && options.debug && window.console ) {
  24 | 				console.warn( "Nothing selected, can't validate, returning nothing." );
  25 | 			}
  26 | 			return;
  27 | 		}
  28 | 
  29 | 		// check if a validator for this form was already created
  30 | 		var validator = $.data( this[ 0 ], "validator" );
  31 | 		if ( validator ) {
  32 | 			return validator;
  33 | 		}
  34 | 
  35 | 		// Add novalidate tag if HTML5.
  36 | 		this.attr( "novalidate", "novalidate" );
  37 | 
  38 | 		validator = new $.validator( options, this[ 0 ] );
  39 | 		$.data( this[ 0 ], "validator", validator );
  40 | 
  41 | 		if ( validator.settings.onsubmit ) {
  42 | 
  43 | 			this.validateDelegate( ":submit", "click", function( event ) {
  44 | 				if ( validator.settings.submitHandler ) {
  45 | 					validator.submitButton = event.target;
  46 | 				}
  47 | 				// allow suppressing validation by adding a cancel class to the submit button
  48 | 				if ( $( event.target ).hasClass( "cancel" ) ) {
  49 | 					validator.cancelSubmit = true;
  50 | 				}
  51 | 
  52 | 				// allow suppressing validation by adding the html5 formnovalidate attribute to the submit button
  53 | 				if ( $( event.target ).attr( "formnovalidate" ) !== undefined ) {
  54 | 					validator.cancelSubmit = true;
  55 | 				}
  56 | 			});
  57 | 
  58 | 			// validate the form on submit
  59 | 			this.submit( function( event ) {
  60 | 				if ( validator.settings.debug ) {
  61 | 					// prevent form submit to be able to see console output
  62 | 					event.preventDefault();
  63 | 				}
  64 | 				function handle() {
  65 | 					var hidden, result;
  66 | 					if ( validator.settings.submitHandler ) {
  67 | 						if ( validator.submitButton ) {
  68 | 							// insert a hidden input as a replacement for the missing submit button
  69 | 							hidden = $( "<input type='hidden'/>" )
  70 | 								.attr( "name", validator.submitButton.name )
  71 | 								.val( $( validator.submitButton ).val() )
  72 | 								.appendTo( validator.currentForm );
  73 | 						}
  74 | 						result = validator.settings.submitHandler.call( validator, validator.currentForm, event );
  75 | 						if ( validator.submitButton ) {
  76 | 							// and clean up afterwards; thanks to no-block-scope, hidden can be referenced
  77 | 							hidden.remove();
  78 | 						}
  79 | 						if ( result !== undefined ) {
  80 | 							return result;
  81 | 						}
  82 | 						return false;
  83 | 					}
  84 | 					return true;
  85 | 				}
  86 | 
  87 | 				// prevent submit for invalid forms or custom submit handlers
  88 | 				if ( validator.cancelSubmit ) {
  89 | 					validator.cancelSubmit = false;
  90 | 					return handle();
  91 | 				}
  92 | 				if ( validator.form() ) {
  93 | 					if ( validator.pendingRequest ) {
  94 | 						validator.formSubmitted = true;
  95 | 						return false;
  96 | 					}
  97 | 					return handle();
  98 | 				} else {
  99 | 					validator.focusInvalid();
 100 | 					return false;
 101 | 				}
 102 | 			});
 103 | 		}
 104 | 
 105 | 		return validator;
 106 | 	},
 107 | 	// http://jqueryvalidation.org/valid/
 108 | 	valid: function() {
 109 | 		var valid, validator;
 110 | 
 111 | 		if ( $( this[ 0 ] ).is( "form" ) ) {
 112 | 			valid = this.validate().form();
 113 | 		} else {
 114 | 			valid = true;
 115 | 			validator = $( this[ 0 ].form ).validate();
 116 | 			this.each( function() {
 117 | 				valid = validator.element( this ) && valid;
 118 | 			});
 119 | 		}
 120 | 		return valid;
 121 | 	},
 122 | 	// attributes: space separated list of attributes to retrieve and remove
 123 | 	removeAttrs: function( attributes ) {
 124 | 		var result = {},
 125 | 			$element = this;
 126 | 		$.each( attributes.split( /\s/ ), function( index, value ) {
 127 | 			result[ value ] = $element.attr( value );
 128 | 			$element.removeAttr( value );
 129 | 		});
 130 | 		return result;
 131 | 	},
 132 | 	// http://jqueryvalidation.org/rules/
 133 | 	rules: function( command, argument ) {
 134 | 		var element = this[ 0 ],
 135 | 			settings, staticRules, existingRules, data, param, filtered;
 136 | 
 137 | 		if ( command ) {
 138 | 			settings = $.data( element.form, "validator" ).settings;
 139 | 			staticRules = settings.rules;
 140 | 			existingRules = $.validator.staticRules( element );
 141 | 			switch ( command ) {
 142 | 			case "add":
 143 | 				$.extend( existingRules, $.validator.normalizeRule( argument ) );
 144 | 				// remove messages from rules, but allow them to be set separately
 145 | 				delete existingRules.messages;
 146 | 				staticRules[ element.name ] = existingRules;
 147 | 				if ( argument.messages ) {
 148 | 					settings.messages[ element.name ] = $.extend( settings.messages[ element.name ], argument.messages );
 149 | 				}
 150 | 				break;
 151 | 			case "remove":
 152 | 				if ( !argument ) {
 153 | 					delete staticRules[ element.name ];
 154 | 					return existingRules;
 155 | 				}
 156 | 				filtered = {};
 157 | 				$.each( argument.split( /\s/ ), function( index, method ) {
 158 | 					filtered[ method ] = existingRules[ method ];
 159 | 					delete existingRules[ method ];
 160 | 					if ( method === "required" ) {
 161 | 						$( element ).removeAttr( "aria-required" );
 162 | 					}
 163 | 				});
 164 | 				return filtered;
 165 | 			}
 166 | 		}
 167 | 
 168 | 		data = $.validator.normalizeRules(
 169 | 		$.extend(
 170 | 			{},
 171 | 			$.validator.classRules( element ),
 172 | 			$.validator.attributeRules( element ),
 173 | 			$.validator.dataRules( element ),
 174 | 			$.validator.staticRules( element )
 175 | 		), element );
 176 | 
 177 | 		// make sure required is at front
 178 | 		if ( data.required ) {
 179 | 			param = data.required;
 180 | 			delete data.required;
 181 | 			data = $.extend( { required: param }, data );
 182 | 			$( element ).attr( "aria-required", "true" );
 183 | 		}
 184 | 
 185 | 		// make sure remote is at back
 186 | 		if ( data.remote ) {
 187 | 			param = data.remote;
 188 | 			delete data.remote;
 189 | 			data = $.extend( data, { remote: param });
 190 | 		}
 191 | 
 192 | 		return data;
 193 | 	}
 194 | });
 195 | 
 196 | // Custom selectors
 197 | $.extend( $.expr[ ":" ], {
 198 | 	// http://jqueryvalidation.org/blank-selector/
 199 | 	blank: function( a ) {
 200 | 		return !$.trim( "" + $( a ).val() );
 201 | 	},
 202 | 	// http://jqueryvalidation.org/filled-selector/
 203 | 	filled: function( a ) {
 204 | 		return !!$.trim( "" + $( a ).val() );
 205 | 	},
 206 | 	// http://jqueryvalidation.org/unchecked-selector/
 207 | 	unchecked: function( a ) {
 208 | 		return !$( a ).prop( "checked" );
 209 | 	}
 210 | });
 211 | 
 212 | // constructor for validator
 213 | $.validator = function( options, form ) {
 214 | 	this.settings = $.extend( true, {}, $.validator.defaults, options );
 215 | 	this.currentForm = form;
 216 | 	this.init();
 217 | };
 218 | 
 219 | // http://jqueryvalidation.org/jQuery.validator.format/
 220 | $.validator.format = function( source, params ) {
 221 | 	if ( arguments.length === 1 ) {
 222 | 		return function() {
 223 | 			var args = $.makeArray( arguments );
 224 | 			args.unshift( source );
 225 | 			return $.validator.format.apply( this, args );
 226 | 		};
 227 | 	}
 228 | 	if ( arguments.length > 2 && params.constructor !== Array  ) {
 229 | 		params = $.makeArray( arguments ).slice( 1 );
 230 | 	}
 231 | 	if ( params.constructor !== Array ) {
 232 | 		params = [ params ];
 233 | 	}
 234 | 	$.each( params, function( i, n ) {
 235 | 		source = source.replace( new RegExp( "\\{" + i + "\\}", "g" ), function() {
 236 | 			return n;
 237 | 		});
 238 | 	});
 239 | 	return source;
 240 | };
 241 | 
 242 | $.extend( $.validator, {
 243 | 
 244 | 	defaults: {
 245 | 		messages: {},
 246 | 		groups: {},
 247 | 		rules: {},
 248 | 		errorClass: "error",
 249 | 		validClass: "valid",
 250 | 		errorElement: "label",
 251 | 		focusCleanup: false,
 252 | 		focusInvalid: true,
 253 | 		errorContainer: $( [] ),
 254 | 		errorLabelContainer: $( [] ),
 255 | 		onsubmit: true,
 256 | 		ignore: ":hidden",
 257 | 		ignoreTitle: false,
 258 | 		onfocusin: function( element ) {
 259 | 			this.lastActive = element;
 260 | 
 261 | 			// Hide error label and remove error class on focus if enabled
 262 | 			if ( this.settings.focusCleanup ) {
 263 | 				if ( this.settings.unhighlight ) {
 264 | 					this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );
 265 | 				}
 266 | 				this.hideThese( this.errorsFor( element ) );
 267 | 			}
 268 | 		},
 269 | 		onfocusout: function( element ) {
 270 | 			if ( !this.checkable( element ) && ( element.name in this.submitted || !this.optional( element ) ) ) {
 271 | 				this.element( element );
 272 | 			}
 273 | 		},
 274 | 		onkeyup: function( element, event ) {
 275 | 			if ( event.which === 9 && this.elementValue( element ) === "" ) {
 276 | 				return;
 277 | 			} else if ( element.name in this.submitted || element === this.lastElement ) {
 278 | 				this.element( element );
 279 | 			}
 280 | 		},
 281 | 		onclick: function( element ) {
 282 | 			// click on selects, radiobuttons and checkboxes
 283 | 			if ( element.name in this.submitted ) {
 284 | 				this.element( element );
 285 | 
 286 | 			// or option elements, check parent select in that case
 287 | 			} else if ( element.parentNode.name in this.submitted ) {
 288 | 				this.element( element.parentNode );
 289 | 			}
 290 | 		},
 291 | 		highlight: function( element, errorClass, validClass ) {
 292 | 			if ( element.type === "radio" ) {
 293 | 				this.findByName( element.name ).addClass( errorClass ).removeClass( validClass );
 294 | 			} else {
 295 | 				$( element ).addClass( errorClass ).removeClass( validClass );
 296 | 			}
 297 | 		},
 298 | 		unhighlight: function( element, errorClass, validClass ) {
 299 | 			if ( element.type === "radio" ) {
 300 | 				this.findByName( element.name ).removeClass( errorClass ).addClass( validClass );
 301 | 			} else {
 302 | 				$( element ).removeClass( errorClass ).addClass( validClass );
 303 | 			}
 304 | 		}
 305 | 	},
 306 | 
 307 | 	// http://jqueryvalidation.org/jQuery.validator.setDefaults/
 308 | 	setDefaults: function( settings ) {
 309 | 		$.extend( $.validator.defaults, settings );
 310 | 	},
 311 | 
 312 | 	messages: {
 313 | 		required: "This field is required.",
 314 | 		remote: "Please fix this field.",
 315 | 		email: "Please enter a valid email address.",
 316 | 		url: "Please enter a valid URL.",
 317 | 		date: "Please enter a valid date.",
 318 | 		dateISO: "Please enter a valid date ( ISO ).",
 319 | 		number: "Please enter a valid number.",
 320 | 		digits: "Please enter only digits.",
 321 | 		creditcard: "Please enter a valid credit card number.",
 322 | 		equalTo: "Please enter the same value again.",
 323 | 		maxlength: $.validator.format( "Please enter no more than {0} characters." ),
 324 | 		minlength: $.validator.format( "Please enter at least {0} characters." ),
 325 | 		rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
 326 | 		range: $.validator.format( "Please enter a value between {0} and {1}." ),
 327 | 		max: $.validator.format( "Please enter a value less than or equal to {0}." ),
 328 | 		min: $.validator.format( "Please enter a value greater than or equal to {0}." )
 329 | 	},
 330 | 
 331 | 	autoCreateRanges: false,
 332 | 
 333 | 	prototype: {
 334 | 
 335 | 		init: function() {
 336 | 			this.labelContainer = $( this.settings.errorLabelContainer );
 337 | 			this.errorContext = this.labelContainer.length && this.labelContainer || $( this.currentForm );
 338 | 			this.containers = $( this.settings.errorContainer ).add( this.settings.errorLabelContainer );
 339 | 			this.submitted = {};
 340 | 			this.valueCache = {};
 341 | 			this.pendingRequest = 0;
 342 | 			this.pending = {};
 343 | 			this.invalid = {};
 344 | 			this.reset();
 345 | 
 346 | 			var groups = ( this.groups = {} ),
 347 | 				rules;
 348 | 			$.each( this.settings.groups, function( key, value ) {
 349 | 				if ( typeof value === "string" ) {
 350 | 					value = value.split( /\s/ );
 351 | 				}
 352 | 				$.each( value, function( index, name ) {
 353 | 					groups[ name ] = key;
 354 | 				});
 355 | 			});
 356 | 			rules = this.settings.rules;
 357 | 			$.each( rules, function( key, value ) {
 358 | 				rules[ key ] = $.validator.normalizeRule( value );
 359 | 			});
 360 | 
 361 | 			function delegate( event ) {
 362 | 				var validator = $.data( this[ 0 ].form, "validator" ),
 363 | 					eventType = "on" + event.type.replace( /^validate/, "" ),
 364 | 					settings = validator.settings;
 365 | 				if ( settings[ eventType ] && !this.is( settings.ignore ) ) {
 366 | 					settings[ eventType ].call( validator, this[ 0 ], event );
 367 | 				}
 368 | 			}
 369 | 			$( this.currentForm )
 370 | 				.validateDelegate( ":text, [type='password'], [type='file'], select, textarea, " +
 371 | 					"[type='number'], [type='search'] ,[type='tel'], [type='url'], " +
 372 | 					"[type='email'], [type='datetime'], [type='date'], [type='month'], " +
 373 | 					"[type='week'], [type='time'], [type='datetime-local'], " +
 374 | 					"[type='range'], [type='color'], [type='radio'], [type='checkbox']",
 375 | 					"focusin focusout keyup", delegate)
 376 | 				// Support: Chrome, oldIE
 377 | 				// "select" is provided as event.target when clicking a option
 378 | 				.validateDelegate("select, option, [type='radio'], [type='checkbox']", "click", delegate);
 379 | 
 380 | 			if ( this.settings.invalidHandler ) {
 381 | 				$( this.currentForm ).bind( "invalid-form.validate", this.settings.invalidHandler );
 382 | 			}
 383 | 
 384 | 			// Add aria-required to any Static/Data/Class required fields before first validation
 385 | 			// Screen readers require this attribute to be present before the initial submission http://www.w3.org/TR/WCAG-TECHS/ARIA2.html
 386 | 			$( this.currentForm ).find( "[required], [data-rule-required], .required" ).attr( "aria-required", "true" );
 387 | 		},
 388 | 
 389 | 		// http://jqueryvalidation.org/Validator.form/
 390 | 		form: function() {
 391 | 			this.checkForm();
 392 | 			$.extend( this.submitted, this.errorMap );
 393 | 			this.invalid = $.extend({}, this.errorMap );
 394 | 			if ( !this.valid() ) {
 395 | 				$( this.currentForm ).triggerHandler( "invalid-form", [ this ]);
 396 | 			}
 397 | 			this.showErrors();
 398 | 			return this.valid();
 399 | 		},
 400 | 
 401 | 		checkForm: function() {
 402 | 			this.prepareForm();
 403 | 			for ( var i = 0, elements = ( this.currentElements = this.elements() ); elements[ i ]; i++ ) {
 404 | 				this.check( elements[ i ] );
 405 | 			}
 406 | 			return this.valid();
 407 | 		},
 408 | 
 409 | 		// http://jqueryvalidation.org/Validator.element/
 410 | 		element: function( element ) {
 411 | 			var cleanElement = this.clean( element ),
 412 | 				checkElement = this.validationTargetFor( cleanElement ),
 413 | 				result = true;
 414 | 
 415 | 			this.lastElement = checkElement;
 416 | 
 417 | 			if ( checkElement === undefined ) {
 418 | 				delete this.invalid[ cleanElement.name ];
 419 | 			} else {
 420 | 				this.prepareElement( checkElement );
 421 | 				this.currentElements = $( checkElement );
 422 | 
 423 | 				result = this.check( checkElement ) !== false;
 424 | 				if ( result ) {
 425 | 					delete this.invalid[ checkElement.name ];
 426 | 				} else {
 427 | 					this.invalid[ checkElement.name ] = true;
 428 | 				}
 429 | 			}
 430 | 			// Add aria-invalid status for screen readers
 431 | 			$( element ).attr( "aria-invalid", !result );
 432 | 
 433 | 			if ( !this.numberOfInvalids() ) {
 434 | 				// Hide error containers on last error
 435 | 				this.toHide = this.toHide.add( this.containers );
 436 | 			}
 437 | 			this.showErrors();
 438 | 			return result;
 439 | 		},
 440 | 
 441 | 		// http://jqueryvalidation.org/Validator.showErrors/
 442 | 		showErrors: function( errors ) {
 443 | 			if ( errors ) {
 444 | 				// add items to error list and map
 445 | 				$.extend( this.errorMap, errors );
 446 | 				this.errorList = [];
 447 | 				for ( var name in errors ) {
 448 | 					this.errorList.push({
 449 | 						message: errors[ name ],
 450 | 						element: this.findByName( name )[ 0 ]
 451 | 					});
 452 | 				}
 453 | 				// remove items from success list
 454 | 				this.successList = $.grep( this.successList, function( element ) {
 455 | 					return !( element.name in errors );
 456 | 				});
 457 | 			}
 458 | 			if ( this.settings.showErrors ) {
 459 | 				this.settings.showErrors.call( this, this.errorMap, this.errorList );
 460 | 			} else {
 461 | 				this.defaultShowErrors();
 462 | 			}
 463 | 		},
 464 | 
 465 | 		// http://jqueryvalidation.org/Validator.resetForm/
 466 | 		resetForm: function() {
 467 | 			if ( $.fn.resetForm ) {
 468 | 				$( this.currentForm ).resetForm();
 469 | 			}
 470 | 			this.submitted = {};
 471 | 			this.lastElement = null;
 472 | 			this.prepareForm();
 473 | 			this.hideErrors();
 474 | 			this.elements()
 475 | 					.removeClass( this.settings.errorClass )
 476 | 					.removeData( "previousValue" )
 477 | 					.removeAttr( "aria-invalid" );
 478 | 		},
 479 | 
 480 | 		numberOfInvalids: function() {
 481 | 			return this.objectLength( this.invalid );
 482 | 		},
 483 | 
 484 | 		objectLength: function( obj ) {
 485 | 			/* jshint unused: false */
 486 | 			var count = 0,
 487 | 				i;
 488 | 			for ( i in obj ) {
 489 | 				count++;
 490 | 			}
 491 | 			return count;
 492 | 		},
 493 | 
 494 | 		hideErrors: function() {
 495 | 			this.hideThese( this.toHide );
 496 | 		},
 497 | 
 498 | 		hideThese: function( errors ) {
 499 | 			errors.not( this.containers ).text( "" );
 500 | 			this.addWrapper( errors ).hide();
 501 | 		},
 502 | 
 503 | 		valid: function() {
 504 | 			return this.size() === 0;
 505 | 		},
 506 | 
 507 | 		size: function() {
 508 | 			return this.errorList.length;
 509 | 		},
 510 | 
 511 | 		focusInvalid: function() {
 512 | 			if ( this.settings.focusInvalid ) {
 513 | 				try {
 514 | 					$( this.findLastActive() || this.errorList.length && this.errorList[ 0 ].element || [])
 515 | 					.filter( ":visible" )
 516 | 					.focus()
 517 | 					// manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find
 518 | 					.trigger( "focusin" );
 519 | 				} catch ( e ) {
 520 | 					// ignore IE throwing errors when focusing hidden elements
 521 | 				}
 522 | 			}
 523 | 		},
 524 | 
 525 | 		findLastActive: function() {
 526 | 			var lastActive = this.lastActive;
 527 | 			return lastActive && $.grep( this.errorList, function( n ) {
 528 | 				return n.element.name === lastActive.name;
 529 | 			}).length === 1 && lastActive;
 530 | 		},
 531 | 
 532 | 		elements: function() {
 533 | 			var validator = this,
 534 | 				rulesCache = {};
 535 | 
 536 | 			// select all valid inputs inside the form (no submit or reset buttons)
 537 | 			return $( this.currentForm )
 538 | 			.find( "input, select, textarea" )
 539 | 			.not( ":submit, :reset, :image, [disabled], [readonly]" )
 540 | 			.not( this.settings.ignore )
 541 | 			.filter( function() {
 542 | 				if ( !this.name && validator.settings.debug && window.console ) {
 543 | 					console.error( "%o has no name assigned", this );
 544 | 				}
 545 | 
 546 | 				// select only the first element for each name, and only those with rules specified
 547 | 				if ( this.name in rulesCache || !validator.objectLength( $( this ).rules() ) ) {
 548 | 					return false;
 549 | 				}
 550 | 
 551 | 				rulesCache[ this.name ] = true;
 552 | 				return true;
 553 | 			});
 554 | 		},
 555 | 
 556 | 		clean: function( selector ) {
 557 | 			return $( selector )[ 0 ];
 558 | 		},
 559 | 
 560 | 		errors: function() {
 561 | 			var errorClass = this.settings.errorClass.split( " " ).join( "." );
 562 | 			return $( this.settings.errorElement + "." + errorClass, this.errorContext );
 563 | 		},
 564 | 
 565 | 		reset: function() {
 566 | 			this.successList = [];
 567 | 			this.errorList = [];
 568 | 			this.errorMap = {};
 569 | 			this.toShow = $( [] );
 570 | 			this.toHide = $( [] );
 571 | 			this.currentElements = $( [] );
 572 | 		},
 573 | 
 574 | 		prepareForm: function() {
 575 | 			this.reset();
 576 | 			this.toHide = this.errors().add( this.containers );
 577 | 		},
 578 | 
 579 | 		prepareElement: function( element ) {
 580 | 			this.reset();
 581 | 			this.toHide = this.errorsFor( element );
 582 | 		},
 583 | 
 584 | 		elementValue: function( element ) {
 585 | 			var val,
 586 | 				$element = $( element ),
 587 | 				type = element.type;
 588 | 
 589 | 			if ( type === "radio" || type === "checkbox" ) {
 590 | 				return $( "input[name='" + element.name + "']:checked" ).val();
 591 | 			} else if ( type === "number" && typeof element.validity !== "undefined" ) {
 592 | 				return element.validity.badInput ? false : $element.val();
 593 | 			}
 594 | 
 595 | 			val = $element.val();
 596 | 			if ( typeof val === "string" ) {
 597 | 				return val.replace(/\r/g, "" );
 598 | 			}
 599 | 			return val;
 600 | 		},
 601 | 
 602 | 		check: function( element ) {
 603 | 			element = this.validationTargetFor( this.clean( element ) );
 604 | 
 605 | 			var rules = $( element ).rules(),
 606 | 				rulesCount = $.map( rules, function( n, i ) {
 607 | 					return i;
 608 | 				}).length,
 609 | 				dependencyMismatch = false,
 610 | 				val = this.elementValue( element ),
 611 | 				result, method, rule;
 612 | 
 613 | 			for ( method in rules ) {
 614 | 				rule = { method: method, parameters: rules[ method ] };
 615 | 				try {
 616 | 
 617 | 					result = $.validator.methods[ method ].call( this, val, element, rule.parameters );
 618 | 
 619 | 					// if a method indicates that the field is optional and therefore valid,
 620 | 					// don't mark it as valid when there are no other rules
 621 | 					if ( result === "dependency-mismatch" && rulesCount === 1 ) {
 622 | 						dependencyMismatch = true;
 623 | 						continue;
 624 | 					}
 625 | 					dependencyMismatch = false;
 626 | 
 627 | 					if ( result === "pending" ) {
 628 | 						this.toHide = this.toHide.not( this.errorsFor( element ) );
 629 | 						return;
 630 | 					}
 631 | 
 632 | 					if ( !result ) {
 633 | 						this.formatAndAdd( element, rule );
 634 | 						return false;
 635 | 					}
 636 | 				} catch ( e ) {
 637 | 					if ( this.settings.debug && window.console ) {
 638 | 						console.log( "Exception occurred when checking element " + element.id + ", check the '" + rule.method + "' method.", e );
 639 | 					}
 640 | 					throw e;
 641 | 				}
 642 | 			}
 643 | 			if ( dependencyMismatch ) {
 644 | 				return;
 645 | 			}
 646 | 			if ( this.objectLength( rules ) ) {
 647 | 				this.successList.push( element );
 648 | 			}
 649 | 			return true;
 650 | 		},
 651 | 
 652 | 		// return the custom message for the given element and validation method
 653 | 		// specified in the element's HTML5 data attribute
 654 | 		// return the generic message if present and no method specific message is present
 655 | 		customDataMessage: function( element, method ) {
 656 | 			return $( element ).data( "msg" + method.charAt( 0 ).toUpperCase() +
 657 | 				method.substring( 1 ).toLowerCase() ) || $( element ).data( "msg" );
 658 | 		},
 659 | 
 660 | 		// return the custom message for the given element name and validation method
 661 | 		customMessage: function( name, method ) {
 662 | 			var m = this.settings.messages[ name ];
 663 | 			return m && ( m.constructor === String ? m : m[ method ]);
 664 | 		},
 665 | 
 666 | 		// return the first defined argument, allowing empty strings
 667 | 		findDefined: function() {
 668 | 			for ( var i = 0; i < arguments.length; i++) {
 669 | 				if ( arguments[ i ] !== undefined ) {
 670 | 					return arguments[ i ];
 671 | 				}
 672 | 			}
 673 | 			return undefined;
 674 | 		},
 675 | 
 676 | 		defaultMessage: function( element, method ) {
 677 | 			return this.findDefined(
 678 | 				this.customMessage( element.name, method ),
 679 | 				this.customDataMessage( element, method ),
 680 | 				// title is never undefined, so handle empty string as undefined
 681 | 				!this.settings.ignoreTitle && element.title || undefined,
 682 | 				$.validator.messages[ method ],
 683 | 				"<strong>Warning: No message defined for " + element.name + "</strong>"
 684 | 			);
 685 | 		},
 686 | 
 687 | 		formatAndAdd: function( element, rule ) {
 688 | 			var message = this.defaultMessage( element, rule.method ),
 689 | 				theregex = /\$?\{(\d+)\}/g;
 690 | 			if ( typeof message === "function" ) {
 691 | 				message = message.call( this, rule.parameters, element );
 692 | 			} else if ( theregex.test( message ) ) {
 693 | 				message = $.validator.format( message.replace( theregex, "{$1}" ), rule.parameters );
 694 | 			}
 695 | 			this.errorList.push({
 696 | 				message: message,
 697 | 				element: element,
 698 | 				method: rule.method
 699 | 			});
 700 | 
 701 | 			this.errorMap[ element.name ] = message;
 702 | 			this.submitted[ element.name ] = message;
 703 | 		},
 704 | 
 705 | 		addWrapper: function( toToggle ) {
 706 | 			if ( this.settings.wrapper ) {
 707 | 				toToggle = toToggle.add( toToggle.parent( this.settings.wrapper ) );
 708 | 			}
 709 | 			return toToggle;
 710 | 		},
 711 | 
 712 | 		defaultShowErrors: function() {
 713 | 			var i, elements, error;
 714 | 			for ( i = 0; this.errorList[ i ]; i++ ) {
 715 | 				error = this.errorList[ i ];
 716 | 				if ( this.settings.highlight ) {
 717 | 					this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );
 718 | 				}
 719 | 				this.showLabel( error.element, error.message );
 720 | 			}
 721 | 			if ( this.errorList.length ) {
 722 | 				this.toShow = this.toShow.add( this.containers );
 723 | 			}
 724 | 			if ( this.settings.success ) {
 725 | 				for ( i = 0; this.successList[ i ]; i++ ) {
 726 | 					this.showLabel( this.successList[ i ] );
 727 | 				}
 728 | 			}
 729 | 			if ( this.settings.unhighlight ) {
 730 | 				for ( i = 0, elements = this.validElements(); elements[ i ]; i++ ) {
 731 | 					this.settings.unhighlight.call( this, elements[ i ], this.settings.errorClass, this.settings.validClass );
 732 | 				}
 733 | 			}
 734 | 			this.toHide = this.toHide.not( this.toShow );
 735 | 			this.hideErrors();
 736 | 			this.addWrapper( this.toShow ).show();
 737 | 		},
 738 | 
 739 | 		validElements: function() {
 740 | 			return this.currentElements.not( this.invalidElements() );
 741 | 		},
 742 | 
 743 | 		invalidElements: function() {
 744 | 			return $( this.errorList ).map(function() {
 745 | 				return this.element;
 746 | 			});
 747 | 		},
 748 | 
 749 | 		showLabel: function( element, message ) {
 750 | 			var place, group, errorID,
 751 | 				error = this.errorsFor( element ),
 752 | 				elementID = this.idOrName( element ),
 753 | 				describedBy = $( element ).attr( "aria-describedby" );
 754 | 			if ( error.length ) {
 755 | 				// refresh error/success class
 756 | 				error.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );
 757 | 				// replace message on existing label
 758 | 				error.html( message );
 759 | 			} else {
 760 | 				// create error element
 761 | 				error = $( "<" + this.settings.errorElement + ">" )
 762 | 					.attr( "id", elementID + "-error" )
 763 | 					.addClass( this.settings.errorClass )
 764 | 					.html( message || "" );
 765 | 
 766 | 				// Maintain reference to the element to be placed into the DOM
 767 | 				place = error;
 768 | 				if ( this.settings.wrapper ) {
 769 | 					// make sure the element is visible, even in IE
 770 | 					// actually showing the wrapped element is handled elsewhere
 771 | 					place = error.hide().show().wrap( "<" + this.settings.wrapper + "/>" ).parent();
 772 | 				}
 773 | 				if ( this.labelContainer.length ) {
 774 | 					this.labelContainer.append( place );
 775 | 				} else if ( this.settings.errorPlacement ) {
 776 | 					this.settings.errorPlacement( place, $( element ) );
 777 | 				} else {
 778 | 					place.insertAfter( element );
 779 | 				}
 780 | 
 781 | 				// Link error back to the element
 782 | 				if ( error.is( "label" ) ) {
 783 | 					// If the error is a label, then associate using 'for'
 784 | 					error.attr( "for", elementID );
 785 | 				} else if ( error.parents( "label[for='" + elementID + "']" ).length === 0 ) {
 786 | 					// If the element is not a child of an associated label, then it's necessary
 787 | 					// to explicitly apply aria-describedby
 788 | 
 789 | 					errorID = error.attr( "id" ).replace( /(:|\.|\[|\])/g, "\\$1");
 790 | 					// Respect existing non-error aria-describedby
 791 | 					if ( !describedBy ) {
 792 | 						describedBy = errorID;
 793 | 					} else if ( !describedBy.match( new RegExp( "\\b" + errorID + "\\b" ) ) ) {
 794 | 						// Add to end of list if not already present
 795 | 						describedBy += " " + errorID;
 796 | 					}
 797 | 					$( element ).attr( "aria-describedby", describedBy );
 798 | 
 799 | 					// If this element is grouped, then assign to all elements in the same group
 800 | 					group = this.groups[ element.name ];
 801 | 					if ( group ) {
 802 | 						$.each( this.groups, function( name, testgroup ) {
 803 | 							if ( testgroup === group ) {
 804 | 								$( "[name='" + name + "']", this.currentForm )
 805 | 									.attr( "aria-describedby", error.attr( "id" ) );
 806 | 							}
 807 | 						});
 808 | 					}
 809 | 				}
 810 | 			}
 811 | 			if ( !message && this.settings.success ) {
 812 | 				error.text( "" );
 813 | 				if ( typeof this.settings.success === "string" ) {
 814 | 					error.addClass( this.settings.success );
 815 | 				} else {
 816 | 					this.settings.success( error, element );
 817 | 				}
 818 | 			}
 819 | 			this.toShow = this.toShow.add( error );
 820 | 		},
 821 | 
 822 | 		errorsFor: function( element ) {
 823 | 			var name = this.idOrName( element ),
 824 | 				describer = $( element ).attr( "aria-describedby" ),
 825 | 				selector = "label[for='" + name + "'], label[for='" + name + "'] *";
 826 | 
 827 | 			// aria-describedby should directly reference the error element
 828 | 			if ( describer ) {
 829 | 				selector = selector + ", #" + describer.replace( /\s+/g, ", #" );
 830 | 			}
 831 | 			return this
 832 | 				.errors()
 833 | 				.filter( selector );
 834 | 		},
 835 | 
 836 | 		idOrName: function( element ) {
 837 | 			return this.groups[ element.name ] || ( this.checkable( element ) ? element.name : element.id || element.name );
 838 | 		},
 839 | 
 840 | 		validationTargetFor: function( element ) {
 841 | 
 842 | 			// If radio/checkbox, validate first element in group instead
 843 | 			if ( this.checkable( element ) ) {
 844 | 				element = this.findByName( element.name );
 845 | 			}
 846 | 
 847 | 			// Always apply ignore filter
 848 | 			return $( element ).not( this.settings.ignore )[ 0 ];
 849 | 		},
 850 | 
 851 | 		checkable: function( element ) {
 852 | 			return ( /radio|checkbox/i ).test( element.type );
 853 | 		},
 854 | 
 855 | 		findByName: function( name ) {
 856 | 			return $( this.currentForm ).find( "[name='" + name + "']" );
 857 | 		},
 858 | 
 859 | 		getLength: function( value, element ) {
 860 | 			switch ( element.nodeName.toLowerCase() ) {
 861 | 			case "select":
 862 | 				return $( "option:selected", element ).length;
 863 | 			case "input":
 864 | 				if ( this.checkable( element ) ) {
 865 | 					return this.findByName( element.name ).filter( ":checked" ).length;
 866 | 				}
 867 | 			}
 868 | 			return value.length;
 869 | 		},
 870 | 
 871 | 		depend: function( param, element ) {
 872 | 			return this.dependTypes[typeof param] ? this.dependTypes[typeof param]( param, element ) : true;
 873 | 		},
 874 | 
 875 | 		dependTypes: {
 876 | 			"boolean": function( param ) {
 877 | 				return param;
 878 | 			},
 879 | 			"string": function( param, element ) {
 880 | 				return !!$( param, element.form ).length;
 881 | 			},
 882 | 			"function": function( param, element ) {
 883 | 				return param( element );
 884 | 			}
 885 | 		},
 886 | 
 887 | 		optional: function( element ) {
 888 | 			var val = this.elementValue( element );
 889 | 			return !$.validator.methods.required.call( this, val, element ) && "dependency-mismatch";
 890 | 		},
 891 | 
 892 | 		startRequest: function( element ) {
 893 | 			if ( !this.pending[ element.name ] ) {
 894 | 				this.pendingRequest++;
 895 | 				this.pending[ element.name ] = true;
 896 | 			}
 897 | 		},
 898 | 
 899 | 		stopRequest: function( element, valid ) {
 900 | 			this.pendingRequest--;
 901 | 			// sometimes synchronization fails, make sure pendingRequest is never < 0
 902 | 			if ( this.pendingRequest < 0 ) {
 903 | 				this.pendingRequest = 0;
 904 | 			}
 905 | 			delete this.pending[ element.name ];
 906 | 			if ( valid && this.pendingRequest === 0 && this.formSubmitted && this.form() ) {
 907 | 				$( this.currentForm ).submit();
 908 | 				this.formSubmitted = false;
 909 | 			} else if (!valid && this.pendingRequest === 0 && this.formSubmitted ) {
 910 | 				$( this.currentForm ).triggerHandler( "invalid-form", [ this ]);
 911 | 				this.formSubmitted = false;
 912 | 			}
 913 | 		},
 914 | 
 915 | 		previousValue: function( element ) {
 916 | 			return $.data( element, "previousValue" ) || $.data( element, "previousValue", {
 917 | 				old: null,
 918 | 				valid: true,
 919 | 				message: this.defaultMessage( element, "remote" )
 920 | 			});
 921 | 		}
 922 | 
 923 | 	},
 924 | 
 925 | 	classRuleSettings: {
 926 | 		required: { required: true },
 927 | 		email: { email: true },
 928 | 		url: { url: true },
 929 | 		date: { date: true },
 930 | 		dateISO: { dateISO: true },
 931 | 		number: { number: true },
 932 | 		digits: { digits: true },
 933 | 		creditcard: { creditcard: true }
 934 | 	},
 935 | 
 936 | 	addClassRules: function( className, rules ) {
 937 | 		if ( className.constructor === String ) {
 938 | 			this.classRuleSettings[ className ] = rules;
 939 | 		} else {
 940 | 			$.extend( this.classRuleSettings, className );
 941 | 		}
 942 | 	},
 943 | 
 944 | 	classRules: function( element ) {
 945 | 		var rules = {},
 946 | 			classes = $( element ).attr( "class" );
 947 | 
 948 | 		if ( classes ) {
 949 | 			$.each( classes.split( " " ), function() {
 950 | 				if ( this in $.validator.classRuleSettings ) {
 951 | 					$.extend( rules, $.validator.classRuleSettings[ this ]);
 952 | 				}
 953 | 			});
 954 | 		}
 955 | 		return rules;
 956 | 	},
 957 | 
 958 | 	attributeRules: function( element ) {
 959 | 		var rules = {},
 960 | 			$element = $( element ),
 961 | 			type = element.getAttribute( "type" ),
 962 | 			method, value;
 963 | 
 964 | 		for ( method in $.validator.methods ) {
 965 | 
 966 | 			// support for <input required> in both html5 and older browsers
 967 | 			if ( method === "required" ) {
 968 | 				value = element.getAttribute( method );
 969 | 				// Some browsers return an empty string for the required attribute
 970 | 				// and non-HTML5 browsers might have required="" markup
 971 | 				if ( value === "" ) {
 972 | 					value = true;
 973 | 				}
 974 | 				// force non-HTML5 browsers to return bool
 975 | 				value = !!value;
 976 | 			} else {
 977 | 				value = $element.attr( method );
 978 | 			}
 979 | 
 980 | 			// convert the value to a number for number inputs, and for text for backwards compability
 981 | 			// allows type="date" and others to be compared as strings
 982 | 			if ( /min|max/.test( method ) && ( type === null || /number|range|text/.test( type ) ) ) {
 983 | 				value = Number( value );
 984 | 			}
 985 | 
 986 | 			if ( value || value === 0 ) {
 987 | 				rules[ method ] = value;
 988 | 			} else if ( type === method && type !== "range" ) {
 989 | 				// exception: the jquery validate 'range' method
 990 | 				// does not test for the html5 'range' type
 991 | 				rules[ method ] = true;
 992 | 			}
 993 | 		}
 994 | 
 995 | 		// maxlength may be returned as -1, 2147483647 ( IE ) and 524288 ( safari ) for text inputs
 996 | 		if ( rules.maxlength && /-1|2147483647|524288/.test( rules.maxlength ) ) {
 997 | 			delete rules.maxlength;
 998 | 		}
 999 | 
1000 | 		return rules;
1001 | 	},
1002 | 
1003 | 	dataRules: function( element ) {
1004 | 		var method, value,
1005 | 			rules = {}, $element = $( element );
1006 | 		for ( method in $.validator.methods ) {
1007 | 			value = $element.data( "rule" + method.charAt( 0 ).toUpperCase() + method.substring( 1 ).toLowerCase() );
1008 | 			if ( value !== undefined ) {
1009 | 				rules[ method ] = value;
1010 | 			}
1011 | 		}
1012 | 		return rules;
1013 | 	},
1014 | 
1015 | 	staticRules: function( element ) {
1016 | 		var rules = {},
1017 | 			validator = $.data( element.form, "validator" );
1018 | 
1019 | 		if ( validator.settings.rules ) {
1020 | 			rules = $.validator.normalizeRule( validator.settings.rules[ element.name ] ) || {};
1021 | 		}
1022 | 		return rules;
1023 | 	},
1024 | 
1025 | 	normalizeRules: function( rules, element ) {
1026 | 		// handle dependency check
1027 | 		$.each( rules, function( prop, val ) {
1028 | 			// ignore rule when param is explicitly false, eg. required:false
1029 | 			if ( val === false ) {
1030 | 				delete rules[ prop ];
1031 | 				return;
1032 | 			}
1033 | 			if ( val.param || val.depends ) {
1034 | 				var keepRule = true;
1035 | 				switch ( typeof val.depends ) {
1036 | 				case "string":
1037 | 					keepRule = !!$( val.depends, element.form ).length;
1038 | 					break;
1039 | 				case "function":
1040 | 					keepRule = val.depends.call( element, element );
1041 | 					break;
1042 | 				}
1043 | 				if ( keepRule ) {
1044 | 					rules[ prop ] = val.param !== undefined ? val.param : true;
1045 | 				} else {
1046 | 					delete rules[ prop ];
1047 | 				}
1048 | 			}
1049 | 		});
1050 | 
1051 | 		// evaluate parameters
1052 | 		$.each( rules, function( rule, parameter ) {
1053 | 			rules[ rule ] = $.isFunction( parameter ) ? parameter( element ) : parameter;
1054 | 		});
1055 | 
1056 | 		// clean number parameters
1057 | 		$.each([ "minlength", "maxlength" ], function() {
1058 | 			if ( rules[ this ] ) {
1059 | 				rules[ this ] = Number( rules[ this ] );
1060 | 			}
1061 | 		});
1062 | 		$.each([ "rangelength", "range" ], function() {
1063 | 			var parts;
1064 | 			if ( rules[ this ] ) {
1065 | 				if ( $.isArray( rules[ this ] ) ) {
1066 | 					rules[ this ] = [ Number( rules[ this ][ 0 ]), Number( rules[ this ][ 1 ] ) ];
1067 | 				} else if ( typeof rules[ this ] === "string" ) {
1068 | 					parts = rules[ this ].replace(/[\[\]]/g, "" ).split( /[\s,]+/ );
1069 | 					rules[ this ] = [ Number( parts[ 0 ]), Number( parts[ 1 ] ) ];
1070 | 				}
1071 | 			}
1072 | 		});
1073 | 
1074 | 		if ( $.validator.autoCreateRanges ) {
1075 | 			// auto-create ranges
1076 | 			if ( rules.min != null && rules.max != null ) {
1077 | 				rules.range = [ rules.min, rules.max ];
1078 | 				delete rules.min;
1079 | 				delete rules.max;
1080 | 			}
1081 | 			if ( rules.minlength != null && rules.maxlength != null ) {
1082 | 				rules.rangelength = [ rules.minlength, rules.maxlength ];
1083 | 				delete rules.minlength;
1084 | 				delete rules.maxlength;
1085 | 			}
1086 | 		}
1087 | 
1088 | 		return rules;
1089 | 	},
1090 | 
1091 | 	// Converts a simple string to a {string: true} rule, e.g., "required" to {required:true}
1092 | 	normalizeRule: function( data ) {
1093 | 		if ( typeof data === "string" ) {
1094 | 			var transformed = {};
1095 | 			$.each( data.split( /\s/ ), function() {
1096 | 				transformed[ this ] = true;
1097 | 			});
1098 | 			data = transformed;
1099 | 		}
1100 | 		return data;
1101 | 	},
1102 | 
1103 | 	// http://jqueryvalidation.org/jQuery.validator.addMethod/
1104 | 	addMethod: function( name, method, message ) {
1105 | 		$.validator.methods[ name ] = method;
1106 | 		$.validator.messages[ name ] = message !== undefined ? message : $.validator.messages[ name ];
1107 | 		if ( method.length < 3 ) {
1108 | 			$.validator.addClassRules( name, $.validator.normalizeRule( name ) );
1109 | 		}
1110 | 	},
1111 | 
1112 | 	methods: {
1113 | 
1114 | 		// http://jqueryvalidation.org/required-method/
1115 | 		required: function( value, element, param ) {
1116 | 			// check if dependency is met
1117 | 			if ( !this.depend( param, element ) ) {
1118 | 				return "dependency-mismatch";
1119 | 			}
1120 | 			if ( element.nodeName.toLowerCase() === "select" ) {
1121 | 				// could be an array for select-multiple or a string, both are fine this way
1122 | 				var val = $( element ).val();
1123 | 				return val && val.length > 0;
1124 | 			}
1125 | 			if ( this.checkable( element ) ) {
1126 | 				return this.getLength( value, element ) > 0;
1127 | 			}
1128 | 			return $.trim( value ).length > 0;
1129 | 		},
1130 | 
1131 | 		// http://jqueryvalidation.org/email-method/
1132 | 		email: function( value, element ) {
1133 | 			// From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
1134 | 			// Retrieved 2014-01-14
1135 | 			// If you have a problem with this implementation, report a bug against the above spec
1136 | 			// Or use custom methods to implement your own email validation
1137 | 			return this.optional( element ) || /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test( value );
1138 | 		},
1139 | 
1140 | 		// http://jqueryvalidation.org/url-method/
1141 | 		url: function( value, element ) {
1142 | 			// contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/
1143 | 			return this.optional( element ) || /^(https?|s?ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test( value );
1144 | 		},
1145 | 
1146 | 		// http://jqueryvalidation.org/date-method/
1147 | 		date: function( value, element ) {
1148 | 			return this.optional( element ) || !/Invalid|NaN/.test( new Date( value ).toString() );
1149 | 		},
1150 | 
1151 | 		// http://jqueryvalidation.org/dateISO-method/
1152 | 		dateISO: function( value, element ) {
1153 | 			return this.optional( element ) || /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test( value );
1154 | 		},
1155 | 
1156 | 		// http://jqueryvalidation.org/number-method/
1157 | 		number: function( value, element ) {
1158 | 			return this.optional( element ) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test( value );
1159 | 		},
1160 | 
1161 | 		// http://jqueryvalidation.org/digits-method/
1162 | 		digits: function( value, element ) {
1163 | 			return this.optional( element ) || /^\d+$/.test( value );
1164 | 		},
1165 | 
1166 | 		// http://jqueryvalidation.org/creditcard-method/
1167 | 		// based on http://en.wikipedia.org/wiki/Luhn/
1168 | 		creditcard: function( value, element ) {
1169 | 			if ( this.optional( element ) ) {
1170 | 				return "dependency-mismatch";
1171 | 			}
1172 | 			// accept only spaces, digits and dashes
1173 | 			if ( /[^0-9 \-]+/.test( value ) ) {
1174 | 				return false;
1175 | 			}
1176 | 			var nCheck = 0,
1177 | 				nDigit = 0,
1178 | 				bEven = false,
1179 | 				n, cDigit;
1180 | 
1181 | 			value = value.replace( /\D/g, "" );
1182 | 
1183 | 			// Basing min and max length on
1184 | 			// http://developer.ean.com/general_info/Valid_Credit_Card_Types
1185 | 			if ( value.length < 13 || value.length > 19 ) {
1186 | 				return false;
1187 | 			}
1188 | 
1189 | 			for ( n = value.length - 1; n >= 0; n--) {
1190 | 				cDigit = value.charAt( n );
1191 | 				nDigit = parseInt( cDigit, 10 );
1192 | 				if ( bEven ) {
1193 | 					if ( ( nDigit *= 2 ) > 9 ) {
1194 | 						nDigit -= 9;
1195 | 					}
1196 | 				}
1197 | 				nCheck += nDigit;
1198 | 				bEven = !bEven;
1199 | 			}
1200 | 
1201 | 			return ( nCheck % 10 ) === 0;
1202 | 		},
1203 | 
1204 | 		// http://jqueryvalidation.org/minlength-method/
1205 | 		minlength: function( value, element, param ) {
1206 | 			var length = $.isArray( value ) ? value.length : this.getLength( value, element );
1207 | 			return this.optional( element ) || length >= param;
1208 | 		},
1209 | 
1210 | 		// http://jqueryvalidation.org/maxlength-method/
1211 | 		maxlength: function( value, element, param ) {
1212 | 			var length = $.isArray( value ) ? value.length : this.getLength( value, element );
1213 | 			return this.optional( element ) || length <= param;
1214 | 		},
1215 | 
1216 | 		// http://jqueryvalidation.org/rangelength-method/
1217 | 		rangelength: function( value, element, param ) {
1218 | 			var length = $.isArray( value ) ? value.length : this.getLength( value, element );
1219 | 			return this.optional( element ) || ( length >= param[ 0 ] && length <= param[ 1 ] );
1220 | 		},
1221 | 
1222 | 		// http://jqueryvalidation.org/min-method/
1223 | 		min: function( value, element, param ) {
1224 | 			return this.optional( element ) || value >= param;
1225 | 		},
1226 | 
1227 | 		// http://jqueryvalidation.org/max-method/
1228 | 		max: function( value, element, param ) {
1229 | 			return this.optional( element ) || value <= param;
1230 | 		},
1231 | 
1232 | 		// http://jqueryvalidation.org/range-method/
1233 | 		range: function( value, element, param ) {
1234 | 			return this.optional( element ) || ( value >= param[ 0 ] && value <= param[ 1 ] );
1235 | 		},
1236 | 
1237 | 		// http://jqueryvalidation.org/equalTo-method/
1238 | 		equalTo: function( value, element, param ) {
1239 | 			// bind to the blur event of the target in order to revalidate whenever the target field is updated
1240 | 			// TODO find a way to bind the event just once, avoiding the unbind-rebind overhead
1241 | 			var target = $( param );
1242 | 			if ( this.settings.onfocusout ) {
1243 | 				target.unbind( ".validate-equalTo" ).bind( "blur.validate-equalTo", function() {
1244 | 					$( element ).valid();
1245 | 				});
1246 | 			}
1247 | 			return value === target.val();
1248 | 		},
1249 | 
1250 | 		// http://jqueryvalidation.org/remote-method/
1251 | 		remote: function( value, element, param ) {
1252 | 			if ( this.optional( element ) ) {
1253 | 				return "dependency-mismatch";
1254 | 			}
1255 | 
1256 | 			var previous = this.previousValue( element ),
1257 | 				validator, data;
1258 | 
1259 | 			if (!this.settings.messages[ element.name ] ) {
1260 | 				this.settings.messages[ element.name ] = {};
1261 | 			}
1262 | 			previous.originalMessage = this.settings.messages[ element.name ].remote;
1263 | 			this.settings.messages[ element.name ].remote = previous.message;
1264 | 
1265 | 			param = typeof param === "string" && { url: param } || param;
1266 | 
1267 | 			if ( previous.old === value ) {
1268 | 				return previous.valid;
1269 | 			}
1270 | 
1271 | 			previous.old = value;
1272 | 			validator = this;
1273 | 			this.startRequest( element );
1274 | 			data = {};
1275 | 			data[ element.name ] = value;
1276 | 			$.ajax( $.extend( true, {
1277 | 				url: param,
1278 | 				mode: "abort",
1279 | 				port: "validate" + element.name,
1280 | 				dataType: "json",
1281 | 				data: data,
1282 | 				context: validator.currentForm,
1283 | 				success: function( response ) {
1284 | 					var valid = response === true || response === "true",
1285 | 						errors, message, submitted;
1286 | 
1287 | 					validator.settings.messages[ element.name ].remote = previous.originalMessage;
1288 | 					if ( valid ) {
1289 | 						submitted = validator.formSubmitted;
1290 | 						validator.prepareElement( element );
1291 | 						validator.formSubmitted = submitted;
1292 | 						validator.successList.push( element );
1293 | 						delete validator.invalid[ element.name ];
1294 | 						validator.showErrors();
1295 | 					} else {
1296 | 						errors = {};
1297 | 						message = response || validator.defaultMessage( element, "remote" );
1298 | 						errors[ element.name ] = previous.message = $.isFunction( message ) ? message( value ) : message;
1299 | 						validator.invalid[ element.name ] = true;
1300 | 						validator.showErrors( errors );
1301 | 					}
1302 | 					previous.valid = valid;
1303 | 					validator.stopRequest( element, valid );
1304 | 				}
1305 | 			}, param ) );
1306 | 			return "pending";
1307 | 		}
1308 | 
1309 | 	}
1310 | 
1311 | });
1312 | 
1313 | $.format = function deprecated() {
1314 | 	throw "$.format has been deprecated. Please use $.validator.format instead.";
1315 | };
1316 | 
1317 | // ajax mode: abort
1318 | // usage: $.ajax({ mode: "abort"[, port: "uniqueport"]});
1319 | // if mode:"abort" is used, the previous request on that port (port can be undefined) is aborted via XMLHttpRequest.abort()
1320 | 
1321 | var pendingRequests = {},
1322 | 	ajax;
1323 | // Use a prefilter if available (1.5+)
1324 | if ( $.ajaxPrefilter ) {
1325 | 	$.ajaxPrefilter(function( settings, _, xhr ) {
1326 | 		var port = settings.port;
1327 | 		if ( settings.mode === "abort" ) {
1328 | 			if ( pendingRequests[port] ) {
1329 | 				pendingRequests[port].abort();
1330 | 			}
1331 | 			pendingRequests[port] = xhr;
1332 | 		}
1333 | 	});
1334 | } else {
1335 | 	// Proxy ajax
1336 | 	ajax = $.ajax;
1337 | 	$.ajax = function( settings ) {
1338 | 		var mode = ( "mode" in settings ? settings : $.ajaxSettings ).mode,
1339 | 			port = ( "port" in settings ? settings : $.ajaxSettings ).port;
1340 | 		if ( mode === "abort" ) {
1341 | 			if ( pendingRequests[port] ) {
1342 | 				pendingRequests[port].abort();
1343 | 			}
1344 | 			pendingRequests[port] = ajax.apply(this, arguments);
1345 | 			return pendingRequests[port];
1346 | 		}
1347 | 		return ajax.apply(this, arguments);
1348 | 	};
1349 | }
1350 | 
1351 | // provides delegate(type: String, delegate: Selector, handler: Callback) plugin for easier event delegation
1352 | // handler is only called when $(event.target).is(delegate), in the scope of the jquery-object for event.target
1353 | 
1354 | $.extend($.fn, {
1355 | 	validateDelegate: function( delegate, type, handler ) {
1356 | 		return this.bind(type, function( event ) {
1357 | 			var target = $(event.target);
1358 | 			if ( target.is(delegate) ) {
1359 | 				return handler.apply(target, arguments);
1360 | 			}
1361 | 		});
1362 | 	}
1363 | });
1364 | 
1365 | }));


--------------------------------------------------------------------------------
/src/js/module/ajax.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Author: fairy·guanyue 
 3 |  * @Date: 2018-12-07 19:20:00 
 4 |  * @Last Modified by: fairy·guanyue
 5 |  * @Last Modified time: 2018-12-07 19:20:24
 6 |  */
 7 | 
 8 | function ajax(opt) {
 9 |     var def = {
10 |         type: "get",
11 |         data: null,
12 |         async: true,
13 |         dataType: "text",
14 |         success: null,
15 |         err: null
16 |     }
17 |     var setting = extend({}, def, opt);
18 |     if (!setting.url) {
19 |         return
20 |     }
21 |     //格式化data
22 |     var data = setting.data && format(setting.data);
23 |     // ajax发起请求
24 |     var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
25 |     xhr.onreadystatechange = function() {
26 |             if (xhr.readyState == 4) {
27 |                 if (xhr.status === 200 || xhr.status === 304) { //请求成功
28 |                     //获取相应数据responseText
29 |                     // 判断dataType
30 |                     if (setting.dataType === "json") {
31 |                         setting.success && setting.success(JSON.parse(xhr.responseText))
32 |                     } else {
33 |                         setting.success && setting.success(xhr.responseText)
34 |                     }
35 |                 } else { //请求失败
36 |                     setting.error && setting.error();
37 |                 }
38 | 
39 |             }
40 |         }
41 |         //判断传输方式是否是get  如果是 建立请求 发送请求  建立请求时  参数以？+参数的形式传送
42 |     if (setting.type === 'get' || "GET") {
43 |         var url = setting.data ? setting.url + "?" + data : url;
44 |         xhr.open(setting.type, url, setting.async);
45 |         xhr.send(null);
46 |     } else {
47 |         xhr.open(setting.type, setting.url, setting.async);
48 |         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded,charset=utf-8")
49 |         xhr.send(data);
50 |     }
51 | 
52 | }
53 | // 调用
54 | // ajax({
55 | //         type: "get",
56 | //         url: "http://localhost:8080/getData",
57 | //         data: {
58 | //             name: "gy",
59 | //             age: 18
60 | //         },
61 | //         dataType: "josn",
62 | //         success: function(data) {
63 | //             console.log(data)
64 | //         },
65 | //         err: function() {}
66 | //     })
67 | //合并对象的函数
68 | function extend() {
69 |     for (var i = 0; i < arguments.length; i++) {
70 |         for (var k in arguments[i]) {
71 |             arguments[0][k] = arguments[i][k]
72 |         }
73 |     }
74 |     return arguments[0]
75 | }
76 | //格式化 参数
77 | function format(obj) {
78 |     var arr = [];
79 |     for (var i in obj) {
80 |         arr.push(i + "=" + obj[i])
81 |     }
82 |     return arr.join("&")
83 | }


--------------------------------------------------------------------------------
/src/js/module/config.js:
--------------------------------------------------------------------------------
1 | require.config({
2 |     baseUrl: "/js/",
3 |     paths: {
4 |         "jquery": "./common/jquery-3.3.1",
5 |         "BScroll": "./common/better-scroll",
6 | 
7 |     }
8 | })


--------------------------------------------------------------------------------
/src/js/module/index.js:
--------------------------------------------------------------------------------
  1 | require(["./config"], function() {
  2 |     require(["jquery", "BScroll"], function($, BScroll) {
  3 |         function dom(ele) {
  4 |             return document.querySelector(ele)
  5 |         }
  6 | 
  7 |         function Index() {
  8 |             this.key = "";
  9 |             this.type = "normal";
 10 |             this.page = 1
 11 |             this.limit = 6;
 12 |             this.total = 0;
 13 |             this.arr = [];
 14 |             this.init()
 15 |         }
 16 |         Index.prototype = {
 17 |             constructor: Index,
 18 |             init: function() {
 19 |                 this.ajax()
 20 |                 this.Bs()
 21 |                 this.bindEvent()
 22 |             },
 23 |             Bs: function() {
 24 |                 var _this = this;
 25 |                 var height = dom("#pullDown").offsetHeight;
 26 |                 var MyBs = new BScroll(".list-wrap", {
 27 |                     click: true,
 28 |                     probeType: 2,
 29 |                     scrollY: true
 30 |                 })
 31 |                 MyBs.on("scroll", function() {
 32 |                     if (this.y < this.maxScrollY - height) {
 33 |                         if (_this.page < _this.total) {
 34 |                             dom("#pullUp").innerHTML = "释放加载更多"
 35 |                         } else {
 36 |                             dom("#pullUp").innerHTML = "没有更多数据了"
 37 |                         }
 38 |                     } else if (this.y < this.maxScrollY - height / 2) {
 39 |                         if (_this.page < _this.total) {
 40 |                             dom("#pullUp").innerHTML = "上拉加载"
 41 |                         } else {
 42 |                             dom("#pullUp").innerHTML = "没有更多数据了"
 43 |                         }
 44 |                     }
 45 |                     if (this.y > height) {
 46 |                         dom("#pullDown").innerHTML = "释放刷新"
 47 |                     } else if (this.y > height / 2) {
 48 |                         dom("#pullDown").innerHTML = "下拉刷新"
 49 |                     }
 50 | 
 51 |                 })
 52 |                 MyBs.on("touchEnd", function() {
 53 |                     if (dom("#pullUp").innerHTML == "释放加载更多") {
 54 |                         console.log(_this.page, _this.total)
 55 |                         if (_this.page < _this.total) {
 56 |                             _this.page++;
 57 |                             _this.ajax()
 58 |                             dom("#pullUp").innerHTML = "上拉加载"
 59 |                         } else {
 60 |                             dom("#pullUp").innerHTML = "没有更多数据了"
 61 |                         }
 62 |                     }
 63 | 
 64 | 
 65 |                 })
 66 | 
 67 |             },
 68 |             ajax: function() {
 69 |                 _this = this
 70 |                 $.ajax({
 71 |                     url: "/api/list",
 72 |                     dataType: "json",
 73 |                     data: {
 74 |                         key: _this.key,
 75 |                         type: _this.type,
 76 |                         page: _this.page,
 77 |                         limit: _this.limit
 78 |                     },
 79 |                     success: function(data) {
 80 |                         if (data.code == 1) {
 81 | 
 82 |                             _this.total = data.total;
 83 |                             _this.render(data.msg)
 84 |                         }
 85 |                     }
 86 |                 })
 87 |             },
 88 |             render: function(data) { //页面渲染
 89 |                 var html = "";
 90 |                 data.forEach(function(item) {
 91 |                     html += ` <dl>
 92 |                     <dt>
 93 |                         <img src="img/1.png" alt="">
 94 |                     </dt>
 95 |                     <dd>
 96 |                         <p> ${item.title} </p>
 97 |                         <p>销量：<b> ${item.sale}</b></p>
 98 |                         <p>价格：<b> ${item.price}</b></p>
 99 |                         <p>信用：<b> ${item.credit}</b></p>
100 |                     </dd>
101 |                 </dl>`
102 |                 })
103 |                 dom(".dl-box").innerHTML += html;
104 |             },
105 |             bindEvent: function() {
106 |                 var _this = this;
107 |                 //切换视图
108 |                 dom(".changeView").onclick = function(e) {
109 |                         console.log(this)
110 |                         if (dom(".dl-box").classList.contains("table")) {
111 |                             dom(".dl-box").classList.remove("table")
112 |                         } else {
113 |                             dom(".dl-box").classList.add("table")
114 |                         }
115 |                     }
116 |                     //模糊搜素
117 |                 dom(".search-btn").onclick = function() {
118 |                         dom(".dl-box").innerHTML = "";
119 |                         _this.key = dom(".search").value;
120 |                         console.log(_this.key)
121 |                         _this.ajax()
122 | 
123 |                         console.log(_this.arr)
124 |                         var isSave = _this.arr.some(function(item) {
125 |                             return item == dom(".search").value
126 |                         })
127 |                         if (!isSave) {
128 |                             _this.arr.push(dom(".search").value);
129 |                             localStorage.setItem("arr", JSON.stringify(_this.arr))
130 |                         }
131 | 
132 |                     }
133 |                     //销量排序
134 | 
135 |                 dom('.sale').onclick = function() {
136 |                     dom(".dl-box").innerHTML = "";
137 | 
138 |                     _this.key = dom(".search").value;
139 |                     _this.type = "sale";
140 |                     _this.ajax()
141 |                 }
142 | 
143 |                 dom(".all").addEventListener("click", function(e) {
144 |                     dom(".dl-box").innerHTML = "";
145 | 
146 |                     dom(".type").classList.remove("none");
147 |                     if (e.target.nodeName == "B") {
148 |                         _this.type = e.target.className;
149 |                         dom(".type").classList.add("none");
150 |                         _this.key = dom(".search").value;
151 |                         _this.ajax()
152 |                     }
153 |                 })
154 |             }
155 |         }
156 |         new Index()
157 |     })
158 | })


--------------------------------------------------------------------------------
/src/scss/_mixin.scss:
--------------------------------------------------------------------------------
  1 | @mixin sizing {
  2 |     -webkit-box-sizing: border-box;
  3 |     -moz-box-sizing: border-box;
  4 |     -ms-box-sizing: border-box;
  5 |     -o-box-sizing: border-box;
  6 |     box-sizing: border-box;
  7 | }
  8 | 
  9 | @mixin absolute($direction) {
 10 |     position: $direction;
 11 | }
 12 | 
 13 | @mixin height($height) {
 14 |     height: $height;
 15 | }
 16 | 
 17 | @mixin hidden {
 18 |     overflow: hidden;
 19 | }
 20 | 
 21 | @mixin center($center) {
 22 |     text-align: $center;
 23 | }
 24 | 
 25 | @mixin box_flex {
 26 |     display: flex;
 27 |     display: -webkit-flex;
 28 | }
 29 | 
 30 | @mixin direction ($dir:row) {
 31 |     //设置弹性盒方向
 32 |     -webkit-flex-direction: $dir;
 33 |     flex-direction: $dir;
 34 | }
 35 | 
 36 | @mixin flexWrap ($wrap:wrap) {
 37 |     //换行
 38 |     -webkit-flex-wrap: $wrap;
 39 |     flex-wrap: $wrap;
 40 | }
 41 | 
 42 | @mixin flexFlow ($dir:row, $wrap:wrap) {
 43 |     //方向和换行的结合体
 44 |     -webkit-flex-flow: $dir $wrap;
 45 |     flex-flow: $dir $wrap;
 46 | }
 47 | 
 48 | @mixin justify ($justify:center) {
 49 |     //水平居中
 50 |     -webkit-justify-content: $justify;
 51 |     justify-content: $justify;
 52 | }
 53 | 
 54 | @mixin align ($align:center) {
 55 |     //垂直居中
 56 |     -webkit-align-items: $align;
 57 |     align-items: $align;
 58 | }
 59 | 
 60 | @mixin flex ($grow: 1, $shrink: 1, $basis: 0%) {
 61 |     -webkit-flex: $grow $shrink $basis;
 62 |     flex: $grow $shrink $basis;
 63 | }
 64 | 
 65 | @mixin flex_grow($val) {
 66 |     -webkit-flex-grow: $val;
 67 |     flex-grow: $val;
 68 | }
 69 | 
 70 | @mixin flex_shrink($val) {
 71 |     -webkit-flex-shrink: $val;
 72 |     flex-shrink: $val;
 73 | }
 74 | 
 75 | @mixin flex_basis($val) {
 76 |     -webkit-flex-basis: $val;
 77 |     flex-basis: $val;
 78 | }
 79 | 
 80 | @mixin cir($w) {
 81 |     width: $w;
 82 |     height: $w;
 83 |     border-radius: 50%;
 84 |     display: inline-block;
 85 | }
 86 | 
 87 | @mixin flexs($j:space-between) {
 88 |     display: flex;
 89 |     display: -webkit-flex;
 90 |     justify-content: $j;
 91 |     -webkit-justify-content: $j;
 92 |     align-items: center;
 93 |     -webkit-align-items: center;
 94 | }
 95 | 
 96 | @mixin num($w, $h) {
 97 |     width: $w;
 98 |     height: $h;
 99 | }
100 | 
101 | %text {
102 |     white-space: nowrap;
103 |     text-overflow: ellipsis;
104 |     overflow: hidden;
105 | }
106 | @mixin ntext($n){
107 |    display:-webkit-box;
108 |   -webkit-box-orient:vertical;
109 |   word-break:break-all;
110 |   -webkit-line-clamp:$n;
111 |   overflow:hidden;
112 |   text-overflow:ellipsis;
113 | }


--------------------------------------------------------------------------------
/src/scss/common.scss:
--------------------------------------------------------------------------------
  1 | * {
  2 |     box-sizing: border-box;
  3 | }
  4 | 
  5 | html,
  6 | body,
  7 | div,
  8 | span,
  9 | applet,
 10 | object,
 11 | iframe,
 12 | h1,
 13 | h2,
 14 | h3,
 15 | h4,
 16 | h5,
 17 | h6,
 18 | p,
 19 | blockquote,
 20 | pre,
 21 | a,
 22 | abbr,
 23 | acronym,
 24 | address,
 25 | big,
 26 | cite,
 27 | code,
 28 | del,
 29 | dfn,
 30 | em,
 31 | img,
 32 | ins,
 33 | kbd,
 34 | q,
 35 | s,
 36 | samp,
 37 | small,
 38 | strike,
 39 | strong,
 40 | sub,
 41 | sup,
 42 | tt,
 43 | var,
 44 | b,
 45 | u,
 46 | i,
 47 | center,
 48 | dl,
 49 | dt,
 50 | dd,
 51 | ol,
 52 | ul,
 53 | li,
 54 | fieldset,
 55 | form,
 56 | label,
 57 | legend,
 58 | table,
 59 | caption,
 60 | tbody,
 61 | tfoot,
 62 | thead,
 63 | tr,
 64 | th,
 65 | td,
 66 | article,
 67 | aside,
 68 | canvas,
 69 | details,
 70 | figcaption,
 71 | figure,
 72 | footer,
 73 | header,
 74 | hgroup,
 75 | menu,
 76 | nav,
 77 | section,
 78 | summary,
 79 | time,
 80 | mark,
 81 | audio,
 82 | video {
 83 |     margin: 0;
 84 |     padding: 0;
 85 |     border: none;
 86 |     outline: 0;
 87 |     font-family: STHeitiSC-Light;
 88 |     font: inherit;
 89 |     vertical-align: baseline;
 90 | }
 91 | 
 92 | html,
 93 | body,
 94 | form,
 95 | fieldset,
 96 | p,
 97 | div,
 98 | h1,
 99 | h2,
100 | h3,
101 | h4,
102 | h5,
103 | h6 {
104 |     -webkit-text-size-adjust: none;
105 | }
106 | 
107 | html,
108 | body {
109 |     width: 100%;
110 |     height: 100%;
111 | }
112 | 
113 | body {
114 |     font-family: arial, sans-serif;
115 | }
116 | 
117 | ol,
118 | ul {
119 |     list-style: none;
120 | }
121 | 
122 | blockquote,
123 | q {
124 |     quotes: none;
125 | }
126 | 
127 | blockquote:before,
128 | blockquote:after,
129 | q:before,
130 | q:after {
131 |     content: '';
132 |     content: none;
133 | }
134 | 
135 | ins,
136 | a {
137 |     text-decoration: none;
138 | }
139 | 
140 | del {
141 |     text-decoration: line-through;
142 | }
143 | 
144 | table {
145 |     border-collapse: collapse;
146 |     border-spacing: 0;
147 | }
148 | 
149 | img {
150 |     display: inline-block;
151 | }
152 | 
153 | textarea {
154 |     border: none;
155 |     background: none;
156 |     outline: none;
157 |     -webkit-appearance: none;
158 | }
159 | 
160 | * {
161 |     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
162 |     -moz-tap-highlight-color: rgba(0, 0, 0, 0);
163 |     -ms-tap-highlight-color: rgba(0, 0, 0, 0);
164 |     -o-tap-highlight-color: rgba(0, 0, 0, 0);
165 |     // tap-highlight-color: rgba(0, 0, 0, 0);
166 | }
167 | 
168 | $browser-default-font-size: 37.5px !default;
169 | 
170 | /*html {
171 |     font-size: $browser-default-font-size;
172 | }*/
173 | 
174 | @function rem($px) {
175 |     //$px为需要转换的字号
176 |     @return $px / $browser-default-font-size * 1rem;
177 | }
178 | 
179 | // pxTorem(10);
180 | //SCSS
181 | html {
182 |     font-size: $browser-default-font-size;
183 | }


--------------------------------------------------------------------------------
/src/scss/index.scss:
--------------------------------------------------------------------------------
  1 | @import "_mixin.scss";
  2 | @import "common.scss";
  3 | .wrap {
  4 |     width: 100%;
  5 |     height: 100%;
  6 |     @include box_flex;
  7 |     @include direction(column);
  8 | }
  9 | 
 10 | header {
 11 |     width: 100%;
 12 |     height: rem(44px);
 13 |     @include box_flex;
 14 |     @include align;
 15 |     background: #a65;
 16 |     font-size: rem(15px);
 17 |     padding: 0 rem(10px);
 18 |     >input {
 19 |         font-size: rem(16px);
 20 |         width: rem(200px);
 21 |         height: rem(28px);
 22 |         border: 0;
 23 |         outline-color: #a80;
 24 |     }
 25 |     >button {
 26 |         width: rem(70px);
 27 |         height: rem(30px);
 28 |         font-size: rem(16px);
 29 |         border: rem(1px) solid #333;
 30 |     }
 31 | }
 32 | 
 33 | section>div {
 34 |     flex-shrink: 0;
 35 | }
 36 | 
 37 | section {
 38 |     width: 100%;
 39 |     @include flex;
 40 |     @include box_flex;
 41 |     @include direction(column);
 42 |     .sort-wrap {
 43 |         width: 100%;
 44 |         height: rem(50px);
 45 |         font-size: rem(14px);
 46 |         @include box_flex;
 47 |         @include align;
 48 |         @include justify;
 49 |         >p {
 50 |             @include flex;
 51 |             text-align: center;
 52 |             height: rem(48px);
 53 |             line-height: rem(48px);
 54 |             font-size: rem(16px);
 55 |             background: #eee;
 56 |         }
 57 |         .all {
 58 |             position: relative;
 59 |             .type {
 60 |                 width: rem(150px);
 61 |                 background: #fff;
 62 |                 top: rem(40px);
 63 |                 left: 0;
 64 |                 z-index: 2;
 65 |                 position: absolute;
 66 |                 @include box_flex;
 67 |                 @include direction(column);
 68 |                 >b {
 69 |                     border-bottom: rem(1px) solid #ddd;
 70 |                 }
 71 |             }
 72 |             .none {
 73 |                 display: none;
 74 |             }
 75 |         }
 76 |     }
 77 |     .list-wrap {
 78 |         width: 100%;
 79 |         overflow: hidden;
 80 |         @include flex;
 81 |         overflow: hidden;
 82 |         position: relative;
 83 |         >.list-con {
 84 |             width: 100%;
 85 |             min-height: 100%;
 86 |             >p {
 87 |                 width: 100%;
 88 |                 height: rem(50px);
 89 |                 line-height: rem(50px);
 90 |                 font-size: rem(16px);
 91 |                 text-align: center;
 92 |                 background: #eee;
 93 |                 color: #466;
 94 |                 position: absolute;
 95 |                 left: 0;
 96 |             }
 97 |             >#pullDown {
 98 |                 top: rem(-50px)
 99 |             }
100 |             >#pullUp {
101 |                 bottom: rem(-50px)
102 |             }
103 |             >.dl-box {
104 |                 width: 100%;
105 |                 >dl {
106 |                     width: 100%;
107 |                     font-size: rem(14px);
108 |                     @include box_flex;
109 |                     @include align;
110 |                     padding: rem(10px);
111 |                     dt {
112 |                         width: rem(90px);
113 |                         height: rem(90px);
114 |                         margin-right: rem(10px);
115 |                         >img {
116 |                             width: 100%;
117 |                             height: 100%;
118 |                         }
119 |                     }
120 |                 }
121 |                 dd {
122 |                     @include flex;
123 |                     font-size: rem(16px)
124 |                 }
125 |             }
126 |             .table {
127 |                 width: 100%;
128 |                 @include box_flex;
129 |                 @include align;
130 |                 @include flexWrap(wrap);
131 |                 >dl {
132 |                     width: 50%;
133 |                     font-size: rem(14px);
134 |                     @include box_flex;
135 |                     @include align;
136 |                     @include direction(column);
137 |                     padding: rem(10px);
138 |                     dt {
139 |                         width: rem(170px);
140 |                         height: rem(170px);
141 |                         margin-right: rem(10px);
142 |                         >img {
143 |                             width: 100%;
144 |                             height: 100%;
145 |                         }
146 |                     }
147 |                 }
148 |                 dd {
149 |                     @include flex;
150 |                     font-size: rem(16px)
151 |                 }
152 |             }
153 |         }
154 |     }
155 | }


--------------------------------------------------------------------------------