上传代码

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -0,0 +1,5 @@
+## 运行
+```bash
+# 启动web服务
+npm run start
+```

component/adModule.html

@@ -0,0 +1,78 @@
+<div id="adModule" style="width:150px;height:432px;z-index: 1000">
+   <!-- <img src="../images/position.png" alt=""> -->
+</div>
+<script>
+    var Rimifon = {
+        "Ads": new Object,
+        "NewFloatAd": function (imgUrl, strLink) {
+            var ad = document.getElementById("adModule");
+            ad.DirV = true;
+            ad.DirH = true;
+            ad.AutoMove = true;
+            ad.Image = new Image;
+            ad.Seed = Math.random();
+            ad.Timer = setInterval("Rimifon.Float(" + ad.Seed + ")", 50);
+            this.Ads[ad.Seed] = ad;
+            ad.Image.Parent = ad;
+            ad.style.position = "fixed";
+            ad.style.left = 0;
+            ad.style.top = 0;
+            ad.Image.src = imgUrl;
+            ad.onmouseover = function () { this.AutoMove = false; }
+            ad.onmouseout = function () { this.AutoMove = true; }
+            var close = document.createElement("a");
+            close.setAttribute("class", "closedd");
+            ad.setAttribute("class", "closed_box");
+            var countMessage = document.createElement('p');
+            countMessage.setAttribute("class", 'jsMessage');
+            if (strLink) {
+                ad.href = strLink;
+                ad.Image.border = 0;
+                ad.target = "_blank";
+            }
+            ad.appendChild(ad.Image);
+            ad.appendChild(close);
+            ad.appendChild(countMessage);
+            close.append('x');
+            document.body.appendChild(ad);
+            return ad;
+        },
+        "Float": function (floatId) {
+            var ad = this.Ads[floatId];
+            if (ad.AutoMove) {
+                var curLeft = parseInt(ad.style.left);
+                var curTop = parseInt(ad.style.top);
+                if (ad.offsetWidth + curLeft > document.documentElement.clientWidth + document.body.scrollLeft - 1) {
+                    curLeft = document.body.scrollLeft + document.documentElement.clientWidth - ad.offsetWidth;
+                    ad.DirH = false;
+                }
+                if (ad.offsetHeight + curTop > document.documentElement.clientHeight + document.body.scrollTop - 1) {
+                    curTop = document.body.scrollTop + document.documentElement.clientHeight - ad.offsetHeight;
+                    ad.DirV = false;
+                }
+                if (curLeft < document.body.scrollLeft) {
+                    curLeft = document.body.scrollLeft;
+                    ad.DirH = true;
+                }
+                if (curTop < document.body.scrollTop) {
+                    curTop = document.body.scrollTop;
+                    ad.DirV = true;
+                }
+                ad.style.left = curLeft + (ad.DirH ? 3 : - 3) + "px";
+                ad.style.top = curTop + (ad.DirV ? 3 : - 3) + "px";
+            }
+        }
+    } 
+</script>
+<script>
+    var ad = Rimifon.NewFloatAd("/images/szxy.jpg");
+    ad.style.left = 500;
+    ad.style.top = 456;
+    $(".closed_box").on("click", function () {
+        window.open("http://www.creditprt.org.cn/index/center/code/NjMxLzc5My8wLzA="); 
+    })
+
+    $(".closedd").on("click", function () {
+        $(this).closest("div").remove();
+    })
+</script>

component/footer.html

@@ -0,0 +1,42 @@
+<div class="footer-content">
+    <div class="footer-link">
+        <span>政府链接</span>
+        <ul>
+            <li><a target="_blank" href="http://www.gov.cn/">中国政府网</a></li>
+            <li><a target="_blank" href="http://www.shanxigov.cn/">山西新闻门户网站</a></li>
+            <li><a target="_blank" href="http://www.cin.net.cn/">全国建设信息网</a></li>
+            <li><a target="_blank" href="http://www.cebpubservice.com/">中国招标投标公共服务平台</a></li>
+            <li><a target="_blank" href="http://www.sxbid.com.cn/f/">山西招投标网</a></li>
+            <li><a target="_blank" href="http://www.ccgp-shanxi.gov.cn/">中国山西政府采购网</a></li>
+            <li><a target="_blank" href="http://www.caigou2003.com/">政府采购信息网</a></li>
+            <li><a target="_blank" href="http://www.okcis.cn/weiyizhidingzbpt/s9z3xc2509941">中国招标采购导航网</a></li>
+            <li><a target="_blank" href="http://www.buhue.com/">中国电子商务协会</a></li>
+            <li><a target="_blank" href="http://www.shanxieic.gov.cn/wnzz/index.aspx?wnzz=486">大数据产业办公室</a></li>
+            <li><a target="_blank" href="http://rst.shanxi.gov.cn/">山西省人力资源和社会保障厅</a></li>
+            <li><a target="_blank" href="http://rsj.taiyuan.gov.cn/">太原市人力资源和社会保障局</a></li>
+            <li><a target="_blank" href="http://sbj.cnipa.gov.cn/">国家知识产权局商标局</a></li>
+        </ul>
+    </div>
+    <div class="footer-complaint">
+        <span>投诉方式</span>
+        <ul>
+            <li><a href="/page_complaint/list1.html" target="_blank">客户投诉管理制度</a></li>
+            <li><a href="/page_complaint/list2.html" target="_blank">客户投诉处理表</a></li>
+            <li><a href="/page_complaint/list3.html" target="_blank">投诉处理流程（试行）</a></li>
+            <li><a href="/page_complaint/list4.html" target="_blank">企业诚信经营承诺书</a></li>
+        </ul>
+    </div>
+    <div class="footer-contact">
+        <span>联系方式</span>
+        <ul>
+            <li>地址： 山西综改示范区太原学府园区南中环街402号数码港B座</li>
+            <li>电话： 400-609-9105</li>
+            <li>传真： 0351-2713669</li>
+            <li>邮箱： cloudwood@eqbidding.com</li>
+        </ul>
+    </div>
+    <div style="text-align: center;">
+	    <a href="http://www.beian.miit.gov.cn/" target="_blank" style="color: #ccc;">晋ICP 备17010138号</a>
+	    <a href="http://www.eqbidding.com/" style="color: #ccc;">云买卖电子综合交易平台</a>
+	</div>
+</div>

component/gulpfile.js

