├── json
    ├── index.json
    └── data.json
├── README.md
├── src
    ├── img
    │   ├── 1.jpg
    │   ├── 12.jpg
    │   ├── 2.jpg
    │   ├── 22.jpg
    │   ├── 3.jpg
    │   ├── 33.jpg
    │   ├── foot.jpg
    │   ├── img1.jpg
    │   ├── img2.jpg
    │   └── img3.jpg
    ├── fonts
    │   ├── iconfont.eot
    │   ├── iconfont.ttf
    │   ├── iconfont.woff
    │   ├── ygyxsziti2.0.ttf
    │   ├── demo.css
    │   ├── iconfont.css
    │   └── demo_fontclass.html
    ├── js
    │   ├── index.js
    │   └── lib
    │   │   └── flexible.js
    ├── scss
    │   ├── index.scss
    │   ├── _minix.scss
    │   └── common.scss
    ├── index.html
    └── css
    │   ├── index.css
    │   └── swiper.css
└── .gitignore


/json/index.json:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # su
2 | 1
3 | 


--------------------------------------------------------------------------------
/src/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suxianghui/su/HEAD/src/img/1.jpg


--------------------------------------------------------------------------------
/src/img/12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suxianghui/su/HEAD/src/img/12.jpg


--------------------------------------------------------------------------------
/src/img/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suxianghui/su/HEAD/src/img/2.jpg


--------------------------------------------------------------------------------
/src/img/22.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suxianghui/su/HEAD/src/img/22.jpg


--------------------------------------------------------------------------------
/src/img/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suxianghui/su/HEAD/src/img/3.jpg


--------------------------------------------------------------------------------
/src/img/33.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suxianghui/su/HEAD/src/img/33.jpg


--------------------------------------------------------------------------------
/src/img/foot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suxianghui/su/HEAD/src/img/foot.jpg


--------------------------------------------------------------------------------
/src/img/img1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suxianghui/su/HEAD/src/img/img1.jpg


--------------------------------------------------------------------------------
/src/img/img2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suxianghui/su/HEAD/src/img/img2.jpg


--------------------------------------------------------------------------------
/src/img/img3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suxianghui/su/HEAD/src/img/img3.jpg


--------------------------------------------------------------------------------
/src/fonts/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suxianghui/su/HEAD/src/fonts/iconfont.eot


--------------------------------------------------------------------------------
/src/fonts/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suxianghui/su/HEAD/src/fonts/iconfont.ttf


--------------------------------------------------------------------------------
/src/fonts/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suxianghui/su/HEAD/src/fonts/iconfont.woff


--------------------------------------------------------------------------------
/src/fonts/ygyxsziti2.0.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suxianghui/su/HEAD/src/fonts/ygyxsziti2.0.ttf


--------------------------------------------------------------------------------
/src/js/index.js:
--------------------------------------------------------------------------------
 1 | $(function() {
 2 |     $.ajax({
 3 |         url: '/api',
 4 |         dataType: "json",
 5 |         success: function(list) {
 6 |             if (list.code === 1) {
 7 |                 reacData(list.data);
 8 |             };
 9 |         }
10 |     });
11 | 
12 |     function reacData(data) {
13 |         var str = "";
14 |         data.forEach(function(i, v) {
15 |             str += ` <li class="swiper-slide">`;
16 |             str += reatData(i.list);
17 |             str += `</li>`;
18 |         });
19 |         $('.swiper-wrapper').html(str);
20 |         new Swiper('.swiper-container', {
21 |             autoplay: true,
22 |             loop: true
23 |         });
24 |     };
25 | 
26 |     function reatData(data) {
27 |         return data.map(function(item) {
28 |             return `<dl>
29 |                        <dd><img src="${item.url}" alt=""></dd>
30 |                        <dt>${item.val}</dt>
31 |                       </dl>`
32 |         }).join('');
33 |         console.log(123)
34 |     };
35 | });


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/src/scss/index.scss:
--------------------------------------------------------------------------------
 1 | @import '_minix.scss';
 2 | @import 'common.scss';
 3 | .box {
 4 |     width: 100%;
 5 |     height: 100%;
 6 |     @include box_flex;
 7 |     flex-direction: column;
 8 | }
 9 | 
10 | header {
11 |     width: 100%;
12 |     height: pxTorem(50px);
13 |     background: rgb(21, 214, 182);
14 |     @include box_flex;
15 |     @include justify(space-around);
16 |     @include align(center);
17 |     color: white;
18 |     .header_input {
19 |         width: pxTorem(200px);
20 |         height: pxTorem(30px);
21 |         background: rgb(10, 161, 129);
22 |     }
23 | }
24 | 
25 | section {
26 |     flex: 1;
27 |     overflow-y: scroll;
28 |     .img {
29 |         width: 100%;
30 |         height: pxTorem(150px);
31 |     }
32 |     .swiper-slide {
33 |         @include box_flex;
34 |         @include flexWrap(wrap);
35 |         >dl {
36 |             width: 20%;
37 |             >dd {
38 |                 width: pxTorem(60px);
39 |                 height: pxTorem(60px);
40 |                 border-radius: 50%;
41 |                 margin: 10px auto;
42 |                 overflow: hidden;
43 |                 >img {
44 |                     width: 100%;
45 |                     height: 100%;
46 |                 }
47 |             }
48 |             >dt {
49 |                 text-align: center;
50 |             }
51 |         }
52 |     }
53 | }
54 | 
55 | footer {
56 |     width: 100%;
57 |     height: pxTorem(50px);
58 |     background: blue;
59 | }


--------------------------------------------------------------------------------
/json/data.json:
--------------------------------------------------------------------------------
 1 | [{
 2 |     "list": [{
 3 |         "url": "./img/foot.jpg",
 4 |         "val": "美食1"
 5 |     }, {
 6 |         "url": "./img/foot.jpg",
 7 |         "val": "美食2"
 8 |     }, {
 9 |         "url": "./img/foot.jpg",
10 |         "val": "美食3"
11 |     }, {
12 |         "url": "./img/foot.jpg",
13 |         "val": "美食4"
14 |     }, {
15 |         "url": "./img/foot.jpg",
16 |         "val": "美食5"
17 |     }, {
18 |         "url": "./img/foot.jpg",
19 |         "val": "美食6"
20 |     }, {
21 |         "url": "./img/foot.jpg",
22 |         "val": "美食7"
23 |     }, {
24 |         "url": "./img/foot.jpg",
25 |         "val": "美食8"
26 |     }, {
27 |         "url": "./img/foot.jpg",
28 |         "val": "美食9"
29 |     }, {
30 |         "url": "./img/foot.jpg",
31 |         "val": "美食10"
32 |     }]
33 | }, {
34 |     "list": [{
35 |         "url": "./img/foot.jpg",
36 |         "val": "美食10"
37 |     }, {
38 |         "url": "./img/foot.jpg",
39 |         "val": "美食9"
40 |     }, {
41 |         "url": "./img/foot.jpg",
42 |         "val": "美食8"
43 |     }, {
44 |         "url": "./img/foot.jpg",
45 |         "val": "美食7"
46 |     }, {
47 |         "url": "./img/foot.jpg",
48 |         "val": "美食6"
49 |     }, {
50 |         "url": "./img/foot.jpg",
51 |         "val": "美食5"
52 |     }, {
53 |         "url": "./img/foot.jpg",
54 |         "val": "美食4"
55 |     }, {
56 |         "url": "./img/foot.jpg",
57 |         "val": "美食3"
58 |     }, {
59 |         "url": "./img/foot.jpg",
60 |         "val": "美食2"
61 |     }, {
62 |         "url": "./img/foot.jpg",
63 |         "val": "美食1"
64 |     }]
65 | }]


--------------------------------------------------------------------------------
/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 |     <link rel="stylesheet" href="fonts/iconfont.css">
10 |     <title>美团</title>
11 |     <script src='js/lib/flexible.js'></script>
12 |     <link rel="stylesheet" href="css/swiper.css">
13 | </head>
14 | 
15 | <body>
16 | 
17 |     <div class="box">
18 |         <header>
19 |             <p>北京</p>
20 |             <input type="text" placeholder="输入商家/品类/商圈" class="header_input">
21 |             <div class="header_img">
22 |                 <i class="icon iconfont icon-wode"></i>
23 |                 <p>我的</p>
24 |             </div>
25 |         </header>
26 |         <section>
27 |             <img src="./img/12.jpg" alt="" class="img">
28 |             <div class="swiper-container">
29 |                 <ul class="swiper-wrapper">
30 |                     <!-- <li class="swiper-slide">
31 |                         <dl>
32 |                             <dd><img src="./img/foot.jpg" alt=""></dd>
33 |                             <dt>美食</dt>
34 |                         </dl>
35 |                     </li> -->
36 |                 </ul>
37 |             </div>
38 |         </section>
39 |         <footer></footer>
40 |     </div>
41 | 
42 |     <script src="./js/lib/jquery.js"></script>
43 |     <script src="./js/lib/swiper.min.js"></script>
44 |     <script src="./js/index.js"></script>
45 | </body>
46 | 
47 | </html>


--------------------------------------------------------------------------------
/src/css/index.css:
--------------------------------------------------------------------------------
1 | a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,input,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:none;outline:0;font-family:STHeitiSC-Light;font:inherit;vertical-align:baseline}body,div,fieldset,form,h1,h2,h3,h4,h5,h6,html,p{-webkit-text-size-adjust:none}body,html{width:100%;height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{font-family:arial,sans-serif}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a,ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}img{display:inline-block}input,textarea{border:none;background:0 0;outline:0;-webkit-appearance:none}*{-webkit-tap-highlight-color:transparent;-moz-tap-highlight-color:transparent;-ms-tap-highlight-color:transparent;-o-tap-highlight-color:transparent}html{font-size:37.5px}.box{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;display:-webkit-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}header{width:100%;height:1.33333rem;background:#15d6b6;display:-webkit-box;display:-ms-flexbox;display:flex;display:-webkit-flex;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#fff}header .header_input{width:5.33333rem;height:.8rem;background:#0aa181}section{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:scroll}section .img{width:100%;height:4rem}section .swiper-slide{display:-webkit-box;display:-ms-flexbox;display:flex;display:-webkit-flex;-ms-flex-wrap:wrap;flex-wrap:wrap}section .swiper-slide>dl{width:20%}section .swiper-slide>dl>dd{width:1.6rem;height:1.6rem;border-radius:50%;margin:10px auto;overflow:hidden}section .swiper-slide>dl>dd>img{width:100%;height:100%}section .swiper-slide>dl>dt{text-align:center}footer{width:100%;height:1.33333rem;background:#00f}


--------------------------------------------------------------------------------
/src/js/lib/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/scss/_minix.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 |     /* NEW, Spec - Opera 12.1, Firefox 20+ */
 28 |     display: -webkit-flex;
 29 |     /* NEW - Chrome */
 30 | }
 31 | 
 32 | @mixin direction ($dir:row) {
 33 |     // 设置弹性盒子方向
 34 |     -webkit-flex-direction: $dir;
 35 |     flex-direction: $dir;
 36 | }
 37 | 
 38 | @mixin flexWrap ($wrap) {
 39 |     -webkit-flex-wrap: $wrap;
 40 |     flex-wrap: $wrap;
 41 | }
 42 | 
 43 | @mixin flexFlow ($dir:row, $wrap:wrap) {
 44 |     // 方向和换行的结合体
 45 |     -webkit-flex-flow: $dir $wrap;
 46 |     flex-flow: $dir $wrap;
 47 | }
 48 | 
 49 | @mixin justify ($justify:center) {
 50 |     // 水平居中
 51 |     -webkit-justify-content: $justify;
 52 |     justify-content: $justify;
 53 | }
 54 | 
 55 | @mixin align ($align:center) {
 56 |     // 垂直居中
 57 |     -webkit-align-items: $align;
 58 |     align-items: $align;
 59 | }
 60 | 
 61 | @mixin flex ($grow: 1, $shrink: 1, $basis: 0%) {
 62 |     // 
 63 |     -webkit-flex: $grow $shrink $basis;
 64 |     flex: $grow $shrink $basis;
 65 | }
 66 | 
 67 | @mixin flex_grow($val) {
 68 |     -webkit-flex-grow: $val;
 69 |     flex-grow: $val;
 70 | }
 71 | 
 72 | @mixin flex_shrink($val) {
 73 |     -webkit-flex-shrink: $val;
 74 |     flex-shrink: $val;
 75 | }
 76 | 
 77 | @mixin flex_basis($val) {
 78 |     -webkit-flex-basis: $val;
 79 |     flex-basis: $val;
 80 | }
 81 | 
 82 | @mixin setBottomLine($c: #C7C7C7) {
 83 |     & {
 84 |         position: relative;
 85 |     }
 86 |     &:before {
 87 |         content: " ";
 88 |         position: absolute;
 89 |         left: 0;
 90 |         bottom: 0;
 91 |         width: 100%;
 92 |         height: 1px;
 93 |         border-bottom: 1px solid $c;
 94 |     }
 95 |     [data-dpr="1"] &:before {
 96 |         transform-origin: 0 0;
 97 |         transform: scaleY(0.5);
 98 |     }
 99 | }
100 | 
101 | @mixin setTopLine($c: #C7C7C7) {
102 |     & {
103 |         position: relative;
104 |     }
105 |     &:before {
106 |         content: " ";
107 |         position: absolute;
108 |         left: 0;
109 |         top: 0;
110 |         width: 100%;
111 |         height: 1px;
112 |         border-bottom: 1px solid $c;
113 |     }
114 |     [data-dpr="1"] &:before {
115 |         transform-origin: 0 0;
116 |         transform: scaleY(0.5);
117 |     }
118 | }


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


--------------------------------------------------------------------------------
/src/fonts/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/fonts/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/css/swiper.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Swiper 4.3.5
  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: July 31, 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/fonts/demo_fontclass.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html>
   3 | <head>
   4 |     <meta charset="utf-8"/>
   5 |     <title>IconFont</title>
   6 |     <link rel="stylesheet" href="demo.css">
   7 |     <link rel="stylesheet" href="iconfont.css">
   8 | </head>
   9 | <body>
  10 |     <div class="main markdown">
  11 |         <h1>IconFont 图标</h1>
  12 |         <ul class="icon_lists clear">
  13 |                  <li>
  14 |                 <i class="icon iconfont icon-tianmao4"></i>
  15 |                     <div class="name">天猫</div>
  16 |                     <div class="fontclass">.icon-tianmao4</div>
  17 |                 </li>
  18 |             
  19 |                 <li>
  20 |                 <i class="icon iconfont icon-gouwuche-xuanzhong"></i>
  21 |                     <div class="name">购物车-选中</div>
  22 |                     <div class="fontclass">.icon-gouwuche-xuanzhong</div>
  23 |                 </li>
  24 |             
  25 |                 <li>
  26 |                 <i class="icon iconfont icon-wode-xuanzhong"></i>
  27 |                     <div class="name">我的-选中</div>
  28 |                     <div class="fontclass">.icon-wode-xuanzhong</div>
  29 |                 </li>
  30 |             
  31 |                 <li>
  32 |                 <i class="icon iconfont icon-gouwuche"></i>
  33 |                     <div class="name">购物车</div>
  34 |                     <div class="fontclass">.icon-gouwuche</div>
  35 |                 </li>
  36 |             
  37 |                 <li>
  38 |                 <i class="icon iconfont icon-wode"></i>
  39 |                     <div class="name">我的</div>
  40 |                     <div class="fontclass">.icon-wode</div>
  41 |                 </li>
  42 |             
  43 |                 <li>
  44 |                 <i class="icon iconfont icon-shouye"></i>
  45 |                     <div class="name">首页</div>
  46 |                     <div class="fontclass">.icon-shouye</div>
  47 |                 </li>
  48 |             
  49 |                 <li>
  50 |                 <i class="icon iconfont icon-dazhongdianping"></i>
  51 |                     <div class="name">大众点评</div>
  52 |                     <div class="fontclass">.icon-dazhongdianping</div>
  53 |                 </li>
  54 |             
  55 |                 <li>
  56 |                 <i class="icon iconfont icon-douban"></i>
  57 |                     <div class="name">豆瓣</div>
  58 |                     <div class="fontclass">.icon-douban</div>
  59 |                 </li>
  60 |             <li>
  61 |                 <i class="icon iconfont icon-share6"></i>
  62 |                     <div class="name">分享</div>
  63 |                     <div class="fontclass">.icon-share6</div>
  64 |                 </li>
  65 |                  <li>
  66 |                 <i class="icon iconfont icon-eyeoclose"></i>
  67 |                     <div class="name">eyeoclose</div>
  68 |                     <div class="fontclass">.icon-eyeoclose</div>
  69 |                 </li>
  70 |             
  71 |                 <li>
  72 |                 <i class="icon iconfont icon-eyeopen"></i>
  73 |                     <div class="name">eyeopen</div>
  74 |                     <div class="fontclass">.icon-eyeopen</div>
  75 |                 </li>
  76 |             
  77 |                 <li>
  78 |                 <i class="icon iconfont icon-phonenum"></i>
  79 |                     <div class="name">phonenum</div>
  80 |                     <div class="fontclass">.icon-phonenum</div>
  81 |                 </li>
  82 |             
  83 |                 <li>
  84 |                 <i class="icon iconfont icon-question"></i>
  85 |                     <div class="name">question</div>
  86 |                     <div class="fontclass">.icon-question</div>
  87 |                 </li>
  88 |             
  89 |                 <li>
  90 |                 <i class="icon iconfont icon-set"></i>
  91 |                     <div class="name">set</div>
  92 |                     <div class="fontclass">.icon-set</div>
  93 |                 </li>
  94 |             
  95 |                 <li>
  96 |                 <i class="icon iconfont icon-paynumber"></i>
  97 |                     <div class="name">paynumber</div>
  98 |                     <div class="fontclass">.icon-paynumber</div>
  99 |                 </li>
 100 |                 <li>
 101 |                 <i class="icon iconfont icon-zanting"></i>
 102 |                     <div class="name">暂停</div>
 103 |                     <div class="fontclass">.icon-zanting</div>
 104 |                 </li>
 105 |             
 106 |                 <li>
 107 |                 <i class="icon iconfont icon-zanting1"></i>
 108 |                     <div class="name">暂停</div>
 109 |                     <div class="fontclass">.icon-zanting1</div>
 110 |                 </li>
 111 |             
 112 |                 <li>
 113 |                 <i class="icon iconfont icon-zanting2"></i>
 114 |                     <div class="name">暂停</div>
 115 |                     <div class="fontclass">.icon-zanting2</div>
 116 |                 </li>
 117 |             
 118 |                 <li>
 119 |                 <i class="icon iconfont icon-bofang"></i>
 120 |                     <div class="name">播放</div>
 121 |                     <div class="fontclass">.icon-bofang</div>
 122 |                 </li>
 123 |             
 124 |                 <li>
 125 |                 <i class="icon iconfont icon-fenxiang"></i>
 126 |                     <div class="name">分享</div>
 127 |                     <div class="fontclass">.icon-fenxiang</div>
 128 |                 </li>
 129 |             
 130 |                 <li>
 131 |                 <i class="icon iconfont icon-fenxiang1"></i>
 132 |                     <div class="name">分享</div>
 133 |                     <div class="fontclass">.icon-fenxiang1</div>
 134 |                 </li>
 135 |             
 136 |                 <li>
 137 |                 <i class="icon iconfont icon-play"></i>
 138 |                     <div class="name">播放</div>
 139 |                     <div class="fontclass">.icon-play</div>
 140 |                 </li>
 141 |             
 142 |                 
 143 |             
 144 |                 <li>
 145 |                 <i class="icon iconfont icon-bofang1"></i>
 146 |                     <div class="name">播放</div>
 147 |                     <div class="fontclass">.icon-bofang1</div>
 148 |                 </li>
 149 |             
 150 |                 <li>
 151 |                 <i class="icon iconfont icon-ttpodicon"></i>
 152 |                     <div class="name">下一曲</div>
 153 |                     <div class="fontclass">.icon-ttpodicon</div>
 154 |                 </li>
 155 |             
 156 |                 <li>
 157 |                 <i class="icon iconfont icon-ttpodicon1"></i>
 158 |                     <div class="name">上一曲</div>
 159 |                     <div class="fontclass">.icon-ttpodicon1</div>
 160 |                 </li>
 161 |             
 162 |                 <li>
 163 |                 <i class="icon iconfont icon-ttpodicon2"></i>
 164 |                     <div class="name">上一曲</div>
 165 |                     <div class="fontclass">.icon-ttpodicon2</div>
 166 |                 </li>
 167 |             
 168 |                 <li>
 169 |                 <i class="icon iconfont icon-ttpodicon3"></i>
 170 |                     <div class="name">下一曲</div>
 171 |                     <div class="fontclass">.icon-ttpodicon3</div>
 172 |                 </li>
 173 |             
 174 |                 <li>
 175 |                 <i class="icon iconfont icon-fenxiang11"></i>
 176 |                     <div class="name">分享</div>
 177 |                     <div class="fontclass">.icon-fenxiang11</div>
 178 |                 </li>
 179 |             
 180 |                 <li>
 181 |                 <i class="icon iconfont icon-fenxiang2"></i>
 182 |                     <div class="name">分享</div>
 183 |                     <div class="fontclass">.icon-fenxiang2</div>
 184 |                 </li>
 185 |             
 186 |                 <li>
 187 |                 <i class="icon iconfont icon-play1"></i>
 188 |                     <div class="name">播放</div>
 189 |                     <div class="fontclass">.icon-play1</div>
 190 |                 </li>
 191 |             
 192 |                 <li>
 193 |                 <i class="icon iconfont icon-zanting3"></i>
 194 |                     <div class="name">暂停 1</div>
 195 |                     <div class="fontclass">.icon-zanting3</div>
 196 |                 </li>
 197 |             
 198 |                 <li>
 199 |                 <i class="icon iconfont icon-bofang2"></i>
 200 |                     <div class="name">播放</div>
 201 |                     <div class="fontclass">.icon-bofang2</div>
 202 |                 </li>
 203 |             
 204 |                 <li>
 205 |                 <i class="icon iconfont icon-fenxiang3"></i>
 206 |                     <div class="name">分享</div>
 207 |                     <div class="fontclass">.icon-fenxiang3</div>
 208 |                 </li>
 209 |             
 210 |                 <li>
 211 |                 <i class="icon iconfont icon-infenicon18"></i>
 212 |                     <div class="name">分享</div>
 213 |                     <div class="fontclass">.icon-infenicon18</div>
 214 |                 </li>
 215 |             
 216 |                 <li>
 217 |                 <i class="icon iconfont icon-pause-outline"></i>
 218 |                     <div class="name">暂停</div>
 219 |                     <div class="fontclass">.icon-pause-outline</div>
 220 |                 </li>
 221 |             
 222 |                 <li>
 223 |                 <i class="icon iconfont icon-fenxiang4"></i>
 224 |                     <div class="name">分享</div>
 225 |                     <div class="fontclass">.icon-fenxiang4</div>
 226 |                 </li>
 227 |             
 228 |                 <li>
 229 |                 <i class="icon iconfont icon-shangyiqu"></i>
 230 |                     <div class="name">上一曲</div>
 231 |                     <div class="fontclass">.icon-shangyiqu</div>
 232 |                 </li>
 233 |             
 234 |                 <li>
 235 |                 <i class="icon iconfont icon-xiayiqu"></i>
 236 |                     <div class="name">下一曲</div>
 237 |                     <div class="fontclass">.icon-xiayiqu</div>
 238 |                 </li>
 239 |             
 240 |                 <li>
 241 |                 <i class="icon iconfont icon-zanting4"></i>
 242 |                     <div class="name">暂停</div>
 243 |                     <div class="fontclass">.icon-zanting4</div>
 244 |                 </li>
 245 |             
 246 |                 <li>
 247 |                 <i class="icon iconfont icon-fenxiang5"></i>
 248 |                     <div class="name">分享</div>
 249 |                     <div class="fontclass">.icon-fenxiang5</div>
 250 |                 </li>
 251 |             
 252 |                 <li>
 253 |                 <i class="icon iconfont icon-bofang3"></i>
 254 |                     <div class="name">播放</div>
 255 |                     <div class="fontclass">.icon-bofang3</div>
 256 |                 </li>
 257 |             
 258 |                 <li>
 259 |                 <i class="icon iconfont icon-fenxiang6"></i>
 260 |                     <div class="name">分享</div>
 261 |                     <div class="fontclass">.icon-fenxiang6</div>
 262 |                 </li>
 263 |             
 264 |                 <li>
 265 |                 <i class="icon iconfont icon-share"></i>
 266 |                     <div class="name">分享</div>
 267 |                     <div class="fontclass">.icon-share</div>
 268 |                 </li>
 269 |             
 270 |                 <li>
 271 |                 <i class="icon iconfont icon-iconfontcolor96"></i>
 272 |                     <div class="name">暂停</div>
 273 |                     <div class="fontclass">.icon-iconfontcolor96</div>
 274 |                 </li>
 275 |             
 276 |                 <li>
 277 |                 <i class="icon iconfont icon-bofangqixiayiqu"></i>
 278 |                     <div class="name">播放器-下一曲</div>
 279 |                     <div class="fontclass">.icon-bofangqixiayiqu</div>
 280 |                 </li>
 281 |             
 282 |                 <li>
 283 |                 <i class="icon iconfont icon-suopingxiayiqu"></i>
 284 |                     <div class="name">锁屏-下一曲</div>
 285 |                     <div class="fontclass">.icon-suopingxiayiqu</div>
 286 |                 </li>
 287 |             
 288 |                 <li>
 289 |                 <i class="icon iconfont icon-suopingshangyiqu"></i>
 290 |                     <div class="name">锁屏-上一曲</div>
 291 |                     <div class="fontclass">.icon-suopingshangyiqu</div>
 292 |                 </li>
 293 |             
 294 |                 <li>
 295 |                 <i class="icon iconfont icon-zhutixiayiqu"></i>
 296 |                     <div class="name">主题-下一曲</div>
 297 |                     <div class="fontclass">.icon-zhutixiayiqu</div>
 298 |                 </li>
 299 |             
 300 |                 <li>
 301 |                 <i class="icon iconfont icon-tianbiao"></i>
 302 |                     <div class="name">天标</div>
 303 |                     <div class="fontclass">.icon-tianbiao</div>
 304 |                 </li>
 305 |             
 306 |                 <li>
 307 |                 <i class="icon iconfont icon-tian"></i>
 308 |                     <div class="name">天</div>
 309 |                     <div class="fontclass">.icon-tian</div>
 310 |                 </li>
 311 |             
 312 |                 <li>
 313 |                 <i class="icon iconfont icon-tianmao"></i>
 314 |                     <div class="name">天猫</div>
 315 |                     <div class="fontclass">.icon-tianmao</div>
 316 |                 </li>
 317 |             
 318 |                 <li>
 319 |                 <i class="icon iconfont icon-tianmao1"></i>
 320 |                     <div class="name">天猫</div>
 321 |                     <div class="fontclass">.icon-tianmao1</div>
 322 |                 </li>
 323 |             
 324 |                 <li>
 325 |                 <i class="icon iconfont icon-xiayiqu1"></i>
 326 |                     <div class="name">下一曲</div>
 327 |                     <div class="fontclass">.icon-xiayiqu1</div>
 328 |                 </li>
 329 |             
 330 |                 <li>
 331 |                 <i class="icon iconfont icon-suijibofang"></i>
 332 |                     <div class="name">随机播放</div>
 333 |                     <div class="fontclass">.icon-suijibofang</div>
 334 |                 </li>
 335 |             
 336 |                 <li>
 337 |                 <i class="icon iconfont icon-weibiaoti102"></i>
 338 |                     <div class="name">开始暂停</div>
 339 |                     <div class="fontclass">.icon-weibiaoti102</div>
 340 |                 </li>
 341 |             
 342 |                 <li>
 343 |                 <i class="icon iconfont icon-icon1"></i>
 344 |                     <div class="name">上一曲</div>
 345 |                     <div class="fontclass">.icon-icon1</div>
 346 |                 </li>
 347 |             
 348 |                 <li>
 349 |                 <i class="icon iconfont icon-icon2"></i>
 350 |                     <div class="name">下一曲</div>
 351 |                     <div class="fontclass">.icon-icon2</div>
 352 |                 </li>
 353 |             
 354 |                 <li>
 355 |                 <i class="icon iconfont icon-tianmao2"></i>
 356 |                     <div class="name">天猫</div>
 357 |                     <div class="fontclass">.icon-tianmao2</div>
 358 |                 </li>
 359 |             
 360 |                 <li>
 361 |                 <i class="icon iconfont icon-05"></i>
 362 |                     <div class="name">05</div>
 363 |                     <div class="fontclass">.icon-05</div>
 364 |                 </li>
 365 |             
 366 |                 <li>
 367 |                 <i class="icon iconfont icon-07"></i>
 368 |                     <div class="name">07</div>
 369 |                     <div class="fontclass">.icon-07</div>
 370 |                 </li>
 371 |             
 372 |                 <li>
 373 |                 <i class="icon iconfont icon-10"></i>
 374 |                     <div class="name">10</div>
 375 |                     <div class="fontclass">.icon-10</div>
 376 |                 </li>
 377 |             
 378 |                 <li>
 379 |                 <i class="icon iconfont icon-24"></i>
 380 |                     <div class="name">24</div>
 381 |                     <div class="fontclass">.icon-24</div>
 382 |                 </li>
 383 |             
 384 |                 <li>
 385 |                 <i class="icon iconfont icon-25"></i>
 386 |                     <div class="name">25</div>
 387 |                     <div class="fontclass">.icon-25</div>
 388 |                 </li>
 389 |             
 390 |                 <li>
 391 |                 <i class="icon iconfont icon-26"></i>
 392 |                     <div class="name">26</div>
 393 |                     <div class="fontclass">.icon-26</div>
 394 |                 </li>
 395 |             
 396 |                 <li>
 397 |                 <i class="icon iconfont icon-27"></i>
 398 |                     <div class="name">27</div>
 399 |                     <div class="fontclass">.icon-27</div>
 400 |                 </li>
 401 |             
 402 |                 <li>
 403 |                 <i class="icon iconfont icon-28"></i>
 404 |                     <div class="name">28</div>
 405 |                     <div class="fontclass">.icon-28</div>
 406 |                 </li>
 407 |             
 408 |                 <li>
 409 |                 <i class="icon iconfont icon-29"></i>
 410 |                     <div class="name">29</div>
 411 |                     <div class="fontclass">.icon-29</div>
 412 |                 </li>
 413 |             
 414 |                 <li>
 415 |                 <i class="icon iconfont icon-31"></i>
 416 |                     <div class="name">31</div>
 417 |                     <div class="fontclass">.icon-31</div>
 418 |                 </li>
 419 |             
 420 |                 <li>
 421 |                 <i class="icon iconfont icon-38"></i>
 422 |                     <div class="name">38</div>
 423 |                     <div class="fontclass">.icon-38</div>
 424 |                 </li>
 425 |             
 426 |                 <li>
 427 |                 <i class="icon iconfont icon-crm17"></i>
 428 |                     <div class="name">暂停</div>
 429 |                     <div class="fontclass">.icon-crm17</div>
 430 |                 </li>
 431 |             
 432 |                 <li>
 433 |                 <i class="icon iconfont icon-39"></i>
 434 |                     <div class="name">39</div>
 435 |                     <div class="fontclass">.icon-39</div>
 436 |                 </li>
 437 |             
 438 |                 <li>
 439 |                 <i class="icon iconfont icon-zanting5"></i>
 440 |                     <div class="name">暂停</div>
 441 |                     <div class="fontclass">.icon-zanting5</div>
 442 |                 </li>
 443 |             
 444 |                 <li>
 445 |                 <i class="icon iconfont icon-zantinghuodong"></i>
 446 |                     <div class="name">暂停活动</div>
 447 |                     <div class="fontclass">.icon-zantinghuodong</div>
 448 |                 </li>
 449 |             
 450 |                 <li>
 451 |                 <i class="icon iconfont icon-7tian"></i>
 452 |                     <div class="name">7天</div>
 453 |                     <div class="fontclass">.icon-7tian</div>
 454 |                 </li>
 455 |             
 456 |                 <li>
 457 |                 <i class="icon iconfont icon-7tian1"></i>
 458 |                     <div class="name">7天</div>
 459 |                     <div class="fontclass">.icon-7tian1</div>
 460 |                 </li>
 461 |             
 462 |                 <li>
 463 |                 <i class="icon iconfont icon-42"></i>
 464 |                     <div class="name">42</div>
 465 |                     <div class="fontclass">.icon-42</div>
 466 |                 </li>
 467 |             
 468 |                 <li>
 469 |                 <i class="icon iconfont icon-zanting6"></i>
 470 |                     <div class="name">暂停</div>
 471 |                     <div class="fontclass">.icon-zanting6</div>
 472 |                 </li>
 473 |             
 474 |                 <li>
 475 |                 <i class="icon iconfont icon-tianmao3"></i>
 476 |                     <div class="name">天猫</div>
 477 |                     <div class="fontclass">.icon-tianmao3</div>
 478 |                 </li>
 479 |             
 480 |                 <li>
 481 |                 <i class="icon iconfont icon-50"></i>
 482 |                     <div class="name">50</div>
 483 |                     <div class="fontclass">.icon-50</div>
 484 |                 </li>
 485 |             
 486 |                 <li>
 487 |                 <i class="icon iconfont icon-shangyiqu-copy"></i>
 488 |                     <div class="name">上一曲</div>
 489 |                     <div class="fontclass">.icon-shangyiqu-copy</div>
 490 |                 </li>
 491 |             
 492 |                 <li>
 493 |                 <i class="icon iconfont icon-user"></i>
 494 |                     <div class="name">我</div>
 495 |                     <div class="fontclass">.icon-user</div>
 496 |                 </li>
 497 |             
 498 |                 <li>
 499 |                 <i class="icon iconfont icon-default-avatar"></i>
 500 |                     <div class="name">默认头像</div>
 501 |                     <div class="fontclass">.icon-default-avatar</div>
 502 |                 </li>
 503 |             
 504 |                 <li>
 505 |                 <i class="icon iconfont icon-zanting7"></i>
 506 |                     <div class="name">暂停</div>
 507 |                     <div class="fontclass">.icon-zanting7</div>
 508 |                 </li>
 509 |             
 510 |                 <li>
 511 |                 <i class="icon iconfont icon-shangyiqu-copy1"></i>
 512 |                     <div class="name">上一曲</div>
 513 |                     <div class="fontclass">.icon-shangyiqu-copy1</div>
 514 |                 </li>
 515 |             
 516 |                 <li>
 517 |                 <i class="icon iconfont icon-suiji2"></i>
 518 |                     <div class="name">随机播放</div>
 519 |                     <div class="fontclass">.icon-suiji2</div>
 520 |                 </li>
 521 |             
 522 |                 <li>
 523 |                 <i class="icon iconfont icon-address"></i>
 524 |                     <div class="name">address</div>
 525 |                     <div class="fontclass">.icon-address</div>
 526 |                 </li>
 527 |             
 528 |                 <li>
 529 |                 <i class="icon iconfont icon-eyeoclose"></i>
 530 |                     <div class="name">eyeoclose</div>
 531 |                     <div class="fontclass">.icon-eyeoclose</div>
 532 |                 </li>
 533 |             
 534 |                 <li>
 535 |                 <i class="icon iconfont icon-eyeopen"></i>
 536 |                     <div class="name">eyeopen</div>
 537 |                     <div class="fontclass">.icon-eyeopen</div>
 538 |                 </li>
 539 |             
 540 |                 <li>
 541 |                 <i class="icon iconfont icon-phonenum"></i>
 542 |                     <div class="name">phonenum</div>
 543 |                     <div class="fontclass">.icon-phonenum</div>
 544 |                 </li>
 545 |             
 546 |                 <li>
 547 |                 <i class="icon iconfont icon-question"></i>
 548 |                     <div class="name">question</div>
 549 |                     <div class="fontclass">.icon-question</div>
 550 |                 </li>
 551 |             
 552 |                 <li>
 553 |                 <i class="icon iconfont icon-set"></i>
 554 |                     <div class="name">set</div>
 555 |                     <div class="fontclass">.icon-set</div>
 556 |                 </li>
 557 |             
 558 |                 <li>
 559 |                 <i class="icon iconfont icon-paynumber"></i>
 560 |                     <div class="name">paynumber</div>
 561 |                     <div class="fontclass">.icon-paynumber</div>
 562 |                 </li>
 563 |             
 564 |                 <li>
 565 |                 <i class="icon iconfont icon-yinlezanting"></i>
 566 |                     <div class="name">音乐_暂停</div>
 567 |                     <div class="fontclass">.icon-yinlezanting</div>
 568 |                 </li>
 569 |             
 570 |                 <li>
 571 |                 <i class="icon iconfont icon-tushujiemianxiayiqu40"></i>
 572 |                     <div class="name">下一曲40</div>
 573 |                     <div class="fontclass">.icon-tushujiemianxiayiqu40</div>
 574 |                 </li>
 575 |             
 576 |                 <li>
 577 |                 <i class="icon iconfont icon-suijibofang1"></i>
 578 |                     <div class="name">随机播放</div>
 579 |                     <div class="fontclass">.icon-suijibofang1</div>
 580 |                 </li>
 581 |             
 582 |                 <li>
 583 |                 <i class="icon iconfont icon-suijibofang2"></i>
 584 |                     <div class="name">随机播放</div>
 585 |                     <div class="fontclass">.icon-suijibofang2</div>
 586 |                 </li>
 587 |             
 588 |                 <li>
 589 |                 <i class="icon iconfont icon-suijibofang3"></i>
 590 |                     <div class="name">随机播放</div>
 591 |                     <div class="fontclass">.icon-suijibofang3</div>
 592 |                 </li>
 593 |             
 594 |                 <li>
 595 |                 <i class="icon iconfont icon-icon78"></i>
 596 |                     <div class="name">随机播放</div>
 597 |                     <div class="fontclass">.icon-icon78</div>
 598 |                 </li>
 599 |             
 600 |                 <li>
 601 |                 <i class="icon iconfont icon-icon129"></i>
 602 |                     <div class="name">上一曲</div>
 603 |                     <div class="fontclass">.icon-icon129</div>
 604 |                 </li>
 605 |             
 606 |                 <li>
 607 |                 <i class="icon iconfont icon-icon226"></i>
 608 |                     <div class="name">下一曲</div>
 609 |                     <div class="fontclass">.icon-icon226</div>
 610 |                 </li>
 611 |             
 612 |                 <li>
 613 |                 <i class="icon iconfont icon-xiaoxi1"></i>
 614 |                     <div class="name">消息(1)</div>
 615 |                     <div class="fontclass">.icon-xiaoxi1</div>
 616 |                 </li>
 617 |             
 618 |                 <li>
 619 |                 <i class="icon iconfont icon-xiaoxi"></i>
 620 |                     <div class="name">消息</div>
 621 |                     <div class="fontclass">.icon-xiaoxi</div>
 622 |                 </li>
 623 |             
 624 |                 <li>
 625 |                 <i class="icon iconfont icon-tongjitu111"></i>
 626 |                     <div class="name">统计图阴</div>
 627 |                     <div class="fontclass">.icon-tongjitu111</div>
 628 |                 </li>
 629 |             
 630 |                 <li>
 631 |                 <i class="icon iconfont icon-yonghu"></i>
 632 |                     <div class="name">用户</div>
 633 |                     <div class="fontclass">.icon-yonghu</div>
 634 |                 </li>
 635 |             
 636 |                 <li>
 637 |                 <i class="icon iconfont icon-gongzuo"></i>
 638 |                     <div class="name">工作</div>
 639 |                     <div class="fontclass">.icon-gongzuo</div>
 640 |                 </li>
 641 |             
 642 |                 <li>
 643 |                 <i class="icon iconfont icon-zixun"></i>
 644 |                     <div class="name">资讯</div>
 645 |                     <div class="fontclass">.icon-zixun</div>
 646 |                 </li>
 647 |             
 648 |                 <li>
 649 |                 <i class="icon iconfont icon-zixuntianchong"></i>
 650 |                     <div class="name">资讯_填充</div>
 651 |                     <div class="fontclass">.icon-zixuntianchong</div>
 652 |                 </li>
 653 |             
 654 |                 <li>
 655 |                 <i class="icon iconfont icon-dingwei"></i>
 656 |                     <div class="name">定位</div>
 657 |                     <div class="fontclass">.icon-dingwei</div>
 658 |                 </li>
 659 |             
 660 |                 <li>
 661 |                 <i class="icon iconfont icon-next"></i>
 662 |                     <div class="name">下一曲</div>
 663 |                     <div class="fontclass">.icon-next</div>
 664 |                 </li>
 665 |             
 666 |                 <li>
 667 |                 <i class="icon iconfont icon-shangyiqu1"></i>
 668 |                     <div class="name">上一曲</div>
 669 |                     <div class="fontclass">.icon-shangyiqu1</div>
 670 |                 </li>
 671 |             
 672 |                 <li>
 673 |                 <i class="icon iconfont icon-xiayiqu2"></i>
 674 |                     <div class="name">下一曲</div>
 675 |                     <div class="fontclass">.icon-xiayiqu2</div>
 676 |                 </li>
 677 |             
 678 |                
 679 |             
 680 |                 <li>
 681 |                 <i class="icon iconfont icon-taobao"></i>
 682 |                     <div class="name">淘宝</div>
 683 |                     <div class="fontclass">.icon-taobao</div>
 684 |                 </li>
 685 |             
 686 |                 <li>
 687 |                 <i class="icon iconfont icon-tengxunweibo"></i>
 688 |                     <div class="name">腾讯微博</div>
 689 |                     <div class="fontclass">.icon-tengxunweibo</div>
 690 |                 </li>
 691 |             
 692 |                 <li>
 693 |                 <i class="icon iconfont icon-renren"></i>
 694 |                     <div class="name">人人</div>
 695 |                     <div class="fontclass">.icon-renren</div>
 696 |                 </li>
 697 |             
 698 |                 <li>
 699 |                 <i class="icon iconfont icon-youxiang"></i>
 700 |                     <div class="name">邮箱</div>
 701 |                     <div class="fontclass">.icon-youxiang</div>
 702 |                 </li>
 703 |             
 704 |                 <li>
 705 |                 <i class="icon iconfont icon-weixin"></i>
 706 |                     <div class="name">微信</div>
 707 |                     <div class="fontclass">.icon-weixin</div>
 708 |                 </li>
 709 |             
 710 |                 <li>
 711 |                 <i class="icon iconfont icon-zhifubao"></i>
 712 |                     <div class="name">支付宝</div>
 713 |                     <div class="fontclass">.icon-zhifubao</div>
 714 |                 </li>
 715 |             
 716 |                 <li>
 717 |                 <i class="icon iconfont icon-yinxiangbiji"></i>
 718 |                     <div class="name">印象笔记</div>
 719 |                     <div class="fontclass">.icon-yinxiangbiji</div>
 720 |                 </li>
 721 |             
 722 |                 <li>
 723 |                 <i class="icon iconfont icon-Facebook"></i>
 724 |                     <div class="name">Facebook</div>
 725 |                     <div class="fontclass">.icon-Facebook</div>
 726 |                 </li>
 727 |             
 728 |                 <li>
 729 |                 <i class="icon iconfont icon-dribbble"></i>
 730 |                     <div class="name">dribbble</div>
 731 |                     <div class="fontclass">.icon-dribbble</div>
 732 |                 </li>
 733 |             
 734 |                 <li>
 735 |                 <i class="icon iconfont icon-linkedin"></i>
 736 |                     <div class="name">linkedin</div>
 737 |                     <div class="fontclass">.icon-linkedin</div>
 738 |                 </li>
 739 |             
 740 |                 <li>
 741 |                 <i class="icon iconfont icon-Instagram"></i>
 742 |                     <div class="name">Instagram</div>
 743 |                     <div class="fontclass">.icon-Instagram</div>
 744 |                 </li>
 745 |             
 746 |                 <li>
 747 |                 <i class="icon iconfont icon-pinterest"></i>
 748 |                     <div class="name">pinterest</div>
 749 |                     <div class="fontclass">.icon-pinterest</div>
 750 |                 </li>
 751 |             
 752 |                 <li>
 753 |                 <i class="icon iconfont icon-qqkongjian"></i>
 754 |                     <div class="name">qq空间</div>
 755 |                     <div class="fontclass">.icon-qqkongjian</div>
 756 |                 </li>
 757 |             
 758 |                 <li>
 759 |                 <i class="icon iconfont icon-reddit"></i>
 760 |                     <div class="name">reddit</div>
 761 |                     <div class="fontclass">.icon-reddit</div>
 762 |                 </li>
 763 |             
 764 |                 <li>
 765 |                 <i class="icon iconfont icon-tumblr"></i>
 766 |                     <div class="name">tumblr</div>
 767 |                     <div class="fontclass">.icon-tumblr</div>
 768 |                 </li>
 769 |             
 770 |                 <li>
 771 |                 <i class="icon iconfont icon-zhihu"></i>
 772 |                     <div class="name">知乎</div>
 773 |                     <div class="fontclass">.icon-zhihu</div>
 774 |                 </li>
 775 |             
 776 |                 <li>
 777 |                 <i class="icon iconfont icon-youku"></i>
 778 |                     <div class="name">优酷</div>
 779 |                     <div class="fontclass">.icon-youku</div>
 780 |                 </li>
 781 |             
 782 |                 <li>
 783 |                 <i class="icon iconfont icon-twitter"></i>
 784 |                     <div class="name">twitter</div>
 785 |                     <div class="fontclass">.icon-twitter</div>
 786 |                 </li>
 787 |             
 788 |                 <li>
 789 |                 <i class="icon iconfont icon-quora"></i>
 790 |                     <div class="name">quora</div>
 791 |                     <div class="fontclass">.icon-quora</div>
 792 |                 </li>
 793 |             
 794 |                 <li>
 795 |                 <i class="icon iconfont icon-path"></i>
 796 |                     <div class="name">path</div>
 797 |                     <div class="fontclass">.icon-path</div>
 798 |                 </li>
 799 |             
 800 |                 <li>
 801 |                 <i class="icon iconfont icon-youdaoyunbiji"></i>
 802 |                     <div class="name">有道云笔记</div>
 803 |                     <div class="fontclass">.icon-youdaoyunbiji</div>
 804 |                 </li>
 805 |             
 806 |                 <li>
 807 |                 <i class="icon iconfont icon-snapchat"></i>
 808 |                     <div class="name">snapchat</div>
 809 |                     <div class="fontclass">.icon-snapchat</div>
 810 |                 </li>
 811 |             
 812 |                 <li>
 813 |                 <i class="icon iconfont icon-line"></i>
 814 |                     <div class="name">line</div>
 815 |                     <div class="fontclass">.icon-line</div>
 816 |                 </li>
 817 |             
 818 |                 <li>
 819 |                 <i class="icon iconfont icon-xinlangweibo"></i>
 820 |                     <div class="name">新浪微博</div>
 821 |                     <div class="fontclass">.icon-xinlangweibo</div>
 822 |                 </li>
 823 |             
 824 |                 <li>
 825 |                 <i class="icon iconfont icon-qq"></i>
 826 |                     <div class="name">qq</div>
 827 |                     <div class="fontclass">.icon-qq</div>
 828 |                 </li>
 829 |             
 830 |                 <li>
 831 |                 <i class="icon iconfont icon-whatsapp"></i>
 832 |                     <div class="name">whatsapp</div>
 833 |                     <div class="fontclass">.icon-whatsapp</div>
 834 |                 </li>
 835 |             
 836 |                 <li>
 837 |                 <i class="icon iconfont icon-xinlangweibo11"></i>
 838 |                     <div class="name">分类</div>
 839 |                     <div class="fontclass">.icon-fenlei</div>
 840 |                 </li>
 841 |             
 842 |                 <li>
 843 |                 <i class="icon iconfont icon-fenlei-xuanzhong"></i>
 844 |                     <div class="name">分类-选中</div>
 845 |                     <div class="fontclass">.icon-fenlei-xuanzhong</div>
 846 |                 </li>
 847 |             
 848 |                 <li>
 849 |                 <i class="icon iconfont icon-pengyouquan"></i>
 850 |                     <div class="name">朋友圈</div>
 851 |                     <div class="fontclass">.icon-pengyouquan</div>
 852 |                 </li>
 853 |             
 854 |                 <li>
 855 |                 <i class="icon iconfont icon-QQ"></i>
 856 |                     <div class="name">向上</div>
 857 |                     <div class="fontclass">.icon-xiangshang</div>
 858 |                 </li>
 859 |             
 860 |                 <li>
 861 |                 <i class="icon iconfont icon-xiangxia"></i>
 862 |                     <div class="name">向下</div>
 863 |                     <div class="fontclass">.icon-xiangxia</div>
 864 |                 </li>
 865 |             
 866 |                 <li>
 867 |                 <i class="icon iconfont icon-shizhong1"></i>
 868 |                     <div class="name">时钟1</div>
 869 |                     <div class="fontclass">.icon-shizhong1</div>
 870 |                 </li>
 871 |             
 872 |                 <li>
 873 |                 <i class="icon iconfont icon-xiangzuo"></i>
 874 |                     <div class="name">向左</div>
 875 |                     <div class="fontclass">.icon-xiangzuo</div>
 876 |                 </li>
 877 |             
 878 |                 <li>
 879 |                 <i class="icon iconfont icon-01"></i>
 880 |                     <div class="name">太和殿</div>
 881 |                     <div class="fontclass">.icon-01</div>
 882 |                 </li>
 883 |             
 884 |                 <li>
 885 |                 <i class="icon iconfont icon-02"></i>
 886 |                     <div class="name">长城</div>
 887 |                     <div class="fontclass">.icon-02</div>
 888 |                 </li>
 889 |             
 890 |                 <li>
 891 |                 <i class="icon iconfont icon-03"></i>
 892 |                     <div class="name">明十三陵</div>
 893 |                     <div class="fontclass">.icon-03</div>
 894 |                 </li>
 895 |             
 896 |                 <li>
 897 |                 <i class="icon iconfont icon-051"></i>
 898 |                     <div class="name">中央电视台总部大楼</div>
 899 |                     <div class="fontclass">.icon-051</div>
 900 |                 </li>
 901 |             
 902 |                 <li>
 903 |                 <i class="icon iconfont icon-06"></i>
 904 |                     <div class="name">天坛</div>
 905 |                     <div class="fontclass">.icon-06</div>
 906 |                 </li>
 907 |             
 908 |                 <li>
 909 |                 <i class="icon iconfont icon-071"></i>
 910 |                     <div class="name">埃菲尔铁塔-法</div>
 911 |                     <div class="fontclass">.icon-071</div>
 912 |                 </li>
 913 |             
 914 |                 <li>
 915 |                 <i class="icon iconfont icon-random"></i>
 916 |                     <div class="name">随机播放</div>
 917 |                     <div class="fontclass">.icon-random</div>
 918 |                 </li>
 919 |             
 920 |                 <li>
 921 |                 <i class="icon iconfont icon-08"></i>
 922 |                     <div class="name">悉尼歌剧院-澳</div>
 923 |                     <div class="fontclass">.icon-08</div>
 924 |                 </li>
 925 |             
 926 |                 <li>
 927 |                 <i class="icon iconfont icon-09"></i>
 928 |                     <div class="name">自由女神-美</div>
 929 |                     <div class="fontclass">.icon-09</div>
 930 |                 </li>
 931 |             
 932 |                 <li>
 933 |                 <i class="icon iconfont icon-101"></i>
 934 |                     <div class="name">白宫-美</div>
 935 |                     <div class="fontclass">.icon-101</div>
 936 |                 </li>
 937 |             
 938 |                 <li>
 939 |                 <i class="icon iconfont icon-11"></i>
 940 |                     <div class="name">帝国大厦-美</div>
 941 |                     <div class="fontclass">.icon-11</div>
 942 |                 </li>
 943 |             
 944 |                 <li>
 945 |                 <i class="icon iconfont icon-12"></i>
 946 |                     <div class="name">比萨斜塔-意</div>
 947 |                     <div class="fontclass">.icon-12</div>
 948 |                 </li>
 949 |             
 950 |                 <li>
 951 |                 <i class="icon iconfont icon-14"></i>
 952 |                     <div class="name">东京塔-日</div>
 953 |                     <div class="fontclass">.icon-14</div>
 954 |                 </li>
 955 |             
 956 |                 <li>
 957 |                 <i class="icon iconfont icon-17"></i>
 958 |                     <div class="name">埃及金字塔</div>
 959 |                     <div class="fontclass">.icon-17</div>
 960 |                 </li>
 961 |             
 962 |                 <li>
 963 |                 <i class="icon iconfont icon-18"></i>
 964 |                     <div class="name">罗马斗兽场</div>
 965 |                     <div class="fontclass">.icon-18</div>
 966 |                 </li>
 967 |             
 968 |                 <li>
 969 |                 <i class="icon iconfont icon-20"></i>
 970 |                     <div class="name">复活节岛石像</div>
 971 |                     <div class="fontclass">.icon-20</div>
 972 |                 </li>
 973 |             
 974 |                 <li>
 975 |                 <i class="icon iconfont icon-21"></i>
 976 |                     <div class="name">里约热内卢基督像-巴西</div>
 977 |                     <div class="fontclass">.icon-21</div>
 978 |                 </li>
 979 |             
 980 |                 <li>
 981 |                 <i class="icon iconfont icon-twitter1"></i>
 982 |                     <div class="name">icon_twitter</div>
 983 |                     <div class="fontclass">.icon-twitter1</div>
 984 |                 </li>
 985 |             
 986 |                 <li>
 987 |                 <i class="icon iconfont icon-facebook"></i>
 988 |                     <div class="name">icon_facebook</div>
 989 |                     <div class="fontclass">.icon-facebook</div>
 990 |                 </li>
 991 |             
 992 |                 <li>
 993 |                 <i class="icon iconfont icon-weixin1"></i>
 994 |                     <div class="name">微信</div>
 995 |                     <div class="fontclass">.icon-weixin1</div>
 996 |                 </li>
 997 |             
 998 |                 <li>
 999 |                 <i class="icon iconfont icon-Yahoo"></i>