@@ -0,0 +1,56 @@
+'use strict';
+var gulp = require('gulp');//gulp核心
+/*var sass = require('gulp-sass');//编译sass*/
+var less = require('gulp-less');//编译less
+var mincss = require('gulp-clean-css');//压缩css
+var minjs = require('gulp-uglify');//压缩JS
+var rename = require('gulp-rename');//文件重命名
+var watch = require('gulp-watch');//监控文件
+var livereload = require('gulp-livereload');//热更新
+var plumber = require('gulp-plumber');//提示错误并忽略
+/*路径*/
+var lessPath = "./less/*.less";
+var cssDestPath = "./css";
+var jsPath = "./jssrc/*.js";
+var jsDestPath = "./js";
+
+
+//编译sass
+gulp.task('less',function(){
+    return gulp.src(lessPath)
+        .pipe(plumber())
+        .pipe(less())
+        .pipe(mincss())
+        .pipe(rename({
+            suffix: ".min"
+        }))
+        .pipe(gulp.dest(cssDestPath))
+        .pipe(livereload());
+});
+
+//压缩JS
+gulp.task('javascript',function(){
+    return gulp.src(jsPath)
+        .pipe(plumber())
+        .pipe(minjs())
+        .pipe(rename({
+            suffix:".min"
+        }))
+        .pipe(gulp.dest(jsDestPath))
+        .pipe(livereload())
+})
+//监测文件
+gulp.task('watch',function(){
+    gulp.watch(lessPath,gulp.series("less"));
+    gulp.watch(jsPath,gulp.series("javascript"));
+})
+
+
+// gulp.task('default',function(){
+//     livereload.listen();
+//     gulp.series(gulp.parallel("less","javascript","watch"));
+//     // gulp.run("less","javascript","watch");
+// });
+gulp.task('default',gulp.parallel(function(){
+    livereload.listen();
+},"less","javascript","watch"));

component/header.html

@@ -0,0 +1,212 @@
+<div class="header-nav">
+    <div class="header-nav-content-box">
+        <div>
+            <a href="javascript:;" id="daili">
+                <img src="../images/agent_rule.png" alt="">
+            </a>
+        </div>
+        <div class="header-first-box">
+            <div class="header-nav-first">
+                <div class="nav-first-left">
+                    <div class="city-menu">
+                        <i class="iconfont">&#xe62e;</i>
+                        <span class="nav-city">太原</span>
+                        <a href="javascript:void(0);">[切换]</a>
+                    </div>
+                </div>
+                <div class="nav-first-right">
+                    <ul>
+                        <li>
+                            <a href="javascript:void(0);" class="phone-number" target="_blank" style="pointer-events: none;">
+                                <i class="iconfont icon-phone">&#xe632;</i> 咨询热线：
+                                <span>400-609-9105</span> (工作日8:30-17:30)
+                            </a>
+                        </li>
+                        <li>
+                            <a href="/component/help.html" target="_blank">
+                                常见问题
+                            </a>
+                        </li>
+                        <li>
+                           <!--<a href="http://help.eqbidding.com/?p=163" target="_blank">
+                                CA服务
+                            </a>-->
+                            <a href="javascript:void(0);"  target="_blank" >
+                                 CA服务
+                            </a>
+                            <span></span>
+                        </li>
+                        <li>
+                            <a href="/web-expert/login.html" target="_blank">
+                                专家专区
+                            </a>
+                            <!--<i class="jiantou"></i>-->
+                            <span></span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="header-last-box">
+            <div class="header-nav-content">
+                <div class="header-logo">
+                    <a href="javascript:void(0);">
+                        <img src="/images/logo.png" alt="">
+                    </a>
+                </div>
+                <div class="header-content-center">
+                    <ul>
+                        <li>
+                            <a href="/index.html">
+                                首页
+                                <span ></span>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="/page_bidding_information/list.html" target="_blank">
+                                招标信息
+                                <span></span>
+                                <!--<i></i>-->
+                            </a>
+                        </li>
+                        <li>
+                            <a href="/page_auction_notice/list.html" target="_blank">
+                                拍卖公告
+                                <span></span>
+                                <!--<i></i>-->
+                            </a>
+                        </li>
+                        <li>
+                            <a href="http://www.creditprt.org.cn/index/center/code/NjMxLzc5My8wLzA=" target="_blank">
+                                数字信用
+                                <span></span>
+                                <!--<i></i>-->
+                            </a>
+                        </li>
+                        <li>
+                            <a href="/page_financial/list.html" target="_blank">
+                                金融
+                                <span></span>
+                                <!--<i></i>-->
+                            </a>
+                        </li>
+                        <li>
+                            <a href="/page_settlein/list.html" target="_blank">
+                                入驻机构
+                                <span></span>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="/page_news/list.html" target="_blank">
+                                新闻动态
+                                <span></span>
+                            </a>
+                        </li>
+                        <li class="drop-down-but" id="download">
+                            <a href="/page_donwload/list.html" target="_blank">
+                                下载
+                                <span></span>
+                                <i></i>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="/page_about_us/list.html" target="_blank">
+                                关于我们
+                                <span></span>
+                            </a>
+                        </li>
+                        <!--<li>-->
+                        <!--<a href="http://www.eqbidding.com/back2/frame/frame.htm" target="_blank">-->
+                        <!--个人中心-->
+                        <!--<span></span>-->
+                        <!--</a>-->
+                        <!--</li>-->
+                    </ul>
+                </div>
+                <div class="header-content-search">
+                    <form action="">
+                        <div>
+                            <input type="text" placeholder="搜索内容">
+                            <i class="iconfont">&#xe60b;</i>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+        <div class="drop-down-menu">
+            <!-- <div class="zbxx">
+                <ul>
+                    <li><a href="http://www.eqbidding.com/nx/n/list/招标公告.htm" target="_blank">
+                            <img src="/images/zbgg.png" alt="">
+                            <i>招标公告</i>
+                        </a></li>
+                    <li><a href="http://www.eqbidding.com/nx/n/list/候选人公示.htm" target="_blank">
+                            <img src="/images/zbhxr.png" alt="">
+                            <i>中标候选人公示</i>
+                        </a></li>
+                    <li><a href="http://www.eqbidding.com/nx/n/list/中标公示.htm" target="_blank">
+                            <img src="/images/zbjg.png" alt="">
+                            <i>中标结果公告</i>
+                        </a></li>
+                </ul>
+            </div> -->
+            <div class="download">
+                <ul>
+                    <li>
+                        <a href="http://res.eqbidding.com/bid-editor.exe" target="_blank" title="为保证您正常使用交易平台，参与招投标活动的代理机构、投标单位，若未安装招投标文件编辑器程序请在此处下载安装。">
+                            <img src="/images/project_1.png" alt="">
+                            <i>招投标文件编辑器下载</i>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="/page_donwload/list.html" target="_blank" title="为方便您更有效的了解招投标过程、相关环节操作步骤及注意事项，请点击下载对应操作手册。">
+                            <img src="/images/office.png" alt="">
+                            <i>操作手册下载</i>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="http://res.eqbidding.com/weboffice.exe" target="_blank" title="为保证您正常使用交易平台，若未安装签章软件请在此处下载安装。">
+                            <img src="/images/sign_1.png" alt="">
+                            <i>签章系统下载</i>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="http://res.eqbidding.com/Sxcav4007.exe" target="_blank" title="为保证您正常使用交易平台,认证方式为数字证书认证（CA认证）的客户，若未安装USBKEY驱动程序请在此处下载安装。">
+                            <img src="/images/uKey.png" alt="">
+                            <i>数字证书下载</i>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+<script src="/jssrc/common.js"></script>
+<script src="/component/js/header.min.js?v=1.0.2"></script>
+<script type="text/javascript">
+        document.getElementById("daili").onclick = function() {
+        $.ajax({
+            url: getServerHttp() + '/getLoginUser',
+            type: 'post',
+            dataType: 'json',
+            success: function(data) {
+                console.log(data)
+                if (data.result.success === "true") {
+                    console.log('已经登录')
+                    location.href = "http://res.eqbidding.com/doc/GBT38357-2019招标代理服务规范.pdf"
+                } else {
+                    console.log('未登录')
+
+                    if (confirm("请登录后下载")) {
+                        location.href = "http://www.eqbidding.com/web-back/login_back.html"
+                    } else {
+
+                    }
+                }
+            },
+            error: function() {
+                console.log('请求错误')
+            }
+        });
+    }
+</script>