1000 |                     <div class="name">icon_Yahoo</div>
1001 |                     <div class="fontclass">.icon-Yahoo</div>
1002 |                 </li>
1003 |             
1004 |                 <li>
1005 |                 <i class="icon iconfont icon-Skye"></i>
1006 |                     <div class="name">icon_Skye</div>
1007 |                     <div class="fontclass">.icon-Skye</div>
1008 |                 </li>
1009 |             
1010 |                 <li>
1011 |                 <i class="icon iconfont icon-Google"></i>
1012 |                     <div class="name">icon_Google</div>
1013 |                     <div class="fontclass">.icon-Google</div>
1014 |                 </li>
1015 |             
1016 |                 <li>
1017 |                 <i class="icon iconfont icon-anzhuo"></i>
1018 |                     <div class="name">icon_anzhuo</div>
1019 |                     <div class="fontclass">.icon-anzhuo</div>
1020 |                 </li>
1021 |             
1022 |                 <li>
1023 |                 <i class="icon iconfont icon-yamaxun"></i>
1024 |                     <div class="name">icon_yamaxun</div>
1025 |                     <div class="fontclass">.icon-yamaxun</div>
1026 |                 </li>
1027 |             
1028 |                 <li>
1029 |                 <i class="icon iconfont icon-linkedin1"></i>
1030 |                     <div class="name">icon_linkedin</div>
1031 |                     <div class="fontclass">.icon-linkedin1</div>
1032 |                 </li>
1033 |             
1034 |                 <li>
1035 |                 <i class="icon iconfont icon-weixinpengyouquan"></i>
1036 |                     <div class="name">微信朋友圈</div>
1037 |                     <div class="fontclass">.icon-weixinpengyouquan</div>
1038 |                 </li>
1039 |             
1040 |                 <li>
1041 |                 <i class="icon iconfont icon-YouTube"></i>
1042 |                     <div class="name">icon_YouTube</div>
1043 |                     <div class="fontclass">.icon-YouTube</div>
1044 |                 </li>
1045 |             
1046 |                 <li>
1047 |                 <i class="icon iconfont icon-qq1"></i>
1048 |                     <div class="name">qq</div>
1049 |                     <div class="fontclass">.icon-qq1</div>
1050 |                 </li>
1051 |             
1052 |                 <li>
1053 |                 <i class="icon iconfont icon-xinlang"></i>
1054 |                     <div class="name">新浪</div>
1055 |                     <div class="fontclass">.icon-xinlang</div>
1056 |                 </li>
1057 |             
1058 |                 <li>
1059 |                 <i class="icon iconfont icon-facebook1"></i>
1060 |                     <div class="name">facebook</div>
1061 |                     <div class="fontclass">.icon-facebook1</div>
1062 |                 </li>
1063 |             
1064 |                 <li>
1065 |                 <i class="icon iconfont icon-Qzone"></i>
1066 |                     <div class="name">icon_Qzone</div>
1067 |                     <div class="fontclass">.icon-Qzone</div>
1068 |                 </li>
1069 |             
1070 |                 <li>
1071 |                 <i class="icon iconfont icon-QQ"></i>
1072 |                     <div class="name">icon_QQ</div>
1073 |                     <div class="fontclass">.icon-QQ</div>
1074 |                 </li>
1075 |             
1076 |                 <li>
1077 |                 <i class="icon iconfont icon-xinlang1"></i>
1078 |                     <div class="name">icon_xinlang</div>
1079 |                     <div class="fontclass">.icon-xinlang1</div>
1080 |                 </li>
1081 |             
1082 |                 <li>
1083 |                 <i class="icon iconfont icon-QQ_weibo"></i>
1084 |                     <div class="name">icon_tenxun_weibo</div>
1085 |                     <div class="fontclass">.icon-QQ_weibo</div>
1086 |                 </li>
1087 |             
1088 |                 <li>
1089 |                 <i class="icon iconfont icon-zhifubao1"></i>
1090 |                     <div class="name">icon_zhifubao</div>
1091 |                     <div class="fontclass">.icon-zhifubao1</div>
1092 |                 </li>
1093 |             
1094 |                 <li>
1095 |                 <i class="icon iconfont icon-taobao1"></i>
1096 |                     <div class="name">icon_taobao</div>
1097 |                     <div class="fontclass">.icon-taobao1</div>
1098 |                 </li>
1099 |             
1100 |                 <li>
1101 |                 <i class="icon iconfont icon-weichat"></i>
1102 |                     <div class="name">icon_weichat</div>
1103 |                     <div class="fontclass">.icon-weichat</div>
1104 |                 </li>
1105 |             
1106 |                 <li>
1107 |                 <i class="icon iconfont icon-douban1"></i>
1108 |                     <div class="name">icon_douban</div>
1109 |                     <div class="fontclass">.icon-douban1</div>
1110 |                 </li>
1111 |             
1112 |                 <li>
1113 |                 <i class="icon iconfont icon-renren1"></i>
1114 |                     <div class="name">icon_renren</div>
1115 |                     <div class="fontclass">.icon-renren1</div>
1116 |                 </li>
1117 |             
1118 |                 <li>
1119 |                 <i class="icon iconfont icon-email"></i>
1120 |                     <div class="name">icon_email</div>
1121 |                     <div class="fontclass">.icon-email</div>
1122 |                 </li>
1123 |             
1124 |                 <li>
1125 |                 <i class="icon iconfont icon-youku1"></i>
1126 |                     <div class="name">icon_youku</div>
1127 |                     <div class="fontclass">.icon-youku1</div>
1128 |                 </li>
1129 |             
1130 |                 <li>
1131 |                 <i class="icon iconfont icon-twitter2"></i>
1132 |                     <div class="name">twitter</div>
1133 |                     <div class="fontclass">.icon-twitter2</div>
1134 |                 </li>
1135 |             
1136 |                 <li>
1137 |                 <i class="icon iconfont icon-pingguo"></i>
1138 |                     <div class="name">苹果</div>
1139 |                     <div class="fontclass">.icon-pingguo</div>
1140 |                 </li>
1141 |             
1142 |                 <li>
1143 |                 <i class="icon iconfont icon-shoucang"></i>
1144 |                     <div class="name">收藏</div>
1145 |                     <div class="fontclass">.icon-shoucang</div>
1146 |                 </li>
1147 |             
1148 |                 <li>
1149 |                 <i class="icon iconfont icon-qiaquan"></i>
1150 |                     <div class="name">卡券</div>
1151 |                     <div class="fontclass">.icon-qiaquan</div>
1152 |                 </li>
1153 |             
1154 |                 <li>
1155 |                 <i class="icon iconfont icon-wenjian"></i>
1156 |                     <div class="name">文件</div>
1157 |                     <div class="fontclass">.icon-wenjian</div>
1158 |                 </li>
1159 |             
1160 |                 <li>
1161 |                 <i class="icon iconfont icon-bianji"></i>
1162 |                     <div class="name">编辑</div>
1163 |                     <div class="fontclass">.icon-bianji</div>
1164 |                 </li>
1165 |             
1166 |                 <li>
1167 |                 <i class="icon iconfont icon-shezhi"></i>
1168 |                     <div class="name">设置</div>
1169 |                     <div class="fontclass">.icon-shezhi</div>
1170 |                 </li>
1171 |             
1172 |                 <li>
1173 |                 <i class="icon iconfont icon-didian"></i>
1174 |                     <div class="name">地点</div>
1175 |                     <div class="fontclass">.icon-didian</div>
1176 |                 </li>
1177 |             
1178 |                 <li>
1179 |                 <i class="icon iconfont icon-feiji"></i>
1180 |                     <div class="name">飞机</div>
1181 |                     <div class="fontclass">.icon-feiji</div>
1182 |                 </li>
1183 |             
1184 |                 <li>
1185 |                 <i class="icon iconfont icon-dianhua"></i>
1186 |                     <div class="name">电话</div>
1187 |                     <div class="fontclass">.icon-dianhua</div>
1188 |                 </li>
1189 |             
1190 |                 <li>
1191 |                 <i class="icon iconfont icon-lajitong"></i>
1192 |                     <div class="name">垃圾桶</div>
1193 |                     <div class="fontclass">.icon-lajitong</div>
1194 |                 </li>
1195 |             
1196 |                 <li>
1197 |                 <i class="icon iconfont icon-shouji"></i>
1198 |                     <div class="name">手机</div>
1199 |                     <div class="fontclass">.icon-shouji</div>
1200 |                 </li>
1201 |             
1202 |                 <li>
1203 |                 <i class="icon iconfont icon-qianbao"></i>
1204 |                     <div class="name">钱包</div>
1205 |                     <div class="fontclass">.icon-qianbao</div>
1206 |                 </li>
1207 |             
1208 |                 <li>
1209 |                 <i class="icon iconfont icon-youxiang1"></i>
1210 |                     <div class="name">邮箱</div>
1211 |                     <div class="fontclass">.icon-youxiang1</div>
1212 |                 </li>
1213 |             
1214 |                 <li>
1215 |                 <i class="icon iconfont icon-yuechi"></i>
1216 |                     <div class="name">钥匙</div>
1217 |                     <div class="fontclass">.icon-yuechi</div>
1218 |                 </li>
1219 |             
1220 |                 <li>
1221 |                 <i class="icon iconfont icon-xuewei"></i>
1222 |                     <div class="name">学位</div>
1223 |                     <div class="fontclass">.icon-xuewei</div>
1224 |                 </li>
1225 |             
1226 |                 <li>
1227 |                 <i class="icon iconfont icon-pingfen"></i>
1228 |                     <div class="name">评分</div>
1229 |                     <div class="fontclass">.icon-pingfen</div>
1230 |                 </li>
1231 |             
1232 |                 <li>
1233 |                 <i class="icon iconfont icon-naozhong"></i>
1234 |                     <div class="name">闹钟</div>
1235 |                     <div class="fontclass">.icon-naozhong</div>
1236 |                 </li>
1237 |             
1238 |                 <li>
1239 |                 <i class="icon iconfont icon-jianpan"></i>
1240 |                     <div class="name">键盘</div>
1241 |                     <div class="fontclass">.icon-jianpan</div>
1242 |                 </li>
1243 |             
1244 |                 <li>
1245 |                 <i class="icon iconfont icon-baidu"></i>
1246 |                     <div class="name">百度</div>
1247 |                     <div class="fontclass">.icon-baidu</div>
1248 |                 </li>
1249 |             
1250 |                 <li>
1251 |                 <i class="icon iconfont icon-baidu2"></i>
1252 |                     <div class="name">百度2</div>
1253 |                     <div class="fontclass">.icon-baidu2</div>
1254 |                 </li>
1255 |             
1256 |                 <li>
1257 |                 <i class="icon iconfont icon-QQ1"></i>
1258 |                     <div class="name">QQ</div>
1259 |                     <div class="fontclass">.icon-QQ1</div>
1260 |                 </li>
1261 |             
1262 |                 <li>
1263 |                 <i class="icon iconfont icon-baidu1"></i>
1264 |                     <div class="name">百度1</div>
1265 |                     <div class="fontclass">.icon-baidu1</div>
1266 |                 </li>
1267 |             
1268 |                 <li>
1269 |                 <i class="icon iconfont icon-QQ2"></i>
1270 |                     <div class="name">QQ2</div>
1271 |                     <div class="fontclass">.icon-QQ2</div>
1272 |                 </li>
1273 |             
1274 |                 <li>
1275 |                 <i class="icon iconfont icon-QQ11"></i>
1276 |                     <div class="name">QQ1</div>
1277 |                     <div class="fontclass">.icon-QQ11</div>
1278 |                 </li>
1279 |             
1280 |                 <li>
1281 |                 <i class="icon iconfont icon-taobao2"></i>
1282 |                     <div class="name">淘宝</div>
1283 |                     <div class="fontclass">.icon-taobao2</div>
1284 |                 </li>
1285 |             
1286 |                 <li>
1287 |                 <i class="icon iconfont icon-taobao11"></i>
1288 |                     <div class="name">淘宝1</div>
1289 |                     <div class="fontclass">.icon-taobao11</div>
1290 |                 </li>
1291 |             
1292 |                 <li>
1293 |                 <i class="icon iconfont icon-taobao21"></i>
1294 |                     <div class="name">淘宝2</div>
1295 |                     <div class="fontclass">.icon-taobao21</div>
1296 |                 </li>
1297 |             
1298 |                 <li>
1299 |                 <i class="icon iconfont icon-tengxunweibo1"></i>
1300 |                     <div class="name">腾讯微博1</div>
1301 |                     <div class="fontclass">.icon-tengxunweibo1</div>
1302 |                 </li>
1303 |             
1304 |                 <li>
1305 |                 <i class="icon iconfont icon-tengxunweibo2"></i>
1306 |                     <div class="name">腾讯微博</div>
1307 |                     <div class="fontclass">.icon-tengxunweibo2</div>
1308 |                 </li>
1309 |             
1310 |                 <li>
1311 |                 <i class="icon iconfont icon-weixin2"></i>
1312 |                     <div class="name">微信</div>
1313 |                     <div class="fontclass">.icon-weixin2</div>
1314 |                 </li>
1315 |             
1316 |                 <li>
1317 |                 <i class="icon iconfont icon-tengxunweibo21"></i>
1318 |                     <div class="name">腾讯微博2</div>
1319 |                     <div class="fontclass">.icon-tengxunweibo21</div>
1320 |                 </li>
1321 |             
1322 |                 <li>
1323 |                 <i class="icon iconfont icon-weixin11"></i>
1324 |                     <div class="name">微信1</div>
1325 |                     <div class="fontclass">.icon-weixin11</div>
1326 |                 </li>
1327 |             
1328 |                 <li>
1329 |                 <i class="icon iconfont icon-weixin21"></i>
1330 |                     <div class="name">微信2</div>
1331 |                     <div class="fontclass">.icon-weixin21</div>
1332 |                 </li>
1333 |             
1334 |                 <li>
1335 |                 <i class="icon iconfont icon-xinlangweibo1"></i>
1336 |                     <div class="name">新浪微博</div>
1337 |                     <div class="fontclass">.icon-xinlangweibo1</div>
1338 |                 </li>
1339 |             
1340 |                 <li>
1341 |                 <i class="icon iconfont icon-xinlangweibo11"></i>
1342 |                     <div class="name">新浪微博1</div>
1343 |                     <div class="fontclass">.icon-xinlangweibo11</div>
1344 |                 </li>
1345 |             
1346 |                 <li>
1347 |                 <i class="icon iconfont icon-xinlangweibo2"></i>
1348 |                     <div class="name">新浪微博2</div>
1349 |                     <div class="fontclass">.icon-xinlangweibo2</div>
1350 |                 </li>
1351 |             
1352 |                 <li>
1353 |                 <i class="icon iconfont icon-icongerenzhongxin-01"></i>
1354 |                     <div class="name">个人中心</div>
1355 |                     <div class="fontclass">.icon-icongerenzhongxin-01</div>
1356 |                 </li>
1357 |             
1358 |                 <li>
1359 |                 <i class="icon iconfont icon-iconhuidaoshouye"></i>
1360 |                     <div class="name">回到首页</div>
1361 |                     <div class="fontclass">.icon-iconhuidaoshouye</div>
1362 |                 </li>
1363 |             
1364 |                 <li>
1365 |                 <i class="icon iconfont icon-angle-left"></i>
1366 |                     <div class="name">angle-left</div>
1367 |                     <div class="fontclass">.icon-angle-left</div>
1368 |                 </li>
1369 |             
1370 |                 <li>
1371 |                 <i class="icon iconfont icon-angle-double-left"></i>
1372 |                     <div class="name">angle-double-left</div>
1373 |                     <div class="fontclass">.icon-angle-double-left</div>
1374 |                 </li>
1375 |             
1376 |                 <li>
1377 |                 <i class="icon iconfont icon-angle-double-right"></i>
1378 |                     <div class="name">angle-double-right</div>
1379 |                     <div class="fontclass">.icon-angle-double-right</div>
1380 |                 </li>
1381 |             
1382 |                 <li>
1383 |                 <i class="icon iconfont icon-angle-down"></i>
1384 |                     <div class="name">angle-down</div>
1385 |                     <div class="fontclass">.icon-angle-down</div>
1386 |                 </li>
1387 |             
1388 |                 <li>
1389 |                 <i class="icon iconfont icon-angle-double-up"></i>
1390 |                     <div class="name">angle-double-up</div>
1391 |                     <div class="fontclass">.icon-angle-double-up</div>
1392 |                 </li>
1393 |             
1394 |                 <li>
1395 |                 <i class="icon iconfont icon-angle-double-down"></i>
1396 |                     <div class="name">angle-double-down</div>
1397 |                     <div class="fontclass">.icon-angle-double-down</div>
1398 |                 </li>
1399 |             
1400 |                 <li>
1401 |                 <i class="icon iconfont icon-angle-up"></i>
1402 |                     <div class="name">angle-up</div>
1403 |                     <div class="fontclass">.icon-angle-up</div>
1404 |                 </li>
1405 |             
1406 |                 <li>
1407 |                 <i class="icon iconfont icon-angle-right"></i>
1408 |                     <div class="name">angle-right</div>
1409 |                     <div class="fontclass">.icon-angle-right</div>
1410 |                 </li>
1411 |             
1412 |                 <li>
1413 |                 <i class="icon iconfont icon-arrow-small-down"></i>
1414 |                     <div class="name">arrow-small-down</div>
1415 |                     <div class="fontclass">.icon-arrow-small-down</div>
1416 |                 </li>
1417 |             
1418 |                 <li>
1419 |                 <i class="icon iconfont icon-arrow-down"></i>
1420 |                     <div class="name">arrow-down</div>
1421 |                     <div class="fontclass">.icon-arrow-down</div>
1422 |                 </li>
1423 |             
1424 |                 <li>
1425 |                 <i class="icon iconfont icon-arrow-left"></i>
1426 |                     <div class="name">arrow-left</div>
1427 |                     <div class="fontclass">.icon-arrow-left</div>
1428 |                 </li>
1429 |             
1430 |                 <li>
1431 |                 <i class="icon iconfont icon-arrow-right"></i>
1432 |                     <div class="name">arrow-right</div>
1433 |                     <div class="fontclass">.icon-arrow-right</div>
1434 |                 </li>
1435 |             
1436 |                 <li>
1437 |                 <i class="icon iconfont icon-arrow-small-left"></i>
1438 |                     <div class="name">arrow-small-left</div>
1439 |                     <div class="fontclass">.icon-arrow-small-left</div>
1440 |                 </li>
1441 |             
1442 |                 <li>
1443 |                 <i class="icon iconfont icon-arrow-small-right"></i>
1444 |                     <div class="name">arrow-small-right</div>
1445 |                     <div class="fontclass">.icon-arrow-small-right</div>
1446 |                 </li>
1447 |             
1448 |                 <li>
1449 |                 <i class="icon iconfont icon-arrow-up"></i>
1450 |                     <div class="name">arrow-up</div>
1451 |                     <div class="fontclass">.icon-arrow-up</div>
1452 |                 </li>
1453 |             
1454 |                 <li>
1455 |                 <i class="icon iconfont icon-arrow-small-up"></i>
1456 |                     <div class="name">arrow-small-up</div>
1457 |                     <div class="fontclass">.icon-arrow-small-up</div>
1458 |                 </li>
1459 |             
1460 |                 <li>
1461 |                 <i class="icon iconfont icon-chevron-thin-left"></i>
1462 |                     <div class="name">chevron-thin-left</div>
1463 |                     <div class="fontclass">.icon-chevron-thin-left</div>
1464 |                 </li>
1465 |             
1466 |                 <li>
1467 |                 <i class="icon iconfont icon-chevron-thin-down"></i>
1468 |                     <div class="name">chevron-thin-down</div>
1469 |                     <div class="fontclass">.icon-chevron-thin-down</div>
1470 |                 </li>
1471 |             
1472 |                 <li>
1473 |                 <i class="icon iconfont icon-chevron-thin-right"></i>
1474 |                     <div class="name">chevron-thin-right</div>
1475 |                     <div class="fontclass">.icon-chevron-thin-right</div>
1476 |                 </li>
1477 |             
1478 |                 <li>
1479 |                 <i class="icon iconfont icon-chevron-thin-up"></i>
1480 |                     <div class="name">chevron-thin-up</div>
1481 |                     <div class="fontclass">.icon-chevron-thin-up</div>
1482 |                 </li>
1483 |             
1484 |                 <li>
1485 |                 <i class="icon iconfont icon-triangle-down"></i>
1486 |                     <div class="name">triangle-down</div>
1487 |                     <div class="fontclass">.icon-triangle-down</div>
1488 |                 </li>
1489 |             
1490 |                 <li>
1491 |                 <i class="icon iconfont icon-rewind"></i>
1492 |                     <div class="name">rewind</div>
1493 |                     <div class="fontclass">.icon-rewind</div>
1494 |                 </li>
1495 |             
1496 |                 <li>
1497 |                 <i class="icon iconfont icon-triangle-left"></i>
1498 |                     <div class="name">triangle-left</div>
1499 |                     <div class="fontclass">.icon-triangle-left</div>
1500 |                 </li>
1501 |             
1502 |                 <li>
1503 |                 <i class="icon iconfont icon-triangle-right"></i>
1504 |                     <div class="name">triangle-right</div>
1505 |                     <div class="fontclass">.icon-triangle-right</div>
1506 |                 </li>
1507 |             
1508 |                 <li>
1509 |                 <i class="icon iconfont icon-triangle-up"></i>
1510 |                     <div class="name">triangle-up</div>
1511 |                     <div class="fontclass">.icon-triangle-up</div>
1512 |                 </li>
1513 |             
1514 |                 <li>
1515 |                 <i class="icon iconfont icon-fast-forward"></i>
1516 |                     <div class="name">fast-forward</div>
1517 |                     <div class="fontclass">.icon-fast-forward</div>
1518 |                 </li>
1519 |             
1520 |                 <li>
1521 |                 <i class="icon iconfont icon-kefu"></i>
1522 |                     <div class="name">客服</div>
1523 |                     <div class="fontclass">.icon-kefu</div>
1524 |                 </li>
1525 |             
1526 |                 <li>
1527 |                 <i class="icon iconfont icon-shouqi-01"></i>
1528 |                     <div class="name">收起</div>
1529 |                     <div class="fontclass">.icon-shouqi-01</div>
1530 |                 </li>
1531 |             
1532 |                 <li>
1533 |                 <i class="icon iconfont icon-bofang4"></i>
1534 |                     <div class="name">播放</div>
1535 |                     <div class="fontclass">.icon-bofang4</div>
1536 |                 </li>
1537 |             
1538 |                 <li>
1539 |                 <i class="icon iconfont icon-biaoqian"></i>
1540 |                     <div class="name">标签</div>
1541 |                     <div class="fontclass">.icon-biaoqian</div>
1542 |                 </li>
1543 |             
1544 |                 <li>
1545 |                 <i class="icon iconfont icon-WIFI"></i>
1546 |                     <div class="name">WIFI</div>
1547 |                     <div class="fontclass">.icon-WIFI</div>
1548 |                 </li>
1549 |             
1550 |                 <li>
1551 |                 <i class="icon iconfont icon-cuo"></i>
1552 |                     <div class="name">错</div>
1553 |                     <div class="fontclass">.icon-cuo</div>
1554 |                 </li>
1555 |             
1556 |                 <li>
1557 |                 <i class="icon iconfont icon-dianzan"></i>
1558 |                     <div class="name">点赞</div>
1559 |                     <div class="fontclass">.icon-dianzan</div>
1560 |                 </li>
1561 |             
1562 |                 <li>
1563 |                 <i class="icon iconfont icon-dingwei1"></i>
1564 |                     <div class="name">定位</div>
1565 |                     <div class="fontclass">.icon-dingwei1</div>
1566 |                 </li>
1567 |             
1568 |                 <li>
1569 |                 <i class="icon iconfont icon-dui"></i>
1570 |                     <div class="name">对</div>
1571 |                     <div class="fontclass">.icon-dui</div>
1572 |                 </li>
1573 |             
1574 |                 <li>
1575 |                 <i class="icon iconfont icon-erji"></i>
1576 |                     <div class="name">耳机</div>
1577 |                     <div class="fontclass">.icon-erji</div>
1578 |                 </li>
1579 |             
1580 |                 <li>
1581 |                 <i class="icon iconfont icon-gengduo"></i>
1582 |                     <div class="name">更多</div>
1583 |                     <div class="fontclass">.icon-gengduo</div>
1584 |                 </li>
1585 |             
1586 |                 <li>
1587 |                 <i class="icon iconfont icon-fengjing"></i>
1588 |                     <div class="name">风景</div>
1589 |                     <div class="fontclass">.icon-fengjing</div>
1590 |                 </li>
1591 |             
1592 |                 <li>
1593 |                 <i class="icon iconfont icon-guangpan"></i>
1594 |                     <div class="name">光盘</div>
1595 |                     <div class="fontclass">.icon-guangpan</div>
1596 |                 </li>
1597 |             
1598 |                 <li>
1599 |                 <i class="icon iconfont icon-geren"></i>
1600 |                     <div class="name">个人</div>
1601 |                     <div class="fontclass">.icon-geren</div>
1602 |                 </li>
1603 |             
1604 |                 <li>
1605 |                 <i class="icon iconfont icon-gengduo-2"></i>
1606 |                     <div class="name">更多</div>
1607 |                     <div class="fontclass">.icon-gengduo-2</div>
1608 |                 </li>
1609 |             
1610 |                 <li>
1611 |                 <i class="icon iconfont icon-lingsheng"></i>
1612 |                     <div class="name">铃声</div>
1613 |                     <div class="fontclass">.icon-lingsheng</div>
1614 |                 </li>
1615 |             
1616 |                 <li>
1617 |                 <i class="icon iconfont icon-jia"></i>
1618 |                     <div class="name">加</div>
1619 |                     <div class="fontclass">.icon-jia</div>
1620 |                 </li>
1621 |             
1622 |                 <li>
1623 |                 <i class="icon iconfont icon-lanya"></i>
1624 |                     <div class="name">蓝牙</div>
1625 |                     <div class="fontclass">.icon-lanya</div>
1626 |                 </li>
1627 |             
1628 |                 <li>
1629 |                 <i class="icon iconfont icon-nv"></i>
1630 |                     <div class="name">女</div>
1631 |                     <div class="fontclass">.icon-nv</div>
1632 |                 </li>
1633 |             
1634 |                 <li>
1635 |                 <i class="icon iconfont icon-nan"></i>
1636 |                     <div class="name">男</div>
1637 |                     <div class="fontclass">.icon-nan</div>
1638 |                 </li>
1639 |             
1640 |                 <li>
1641 |                 <i class="icon iconfont icon-shezhi1"></i>
1642 |                     <div class="name">设置</div>
1643 |                     <div class="fontclass">.icon-shezhi1</div>
1644 |                 </li>
1645 |             
1646 |                 <li>
1647 |                 <i class="icon iconfont icon-shipin"></i>
1648 |                     <div class="name">视频</div>
1649 |                     <div class="fontclass">.icon-shipin</div>
1650 |                 </li>
1651 |             
1652 |                 <li>
1653 |                 <i class="icon iconfont icon-shoucang1"></i>
1654 |                     <div class="name">收藏</div>
1655 |                     <div class="fontclass">.icon-shoucang1</div>
1656 |                 </li>
1657 |             
1658 |                 <li>
1659 |                 <i class="icon iconfont icon-sousuo"></i>
1660 |                     <div class="name">搜索</div>
1661 |                     <div class="fontclass">.icon-sousuo</div>
1662 |                 </li>
1663 |             
1664 |                 <li>
1665 |                 <i class="icon iconfont icon-suo"></i>
1666 |                     <div class="name">锁</div>
1667 |                     <div class="fontclass">.icon-suo</div>
1668 |                 </li>
1669 |             
1670 |                 <li>
1671 |                 <i class="icon iconfont icon-xiala"></i>
1672 |                     <div class="name">下拉</div>
1673 |                     <div class="fontclass">.icon-xiala</div>
1674 |                 </li>
1675 |             
1676 |                 <li>
1677 |                 <i class="icon iconfont icon-tongzhi"></i>
1678 |                     <div class="name">通知</div>
1679 |                     <div class="fontclass">.icon-tongzhi</div>
1680 |                 </li>
1681 |             
1682 |                 <li>
1683 |                 <i class="icon iconfont icon-xiayishou"></i>
1684 |                     <div class="name">下一首</div>
1685 |                     <div class="fontclass">.icon-xiayishou</div>
1686 |                 </li>
1687 |             
1688 |                 <li>
1689 |                 <i class="icon iconfont icon-xiazai"></i>
1690 |                     <div class="name">下载</div>
1691 |                     <div class="fontclass">.icon-xiazai</div>
1692 |                 </li>
1693 |             
1694 |                 <li>
1695 |                 <i class="icon iconfont icon-xinxi"></i>
1696 |                     <div class="name">信息</div>
1697 |                     <div class="fontclass">.icon-xinxi</div>
1698 |                 </li>
1699 |             
1700 |                 <li>
1701 |                 <i class="icon iconfont icon-yuyin"></i>
1702 |                     <div class="name">语音</div>
1703 |                     <div class="fontclass">.icon-yuyin</div>
1704 |                 </li>
1705 |             
1706 |                 <li>
1707 |                 <i class="icon iconfont icon-zhuanhuan"></i>
1708 |                     <div class="name">转换</div>
1709 |                     <div class="fontclass">.icon-zhuanhuan</div>
1710 |                 </li>
1711 |             
1712 |                 <li>
1713 |                 <i class="icon iconfont icon-zuobiao"></i>
1714 |                     <div class="name">坐标</div>
1715 |                     <div class="fontclass">.icon-zuobiao</div>
1716 |                 </li>
1717 |             
1718 |                 <li>
1719 |                 <i class="icon iconfont icon-shengyin"></i>
1720 |                     <div class="name">声音</div>
1721 |                     <div class="fontclass">.icon-shengyin</div>
1722 |                 </li>
1723 |             
1724 |                 <li>
1725 |                 <i class="icon iconfont icon-shoucang2"></i>
1726 |                     <div class="name">收藏</div>
1727 |                     <div class="fontclass">.icon-shoucang2</div>
1728 |                 </li>
1729 |             
1730 |                 <li>
1731 |                 <i class="icon iconfont icon-fuzhi"></i>
1732 |                     <div class="name">复制</div>
1733 |                     <div class="fontclass">.icon-fuzhi</div>
1734 |                 </li>
1735 |             
1736 |                 <li>
1737 |                 <i class="icon iconfont icon-anquanshezhi"></i>
1738 |                     <div class="name">安全设置</div>
1739 |                     <div class="fontclass">.icon-anquanshezhi</div>
1740 |                 </li>
1741 |             
1742 |                 <li>
1743 |                 <i class="icon iconfont icon-shouji1"></i>
1744 |                     <div class="name">手机</div>
1745 |                     <div class="fontclass">.icon-shouji1</div>
1746 |                 </li>
1747 |             
1748 |                 <li>
1749 |                 <i class="icon iconfont icon-tuichu"></i>
1750 |                     <div class="name">退出</div>
1751 |                     <div class="fontclass">.icon-tuichu</div>
1752 |                 </li>
1753 |             
1754 |                 <li>
1755 |                 <i class="icon iconfont icon-xiaoxi2"></i>
1756 |                     <div class="name">消息</div>
1757 |                     <div class="fontclass">.icon-xiaoxi2</div>
1758 |                 </li>
1759 |             
1760 |                 <li>
1761 |                 <i class="icon iconfont icon-gongzuojilu"></i>
1762 |                     <div class="name">工作记录</div>
1763 |                     <div class="fontclass">.icon-gongzuojilu</div>
1764 |                 </li>
1765 |             
1766 |                 <li>
1767 |                 <i class="icon iconfont icon-faxiandingdan"></i>
1768 |                     <div class="name">发现订单</div>
1769 |                     <div class="fontclass">.icon-faxiandingdan</div>
1770 |                 </li>
1771 |             
1772 |                 <li>
1773 |                 <i class="icon iconfont icon-gerenxinxi"></i>
1774 |                     <div class="name">个人信息</div>
1775 |                     <div class="fontclass">.icon-gerenxinxi</div>
1776 |                 </li>
1777 |             
1778 |                 <li>
1779 |                 <i class="icon iconfont icon-wodedingdan"></i>
1780 |                     <div class="name">我的订单</div>
1781 |                     <div class="fontclass">.icon-wodedingdan</div>
1782 |                 </li>
1783 |             
1784 |                 <li>
1785 |                 <i class="icon iconfont icon-tijiaodingdan"></i>
1786 |                     <div class="name">提交订单</div>
1787 |                     <div class="fontclass">.icon-tijiaodingdan</div>
1788 |                 </li>
1789 |             
1790 |                 <li>
1791 |                 <i class="icon iconfont icon-querenwancheng"></i>
1792 |                     <div class="name">确认完成</div>
1793 |                     <div class="fontclass">.icon-querenwancheng</div>
1794 |                 </li>
1795 |             
1796 |                 <li>
1797 |                 <i class="icon iconfont icon-yibangding"></i>
1798 |                     <div class="name">已绑定</div>
1799 |                     <div class="fontclass">.icon-yibangding</div>
1800 |                 </li>
1801 |             
1802 |                 <li>
1803 |                 <i class="icon iconfont icon-weibangding"></i>
1804 |                     <div class="name">未绑定</div>
1805 |                     <div class="fontclass">.icon-weibangding</div>
1806 |                 </li>
1807 |             
1808 |                 <li>
1809 |                 <i class="icon iconfont icon-baocun"></i>
1810 |                     <div class="name">保存</div>
1811 |                     <div class="fontclass">.icon-baocun</div>
1812 |                 </li>
1813 |             
1814 |                 <li>
1815 |                 <i class="icon iconfont icon-quxiao"></i>
1816 |                     <div class="name">取消</div>
1817 |                     <div class="fontclass">.icon-quxiao</div>
1818 |                 </li>
1819 |             
1820 |                 <li>
1821 |                 <i class="icon iconfont icon-tianjia"></i>
1822 |                     <div class="name">添加</div>
1823 |                     <div class="fontclass">.icon-tianjia</div>
1824 |                 </li>
1825 |             
1826 |                 <li>
1827 |                 <i class="icon iconfont icon-bianji1"></i>
1828 |                     <div class="name">编辑</div>
1829 |                     <div class="fontclass">.icon-bianji1</div>
1830 |                 </li>
1831 |             
1832 |                 <li>
1833 |                 <i class="icon iconfont icon-riqixuanze"></i>
1834 |                     <div class="name">日期选择</div>
1835 |                     <div class="fontclass">.icon-riqixuanze</div>
1836 |                 </li>
1837 |             
1838 |                 <li>
1839 |                 <i class="icon iconfont icon-shanchu"></i>
1840 |                     <div class="name">删除</div>
1841 |                     <div class="fontclass">.icon-shanchu</div>
1842 |                 </li>
1843 |             
1844 |                 <li>
1845 |                 <i class="icon iconfont icon-dizhi-01"></i>
1846 |                     <div class="name">地址</div>
1847 |                     <div class="fontclass">.icon-dizhi-01</div>
1848 |                 </li>
1849 |             
1850 |                 <li>
1851 |                 <i class="icon iconfont icon-youjiantou-01"></i>
1852 |                     <div class="name">右箭头</div>
1853 |                     <div class="fontclass">.icon-youjiantou-01</div>
1854 |                 </li>
1855 |             
1856 |                 <li>
1857 |                 <i class="icon iconfont icon-youhuiquan-01"></i>
1858 |                     <div class="name">优惠券</div>
1859 |                     <div class="fontclass">.icon-youhuiquan-01</div>
1860 |                 </li>
1861 |             
1862 |                 <li>
1863 |                 <i class="icon iconfont icon-daishouhuo-01"></i>
1864 |                     <div class="name">待收货</div>
1865 |                     <div class="fontclass">.icon-daishouhuo-01</div>
1866 |                 </li>
1867 |             
1868 |                 <li>
1869 |                 <i class="icon iconfont icon-quanbudingdan-01"></i>
1870 |                     <div class="name">全部订单</div>
1871 |                     <div class="fontclass">.icon-quanbudingdan-01</div>
1872 |                 </li>
1873 |             
1874 |                 <li>
1875 |                 <i class="icon iconfont icon-youhuiquan-geren-01"></i>
1876 |                     <div class="name">优惠券-个人</div>
1877 |                     <div class="fontclass">.icon-youhuiquan-geren-01</div>
1878 |                 </li>
1879 |             
1880 |                 <li>
1881 |                 <i class="icon iconfont icon-shanchu-01"></i>
1882 |                     <div class="name">删除</div>
1883 |                     <div class="fontclass">.icon-shanchu-01</div>
1884 |                 </li>
1885 |             
1886 |                 <li>
1887 |                 <i class="icon iconfont icon-fangdajing"></i>
1888 |                     <div class="name">放大镜</div>
1889 |                     <div class="fontclass">.icon-fangdajing</div>
1890 |                 </li>
1891 |             
1892 |                 <li>
1893 |                 <i class="icon iconfont icon-guanbi-01"></i>
1894 |                     <div class="name">关闭</div>
1895 |                     <div class="fontclass">.icon-guanbi-01</div>
1896 |                 </li>
1897 |             
1898 |                 <li>
1899 |                 <i class="icon iconfont icon-meiyoudingdan-01"></i>
1900 |                     <div class="name">没有订单</div>
1901 |                     <div class="fontclass">.icon-meiyoudingdan-01</div>
1902 |                 </li>
1903 |             
1904 |                 <li>
1905 |                 <i class="icon iconfont icon-xuanzhong-01"></i>
1906 |                     <div class="name">选中</div>
1907 |                     <div class="fontclass">.icon-xuanzhong-01</div>
1908 |                 </li>
1909 |             
1910 |                 <li>
1911 |                 <i class="icon iconfont icon-weixuanzhong-01"></i>
1912 |                     <div class="name">未选中</div>
1913 |                     <div class="fontclass">.icon-weixuanzhong-01</div>
1914 |                 </li>
1915 |             
1916 |                 <li>
1917 |                 <i class="icon iconfont icon-zhifu-01"></i>
1918 |                     <div class="name">支付</div>
1919 |                     <div class="fontclass">.icon-zhifu-01</div>
1920 |                 </li>
1921 |             
1922 |                 <li>
1923 |                 <i class="icon iconfont icon-zuojiantou-01"></i>
1924 |                     <div class="name">左箭头</div>
1925 |                     <div class="fontclass">.icon-zuojiantou-01</div>
1926 |                 </li>
1927 |             
1928 |                 <li>
1929 |                 <i class="icon iconfont icon-gengduo-01"></i>
1930 |                     <div class="name">更多</div>
1931 |                     <div class="fontclass">.icon-gengduo-01</div>
1932 |                 </li>
1933 |             
1934 |         </ul>
1935 | 
1936 |         <h2 id="font-class-">font-class引用</h2>
1937 |         <hr>
1938 | 
1939 |         <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
1940 |         <p>与unicode使用方式相比，具有如下特点：</p>
1941 |         <ul>
1942 |         <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
1943 |         <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
1944 |         <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
1945 |         <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
1946 |         </ul>
1947 |         <p>使用步骤如下：</p>
1948 |         <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
1949 | 
1950 | 
1951 |         <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
1952 |         <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
1953 |         <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
1954 |         <blockquote>
1955 |         <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
1956 |         </blockquote>
1957 |     </div>
1958 | </body>
1959 | </html>
1960 | 


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