component/help.html

@@ -0,0 +1,188 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">-->
+    <meta name="renderer" content="webkit">
+    <meta name="description" content="山西云得物网络科技有限公司官方网站,云得物,云买卖,电子交易,电子招标">
+    <meta name="keywords" content="云得物,云买卖,电子交易,电子招标">
+    <meta name="x5-fullscreen" content="true">
+    <meta name="full-screen" content="yes">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Cache-Control" content="no-cache">
+    <meta name="apple-mobile-web-app-capable" content="no" />
+    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
+    <title>公司新闻-云买卖交易平台</title>
+    <link rel="shortcut icon" href="http://res.eqbidding.com/img/favicon.ico" type="image/x-icon" />
+    <link rel="stylesheet" href="../css/topnav.min.css">
+    <link rel="stylesheet" href="../css/footer.min.css">
+    <script src="../js/jquery.min.js?v=1.11.3"></script>
+    <script src="../js/load.min.js"></script>
+    <script src="/jssrc/common.js"></script>
+    <style>
+        @font-face {
+            font-family: 'iconfont';
+            src: url('../iconfont/iconfont.eot');
+            src: url('../iconfont/iconfont.eot?#iefix') format('embedded-opentype'), url('../iconfont/iconfont.woff') format('woff'), url('../iconfont/iconfont.ttf') format('truetype'), url('../iconfont/iconfont.svg#iconfont') format('svg');
+        }
+        
+        .iconfont {
+            font-family: "iconfont" !important;
+            font-size: 14px;
+            font-style: normal;
+            -webkit-font-smoothing: antialiased;
+            -webkit-text-stroke-width: 0.2px;
+            -moz-osx-font-smoothing: grayscale;
+        }
+        
+        * {
+            padding: 0;
+            margin: 0;
+            list-style: none;
+            text-decoration: none;
+        }
+        
+        html {
+            background: #f2f2f2;
+        }
+        
+        .news-content {
+            width: 960px;
+            padding: 20px;
+            margin: 50px auto;
+            background: #fff;
+        }
+        
+        h1 {
+            font-size: 46px;
+        }
+        
+        h2 {
+            font-size: 34px;
+        }
+        
+        h1,
+        h2 {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        
+        h3 {
+            margin-bottom: 20px;
+            font-size: 20px;
+        }
+        
+        p {
+            font-size: 20px;
+            margin-bottom: 20px;
+        }
+        
+        p span {
+            font-weight: 600;
+        }
+    </style>
+</head>
+
+<body>
+    <!--导航-->
+    <div class="header" data-selectIndex="0"></div>
+    <!--新闻栏-->
+    <div class="news-content">
+        <h1>常见问题</h1>
+        <h2>第一部分 基础操作部分</h2>
+        <h3>1、在使用云买卖平台需要用什么浏览器？</h3>
+        <p>
+            <span>答</span>：您好，对电脑环境的要求为：系统 win7，64 位，IE11 浏览器，或者 360 浏览器调选为兼容模式。
+        </p>
+        <h3>2、注册帐号后显示正在审核？</h3>
+        <p>
+            <span>答</span>：您好，帐号审核理论时长 4 小时左右，如有特殊需求请与客服联系。
+        </p>
+        <h3>3、注册后账号密码登不上？</h3>
+        <p>
+            <span>答</span>：您好，您先确认一下大小写输入是否正确，或者进入登录页面，在登录页面下方点击找回密码，按提示重新设置您的密码。
+        </p>
+        <h3>4、我需要参加山西省的投标 ，在哪儿办理CA</h3>
+        <p>
+            <span>答</span>：您好，您需要准备相关的身份证明资料和填各类表格等，具体办理的流程在我公司网站首页的“CA 服务”中均有详细说明，我公司为了方便客户，提供一站式的“CA 服务”，如您有需要可随时与平台客服联系。
+        </p>
+        <h3>5、（投标）单位已有办理好的CA ，现在是否需要重新办理？</h3>
+        <p>
+            <span>答</span>：您好，山西 CA 对与山西省招标投标公共服务平台对接的交易平台通用，不需要重新办理。
+        </p>
+        <h3>6、CA证书无法使用，提示“key未与任何机构绑定，无法登录。”</h3>
+        <p>
+            <span>答</span>：您好，办理的 CA 证书需要与注册帐号进行绑定。您使用账号密码登录云买卖平台，进行绑定 key。流程为：登陆网站—个人中心—绑定 USBkey—输入 key 的密码。具体操作流程可在官网首页观看操作视频。
+        </p>
+        <h3>7、为什么我的 key 绑定不了？</h3>
+        <p>
+            <span>答</span>：您好，目前只有企业 Key 需要绑定，法人的不需要绑就可以使用。
+        </p>
+        <h2>第二部分 招投标文件编辑使用部分</h2>
+        <h3>1、投标文件在加密上传过程中出现加密不成功，怎么解决？</h3>
+        <p>
+            <span>答</span>：请您检查所使用的key是否与帐号绑定的key是同一个？由于CA证书每年都需要续费，如果不在有效期内也会出现无法加密的现象。若需检查电脑环境，请添加主页显示的客服 QQ，技术人员通过远程协助投标单位解决相关问题。
+        </p>
+        <h3>2、（投标） 如何下载工程量清单和图纸？</h3>
+        <p>
+            <span>答</span>：请正常下载招投标文件编辑器，登录帐号后可以查看招标文件的附件，附件中有工程量清单和图纸。
+        </p>
+        <h3>3、用电子签章时，为何法人不能签？</h3>
+        <p>
+            <span>答</span>：同时插入两把 CA 时，一般电脑的 U 口只识别第一个，因此需要逐个完成。
+        </p>
+        <h3>4、工程量清单可以不上传吗？</h3>
+        <p>
+            <span>答</span>：请您按招标文件的规定执行，具体的投标事宜请咨询招标人。
+        </p>
+        <h3>5、对工程量清单的 EXCEL 表格有什么要求？</h3>
+        <p>
+            <span>答</span>：上传 EXCEL 表格即可，由于技术规范规定只能上传一个 EXCEL 文件，如您有多个表格，请在一个文件内直接填加工作表后再上传。
+        </p>
+        <h3>6、在招投标文件编辑器里面签章，签章后如何保存在本地？</h3>
+        <p>
+            <span>答</span>：您好，文件保存时选择“保存为本地 PDF 文件”即可。
+        </p>
+        <h3>7、招标/ 投标 文件 的 内容出现错误，如何修改？</h3>
+        <p>
+            <span>答</span>：您好，您将编辑完成的新文件直接再次上传即可。
+        </p>
+        <h3>8、招标文件是否是标准文件？</h3>
+        <p>
+            <span>答</span>：您好，招标文件是按规范文件执行的，如您对内容有疑问可与代理机构联系咨询。
+        </p>
+        <h3>9、为什么在招投标文件编辑器里无法正常上传文件？</h3>
+        <p>
+            <span>答</span>：请将文件转换为 PDF 格式，再进行上传即可。
+        </p>
+        <h2>第三部分 财务部分</h2>
+        <h3>1、平台使用费的发票是需要邮寄吗？如果要邮寄，哪方出邮寄费？</h3>
+        <p>
+            <span>答</span>：您好，云买卖平台使用费开具的是电子发票，会发送您预留的邮箱中。
+        </p>
+        <h3>2、使用平台如何收费？</h3>
+        <p>
+            <span>答</span>：平台使用按次收费，会不定时的推出优惠活动，详情请与客服联系。
+        </p>
+    </div>
+    <!--底部栏-->
+    <div class="footer"></div>
+</body>
+<script>
+    $(function() {
+        $.ajax({
+            url: '/nx/article/problem.htm',
+            type: 'get',
+            success: function(data) {
+                var data = ajaxDataParames(data);
+                data = data.split("&nbsp;").join("");
+                data = JSON.parse(data);
+                $('.news-content').html(data.contents)
+            }
+        });
+    });
+</script>
+
+</html>

component/jssrc/header.js

@@ -0,0 +1,112 @@
+$(function() {
+    // 判断用户现在使用的是什么平台
+    $.ajax({
+        url: getServerHttp() + '/getLoginUser',
+        type: 'post',
+        dataType: 'json',
+        success: function(data) {
+            var data = ajaxDataParames(data);
+            if (data.success === "true" && data.loginUser.name) {
+                var name = data.loginUser.name ? data.loginUser.name : '游客';
+                var dom = '<li><a href="/web-back/view/frame/frame.html" target="_blank">' + name + '</a><span></span></li>';
+                $('.nav-first-right ul').append(dom)
+            } else if (data.success === "false" || !data.loginUser.name) {
+                var dom = '<li><a href="/web-back/view/register/register.html" target="_blank">注册</a><span></span></li><li><a href="/web-back/login_back.html" target="_blank" style="color:#e22">登录</a></li>';
+                $('.nav-first-right ul').append(dom)
+            }
+        },
+        error: function() {
+            console.log('请求错误')
+        }
+    });
+    //功能
+    $.fn.extend({
+        //顶部浮动
+        topNavPosition: function() {
+            var _this = this;
+            var _father = _this.parent();
+            var _last = _this.find(".header-last-box");
+            var _animate = true;
+            $(window).scroll(function() {
+                if ($(window).scrollTop() > 35 && _animate == true) {
+                    _father.animate({
+                        height: "60px"
+                    });
+                    _this.css({
+                        "box-shadow": "1px 1px 30px #999"
+                    })
+                    _this.animate({
+                        top: "-115px"
+                    });
+                    _last.animate({
+                        height: "60px"
+                    });
+                    _animate = false;
+                }
+                if ($(window).scrollTop() == 0) {
+                    _father.animate({
+                        height: "195px"
+                    });
+                    _this.css({
+                        "box-shadow": "0px 0px 0px #999"
+                    })
+                    _this.animate({
+                        top: "0"
+                    }, 300);
+                    _last.animate({
+                        height: "80px"
+                    });
+                    _animate = true;
+                }
+            })
+        },
+        //顶部下拉菜单
+        topDropDownMwnu: function() {
+            $(this).hover(function() {
+                var _thisID = $(this).attr('id');
+                $('.drop-down-menu').css({
+                    display: 'block'
+                });
+                $('.' + _thisID).css({
+                    display: 'block'
+                }).siblings().css({
+                    display: 'none'
+                })
+            }, function() {
+                $('.drop-down-menu').css({
+                    display: 'none'
+                });
+            });
+            $('.drop-down-menu').hover(function() {
+                $('.drop-down-menu').css({
+                    display: 'block'
+                })
+            }, function() {
+                $('.drop-down-menu').css({
+                    display: 'none'
+                })
+            });
+
+        },
+        topSelectStyle: function() {
+            var navSelect = $('.header-content-center li');
+            var selectIndex = $(this).attr("data-selectIndex");
+            for (var i = 0; i < navSelect.length; i++) {
+                $(navSelect[selectIndex]).find('a').css({
+                    'color': '#0cb46a'
+                }).find('span').css({
+                    'display': 'block'
+                })
+            }
+
+        }
+    });
+
+    function topFun() {
+        $('.header-nav-content-box').topNavPosition();
+        $('.drop-down-but').topDropDownMwnu();
+        $('.header').topSelectStyle();
+    }
+    topFun();
+
+})

component/package.json

@@ -0,0 +1,26 @@
+{
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-clean-css": "^3.9.4",
+    "gulp-less": "^3.5.0",
+    "gulp-livereload": "^3.8.1",
+    "gulp-notify": "^3.2.0",
+    "gulp-plumber": "^1.2.0",
+    "gulp-rename": "^1.3.0",
+    "gulp-sass": "^4.0.1",
+    "gulp-uglify": "^3.0.0",
+    "gulp-watch": "^5.0.0"
+  },
+  "name": "testgulp",
+  "version": "1.0.0",
+  "description": "tset",
+  "main": "gulpfile.js",
+  "dependencies": {
+    "natives": "^1.1.6"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

date.json

@@ -0,0 +1,62 @@
+[
+  {
+  "title":"这里是主要文字1",
+  "subtitle":"这里是次要文字1",
+  "text":"文本一文本一文本一文本一文本一文本一文本一文本一文本一文本一文本一文本一文本一文本一文本一文本一文本一"
+},
+{
+"title":"这是主要文字2",
+"subtitle":"这里是次要文字2",
+"text":"文本二文本二文本二文本二文本二文本二文本二文本二文本二文本二文本二文本二文本二文本二文本二文本二文本二"
+},
+{
+"title":"这是主要文字3",
+"subtitle":"这里是次要文字3",
+"text":"文本三文本三文本三文本三文本三文本三文本三文本三文本三文本三文本三文本三文本三文本三文本三文本三文本三"
+},
+{
+"title":"这是主要文字4",
+"subtitle":"这里是次要文字4",
+"text":"文本四文本四文本四文本四文本四文本四文本四文本四文本四文本四文本四文本四文本四文本四文本四文本四文本四"
+},
+{
+"title":"这是主要文字5",
+"subtitle":"这里是次要文字5",
+"text":"文本五文本五文本五文本五文本五文本五文本五文本五文本五文本五文本五文本五文本五文本五文本五文本五文本五"
+},
+{
+"title":"这是主要文字6",
+"subtitle":"这里是次要文字6",
+"text":"文本六文本六文本六文本六文本六文本六文本六文本六文本六文本六文本六文本六文本六文本六文本六文本六文本六"
+},
+{
+"title":"这是主要文字7",
+"subtitle":"这里是次要文字7",
+"text":"文本七文本七文本七文本七文本七文本七文本七文本七文本七文本七文本七文本七文本七文本七文本七文本七文本七"
+},
+{
+"title":"这是主要文字8",
+"subtitle":"这里是次要文字8",
+"text":"文本八文本八文本八文本八文本八文本八文本八文本八文本八文本八文本八文本八文本八文本八文本八文本八文本八"
+},
+{
+"title":"这是主要文字9",
+"subtitle":"这里是次要文字9",
+"text":"文本九文本九文本九文本九文本九文本九文本九文本九文本九文本九文本九文本九文本九文本九文本九文本九文本九"
+},
+{
+"title":"这是主要文字10",
+"subtitle":"这里是次要文字10",
+"text":"文本十文本十文本十文本十文本十文本十文本十文本十文本十文本十文本十文本十文本十文本十文本十文本十文本十"
+},
+{
+"title":"这是主要文字11",
+"subtitle":"这里是次要文字11",
+"text":"文本十一文本十一文本十一文本十一文本十一文本十一文本十一文本十一文本十一文本十一文本十一文本十一文本十一文本十一文本十一文本十一文本十一"
+},
+{
+"title":"这里是主要文字12",
+"subtitle":"这里是次要文字12",
+"text":"文本十二文本十二文本十二文本十二文本十二文本十二文本十二文本十二文本十二文本十二文本十二文本十二文本十二文本十二文本十二文本十二文本十二"
+}
+]

gulpfile.js

@@ -0,0 +1,90 @@
+'use strict';
+var gulp = require('gulp');//gulp核心
+/*var sass = require('gulp-sass');//编译sass*/
+var less = require('gulp-less');//编译less
+var mincss = require('gulp-clean-css');//压缩css
+var minjs = require('gulp-uglify');//压缩JS
+var rename = require('gulp-rename');//文件重命名
+var watch = require('gulp-watch');//监控文件
+var livereload = require('gulp-livereload');//热更新
+var plumber = require('gulp-plumber');//提示错误并忽略
+const { series } = require('gulp');
+
+// 引入静态服务器 browser-sync 使用npm i broswer-sync -g 全局安装
+const broswer = require("browser-sync").create()
+
+/*路径*/
+var lessPath = "./less/*.less";
+var cssDestPath = "./css";
+var jsPath = "./jssrc/*.js";
+var jsDestPath = "./js";
+var projects = ['.', "page_news",
+    "component",
+    'page_about_us',
+    "page_bidding_information",
+    "page_auction_notice",
+    "page_cooperation",
+    "page_detailed",
+    "page_financial",
+    "page_donwload",
+    "page_settlein"]
+
+
+var lessTasks=[]
+var javascriptTasks=[]
+
+projects.forEach(projectName => {
+    lessTasks.push('less:'+projectName)
+    javascriptTasks.push('javascript:'+projectName)
+    //编译sass
+    gulp.task('less:'+projectName, function () {
+        return gulp.src(projectName+"/"+lessPath)
+            .pipe(plumber())
+            .pipe(less())
+            .pipe(mincss())
+            .pipe(rename({
+                suffix: ".min"
+            }))
+            .pipe(gulp.dest(projectName+"/"+cssDestPath))
+            .pipe(livereload());
+    });
+
+    //压缩JS
+    gulp.task('javascript:'+projectName, function () {
+        return gulp.src(projectName+"/"+jsPath)
+            .pipe(plumber())
+            .pipe(minjs())
+            .pipe(rename({
+                suffix: ".min"
+            }))
+            .pipe(gulp.dest(projectName+"/"+jsDestPath))
+            .pipe(livereload())
+    })
+});
+
+gulp.task('less',gulp.parallel(lessTasks))
+gulp.task('javascript',gulp.parallel(javascriptTasks))
+
+//监测文件
+gulp.task('watch', function () {
+    gulp.watch(lessPath, gulp.series("less"));
+    gulp.watch(jsPath, gulp.series("javascript"));
+})
+
+// 开启浏览服务
+gulp.task('browser', function () {
+    broswer.init({
+        server: "./",
+        port: 3000
+    })
+})
+
+// gulp.task('default',function(){
+//     livereload.listen();
+//     gulp.series(gulp.parallel("less","javascript","watch"));
+//     // gulp.run("less","javascript","watch");
+// });
+gulp.task('default', gulp.parallel(function () {
+    console.log("----------------")
+    livereload.listen();
+}, "less", "javascript", gulp.parallel("watch", "browser")));

iconfont/demo.css

@@ -0,0 +1,370 @@
+*{margin: 0;padding: 0;list-style: none;}
+/*
+KISSY CSS Reset
+理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
+2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
+3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
+特色：1. 适应中文；2. 基于最新主流浏览器。
+维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
+ */
+
+/** 清除内外边距 **/
+body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
+dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
+pre, /* text formatting elements 文本格式元素 */
+form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
+th, td /* table elements 表格元素 */ {
+  margin: 0;
+  padding: 0;
+}
+
+/** 设置默认字体 **/
+body,
+button, input, select, textarea /* for ie */ {
+  font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
+}
+h1, h2, h3, h4, h5, h6 { font-size: 100%; }
+address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
+code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
+small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
+
+/** 重置列表元素 **/
+ul, ol { list-style: none; }
+
+/** 重置文本格式元素 **/
+a { text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+
+/** 重置表单元素 **/
+legend { color: #000; } /* for ie6 */
+fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
+button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
+/* 注：optgroup 无法扶正 */
+
+/** 重置表格元素 **/
+table { border-collapse: collapse; border-spacing: 0; }
+
+/* 清除浮动 */
+.ks-clear:after, .clear:after {
+  content: '\20';
+  display: block;
+  height: 0;
+  clear: both;
+}
+.ks-clear, .clear {
+  *zoom: 1;
+}
+
+.main {
+  padding: 30px 100px;
+width: 960px;
+margin: 0 auto;
+}
+.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
+
+.helps{margin-top:40px;}
+.helps pre{
+  padding:20px;
+  margin:10px 0;
+  border:solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists{
+  width: 100% !important;
+
+}
+
+.icon_lists li{
+  float:left;
+  width: 100px;
+  height:180px;
+  text-align: center;
+  list-style: none !important;
+}
+.icon_lists .icon{
+  font-size: 42px;
+  line-height: 100px;
+  margin: 10px 0;
+  color:#333;
+  -webkit-transition: font-size 0.25s ease-out 0s;
+  -moz-transition: font-size 0.25s ease-out 0s;
+  transition: font-size 0.25s ease-out 0s;
+
+}
+.icon_lists .icon:hover{
+  font-size: 100px;
+}
+
+
+
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p,
+.markdown pre {
+  margin: 1em 0;
+}
+
+.markdown > p,
+.markdown > blockquote,
+.markdown > .highlight,
+.markdown > ol,
+.markdown > ul {
+  width: 80%;
+}
+
+.markdown ul > li {
+  list-style: circle;
+}
+
+.markdown > ul li,
+.markdown blockquote ul > li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown > ul li p,
+.markdown > ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol > li {
+  list-style: decimal;
+}
+
+.markdown > ol li,
+.markdown blockquote ol > li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown pre {
+  border-radius: 6px;
+  background: #f7f7f7;
+  padding: 20px;
+}
+
+.markdown pre code {
+  border: none;
+  background: #f7f7f7;
+  margin: 0;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown > table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown > table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+
+}
+
+.markdown > table th,
+.markdown > table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown > table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+  font-style: italic;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown > br,
+.markdown > p > br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+pre{
+  background: #fff;
+}
+
+
+
+
+

iconfont/demo_fontclass.html

@@ -0,0 +1,274 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+    <link rel="stylesheet" href="iconfont.css">
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                <i class="icon iconfont icon-tongjifenxi"></i>
+                    <div class="name">统计分析</div>
+                    <div class="fontclass">.icon-tongjifenxi</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-xiazai"></i>
+                    <div class="name">下载</div>
+                    <div class="fontclass">.icon-xiazai</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-baoming"></i>
+                    <div class="name">报名</div>
+                    <div class="fontclass">.icon-baoming</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tubiao209"></i>
+                    <div class="name">邮箱</div>
+                    <div class="fontclass">.icon-tubiao209</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-dianhua"></i>
+                    <div class="name">电话</div>
+                    <div class="fontclass">.icon-dianhua</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-renqun"></i>
+                    <div class="name">人群</div>
+                    <div class="fontclass">.icon-renqun</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-xinjianwendang"></i>
+                    <div class="name">新建文档</div>
+                    <div class="fontclass">.icon-xinjianwendang</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-qian"></i>
+                    <div class="name">钱</div>
+                    <div class="fontclass">.icon-qian</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-xiaolianmanyifuwu"></i>
+                    <div class="name">笑脸 满意 服务</div>
+                    <div class="fontclass">.icon-xiaolianmanyifuwu</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-jiantouxiajiang"></i>
+                    <div class="name">箭头 下降</div>
+                    <div class="fontclass">.icon-jiantouxiajiang</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-xiangmushenbao"></i>
+                    <div class="name">项目申报</div>
+                    <div class="fontclass">.icon-xiangmushenbao</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-ai-connection"></i>
+                    <div class="name">人脉</div>
+                    <div class="fontclass">.icon-ai-connection</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-gonggao"></i>
+                    <div class="name">公告</div>
+                    <div class="fontclass">.icon-gonggao</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-jiantou24"></i>
+                    <div class="name">箭头2-4</div>
+                    <div class="fontclass">.icon-jiantou24</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-jiantoushang"></i>
+                    <div class="name">箭头_上</div>
+                    <div class="fontclass">.icon-jiantoushang</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-suo"></i>
+                    <div class="name">锁</div>
+                    <div class="fontclass">.icon-suo</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-jiaoyixingneng"></i>
+                    <div class="name">交易性能</div>
+                    <div class="fontclass">.icon-jiaoyixingneng</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-jianjie"></i>
+                    <div class="name">简介</div>
+                    <div class="fontclass">.icon-jianjie</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-iconfontanquan"></i>
+                    <div class="name">安全</div>
+                    <div class="fontclass">.icon-iconfontanquan</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-iconfontpaixingbang"></i>
+                    <div class="name">数据</div>
+                    <div class="fontclass">.icon-iconfontpaixingbang</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-youxiang"></i>
+                    <div class="name">邮箱</div>
+                    <div class="fontclass">.icon-youxiang</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-zhuce"></i>
+                    <div class="name">注册</div>
+                    <div class="fontclass">.icon-zhuce</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-zhengzaizhaobiao"></i>
+                    <div class="name">开标</div>
+                    <div class="fontclass">.icon-zhengzaizhaobiao</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-map"></i>
+                    <div class="name">map</div>
+                    <div class="fontclass">.icon-map</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-liucheng"></i>
+                    <div class="name">流程</div>
+                    <div class="fontclass">.icon-liucheng</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-fangdajing"></i>
+                    <div class="name">放大镜</div>
+                    <div class="fontclass">.icon-fangdajing</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-dianhua1"></i>
+                    <div class="name">电话</div>
+                    <div class="fontclass">.icon-dianhua1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-erweima"></i>
+                    <div class="name">二维码</div>
+                    <div class="fontclass">.icon-erweima</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tesezhuanti"></i>
+                    <div class="name">特色专题</div>
+                    <div class="fontclass">.icon-tesezhuanti</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-hezuo-tianchong"></i>
+                    <div class="name">合作</div>
+                    <div class="fontclass">.icon-hezuo-tianchong</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-kuaijiebiaoqian"></i>
+                    <div class="name">快捷标签</div>
+                    <div class="fontclass">.icon-kuaijiebiaoqian</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-service"></i>
+                    <div class="name">客服</div>
+                    <div class="fontclass">.icon-service</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tianping"></i>
+                    <div class="name">天平</div>
+                    <div class="fontclass">.icon-tianping</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-underway"></i>
+                    <div class="name">进行时钟</div>
+                    <div class="fontclass">.icon-underway</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-toumingdutiaojie"></i>
+                    <div class="name">透明度调节</div>
+                    <div class="fontclass">.icon-toumingdutiaojie</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-yanjiuchuangxinnengli"></i>
+                    <div class="name">研究创新能力</div>
+                    <div class="fontclass">.icon-yanjiuchuangxinnengli</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shujuanquan"></i>
+                    <div class="name">数据安全</div>
+                    <div class="fontclass">.icon-shujuanquan</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-suosou"></i>
+                    <div class="name">搜索</div>
+                    <div class="fontclass">.icon-suosou</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-baomingchenggong"></i>
+                    <div class="name">报名成功</div>
+                    <div class="fontclass">.icon-baomingchenggong</div>
+                </li>
+            
+        </ul>
+
+        <h2 id="font-class-">font-class引用</h2>
+        <hr>
+
+        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
+        <p>与unicode使用方式相比，具有如下特点：</p>
+        <ul>
+        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
+        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
+        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
+        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
+
+
+        <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>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+        <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>
+        <blockquote>
+        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
+        </blockquote>
+    </div>
+</body>
+</html>

iconfont/demo_symbol.html

@@ -0,0 +1,375 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+    <script src="iconfont.js"></script>
+
+    <style type="text/css">
+        .icon {
+          /* 通过设置 font-size 来改变图标大小 */
+          width: 1em; height: 1em;
+          /* 图标和文字相邻时，垂直对齐 */
+          vertical-align: -0.15em;
+          /* 通过设置 color 来改变 SVG 的颜色/fill */
+          fill: currentColor;
+          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+             normalize.css 中也包含这行 */
+          overflow: hidden;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tongjifenxi"></use>
+                    </svg>
+                    <div class="name">统计分析</div>
+                    <div class="fontclass">#icon-tongjifenxi</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-xiazai"></use>
+                    </svg>
+                    <div class="name">下载</div>
+                    <div class="fontclass">#icon-xiazai</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-baoming"></use>
+                    </svg>
+                    <div class="name">报名</div>
+                    <div class="fontclass">#icon-baoming</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tubiao209"></use>
+                    </svg>
+                    <div class="name">邮箱</div>
+                    <div class="fontclass">#icon-tubiao209</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-dianhua"></use>
+                    </svg>
+                    <div class="name">电话</div>
+                    <div class="fontclass">#icon-dianhua</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-renqun"></use>
+                    </svg>
+                    <div class="name">人群</div>
+                    <div class="fontclass">#icon-renqun</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-xinjianwendang"></use>
+                    </svg>
+                    <div class="name">新建文档</div>
+                    <div class="fontclass">#icon-xinjianwendang</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-qian"></use>
+                    </svg>
+                    <div class="name">钱</div>
+                    <div class="fontclass">#icon-qian</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-xiaolianmanyifuwu"></use>
+                    </svg>
+                    <div class="name">笑脸 满意 服务</div>
+                    <div class="fontclass">#icon-xiaolianmanyifuwu</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-jiantouxiajiang"></use>
+                    </svg>
+                    <div class="name">箭头 下降</div>
+                    <div class="fontclass">#icon-jiantouxiajiang</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-xiangmushenbao"></use>
+                    </svg>
+                    <div class="name">项目申报</div>
+                    <div class="fontclass">#icon-xiangmushenbao</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-ai-connection"></use>
+                    </svg>
+                    <div class="name">人脉</div>
+                    <div class="fontclass">#icon-ai-connection</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-gonggao"></use>
+                    </svg>
+                    <div class="name">公告</div>
+                    <div class="fontclass">#icon-gonggao</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-jiantou24"></use>
+                    </svg>
+                    <div class="name">箭头2-4</div>
+                    <div class="fontclass">#icon-jiantou24</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-jiantoushang"></use>
+                    </svg>
+                    <div class="name">箭头_上</div>
+                    <div class="fontclass">#icon-jiantoushang</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-suo"></use>
+                    </svg>
+                    <div class="name">锁</div>
+                    <div class="fontclass">#icon-suo</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-jiaoyixingneng"></use>
+                    </svg>
+                    <div class="name">交易性能</div>
+                    <div class="fontclass">#icon-jiaoyixingneng</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-jianjie"></use>
+                    </svg>
+                    <div class="name">简介</div>
+                    <div class="fontclass">#icon-jianjie</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-iconfontanquan"></use>
+                    </svg>
+                    <div class="name">安全</div>
+                    <div class="fontclass">#icon-iconfontanquan</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-iconfontpaixingbang"></use>
+                    </svg>
+                    <div class="name">数据</div>
+                    <div class="fontclass">#icon-iconfontpaixingbang</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-youxiang"></use>
+                    </svg>
+                    <div class="name">邮箱</div>
+                    <div class="fontclass">#icon-youxiang</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-zhuce"></use>
+                    </svg>
+                    <div class="name">注册</div>
+                    <div class="fontclass">#icon-zhuce</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-zhengzaizhaobiao"></use>
+                    </svg>
+                    <div class="name">开标</div>
+                    <div class="fontclass">#icon-zhengzaizhaobiao</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-map"></use>
+                    </svg>
+                    <div class="name">map</div>
+                    <div class="fontclass">#icon-map</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-liucheng"></use>
+                    </svg>
+                    <div class="name">流程</div>
+                    <div class="fontclass">#icon-liucheng</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-fangdajing"></use>
+                    </svg>
+                    <div class="name">放大镜</div>
+                    <div class="fontclass">#icon-fangdajing</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-dianhua1"></use>
+                    </svg>
+                    <div class="name">电话</div>
+                    <div class="fontclass">#icon-dianhua1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-erweima"></use>
+                    </svg>
+                    <div class="name">二维码</div>
+                    <div class="fontclass">#icon-erweima</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tesezhuanti"></use>
+                    </svg>
+                    <div class="name">特色专题</div>
+                    <div class="fontclass">#icon-tesezhuanti</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-hezuo-tianchong"></use>
+                    </svg>
+                    <div class="name">合作</div>
+                    <div class="fontclass">#icon-hezuo-tianchong</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-kuaijiebiaoqian"></use>
+                    </svg>
+                    <div class="name">快捷标签</div>
+                    <div class="fontclass">#icon-kuaijiebiaoqian</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-service"></use>
+                    </svg>
+                    <div class="name">客服</div>
+                    <div class="fontclass">#icon-service</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tianping"></use>
+                    </svg>
+                    <div class="name">天平</div>
+                    <div class="fontclass">#icon-tianping</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-underway"></use>
+                    </svg>
+                    <div class="name">进行时钟</div>
+                    <div class="fontclass">#icon-underway</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-toumingdutiaojie"></use>
+                    </svg>
+                    <div class="name">透明度调节</div>
+                    <div class="fontclass">#icon-toumingdutiaojie</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-yanjiuchuangxinnengli"></use>
+                    </svg>
+                    <div class="name">研究创新能力</div>
+                    <div class="fontclass">#icon-yanjiuchuangxinnengli</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-shujuanquan"></use>
+                    </svg>
+                    <div class="name">数据安全</div>
+                    <div class="fontclass">#icon-shujuanquan</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-suosou"></use>
+                    </svg>
+                    <div class="name">搜索</div>
+                    <div class="fontclass">#icon-suosou</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-baomingchenggong"></use>
+                    </svg>
+                    <div class="name">报名成功</div>
+                    <div class="fontclass">#icon-baomingchenggong</div>
+                </li>
+            
+        </ul>
+
+
+        <h2 id="symbol-">symbol引用</h2>
+        <hr>
+
+        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
+        <ul>
+          <li>支持多色图标了，不再受单色限制。</li>
+          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
+          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
+          <li>浏览器渲染svg的性能一般，还不如png。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
+        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
+        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
+        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
+.icon {
+   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
+   vertical-align: <span class="hljs-number">-0.15</span>em;
+   fill: currentColor;
+   overflow: hidden;
+}
+&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
+        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
+  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
+</span>&lt;<span class="hljs-regexp">/svg&gt;
+        </span></code></pre>
+    </div>
+</body>
+</html>

iconfont/demo_unicode.html

@@ -0,0 +1,312 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+
+    <style type="text/css">
+
+        @font-face {font-family: "iconfont";
+          src: url('iconfont.eot'); /* IE9*/
+          src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
+          url('iconfont.woff') format('woff'), /* chrome, firefox */
+          url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+          url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
+        }
+
+        .iconfont {
+          font-family:"iconfont" !important;
+          font-size:16px;
+          font-style:normal;
+          -webkit-font-smoothing: antialiased;
+          -webkit-text-stroke-width: 0.2px;
+          -moz-osx-font-smoothing: grayscale;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                <i class="icon iconfont">&#xf007b;</i>
+                    <div class="name">统计分析</div>
+                    <div class="code">&amp;#xf007b;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe645;</i>
+                    <div class="name">下载</div>
+                    <div class="code">&amp;#xe645;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe601;</i>
+                    <div class="name">报名</div>
+                    <div class="code">&amp;#xe601;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe61a;</i>
+                    <div class="name">邮箱</div>
+                    <div class="code">&amp;#xe61a;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe632;</i>
+                    <div class="name">电话</div>
+                    <div class="code">&amp;#xe632;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe622;</i>
+                    <div class="name">人群</div>
+                    <div class="code">&amp;#xe622;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe62c;</i>
+                    <div class="name">新建文档</div>
+                    <div class="code">&amp;#xe62c;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe662;</i>
+                    <div class="name">钱</div>
+                    <div class="code">&amp;#xe662;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe7a9;</i>
+                    <div class="name">笑脸 满意 服务</div>
+                    <div class="code">&amp;#xe7a9;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe7f2;</i>
+                    <div class="name">箭头 下降</div>
+                    <div class="code">&amp;#xe7f2;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6a6;</i>
+                    <div class="name">项目申报</div>
+                    <div class="code">&amp;#xe6a6;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe663;</i>
+                    <div class="name">人脉</div>
+                    <div class="code">&amp;#xe663;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe630;</i>
+                    <div class="name">公告</div>
+                    <div class="code">&amp;#xe630;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe72c;</i>
+                    <div class="name">箭头2-4</div>
+                    <div class="code">&amp;#xe72c;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe61d;</i>
+                    <div class="name">箭头_上</div>
+                    <div class="code">&amp;#xe61d;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe626;</i>
+                    <div class="name">锁</div>
+                    <div class="code">&amp;#xe626;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe74a;</i>
+                    <div class="name">交易性能</div>
+                    <div class="code">&amp;#xe74a;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6c4;</i>
+                    <div class="name">简介</div>
+                    <div class="code">&amp;#xe6c4;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe633;</i>
+                    <div class="name">安全</div>
+                    <div class="code">&amp;#xe633;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe639;</i>
+                    <div class="name">数据</div>
+                    <div class="code">&amp;#xe639;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe623;</i>
+                    <div class="name">邮箱</div>
+                    <div class="code">&amp;#xe623;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe683;</i>
+                    <div class="name">注册</div>
+                    <div class="code">&amp;#xe683;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe629;</i>
+                    <div class="name">开标</div>
+                    <div class="code">&amp;#xe629;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe62e;</i>
+                    <div class="name">map</div>
+                    <div class="code">&amp;#xe62e;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe60c;</i>
+                    <div class="name">流程</div>
+                    <div class="code">&amp;#xe60c;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe634;</i>
+                    <div class="name">放大镜</div>
+                    <div class="code">&amp;#xe634;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe627;</i>
+                    <div class="name">电话</div>
+                    <div class="code">&amp;#xe627;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe60d;</i>
+                    <div class="name">二维码</div>
+                    <div class="code">&amp;#xe60d;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe617;</i>
+                    <div class="name">特色专题</div>
+                    <div class="code">&amp;#xe617;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe65b;</i>
+                    <div class="name">合作</div>
+                    <div class="code">&amp;#xe65b;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe625;</i>
+                    <div class="name">快捷标签</div>
+                    <div class="code">&amp;#xe625;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe621;</i>
+                    <div class="name">客服</div>
+                    <div class="code">&amp;#xe621;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe607;</i>
+                    <div class="name">天平</div>
+                    <div class="code">&amp;#xe607;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe7b6;</i>
+                    <div class="name">进行时钟</div>
+                    <div class="code">&amp;#xe7b6;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe66e;</i>
+                    <div class="name">透明度调节</div>
+                    <div class="code">&amp;#xe66e;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe611;</i>
+                    <div class="name">研究创新能力</div>
+                    <div class="code">&amp;#xe611;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe614;</i>
+                    <div class="name">数据安全</div>
+                    <div class="code">&amp;#xe614;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe60b;</i>
+                    <div class="name">搜索</div>
+                    <div class="code">&amp;#xe60b;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe63d;</i>
+                    <div class="name">报名成功</div>
+                    <div class="code">&amp;#xe63d;</div>
+                </li>
+            
+        </ul>
+        <h2 id="unicode-">unicode引用</h2>
+        <hr>
+
+        <p>unicode是字体在网页端最原始的应用方式，特点是：</p>
+        <ul>
+        <li>兼容性最好，支持ie6+，及所有现代浏览器。</li>
+        <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+        <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
+        </ul>
+        <blockquote>
+        <p>注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式</p>
+        </blockquote>
+        <p>unicode使用步骤如下：</p>
+        <h3 id="-font-face">第一步：拷贝项目下面生成的font-face</h3>
+        <pre><code class="lang-js hljs javascript">@font-face {
+  font-family: <span class="hljs-string">'iconfont'</span>;
+  src: url(<span class="hljs-string">'iconfont.eot'</span>);
+  src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
+  url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
+  url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
+  url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
+}
+</code></pre>
+        <h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
+        <pre><code class="lang-js hljs javascript">.iconfont{
+  font-family:<span class="hljs-string">"iconfont"</span> !important;
+  font-size:<span class="hljs-number">16</span>px;font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+        <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+        <pre><code class="lang-js hljs javascript">&lt;i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>&gt;&amp;#x33;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span></span></code></pre>
+
+        <blockquote>
+        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
+        </blockquote>
+    </div>
+
+
+</body>
+</html>