├── css
    ├── label.css
    ├── about.css
    ├── friendsLink.css
    ├── prettify.css
    ├── baseArticle.css
    ├── publish.css
    ├── index.css
    ├── article.css
    ├── base.css
    ├── detail.css
    └── detail.css.bak
├── README.md
├── html
    ├── label.html
    ├── article.html
    ├── about.html
    ├── friendLink.html
    ├── index.html
    ├── publish.html
    └── detail.html
└── js
    ├── friendLink.js
    ├── template.js
    ├── index.js
    ├── label.js
    ├── base.js
    ├── publish.js
    ├── tagCloud
        └── tagCloud.js
    ├── template
        └── art-template.js
    └── article.js


/css/label.css:
--------------------------------------------------------------------------------
 1 | .single_new {
 2 |     border: none;
 3 |     background-color: #FFFFFF;
 4 | }
 5 | 
 6 | .news ul li{
 7 |     margin-bottom: 30px;
 8 | }
 9 | 
10 | .label_title {
11 |     width: 100%;
12 |     margin-top: 80px;
13 |     color: #FFFFFF;
14 |     text-align: center;
15 | }
16 | 
17 | .label_title h1 {
18 |     font-weight: 100;
19 |     font-size: 24px;
20 |     margin-bottom: 15px;
21 |     letter-spacing: .1em;
22 |     color: #fff;
23 |     text-shadow: 0 4px 8px rgba(7,17,27,.4);
24 | }
25 | 
26 | .label_title p {
27 |     font-size: 15px;
28 |     font-weight: 100;
29 |     color: rgba(255,255,255,.8);
30 | }
31 | 
32 | .label_title a{
33 |     color: #EE2C2C;
34 | }
35 | 
36 | .w1000{
37 |     margin-top: 50px;
38 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## blog_template
 2 | 
 3 | > **个人博客网站前端css js html代码**
 4 | 
 5 | 其中js中包含腾讯开源前端模板引擎语法 art-template,关于语法知识可以自行百度.
 6 | 
 7 | > **博客网址**
 8 | 	
 9 | 	https://zzwazj.online
10 | 
11 | [https://zzwazj.online](https://zzwazj.online "AZJ@二人世界")
12 | 
13 | > **网站主要样式截图**
14 | 
15 | ### 主页
16 | ----------
17 | ![avatar](http://wx4.sinaimg.cn/large/007aGNoFly1g187uds2t6j311y0kpww8.jpg)
18 | 
19 | ![avatar](http://wx4.sinaimg.cn/large/007aGNoFly1g187uepq2hj311y0kpwqx.jpg)
20 | 
21 | ![avatar](http://wx2.sinaimg.cn/large/007aGNoFly1g187u8450uj311y0kp7cq.jpg)
22 | 
23 | ![avatar](http://wx3.sinaimg.cn/large/007aGNoFly1g187u8krvbj311y0kp76l.jpg)
24 | 
25 | 
26 | 
27 | ### 博客文章页面
28 | 
29 | ----------
30 | 
31 | 
32 | ![avatar](http://wx1.sinaimg.cn/large/007aGNoFly1g187uaqx7tj311y0kpqow.jpg)
33 | 
34 | ![avatar](http://wx1.sinaimg.cn/large/007aGNoFly1g187u9ntj6j311y0kp4lj.jpg)
35 | 
36 | ### 友情链接页面
37 | ----------
38 | 
39 | ![avatar](http://wx3.sinaimg.cn/large/007aGNoFly1g187ubupt9j311y0irdz9.jpg)
40 | 
41 | ### 关于我页面
42 | ----------
43 | ![avatar](http://wx2.sinaimg.cn/large/007aGNoFly1g187ucwulqj311y0irdyv.jpg)
44 | 
45 | 
46 | 
47 | 
48 | 
49 | 


--------------------------------------------------------------------------------
/css/about.css:
--------------------------------------------------------------------------------
 1 | .about_left{
 2 |     float: left;
 3 |     width: 68%;
 4 | }
 5 | 
 6 | .about_right{
 7 |     float: right;
 8 |     width: 28%;
 9 | }
10 | 
11 | .about_left h3{
12 |     margin-bottom: 20px;
13 |     padding-left: 20px;
14 |     margin-top: 20px;
15 |     border-left: 3px solid #EE2C2C;
16 |     font-size: 18px;
17 |     line-height: 22px;
18 | }
19 | 
20 | .about_left p{
21 |     line-height: 36px;
22 |     margin-left: 20px;
23 |     color: #232328;
24 |     font-size: 12px;
25 | }
26 | 
27 | .about_left>div{
28 |     background-color: rgba(255,255,255,0.9);
29 |     border-radius: 10px;
30 |     padding: 20px;
31 |     margin-bottom: 30px;
32 | }
33 | 
34 | .about_left i{
35 |     margin-right: 10px;
36 | }
37 | 
38 | .about_left a{
39 |     color: #EE2C2C;
40 |     margin:0 5px;
41 | }
42 | 
43 | .about_left a:hover{
44 |     text-decoration: underline;
45 | }
46 | 
47 | .zzw{
48 |     cursor: none;
49 | }
50 | 
51 | /*关于我页面手机适配*/
52 | @media screen and (max-width: 500px){
53 | 
54 |     .about_left{
55 |         float: none;
56 |         width: 100%;
57 |     }
58 | 
59 |     .about_right{
60 |         float: none;
61 |         width: 100%;
62 |     }
63 | 
64 |     .about_left>div{
65 |         border-radius: 5px;
66 |     }
67 | 
68 |     .about_me{
69 |         border-radius: 5px;
70 |     }
71 | 
72 |     .weChat{
73 |         border-radius: 5px;
74 |     }
75 | }
76 | 


--------------------------------------------------------------------------------
/html/label.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport"
 6 |           content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
 7 |     <link rel="shortcut icon" href="https://wx3.sinaimg.cn/small/007aGNoFly1fvysv6bn70g305k05k3yy.gif">
 8 |     <title>AZJ~标签页面</title>
 9 |     <link href="https://lib.baomitu.com/animate.css/3.7.0/animate.min.css" rel="stylesheet">
10 |     <link href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
11 |     <link rel="stylesheet" href="../../css/base.min.css">
12 |     <link rel="stylesheet" href="../../css/baseArticle.min.css">
13 |     <link rel="stylesheet" href="../../css/label.min.css">
14 | </head>
15 | <body>
16 | <div id="header"></div>
17 | <div class="label_title"><h1>标签</h1>
18 |     <p>『<a href="" id="labelName"></a>』标签相关的内容</p></div>
19 | <div class="w1000">
20 |     <div class="news">
21 |         <ul id="label"></ul>
22 |     </div>
23 | </div>
24 | <div id="footer"></div>
25 | <div id="fixBars"></div>
26 | <script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
27 | <script src="https://lib.baomitu.com/wow/1.0.1/wow.min.js"></script>
28 | <script src="../../js/template/art-template.js"></script>
29 | <script src="../../js/template.min.js"></script>
30 | <script src="../../js/label.min.js"></script>
31 | <script src="../../js/base.min.js"></script>
32 | <script>
33 |     (function(){
34 |         var bp = document.createElement('script');
35 |         var curProtocol = window.location.protocol.split(':')[0];
36 |         if (curProtocol === 'https') {
37 |             bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
38 |         }
39 |         else {
40 |             bp.src = 'http://push.zhanzhang.baidu.com/push.js';
41 |         }
42 |         var s = document.getElementsByTagName("script")[0];
43 |         s.parentNode.insertBefore(bp, s);
44 |     })();
45 | </script>
46 | </body>
47 | </html>


--------------------------------------------------------------------------------
/js/friendLink.js:
--------------------------------------------------------------------------------
 1 | var friend = `{{each friendList friend index}}
 2 |                 <li>
 3 |                     <div class="wow fadeInUp link">
 4 |                         <a href="{{friend.address}}" target="_blank">
 5 |                             <img src="{{friend.logo}}">
 6 |                             <h3>{{friend.linkName}}</h3>
 7 |                             <p>{{friend.content}}</p>
 8 |                         </a>
 9 |                     </div>
10 |                 </li>
11 |             {{/each}}`;
12 | 
13 | 
14 | var pageFun = {
15 |     validateLink : function () {
16 |         // 获取链接名称
17 |         let linkName = $("input[name='linkName']").val();
18 |         // 获取链接地址和logo地址
19 |         let address = $("input[name='address']").val();
20 |         let logo = $("input[name='logo']").val();
21 |         // 获取描述
22 |         let content = $("input[name='content']").val();
23 |         if (linkName == "" || address == "" || logo == "" || content == ""){
24 |             swal("友情链接信息不能为空！",{
25 |                 button:false,
26 |                 timer:2000
27 |             });
28 |             return false;
29 |         }
30 |         return true;
31 |     }
32 | };
33 | 
34 | $(function () {
35 |     $('.link_add').click(function () {
36 |         $('#overLay').removeAttr('hidden');
37 |         $('.add_link_box').removeAttr('hidden');
38 |     });
39 | 
40 |     $('.close').click(function () {
41 |         $('.add_link_box').attr('hidden', 'hidden');
42 |         $('#overLay').attr('hidden', 'hidden');
43 |     });
44 | 
45 |     var friendRender = template.compile(friend);
46 |     var friendHtml = "";
47 |     $.ajax({
48 |         url: '/link/getLink.action',
49 |         type: 'POST',
50 |         success: function (res) {
51 |             var friendData = {
52 |                 friendList : res.data
53 |             };
54 |             friendHtml = friendRender(friendData);
55 |             $('#friend').html(friendHtml);
56 |         }
57 |     });
58 | 
59 |     var addFriend = "";
60 | 
61 |     $('#addLink').click(function () {
62 |         // 校验友情链接
63 |         if (pageFun.validateLink()){
64 |             $.ajax({
65 |                 type: 'POST',
66 |                 url: '/link/add.action',
67 |                 data: $('#link_form').serialize(),
68 |                 success: function (res) {
69 |                     if (res.status == 200) {
70 |                         var friendData = {
71 |                             friendList : res.data
72 |                         };
73 |                         addFriend = friendRender(friendData);
74 |                         $('#friend').append(addFriend);
75 |                         swal("友情链接增加成功！",{
76 |                             button:false,
77 |                             timer:2000
78 |                         });
79 |                     }else if (res.status == 520) {
80 |                         swal(res.msg,{
81 |                             button:false
82 |                         });
83 |                     }else {
84 |                         swal("友情链接新增失败，请联系站长！",{
85 |                             button:false
86 |                         });
87 |                     }
88 |                 }
89 |             });
90 |         }
91 |     });
92 | });
93 | 


--------------------------------------------------------------------------------
/html/article.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport"
 6 |           content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
 7 |     <link rel="shortcut icon" href="https://wx3.sinaimg.cn/small/007aGNoFly1fvysv6bn70g305k05k3yy.gif">
 8 |     <title>AZJ~文章列表</title>
 9 |     <link href="https://lib.baomitu.com/animate.css/3.7.0/animate.min.css" rel="stylesheet">
10 |     <link href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
11 |     <link rel="stylesheet" href="../../css/base.min.css">
12 |     <link rel="stylesheet" href="../../css/article.min.css">
13 | </head>
14 | <body>
15 | <div id="header"></div>
16 | <div class="w1000">
17 |     <div class="blog_content" id="blog_content"></div>
18 |     <div class="blog_classify">
19 |         <ul>
20 |             <li id="classifyBox" class="wow flipInY mobile_close">
21 |                 <div class="searchBox"><input type="text" placeholder="请输入关键字搜索"/><i class="fa fa-search"></i></div>
22 |                 <span class="classify_title" id="allClassify">全部分类</span>
23 |                 <ul class="classify" id="classify"></ul>
24 |             </li>
25 |             <li class="wow fadeInRight mobile_close" name="hot_article"><span class="classify_title">热评文章</span>
26 |                 <ul class="hot_article" id="hot_article"></ul>
27 |             </li>
28 |             <li class="wow rotateInDownRight mobile_close" name="top_article"><span class="classify_title">置顶推荐</span>
29 |                 <ul class="hot_article" id="top_article"></ul>
30 |             </li>
31 |             <li name="article_label" class="wow fadeInUp mobile_close">
32 |                 <div class="hot_tag"><span class="classify_title">热门标签</span>
33 |                     <div id="tag_cloud_widget"></div>
34 |                 </div>
35 |             </li>
36 |         </ul>
37 |     </div>
38 | </div><!--遮罩层-->
39 | <div id="overLay" hidden="hidden"></div>
40 | <div><span class="wow fadeInRight left1">&lt;</span><span class="wow fadeInRight left2">&lt;</span><span
41 |         class="top1 wow fadeInLeft"><i class="fa fa-search"></i></span></div>
42 | <div id="footer"></div><!--fixBars-->
43 | <div id="fixBars"></div>
44 | <script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
45 | <script src="https://lib.baomitu.com/wow/1.0.1/wow.min.js"></script>
46 | <script src="https://lib.baomitu.com/sweetalert/2.1.0/sweetalert.min.js"></script>
47 | <script src="../../js/template/art-template.js"></script>
48 | <script src="../../js/template.min.js"></script>
49 | <script src="../../js/base.min.js"></script>
50 | <script src="../../js/article.min.js"></script>
51 | <script src="../../js/tagCloud/tagCloud.min.js"></script>
52 | <script>
53 |     (function(){
54 |         var bp = document.createElement('script');
55 |         var curProtocol = window.location.protocol.split(':')[0];
56 |         if (curProtocol === 'https') {
57 |             bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
58 |         }
59 |         else {
60 |             bp.src = 'http://push.zhanzhang.baidu.com/push.js';
61 |         }
62 |         var s = document.getElementsByTagName("script")[0];
63 |         s.parentNode.insertBefore(bp, s);
64 |     })();
65 | </script>
66 | </body>
67 | </html>


--------------------------------------------------------------------------------
/js/template.js:
--------------------------------------------------------------------------------
 1 | /**定义模板文件**/
 2 | // header模板
 3 | let header = `<menu class="menu_close" id="menu">
 4 |     <span class="wow fadeInRight" data-wow-delay=".3s"></span>
 5 |     <span class="wow fadeInRight" data-wow-delay=".6s"></span>
 6 |     <span class="wow fadeInRight" data-wow-delay=".9s"></span>
 7 | </menu>
 8 | 
 9 | <nav hidden="hidden" id="nav" class="wow bounceInRight">
10 |     <div class="nav">
11 |         <a class="nav-logo" href="/">
12 |             <img src="https://wx3.sinaimg.cn/small/007aGNoFly1fvysv6bn70g305k05k3yy.gif" alt="logo">
13 |             <h1>a&nbsp;z&nbsp;j</h1>
14 |         </a>
15 |         <div class="nav-content">
16 |             <ul>
17 |                 {{each titleList value index}}
18 |                     <li><a href="{{value.href}}">{{value.titleName}}</a></li>
19 |                 {{/each}}
20 |             </ul>
21 |         </div>
22 |     </div>
23 | </nav>`;
24 | 
25 | // 回到顶部模板
26 | let fixBars = `<ul class="fix_bar">
27 |     <li id="toTop" hidden="hidden" class="wow fadeInRight">
28 |         <i class="fa fa-arrow-up"></i>
29 |     </li>
30 | </ul>`;
31 | 
32 | let footer = `<a href="https://github.com/zengzhiwei12138"><i class="fa fa-github"></i></a>
33 |     <a href="https://wpa.qq.com/msgrd?v=3&uin=876784235&site=qq&menu=yes"><i class="fa fa-qq"></i></a>
34 |     <a href="mailto:zengzhiwei_hfut@163.com"><i class="fa fa-envelope-o"></i></a>
35 |     <a href="https://gitee.com/zzwazj"><i class="fa fa-google-plus"></i></a>
36 |     <p>Copyright © 2018-2019 AZJ@二人世界 All Rights Reserved 京ICP备18053311号</p>`;
37 | 
38 | $(function () {
39 |     // 加载模板数据
40 |     // 解析模板文件
41 |     let headerRender = template.compile(header);
42 |     let fixBarsRender = template.compile(fixBars);
43 |     let footerRender = template.compile(footer);
44 |     let headerHtml = "";
45 |     // 加载数据
46 |     $.ajax({
47 |         type: "POST",
48 |         url:'/nav/content.action',
49 |         success:function (data) {
50 |             var titleData = {
51 |                 titleList:data.data
52 |             };
53 |             headerHtml = headerRender(titleData);
54 |             // 渲染页面
55 |             $('#header').html(headerHtml);
56 |             // 按钮点击事件
57 |             let menuId = $('#menu');
58 |             let nav = $('#nav');
59 |             let spans = $('#menu>span');
60 |             // menu点击事件
61 |             menuId.click(function () {
62 |                 if (menuId.hasClass('menu_close')){
63 |                     nav.removeClass('bounceOutRight');
64 |                     nav.removeAttr('style');
65 |                     nav.addClass('bounceInRight');
66 |                     spans.each(function () {
67 |                         $(this).removeClass('fadeInRight');
68 |                         $(this).removeAttr('style');
69 |                     });
70 |                     menuId.removeClass('menu_close');
71 |                     menuId.addClass('menu_open');
72 |                     nav.removeAttr('hidden');
73 |                 }else {
74 |                     nav.removeClass('bounceInRight');
75 |                     nav.removeAttr('style');
76 |                     nav.addClass('bounceOutRight');
77 |                     menuId.removeClass('menu_open');
78 |                     menuId.addClass('menu_close');
79 |                 }
80 |             });
81 |         }
82 |     });
83 |     let fixBarsHtml = fixBarsRender();
84 |     let footerHtml = footerRender();
85 |     $('#fixBars').html(fixBarsHtml);
86 |     $('#footer').html(footerHtml);
87 | });


--------------------------------------------------------------------------------
/html/about.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>AZJ~关于我</title>
 6 |     <meta name="viewport"
 7 |           content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
 8 |     <link rel="shortcut icon" href="https://wx3.sinaimg.cn/small/007aGNoFly1fvysv6bn70g305k05k3yy.gif">
 9 |     <link href="https://lib.baomitu.com/animate.css/3.7.0/animate.min.css" rel="stylesheet">
10 |     <link href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
11 |     <link rel="stylesheet" href="../../css/about.min.css">
12 |     <link rel="stylesheet" href="../../css/base.min.css">
13 | </head>
14 | <body>
15 | <div id="header"></div>
16 | <div class="w1000">
17 |     <div class="about_left">
18 |         <div><h3>About Me</h3>
19 |             <p>因为一个人，爱上一座城。</p>
20 |             <p>毕业之后，因为一个故事来到了帝都。</p>
21 |             <p>博铭：三十功名尘与土，八千里路云和月</p></div>
22 |         <div><h3>Contact</h3>
23 |             <p>可通过如下方式联系到我</p>
24 |             <p><i class="fa fa-qq"></i>QQ:<a href="https://wpa.qq.com/msgrd?v=3&uin=876784235&site=qq&menu=yes"
25 |                                              target="_blank">876784235</a></p>
26 |             <p><i class="fa fa-envelope-o"></i>Email:<a
27 |                     href="mailto:zengzhiwei_hfut@163.com">zengzhiwei_hfut@163.com</a></p>
28 |             <p><i class="fa fa-github"></i>Github:<a href="https://github.com/zengzhiwei12138" target="_blank">zengzhiwei12138</a>
29 |             </p>
30 |             <p><i class="fa fa-google-plus"></i>Gitee:<a href="https://gitee.com/zzwazj" target="_blank">zzwazj</a></p>
31 |         </div>
32 |         <div><h3>About Site</h3>
33 |             <p>本站建于2018年9月，主要记录技术分享，交流，生活心得，吐槽等...</p>
34 |             <p>本站所用技术</p>
35 |             <p>前端：art-template html5&css3 es6 wow tagCould esc</p>
36 |             <p>后端：springmvc spring mybatis dubbo esc</p>
37 |             <p>数据库：mariadb</p></div>
38 |         <div><h3>About Rights</h3>
39 |             <p>本站由<a href="/">azj</a>博客创作，采用<a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">知识共享署名4.0</a>国际许可协议进行许可
40 |             </p>
41 |             <p>本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名</p>
42 |             <p>只要您在使用时注明出处，就可以对本站所有原创内容进行转载、节选、二次创作，但是您不得对其用于商业目的</p></div>
43 |     </div>
44 |     <div class="about_right">
45 |         <div class="about_me"><h2>——About Me——</h2><img
46 |                 src="https://wx2.sinaimg.cn/small/007aGNoFly1fvyt8hilmag305k05kjrr.gif" width="100px" height="100px">
47 |             <div><p>网名：AZJ</p>
48 |                 <p>职业：Java后端攻城狮</p>
49 |                 <p>籍贯：河南<a class="zzw" href="/publish.html">-</a>信阳</p>
50 |                 <p>邮箱：876784235@qq.com</p></div>
51 |         </div>
52 |         <div class="weChat"><h2>——WeChat——</h2><img
53 |                 src="https://wx4.sinaimg.cn/small/007aGNoFly1fvysv6pktaj30e80e8q3v.jpg" alt="个人微信" width="250px"
54 |                 height="250px"></div>
55 |     </div>
56 | </div>
57 | <div id="fixBars"></div>
58 | <div id="footer"></div>
59 | <script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
60 | <script src="https://lib.baomitu.com/wow/1.0.1/wow.min.js"></script>
61 | <script src="../../js/template/art-template.js"></script>
62 | <script src="../../js/template.min.js"></script>
63 | <script src="../../js/base.min.js"></script>
64 | <script>
65 |     (function(){
66 |         var bp = document.createElement('script');
67 |         var curProtocol = window.location.protocol.split(':')[0];
68 |         if (curProtocol === 'https') {
69 |             bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
70 |         }
71 |         else {
72 |             bp.src = 'http://push.zhanzhang.baidu.com/push.js';
73 |         }
74 |         var s = document.getElementsByTagName("script")[0];
75 |         s.parentNode.insertBefore(bp, s);
76 |     })();
77 | </script>
78 | </body>
79 | </html>


--------------------------------------------------------------------------------
/css/friendsLink.css:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | .link_left {
  4 |     float: left;
  5 |     width: 68%;
  6 |     overflow: hidden;
  7 | }
  8 | 
  9 | .link_right {
 10 |     float: right;
 11 |     width: 28%;
 12 |     overflow: hidden;
 13 | }
 14 | 
 15 | .link_left > div > h3 {
 16 |     margin-bottom: 20px;
 17 |     padding-left: 20px;
 18 |     margin-top: 20px;
 19 |     border-left: 3px solid #EE2C2C;
 20 |     font-size: 18px;
 21 |     line-height: 22px;
 22 | }
 23 | 
 24 | .link_desc p {
 25 |     line-height: 28px;
 26 |     margin-left: 20px;
 27 |     color: #232328;
 28 |     font-size: 12px;
 29 | }
 30 | 
 31 | .link_left > div {
 32 |     position: relative;
 33 |     background-color: rgba(255, 255, 255, 0.9);
 34 |     padding: 20px;
 35 |     margin-bottom: 30px;
 36 |     border-radius: 10px;
 37 |     overflow: hidden;
 38 | }
 39 | 
 40 | .link_desc a {
 41 |     color: #EE2C2C;
 42 | }
 43 | 
 44 | .link_desc a:hover {
 45 |     text-decoration: underline;
 46 | }
 47 | 
 48 | .link_desc p:last-child {
 49 |     color: #EE2C2C;
 50 | }
 51 | 
 52 | .link_desc i:nth-child(n+2) {
 53 |     margin-left: 6px;
 54 | }
 55 | 
 56 | .link {
 57 |     float: left;
 58 |     padding: 15px 10px 10px 20px;
 59 | }
 60 | 
 61 | .link a {
 62 |     display: block;
 63 |     padding: 12px;
 64 | }
 65 | 
 66 | .link_left ul {
 67 |     overflow: hidden;
 68 | }
 69 | 
 70 | .link_left ul li {
 71 |     float: left;
 72 |     width: 33.3%;
 73 |     overflow: hidden;
 74 | }
 75 | 
 76 | .link_add {
 77 |     position: absolute;
 78 |     top: 40px;
 79 |     right: 40px;
 80 |     line-height: 22px;
 81 |     font-size: 13px;
 82 |     color: #EE2C2C;
 83 |     cursor: pointer;
 84 | }
 85 | 
 86 | .link_add:hover {
 87 |     text-decoration: underline;
 88 | }
 89 | 
 90 | .link_add i {
 91 |     margin-right: 5px;
 92 | }
 93 | 
 94 | .add_link_box {
 95 |     background-color: rgba(255, 255, 255, 0.9);
 96 |     position: fixed;
 97 |     z-index: 1000;
 98 |     min-height: 290px;
 99 |     min-width: 300px;
100 |     font-size: 12px;
101 |     padding: 30px 30px 0 30px;
102 |     text-align: right;
103 |     top: calc(50% - 150px);
104 |     left: calc(50% - 180px);
105 | }
106 | 
107 | .add_link_box span {
108 |     display: table;
109 |     background: #EE2C2C;
110 |     border: none;
111 |     border-radius: 100px;
112 |     font-size: 16px;
113 |     color: #FFFFFF;
114 |     padding: 7px 28px;
115 |     margin: 0 auto;
116 |     margin-top: 10px;
117 |     cursor: pointer;
118 | 
119 | }
120 | 
121 | input[type="text"] {
122 |     width: 240px;
123 |     height: 20px;
124 |     background: #F7F7F9;
125 |     border: 1px solid #D3D3D7;
126 |     border-radius: 5px;
127 |     font-size: 14px;
128 |     color: black;
129 |     padding: 6px 8px;
130 |     outline: none;
131 | }
132 | 
133 | .add_link_box i {
134 |     font-size: 14px;
135 |     color: #EE2C2C;
136 |     margin-right: 5px;
137 | }
138 | 
139 | .add_link_box p {
140 |     line-height: 56px;
141 | }
142 | 
143 | .close {
144 |     position: absolute;
145 |     top: 10px;
146 |     right: 10px;
147 |     cursor: pointer;
148 | }
149 | 
150 | /*适配友情连接的手机页面*/
151 | @media screen and (max-width: 500px) {
152 | 
153 |     .link_left {
154 |         width: 100%;
155 |     }
156 | 
157 |     .link_right {
158 |         display: none;
159 |     }
160 | 
161 |     .link_left ul li {
162 |         width: 50%;
163 |     }
164 | 
165 |     .link {
166 |         padding: 5px 0 10px 10px;
167 |     }
168 | 
169 |     .link a {
170 |         padding: 0;
171 |     }
172 | 
173 |     .add_link_box {
174 |         background-color: rgba(255, 255, 255, 1);
175 |         position: fixed;
176 |         z-index: 1000;
177 |         min-height: 290px;
178 |         width: 90%;
179 |         font-size: 12px;
180 |         padding: 30px 30px 0 0;
181 |         text-align: right;
182 |         top: calc(50% - 145px);
183 |         left: calc(5% - 15px);
184 |     }
185 | 
186 |     .link_left > div {
187 |         border-radius: 5px;
188 |     }
189 | }
190 | 


--------------------------------------------------------------------------------
/js/index.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 博客文章模板
  3 |  *
  4 |  */
  5 | var article = `<ul>
  6 |                     {{each articleList value index}}
  7 |                         <li class="wow fadeInUp">
  8 |                             <div class="single_new">
  9 |                                 <a class="new" href="detail.html?id={{value.id}}" target="_blank">
 10 |                                     <div class="articleImg" style="background-image: url('{{value.image}}')"></div>
 11 |                                     <div class="archive_content">
 12 |                                         <span>
 13 |                                             {{@value.topContent}}
 14 |                                         </span>
 15 |                                     </div>
 16 |                                 </a>
 17 |                                 <div class="article_other">
 18 |                                     <h2 class="article_title">
 19 |                                         <a href="/detail.html?id={{value.id}}" target="_blank"> 
 20 |                                             {{value.title}}
 21 |                                         </a>
 22 |                                     </h2>
 23 |                                     <span class="article_info">
 24 |                                         <i class="fa fa-clock-o"></i>{{value.updateTime}}
 25 |                                         <i class="fa fa-eye"></i>{{value.viewNum}}
 26 |                                         <i class="fa fa-heart"></i>{{value.praiseNum}}
 27 |                                         <i class="fa fa-comment"></i>{{value.commentNum}}
 28 |                                     </span>
 29 |                                 </div>
 30 |                             </div>
 31 |                         </li>
 32 |                   {{/each}}
 33 |                 </ul>`;
 34 | 
 35 | 
 36 | var friendLinks = `<ul>
 37 |                         {{each linkList link index}}
 38 |                             <li class="wow fadeInUp">
 39 |                                 <div class="link">
 40 |                                     <a href="{{link.address}}" target="_blank">
 41 |                                         <img src="{{link.logo}}">
 42 |                                         <h3>{{link.linkName}}</h3>
 43 |                                         <p>{{link.content}}</p>
 44 |                                     </a>
 45 |                                 </div>
 46 |                             </li>
 47 |                         {{/each}}
 48 |                     </ul>`;
 49 | 
 50 | 
 51 | $(function () {
 52 |     $('#loading').fadeOut(500);
 53 |     // next 按钮事件
 54 |     $('#next').click(function () {
 55 |         $('html,body').animate({
 56 |             scrollTop: $('.page1').outerHeight() + 1
 57 |         }, 600);
 58 |     });
 59 |     // 解析article
 60 |     var articleRender = template.compile(article);
 61 |     var articleHtml = "";
 62 |     $.ajax({
 63 |         type: 'POST',
 64 |         url: '/index/article.action',
 65 |         success: function (res) {
 66 |             let articleData = {
 67 |                 articleList: res.data
 68 |             };
 69 |             articleHtml = articleRender(articleData);
 70 |             $('#article').html(articleHtml);
 71 |         }
 72 |     });
 73 | 
 74 |     // 解析friendLink
 75 |     var linksRender = template.compile(friendLinks);
 76 |     var linksHtml = "";
 77 |     $.ajax({
 78 |         type : 'POST',
 79 |         url: '/index/friendLink.action',
 80 |         success:function (res) {
 81 |             if (res.status == 200){
 82 |                 var linksData = {
 83 |                     linkList : res.data
 84 |                 };
 85 |                 linksHtml = linksRender(linksData);
 86 |                 $('#friendLinks').html(linksHtml);
 87 |             }
 88 |         }
 89 |     });
 90 | });
 91 | 
 92 | $(document).keyup(function (event) {
 93 |     if (event.keyCode == 13){
 94 |         $("a[href='/article.html']")[0].click();
 95 |     }
 96 | });
 97 | 
 98 | 
 99 | 
100 | 
101 | 


--------------------------------------------------------------------------------
/html/friendLink.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>AZJ ~ 友情链接</title>
 6 |     <meta name="viewport"
 7 |           content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
 8 |     <link rel="shortcut icon" href="https://wx3.sinaimg.cn/small/007aGNoFly1fvysv6bn70g305k05k3yy.gif">
 9 |     <link rel="stylesheet" href="../../css/base.min.css">
10 |     <link rel="stylesheet" href="../../css/friendsLink.min.css">
11 |     <link href="https://lib.baomitu.com/animate.css/3.7.0/animate.min.css" rel="stylesheet">
12 |     <link href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
13 | </head>
14 | <body>
15 | <div id="header"></div>
16 | <div class="w1000">
17 |     <div class="link_left">
18 |         <div class="link_desc"><h3>FriendLink Explain</h3>
19 |             <p><i class="fa fa-check"></i>原创优先<i class="fa fa-check"></i>技术优先<i class="fa fa-close"></i>经常宕机<i
20 |                     class="fa fa-close"></i>不合法规<i class="fa fa-close"></i>插边球站<i class="fa fa-close"></i>红标报毒</p>
21 |             <p>本站信息如下：</p>
22 |             <p>名称：AZJ</p>
23 |             <p>网址：<a href="https://www.zzwazj.online">https://www.zzwazj.online</a></p>
24 |             <p>图标：https://wx3.sinaimg.cn/small/007aGNoFly1fvysv6bn70g305k05k3yy.gif</p>
25 |             <p>描述：AZJ @ 二人世界</p>
26 |             <p>注意：本站开放自主填写友情链接权限，如自主添加后，请自觉将本站加为友联，本站会不定时清理违规友联</p></div>
27 |         <div class="link_content"><h3>Close Friends</h3>
28 |             <div class="link_add"><i class="fa fa-plus"></i>申请友链</div>
29 |             <ul id="friend"></ul>
30 |         </div>
31 |     </div>
32 |     <div class="link_right">
33 |         <div class="about_me"><h2>—— About Me ——</h2><img
34 |                 src="https://wx2.sinaimg.cn/small/007aGNoFly1fvyt8hilmag305k05kjrr.gif" width="100px" height="100px">
35 |             <div><p>网名：AZJ</p>
36 |                 <p>职业：Java后端攻城狮</p>
37 |                 <p>籍贯：河南-信阳</p>
38 |                 <p>邮箱：876784235@qq.com</p></div>
39 |         </div>
40 |         <div class="weChat"><h2>—— WeChat ——</h2><img
41 |                 src="https://wx4.sinaimg.cn/small/007aGNoFly1fvysv6pktaj30e80e8q3v.jpg" alt="个人微信" width="250px"
42 |                 height="250px"></div>
43 |     </div>
44 | </div>
45 | <div class="wow zoomIn add_link_box" hidden="hidden">
46 |     <form id="link_form"><p><i class="fa fa-circle-o"></i>名称：<input type="text" placeholder="请输入贵站名称" name="linkName">
47 |     </p>
48 |         <p><i class="fa fa-address-book"></i>网址：<input type="text" placeholder="请输入贵站网址" name="address"></p>
49 |         <p><i class="fa fa-image"></i>图标：<input type="text" placeholder="请输入贵站logo地址" name="logo"></p>
50 |         <p><i class="fa fa-check"></i>描述：<input type="text" placeholder="请输入贵站描述" name="content"/></p><span
51 |                 id="addLink">确认提交</span></form>
52 |     <div class="close"><i class="fa fa-close"></i></div>
53 | </div>
54 | <div id="overLay" hidden="hidden"></div>
55 | <div id="fixBars"></div>
56 | <div id="footer"></div>
57 | <script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
58 | <script src="https://lib.baomitu.com/wow/1.0.1/wow.min.js"></script>
59 | <script src="https://lib.baomitu.com/sweetalert/2.1.0/sweetalert.min.js"></script>
60 | <script src="../../js/template/art-template.js"></script>
61 | <script src="../../js/template.min.js"></script>
62 | <script src="../../js/base.min.js"></script>
63 | <script src="../../js/friendLink.min.js"></script>
64 | <script>
65 |     (function(){
66 |         var bp = document.createElement('script');
67 |         var curProtocol = window.location.protocol.split(':')[0];
68 |         if (curProtocol === 'https') {
69 |             bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
70 |         }
71 |         else {
72 |             bp.src = 'http://push.zhanzhang.baidu.com/push.js';
73 |         }
74 |         var s = document.getElementsByTagName("script")[0];
75 |         s.parentNode.insertBefore(bp, s);
76 |     })();
77 | </script>
78 | </body>
79 | </html>


--------------------------------------------------------------------------------
/js/label.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 博客文章模板
  3 |  *
  4 |  */
  5 | let labelArticle = `{{each articleList value index}}
  6 |                         <li class="wow fadeInUp">
  7 |                             <div class="single_new">
  8 |                                 <a class="new" href="detail.html?id={{value.id}}" target="_blank">
  9 |                                     <div class="articleImg" style="background-image: url('{{value.image}}')"></div>
 10 |                                     <div class="archive_content">
 11 |                                         <span>
 12 |                                             {{@value.topContent}}
 13 |                                         </span>
 14 |                                     </div>
 15 |                                 </a>
 16 |                                 <div class="article_other">
 17 |                                     <h2 class="article_title">
 18 |                                         <a href="/detail.html?id={{value.id}}" target="_blank"> 
 19 |                                             {{value.title}}
 20 |                                         </a>
 21 |                                     </h2>
 22 |                                     <span class="article_info">
 23 |                                         <i class="fa fa-clock-o"></i>{{value.updateTime}}
 24 |                                         <i class="fa fa-eye"></i>{{value.viewNum}}
 25 |                                         <i class="fa fa-heart"></i>{{value.praiseNum}}
 26 |                                         <i class="fa fa-comment"></i>{{value.commentNum}}
 27 |                                     </span>
 28 |                                 </div>
 29 |                             </div>
 30 |                         </li>
 31 |                   {{/each}}`;
 32 | 
 33 | let pageNum = 1;
 34 | //获取labelId
 35 | let href = window.location.href;
 36 | let label = href.substring(href.lastIndexOf("?") + 4).split("&");
 37 | let labelId = label[0];
 38 | // 解析模板
 39 | let labelArticleRender = template.compile(labelArticle);
 40 | let exist = false;
 41 | 
 42 | $(function () {
 43 |     // 获取第一页的标签文章数据
 44 |     getArticleByLabel(pageNum);
 45 |     let labelName = decodeURI(label[1].substring(5));
 46 |     $('#labelName').text(labelName);
 47 | });
 48 | 
 49 | 
 50 | //获取滚动条当前的位置
 51 | function getScrollTop() {
 52 |     let scrollTop = 0;
 53 |     if (document.documentElement && document.documentElement.scrollTop) {
 54 |         scrollTop = document.documentElement.scrollTop;
 55 |     } else if (document.body) {
 56 |         scrollTop = document.body.scrollTop;
 57 |     }
 58 |     return scrollTop;
 59 | }
 60 | 
 61 | //获取当前可视范围的高度
 62 | function getClientHeight() {
 63 |     let clientHeight = 0;
 64 |     if (document.body.clientHeight && document.documentElement.clientHeight) {
 65 |         clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
 66 |     } else {
 67 |         clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
 68 |     }
 69 |     return clientHeight;
 70 | }
 71 | 
 72 | //获取文档完整的高度
 73 | function getScrollHeight() {
 74 |     return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
 75 | }
 76 | 
 77 | //滚动事件触发
 78 | window.onscroll = function () {
 79 |     if (getScrollTop() + getClientHeight() > getScrollHeight() - 110) {
 80 |         pageNum++;
 81 |         getArticleByLabel(pageNum);
 82 |     }
 83 | };
 84 | 
 85 | function getArticleByLabel(pageNum) {
 86 |     if (!exist){
 87 |         $.ajax({
 88 |             type : 'POST',
 89 |             data : {
 90 |                 pageNum : pageNum,
 91 |                 labelId : labelId,
 92 |                 classifyId : "",
 93 |                 keywords : ""
 94 |             },
 95 |             url : '/article/getPageArticle.action',
 96 |             success : function (res) {
 97 |                 if (res.data.length > 0){
 98 |                     let articleData = {
 99 |                         articleList: res.data
100 |                     };
101 |                     let labelArticleHtml = labelArticleRender(articleData);
102 |                     $('#label').append(labelArticleHtml);
103 |                 }else {
104 |                     exist = true;
105 |                 }
106 |                 if (res.data.length < 20){
107 |                     exist = true;
108 |                 }
109 |             }
110 |         });
111 |     }
112 | }


--------------------------------------------------------------------------------
/js/base.js:
--------------------------------------------------------------------------------
  1 | // 富文本编辑器表情管理
  2 | const emoji = [];
  3 | const toot = [];
  4 | const cute = [];
  5 | const mogutou = [];
  6 | 
  7 | getImg(emoji,"emoji",96);
  8 | getImg(toot,"toot",16);
  9 | getImg(cute,'cute',8);
 10 | getImg(mogutou,'mogutou',15);
 11 | 
 12 | function getImg(arr,name,max) {
 13 |     if (max < 10){
 14 |         for(let i = 1; i< max; i++){
 15 |             arr.push({alt:"0"+i,src:"https://www.zzwazj.online/images/emoticon/"+name+"/0"+i+".gif"});
 16 |         }
 17 |     }else {
 18 |         for(let i = 1; i < 10; i++){
 19 |             arr.push({alt:"0"+i,src:"https://www.zzwazj.online/images/emoticon/"+name+"/0"+i+".gif"});
 20 |         }
 21 |         for (let j = 10; j <= max; j++){
 22 |             arr.push({alt:j,src:"https://www.zzwazj.online/images/emoticon/"+name+"/"+j+".gif"});
 23 |         }
 24 |     }
 25 | }
 26 | 
 27 | $(function () {
 28 |     console.log("如果你喜欢本站模板,欢迎发邮件给876784235@qq.com,免费分享本站静态模板哦~");
 29 |     console.log("欢迎加群进行学习交流哦~");
 30 |     // 刷新回到顶部 防止wow.js的动画失效
 31 |     $('body,html').animate({scrollTop: 0},700);
 32 |     // 初始化wow
 33 |     new WOW().init();
 34 | 
 35 |     // 鼠标点击事件
 36 |     var i = 0;
 37 |     $('html').click(function (element) {
 38 |         let arr = ["富强","民主","文明","和谐","自由","平等","公正","法治","爱国","敬业","诚信","友善"];
 39 |         let dom = $("<span/>").text(arr[i]);
 40 |         i = (i+1) % arr.length;
 41 |         let x = element.pageX;
 42 |         let y = element.pageY;
 43 |         dom.css({
 44 |             "z-index": 99999,
 45 |             "top": y - 20,
 46 |             "left": x,
 47 |             "position": "absolute",
 48 |             "font-weight": "bold",
 49 |             "color": "#ff6651"
 50 |         });
 51 |         $('body').append(dom);
 52 |         dom.animate({
 53 |             "top": y-180,
 54 |             "opacity":0
 55 |         },1500,function () {
 56 |             dom.remove();
 57 |         });
 58 |     });
 59 |     // toTop事件
 60 |     $('#toTop').click(function () {
 61 |         $('html,body').animate({scrollTop:0},500);
 62 |     });
 63 | 
 64 |     // 上一次滚轮的位置
 65 |     var last_position = 0;
 66 |     // 监听滚轮事件
 67 |     $(window).scroll(function () {
 68 |         let offset = 500;
 69 |         let pageY = $(window).scrollTop();
 70 |         pageY > offset ? $('#toTop').removeAttr('hidden') : $('#toTop').attr('hidden','hidden');
 71 |         if (document.body.offsetWidth > 500){
 72 |             if (pageY > 1000){
 73 |                 $("#classifyBox").removeAttr('style');
 74 |                 $("#classifyBox").addClass('box_bounceInDown_fixed');
 75 |             }else {
 76 |                 $("#classifyBox").removeClass('box_bounceInDown_fixed');
 77 |             }
 78 |             if (pageY>700){
 79 |                 $('.about_me').removeAttr('style');
 80 |                 $('.about_me').addClass('box_bounceInDown_fixed');
 81 |             }else {
 82 |                 $('.about_me').removeClass('box_bounceInDown_fixed');
 83 |             }
 84 |             if (pageY>600){
 85 |                 $('#message_search').removeAttr('hidden','hidden');
 86 |                 $("#message_search").removeAttr('style');
 87 |                 $("#message_search").addClass('box_bounceInUp_fixed');
 88 |             }else{
 89 |                 $('#message_search').attr('hidden','hidden');
 90 |                 $("#message_search").removeClass('box_bounceInUp_fixed');
 91 |             }
 92 |         }
 93 |         // 获取当前位置
 94 |         let position = window.scrollY;
 95 |         if(position - last_position > 0) {
 96 |             let menuId = $('#menu');
 97 |             let nav = $('#nav');
 98 |             if (menuId.hasClass("menu_open")) {
 99 |                 nav.removeClass('bounceInRight');
100 |                 nav.removeAttr('style');
101 |                 nav.addClass('bounceOutRight');
102 |                 menuId.removeClass('menu_open');
103 |                 menuId.addClass('menu_close');
104 |             }
105 |         }
106 |         last_position = position;
107 |     });
108 | });
109 | 
110 | 
111 | 
112 | function getEditorConfig(editor) {
113 |     editor.customConfig.emotions = [
114 |         {
115 |             title: '默认',
116 |             type: 'image',
117 |             content: emoji
118 |         },
119 |         {
120 |             title: '蒙嘟嘟',
121 |             type: 'image',
122 |             content: toot
123 |         },
124 |         {
125 |             title: '乖巧宝宝',
126 |             type: 'image',
127 |             content: cute
128 |         },
129 |         {
130 |             title: '骚气蘑菇头',
131 |             type: 'image',
132 |             content: mogutou
133 |         }
134 |     ];
135 | }


--------------------------------------------------------------------------------
/css/prettify.css:
--------------------------------------------------------------------------------
  1 | /* ========================
  2 | //#google-prettify-monokai-theme
  3 | //#Version: 0.3
  4 | //#Author: RaphaelDDL
  5 | //#Github: https://github.com/RaphaelDDL/google-prettify-monokai-theme/
  6 | //For use with Google Code Prettify, HTML Syntax only
  7 | //======================== */
  8 | li.L0, li.L1, li.L2, li.L3,li.L4,
  9 | li.L5, li.L6, li.L7, li.L8,li.L9{
 10 |     list-style-type: decimal !important;
 11 |     font-family: consolas, menlo, courier, monospace;
 12 |     font-size: 14px;
 13 |     min-height: 20px;
 14 |     line-height: 20px;
 15 |     word-wrap: break-word;
 16 | }
 17 | li.L0 span, li.L1 span, li.L2 span, li.L3 span,li.L4 span,
 18 | li.L5 span, li.L6 span, li.L7 span, li.L8 span,li.L9 span{
 19 |     font-family: consolas, menlo, courier, monospace;
 20 |     font-size: 14px;
 21 |     line-height: 1.75;
 22 | }
 23 | pre .str, code .str { color: #e6db5a; } /* string */
 24 | pre .kwd, code .kwd { color: #66d9ef; } /* keyword */
 25 | pre .com, code .com { color: #75715e; font-style: italic; } /* comment */
 26 | pre .typ, code .typ { color: #66d9ef; } /* type */
 27 | pre .lit, code .lit { color: #ae81ff; } /* literal */
 28 | pre .pun, code .pun { color: #fff; } /* punctuation */
 29 | pre .pln, code .pln { color: #fff; } /* plaintext */
 30 | pre .tag, code .tag { color: #f92672; } /* html/xml tag */
 31 | pre .atn, code .atn { color: #a6e22a; } /* html/xml attribute name */
 32 | pre .atv, code .atv { color: #e6db74; } /* html/xml attribute value */
 33 | pre .dec, code .dec { color: #ae81ff; } /* decimal */
 34 | 
 35 | pre.prettyprint, code.prettyprint {
 36 |     background-color: #272822;
 37 |     -moz-border-radius: 8px;
 38 |     -webkit-border-radius: 8px;
 39 |     -o-border-radius: 8px;
 40 |     -ms-border-radius: 8px;
 41 |     -khtml-border-radius: 8px;
 42 |     border-radius: 8px;
 43 |     font-family: consolas, menlo, courier, monospace;
 44 | }
 45 | 
 46 | pre.prettyprint {
 47 |     max-width: 100%;
 48 |     margin: 1em auto;
 49 |     padding: 1em;
 50 |     white-space: pre-wrap;
 51 | }
 52 | 
 53 | pre.prettyprinted {
 54 |     box-shadow:inset 0 0 1px 2px #3c3d39, 0 0 15px rgba(0,0,0,0.5);
 55 |     border:1px solid #0b0c0a;
 56 | }
 57 | 
 58 | 
 59 | /* ------------------------
 60 | //Section: class 'linenums' for line numbering
 61 | //------------------------ */
 62 | ol.linenums {
 63 |     margin-top: 0;
 64 |     margin-bottom: 0;
 65 |     margin-left: 40px;
 66 |     color: #75715e;
 67 | } /* IE indents via margin-left */
 68 | 
 69 | 
 70 | /* =============================================
 71 | //Section: Print Styles (partially from Sunburn Theme)
 72 | //================================================ */
 73 | @media print {
 74 |     pre.prettyprinted, pre.prettyprint, code.prettyprint {
 75 |         background-color:#fff;
 76 |         color:#000;
 77 |         -moz-border-radius:0;
 78 |         -webkit-border-radius:0;
 79 |         -o-border-radius:0;
 80 |         -ms-border-radius:0;
 81 |         -khtml-border-radius:0;
 82 |         border-radius:0;
 83 |     }
 84 | 
 85 |     pre .str, code .str { color: #060; }
 86 |     pre .kwd, code .kwd { color: #006; font-weight: bold; }
 87 |     pre .com, code .com { color: #600; font-style: italic; }
 88 |     pre .typ, code .typ { color: #404; font-weight: bold; }
 89 |     pre .lit, code .lit { color: #044; }
 90 |     pre .pun, code .pun { color: #440; }
 91 |     pre .pln, code .pln { color: #000; }
 92 |     pre .tag, code .tag { color: #006; font-weight: bold; }
 93 |     pre .atn, code .atn { color: #404; }
 94 |     pre .atv, code .atv { color: #060; }
 95 | }
 96 | 
 97 | .code-pretty-container {
 98 |     position: relative;
 99 |     padding-top: 9px;
100 |     margin-bottom: 20px;
101 | }
102 | 
103 | .code-pretty-toolbar {
104 |     position: absolute;
105 |     top: -2px;
106 |     left: 0;
107 |     color: #ddd;
108 | }
109 | 
110 | .code-pretty-toolbar .title{
111 |     display: inline-block;
112 |     vertical-align: top;
113 |     padding: 4px 14px 2px;
114 |     margin-right: 12px;
115 |     line-height: 1.75;
116 |     background-color: #1E1F1A;
117 |     border: 1px solid #0b0c0a;
118 |     border-radius: 8px 8px 0 0;
119 |     border-bottom: none;
120 |     box-shadow: inset 2px 3px 1px 0px #3c3d39, 0 -1px 12px rgba(0,0,0,0.5);
121 |     font-size: 12px;
122 | }
123 | 
124 | .code-pretty-toolbar .tool {
125 |     margin: -2px 3px 0 0;
126 |     height: 24px;
127 |     width: 24px;
128 |     font-size: 16px;
129 |     color: #777777;
130 | }
131 | 
132 | .code-pretty-toolbar span, .code-pretty-toolbar a {
133 |     display: inline-block;
134 |     vertical-align: top;
135 | }
136 | 
137 | .code-pretty-text {
138 |     position: absolute;
139 |     top: 36px;
140 |     left: 2px;
141 |     padding: 4px;
142 |     color: #FFF;
143 |     font-family: consolas, menlo, courier, monospace;
144 |     font-size: 14px;
145 |     word-break: break-all;
146 |     line-height: 20px;
147 |     border: none;
148 |     overflow: hidden;
149 |     background-color: rgb(39, 40, 34);
150 |     resize: none;
151 |     outline: none;
152 | }


--------------------------------------------------------------------------------
/html/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>AZJ@二人世界</title>
  6 |     <meta name="viewport"
  7 |           content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
  8 |     <link rel="shortcut icon" href="https://wx3.sinaimg.cn/small/007aGNoFly1fvysv6bn70g305k05k3yy.gif">
  9 |     <!--加载cdn的css文件-->
 10 |     <link href="https://lib.baomitu.com/animate.css/3.7.0/animate.min.css" rel="stylesheet">
 11 |     <link href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 12 |     <link rel="stylesheet" href="../../css/base.min.css">
 13 |     <link rel="stylesheet" href="../../css/baseArticle.min.css">
 14 |     <link rel="stylesheet" href="../../css/index.min.css">
 15 | </head>
 16 | <body><!--header-->
 17 | <div id="header"></div><!--page one-->
 18 | <page class="page1">
 19 |     <div class="table_cell">
 20 |         <div class="mText wow zoomIn" data-wow-duration="2s"><h2>azj</h2>
 21 |             <p>三十功名尘与土,八千里路云和月</p></div>
 22 |         <div class="wow fadeInUp" data-wow-duration="2s" id="next"></div>
 23 |     </div>
 24 | </page><!--page two-->
 25 | <page class="page2">
 26 |     <div class="table_cell">
 27 |         <div class="article_box">
 28 |             <div class="title">
 29 |                 <div class="wow fadeInDown" data-wow-delay=".2s"><h1>Hot Article</h1></div>
 30 |             </div>
 31 |             <div class="article">
 32 |                 <div class="news" id="article"></div>
 33 |             </div>
 34 |         </div>
 35 |     </div>
 36 | </page><!--page three-->
 37 | <page class="page3">
 38 |     <div class="table_cell">
 39 |         <div class="about_box">
 40 |             <div class="about">
 41 |                 <ul>
 42 |                     <li class="wow fadeInLeft"><a href="/about.html"><i class="fa fa-user-circle-o"></i>About</a></li>
 43 |                     <li class="wow fadeInRight"><a href="/friendLink.html"><i class="fa fa-handshake-o"></i>Links</a>
 44 |                     </li>
 45 |                 </ul>
 46 |             </div>
 47 |         </div>
 48 |     </div>
 49 | </page><!--page four-->
 50 | <page class="page4">
 51 |     <div class="table_cell">
 52 |         <div>
 53 |             <div class="title wow fadeInDown" data-wow-delay=".2s"><h1>Close Friends</h1></div>
 54 |             <div class="links" id="friendLinks"></div>
 55 |         </div>
 56 |     </div>
 57 | </page><!--page five-->
 58 | <page class="page5">
 59 |     <div class="table_cell wow fadeInUp" data-wow-delay=".2s">
 60 |         <div class="footer_box">
 61 |             <ul class="footer">
 62 |                 <li><h2>azj</h2>
 63 |                     <p>三十功名尘与土，八千里路云和月</p><a href="/about.html">About Me</a></li>
 64 |                 <li><h3>相关链接</h3>
 65 |                     <ul class="all_link">
 66 |                         <li><a href="/"><i class="fa fa-home"></i>Index</a></li>
 67 |                         <li><a href="/article.html"><i class="fa fa-book"></i>Articles</a></li>
 68 |                         <li><a href="/friendLink.html"><i class="fa fa-share"></i>Links</a></li>
 69 |                         <li><a href="/about.html"><i class="fa fa-files-o"></i>About</a></li>
 70 |                     </ul>
 71 |                 </li>
 72 |                 <li><h3>联系我</h3>
 73 |                     <ul id="contact">
 74 |                         <li><i class="fa fa-map"></i>Address：北京市东城区华普花园</li>
 75 |                         <li><i class="fa fa-qq"></i>QQ：876784235</li>
 76 |                         <li><i class="fa fa-envelope"></i>Email：zengzhiwei_hfut@163.com</li>
 77 |                     </ul>
 78 |                 </li>
 79 |             </ul>
 80 |         </div>
 81 |     </div>
 82 | </page>
 83 | <div class="rights">Copyright©2018-2019 AZJ@二人世界All Rights Reserved京ICP备18053311号</div><!--回到顶部-->
 84 | <div id="fixBars"></div>
 85 | <div id="loading">
 86 |     <div id="loading-center">
 87 |         <div id="loading-center-absolute">
 88 |             <div class="object" id="object_one"></div>
 89 |             <div class="object" id="object_two"></div>
 90 |             <div class="object" id="object_three"></div>
 91 |         </div>
 92 |     </div>
 93 | </div>
 94 | <script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
 95 | <script src="https://lib.baomitu.com/wow/1.0.1/wow.min.js"></script>
 96 | <script src="../../js/index.min.js"></script>
 97 | <script src="../../js/template/art-template.js"></script>
 98 | <script src="../../js/template.min.js"></script>
 99 | <script src="../../js/base.min.js"></script>
100 | <script>
101 |     (function(){
102 |         var bp = document.createElement('script');
103 |         var curProtocol = window.location.protocol.split(':')[0];
104 |         if (curProtocol === 'https') {
105 |             bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
106 |         }
107 |         else {
108 |             bp.src = 'http://push.zhanzhang.baidu.com/push.js';
109 |         }
110 |         var s = document.getElementsByTagName("script")[0];
111 |         s.parentNode.insertBefore(bp, s);
112 |     })();
113 | </script>
114 | </body>
115 | </html>


--------------------------------------------------------------------------------
/js/publish.js:
--------------------------------------------------------------------------------
  1 | const classify = `<select name="classifyId">
  2 |                         <option value="0">选择分类</option>
  3 |                         {{each classifyList value index}}
  4 |                             <option value="{{value.id}}">{{value.classifyName}}</option>
  5 |                         {{/each}}
  6 |                     </select>`;
  7 | 
  8 | 
  9 | $(function () {
 10 |     var classifyHtml = "";
 11 |     var classifyRender = template.compile(classify);
 12 |     $.ajax({
 13 |         url: '/classify/getClassify.action',
 14 |         success:function (data) {
 15 |             var classifyData = {
 16 |                 classifyList:data.data
 17 |             };
 18 |             classifyHtml = classifyRender(classifyData);
 19 |             $('#classify').html(classifyHtml);
 20 |         }
 21 |     });
 22 | 
 23 |     let E = window.wangEditor;
 24 |     let top_editor = new E('#top_toolbar','#top_text');
 25 |     let publish_editor = new E('#publish_toolbar','#publish_text');
 26 |     // 自定义菜单配置
 27 |     top_editor.customConfig.menus = [
 28 |         'head',  // 标题
 29 |         'bold',  // 粗体
 30 |         'fontSize',  // 字号
 31 |         'fontName',  // 字体
 32 |         'italic',  // 斜体
 33 |         'underline',  // 下划线
 34 |         'strikeThrough',  // 删除线
 35 |         'foreColor',  // 文字颜色
 36 |         'backColor',  // 背景颜色
 37 |         'link',  // 插入链接
 38 |         'list',  // 列表
 39 |         'justify',  // 对齐方式
 40 |         'quote',  // 引用
 41 |         'emoticon',  // 表情
 42 |         'undo',  // 撤销
 43 |         'redo'  // 重复
 44 |     ];
 45 |     // 自定义配置颜色（字体颜色、背景色）
 46 |     top_editor.customConfig.colors = [
 47 |         '#000000',
 48 |         '#ffffff',
 49 |         '#ee2c2c',
 50 |         '#9b9b9b'
 51 |     ];
 52 |     // 自定义配置颜色（字体颜色、背景色）
 53 |     publish_editor.customConfig.colors = [
 54 |         '#000000',
 55 |         '#ffffff',
 56 |         '#ee2c2c',
 57 |         '#9b9b9b',
 58 |         '#eeece0',
 59 |         '#1c487f',
 60 |         '#4d80bf',
 61 |         '#c24f4a',
 62 |         '#8baa4a',
 63 |         '#7b5ba1',
 64 |         '#46acc8',
 65 |         '#f9963b'
 66 |     ];
 67 |     publish_editor.customConfig.customUploadImg = function (files, insert) {
 68 |         let file;
 69 |         for (file in files){
 70 |             var formData = new FormData();
 71 |             formData.append('file',files[file]);
 72 |             $.ajax({
 73 |                 url:'https://image.baidu.com/pcdutu/a_upload?fr=html5&target=pcSearchImage&needJson=true',
 74 |                 type:'POST',
 75 |                 data:formData,
 76 |                 processData:false,
 77 |                 contentType : false,
 78 |                 success:function(res){
 79 |                     var rj = $.parseJSON(res);
 80 |                     if (rj.errno == 0){
 81 |                         let imgUrl = 'https://image.baidu.com/search/down?tn=download&url='+rj.url;
 82 |                         insert(imgUrl);
 83 |                     }
 84 |                 }
 85 |             });
 86 |         }
 87 |     };
 88 |     getEditorConfig(top_editor);
 89 |     getEditorConfig(publish_editor);
 90 |     top_editor.create();
 91 |     publish_editor.create();
 92 | 
 93 |     $('#uploadImg').change(function () {
 94 |         var file = this.files[0];
 95 |         if (file != undefined){
 96 |             var formData = new FormData();
 97 |             formData.append('file',file);
 98 |             $.ajax({
 99 |                 url:'https://image.baidu.com/pcdutu/a_upload?fr=html5&target=pcSearchImage&needJson=true',
100 |                 type:'POST',
101 |                 data:formData,
102 |                 processData:false,
103 |                 contentType : false,
104 |                 success:function(res){
105 |                     var rj = $.parseJSON(res);
106 |                     if (rj.errno == 0){
107 |                         $('.uploadImg').css("background-image","url(https://image.baidu.com/search/down?tn=download&url="+rj.url+")");
108 |                         $("input[name='image']").val('https://image.baidu.com/search/down?tn=download&url='+rj.url);
109 |                     }
110 |                 }
111 |             });
112 |         }
113 |     });
114 | 
115 |     $('#publishBtn').click(function () {
116 |         // 填充博客内容值
117 |         let content = $('#publish_text>div');
118 |         let topContent = $('#top_text>div');
119 |         let contentHtml = content.html();
120 |         let topContentHtml = topContent.html();
121 |         let classifyName = $('option:checked').text();
122 |         $("textarea[name='content']").val(contentHtml);
123 |         $("input[name='classifyName']").val(classifyName);
124 |         $("textarea[name='topContent']").val(topContentHtml);
125 |         $.ajax({
126 |             type:'POST',
127 |             url: "/article/publish.action",
128 |             data: $('#publish_form').serialize(),
129 |             success:function (res) {
130 |                 if (res.status == 200){
131 |                     swal("文章发布成功!",{
132 |                         button:false,
133 |                         timer:2000
134 |                     });
135 |                 }
136 |             }
137 |         });
138 |     });
139 | });


--------------------------------------------------------------------------------
/html/publish.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>发布博客</title>
 6 |     <link href="https://lib.baomitu.com/animate.css/3.7.0/animate.min.css" rel="stylesheet">
 7 |     <link href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 8 |     <link rel="stylesheet" href="../../css/publish.min.css">
 9 |     <link rel="stylesheet" href="../../css/base.min.css">
10 | </head>
11 | <body>
12 | <div id="header"></div>
13 | <div class="w1000">
14 |     <div id="publish_blog_box" class="publishBlog">
15 |         <form id="publish_form"><input type="text" name="image" hidden="hidden"><input type="text" name="classifyName"
16 |                                                                                        hidden="hidden"><textarea
17 |                 type="text" name="content" hidden="hidden"></textarea><textarea type="text" name="topContent"
18 |                                                                                 hidden="hidden"></textarea>
19 |             <ul>
20 |                 <li>
21 |                     <div class="uploadImg"><i class="fa fa-image"></i>图片：<label for="uploadImg"><i
22 |                             class="fa fa-photo"></i>选择图片</label><input type="file" id="uploadImg"></div>
23 |                     <div class="classify"><i class="fa  fa-reorder"></i>分类:<span id="classify"></span></div>
24 |                 </li>
25 |                 <li>
26 |                     <div class="title"><i class="fa fa-bookmark-o"></i>标题：<input type="text" placeholder="请输入博客标题"
27 |                                                                                  name="title"></div>
28 |                     <div class="top"><i class="fa fa-hand-pointer-o"></i>置顶:<input type="checkbox" id="top"
29 |                                                                                    name="special" value="top"><label
30 |                             for="top" class="top_label"></label><span>已设置为置顶</span></div>
31 |                 </li>
32 |                 <li>
33 |                     <div class="label"><i class="fa fa-tags"></i>标签:<input type="text" placeholder="多个标签之间用等号分割"
34 |                                                                            name="labelName"></div>
35 |                     <div class="private"><i class="fa fa-eye-slash"></i>私密:<input type="checkbox" id="private"
36 |                                                                                   name="isPrivate" value="Y"><label
37 |                             for="private" class="private_label"></label><span>已设置为私密文章</span></div>
38 |                 </li>
39 |                 <li>
40 |                     <div class="admire"><i class="fa fa-thumbs-o-up"></i>赞赏:<input type="text" placeholder="请输入赞赏语"
41 |                                                                                    name="admire"></div>
42 |                     <div class="type"><i class="fa fa-user-circle-o"></i>原创:<input type="checkbox" id="type" name="type"
43 |                                                                                    value="Y"><label for="type"
44 |                                                                                                     class="type_label"></label><span>已设置为原创</span>
45 |                     </div>
46 |                 </li>
47 |                 <li>
48 |                     <div class="admire"><i class="fa fa-lemon-o"></i>开篇:<input type="text" placeholder="请输入开篇四字提示"
49 |                                                                                name="topDesc"></div>
50 |                 </li>
51 |             </ul>
52 |             <div class="article_top">开篇描述：</div>
53 |             <div class="publish_editor">
54 |                 <div id="top_toolbar" class="toolbar"></div>
55 |                 <div id="top_text" class="top_text"></div>
56 |             </div>
57 |             <div class="article_top">文章内容：</div>
58 |             <div class="publish_editor">
59 |                 <div id="publish_toolbar" class="toolbar"></div>
60 |                 <div id="publish_text" class="publish_text"></div>
61 |             </div>
62 |             <span class="commit_message" id="publishBtn">确认提交</span></form>
63 |     </div>
64 | </div>
65 | <div id="footer"></div>
66 | <div id="fixBars"></div>
67 | <script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
68 | <script src="https://lib.baomitu.com/wow/1.0.1/wow.min.js"></script>
69 | <script src="https://lib.baomitu.com/sweetalert/2.1.0/sweetalert.min.js"></script>
70 | <script src="../../js/template/art-template.js"></script>
71 | <script src="../../js/template.min.js"></script>
72 | <script src="../../js/editor.js"></script>
73 | <script src="../../js/base.min.js"></script>
74 | <script src="../../js/publish.min.js"></script>
75 | <script>
76 |     (function(){
77 |         var bp = document.createElement('script');
78 |         var curProtocol = window.location.protocol.split(':')[0];
79 |         if (curProtocol === 'https') {
80 |             bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
81 |         }
82 |         else {
83 |             bp.src = 'http://push.zhanzhang.baidu.com/push.js';
84 |         }
85 |         var s = document.getElementsByTagName("script")[0];
86 |         s.parentNode.insertBefore(bp, s);
87 |     })();
88 | </script>
89 | </body>
90 | </html>


--------------------------------------------------------------------------------
/css/baseArticle.css:
--------------------------------------------------------------------------------
  1 | .article {
  2 |     width: 1000px;
  3 |     margin: 0 auto;
  4 |     overflow: hidden;
  5 | }
  6 | 
  7 | .news img {
  8 |     float: left;
  9 |     -webkit-transition: all 0.5s;
 10 |     -moz-transition: all 0.5s;
 11 |     -ms-transition: all 0.5s;
 12 |     -o-transition: all 0.5s;
 13 |     transition: all 0.5s;
 14 | }
 15 | 
 16 | .news:hover {
 17 |     cursor: pointer;
 18 | }
 19 | 
 20 | .news img:hover {
 21 |     -webkit-transform: scale(1.1);
 22 |     -moz-transform: scale(1.1);
 23 |     -ms-transform: scale(1.1);
 24 |     -o-transform: scale(1.1);
 25 |     transform: scale(1.1);
 26 | }
 27 | 
 28 | .news ul li {
 29 |     float: left;
 30 |     width: 33.33%;
 31 |     overflow: hidden;
 32 | }
 33 | 
 34 | .news ul li:first-child {
 35 |     margin-bottom: 30px;
 36 | }
 37 | 
 38 | .news ul li:nth-child(2) {
 39 |     margin-bottom: 30px;
 40 | }
 41 | 
 42 | .news ul li:nth-child(3) {
 43 |     margin-bottom: 30px;
 44 | }
 45 | 
 46 | .single_new {
 47 |     border: 1px solid #e6ebf5;
 48 |     background-color: rgba(255, 255, 255, 0.73);
 49 |     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .05);
 50 |     border-radius: 4px;
 51 |     overflow: hidden;
 52 |     max-width: 270px;
 53 |     margin: 0 auto;
 54 |     transform-style: preserve-3d;
 55 |     transform: rotate(0deg);
 56 |     -webkit-transform: rotate(0deg);
 57 | }
 58 | 
 59 | .single_new:hover .articleImg {
 60 |     -webkit-transform: scale(1.1);
 61 |     -moz-transform: scale(1.1);
 62 |     transform: scale(1.1);
 63 |     -webkit-filter: blur(3px);
 64 |     -moz-filter: blur(3px);
 65 |     filter: blur(3px);
 66 | }
 67 | 
 68 | .single_new:hover .archive_content {
 69 |     -webkit-animation: fade-in .5s;
 70 |     animation: fade-in .5s;
 71 |     opacity: 1;
 72 | }
 73 | 
 74 | .new {
 75 |     position: relative;
 76 |     display: inherit;
 77 |     overflow: hidden;
 78 | }
 79 | 
 80 | .new:before {
 81 |     content: "Loading...";
 82 |     position: absolute;
 83 |     width: 100%;
 84 |     left: 0;
 85 |     text-align: center;
 86 |     -webkit-transform: translateY(-34%);
 87 |     -moz-transform: translateY(-34%);
 88 |     -ms-transform: translateY(-34%);
 89 |     -o-transform: translateY(-34%);
 90 |     transform: translateY(-34%);
 91 |     line-height: 500px;
 92 |     font-size: 25px;
 93 |     color: #b7b6b6;
 94 |     z-index: -1;
 95 | }
 96 | 
 97 | .new:after {
 98 |     content: "";
 99 |     background: rgba(0, 0, 0, 0.01);
100 |     position: absolute;
101 |     top: 0;
102 |     bottom: 0;
103 |     left: 0;
104 |     right: 0;
105 | }
106 | 
107 | .articleImg {
108 |     display: inherit;
109 |     min-height: 160px;
110 |     -webkit-transition: -webkit-transform .5s ease, filter .5s ease;
111 |     -moz-transition: -moz-transform .5s ease, filter .5s ease;
112 |     -o-transition: -o-transform .5s ease, filter .5s ease;
113 |     transition: transform .5s ease, filter .5s ease;
114 |     background-position: 50% 50%;
115 |     background-size: cover;
116 |     background-repeat: no-repeat;
117 | }
118 | 
119 | .archive_content {
120 |     padding: 160px 20px;
121 |     position: absolute;
122 |     top: 50%;
123 |     left: 0;
124 |     right: 0;
125 |     -webkit-transform: translateY(-50%);
126 |     -moz-transform: translateY(-50%);
127 |     -ms-transform: translateY(-50%);
128 |     -o-transform: translateY(-50%);
129 |     transform: translateY(-50%);
130 |     background-color: rgba(0, 0, 0, .5);
131 |     text-align: left;
132 |     color: #fff;
133 |     opacity: 0;
134 |     font-size: 12px;
135 |     line-height: 26px;
136 | }
137 | 
138 | .archive_content > span {
139 |     display: block;
140 |     position: relative;
141 |     overflow: hidden;
142 |     height: 78px;
143 | }
144 | 
145 | .article_other {
146 |     padding: 10px 10px 0 10px;
147 |     min-height: 75px;
148 |     position: relative;
149 | }
150 | 
151 | .article_info {
152 |     font-size: 12px;
153 |     text-decoration: none;
154 |     color: #666;
155 |     position: absolute;
156 |     bottom: 5px;
157 |     cursor: default;
158 | }
159 | 
160 | .article_info > i:first-child {
161 |     margin-right: 3px;
162 | }
163 | 
164 | .article_info > i:nth-child(n+2) {
165 |     margin-left: 5px;
166 |     margin-right: 3px;
167 | }
168 | 
169 | .article_title{
170 |     font-size: 18px;
171 |     color: #222;
172 |     font-weight: 400;
173 |     -webkit-font-smoothing: antialiased;
174 |     line-height: 1.8;
175 | }
176 | 
177 | .article_title > a {
178 |     text-decoration: none;
179 |     font-size: 14px;
180 |     line-height: 22px;
181 |     font-weight: normal;
182 |     color: #000;
183 |     overflow: hidden;
184 |     text-overflow: ellipsis;
185 |     display: -webkit-box;
186 |     -webkit-line-clamp: 2;
187 |     -webkit-box-orient: vertical;
188 |     word-break: break-all;
189 | }
190 | 
191 | .article > div > div:after {
192 |     content: "";
193 |     display: block;
194 |     position: absolute;
195 |     bottom: -12px;
196 |     left: 25px;
197 |     width: 0;
198 |     height: 1.5px;
199 |     background-color: #2D93CA;
200 |     -webkit-transition: width .6s;
201 |     -moz-transition: width .6s;
202 |     -ms-transition: width .6s;
203 |     -o-transition: width .6s;
204 |     transition: width .6s;
205 | }
206 | 
207 | .article > div > div:hover:after {
208 |     width: 360px;
209 | }
210 | 
211 | @media screen and (max-width: 500px){
212 |     .article{
213 |         width: 90%;
214 |     }
215 | 
216 |     .single_new{
217 |         max-width: 500px;
218 |     }
219 | 
220 |     .news ul li{
221 |         width: 100%;
222 |         margin-bottom: 30px;
223 |     }
224 | }
225 | 
226 | @-webkit-keyframes fade-in {
227 |     0% {
228 |         -webkit-transform: translateY(-45%);
229 |         opacity: 0
230 |     }
231 |     100% {
232 |         -webkit-transform: translateY(-50%);
233 |         opacity: 1
234 |     }
235 | }
236 | 
237 | @keyframes fade-in {
238 |     0% {
239 |         transform: translateY(-45%);
240 |         opacity: 0
241 |     }
242 |     100% {
243 |         transform: translateY(-50%);
244 |         opacity: 1
245 |     }
246 | }
247 | 


--------------------------------------------------------------------------------
/js/tagCloud/tagCloud.js:
--------------------------------------------------------------------------------
  1 | var radius = 100;
  2 | var d = 200;
  3 | var dtr = Math.PI / 180;
  4 | var mcList = [];
  5 | var lasta = 1;
  6 | var lastb = 1;
  7 | var distr = true;
  8 | var tspeed = 11;
  9 | var size = 200;
 10 | var mouseX = 0;
 11 | var mouseY = 10;
 12 | var howElliptical = 1;
 13 | var aA = null;
 14 | var oDiv = null;
 15 | 
 16 | function tagCloud() {
 17 |     var i = 0;
 18 |     var oTag = null;
 19 |     oDiv = document.getElementById('tag_cloud_widget');
 20 |     aA = oDiv.getElementsByTagName('span');
 21 |     for (i = 0; i < aA.length; i++) {
 22 |         oTag = {};
 23 |         aA[i].onmouseover = (function (obj) {
 24 |             return function () {
 25 |                 obj.on = true;
 26 |                 this.style.zIndex = 9999;
 27 |                 this.style.color = '#fff';
 28 |                 this.style.background = '#ee2c2c';
 29 |                 this.style.padding = '5px 5px';
 30 |                 this.style.filter = "alpha(opacity=100)";
 31 |                 this.style.opacity = 1;
 32 |             }
 33 |         })(oTag);
 34 |         aA[i].onmouseout = (function (obj) {
 35 |             return function () {
 36 |                 obj.on = false;
 37 |                 this.style.zIndex = obj.zIndex;
 38 |                 this.style.color = '#fff';
 39 |                 this.style.background = '#30899B';
 40 |                 this.style.padding = '5px';
 41 |                 this.style.filter = "alpha(opacity=" + 100 * obj.alpha + ")";
 42 |                 this.style.opacity = obj.alpha;
 43 |                 this.style.zIndex = obj.zIndex;
 44 |             }
 45 |         })(oTag);
 46 |         oTag.offsetWidth = aA[i].offsetWidth;
 47 |         oTag.offsetHeight = aA[i].offsetHeight;
 48 |         mcList.push(oTag);
 49 |     }
 50 |     sineCosine(0, 0, 0);
 51 |     positionAll();
 52 |     (function () {
 53 |         update();
 54 |         setTimeout(arguments.callee, 40);
 55 |     })();
 56 | };
 57 | 
 58 | function update() {
 59 |     var a, b, c = 0;
 60 |     a = (Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed;
 61 |     b = (-Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed;
 62 |     lasta = a;
 63 |     lastb = b;
 64 |     if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {
 65 |         return;
 66 |     }
 67 |     sineCosine(a, b, c);
 68 |     for (var i = 0; i < mcList.length; i++) {
 69 |         if (mcList[i].on) {
 70 |             continue;
 71 |         }
 72 |         var rx1 = mcList[i].cx;
 73 |         var ry1 = mcList[i].cy * ca + mcList[i].cz * (-sa);
 74 |         var rz1 = mcList[i].cy * sa + mcList[i].cz * ca;
 75 | 
 76 |         var rx2 = rx1 * cb + rz1 * sb;
 77 |         var ry2 = ry1;
 78 |         var rz2 = rx1 * (-sb) + rz1 * cb;
 79 | 
 80 |         var rx3 = rx2 * cc + ry2 * (-sc);
 81 |         var ry3 = rx2 * sc + ry2 * cc;
 82 |         var rz3 = rz2;
 83 | 
 84 |         mcList[i].cx = rx3;
 85 |         mcList[i].cy = ry3;
 86 |         mcList[i].cz = rz3;
 87 | 
 88 |         per = d / (d + rz3);
 89 | 
 90 |         mcList[i].x = (howElliptical * rx3 * per) - (howElliptical * 2);
 91 |         mcList[i].y = ry3 * per;
 92 |         mcList[i].scale = per;
 93 |         var alpha = per;
 94 |         alpha = (alpha - 0.6) * (10 / 6);
 95 |         mcList[i].alpha = alpha * alpha * alpha - 0.2;
 96 |         mcList[i].zIndex = Math.ceil(100 - Math.floor(mcList[i].cz));
 97 |     }
 98 |     doPosition();
 99 | }
100 | 
101 | function depthSort() {
102 |     var i = 0;
103 |     var aTmp = [];
104 |     for (i = 0; i < aA.length; i++) {
105 |         aTmp.push(aA[i]);
106 |     }
107 |     aTmp.sort
108 |     (
109 |         function (vItem1, vItem2) {
110 |             if (vItem1.cz > vItem2.cz) {
111 |                 return -1;
112 |             }
113 |             else if (vItem1.cz < vItem2.cz) {
114 |                 return 1;
115 |             }
116 |             else {
117 |                 return 0;
118 |             }
119 |         }
120 |     );
121 |     for (i = 0; i < aTmp.length; i++) {
122 |         aTmp[i].style.zIndex = i;
123 |     }
124 | }
125 | 
126 | function positionAll() {
127 |     var phi = 0;
128 |     var theta = 0;
129 |     var max = mcList.length;
130 |     for (var i = 0; i < max; i++) {
131 |         if (distr) {
132 |             phi = Math.acos(-1 + (2 * (i + 1) - 1) / max);
133 |             theta = Math.sqrt(max * Math.PI) * phi;
134 |         } else {
135 |             phi = Math.random() * (Math.PI);
136 |             theta = Math.random() * (2 * Math.PI);
137 |         }
138 |         //坐标变换
139 |         mcList[i].cx = radius * Math.cos(theta) * Math.sin(phi);
140 |         mcList[i].cy = radius * Math.sin(theta) * Math.sin(phi);
141 |         mcList[i].cz = radius * Math.cos(phi);
142 | 
143 |         aA[i].style.left = mcList[i].cx + oDiv.offsetWidth / 2 - mcList[i].offsetWidth / 2 + 'px';
144 |         aA[i].style.top = mcList[i].cy + oDiv.offsetHeight / 2 - mcList[i].offsetHeight / 2 + 'px';
145 |     }
146 | }
147 | 
148 | function doPosition() {
149 |     var l = oDiv.offsetWidth / 2;
150 |     var t = oDiv.offsetHeight / 2;
151 |     for (var i = 0; i < mcList.length; i++) {
152 |         if (mcList[i].on) {
153 |             continue;
154 |         }
155 |         var aAs = aA[i].style;
156 |         if (mcList[i].alpha > 0.1) {
157 |             if (aAs.display != '')
158 |                 aAs.display = '';
159 |         } else {
160 |             if (aAs.display != 'none')
161 |                 aAs.display = 'none';
162 |             continue;
163 |         }
164 |         aAs.left = mcList[i].cx + l - mcList[i].offsetWidth / 2 + 'px';
165 |         aAs.top = mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px';
166 |         //aAs.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';
167 |         //aAs.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+100*mcList[i].alpha+")";
168 |         aAs.filter = "alpha(opacity=" + 100 * mcList[i].alpha + ")";
169 |         aAs.zIndex = mcList[i].zIndex;
170 |         aAs.opacity = mcList[i].alpha;
171 |     }
172 | }
173 | 
174 | function sineCosine(a, b, c) {
175 |     sa = Math.sin(a * dtr);
176 |     ca = Math.cos(a * dtr);
177 |     sb = Math.sin(b * dtr);
178 |     cb = Math.cos(b * dtr);
179 |     sc = Math.sin(c * dtr);
180 |     cc = Math.cos(c * dtr);
181 | }


--------------------------------------------------------------------------------
/css/publish.css:
--------------------------------------------------------------------------------
  1 | .publishBlog {
  2 |     padding-bottom: 10px;
  3 |     overflow: hidden;
  4 |     background: rgba(255, 255, 255, .9);
  5 |     border-radius: 10px;
  6 | }
  7 | 
  8 | .publishBlog > form > ul > li:nth-child(n+2) > div > i {
  9 |     margin-right: 10px;
 10 |     font-size: 16px;
 11 |     color: #EE2C2C;
 12 |     line-height: 36px;
 13 | }
 14 | 
 15 | .publishBlog > form > ul > li {
 16 |     padding-left: 40px;
 17 |     overflow: hidden;
 18 | }
 19 | 
 20 | .publishBlog > form > ul > li:nth-child(n+2) {
 21 |     padding-top: 2px;
 22 |     padding-bottom: 30px;
 23 | }
 24 | 
 25 | .publishBlog > form > ul > li > div {
 26 |     position: relative;
 27 | }
 28 | 
 29 | .publishBlog > form > ul > li > div:first-child {
 30 |     width: 60%;
 31 | }
 32 | 
 33 | .publishBlog > form > ul > li > div:nth-child(2) {
 34 |     width: 40%;
 35 | }
 36 | 
 37 | .uploadImg {
 38 |     float: left;
 39 |     background-position: 55% 50%;
 40 |     background-repeat: no-repeat;
 41 |     background-size: 35% 60%;
 42 | }
 43 | 
 44 | .uploadImg label {
 45 |     position: absolute;
 46 |     background-color: #EE2C2C;
 47 |     display: block;
 48 |     width: 100px;
 49 |     height: 30px;
 50 |     left: 80px;
 51 |     top: 88px;
 52 |     text-align: center;
 53 |     line-height: 30px;
 54 |     color: #FFFFFF;
 55 |     border-radius: 5px;
 56 | }
 57 | 
 58 | .uploadImg label i{
 59 |     margin-right: 8px;
 60 | }
 61 | 
 62 | .uploadImg > i {
 63 |     margin-right: 10px;
 64 |     font-size: 16px;
 65 |     color: #EE2C2C;
 66 |     line-height: 200px;
 67 | }
 68 | 
 69 | .uploadImg img {
 70 |     position: relative;
 71 |     top: 50px;
 72 |     left: 5px;
 73 | }
 74 | 
 75 | .uploadImg > span {
 76 |     margin-left: 12%;
 77 | }
 78 | 
 79 | #uploadImg {
 80 |     position: absolute;
 81 |     left: 55px;
 82 |     line-height: 200px;
 83 |     top: 0;
 84 |     opacity: 0;
 85 | }
 86 | 
 87 | .classify {
 88 |     float: right;
 89 | }
 90 | 
 91 | .classify i {
 92 |     margin-right: 10px;
 93 |     font-size: 16px;
 94 |     color: #EE2C2C;
 95 |     line-height: 200px;
 96 | }
 97 | 
 98 | .title {
 99 |     float: left;
100 | }
101 | 
102 | .top {
103 |     float: right;
104 | }
105 | 
106 | .top span {
107 |     font-size: 14px;
108 |     color: #787977;
109 |     margin-left: 8px;
110 |     display: none;
111 | }
112 | 
113 | #top {
114 |     display: none;
115 | }
116 | 
117 | #top:checked + .top_label:before {
118 |     background-color: #EE2C2C;
119 | }
120 | 
121 | .top_label {
122 |     position: relative;
123 |     height: 24px;
124 |     margin-bottom: 3px;
125 |     margin-left: 10px;
126 |     vertical-align: middle;
127 |     cursor: pointer;
128 | }
129 | 
130 | .top_label:before {
131 |     display: inline-block;
132 |     position: relative;
133 |     content: '';
134 |     width: 45px;
135 |     height: 24px;
136 |     background-color: #D8D8D8;
137 |     border-radius: 100px;
138 |     transition: background-color 0.3s
139 | }
140 | 
141 | .top_label:after {
142 |     position: absolute;
143 |     left: 4px;
144 |     top: 4px;
145 |     content: '';
146 |     width: 16px;
147 |     height: 16px;
148 |     border-radius: 50%;
149 |     background-color: #fff;
150 |     transition: transform 0.3s ease-in;
151 | }
152 | 
153 | #top:checked + .top_label:after {
154 |     transform: translateX(130%);
155 | }
156 | 
157 | #top:checked ~ span {
158 |     display: inline;
159 | }
160 | 
161 | .label {
162 |     float: left;
163 | }
164 | 
165 | .private {
166 |     float: right;
167 | }
168 | 
169 | .private span {
170 |     font-size: 14px;
171 |     color: #787977;
172 |     margin-left: 8px;
173 |     display: none;
174 | }
175 | 
176 | #private {
177 |     display: none;
178 | }
179 | 
180 | #private:checked + .private_label:before {
181 |     background-color: #EE2C2C;
182 | }
183 | 
184 | .private_label {
185 |     position: relative;
186 |     height: 24px;
187 |     margin-bottom: 3px;
188 |     margin-left: 10px;
189 |     vertical-align: middle;
190 |     cursor: pointer;
191 | }
192 | 
193 | .private_label:before {
194 |     display: inline-block;
195 |     position: relative;
196 |     content: '';
197 |     width: 45px;
198 |     height: 24px;
199 |     background-color: #D8D8D8;
200 |     border-radius: 100px;
201 |     transition: background-color 0.3s
202 | }
203 | 
204 | .private_label:after {
205 |     position: absolute;
206 |     left: 4px;
207 |     top: 4px;
208 |     content: '';
209 |     width: 16px;
210 |     height: 16px;
211 |     border-radius: 50%;
212 |     background-color: #fff;
213 |     transition: transform 0.3s ease-in;
214 | }
215 | 
216 | #private:checked + .private_label:after {
217 |     transform: translateX(130%);
218 | }
219 | 
220 | #private:checked ~ span {
221 |     display: inline;
222 | }
223 | 
224 | .publish_editor {
225 |     padding: 10px 40px;
226 | }
227 | 
228 | .admire {
229 |     float: left;
230 | }
231 | 
232 | .type {
233 |     float: right;
234 | }
235 | 
236 | .type span {
237 |     font-size: 14px;
238 |     color: #787977;
239 |     margin-left: 8px;
240 |     display: none;
241 | }
242 | 
243 | #type {
244 |     display: none;
245 | }
246 | 
247 | #type:checked + .type_label:before {
248 |     background-color: #EE2C2C;
249 | }
250 | 
251 | .type_label {
252 |     position: relative;
253 |     height: 24px;
254 |     margin-bottom: 3px;
255 |     margin-left: 10px;
256 |     vertical-align: middle;
257 |     cursor: pointer;
258 | }
259 | 
260 | .type_label:before {
261 |     display: inline-block;
262 |     position: relative;
263 |     content: '';
264 |     width: 45px;
265 |     height: 24px;
266 |     background-color: #D8D8D8;
267 |     border-radius: 100px;
268 |     transition: background-color 0.3s
269 | }
270 | 
271 | .type_label:after {
272 |     position: absolute;
273 |     left: 4px;
274 |     top: 4px;
275 |     content: '';
276 |     width: 16px;
277 |     height: 16px;
278 |     border-radius: 50%;
279 |     background-color: #fff;
280 |     transition: transform 0.3s ease-in;
281 | }
282 | 
283 | #type:checked + .type_label:after {
284 |     transform: translateX(130%);
285 | }
286 | 
287 | #type:checked ~ span {
288 |     display: inline;
289 | }
290 | 
291 | .commit_message {
292 |     display: table;
293 |     background: #EE2C2C;
294 |     border: none;
295 |     border-radius: 100px;
296 |     font-size: 16px;
297 |     color: #FFFFFF;
298 |     padding: 7px 28px;
299 |     margin: 0 auto;
300 |     cursor: pointer;
301 | }
302 | 
303 | input[type="text"] {
304 |     width: 240px;
305 |     height: 20px;
306 |     background: #F7F7F9;
307 |     border: 1px solid #D3D3D7;
308 |     border-radius: 5px;
309 |     font-size: 14px;
310 |     color: black;
311 |     padding: 6px 8px;
312 |     margin-left: 10px;
313 |     outline: none;
314 | }
315 | 
316 | .top_text {
317 |     border: 1px solid #ccc;
318 |     height: 180px;
319 |     border-top: none;
320 | }
321 | 
322 | .publish_text {
323 |     border: 1px solid #ccc;
324 |     min-height: 600px;
325 |     border-top: none;
326 | }
327 | 
328 | .publish_text > .w-e-text {
329 |     min-height: 600px;
330 | }
331 | 
332 | .article_top {
333 |     margin-left: 40px;
334 |     margin-top: 5px;
335 | }
336 | 


--------------------------------------------------------------------------------
/html/detail.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>AZJ~文章详情</title>
  6 |     <meta name="viewport"
  7 |           content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
  8 |     <link rel="shortcut icon" href="https://wx3.sinaimg.cn/small/007aGNoFly1fvysv6bn70g305k05k3yy.gif">
  9 |     <link rel="stylesheet" href="../../css/base.min.css">
 10 |     <link href="https://lib.baomitu.com/animate.css/3.7.0/animate.min.css" rel="stylesheet">
 11 |     <link href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 12 |     <link href="https://lib.baomitu.com/fancybox/3.5.2/jquery.fancybox.min.css" rel="stylesheet">
 13 |     <link rel="stylesheet" href="../../css/prettify.min.css">
 14 |     <link rel="stylesheet" href="../../css/detail.min.css">
 15 | </head>
 16 | <body>
 17 | <div id="header"></div>
 18 | <div class="w700">
 19 |     <div id="detail" class="wow fadeInUp"></div>
 20 |     <div class="wow fadeInUp detail_comment" data-wow-delay=".5s"><h3>发表评论</h3>
 21 |         <form id="comment_form"><input type="text" name="commentNum" hidden="hidden"><input type="text" name="articleId"
 22 |                                                                                             hidden="hidden"><textarea
 23 |                 type="text" name="commentContent" hidden="hidden"></textarea><input type="text" name="commentHeadImage"
 24 |                                                                                     hidden="hidden">
 25 |             <ul>
 26 |                 <li><label for="commentHeadImage">头像</label><img
 27 |                         src="https://wx1.sinaimg.cn/square/007aGNoFly1fvys0zjwv7j301o01o0si.jpg" alt="" width="38px"
 28 |                         height="38px" id="commentHeadImage"></li>
 29 |                 <li><label for="commentName">昵称（必填）</label><input type="text" name="commentName" id="commentName"></li>
 30 |                 <li><label for="commentEmail">邮箱（必填）</label><input type="text" id="commentEmail" name="commentEmail">
 31 |                 </li>
 32 |             </ul>
 33 |             <div class="detail_editor">
 34 |                 <div id="detail_toolbar" class="toolbar"></div>
 35 |                 <div id="detail_text" class="text"></div>
 36 |             </div>
 37 |             <p id="commentMsg"></p>
 38 |             <div class="submit_info"><input type="checkbox" id="email_comment" value="Y" name="emailReply"><label
 39 |                     for="email_comment" class="email_comment"><span>接收回复邮件通知</span></label><span class="commit_comment">确认提交</span>
 40 |             </div>
 41 |         </form>
 42 |     </div>
 43 |     <div class="article_comment">
 44 |         <ul id="commentBox"></ul>
 45 |     </div>
 46 | </div>
 47 | <div class="wow zoomIn headImg" hidden="hidden">
 48 |     <ul>
 49 |         <li><img src="https://wx1.sinaimg.cn/square/007aGNoFly1fvys0zjwv7j301o01o0si.jpg" alt="" width="38px"
 50 |                  height="38px"></li>
 51 |         <li><img src="https://wx4.sinaimg.cn/square/007aGNoFly1fvys1a2hldj30n60piaex.jpg" alt="" width="38px"
 52 |                  height="38px"></li>
 53 |         <li><img src="https://wx3.sinaimg.cn/square/007aGNoFly1fvys19qiw7j305l05kq2r.jpg" alt="" width="38px"
 54 |                  height="38px"></li>
 55 |         <li><img src="https://wx1.sinaimg.cn/square/007aGNoFly1fvys19ekd1j305k05kglj.jpg" alt="" width="38px"
 56 |                  height="38px"></li>
 57 |         <li><img src="https://wx3.sinaimg.cn/square/007aGNoFly1fvys193ccwj306y06ymx2.jpg" alt="" width="38px"
 58 |                  height="38px"></li>
 59 |         <li><img src="https://wx4.sinaimg.cn/square/007aGNoFly1fvys182hc8j305k05kq2t.jpg" alt="" width="38px"
 60 |                  height="38px"></li>
 61 |         <li><img src="https://wx1.sinaimg.cn/square/007aGNoFly1fvys16ku40j305k05ka9v.jpg" alt="" width="38px"
 62 |                  height="38px"></li>
 63 |         <li><img src="https://wx4.sinaimg.cn/square/007aGNoFly1fvys17or1qj305k05kq2w.jpg" alt="" width="38px"
 64 |                  height="38px"></li>
 65 |         <li><img src="https://wx1.sinaimg.cn/square/007aGNoFly1fvys15x834j308c08cdfp.jpg" alt="" width="38px"
 66 |                  height="38px"></li>
 67 |         <li><img src="https://wx2.sinaimg.cn/square/007aGNoFly1fvys14yoczj305k05kt8t.jpg" alt="" width="38px"
 68 |                  height="38px"></li>
 69 |         <li><img src="https://wx2.sinaimg.cn/square/007aGNoFly1fvys14myy2j305k05kt8r.jpg" alt="" width="38px"
 70 |                  height="38px"></li>
 71 |         <li><img src="https://wx3.sinaimg.cn/square/007aGNoFly1fvys14b1tgj30b40b4q37.jpg" alt="" width="38px"
 72 |                  height="38px"></li>
 73 |         <li><img src="https://wx2.sinaimg.cn/square/007aGNoFly1fvys140wp0g308c08caad.gif" alt="" width="38px"
 74 |                  height="38px"></li>
 75 |         <li><img src="https://wx4.sinaimg.cn/square/007aGNoFly1fvys13m3vej305k05k74s.jpg" alt="" width="38px"
 76 |                  height="38px"></li>
 77 |         <li><img src="https://wx4.sinaimg.cn/square/007aGNoFly1fvys13a439j305k05kq3j.jpg" alt="" width="38px"
 78 |                  height="38px"></li>
 79 |         <li><img src="https://wx3.sinaimg.cn/square/007aGNoFly1fvys11ciurj305k05k0t3.jpg" alt="" width="38px"
 80 |                  height="38px"></li>
 81 |         <li><img src="https://wx1.sinaimg.cn/square/007aGNoFly1fvys111d7tj305k05kmxz.jpg" alt="" width="38px"
 82 |                  height="38px"></li>
 83 |         <li><img src="https://wx3.sinaimg.cn/square/007aGNoFly1fvys10junuj305k05ka9v.jpg" alt="" width="38px"
 84 |                  height="38px"></li>
 85 |         <li><img src="https://wx1.sinaimg.cn/square/007aGNoFly1fvys10a3hvj305k05kaak.jpg" alt="" width="38px"
 86 |                  height="38px"></li>
 87 |         <li><img src="https://wx2.sinaimg.cn/square/007aGNoFly1fvys0zx7tgj305k05kdg4.jpg" alt="" width="38px"
 88 |                  height="38px"></li>
 89 |     </ul>
 90 |     <div class="close"><i class="fa fa-close"></i></div>
 91 | </div>
 92 | <div id="article_menu">
 93 |     <ul></ul>
 94 | </div>
 95 | <div class="article_share">
 96 |     分享
 97 |     <div class="share_item" title="分享到微信">
 98 |         <i class="fa fa-weixin"></i>微信
 99 |     </div>
100 |     <div class="share_item" title="分享到微博">
101 |         <i class="fa fa-weibo"></i>微博
102 |     </div>
103 |     <div class="share_item" title="分享到qq">
104 |         <i class="fa fa-qq"></i>QQ
105 |     </div>
106 | </div>
107 | <div id="footer"></div>
108 | <div id="fixBars"></div>
109 | <script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
110 | <script src="https://lib.baomitu.com/wow/1.0.1/wow.min.js"></script>
111 | <script src="https://lib.baomitu.com/sweetalert/2.1.0/sweetalert.min.js"></script>
112 | <script src="https://lib.baomitu.com/clipboard.js/2.0.1/clipboard.js"></script>
113 | <script src="https://lib.baomitu.com/prettify/r298/prettify.js"></script>
114 | <script src="https://lib.baomitu.com/fancybox/3.5.2/jquery.fancybox.js"></script>
115 | <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
116 | <script src="../../js/template/art-template.js"></script>
117 | <script src="../../js/editor.js"></script>
118 | <script src="../../js/template.min.js"></script>
119 | <script src="../../js/base.min.js"></script>
120 | <script src="../../js/detail.min.js"></script>
121 | <script>
122 |     (function(){
123 |         var bp = document.createElement('script');
124 |         var curProtocol = window.location.protocol.split(':')[0];
125 |         if (curProtocol === 'https') {
126 |             bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
127 |         }
128 |         else {
129 |             bp.src = 'http://push.zhanzhang.baidu.com/push.js';
130 |         }
131 |         var s = document.getElementsByTagName("script")[0];
132 |         s.parentNode.insertBefore(bp, s);
133 |     })();
134 | </script>
135 | </body>
136 | </html>


--------------------------------------------------------------------------------
/css/index.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     background-color: #F7F7F9;
  3 |     background-size: 0;
  4 | }
  5 | 
  6 | page {
  7 |     display: table;
  8 |     table-layout: fixed;
  9 |     padding: 40px 0;
 10 |     width: 100%;
 11 |     background-size: cover;
 12 |     overflow: hidden;
 13 |     position: relative;
 14 | }
 15 | 
 16 | .page1 {
 17 |     background-image: url(http://wx2.sinaimg.cn/large/007aGNoFly1fvysv5m71bj30ev09rdgu.jpg);
 18 |     height: 100vh;
 19 |     background-color: transparent;
 20 |     background-position: center;
 21 |     background-repeat: no-repeat;
 22 |     background-attachment: fixed;
 23 |     padding: 0;
 24 | }
 25 | 
 26 | .page1:after, .page3:after {
 27 |     content: "";
 28 |     position: absolute;
 29 |     top: 0;
 30 |     left: 0;
 31 |     z-index: 0;
 32 |     width: 100%;
 33 |     height: 100%;
 34 |     background-color: rgba(0, 0, 0, .5);
 35 | }
 36 | 
 37 | .table_cell {
 38 |     display: table-cell;
 39 |     vertical-align: middle;
 40 |     width: 100%;
 41 |     height: 100%;
 42 |     position: relative;
 43 |     z-index: 1;
 44 | }
 45 | 
 46 | .mText {
 47 |     text-align: center;
 48 |     color: #ffffff;
 49 | }
 50 | 
 51 | .mText h2 {
 52 |     font-size: 26px;
 53 |     letter-spacing: 8px;
 54 | }
 55 | 
 56 | .mText p {
 57 |     letter-spacing: 8px;
 58 |     margin: 20px 0;
 59 |     font-size: 16px;
 60 | }
 61 | 
 62 | #next {
 63 |     width: 40px;
 64 |     height: 40px;
 65 |     border-radius: 50%;
 66 |     position: absolute;
 67 |     bottom: 60px;
 68 |     left: 50%;
 69 |     margin-left: -24px;
 70 |     z-index: 0;
 71 |     -webkit-transition: all .5s ease-out;
 72 |     transition: all .5s ease-out;
 73 |     cursor: pointer;
 74 | }
 75 | 
 76 | #next:hover {
 77 |     background-color: #EE2C2C;
 78 | }
 79 | 
 80 | #next:after {
 81 |     display: inline-block;
 82 |     font-family: FontAwesome;
 83 |     content: "\f107";
 84 |     color: #ffffff;
 85 |     font-size: 2rem;
 86 |     width: 40px;
 87 |     height: 40px;
 88 |     text-align: center;
 89 |     line-height: 40px;
 90 | }
 91 | 
 92 | .page2 {
 93 |     width: 100%;
 94 |     position: relative;
 95 |     margin: 0 auto;
 96 |     font-family: "Microsoft YaHei Mono";
 97 | }
 98 | 
 99 | .article_box {
100 |     width: 100%;
101 |     height: 100%;
102 |     position: relative;
103 | }
104 | 
105 | .title {
106 |     text-align: center;
107 | }
108 | 
109 | .title h1 {
110 |     font-size: 20px;
111 |     padding-bottom: 50px;
112 |     position: relative;
113 | }
114 | 
115 | .title h1:after {
116 |     position: absolute;
117 |     width: 50px;
118 |     height: 2px;
119 |     content: "";
120 |     left: 50%;
121 |     margin-left: -25px;
122 |     bottom: 35px;
123 |     background-color: #EE2C2C;
124 | }
125 | 
126 | .page3 {
127 |     padding: 100px 0;
128 |     background-image: url(http://wx4.sinaimg.cn/large/007aGNoFly1fvysv60e57j30dc08cdg0.jpg);
129 |     background-position: center;
130 |     background-attachment: fixed;
131 |     background-repeat: no-repeat;
132 |     background-color: rgba(0, 0, 0, .5);
133 | }
134 | 
135 | .about_box {
136 |     width: 100%;
137 |     position: relative;
138 |     color: #ffffff;
139 |     font-family: "Microsoft YaHei Mono";
140 | }
141 | 
142 | .about {
143 |     width: 1000px;
144 |     margin: auto;
145 |     text-align: center;
146 | }
147 | 
148 | .about ul li {
149 |     display: inline-block;
150 |     width: 200px;
151 |     height: 46px;
152 |     margin: 10px;
153 |     border: 1px solid #b4b4b4;
154 |     position: relative;
155 |     text-align: center;
156 |     overflow: hidden;
157 | }
158 | 
159 | .about ul li:after {
160 |     content: "";
161 |     display: block;
162 |     position: absolute;
163 |     left: 0;
164 |     top: 0;
165 |     width: 0;
166 |     height: 46px;
167 |     background-color: #EE2C2C;
168 |     opacity: 0.5;
169 |     -webkit-transition: width 0.6s;
170 |     -moz-transition: width 0.6s;
171 |     -ms-transition: width 0.6s;
172 |     -o-transition: width 0.6s;
173 |     transition: width 0.6s;
174 | }
175 | 
176 | .about ul li:hover:after {
177 |     width: 200px;
178 | }
179 | 
180 | .about ul li a {
181 |     display: block;
182 |     line-height: 26px;
183 |     padding: 10px;
184 |     color: #ffffff;
185 |     text-decoration: none;
186 |     font-size: 14px;
187 |     position: relative;
188 |     z-index: 1;
189 | }
190 | 
191 | .about ul li a i {
192 |     margin-right: 5px;
193 |     font-size: 14px;
194 |     width: 20px;
195 | }
196 | 
197 | .links {
198 |     width: 1000px;
199 |     margin: 0 auto;
200 |     overflow: hidden;
201 | }
202 | 
203 | .links ul li {
204 |     float: left;
205 |     width: 25%;
206 | }
207 | 
208 | .link {
209 |     float: left;
210 |     padding: 0 30px 20px;
211 | }
212 | 
213 | .link a {
214 |     display: block;
215 |     padding: 20px;
216 |     min-width: 170px;
217 |     border-radius: 10px;
218 | }
219 | 
220 | .page5 {
221 |     background-color: #232328;
222 |     padding: 60px 0;
223 | }
224 | 
225 | .footer_box {
226 |     width: 1000px;
227 |     position: relative;
228 |     margin: 0 auto;
229 |     padding-left: 60px;
230 | }
231 | 
232 | .footer > li {
233 |     display: block;
234 |     float: left;
235 |     line-height: 40px;
236 |     width: 33.33%;
237 | }
238 | 
239 | .footer > li > h2 {
240 |     color: #FFFFFF;
241 |     font-size: 22px;
242 |     margin-bottom: 10px;
243 |     letter-spacing: 5px;
244 | }
245 | 
246 | .footer > li > p {
247 |     color: #eee;
248 | }
249 | 
250 | .footer > li > a {
251 |     display: block;
252 |     line-height: 38px;
253 |     width: 68px;
254 |     text-align: center;
255 |     padding: 0 18px;
256 |     font-size: 14px;
257 |     border: none;
258 |     color: #ffffff;
259 |     border-radius: 2px;
260 |     background-color: rgba(238, 44, 44, .9);
261 |     margin-top: 15px;
262 | }
263 | 
264 | .footer > li > button:hover {
265 |     background-color: rgba(238, 44, 44, 1);
266 | }
267 | 
268 | .footer > li > h3 {
269 |     color: #ffffff;
270 |     font-size: 18px;
271 |     margin-bottom: 10px;
272 |     font-weight: 100;
273 | }
274 | 
275 | .all_link > li {
276 |     float: left;
277 |     width: 50%;
278 |     line-height: 38px;
279 |     font-size: 14px;
280 | }
281 | 
282 | .all_link > li > a {
283 |     color: #eeeeee;
284 |     letter-spacing: 1px;
285 | }
286 | 
287 | .all_link > li > a:hover{
288 |     color: #EE2C2C;
289 | }
290 | 
291 | .all_link > li > a > i {
292 |     margin-right: 5px;
293 | }
294 | 
295 | #contact > li {
296 |     color: #eeeeee;
297 |     line-height: 38px;
298 |     font-size: 14px;
299 | }
300 | 
301 | #contact > li > i {
302 |     margin-right: 10px;
303 |     width: 20px;
304 |     font-size: 16px;
305 |     color: #eeeeee;
306 | }
307 | 
308 | #loading {
309 |     background-color: #374140;
310 |     height: 100%;
311 |     width: 100%;
312 |     position: fixed;
313 |     z-index: 1;
314 |     margin-top: 0;
315 |     top: 0;
316 | }
317 | 
318 | #loading-center {
319 |     width: 100%;
320 |     height: 100%;
321 |     position: relative;
322 | }
323 | 
324 | #loading-center-absolute {
325 |     position: absolute;
326 |     left: calc(50% - 75px);
327 |     top: calc(50% - 75px);
328 |     height: 150px;
329 |     width: 150px;
330 | }
331 | 
332 | .object {
333 |     width: 20px;
334 |     height: 20px;
335 |     background-color: #fff;
336 |     float: left;
337 |     margin-right: 15px;
338 |     margin-left: 15px;
339 |     margin-top: 65px;
340 |     -moz-border-radius: 50% 50% 50% 50%;
341 |     -webkit-border-radius: 50% 50% 50% 50%;
342 |     border-radius: 50% 50% 50% 50%;
343 | }
344 | 
345 | #object_one {
346 |     -webkit-animation: object 1.5s infinite;
347 |     animation: object 1.5s infinite;
348 | }
349 | 
350 | #object_two {
351 |     -webkit-animation: object 1.5s infinite;
352 |     animation: object 1.5s infinite;
353 |     -webkit-animation-delay: .25s;
354 |     animation-delay: .25s;
355 | }
356 | 
357 | #object_three {
358 |     -webkit-animation: object 1.5s infinite;
359 |     animation: object 1.5s infinite;
360 |     -webkit-animation-delay: .5s;
361 |     animation-delay: .5s;
362 | }
363 | 
364 | @-webkit-keyframes object {
365 |     75% {
366 |         -webkit-transform: scale(0);
367 |         -moz-transform: scale(0);
368 |         -ms-transform: scale(0);
369 |         -o-transform: scale(0);
370 |         transform: scale(0);
371 |     }
372 | }
373 | 
374 | @keyframes object{
375 |     75% {
376 |         -webkit-transform: scale(0);
377 |         -moz-transform: scale(0);
378 |         -ms-transform: scale(0);
379 |         -o-transform: scale(0);
380 |         transform: scale(0);
381 |     }
382 | }
383 | 
384 | @media screen and (max-width: 500px){
385 |     .page1 {
386 |         background-position: 58%;
387 |     }
388 | 
389 |     .about{
390 |         width: 90%;
391 |     }
392 | 
393 |     .links{
394 |         width: 90%;
395 |     }
396 | 
397 |     .links ul li{
398 |         width: 50%;
399 |     }
400 | 
401 |     .link{
402 |         padding: 0;
403 |     }
404 | 
405 |     .link a{
406 |         min-width: 120px;
407 |         width: 120px;
408 |     }
409 | 
410 |     .article_info > i:nth-child(n+2){
411 |         margin-left: 20px;
412 |     }
413 | 
414 |     .footer_box{
415 |         width: 90%;
416 |         padding: 0 15px;
417 |     }
418 | 
419 |     .footer > li{
420 |         width: 100%;
421 |         margin-bottom: 30px;
422 |     }
423 | 
424 |     .footer > li:last-child{
425 |         margin-bottom: 0;
426 |     }
427 | }
428 | 


--------------------------------------------------------------------------------
/css/article.css:
--------------------------------------------------------------------------------
  1 | .blog_content{
  2 |     width: 68%;
  3 |     float: left;
  4 | }
  5 | 
  6 | .blog_classify{
  7 |     width: 28%;
  8 |     float: right;
  9 | }
 10 | 
 11 | .blog_classify>ul>li{
 12 |     margin: 0 0 40px 0;
 13 | }
 14 | 
 15 | .blog_content ul li{
 16 |     display: block;
 17 |     position: relative;
 18 |     background: rgba(255,255,255,.9);
 19 |     margin: 0 0 30px 0;
 20 |     padding: 20px;
 21 |     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
 22 |     cursor: pointer;
 23 |     border-radius: 10px;
 24 |     overflow: hidden;
 25 | }
 26 | 
 27 | .blog_content ul li:hover .line{
 28 |     height: 25px;
 29 | }
 30 | 
 31 | .blog_image{
 32 |     position: relative;
 33 |     float: left;
 34 |     width: 220px;
 35 |     height: 130px;
 36 |     overflow: hidden;
 37 |     margin: 0 20px 0 0;
 38 | }
 39 | 
 40 | .blog_image:before{
 41 |     content: "Loading";
 42 |     position: absolute;
 43 |     left: 0;
 44 |     width: 100%;
 45 |     height: 100%;
 46 |     line-height: 130px;
 47 |     text-align: center;
 48 |     font-size: 25px;
 49 |     background-color: rgba(0,0,0,0.01);
 50 |     color: #b7b6b6;
 51 |     z-index: -1;
 52 | }
 53 | 
 54 | .blog_image>img{
 55 |     width: 100%;
 56 |     height: 100%;
 57 |     -webkit-transition: all .5s;
 58 |     -moz-transition: all .5s;
 59 |     -ms-transition: all .5s;
 60 |     -o-transition: all .5s;
 61 |     transition: all .5s;
 62 | }
 63 | 
 64 | .blog_image>img:hover{
 65 |     -webkit-transform: scale(1.05);
 66 |     -moz-transform: scale(1.05);
 67 |     -ms-transform: scale(1.05);
 68 |     -o-transform: scale(1.05);
 69 |     transform: scale(1.05);
 70 | }
 71 | 
 72 | .blog_content ul li:before:hover{
 73 |     -webkit-transform: scale(1.1);
 74 |     -moz-transform: scale(1.1);
 75 |     -ms-transform: scale(1.1);
 76 |     -o-transform: scale(1.1);
 77 |     transform: scale(1.1);
 78 | }
 79 | 
 80 | 
 81 | .blog_content ul li h3{
 82 |     font-family: inherit;
 83 |     font-style: inherit;
 84 |     color: #444;
 85 |     font-size: 14px;
 86 |     line-height: 20px;
 87 |     padding: 0 0 7px 0;
 88 | }
 89 | 
 90 | .blog_content ul li h3>span{
 91 |     color: #2D93CA;
 92 | }
 93 | 
 94 | .article_content{
 95 |     font-size: 13px;
 96 |     color: #777;
 97 |     height: 78px;
 98 |     overflow: hidden;
 99 |     line-height: 26px;
100 |     display: -webkit-box;
101 |     -ms-text-overflow: ellipsis;
102 |     text-overflow: ellipsis;
103 |     -webkit-box-orient:vertical;
104 |     -webkit-line-clamp:3;
105 | }
106 | 
107 | .article_content img{
108 |     height: 50px;
109 |     width: 50px;
110 | }
111 | 
112 | .blog_content ul li>span{
113 |     position: relative;
114 |     top: 22px;
115 |     color: rgba(0,0,0,.5);
116 | }
117 | 
118 | .read_more{
119 |     position: absolute;
120 |     right: -1px;
121 |     bottom: 10px;
122 |     display: block;
123 |     background: #3690cf;
124 |     color: #fff;
125 |     line-height: 30px;
126 |     padding: 0 12px;
127 |     border-right: none;
128 |     border-radius: 2px 0 0 2px;
129 |     cursor: pointer;
130 | }
131 | 
132 | .article{
133 |     display: block;
134 |     overflow: hidden;
135 |     position: relative;
136 | }
137 | 
138 | .article_classify{
139 |     display: block;
140 |     padding: 5px 6px;
141 |     background-color: rgba(0,0,0,.6);
142 |     position: absolute;
143 |     color: #FFFFFF;
144 |     top: 30px;
145 |     left: 30px;
146 |     text-align: center;
147 |     font-size: 12px;
148 | }
149 | 
150 | .article_classify:hover{
151 |     background-color: #EE2C2C;
152 | }
153 | 
154 | .blog_content ul li span i{
155 |     margin: 0 5px 0 2px;
156 | }
157 | 
158 | .blog_date{
159 |     float: right;
160 |     margin-right: 80px;
161 | }
162 | 
163 | .blog_comment{
164 |     margin-left: 15px;
165 | }
166 | 
167 | .line{
168 |     position: absolute;
169 |     background: #EE2C2C;
170 |     top: 20px;
171 |     left: -1px;
172 |     width: 5px;
173 |     height: 0;
174 |     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
175 |     -webkit-transition: height .5s;
176 |     -moz-transition: height .5s;
177 |     -ms-transition: height .5s;
178 |     -o-transition: height .5s;
179 |     transition: height .5s;
180 | }
181 | 
182 | .blog_heart{
183 |     margin-left: 15px;
184 | }
185 | 
186 | .top{
187 |     width: 80px;
188 |     height: 20px;
189 |     background-color: red;
190 |     line-height: 20px;
191 |     position: absolute;
192 |     text-align: center;
193 |     font-size: 13px;
194 |     transform: rotate(45deg);
195 |     right: -20px;
196 |     top: 9px;
197 |     color: #fff;
198 |     cursor: default;
199 | }
200 | 
201 | .article_info{
202 |     position: relative;
203 |     top: 10px;
204 |     color: #666;
205 |     font-size: 13px;
206 | }
207 | 
208 | .classify{
209 |     display: block;
210 |     background-color: rgba(255,255,255,.9);;
211 | }
212 | 
213 | .classify li{
214 |     display: block;
215 |     position: relative;
216 |     background-color: rgba(255,255,255,.9);;
217 |     height: 40px;
218 |     line-height: 40px;
219 |     border-bottom: 1px solid #eeeeee;
220 |     counter-increment:nums;
221 |     cursor: pointer;
222 | }
223 | 
224 | .classify li:hover{
225 |     background-color: #f8f9f7;
226 | }
227 | 
228 | #allClassify{
229 |     cursor: pointer;
230 | }
231 | 
232 | #allClassify:hover{
233 |     color: #2ea7e0;
234 | }
235 | 
236 | .classify_title{
237 |     display: block;
238 |     color: #EE2C2C;
239 |     font-size: 16px;
240 |     line-height: 40px;
241 |     padding-bottom: 5px;
242 |     background-color: rgba(255,255,255,.9);
243 |     border-bottom: 1px solid #EE2C2C;
244 |     text-align: center;
245 | }
246 | 
247 | .classify li:last-child{
248 |     border-bottom: none;
249 | }
250 | 
251 | .classify li a{
252 |     margin: 0 60px;
253 |     color: #787977;
254 |     font-size: 14px;
255 | }
256 | 
257 | .blog_classify>ul>li>ul>li>a:before{
258 |     content: counter(nums,decimal);
259 |     width: 20px;
260 |     height: 20px;
261 |     line-height: 20px;
262 |     text-align: center;
263 |     position: absolute;
264 |     left: 25px;
265 |     top: 9px;
266 |     border-radius: 100%;
267 |     background-color: #edefee;
268 |     text-shadow: 0 1px 0 rgba(255,255,255,.5);
269 | }
270 | 
271 | .blog_classify>ul>li>ul>li:first-child>a:before{
272 |     margin-top: 10px;
273 |     background-color: #e24d46;
274 |     color: #ffffff;
275 |     text-shadow: none;
276 | }
277 | 
278 | .blog_classify>ul>li>ul>li:nth-child(2)>a:before{
279 |     background-color: #2ea7e0;
280 |     color: #ffffff;
281 |     text-shadow: none;
282 | }
283 | 
284 | .blog_classify>ul>li>ul>li:nth-child(3)>a:before{
285 |     background-color: #6bc30d;
286 |     color: #ffffff;
287 |     text-shadow: none;
288 | }
289 | 
290 | .blog_classify>ul>li>ul>li:first-child{
291 |     padding-top: 10px;
292 | }
293 | 
294 | .blog_classify>ul>li>ul>li:last-child{
295 |     padding-bottom: 10px;
296 | }
297 | 
298 | .hot_article{
299 |     background-color: rgba(255,255,255,.9);;
300 | }
301 | 
302 | .hot_article li{
303 |     display: block;
304 |     line-height: 38px;
305 |     position: relative;
306 |     counter-increment: nums;
307 |     padding-left: 30px;
308 |     overflow: hidden;
309 |     word-wrap: normal!important;
310 |     white-space: nowrap;
311 |     text-overflow: ellipsis;
312 | }
313 | 
314 | .hot_article li a{
315 |     color: #787977;
316 |     font-size: 13px;
317 |     margin: 0 30px;
318 | }
319 | 
320 | .hot_article li a:hover{
321 |     color: #EE2C2C;
322 |     text-decoration: underline;
323 | }
324 | 
325 | .hot_tag{
326 |     position: relative;
327 |     overflow: hidden;
328 |     height: 330px;
329 |     background-color: rgba(255,255,255,.9);;
330 | }
331 | 
332 | #tag_cloud_widget span{
333 |     display: block;
334 |     position: absolute;
335 |     font-size: 14px;
336 |     color: #fff;
337 |     text-align: center;
338 |     text-overflow: ellipsis;
339 |     white-space: nowrap;
340 |     top: 0;
341 |     left: 0;
342 |     padding: 3px 5px;
343 |     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
344 |     line-height: 15px;
345 |     background: #999;
346 |     cursor: pointer;
347 | }
348 | 
349 | #tag_cloud_widget{
350 |     position: relative;
351 |     width: 100%;
352 |     height: 240px;
353 |     overflow: hidden;
354 |     margin: 10px auto 10px;
355 | }
356 | 
357 | #tag_cloud_widget span:nth-child(n) {
358 |     white-space: nowrap;
359 |     _white-space: normal;
360 |     *white-space: normal;
361 |     overflow: hidden;
362 |     text-overflow: ellipsis;
363 | }
364 | 
365 | #tag_cloud_widget span:nth-child(2n) {
366 |     background: #d1a601;
367 | }
368 | 
369 | #tag_cloud_widget span:nth-child(3n) {
370 |     background: #286c4a;
371 | }
372 | 
373 | #tag_cloud_widget span:nth-child(5n) {
374 |     background: #518ab2;
375 | }
376 | 
377 | #tag_cloud_widget span:nth-child(4n) {
378 |     background: #c91d13;
379 | }
380 | 
381 | .left1{
382 |     display: none;
383 | }
384 | 
385 | .left2{
386 |     display: none;
387 | }
388 | 
389 | .top1{
390 |     display: none;
391 | }
392 | 
393 | @media screen and (max-width: 500px){
394 |     /*article页面适配手机*/
395 |     .blog_content{
396 |         width: 100%;
397 |     }
398 | 
399 |     .blog_image{
400 |         width: 100%;
401 |         height: 100%;
402 |         min-height: 150px;
403 |         margin: 37px 20px 0 0;
404 |     }
405 | 
406 |     .blog_content ul li h3{
407 |         position: absolute;
408 |         width: 100%;
409 |     }
410 | 
411 |     .article{
412 |         overflow: initial;
413 |     }
414 | 
415 |     .read_more{
416 |         display: none;
417 |     }
418 | 
419 |     .article_classify{
420 |         top: 47px;
421 |     }
422 | 
423 |     .article_content{
424 |         width: 100%;
425 |     }
426 | 
427 |     .blog_date{
428 |         margin-right: 0;
429 |     }
430 | 
431 |     .blog_comment{
432 |         margin-left: 8px;
433 |     }
434 | 
435 |     .blog_heart{
436 |         margin-left: 8px;
437 |     }
438 | 
439 |     .article_info{
440 |         font-size: 12px;
441 |     }
442 | 
443 |     .mobile_close{
444 |         display: none;
445 |     }
446 | 
447 |     .hot_mobile_open{
448 |         width: 70%;
449 |         position: fixed;
450 |         top: 10%;
451 |         right: 0;
452 |         background-color: rgba(255,255,255,.4);
453 |         z-index: 200;
454 |         overflow-y: scroll;
455 |     }
456 | 
457 |     .top_mobile_open{
458 |         width: 70%;
459 |         position: fixed;
460 |         bottom: 20%;
461 |         right: 0;
462 |         background-color: rgba(255,255,255,.4);
463 |         z-index: 200;
464 |         overflow-y: scroll;
465 |     }
466 | 
467 |     .label_mobile_open{
468 |         width: 80%;
469 |         position: fixed;
470 |         top: calc(51% - 135px);
471 |         right: 0;
472 |         background-color: rgba(255,255,255,.4);
473 |         z-index: 200;
474 |         overflow-y: scroll;
475 |     }
476 | 
477 |     .classify_mobile_open{
478 |         width: 90%;
479 |         position: fixed;
480 |         top: 70px;
481 |         left: 5%;
482 |         z-index: 200;
483 |     }
484 | 
485 |     .left1{
486 |         display: block;
487 |         position: fixed;
488 |         right: 0;
489 |         top: 20%;
490 |         width: 15px;
491 |         background: rgba(238, 44, 44,.8);
492 |         color: #fff;
493 |         font-size: 16px;
494 |         padding: 30px 0;
495 |         z-index: 9999;
496 |         text-align: center;
497 |     }
498 | 
499 |     .left2{
500 |         display: block;
501 |         position: fixed;
502 |         right: 0;
503 |         bottom: 20%;
504 |         width: 15px;
505 |         background-color: rgba(165, 51, 225, .8);
506 |         color: #fff;
507 |         font-size: 16px;
508 |         padding: 30px 0;
509 |         z-index: 9999;
510 |         text-align: center;
511 |     }
512 | 
513 |     .top1{
514 |         display: block;
515 |         position: fixed;
516 |         width: 40px;
517 |         height: 40px;
518 |         text-align: center;
519 |         left: 25px;
520 |         top: 12px;
521 |         color: rgba(255,255,255,.8);
522 |         background-color: rgba(0,0,0,.1);
523 |         border-radius: 50%;
524 |         z-index: 500;
525 |     }
526 | 
527 |     .top1:hover{
528 |         background-color: #EE2C2C;
529 |     }
530 | 
531 |     .top1 i{
532 |         line-height: 40px;
533 |         font-size: 18px;
534 |     }
535 | 
536 |     #tag_cloud_widget{
537 |         right: 13%;
538 |         overflow: initial;
539 |     }
540 | }
541 | 
542 | 


--------------------------------------------------------------------------------
/css/base.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     padding: 0;
  3 |     margin: 0;
  4 | }
  5 | 
  6 | ul li {
  7 |     list-style: none;
  8 | }
  9 | 
 10 | a, img {
 11 |     text-decoration: none;
 12 |     border: none;
 13 | }
 14 | 
 15 | label {
 16 |     display: inline-block;
 17 | }
 18 | 
 19 | ::selection {
 20 |     background: #EE2C2C;
 21 |     color: white;
 22 | }
 23 | 
 24 | input::-webkit-input-placeholder {
 25 |     color: #c9c9c9;
 26 |     font-size: 12px;
 27 | }
 28 | 
 29 | input::placeholder {
 30 |     color: #c9c9c9;
 31 |     font-size: 12px;
 32 | }
 33 | 
 34 | body{
 35 |     background-image: url(http://wx3.sinaimg.cn/large/007aGNoFly1fvzkpbekttj30ev0b1acd.jpg);
 36 |     background-attachment: fixed;
 37 |     background-size: cover;
 38 |     background-repeat: no-repeat;
 39 | }
 40 | 
 41 | nav {
 42 |     width: 100%;
 43 |     height: 60px;
 44 |     position: fixed;
 45 |     top: 0;
 46 |     background-color: rgba(0, 0, 0, .3);
 47 |     z-index: 501;
 48 | }
 49 | 
 50 | select {
 51 |     width: 138px;
 52 |     height: 32px;
 53 |     font-size: 14px;
 54 |     line-height: 32px;
 55 |     border: 1px solid #ddd;
 56 |     border-radius: 4px;
 57 |     background-color: #f4f4f4;
 58 |     box-sizing: border-box;
 59 |     padding-left: 16px;
 60 |     margin-left: 10px;
 61 |     outline: none;
 62 | }
 63 | 
 64 | iframe{
 65 |     display: none;
 66 | }
 67 | 
 68 | .nav {
 69 |     width: 1000px;
 70 |     margin: 0 auto;
 71 |     height: 60px;
 72 |     line-height: 60px;
 73 |     text-align: center;
 74 | }
 75 | 
 76 | .nav-logo{
 77 |     float: left;
 78 | }
 79 | 
 80 | .nav-logo h1 {
 81 |     margin-left: 10px;
 82 |     font-size: 18px;
 83 |     color: #ffffff;
 84 |     float: left;
 85 | }
 86 | 
 87 | .nav-logo img {
 88 |     float: left;
 89 |     width: 30px;
 90 |     height: 30px;
 91 |     margin: 15px 0;
 92 | }
 93 | 
 94 | .nav-content {
 95 |     float: right;
 96 | }
 97 | 
 98 | .nav-content ul li {
 99 |     float: left;
100 |     margin-right: 30px;
101 | }
102 | 
103 | .nav-content a {
104 |     font-size: 12px;
105 |     letter-spacing: 1px;
106 |     color: #FFFFFF;
107 | }
108 | 
109 | .nav-content a:hover {
110 |     color: #EE2C2C;
111 | }
112 | 
113 | #header{
114 |     overflow: hidden;
115 | }
116 | 
117 | menu {
118 |     display: block;
119 |     width: 40px;
120 |     height: 40px;
121 |     background-color: rgba(0, 0, 0, .1);
122 |     border-radius: 50%;
123 |     z-index: 502;
124 |     position: fixed;
125 |     right: 55px;
126 |     top: 12px;
127 |     cursor: pointer;
128 | }
129 | 
130 | menu span {
131 |     display: block;
132 |     height: 2px;
133 |     width: 26px;
134 |     background-color: #ffffff;
135 |     line-height: 10px;
136 |     margin: 5px auto;
137 | }
138 | 
139 | .menu_close span:first-child {
140 |     margin-top: 12px;
141 | 
142 | }
143 | 
144 | .menu_open span:first-child {
145 |     margin-top: 18px;
146 |     transform: rotate(45deg);
147 |     -o-transform: rotate(45deg);
148 |     -moz-transform: rotate(45deg);
149 |     -ms-transform: rotate(45deg);
150 |     -webkit-transform: rotate(45deg);
151 |     -webkit-transition: all .5s;
152 |     -moz-transition: all .5s;
153 |     -ms-transition: all .5s;
154 |     -o-transition: all .5s;
155 |     transition: all .5s;
156 | }
157 | 
158 | .menu_open span:nth-last-of-type(2) {
159 |     margin-top: -6px;
160 |     -webkit-transform: rotate(-45deg);
161 |     -moz-transform: rotate(-45deg);
162 |     -ms-transform: rotate(-45deg);
163 |     -o-transform: rotate(-45deg);
164 |     transform: rotate(-45deg);
165 |     -webkit-transition: all .5s;
166 |     -moz-transition: all .5s;
167 |     -ms-transition: all .5s;
168 |     -o-transition: all .5s;
169 |     transition: all .5s;
170 | }
171 | 
172 | .menu_close span:last-child, .menu_close span:last-child, .menu_close span:nth-last-of-type(2) {
173 |     -webkit-transform: rotate(0);
174 |     -moz-transform: rotate(0);
175 |     -ms-transform: rotate(0);
176 |     -o-transform: rotate(0);
177 |     transform: rotate(0);
178 |     -webkit-transition: all .5s;
179 |     -moz-transition: all .5s;
180 |     -ms-transition: all .5s;
181 |     -o-transition: all .5s;
182 |     transition: all .5s;
183 | }
184 | 
185 | .menu_open span:last-child {
186 |     display: none;
187 | }
188 | 
189 | menu:hover {
190 |     background-color: #EE2C2C;
191 | }
192 | 
193 | .fix_bar {
194 |     position: fixed;
195 |     right: 15px;
196 |     bottom: 15px;
197 |     z-index: 999;
198 | }
199 | 
200 | .fix_bar li {
201 |     width: 50px;
202 |     height: 50px;
203 |     line-height: 50px;
204 |     margin-bottom: 2px;
205 |     text-align: center;
206 |     cursor: pointer;
207 |     font-size: 20px;
208 |     background-color: rgba(0, 0, 0, .5);
209 |     color: #fff;
210 |     border-radius: 2px;
211 |     opacity: .95;
212 | }
213 | 
214 | .searchBox {
215 |     padding: 14px;
216 |     background-color: grey;
217 |     border-radius: 15px 15px 0 0;
218 | }
219 | 
220 | .searchBox input {
221 |     display: block;
222 |     width: 100%;
223 |     height: 40px;
224 |     border-radius: 40px;
225 |     border: none;
226 |     text-align: center;
227 |     outline: none;
228 | }
229 | 
230 | .searchBox i {
231 |     float: right;
232 |     position: relative;
233 |     right: 16px;
234 |     bottom: 28px;
235 |     color: rgba(0, 0, 0, .5);
236 |     cursor: pointer;
237 | }
238 | 
239 | .box_bounceInDown_fixed {
240 |     position: fixed;
241 |     top: auto;
242 |     bottom: 200px;
243 |     width: 280px;
244 |     margin-top: 0;
245 |     -webkit-animation-duration: 1s;
246 |     animation-duration: 1s;
247 |     -webkit-animation-fill-mode: both;
248 |     animation-fill-mode: both;
249 |     -webkit-animation-name: bounceInDown;
250 |     animation-name: bounceInDown;
251 | }
252 | 
253 | .box_bounceInUp_fixed {
254 |     position: fixed;
255 |     top: auto;
256 |     bottom: 200px;
257 |     width: 230px;
258 |     margin-top: 0;
259 |     -webkit-animation-duration: 1s;
260 |     animation-duration: 1s;
261 |     -webkit-animation-fill-mode: both;
262 |     animation-fill-mode: both;
263 |     -webkit-animation-name: bounceInUp;
264 |     animation-name: bounceInUp;
265 | }
266 | 
267 | .about_me {
268 |     background-color: rgba(255, 255, 255, 0.9);
269 |     padding: 29px 29px 10px 29px;
270 |     margin-bottom: 30px;
271 |     border-radius: 10px;
272 | }
273 | 
274 | .about_me h2, .weChat h2 {
275 |     font-size: 22px;
276 |     text-align: center;
277 |     color: #EE2C2C;
278 | }
279 | 
280 | .about_me p {
281 |     line-height: 30px;
282 |     color: #232328;
283 |     font-size: 12px;
284 | }
285 | 
286 | .about_me > div > p:first-child {
287 |     margin-top: 20px;
288 | }
289 | 
290 | .about_me img {
291 |     display: block;
292 |     margin: auto;
293 |     border-radius: 50px;
294 |     margin-top: 20px;
295 | }
296 | 
297 | .weChat {
298 |     background-color: #FFFFFF;
299 |     padding-top: 29px;
300 |     margin-top: 30px;
301 |     opacity: 0.9;
302 |     border-radius: 10px;
303 |     text-align: center;
304 | }
305 | 
306 | .w1000 {
307 |     width: 1000px;
308 |     margin: 0 auto;
309 |     margin-top: 80px;
310 |     overflow: hidden;
311 | }
312 | 
313 | .w700{
314 |     max-width: 700px;
315 |     margin: 70px auto 0 auto;
316 |     padding: 30px;
317 |     border-radius:4px;
318 |     background-color: rgba(255,255,255,.95);
319 | }
320 | 
321 | .link img {
322 |     float: left;
323 |     width: 40px;
324 |     height: 40px;
325 |     border-radius: 100%;
326 | }
327 | 
328 | .link h3 {
329 |     text-align: left;
330 |     padding: 5px 0 0 5px;
331 |     font-size: 16px;
332 |     font-weight: normal;
333 |     color: #000000;
334 |     height: 20px;
335 |     line-height: 20px;
336 |     display: -webkit-box;
337 |     -ms-text-overflow: ellipsis;
338 |     text-overflow: ellipsis;
339 |     -webkit-box-orient: vertical;
340 |     -webkit-line-clamp: 1;
341 |     overflow: hidden;
342 | }
343 | 
344 | .link p {
345 |     height: 56px;
346 |     overflow: hidden;
347 |     margin-top: 22px;
348 |     font-size: 12px;
349 |     line-height: 28px;
350 |     color: #232328;
351 |     display: -webkit-box;
352 |     -ms-text-overflow: ellipsis;
353 |     text-overflow: ellipsis;
354 |     -webkit-box-orient: vertical;
355 |     -webkit-line-clamp: 2;
356 | }
357 | 
358 | #overLay {
359 |     width: 100%;
360 |     height: 100%;
361 |     background-color: rgba(0, 0, 0, 0.5);
362 |     position: fixed;
363 |     top: 0;
364 |     left: 0;
365 |     z-index: 198;
366 | }
367 | 
368 | #footer {
369 |     text-align: center;
370 |     padding: 20px;
371 | }
372 | 
373 | #footer a {
374 |     display: inline-block;
375 |     width: 30px;
376 |     height: 30px;
377 |     background-color: rgba(0, 0, 0, .3);
378 |     text-align: center;
379 |     line-height: 30px;
380 |     text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
381 |     font-size: 14px;
382 |     margin-left: 15px;
383 |     margin-right: 0;
384 |     border-radius: 100%;
385 |     text-decoration: none;
386 |     color: rgba(255, 255, 255, .7);
387 |     -webkit-transition: all .3s;
388 |     transition: all .3s;
389 | }
390 | 
391 | #footer a:hover {
392 |     font-size: 16px;
393 | }
394 | 
395 | #footer a:first-child:hover {
396 |     background-color: #b952c5;
397 | }
398 | 
399 | #footer a:nth-child(2):hover {
400 |     background-color: #EE2C2C;
401 | }
402 | 
403 | #footer a:nth-child(3):hover {
404 |     background-color: #668f20;
405 | }
406 | 
407 | #footer a:nth-child(4):hover {
408 |     background-color: #06a2c9;
409 | }
410 | 
411 | .swal-modal{
412 |     opacity: 0;
413 |     pointer-events: none;
414 |     background-color: rgba(33, 34, 32, .6);
415 |     text-align: center;
416 |     border-radius: 5px;
417 |     position: static;
418 |     margin: 20px auto;
419 |     display: inline-block;
420 |     vertical-align: middle;
421 |     -webkit-transform: scale(1);
422 |     transform: scale(1);
423 |     -webkit-transform-origin: 50% 50%;
424 |     transform-origin: 50% 50%;
425 |     z-index: 10001;
426 |     transition: opacity .2s,-webkit-transform .3s;
427 |     transition: transform .3s,opacity .2s;
428 |     transition: transform .3s,opacity .2s,-webkit-transform .3s;
429 | }
430 | 
431 | .swal-text:last-child {
432 |     margin-bottom: 15px;
433 | }
434 | 
435 | .swal-text:first-child {
436 |     margin-top: 15px;
437 | }
438 | 
439 | .swal-text {
440 |     font-size: 14px;
441 |     position: relative;
442 |     float: none;
443 |     line-height: normal;
444 |     vertical-align: top;
445 |     text-align: left;
446 |     display: inline-block;
447 |     margin: 0;
448 |     padding: 0 10px;
449 |     font-weight: 400;
450 |     color: rgba(255,255,255,.95);
451 |     max-width: calc(100% - 20px);
452 |     overflow-wrap: break-word;
453 |     box-sizing: border-box;
454 | }
455 | 
456 | .w-e-toolbar .w-e-active i{
457 |     color: #EE2C2C !important;
458 | }
459 | 
460 | .toolbar {
461 |     background-color: #eeeeee;
462 |     border: 1px solid #c9c9c9;
463 |     font-size: 12px;
464 | }
465 | .text {
466 |     border: 1px solid #ccc;
467 |     height: 180px;
468 |     border-top: none;
469 | }
470 | 
471 | input:not([type~="checkbox"]):not([type~="radio"]), textarea, button, .btn {
472 |     -webkit-transition:all .2s;
473 |     -moz-transition:all .2s;
474 |     -ms-transition:all .2s;
475 |     -o-transition:all .2s;
476 |     transition:all .2s;
477 |     border-radius: 3px;
478 |     -webkit-appearance: none;
479 | }
480 | 
481 | input[type="text"]:focus {
482 |     background-color: #fff!important;
483 | }
484 | 
485 | .w-e-item img {
486 |     width: 78px;
487 |     height: 78px;
488 |     display: inline-block;
489 |     margin: 3px;
490 |     padding: 6px;
491 |     border-radius: 5px;
492 |     background: #EEEEEE;
493 | }
494 | 
495 | .w-e-panel-container .w-e-panel-tab-title {
496 |     list-style: none;
497 |     display: -webkit-box;
498 |     display: -ms-flexbox;
499 |     display: flex;
500 |     font-size: 16px;
501 |     margin: 2px 10px 0 10px;
502 |     border-bottom: 1px solid #f1f1f1;
503 |     box-sizing: border-box;
504 | }
505 | 
506 | .w-e-panel-container{
507 |     width: 500px!important;
508 | }
509 | 
510 | .w-e-text:focus{
511 |     background-color: rgba(255,255,255,.9);
512 | }
513 | 
514 | @media screen and (max-width: 500px){
515 | 
516 |     .w1000{
517 |         width: 90%;
518 |     }
519 | 
520 |     menu{
521 |         right: 25px;
522 |     }
523 | 
524 |     nav{
525 |         height: auto;
526 |     }
527 | 
528 |     .nav {
529 |         width: 90%;
530 |         height: auto;
531 |     }
532 | 
533 |     .nav-content{
534 |         float: none;
535 |         text-align: left;
536 |         padding-top: 60px;
537 |         padding-left: 8px;
538 |     }
539 | 
540 | 
541 | }
542 | 


--------------------------------------------------------------------------------
/js/template/art-template.js:
--------------------------------------------------------------------------------
1 | /*! art-template@4.12.2 for browser | https://github.com/aui/art-template */
2 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.template=t():e.template=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e["default"]}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=6)}([function(e,t,n){(function(t){e.exports=!1;try{e.exports="[object process]"===Object.prototype.toString.call(t.process)}catch(n){}}).call(t,n(4))},function(e,t,n){"use strict";var r=n(8),i=n(3),o=n(23),s=function(e,t){t.onerror(e,t);var n=function(){return"{Template Error}"};return n.mappings=[],n.sourcesContent=[],n},a=function c(e){var t=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};"string"!=typeof e?t=e:t.source=e,t=i.$extend(t),e=t.source,!0===t.debug&&(t.cache=!1,t.minimize=!1,t.compileDebug=!0),t.compileDebug&&(t.minimize=!1),t.filename&&(t.filename=t.resolveFilename(t.filename,t));var n=t.filename,a=t.cache,u=t.caches;if(a&&n){var p=u.get(n);if(p)return p}if(!e)try{e=t.loader(n,t),t.source=e}catch(d){var l=new o({name:"CompileError",path:n,message:"template not found: "+d.message,stack:d.stack});if(t.bail)throw l;return s(l,t)}var f=void 0,h=new r(t);try{f=h.build()}catch(l){if(l=new o(l),t.bail)throw l;return s(l,t)}var m=function(e,n){try{return f(e,n)}catch(l){if(!t.compileDebug)return t.cache=!1,t.compileDebug=!0,c(t)(e,n);if(l=new o(l),t.bail)throw l;return s(l,t)()}};return m.mappings=f.mappings,m.sourcesContent=f.sourcesContent,m.toString=function(){return f.toString()},a&&n&&u.set(n,m),m};a.Compiler=r,e.exports=a},function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=/((['"])(?:(?!\2|\\).|\\(?:\r\n|[\s\S]))*(\2)?|`(?:[^`\\$]|\\[\s\S]|\$(?!\{)|\$\{(?:[^{}]|\{[^}]*\}?)*\}?)*(`)?)|(\/\/.*)|(\/\*(?:[^*]|\*(?!\/))*(\*\/)?)|(\/(?!\*)(?:\[(?:(?![\]\\]).|\\.)*\]|(?![\/\]\\]).|\\.)+\/(?:(?!\s*(?:\b|[\u0080-\uFFFF$\\'"~({]|[+\-!](?!=)|\.?\d))|[gmiyu]{1,5}\b(?![\u0080-\uFFFF$\\]|\s*(?:[+\-*%&|^<>!=?({]|\/(?![\/*])))))|(0[xX][\da-fA-F]+|0[oO][0-7]+|0[bB][01]+|(?:\d*\.\d+|\d+\.?)(?:[eE][+-]?\d+)?)|((?!\d)(?:(?!\s)[$\w\u0080-\uFFFF]|\\u[\da-fA-F]{4}|\\u\{[\da-fA-F]+\})+)|(--|\+\+|&&|\|\||=>|\.{3}|(?:[+\-\/%&|^]|\*{1,2}|<{1,2}|>{1,3}|!=?|={1,2})=?|[?~.,:;[\](){}])|(\s+)|(^$|[\s\S])/g,t.matchToToken=function(e){var t={type:"invalid",value:e[0]};return e[1]?(t.type="string",t.closed=!(!e[3]&&!e[4])):e[5]?t.type="comment":e[6]?(t.type="comment",t.closed=!!e[7]):e[8]?t.type="regex":e[9]?t.type="number":e[10]?t.type="name":e[11]?t.type="punctuator":e[12]&&(t.type="whitespace"),t}},function(e,t,n){"use strict";function r(){this.$extend=function(e){return e=e||{},s(e,e instanceof r?e:this)}}var i=n(0),o=n(12),s=n(13),a=n(14),c=n(15),u=n(16),p=n(17),l=n(18),f=n(19),h=n(20),m=n(22),d={source:null,filename:null,rules:[f,l],escape:!0,debug:!!i&&"production"!==process.env.NODE_ENV,bail:!0,cache:!0,minimize:!0,compileDebug:!1,resolveFilename:m,include:a,htmlMinifier:h,htmlMinifierOptions:{collapseWhitespace:!0,minifyCSS:!0,minifyJS:!0,ignoreCustomFragments:[]},onerror:c,loader:p,caches:u,root:"/",extname:".art",ignore:[],imports:o};r.prototype=d,e.exports=new r},function(e,t){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(r){"object"==typeof window&&(n=window)}e.exports=n},function(e,t){},function(e,t,n){"use strict";var r=n(7),i=n(1),o=n(24),s=function(e,t){return t instanceof Object?r({filename:e},t):i({filename:e,source:t})};s.render=r,s.compile=i,s.defaults=o,e.exports=s},function(e,t,n){"use strict";var r=n(1),i=function(e,t,n){return r(e,n)(t)};e.exports=i},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var i=n(9),o=n(11),s="$data",a="$imports",c="print",u="include",p="extend",l="block",f="$$out",h="$$line",m="$$blocks",d="$$slice",v="$$from",g="$$options",y=function(e,t){return Object.hasOwnProperty.call(e,t)},b=JSON.stringify,x=function(){function e(t){var n,i,y=this;r(this,e);var b=t.source,x=t.minimize,w=t.htmlMinifier;if(this.options=t,this.stacks=[],this.context=[],this.scripts=[],this.CONTEXT_MAP={},this.ignore=[s,a,g].concat(t.ignore),this.internal=(n={},n[f]="''",n[h]="[0,0]",n[m]="arguments[1]||{}",n[v]="null",n[c]="function(){var s=''.concat.apply('',arguments);"+f+"+=s;return s}",n[u]="function(src,data){var s="+g+".include(src,data||"+s+",arguments[2]||"+m+","+g+");"+f+"+=s;return s}",n[p]="function(from){"+v+"=from}",n[d]="function(c,p,s){p="+f+";"+f+"='';c();s="+f+";"+f+"=p+s;return s}",n[l]="function(){var a=arguments,s;if(typeof a[0]==='function'){return "+d+"(a[0])}else if("+v+"){if(!"+m+"[a[0]]){"+m+"[a[0]]="+d+"(a[1])}else{"+f+"+="+m+"[a[0]]}}else{s="+m+"[a[0]];if(typeof s==='string'){"+f+"+=s}else{s="+d+"(a[1])}return s}}",n),this.dependencies=(i={},i[c]=[f],i[u]=[f,g,s,m],i[p]=[v,u],i[l]=[d,v,f,m],i),this.importContext(f),t.compileDebug&&this.importContext(h),x)try{b=w(b,t)}catch(E){}this.source=b,this.getTplTokens(b,t.rules,this).forEach(function(e){e.type===o.TYPE_STRING?y.parseString(e):y.parseExpression(e)})}return e.prototype.getTplTokens=function(){return o.apply(undefined,arguments)},e.prototype.getEsTokens=function(e){return i(e)},e.prototype.getVariables=function(e){var t=!1;return e.filter(function(e){return"whitespace"!==e.type&&"comment"!==e.type}).filter(function(e){return"name"===e.type&&!t||(t="punctuator"===e.type&&"."===e.value,!1)}).map(function(e){return e.value})},e.prototype.importContext=function(e){var t=this,n="",r=this.internal,i=this.dependencies,o=this.ignore,c=this.context,u=this.options,p=u.imports,l=this.CONTEXT_MAP;y(l,e)||-1!==o.indexOf(e)||(y(r,e)?(n=r[e],y(i,e)&&i[e].forEach(function(e){return t.importContext(e)})):n="$escape"===e||"$each"===e||y(p,e)?a+"."+e:s+"."+e,l[e]=n,c.push({name:e,value:n}))},e.prototype.parseString=function(e){var t=e.value;if(t){var n=f+"+="+b(t);this.scripts.push({source:t,tplToken:e,code:n})}},e.prototype.parseExpression=function(e){var t=this,n=e.value,r=e.script,i=r.output,s=this.options.escape,a=r.code;i&&(a=!1===s||i===o.TYPE_RAW?f+"+="+r.code:f+"+=$escape("+r.code+")");var c=this.getEsTokens(a);this.getVariables(c).forEach(function(e){return t.importContext(e)}),this.scripts.push({source:n,tplToken:e,code:a})},e.prototype.checkExpression=function(e){for(var t=[[/^\s*}[\w\W]*?{?[\s;]*$/,""],[/(^[\w\W]*?\([\w\W]*?(?:=>|\([\w\W]*?\))\s*{[\s;]*$)/,"$1})"],[/(^[\w\W]*?\([\w\W]*?\)\s*{[\s;]*$)/,"$1}"]],n=0;n<t.length;){if(t[n][0].test(e)){var r;e=(r=e).replace.apply(r,t[n]);break}n++}try{return new Function(e),!0}catch(i){return!1}},e.prototype.build=function(){var e=this.options,t=this.context,n=this.scripts,r=this.stacks,i=this.source,c=e.filename,l=e.imports,d=[],x=y(this.CONTEXT_MAP,p),w=0,E=function(e,t){var n=t.line,i=t.start,o={generated:{line:r.length+w+1,column:1},original:{line:n+1,column:i+1}};return w+=e.split(/\n/).length-1,o},k=function(e){return e.replace(/^[\t ]+|[\t ]$/g,"")};r.push("function("+s+"){"),r.push("'use strict'"),r.push(s+"="+s+"||{}"),r.push("var "+t.map(function(e){return e.name+"="+e.value}).join(",")),e.compileDebug?(r.push("try{"),n.forEach(function(e){e.tplToken.type===o.TYPE_EXPRESSION&&r.push(h+"=["+[e.tplToken.line,e.tplToken.start].join(",")+"]"),d.push(E(e.code,e.tplToken)),r.push(k(e.code))}),r.push("}catch(error){"),r.push("throw {"+["name:'RuntimeError'","path:"+b(c),"message:error.message","line:"+h+"[0]+1","column:"+h+"[1]+1","source:"+b(i),"stack:error.stack"].join(",")+"}"),r.push("}")):n.forEach(function(e){d.push(E(e.code,e.tplToken)),r.push(k(e.code))}),x&&(r.push(f+"=''"),r.push(u+"("+v+","+s+","+m+")")),r.push("return "+f),r.push("}");var T=r.join("\n");try{var O=new Function(a,g,"return "+T)(l,e);return O.mappings=d,O.sourcesContent=[i],O}catch(F){for(var $=0,j=0,S=0,_=void 0;$<n.length;){var C=n[$];if(!this.checkExpression(C.code)){j=C.tplToken.line,S=C.tplToken.start,_=C.code;break}$++}throw{name:"CompileError",path:c,message:F.message,line:j+1,column:S+1,source:i,generated:_,stack:F.stack}}},e}();x.CONSTS={DATA:s,IMPORTS:a,PRINT:c,INCLUDE:u,EXTEND:p,BLOCK:l,OPTIONS:g,OUT:f,LINE:h,BLOCKS:m,SLICE:d,FROM:v,ESCAPE:"$escape",EACH:"$each"},e.exports=x},function(e,t,n){"use strict";var r=n(10),i=n(2)["default"],o=n(2).matchToToken,s=function(e){return e.match(i).map(function(e){return i.lastIndex=0,o(i.exec(e))}).map(function(e){return"name"===e.type&&r(e.value)&&(e.type="keyword"),e})};e.exports=s},function(e,t,n){"use strict";var r={"abstract":!0,await:!0,"boolean":!0,"break":!0,"byte":!0,"case":!0,"catch":!0,"char":!0,"class":!0,"const":!0,"continue":!0,"debugger":!0,"default":!0,"delete":!0,"do":!0,"double":!0,"else":!0,"enum":!0,"export":!0,"extends":!0,"false":!0,"final":!0,"finally":!0,"float":!0,"for":!0,"function":!0,"goto":!0,"if":!0,"implements":!0,"import":!0,"in":!0,"instanceof":!0,"int":!0,"interface":!0,"let":!0,"long":!0,"native":!0,"new":!0,"null":!0,"package":!0,"private":!0,"protected":!0,"public":!0,"return":!0,"short":!0,"static":!0,"super":!0,"switch":!0,"synchronized":!0,"this":!0,"throw":!0,"transient":!0,"true":!0,"try":!0,"typeof":!0,"var":!0,"void":!0,"volatile":!0,"while":!0,"with":!0,"yield":!0};e.exports=function(e){return r.hasOwnProperty(e)}},function(e,t,n){"use strict";function r(e,t,n,r){var i=new String(e);return i.line=t,i.start=n,i.end=r,i}var i=function(e,t){for(var n=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{},i=[{type:"string",value:e,line:0,start:0,end:e.length}],o=0;o<t.length;o++)!function(e){for(var t=e.test.ignoreCase?"ig":"g",o=e.test.source+"|^$|[\\w\\W]",s=new RegExp(o,t),a=0;a<i.length;a++)if("string"===i[a].type){for(var c=i[a].line,u=i[a].start,p=i[a].end,l=i[a].value.match(s),f=[],h=0;h<l.length;h++){var m=l[h];e.test.lastIndex=0;var d=e.test.exec(m),v=d?"expression":"string",g=f[f.length-1],y=g||i[a],b=y.value;u=y.line===c?g?g.end:u:b.length-b.lastIndexOf("\n")-1,p=u+m.length;var x={type:v,value:m,line:c,start:u,end:p};if("string"===v)g&&"string"===g.type?(g.value+=m,g.end+=m.length):f.push(x);else{d[0]=new r(d[0],c,u,p);var w=e.use.apply(n,d);x.script=w,f.push(x)}c+=m.split(/\n/).length-1}i.splice.apply(i,[a,1].concat(f)),a+=f.length-1}}(t[o]);return i};i.TYPE_STRING="string",i.TYPE_EXPRESSION="expression",i.TYPE_RAW="raw",i.TYPE_ESCAPE="escape",e.exports=i},function(e,t,n){"use strict";(function(t){function r(e){return"string"!=typeof e&&(e=e===undefined||null===e?"":"function"==typeof e?r(e.call(e)):JSON.stringify(e)),e}function i(e){var t=""+e,n=a.exec(t);if(!n)return e;var r="",i=void 0,o=void 0,s=void 0;for(i=n.index,o=0;i<t.length;i++){switch(t.charCodeAt(i)){case 34:s="&#34;";break;case 38:s="&#38;";break;case 39:s="&#39;";break;case 60:s="&#60;";break;case 62:s="&#62;";break;default:continue}o!==i&&(r+=t.substring(o,i)),o=i+1,r+=s}return o!==i?r+t.substring(o,i):r}/*! art-template@runtime | https://github.com/aui/art-template */
3 |     var o=n(0),s=Object.create(o?t:window),a=/["&'<>]/;s.$escape=function(e){return i(r(e))},s.$each=function(e,t){if(Array.isArray(e))for(var n=0,r=e.length;n<r;n++)t(e[n],n);else for(var i in e)t(e[i],i)},e.exports=s}).call(t,n(4))},function(e,t,n){"use strict";var r=Object.prototype.toString,i=function(e){return null===e?"Null":r.call(e).slice(8,-1)},o=function s(e,t){var n=void 0,r=i(e);if("Object"===r?n=Object.create(t||{}):"Array"===r&&(n=[].concat(t||[])),n){for(var o in e)Object.hasOwnProperty.call(e,o)&&(n[o]=s(e[o],n[o]));return n}return e};e.exports=o},function(e,t,n){"use strict";var r=function(e,t,r,i){var o=n(1);return i=i.$extend({filename:i.resolveFilename(e,i),bail:!0,source:null}),o(i)(t,r)};e.exports=r},function(e,t,n){"use strict";var r=function(e){console.error(e.name,e.message)};e.exports=r},function(e,t,n){"use strict";var r={__data:Object.create(null),set:function(e,t){this.__data[e]=t},get:function(e){return this.__data[e]},reset:function(){this.__data={}}};e.exports=r},function(e,t,n){"use strict";var r=n(0),i=function(e){if(r){return n(5).readFileSync(e,"utf8")}var t=document.getElementById(e);return t.value||t.innerHTML};e.exports=i},function(e,t,n){"use strict";var r={test:/{{([@#]?)[ \t]*(\/?)([\w\W]*?)[ \t]*}}/,use:function(e,t,n,i){var o=this,s=o.options,a=o.getEsTokens(i),c=a.map(function(e){return e.value}),u={},p=void 0,l=!!t&&"raw",f=n+c.shift(),h=function(t,n){console.warn((s.filename||"anonymous")+":"+(e.line+1)+":"+(e.start+1)+"\nTemplate upgrade: {{"+t+"}} -> {{"+n+"}}")};switch("#"===t&&h("#value","@value"),f){case"set":i="var "+c.join("").trim();break;case"if":i="if("+c.join("").trim()+"){";break;case"else":var m=c.indexOf("if");~m?(c.splice(0,m+1),i="}else if("+c.join("").trim()+"){"):i="}else{";break;case"/if":i="}";break;case"each":p=r._split(a),p.shift(),"as"===p[1]&&(h("each object as value index","each object value index"),p.splice(1,1));i="$each("+(p[0]||"$data")+",function("+(p[1]||"$value")+","+(p[2]||"$index")+"){";break;case"/each":i="})";break;case"block":p=r._split(a),p.shift(),i="block("+p.join(",").trim()+",function(){";break;case"/block":i="})";break;case"echo":f="print",h("echo value","value");case"print":case"include":case"extend":if(0!==c.join("").trim().indexOf("(")){p=r._split(a),p.shift(),i=f+"("+p.join(",")+")";break}default:if(~c.indexOf("|")){var d=a.reduce(function(e,t){var n=t.value,r=t.type;return"|"===n?e.push([]):"whitespace"!==r&&"comment"!==r&&(e.length||e.push([]),":"===n&&1===e[e.length-1].length?h("value | filter: argv","value | filter argv"):e[e.length-1].push(t)),e},[]).map(function(e){return r._split(e)});i=d.reduce(function(e,t){var n=t.shift();return t.unshift(e),"$imports."+n+"("+t.join(",")+")"},d.shift().join(" ").trim())}l=l||"escape"}return u.code=i,u.output=l,u},_split:function(e){e=e.filter(function(e){var t=e.type;return"whitespace"!==t&&"comment"!==t});for(var t=0,n=e.shift(),r=/\]|\)/,i=[[n]];t<e.length;){var o=e[t];"punctuator"===o.type||"punctuator"===n.type&&!r.test(n.value)?i[i.length-1].push(o):i.push([o]),n=o,t++}return i.map(function(e){return e.map(function(e){return e.value}).join("")})}};e.exports=r},function(e,t,n){"use strict";var r={test:/<%(#?)((?:==|=#|[=-])?)[ \t]*([\w\W]*?)[ \t]*(-?)%>/,use:function(e,t,n,r){return n={"-":"raw","=":"escape","":!1,"==":"raw","=#":"raw"}[n],t&&(r="/*"+r+"*/",n=!1),{code:r,output:n}}};e.exports=r},function(e,t,n){"use strict";var r=n(0),i=function(e,t){if(r){var i,o=n(21).minify,s=t.htmlMinifierOptions,a=t.rules.map(function(e){return e.test});(i=s.ignoreCustomFragments).push.apply(i,a),e=o(e,s)}return e};e.exports=i},function(e,t){!function(e){e.noop=function(){}}("object"==typeof e&&"object"==typeof e.exports?e.exports:window)},function(e,t,n){"use strict";var r=n(0),i=/^\.+\//,o=function(e,t){if(r){var o=n(5),s=t.root,a=t.extname;if(i.test(e)){var c=t.filename,u=!c||e===c,p=u?s:o.dirname(c);e=o.resolve(p,e)}else e=o.resolve(s,e);o.extname(e)||(e+=a)}return e};e.exports=o},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function s(e){var t=e.name,n=e.source,r=e.path,i=e.line,o=e.column,s=e.generated,a=e.message;if(!n)return a;var c=n.split(/\n/),u=Math.max(i-3,0),p=Math.min(c.length,i+3),l=c.slice(u,p).map(function(e,t){var n=t+u+1;return(n===i?" >> ":"    ")+n+"| "+e}).join("\n");return(r||"anonymous")+":"+i+":"+o+"\n"+l+"\n\n"+t+": "+a+(s?"\n   generated: "+s:"")}var a=function(e){function t(n){r(this,t);var o=i(this,e.call(this,n.message));return o.name="TemplateError",o.message=s(n),Error.captureStackTrace&&Error.captureStackTrace(o,o.constructor),o}return o(t,e),t}(Error);e.exports=a},function(e,t,n){"use strict";e.exports=n(3)}])});


--------------------------------------------------------------------------------
/js/article.js:
--------------------------------------------------------------------------------
  1 | const article = `<ul>
  2 |                    {{each articleList article index}}
  3 |                         <li class="wow zoomIn">
  4 |                             <a href="/detail.html?id={{article.id}}" target="_blank" class="article">
  5 |                                 <div class="blog_image">
  6 |                                     <img src="{{article.image}}">
  7 |                                 </div>
  8 |                                 <h3>{{if article.type!="Y"}}<span>【转载】</span>{{/if}}{{article.title}}</h3>
  9 |                                 <div>
 10 |                                     <div class="article_content">{{@article.topContent}}</div>
 11 |                                     <div class="article_info">
 12 |                                         <span><i class="fa fa-eye"></i>{{article.viewNum}}</span>
 13 |                                         <span class="blog_heart"><i class="fa fa-heart"></i>{{article.praiseNum}}</span>
 14 |                                         <span class="blog_comment"><i class="fa fa-commenting-o"></i>{{article.commentNum}}</span>
 15 |                                         <span class="blog_date"><i class="fa fa-clock-o"></i>{{article.updateTime}}</span>
 16 |                                     </div>
 17 |                                 </div>
 18 |                             </a>
 19 |                             <div class="article_classify" name="{{article.classifyId}}">
 20 |                                     {{article.classifyName}}
 21 |                             </div>
 22 |                             <a class="line"></a>
 23 |                             {{if article.special=="top" }}
 24 |                                  <div class="top">置顶</div>
 25 |                             {{/if}}
 26 |                             <a href="/detail.html?id={{article.id}}" target="_blank" class="read_more">阅读全文</a>
 27 |                         </li>
 28 |                     {{/each}}
 29 |             </ul>`;
 30 | 
 31 | 
 32 | const classify = ` {{each classifyList classify index}}
 33 |                     <li name="{{classify.id}}" clickNum="{{classify.clickNum}}">
 34 |                         <a>{{classify.classifyName}}</a>
 35 |                     </li>
 36 |                  {{/each}}`;
 37 | 
 38 | const hot_article = ` {{each hotArticleList hotArticle index}}
 39 |                             <li>
 40 |                                 <a href="/detail.html?id={{hotArticle.id}}" target="_blank">{{hotArticle.title}}</a>
 41 |                             </li>
 42 |                        {{/each}}`;
 43 | 
 44 | const label = `{{each labelList label index}}
 45 |                     <span name="{{label.id}}">{{label.labelName}}</span>
 46 |                  {{/each}}`;
 47 | 
 48 | const line = "<p style='color: rgba(255,255,255,.9);text-align: center;font-size:14px;letter-spacing: 2px;font-weight: bold'>我也是有底线的!</p>";
 49 | 
 50 | let pageNum = 1;
 51 | let articleRender = template.compile(article);
 52 | let exist = false;
 53 | 
 54 | //定义分类，标签，搜索
 55 | let is_classify_id = 0;
 56 | let is_search_keywords = "";
 57 | let is_label_id = "";
 58 | 
 59 | $(function () {
 60 |     getPageArticle(pageNum);
 61 |     let classifyRender = template.compile(classify);
 62 |     $.ajax({
 63 |         url: '/classify/getClassify.action',
 64 |         type: 'POST',
 65 |         success: function (res) {
 66 |             let classifyData = {
 67 |                 classifyList: res.data
 68 |             };
 69 |             let classifyHtml = classifyRender(classifyData);
 70 |             $('#classify').html(classifyHtml);
 71 |             //分类的点击事件
 72 |             $('#classify>li').each(function () {
 73 |                 $(this).click(function () {
 74 |                     let classifyId = $(this).attr('name');
 75 | 
 76 |                     getArticleByClassify(classifyId);
 77 |                 });
 78 |             });
 79 |         }
 80 |     });
 81 | 
 82 |     let hotArticleRender = template.compile(hot_article);
 83 |     $.ajax({
 84 |         url: '/article/hotArticle.action',
 85 |         type: 'POST',
 86 |         success: function (res) {
 87 |             let hotArticleData = {
 88 |                 hotArticleList: res.data
 89 |             };
 90 |             let hotArticleHtml = hotArticleRender(hotArticleData);
 91 |             $('#hot_article').html(hotArticleHtml);
 92 |         }
 93 |     });
 94 | 
 95 |     $.ajax({
 96 |         url: '/article/topArticle.action',
 97 |         type: 'POST',
 98 |         success: function (res) {
 99 |             let topArticleData = {
100 |                 hotArticleList: res.data
101 |             };
102 |             let topArticleHtml = hotArticleRender(topArticleData);
103 |             $('#top_article').html(topArticleHtml);
104 |         }
105 |     });
106 | 
107 |     let labelRender = template.compile(label);
108 |     $.ajax({
109 |         url: '/label/getLabel.action',
110 |         type: 'POST',
111 |         success: function (res) {
112 |             let labelData = {
113 |                 labelList: res.data
114 |             };
115 |             let labelHtml = labelRender(labelData);
116 |             $('#tag_cloud_widget').html(labelHtml);
117 |             tagCloud();
118 |             $('#tag_cloud_widget>span').each(function () {
119 |                 $(this).click(function () {
120 |                     // 清楚分类和搜索的标记
121 |                     is_classify_id = 0;
122 |                     is_search_keywords = "";
123 |                     pageNum = 1;
124 |                     exist = false;
125 |                     // 获取labelId
126 |                     let labelId = $(this).attr('name');
127 |                     is_label_id = labelId;
128 |                     getPageArticle(pageNum);
129 |                     $('body,html').animate({scrollTop: 0}, 300);
130 |                 });
131 |             });
132 |         }
133 |     });
134 | 
135 |     if (document.body.offsetWidth <= 500) {
136 |         $('.left1').click(function () {
137 |             let hot_article = $("li[name='hot_article']");
138 |             let article_label = $("li[name='article_label']");
139 |             let classify = $('#classifyBox');
140 |             if ($('.left1').text() == '<') {
141 |                 $('#overLay').removeAttr('hidden');
142 |                 $('.left1').text('>');
143 |                 if (article_label.hasClass('label_mobile_open')) {
144 |                     article_label.removeAttr('style');
145 |                     article_label.removeClass('fadeInUp');
146 |                     article_label.addClass('fadeOutDown');
147 |                     $('.left2').text('<');
148 |                 }
149 |                 if (classify.hasClass('classify_mobile_open')) {
150 |                     classify.removeAttr('style');
151 |                     classify.removeClass('bounceInDown');
152 |                     classify.addClass('bounceOutDown');
153 |                 }
154 |                 if (hot_article.hasClass('hot_mobile_open')) {
155 |                     hot_article.removeAttr('style');
156 |                     hot_article.addClass('fadeInRight');
157 |                     hot_article.removeClass('fadeOutRight');
158 |                 } else {
159 |                     hot_article.addClass('hot_mobile_open');
160 |                     hot_article.removeClass('mobile_close');
161 |                 }
162 |             } else {
163 |                 hot_article.removeAttr('style');
164 |                 hot_article.removeClass('fadeInRight');
165 |                 hot_article.addClass('fadeOutRight');
166 |                 $('#overLay').attr('hidden', 'hidden');
167 |                 $('.left1').text('<');
168 |             }
169 | 
170 |             $('#overLay').click(function () {
171 |                 hot_article.removeAttr('style');
172 |                 hot_article.removeClass('fadeInRight');
173 |                 hot_article.addClass('fadeOutRight');
174 |                 $('#overLay').attr('hidden', 'hidden');
175 |                 $('.left1').text('<');
176 |             });
177 |         });
178 | 
179 |         $('.left2').click(function () {
180 |             let hot_article = $("li[name='hot_article']");
181 |             let article_label = $("li[name='article_label']");
182 |             let classify = $('#classifyBox');
183 |             if (hot_article.hasClass('hot_mobile_open')) {
184 |                 hot_article.removeAttr('style');
185 |                 hot_article.removeClass('fadeInRight');
186 |                 hot_article.addClass('fadeOutRight');
187 |                 $('.left1').text('<');
188 |             }
189 |             if (classify.hasClass('classify_mobile_open')) {
190 |                 classify.removeAttr('style');
191 |                 classify.removeClass('bounceInDown');
192 |                 classify.addClass('bounceOutDown');
193 |             }
194 |             if ($('.left2').text() == '<') {
195 |                 $('#overLay').removeAttr('hidden');
196 |                 $('.left2').text('>');
197 |                 if (article_label.hasClass('label_mobile_open')) {
198 |                     article_label.removeAttr('style');
199 |                     article_label.addClass('fadeInUp');
200 |                     article_label.removeClass('fadeOutDown');
201 |                 } else {
202 |                     article_label.addClass('label_mobile_open');
203 |                     article_label.removeClass('mobile_close');
204 |                 }
205 |             } else {
206 |                 article_label.removeAttr('style');
207 |                 article_label.removeClass('fadeInUp');
208 |                 article_label.addClass('fadeOutDown');
209 |                 $('#overLay').attr('hidden', 'hidden');
210 |                 $('.left2').text('<');
211 |             }
212 | 
213 |             $('#overLay').click(function () {
214 |                 article_label.removeAttr('style');
215 |                 article_label.removeClass('fadeInUp');
216 |                 article_label.addClass('fadeOutDown');
217 |                 $('#overLay').attr('hidden', 'hidden');
218 |                 $('.left2').text('<');
219 |             });
220 |         });
221 | 
222 |         $('.top1').click(function () {
223 |             let hot_article = $("li[name='hot_article']");
224 |             let article_label = $("li[name='article_label']");
225 |             let classify = $('#classifyBox');
226 |             if (hot_article.hasClass('hot_mobile_open')) {
227 |                 hot_article.removeAttr('style');
228 |                 hot_article.removeClass('fadeInRight');
229 |                 hot_article.addClass('fadeOutRight');
230 |                 $('.left1').text('<');
231 |             }
232 |             if (article_label.hasClass('label_mobile_open')) {
233 |                 article_label.removeAttr('style');
234 |                 article_label.removeClass('fadeInUp');
235 |                 article_label.addClass('fadeOutDown');
236 |                 $('.left2').text('<');
237 |             }
238 |             $('#overLay').removeAttr('hidden');
239 |             if (classify.hasClass('classify_mobile_open')) {
240 |                 if (classify.hasClass('bounceInDown')) {
241 |                     classify.removeAttr('style');
242 |                     classify.removeClass('bounceInDown');
243 |                     classify.addClass('bounceOutDown');
244 |                     $('#overLay').attr('hidden', 'hidden');
245 |                 } else {
246 |                     classify.removeAttr('style');
247 |                     classify.addClass('bounceInDown');
248 |                     classify.removeClass('bounceOutDown');
249 |                 }
250 |             } else {
251 |                 classify.removeAttr('style');
252 |                 classify.removeClass('flipInY');
253 |                 classify.addClass('bounceInDown');
254 |                 classify.addClass('classify_mobile_open');
255 |                 classify.removeClass('mobile_close');
256 |             }
257 |             $('#overLay').click(function () {
258 |                 classify.removeAttr('style');
259 |                 classify.removeClass('bounceInDown');
260 |                 classify.addClass('bounceOutDown');
261 |                 $('#overLay').attr('hidden', 'hidden');
262 |             });
263 |         });
264 |     }
265 | 
266 |     $('#allClassify').click(function () {
267 |         is_search_keywords = "";
268 |         is_classify_id = 0;
269 |         is_label_id = "";
270 |         exist = false;
271 |         pageNum = 1;
272 |         getPageArticle(pageNum);
273 |         $('body,html').animate({scrollTop: 0}, 300);
274 |     });
275 | 
276 |     $(".searchBox>input[type='text']").click(function () {
277 |         $(document).keyup(function (event) {
278 |             if (event.keyCode == 13) {
279 |                 searchArticle();
280 |             }
281 |         });
282 |     });
283 | 
284 |     $('.searchBox>i').click(function () {
285 |         searchArticle();
286 |     });
287 | 
288 | });
289 | 
290 | function searchArticle() {
291 |     is_label_id = "";
292 |     is_classify_id = 0;
293 |     pageNum = 1;
294 |     exist = false;
295 |     is_search_keywords = $(".searchBox>input[type='text']").val();
296 |     if (is_search_keywords == "") {
297 |         swal("请输入查询关键字！", {
298 |             button: false,
299 |             timer: 2000
300 |         });
301 |     }
302 |     getPageArticle(pageNum);
303 |     $('body,html').animate({scrollTop: 0}, 300);
304 | }
305 | 
306 | function getArticleByClassify(classifyId) {
307 |     // 清空标签和搜索的分页条件
308 |     is_search_keywords = "";
309 |     is_label_id = "";
310 |     exist = false;
311 |     pageNum = 1;
312 |     is_classify_id = classifyId;
313 |     getPageArticle(pageNum);
314 |     $('body,html').animate({scrollTop: 0}, 300);
315 | }
316 | 
317 | //获取滚动条当前的位置
318 | function getScrollTop() {
319 |     let scrollTop = 0;
320 |     if (document.documentElement && document.documentElement.scrollTop) {
321 |         scrollTop = document.documentElement.scrollTop;
322 |     } else if (document.body) {
323 |         scrollTop = document.body.scrollTop;
324 |     }
325 |     return scrollTop;
326 | }
327 | 
328 | //获取当前可视范围的高度
329 | function getClientHeight() {
330 |     let clientHeight = 0;
331 |     if (document.body.clientHeight && document.documentElement.clientHeight) {
332 |         clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
333 |     } else {
334 |         clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
335 |     }
336 |     return clientHeight;
337 | }
338 | 
339 | //获取文档完整的高度
340 | function getScrollHeight() {
341 |     return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
342 | }
343 | 
344 | //滚动事件触发
345 | window.onscroll = function () {
346 |     if (getScrollTop() + getClientHeight() > getScrollHeight() - 110) {
347 |         pageNum++;
348 |         getPageArticle(pageNum);
349 |     }
350 | };
351 | 
352 | function getPageArticle(pageNum) {
353 |     if (!exist) {
354 |         $.ajax({
355 |             url: '/article/getPageArticle.action',
356 |             data: {
357 |                 pageNum: pageNum,
358 |                 labelId: is_label_id,
359 |                 classifyId: is_classify_id,
360 |                 keywords: is_search_keywords
361 |             },
362 |             type: 'POST',
363 |             success: function (res) {
364 |                 if (document.body.offsetWidth <= 500){
365 |                     let hot_article = $("li[name='hot_article']");
366 |                     let article_label = $("li[name='article_label']");
367 |                     let classify = $('#classifyBox');
368 |                     if (article_label.hasClass('label_mobile_open')) {
369 |                         article_label.removeAttr('style');
370 |                         article_label.removeClass('fadeInUp');
371 |                         article_label.addClass('fadeOutDown');
372 |                         $('.left2').text('<');
373 |                     }
374 |                     if (classify.hasClass('classify_mobile_open')) {
375 |                         classify.removeAttr('style');
376 |                         classify.removeClass('bounceInDown');
377 |                         classify.addClass('bounceOutDown');
378 |                     }
379 |                     if (hot_article.hasClass('hot_mobile_open')) {
380 |                         hot_article.removeAttr('style');
381 |                         hot_article.removeClass('fadeInRight');
382 |                         hot_article.addClass('fadeOutRight');
383 |                         $('.left1').text('<');
384 |                     }
385 |                     $('#overLay').attr('hidden', 'hidden');
386 |                 }
387 |                 if (res.data.length > 0) {
388 |                     var articleData = {
389 |                         articleList: res.data
390 |                     };
391 |                     let articleHtml = articleRender(articleData);
392 |                     if (pageNum == 1) {
393 |                         $('#blog_content').html(articleHtml);
394 |                     } else {
395 |                         $('#blog_content').append(articleHtml);
396 |                     }
397 |                     $('.article_classify').each(function () {
398 |                         $(this).click(function () {
399 |                             let classifyId = $(this).attr('name');
400 |                             getArticleByClassify(classifyId);
401 |                         });
402 |                     });
403 |                     if (res.data.length < 20){
404 |                         $('#blog_content').append(line);
405 |                         exist = true;
406 |                     }
407 |                 } else {
408 |                     if (pageNum == 1) {
409 |                         $('#blog_content').html(line);
410 |                         exist = true;
411 |                     } else if (!exist) {
412 |                         $('#blog_content').append(line);
413 |                         exist = true;
414 |                     }
415 |                 }
416 |             }
417 |         });
418 |     }
419 | }
420 | 


--------------------------------------------------------------------------------
/css/detail.css:
--------------------------------------------------------------------------------
   1 | 
   2 | fieldset {
   3 |     border: 1px solid #eee;
   4 |     border-radius: 3px;
   5 |     padding: 10px 15px;
   6 | }
   7 | 
   8 | fieldset > legend {
   9 |     background-color: #eb5055;
  10 |     color: #fff;
  11 |     border-radius: 2px;
  12 |     padding: 2px 5px;
  13 |     font-size: 12px;
  14 | }
  15 | 
  16 | .article_label {
  17 |     font-size: 14px;
  18 |     word-wrap: break-word;
  19 |     word-break: break-word;
  20 |     margin: 0;
  21 |     padding: 15px 0 15px;
  22 | }
  23 | 
  24 | .article_label a {
  25 |     font-size: 13px;
  26 |     font-weight: 600;
  27 |     display: inline-block;
  28 |     margin: 4px 8px 0 0;
  29 |     padding: 0 15px;
  30 |     -webkit-transition-duration: .4s;
  31 |     transition-duration: .4s;
  32 |     letter-spacing: 0;
  33 | }
  34 | 
  35 | .article_label a:nth-child(n) {
  36 |     color: #fff;
  37 |     border: 1px solid #b952c5;
  38 |     border-radius: 15px;
  39 |     background: #b952c5;
  40 | }
  41 | 
  42 | .article_label a:nth-child(2n) {
  43 |     color: #fff;
  44 |     border: 1px solid #ff9800;
  45 |     border-radius: 15px;
  46 |     background: #ff9800;
  47 | }
  48 | 
  49 | .article_label a:nth-child(3n) {
  50 |     color: #fff;
  51 |     border: 1px solid #46c47c;
  52 |     border-radius: 15px;
  53 |     background: #46c47c;
  54 | }
  55 | 
  56 | .article_label a:nth-child(4n) {
  57 |     color: #fff;
  58 |     border: 1px solid #6fa3ef;
  59 |     border-radius: 15px;
  60 |     background: #6fa3ef;
  61 | }
  62 | 
  63 | .article_label a:nth-child(5n) {
  64 |     color: #fff;
  65 |     border: 1px solid #EE2C2C;
  66 |     border-radius: 15px;
  67 |     background: #EE2C2C;
  68 | }
  69 | 
  70 | .article_label a:hover{
  71 |     color: #5f5f5f;
  72 |     border: 1px solid #f7f7f7;
  73 |     outline-style: none;
  74 |     background: #f7f7f7;
  75 | }
  76 | 
  77 | .detail_info {
  78 |     font-size: 13px;
  79 |     color: #a5a5a5;
  80 |     text-decoration: none;
  81 |     text-shadow: 0 0 2px #fff;
  82 |     padding-bottom: 20px;
  83 |     border-bottom: 1px dashed #c5c5c5;
  84 | }
  85 | 
  86 | .detail_info span {
  87 |     margin-right: 15px;
  88 |     display: inline-block;
  89 | }
  90 | 
  91 | .detail_info span i {
  92 |     margin: 0 5px 0 5px;
  93 | }
  94 | 
  95 | .detail_content {
  96 |     margin-top: 30px;
  97 | }
  98 | 
  99 | .detail_content > div {
 100 |     margin-top: 30px;
 101 | }
 102 | 
 103 | .detail_comment {
 104 |     margin-top: 70px;
 105 | }
 106 | 
 107 | .reply_comment {
 108 |     margin-top: 10px;
 109 | }
 110 | 
 111 | .detail_comment > h3 {
 112 |     border-left: 4px solid #eb5055;
 113 |     padding-left: 10px;
 114 |     font-size: 16px;
 115 |     display: inline-block;
 116 |     line-height: 30px;
 117 |     margin-bottom: 5px;
 118 | }
 119 | 
 120 | .detail_comment > form > ul, #reply_form > ul {
 121 |     margin-top: 20px;
 122 |     overflow: hidden;
 123 | }
 124 | 
 125 | .detail_comment > form > ul > li:first-child, #reply_form > ul > li:first-child {
 126 |     position: relative;
 127 |     bottom: 3px;
 128 |     width: 14%;
 129 |     text-align: center;
 130 | }
 131 | 
 132 | .detail_comment > form > ul > li:last-child, #reply_form > ul > li:last-child {
 133 |     margin-left: 30px;
 134 | }
 135 | 
 136 | .detail_comment > form > ul > li, #reply_form > ul > li {
 137 |     float: left;
 138 |     overflow: hidden;
 139 |     box-sizing: border-box;
 140 |     padding-right: 30px;
 141 |     padding-bottom: 10px;
 142 | }
 143 | 
 144 | input[type=text] {
 145 |     width: 100%;
 146 |     height: 20px;
 147 |     background: #F7F7F9;
 148 |     border: 1px solid #D3D3D7;
 149 |     border-radius: 5px;
 150 |     font-size: 14px;
 151 |     color: black;
 152 |     padding: 6px 8px;
 153 |     outline: none;
 154 | }
 155 | 
 156 | label {
 157 |     font-size: 12px;
 158 |     line-height: 20px;
 159 |     padding-bottom: 5px;
 160 |     display: block;
 161 | }
 162 | 
 163 | .detail_editor {
 164 |     padding: 10px 0;
 165 | }
 166 | 
 167 | .headImg {
 168 |     background-color: rgba(0, 0, 0, .4);
 169 |     text-align: center;
 170 |     width: 250px;
 171 |     height: 256px;
 172 |     position: fixed;
 173 |     top: calc(50% - 130px);
 174 |     left: calc(50% - 128px);
 175 |     z-index: 5;
 176 | }
 177 | 
 178 | .headImg ul {
 179 |     overflow: hidden;
 180 |     padding: 10px;
 181 | }
 182 | 
 183 | .headImg ul li {
 184 |     overflow: hidden;
 185 |     display: block;
 186 |     width: 24%;
 187 |     padding-top: 5px;
 188 |     float: left;
 189 | }
 190 | 
 191 | .headImg ul li img {
 192 |     border-radius: 50px;
 193 |     cursor: pointer;
 194 |     -webkit-transition: all .3s;
 195 |     -moz-transition: all .3s;
 196 |     -ms-transition: all .3s;
 197 |     -o-transition: all .3s;
 198 |     transition: all .3s;
 199 | }
 200 | 
 201 | .headImg ul li img:hover {
 202 |     transform: scale(1.3);
 203 | }
 204 | 
 205 | .close {
 206 |     position: absolute;
 207 |     top: 5px;
 208 |     right: 5px;
 209 |     cursor: pointer;
 210 | }
 211 | 
 212 | .close i {
 213 |     font-size: 14px;
 214 |     color: #EE2C2C;
 215 |     margin-right: 5px;
 216 | }
 217 | 
 218 | #commentHeadImage, #replyHeadImage {
 219 |     z-index: 2;
 220 |     border-radius: 50px;
 221 |     cursor: pointer;
 222 |     -webkit-transition: all .3s;
 223 |     -moz-transition: all .3s;
 224 |     -ms-transition: all .3s;
 225 |     -o-transition: all .3s;
 226 |     transition: all .3s;
 227 | }
 228 | 
 229 | #commentHeadImage:hover, #replyHeadImage:hover {
 230 |     transform: scale(1.3);
 231 | }
 232 | 
 233 | .email_reply, .email_comment {
 234 |     position: relative;
 235 |     float: left;
 236 |     height: 24px;
 237 |     margin-bottom: 3px;
 238 |     vertical-align: middle;
 239 |     cursor: pointer;
 240 | }
 241 | 
 242 | .email_comment span, .email_reply span {
 243 |     position: relative;
 244 |     font-size: 14px;
 245 |     margin-left: 10px;
 246 |     bottom: 6px;
 247 |     cursor: pointer;
 248 | }
 249 | 
 250 | .email_comment:before, .email_reply:before {
 251 |     display: inline-block;
 252 |     position: relative;
 253 |     content: '';
 254 |     width: 45px;
 255 |     height: 24px;
 256 |     background-color: #D8D8D8;
 257 |     border-radius: 100px;
 258 |     transition: background-color .5s;
 259 | }
 260 | 
 261 | .email_comment:after, .email_reply:after {
 262 |     position: absolute;
 263 |     left: 4px;
 264 |     top: 4px;
 265 |     content: '';
 266 |     width: 16px;
 267 |     height: 16px;
 268 |     border-radius: 50%;
 269 |     background-color: #fff;
 270 |     transition: transform 0.3s ease-in;
 271 | }
 272 | 
 273 | #email_reply:checked + .email_reply:before {
 274 |     background-color: #EE2C2C;
 275 | }
 276 | 
 277 | #email_reply:checked + .email_reply:after {
 278 |     transform: translateX(130%);
 279 | }
 280 | 
 281 | #email_comment:checked + .email_comment:before {
 282 |     background-color: #EE2C2C;
 283 | }
 284 | 
 285 | #email_comment:checked + .email_comment:after {
 286 |     transform: translateX(130%);
 287 | }
 288 | 
 289 | #email_reply, #email_comment {
 290 |     display: none;
 291 | }
 292 | 
 293 | .commit_comment, .reply_commit {
 294 |     border-radius: 5px;
 295 |     color: #FFFFFF;
 296 |     font-size: 12px;
 297 |     padding: 2px 20px;
 298 |     line-height: 25px;
 299 |     width: auto;
 300 |     float: right;
 301 |     background-color: #EE2C2C;
 302 |     cursor: pointer;
 303 | }
 304 | 
 305 | .submit_info {
 306 |     overflow: hidden;
 307 |     text-align: center;
 308 |     vertical-align: middle;
 309 | }
 310 | 
 311 | .commentHeadImg {
 312 |     position: absolute;
 313 | }
 314 | 
 315 | .commentHeadImg img {
 316 |     width: 48px;
 317 |     height: 48px;
 318 |     border-radius: 50%;
 319 |     border: 0;
 320 |     vertical-align: middle;
 321 |     user-select: none;
 322 | }
 323 | 
 324 | .replyHeadImg {
 325 |     position: absolute;
 326 | }
 327 | 
 328 | .replyHeadImg img {
 329 |     width: 35px;
 330 |     height: 35px;
 331 |     border-radius: 50%;
 332 |     border: 0;
 333 |     vertical-align: middle;
 334 |     user-select: none;
 335 | }
 336 | 
 337 | .comment {
 338 |     margin-left: 75px;
 339 | }
 340 | 
 341 | .comment_reply {
 342 |     margin-left: 50px;
 343 | }
 344 | 
 345 | .comment > h3, .comment_reply > h3 {
 346 |     line-height: 18px;
 347 |     padding-bottom: 4px;
 348 |     display: block;
 349 |     word-wrap: break-word;
 350 |     text-decoration: none;
 351 |     font-size: 12px;
 352 |     font-weight: 700;
 353 |     color: #6d757a;
 354 |     cursor: pointer;
 355 | }
 356 | 
 357 | .comment > span, .comment_reply > span {
 358 |     line-height: 25px;
 359 |     padding: 2px 0;
 360 |     font-size: 14px;
 361 |     text-shadow: none;
 362 |     overflow: hidden;
 363 |     word-wrap: break-word;
 364 |     word-break: break-word;
 365 | }
 366 | 
 367 | .comment > span img, .comment_reply > span img {
 368 |     width: 78px;
 369 |     height: 78px;
 370 | }
 371 | 
 372 | .comment > p, .comment_reply > p {
 373 |     margin-top: 4px;
 374 |     margin-bottom: 8px;
 375 |     font-size: 13px;
 376 |     color: #99a2aa;
 377 | }
 378 | 
 379 | .article_comment {
 380 |     margin-top: 20px;
 381 | }
 382 | 
 383 | .reply {
 384 |     margin-left: 10px;
 385 |     cursor: pointer;
 386 | }
 387 | 
 388 | .reply:hover {
 389 |     color: #EE2C2C;
 390 | }
 391 | 
 392 | .article_reply {
 393 |     margin-top: 20px;
 394 |     margin-left: 75px;
 395 | }
 396 | 
 397 | .reply_sign {
 398 |     font-size: 12px;
 399 |     color: #EE2C2C;
 400 | }
 401 | 
 402 | #commentBox > li {
 403 |     padding-top: 20px;
 404 | }
 405 | 
 406 | #commentBox > li:after {
 407 |     margin-left: 75px;
 408 |     content: "";
 409 |     display: block;
 410 |     height: 1px;
 411 |     background-color: #e5e9ef;
 412 |     margin-top: 20px;
 413 | }
 414 | 
 415 | .prise {
 416 |     user-select: none;
 417 |     border-top: 1px solid #eee;
 418 |     border-bottom: 1px solid #eee;
 419 |     padding: 15px 5px;
 420 |     margin: 10px 0;
 421 |     text-align: center;
 422 |     -webkit-transition: .4s;
 423 |     -moz-transition: .4s;
 424 |     -o-transition: .4s;
 425 |     -ms-transition: .4s;
 426 |     opacity: .3;
 427 | }
 428 | 
 429 | .prise:hover {
 430 |     opacity: 1;
 431 | }
 432 | 
 433 | .prise > div {
 434 |     display: inline-block;
 435 |     margin-right: 15px;
 436 |     padding-left: 35px;
 437 |     position: relative;
 438 |     cursor: pointer;
 439 | }
 440 | 
 441 | .likeHeart, .likeHeart:before, .likeHeart:after {
 442 |     background: url(../images/like_heart.png);
 443 |     background-position: left;
 444 |     background-repeat: no-repeat;
 445 |     height: 80px;
 446 |     width: 80px;
 447 |     cursor: pointer;
 448 |     position: absolute;
 449 |     left: -25px;
 450 |     top: -30px;
 451 |     background-size: 2900%;
 452 | }
 453 | 
 454 | .like:hover {
 455 |     background: 0;
 456 | }
 457 | 
 458 | .like:hover .likeHeart {
 459 |     background-position: right;
 460 | }
 461 | 
 462 | .like:hover .likeHeart:before {
 463 |     content: '';
 464 |     background-position: right;
 465 |     position: absolute;
 466 |     -webkit-animation: i-like 2.13584698s infinite;
 467 |     animation: i-like 2.13584698s infinite;
 468 |     z-index: 0;
 469 | }
 470 | 
 471 | .like:hover .likeHeart:after {
 472 |     content: '';
 473 |     background-position: right;
 474 |     position: absolute;
 475 |     -webkit-animation: i-like 3.141592653s infinite;
 476 |     animation: i-like 3.141592653s infinite;
 477 | }
 478 | 
 479 | .prise i {
 480 |     font-size: 28px;
 481 |     position: absolute;
 482 |     width: 30px;
 483 |     left: 0;
 484 |     top: -5px;
 485 |     color: #aab8c2;
 486 | }
 487 | 
 488 | .priseImg {
 489 |     position: fixed;
 490 |     display: none;
 491 |     background-color: #FFFFFF;
 492 |     padding-top: 10px;
 493 |     top: calc(50% - 100px);
 494 |     left: calc(50% - 200px);
 495 |     -webkit-animation: dance 5s infinite ease-in-out;
 496 |     animation: dance 5s infinite ease-in-out;
 497 | }
 498 | 
 499 | .weChatPay {
 500 |     float: left;
 501 | }
 502 | 
 503 | .aliPay {
 504 |     float: right;
 505 | }
 506 | 
 507 | .pay:hover .priseImg {
 508 |     display: block;
 509 | }
 510 | 
 511 | .pay img {
 512 |     padding: 10px;
 513 | }
 514 | 
 515 | .mobile{
 516 |     display: none;
 517 | }
 518 | 
 519 | @media screen and (max-width: 500px) {
 520 |     .w700 {
 521 |         padding: 20px 10px 0 10px;
 522 |     }
 523 | 
 524 |     .detail_comment > form > ul > li:first-child, #reply_form > ul > li:first-child {
 525 |         width: 20%;
 526 |     }
 527 | 
 528 |     .detail_comment > form > ul > li, #reply_form > ul > li {
 529 |         padding-bottom: 0;
 530 |         width: 40%;
 531 |     }
 532 | 
 533 |     .detail_comment > form > ul > li:last-child, #reply_form > ul > li:last-child {
 534 |         margin-left: 0;
 535 |     }
 536 | 
 537 |     .article_reply{
 538 |         margin-left: 12px;
 539 |     }
 540 | 
 541 |     #commentBox > li:after{
 542 |         margin-left: 2px;
 543 |     }
 544 | 
 545 |     .comment .reply_comment{
 546 |         margin-left: -75px;
 547 |     }
 548 | 
 549 |     .comment_reply .reply_comment{
 550 |         margin-left: -62px;
 551 |     }
 552 | 
 553 |     .w-e-panel-container{
 554 |         width: 320px!important;
 555 |     }
 556 | 
 557 |     .priseImg img{
 558 |         width: 100px;
 559 |         height: 100px;
 560 |     }
 561 | 
 562 |     .priseImg{
 563 |         top: calc(50% - 50px);
 564 |         left: calc(50% - 120px);
 565 |     }
 566 | 
 567 |     .mobile{
 568 |         display: block;
 569 |     }
 570 | 
 571 | }
 572 | 
 573 | @-webkit-keyframes i-like {
 574 |     0% {
 575 |         -webkit-transform: translateY(29px);
 576 |         transform: translateY(29px);
 577 |         margin-left: 25px
 578 |     }
 579 |     20% {
 580 |         margin-left: 35px
 581 |     }
 582 |     40% {
 583 |         margin-left: -6px
 584 |     }
 585 |     60% {
 586 |         margin-left: 4px
 587 |     }
 588 |     80% {
 589 |         margin-left: -2px
 590 |     }
 591 |     100% {
 592 |         opacity: 0;
 593 |         -webkit-transform: translateY(-50px) rotate(180deg) scale(.5);
 594 |         transform: translateY(-50px) rotate(180deg) scale(.5)
 595 |     }
 596 | }
 597 | 
 598 | @keyframes i-like {
 599 |     0% {
 600 |         -webkit-transform: translateY(29px);
 601 |         transform: translateY(29px);
 602 |         margin-left: 25px
 603 |     }
 604 |     20% {
 605 |         margin-left: 35px
 606 |     }
 607 |     40% {
 608 |         margin-left: -6px
 609 |     }
 610 |     60% {
 611 |         margin-left: 4px
 612 |     }
 613 |     80% {
 614 |         margin-left: -2px
 615 |     }
 616 |     100% {
 617 |         opacity: 0;
 618 |         -webkit-transform: translateY(-50px) rotate(180deg) scale(.5);
 619 |         transform: translateY(-50px) rotate(180deg) scale(.5)
 620 |     }
 621 | }
 622 | 
 623 | @-webkit-keyframes dance {
 624 |     2% {
 625 |         -webkit-transform: translateY(1.5px) rotate(1.5deg);
 626 |         transform: translateY(1.5px) rotate(1.5deg)
 627 |     }
 628 |     4% {
 629 |         -webkit-transform: translateY(-1.5px) rotate(-.5deg);
 630 |         transform: translateY(-1.5px) rotate(-.5deg)
 631 |     }
 632 |     6% {
 633 |         -webkit-transform: translateY(1.5px) rotate(-1.5deg);
 634 |         transform: translateY(1.5px) rotate(-1.5deg)
 635 |     }
 636 |     8% {
 637 |         -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
 638 |         transform: translateY(-1.5px) rotate(-1.5deg)
 639 |     }
 640 |     10% {
 641 |         -webkit-transform: translateY(2.5px) rotate(1.5deg);
 642 |         transform: translateY(2.5px) rotate(1.5deg)
 643 |     }
 644 |     12% {
 645 |         -webkit-transform: translateY(-.5px) rotate(1.5deg);
 646 |         transform: translateY(-.5px) rotate(1.5deg)
 647 |     }
 648 |     14% {
 649 |         -webkit-transform: translateY(-1.5px) rotate(1.5deg);
 650 |         transform: translateY(-1.5px) rotate(1.5deg)
 651 |     }
 652 |     16% {
 653 |         -webkit-transform: translateY(-.5px) rotate(-1.5deg);
 654 |         transform: translateY(-.5px) rotate(-1.5deg)
 655 |     }
 656 |     18% {
 657 |         -webkit-transform: translateY(.5px) rotate(-1.5deg);
 658 |         transform: translateY(.5px) rotate(-1.5deg)
 659 |     }
 660 |     20% {
 661 |         -webkit-transform: translateY(-1.5px) rotate(2.5deg);
 662 |         transform: translateY(-1.5px) rotate(2.5deg)
 663 |     }
 664 |     22% {
 665 |         -webkit-transform: translateY(.5px) rotate(-1.5deg);
 666 |         transform: translateY(.5px) rotate(-1.5deg)
 667 |     }
 668 |     24% {
 669 |         -webkit-transform: translateY(1.5px) rotate(1.5deg);
 670 |         transform: translateY(1.5px) rotate(1.5deg)
 671 |     }
 672 |     26% {
 673 |         -webkit-transform: translateY(.5px) rotate(.5deg);
 674 |         transform: translateY(.5px) rotate(.5deg)
 675 |     }
 676 |     28% {
 677 |         -webkit-transform: translateY(.5px) rotate(1.5deg);
 678 |         transform: translateY(.5px) rotate(1.5deg)
 679 |     }
 680 |     30% {
 681 |         -webkit-transform: translateY(-.5px) rotate(2.5deg);
 682 |         transform: translateY(-.5px) rotate(2.5deg)
 683 |     }
 684 |     32% {
 685 |         -webkit-transform: translateY(1.5px) rotate(-.5deg);
 686 |         transform: translateY(1.5px) rotate(-.5deg)
 687 |     }
 688 |     34% {
 689 |         -webkit-transform: translateY(1.5px) rotate(-.5deg);
 690 |         transform: translateY(1.5px) rotate(-.5deg)
 691 |     }
 692 |     36% {
 693 |         -webkit-transform: translateY(-1.5px) rotate(2.5deg);
 694 |         transform: translateY(-1.5px) rotate(2.5deg)
 695 |     }
 696 |     38% {
 697 |         -webkit-transform: translateY(1.5px) rotate(-1.5deg);
 698 |         transform: translateY(1.5px) rotate(-1.5deg)
 699 |     }
 700 |     40% {
 701 |         -webkit-transform: translateY(-.5px) rotate(2.5deg);
 702 |         transform: translateY(-.5px) rotate(2.5deg)
 703 |     }
 704 |     42% {
 705 |         -webkit-transform: translateY(2.5px) rotate(-1.5deg);
 706 |         transform: translateY(2.5px) rotate(-1.5deg)
 707 |     }
 708 |     44% {
 709 |         -webkit-transform: translateY(1.5px) rotate(.5deg);
 710 |         transform: translateY(1.5px) rotate(.5deg)
 711 |     }
 712 |     46% {
 713 |         -webkit-transform: translateY(-1.5px) rotate(2.5deg);
 714 |         transform: translateY(-1.5px) rotate(2.5deg)
 715 |     }
 716 |     48% {
 717 |         -webkit-transform: translateY(-.5px) rotate(.5deg);
 718 |         transform: translateY(-.5px) rotate(.5deg)
 719 |     }
 720 |     50% {
 721 |         -webkit-transform: translateY(.5px) rotate(.5deg);
 722 |         transform: translateY(.5px) rotate(.5deg)
 723 |     }
 724 |     52% {
 725 |         -webkit-transform: translateY(2.5px) rotate(2.5deg);
 726 |         transform: translateY(2.5px) rotate(2.5deg)
 727 |     }
 728 |     54% {
 729 |         -webkit-transform: translateY(-1.5px) rotate(1.5deg);
 730 |         transform: translateY(-1.5px) rotate(1.5deg)
 731 |     }
 732 |     56% {
 733 |         -webkit-transform: translateY(2.5px) rotate(2.5deg);
 734 |         transform: translateY(2.5px) rotate(2.5deg)
 735 |     }
 736 |     58% {
 737 |         -webkit-transform: translateY(.5px) rotate(2.5deg);
 738 |         transform: translateY(.5px) rotate(2.5deg)
 739 |     }
 740 |     60% {
 741 |         -webkit-transform: translateY(2.5px) rotate(2.5deg);
 742 |         transform: translateY(2.5px) rotate(2.5deg)
 743 |     }
 744 |     62% {
 745 |         -webkit-transform: translateY(-.5px) rotate(2.5deg);
 746 |         transform: translateY(-.5px) rotate(2.5deg)
 747 |     }
 748 |     64% {
 749 |         -webkit-transform: translateY(-.5px) rotate(1.5deg);
 750 |         transform: translateY(-.5px) rotate(1.5deg)
 751 |     }
 752 |     66% {
 753 |         -webkit-transform: translateY(1.5px) rotate(-.5deg);
 754 |         transform: translateY(1.5px) rotate(-.5deg)
 755 |     }
 756 |     68% {
 757 |         -webkit-transform: translateY(-1.5px) rotate(-.5deg);
 758 |         transform: translateY(-1.5px) rotate(-.5deg)
 759 |     }
 760 |     70% {
 761 |         -webkit-transform: translateY(1.5px) rotate(.5deg);
 762 |         transform: translateY(1.5px) rotate(.5deg)
 763 |     }
 764 |     72% {
 765 |         -webkit-transform: translateY(2.5px) rotate(1.5deg);
 766 |         transform: translateY(2.5px) rotate(1.5deg)
 767 |     }
 768 |     74% {
 769 |         -webkit-transform: translateY(-.5px) rotate(.5deg);
 770 |         transform: translateY(-.5px) rotate(.5deg)
 771 |     }
 772 |     76% {
 773 |         -webkit-transform: translateY(-.5px) rotate(2.5deg);
 774 |         transform: translateY(-.5px) rotate(2.5deg)
 775 |     }
 776 |     78% {
 777 |         -webkit-transform: translateY(-.5px) rotate(1.5deg);
 778 |         transform: translateY(-.5px) rotate(1.5deg)
 779 |     }
 780 |     80% {
 781 |         -webkit-transform: translateY(1.5px) rotate(1.5deg);
 782 |         transform: translateY(1.5px) rotate(1.5deg)
 783 |     }
 784 |     82% {
 785 |         -webkit-transform: translateY(-.5px) rotate(.5deg);
 786 |         transform: translateY(-.5px) rotate(.5deg)
 787 |     }
 788 |     84% {
 789 |         -webkit-transform: translateY(1.5px) rotate(2.5deg);
 790 |         transform: translateY(1.5px) rotate(2.5deg)
 791 |     }
 792 |     86% {
 793 |         -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
 794 |         transform: translateY(-1.5px) rotate(-1.5deg)
 795 |     }
 796 |     88% {
 797 |         -webkit-transform: translateY(-.5px) rotate(2.5deg);
 798 |         transform: translateY(-.5px) rotate(2.5deg)
 799 |     }
 800 |     90% {
 801 |         -webkit-transform: translateY(2.5px) rotate(-.5deg);
 802 |         transform: translateY(2.5px) rotate(-.5deg)
 803 |     }
 804 |     92% {
 805 |         -webkit-transform: translateY(.5px) rotate(-.5deg);
 806 |         transform: translateY(.5px) rotate(-.5deg)
 807 |     }
 808 |     94% {
 809 |         -webkit-transform: translateY(2.5px) rotate(.5deg);
 810 |         transform: translateY(2.5px) rotate(.5deg)
 811 |     }
 812 |     96% {
 813 |         -webkit-transform: translateY(-.5px) rotate(1.5deg);
 814 |         transform: translateY(-.5px) rotate(1.5deg)
 815 |     }
 816 |     98% {
 817 |         -webkit-transform: translateY(-1.5px) rotate(-.5deg);
 818 |         transform: translateY(-1.5px) rotate(-.5deg)
 819 |     }
 820 |     0%, to {
 821 |         -webkit-transform: translate(0) rotate(0deg);
 822 |         transform: translate(0) rotate(0deg)
 823 |     }
 824 | }
 825 | 
 826 | @keyframes dance {
 827 |     2% {
 828 |         -webkit-transform: translateY(1.5px) rotate(1.5deg);
 829 |         transform: translateY(1.5px) rotate(1.5deg)
 830 |     }
 831 |     4% {
 832 |         -webkit-transform: translateY(-1.5px) rotate(-.5deg);
 833 |         transform: translateY(-1.5px) rotate(-.5deg)
 834 |     }
 835 |     6% {
 836 |         -webkit-transform: translateY(1.5px) rotate(-1.5deg);
 837 |         transform: translateY(1.5px) rotate(-1.5deg)
 838 |     }
 839 |     8% {
 840 |         -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
 841 |         transform: translateY(-1.5px) rotate(-1.5deg)
 842 |     }
 843 |     10% {
 844 |         -webkit-transform: translateY(2.5px) rotate(1.5deg);
 845 |         transform: translateY(2.5px) rotate(1.5deg)
 846 |     }
 847 |     12% {
 848 |         -webkit-transform: translateY(-.5px) rotate(1.5deg);
 849 |         transform: translateY(-.5px) rotate(1.5deg)
 850 |     }
 851 |     14% {
 852 |         -webkit-transform: translateY(-1.5px) rotate(1.5deg);
 853 |         transform: translateY(-1.5px) rotate(1.5deg)
 854 |     }
 855 |     16% {
 856 |         -webkit-transform: translateY(-.5px) rotate(-1.5deg);
 857 |         transform: translateY(-.5px) rotate(-1.5deg)
 858 |     }
 859 |     18% {
 860 |         -webkit-transform: translateY(.5px) rotate(-1.5deg);
 861 |         transform: translateY(.5px) rotate(-1.5deg)
 862 |     }
 863 |     20% {
 864 |         -webkit-transform: translateY(-1.5px) rotate(2.5deg);
 865 |         transform: translateY(-1.5px) rotate(2.5deg)
 866 |     }
 867 |     22% {
 868 |         -webkit-transform: translateY(.5px) rotate(-1.5deg);
 869 |         transform: translateY(.5px) rotate(-1.5deg)
 870 |     }
 871 |     24% {
 872 |         -webkit-transform: translateY(1.5px) rotate(1.5deg);
 873 |         transform: translateY(1.5px) rotate(1.5deg)
 874 |     }
 875 |     26% {
 876 |         -webkit-transform: translateY(.5px) rotate(.5deg);
 877 |         transform: translateY(.5px) rotate(.5deg)
 878 |     }
 879 |     28% {
 880 |         -webkit-transform: translateY(.5px) rotate(1.5deg);
 881 |         transform: translateY(.5px) rotate(1.5deg)
 882 |     }
 883 |     30% {
 884 |         -webkit-transform: translateY(-.5px) rotate(2.5deg);
 885 |         transform: translateY(-.5px) rotate(2.5deg)
 886 |     }
 887 |     32% {
 888 |         -webkit-transform: translateY(1.5px) rotate(-.5deg);
 889 |         transform: translateY(1.5px) rotate(-.5deg)
 890 |     }
 891 |     34% {
 892 |         -webkit-transform: translateY(1.5px) rotate(-.5deg);
 893 |         transform: translateY(1.5px) rotate(-.5deg)
 894 |     }
 895 |     36% {
 896 |         -webkit-transform: translateY(-1.5px) rotate(2.5deg);
 897 |         transform: translateY(-1.5px) rotate(2.5deg)
 898 |     }
 899 |     38% {
 900 |         -webkit-transform: translateY(1.5px) rotate(-1.5deg);
 901 |         transform: translateY(1.5px) rotate(-1.5deg)
 902 |     }
 903 |     40% {
 904 |         -webkit-transform: translateY(-.5px) rotate(2.5deg);
 905 |         transform: translateY(-.5px) rotate(2.5deg)
 906 |     }
 907 |     42% {
 908 |         -webkit-transform: translateY(2.5px) rotate(-1.5deg);
 909 |         transform: translateY(2.5px) rotate(-1.5deg)
 910 |     }
 911 |     44% {
 912 |         -webkit-transform: translateY(1.5px) rotate(.5deg);
 913 |         transform: translateY(1.5px) rotate(.5deg)
 914 |     }
 915 |     46% {
 916 |         -webkit-transform: translateY(-1.5px) rotate(2.5deg);
 917 |         transform: translateY(-1.5px) rotate(2.5deg)
 918 |     }
 919 |     48% {
 920 |         -webkit-transform: translateY(-.5px) rotate(.5deg);
 921 |         transform: translateY(-.5px) rotate(.5deg)
 922 |     }
 923 |     50% {
 924 |         -webkit-transform: translateY(.5px) rotate(.5deg);
 925 |         transform: translateY(.5px) rotate(.5deg)
 926 |     }
 927 |     52% {
 928 |         -webkit-transform: translateY(2.5px) rotate(2.5deg);
 929 |         transform: translateY(2.5px) rotate(2.5deg)
 930 |     }
 931 |     54% {
 932 |         -webkit-transform: translateY(-1.5px) rotate(1.5deg);
 933 |         transform: translateY(-1.5px) rotate(1.5deg)
 934 |     }
 935 |     56% {
 936 |         -webkit-transform: translateY(2.5px) rotate(2.5deg);
 937 |         transform: translateY(2.5px) rotate(2.5deg)
 938 |     }
 939 |     58% {
 940 |         -webkit-transform: translateY(.5px) rotate(2.5deg);
 941 |         transform: translateY(.5px) rotate(2.5deg)
 942 |     }
 943 |     60% {
 944 |         -webkit-transform: translateY(2.5px) rotate(2.5deg);
 945 |         transform: translateY(2.5px) rotate(2.5deg)
 946 |     }
 947 |     62% {
 948 |         -webkit-transform: translateY(-.5px) rotate(2.5deg);
 949 |         transform: translateY(-.5px) rotate(2.5deg)
 950 |     }
 951 |     64% {
 952 |         -webkit-transform: translateY(-.5px) rotate(1.5deg);
 953 |         transform: translateY(-.5px) rotate(1.5deg)
 954 |     }
 955 |     66% {
 956 |         -webkit-transform: translateY(1.5px) rotate(-.5deg);
 957 |         transform: translateY(1.5px) rotate(-.5deg)
 958 |     }
 959 |     68% {
 960 |         -webkit-transform: translateY(-1.5px) rotate(-.5deg);
 961 |         transform: translateY(-1.5px) rotate(-.5deg)
 962 |     }
 963 |     70% {
 964 |         -webkit-transform: translateY(1.5px) rotate(.5deg);
 965 |         transform: translateY(1.5px) rotate(.5deg)
 966 |     }
 967 |     72% {
 968 |         -webkit-transform: translateY(2.5px) rotate(1.5deg);
 969 |         transform: translateY(2.5px) rotate(1.5deg)
 970 |     }
 971 |     74% {
 972 |         -webkit-transform: translateY(-.5px) rotate(.5deg);
 973 |         transform: translateY(-.5px) rotate(.5deg)
 974 |     }
 975 |     76% {
 976 |         -webkit-transform: translateY(-.5px) rotate(2.5deg);
 977 |         transform: translateY(-.5px) rotate(2.5deg)
 978 |     }
 979 |     78% {
 980 |         -webkit-transform: translateY(-.5px) rotate(1.5deg);
 981 |         transform: translateY(-.5px) rotate(1.5deg)
 982 |     }
 983 |     80% {
 984 |         -webkit-transform: translateY(1.5px) rotate(1.5deg);
 985 |         transform: translateY(1.5px) rotate(1.5deg)
 986 |     }
 987 |     82% {
 988 |         -webkit-transform: translateY(-.5px) rotate(.5deg);
 989 |         transform: translateY(-.5px) rotate(.5deg)
 990 |     }
 991 |     84% {
 992 |         -webkit-transform: translateY(1.5px) rotate(2.5deg);
 993 |         transform: translateY(1.5px) rotate(2.5deg)
 994 |     }
 995 |     86% {
 996 |         -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
 997 |         transform: translateY(-1.5px) rotate(-1.5deg)
 998 |     }
 999 |     88% {
1000 |         -webkit-transform: translateY(-.5px) rotate(2.5deg);
1001 |         transform: translateY(-.5px) rotate(2.5deg)
1002 |     }
1003 |     90% {
1004 |         -webkit-transform: translateY(2.5px) rotate(-.5deg);
1005 |         transform: translateY(2.5px) rotate(-.5deg)
1006 |     }
1007 |     92% {
1008 |         -webkit-transform: translateY(.5px) rotate(-.5deg);
1009 |         transform: translateY(.5px) rotate(-.5deg)
1010 |     }
1011 |     94% {
1012 |         -webkit-transform: translateY(2.5px) rotate(.5deg);
1013 |         transform: translateY(2.5px) rotate(.5deg)
1014 |     }
1015 |     96% {
1016 |         -webkit-transform: translateY(-.5px) rotate(1.5deg);
1017 |         transform: translateY(-.5px) rotate(1.5deg)
1018 |     }
1019 |     98% {
1020 |         -webkit-transform: translateY(-1.5px) rotate(-.5deg);
1021 |         transform: translateY(-1.5px) rotate(-.5deg)
1022 |     }
1023 |     0%, to {
1024 |         -webkit-transform: translate(0) rotate(0deg);
1025 |         transform: translate(0) rotate(0deg)
1026 |     }
1027 | }
1028 | 


--------------------------------------------------------------------------------
/css/detail.css.bak:
--------------------------------------------------------------------------------
   1 | 
   2 | fieldset {
   3 |     border: 1px solid #eee;
   4 |     border-radius: 3px;
   5 |     padding: 10px 15px;
   6 | }
   7 | 
   8 | fieldset > legend {
   9 |     background-color: #eb5055;
  10 |     color: #fff;
  11 |     border-radius: 2px;
  12 |     padding: 2px 5px;
  13 |     font-size: 12px;
  14 | }
  15 | 
  16 | .article_label {
  17 |     font-size: 14px;
  18 |     word-wrap: break-word;
  19 |     word-break: break-word;
  20 |     margin: 0;
  21 |     padding: 15px 0 15px;
  22 | }
  23 | 
  24 | .article_label a {
  25 |     font-size: 13px;
  26 |     font-weight: 600;
  27 |     display: inline-block;
  28 |     margin: 4px 8px 0 0;
  29 |     padding: 0 15px;
  30 |     -webkit-transition-duration: .4s;
  31 |     transition-duration: .4s;
  32 |     letter-spacing: 0;
  33 | }
  34 | 
  35 | .article_label a:nth-child(n) {
  36 |     color: #fff;
  37 |     border: 1px solid #b952c5;
  38 |     border-radius: 15px;
  39 |     background: #b952c5;
  40 | }
  41 | 
  42 | .article_label a:nth-child(2n) {
  43 |     color: #fff;
  44 |     border: 1px solid #ff9800;
  45 |     border-radius: 15px;
  46 |     background: #ff9800;
  47 | }
  48 | 
  49 | .article_label a:nth-child(3n) {
  50 |     color: #fff;
  51 |     border: 1px solid #46c47c;
  52 |     border-radius: 15px;
  53 |     background: #46c47c;
  54 | }
  55 | 
  56 | .article_label a:nth-child(4n) {
  57 |     color: #fff;
  58 |     border: 1px solid #6fa3ef;
  59 |     border-radius: 15px;
  60 |     background: #6fa3ef;
  61 | }
  62 | 
  63 | .article_label a:nth-child(5n) {
  64 |     color: #fff;
  65 |     border: 1px solid #EE2C2C;
  66 |     border-radius: 15px;
  67 |     background: #EE2C2C;
  68 | }
  69 | 
  70 | .article_label a:hover{
  71 |     color: #5f5f5f;
  72 |     border: 1px solid #f7f7f7;
  73 |     outline-style: none;
  74 |     background: #f7f7f7;
  75 | }
  76 | 
  77 | .detail_info {
  78 |     font-size: 13px;
  79 |     color: #a5a5a5;
  80 |     text-decoration: none;
  81 |     text-shadow: 0 0 2px #fff;
  82 |     padding-bottom: 20px;
  83 |     border-bottom: 1px dashed #c5c5c5;
  84 | }
  85 | 
  86 | .detail_info span {
  87 |     margin-right: 15px;
  88 |     display: inline-block;
  89 | }
  90 | 
  91 | .detail_info span i {
  92 |     margin: 0 5px 0 5px;
  93 | }
  94 | 
  95 | .detail_content {
  96 |     margin-top: 30px;
  97 | }
  98 | 
  99 | .detail_content > div {
 100 |     margin-top: 30px;
 101 | }
 102 | 
 103 | .detail_comment {
 104 |     margin-top: 70px;
 105 | }
 106 | 
 107 | .reply_comment {
 108 |     margin-top: 10px;
 109 | }
 110 | 
 111 | .detail_comment > h3 {
 112 |     border-left: 4px solid #eb5055;
 113 |     padding-left: 10px;
 114 |     font-size: 16px;
 115 |     display: inline-block;
 116 |     line-height: 30px;
 117 |     margin-bottom: 5px;
 118 | }
 119 | 
 120 | .detail_comment > form > ul, #reply_form > ul {
 121 |     margin-top: 20px;
 122 |     overflow: hidden;
 123 | }
 124 | 
 125 | .detail_comment > form > ul > li:first-child, #reply_form > ul > li:first-child {
 126 |     position: relative;
 127 |     bottom: 3px;
 128 |     width: 14%;
 129 |     text-align: center;
 130 | }
 131 | 
 132 | .detail_comment > form > ul > li:last-child, #reply_form > ul > li:last-child {
 133 |     margin-left: 30px;
 134 | }
 135 | 
 136 | .detail_comment > form > ul > li, #reply_form > ul > li {
 137 |     float: left;
 138 |     overflow: hidden;
 139 |     box-sizing: border-box;
 140 |     padding-right: 30px;
 141 |     padding-bottom: 10px;
 142 | }
 143 | 
 144 | input[type=text] {
 145 |     width: 100%;
 146 |     height: 20px;
 147 |     background: #F7F7F9;
 148 |     border: 1px solid #D3D3D7;
 149 |     border-radius: 5px;
 150 |     font-size: 14px;
 151 |     color: black;
 152 |     padding: 6px 8px;
 153 |     outline: none;
 154 | }
 155 | 
 156 | label {
 157 |     font-size: 12px;
 158 |     line-height: 20px;
 159 |     padding-bottom: 5px;
 160 |     display: block;
 161 | }
 162 | 
 163 | .detail_editor {
 164 |     padding: 10px 0;
 165 | }
 166 | 
 167 | .headImg {
 168 |     background-color: rgba(0, 0, 0, .4);
 169 |     text-align: center;
 170 |     width: 250px;
 171 |     height: 256px;
 172 |     position: fixed;
 173 |     top: calc(50% - 130px);
 174 |     left: calc(50% - 128px);
 175 |     z-index: 5;
 176 | }
 177 | 
 178 | .headImg ul {
 179 |     overflow: hidden;
 180 |     padding: 10px;
 181 | }
 182 | 
 183 | .headImg ul li {
 184 |     overflow: hidden;
 185 |     display: block;
 186 |     width: 24%;
 187 |     padding-top: 5px;
 188 |     float: left;
 189 | }
 190 | 
 191 | .headImg ul li img {
 192 |     border-radius: 50px;
 193 |     cursor: pointer;
 194 |     -webkit-transition: all .3s;
 195 |     -moz-transition: all .3s;
 196 |     -ms-transition: all .3s;
 197 |     -o-transition: all .3s;
 198 |     transition: all .3s;
 199 | }
 200 | 
 201 | .headImg ul li img:hover {
 202 |     transform: scale(1.3);
 203 | }
 204 | 
 205 | .close {
 206 |     position: absolute;
 207 |     top: 5px;
 208 |     right: 5px;
 209 |     cursor: pointer;
 210 | }
 211 | 
 212 | .close i {
 213 |     font-size: 14px;
 214 |     color: #EE2C2C;
 215 |     margin-right: 5px;
 216 | }
 217 | 
 218 | #commentHeadImage, #replyHeadImage {
 219 |     z-index: 2;
 220 |     border-radius: 50px;
 221 |     cursor: pointer;
 222 |     -webkit-transition: all .3s;
 223 |     -moz-transition: all .3s;
 224 |     -ms-transition: all .3s;
 225 |     -o-transition: all .3s;
 226 |     transition: all .3s;
 227 | }
 228 | 
 229 | #commentHeadImage:hover, #replyHeadImage:hover {
 230 |     transform: scale(1.3);
 231 | }
 232 | 
 233 | .email_reply, .email_comment {
 234 |     position: relative;
 235 |     float: left;
 236 |     height: 24px;
 237 |     margin-bottom: 3px;
 238 |     vertical-align: middle;
 239 |     cursor: pointer;
 240 | }
 241 | 
 242 | .email_comment span, .email_reply span {
 243 |     position: relative;
 244 |     font-size: 14px;
 245 |     margin-left: 10px;
 246 |     bottom: 6px;
 247 |     cursor: pointer;
 248 | }
 249 | 
 250 | .email_comment:before, .email_reply:before {
 251 |     display: inline-block;
 252 |     position: relative;
 253 |     content: '';
 254 |     width: 45px;
 255 |     height: 24px;
 256 |     background-color: #D8D8D8;
 257 |     border-radius: 100px;
 258 |     transition: background-color .5s;
 259 | }
 260 | 
 261 | .email_comment:after, .email_reply:after {
 262 |     position: absolute;
 263 |     left: 4px;
 264 |     top: 4px;
 265 |     content: '';
 266 |     width: 16px;
 267 |     height: 16px;
 268 |     border-radius: 50%;
 269 |     background-color: #fff;
 270 |     transition: transform 0.3s ease-in;
 271 | }
 272 | 
 273 | #email_reply:checked + .email_reply:before {
 274 |     background-color: #EE2C2C;
 275 | }
 276 | 
 277 | #email_reply:checked + .email_reply:after {
 278 |     transform: translateX(130%);
 279 | }
 280 | 
 281 | #email_comment:checked + .email_comment:before {
 282 |     background-color: #EE2C2C;
 283 | }
 284 | 
 285 | #email_comment:checked + .email_comment:after {
 286 |     transform: translateX(130%);
 287 | }
 288 | 
 289 | #email_reply, #email_comment {
 290 |     display: none;
 291 | }
 292 | 
 293 | .commit_comment, .reply_commit {
 294 |     border-radius: 5px;
 295 |     color: #FFFFFF;
 296 |     font-size: 12px;
 297 |     padding: 2px 20px;
 298 |     line-height: 25px;
 299 |     width: auto;
 300 |     float: right;
 301 |     background-color: #EE2C2C;
 302 |     cursor: pointer;
 303 | }
 304 | 
 305 | .submit_info {
 306 |     overflow: hidden;
 307 |     text-align: center;
 308 |     vertical-align: middle;
 309 | }
 310 | 
 311 | .commentHeadImg {
 312 |     position: absolute;
 313 | }
 314 | 
 315 | .commentHeadImg img {
 316 |     width: 48px;
 317 |     height: 48px;
 318 |     border-radius: 50%;
 319 |     border: 0;
 320 |     vertical-align: middle;
 321 |     user-select: none;
 322 | }
 323 | 
 324 | .replyHeadImg {
 325 |     position: absolute;
 326 | }
 327 | 
 328 | .replyHeadImg img {
 329 |     width: 35px;
 330 |     height: 35px;
 331 |     border-radius: 50%;
 332 |     border: 0;
 333 |     vertical-align: middle;
 334 |     user-select: none;
 335 | }
 336 | 
 337 | .comment {
 338 |     margin-left: 75px;
 339 | }
 340 | 
 341 | .comment_reply {
 342 |     margin-left: 50px;
 343 | }
 344 | 
 345 | .comment > h3, .comment_reply > h3 {
 346 |     line-height: 18px;
 347 |     padding-bottom: 4px;
 348 |     display: block;
 349 |     word-wrap: break-word;
 350 |     text-decoration: none;
 351 |     font-size: 12px;
 352 |     font-weight: 700;
 353 |     color: #6d757a;
 354 |     cursor: pointer;
 355 | }
 356 | 
 357 | .comment > span, .comment_reply > span {
 358 |     line-height: 25px;
 359 |     padding: 2px 0;
 360 |     font-size: 14px;
 361 |     text-shadow: none;
 362 |     overflow: hidden;
 363 |     word-wrap: break-word;
 364 |     word-break: break-word;
 365 | }
 366 | 
 367 | .comment > span img, .comment_reply > span img {
 368 |     width: 78px;
 369 |     height: 78px;
 370 | }
 371 | 
 372 | .comment > p, .comment_reply > p {
 373 |     margin-top: 4px;
 374 |     margin-bottom: 8px;
 375 |     font-size: 13px;
 376 |     color: #99a2aa;
 377 | }
 378 | 
 379 | .article_comment {
 380 |     margin-top: 20px;
 381 | }
 382 | 
 383 | .reply {
 384 |     margin-left: 10px;
 385 |     cursor: pointer;
 386 | }
 387 | 
 388 | .reply:hover {
 389 |     color: #EE2C2C;
 390 | }
 391 | 
 392 | .article_reply {
 393 |     margin-top: 20px;
 394 |     margin-left: 75px;
 395 | }
 396 | 
 397 | .reply_sign {
 398 |     font-size: 12px;
 399 |     color: #EE2C2C;
 400 | }
 401 | 
 402 | #commentBox > li {
 403 |     padding-top: 20px;
 404 | }
 405 | 
 406 | #commentBox > li:after {
 407 |     margin-left: 75px;
 408 |     content: "";
 409 |     display: block;
 410 |     height: 1px;
 411 |     background-color: #e5e9ef;
 412 |     margin-top: 20px;
 413 | }
 414 | 
 415 | .prise {
 416 |     user-select: none;
 417 |     border-top: 1px solid #eee;
 418 |     border-bottom: 1px solid #eee;
 419 |     padding: 15px 5px;
 420 |     margin: 10px 0;
 421 |     text-align: center;
 422 |     -webkit-transition: .4s;
 423 |     -moz-transition: .4s;
 424 |     -o-transition: .4s;
 425 |     -ms-transition: .4s;
 426 |     opacity: .3;
 427 | }
 428 | 
 429 | .prise:hover {
 430 |     opacity: 1;
 431 | }
 432 | 
 433 | .prise > div {
 434 |     display: inline-block;
 435 |     margin-right: 15px;
 436 |     padding-left: 35px;
 437 |     position: relative;
 438 |     cursor: pointer;
 439 | }
 440 | 
 441 | .likeHeart, .likeHeart:before, .likeHeart:after {
 442 |     background: url(../images/like_heart.png);
 443 |     background-position: left;
 444 |     background-repeat: no-repeat;
 445 |     height: 80px;
 446 |     width: 80px;
 447 |     cursor: pointer;
 448 |     position: absolute;
 449 |     left: -25px;
 450 |     top: -30px;
 451 |     background-size: 2900%;
 452 | }
 453 | 
 454 | .like:hover {
 455 |     background: 0;
 456 | }
 457 | 
 458 | .like:hover .likeHeart {
 459 |     background-position: right;
 460 | }
 461 | 
 462 | .like:hover .likeHeart:before {
 463 |     content: '';
 464 |     background-position: right;
 465 |     position: absolute;
 466 |     -webkit-animation: i-like 2.13584698s infinite;
 467 |     animation: i-like 2.13584698s infinite;
 468 |     z-index: 0;
 469 | }
 470 | 
 471 | .like:hover .likeHeart:after {
 472 |     content: '';
 473 |     background-position: right;
 474 |     position: absolute;
 475 |     -webkit-animation: i-like 3.141592653s infinite;
 476 |     animation: i-like 3.141592653s infinite;
 477 | }
 478 | 
 479 | .prise i {
 480 |     font-size: 28px;
 481 |     position: absolute;
 482 |     width: 30px;
 483 |     left: 0;
 484 |     top: -5px;
 485 |     color: #aab8c2;
 486 | }
 487 | 
 488 | .priseImg {
 489 |     position: fixed;
 490 |     display: none;
 491 |     background-color: #FFFFFF;
 492 |     padding-top: 10px;
 493 |     top: calc(50% - 100px);
 494 |     left: calc(50% - 200px);
 495 |     -webkit-animation: dance 5s infinite ease-in-out;
 496 |     animation: dance 5s infinite ease-in-out;
 497 | }
 498 | 
 499 | .weChatPay {
 500 |     float: left;
 501 | }
 502 | 
 503 | .aliPay {
 504 |     float: right;
 505 | }
 506 | 
 507 | .pay:hover .priseImg {
 508 |     display: block;
 509 | }
 510 | 
 511 | .pay img {
 512 |     padding: 10px;
 513 | }
 514 | 
 515 | .mobile{
 516 |     display: none;
 517 | }
 518 | 
 519 | @media screen and (max-width: 500px) {
 520 |     .w700 {
 521 |         width: 90%;
 522 |         padding: 20px 10px 0 10px;
 523 |     }
 524 | 
 525 |     .detail_comment > form > ul > li:first-child, #reply_form > ul > li:first-child {
 526 |         width: 20%;
 527 |     }
 528 | 
 529 |     .detail_comment > form > ul > li, #reply_form > ul > li {
 530 |         padding-bottom: 0;
 531 |         width: 40%;
 532 |     }
 533 | 
 534 |     .detail_comment > form > ul > li:last-child, #reply_form > ul > li:last-child {
 535 |         margin-left: 0;
 536 |     }
 537 | 
 538 |     .article_reply{
 539 |         margin-left: 12px;
 540 |     }
 541 | 
 542 |     #commentBox > li:after{
 543 |         margin-left: 2px;
 544 |     }
 545 | 
 546 |     .comment .reply_comment{
 547 |         margin-left: -75px;
 548 |     }
 549 | 
 550 |     .comment_reply .reply_comment{
 551 |         margin-left: -62px;
 552 |     }
 553 | 
 554 |     .w-e-panel-container{
 555 |         width: 320px!important;
 556 |     }
 557 | 
 558 |     .priseImg img{
 559 |         width: 100px;
 560 |         height: 100px;
 561 |     }
 562 | 
 563 |     .priseImg{
 564 |         top: calc(50% - 50px);
 565 |         left: calc(50% - 120px);
 566 |     }
 567 | 
 568 |     .mobile{
 569 |         display: block;
 570 |     }
 571 | 
 572 | }
 573 | 
 574 | @-webkit-keyframes i-like {
 575 |     0% {
 576 |         -webkit-transform: translateY(29px);
 577 |         transform: translateY(29px);
 578 |         margin-left: 25px
 579 |     }
 580 |     20% {
 581 |         margin-left: 35px
 582 |     }
 583 |     40% {
 584 |         margin-left: -6px
 585 |     }
 586 |     60% {
 587 |         margin-left: 4px
 588 |     }
 589 |     80% {
 590 |         margin-left: -2px
 591 |     }
 592 |     100% {
 593 |         opacity: 0;
 594 |         -webkit-transform: translateY(-50px) rotate(180deg) scale(.5);
 595 |         transform: translateY(-50px) rotate(180deg) scale(.5)
 596 |     }
 597 | }
 598 | 
 599 | @keyframes i-like {
 600 |     0% {
 601 |         -webkit-transform: translateY(29px);
 602 |         transform: translateY(29px);
 603 |         margin-left: 25px
 604 |     }
 605 |     20% {
 606 |         margin-left: 35px
 607 |     }
 608 |     40% {
 609 |         margin-left: -6px
 610 |     }
 611 |     60% {
 612 |         margin-left: 4px
 613 |     }
 614 |     80% {
 615 |         margin-left: -2px
 616 |     }
 617 |     100% {
 618 |         opacity: 0;
 619 |         -webkit-transform: translateY(-50px) rotate(180deg) scale(.5);
 620 |         transform: translateY(-50px) rotate(180deg) scale(.5)
 621 |     }
 622 | }
 623 | 
 624 | @-webkit-keyframes dance {
 625 |     2% {
 626 |         -webkit-transform: translateY(1.5px) rotate(1.5deg);
 627 |         transform: translateY(1.5px) rotate(1.5deg)
 628 |     }
 629 |     4% {
 630 |         -webkit-transform: translateY(-1.5px) rotate(-.5deg);
 631 |         transform: translateY(-1.5px) rotate(-.5deg)
 632 |     }
 633 |     6% {
 634 |         -webkit-transform: translateY(1.5px) rotate(-1.5deg);
 635 |         transform: translateY(1.5px) rotate(-1.5deg)
 636 |     }
 637 |     8% {
 638 |         -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
 639 |         transform: translateY(-1.5px) rotate(-1.5deg)
 640 |     }
 641 |     10% {
 642 |         -webkit-transform: translateY(2.5px) rotate(1.5deg);
 643 |         transform: translateY(2.5px) rotate(1.5deg)
 644 |     }
 645 |     12% {
 646 |         -webkit-transform: translateY(-.5px) rotate(1.5deg);
 647 |         transform: translateY(-.5px) rotate(1.5deg)
 648 |     }
 649 |     14% {
 650 |         -webkit-transform: translateY(-1.5px) rotate(1.5deg);
 651 |         transform: translateY(-1.5px) rotate(1.5deg)
 652 |     }
 653 |     16% {
 654 |         -webkit-transform: translateY(-.5px) rotate(-1.5deg);
 655 |         transform: translateY(-.5px) rotate(-1.5deg)
 656 |     }
 657 |     18% {
 658 |         -webkit-transform: translateY(.5px) rotate(-1.5deg);
 659 |         transform: translateY(.5px) rotate(-1.5deg)
 660 |     }
 661 |     20% {
 662 |         -webkit-transform: translateY(-1.5px) rotate(2.5deg);
 663 |         transform: translateY(-1.5px) rotate(2.5deg)
 664 |     }
 665 |     22% {
 666 |         -webkit-transform: translateY(.5px) rotate(-1.5deg);
 667 |         transform: translateY(.5px) rotate(-1.5deg)
 668 |     }
 669 |     24% {
 670 |         -webkit-transform: translateY(1.5px) rotate(1.5deg);
 671 |         transform: translateY(1.5px) rotate(1.5deg)
 672 |     }
 673 |     26% {
 674 |         -webkit-transform: translateY(.5px) rotate(.5deg);
 675 |         transform: translateY(.5px) rotate(.5deg)
 676 |     }
 677 |     28% {
 678 |         -webkit-transform: translateY(.5px) rotate(1.5deg);
 679 |         transform: translateY(.5px) rotate(1.5deg)
 680 |     }
 681 |     30% {
 682 |         -webkit-transform: translateY(-.5px) rotate(2.5deg);
 683 |         transform: translateY(-.5px) rotate(2.5deg)
 684 |     }
 685 |     32% {
 686 |         -webkit-transform: translateY(1.5px) rotate(-.5deg);
 687 |         transform: translateY(1.5px) rotate(-.5deg)
 688 |     }
 689 |     34% {
 690 |         -webkit-transform: translateY(1.5px) rotate(-.5deg);
 691 |         transform: translateY(1.5px) rotate(-.5deg)
 692 |     }
 693 |     36% {
 694 |         -webkit-transform: translateY(-1.5px) rotate(2.5deg);
 695 |         transform: translateY(-1.5px) rotate(2.5deg)
 696 |     }
 697 |     38% {
 698 |         -webkit-transform: translateY(1.5px) rotate(-1.5deg);
 699 |         transform: translateY(1.5px) rotate(-1.5deg)
 700 |     }
 701 |     40% {
 702 |         -webkit-transform: translateY(-.5px) rotate(2.5deg);
 703 |         transform: translateY(-.5px) rotate(2.5deg)
 704 |     }
 705 |     42% {
 706 |         -webkit-transform: translateY(2.5px) rotate(-1.5deg);
 707 |         transform: translateY(2.5px) rotate(-1.5deg)
 708 |     }
 709 |     44% {
 710 |         -webkit-transform: translateY(1.5px) rotate(.5deg);
 711 |         transform: translateY(1.5px) rotate(.5deg)
 712 |     }
 713 |     46% {
 714 |         -webkit-transform: translateY(-1.5px) rotate(2.5deg);
 715 |         transform: translateY(-1.5px) rotate(2.5deg)
 716 |     }
 717 |     48% {
 718 |         -webkit-transform: translateY(-.5px) rotate(.5deg);
 719 |         transform: translateY(-.5px) rotate(.5deg)
 720 |     }
 721 |     50% {
 722 |         -webkit-transform: translateY(.5px) rotate(.5deg);
 723 |         transform: translateY(.5px) rotate(.5deg)
 724 |     }
 725 |     52% {
 726 |         -webkit-transform: translateY(2.5px) rotate(2.5deg);
 727 |         transform: translateY(2.5px) rotate(2.5deg)
 728 |     }
 729 |     54% {
 730 |         -webkit-transform: translateY(-1.5px) rotate(1.5deg);
 731 |         transform: translateY(-1.5px) rotate(1.5deg)
 732 |     }
 733 |     56% {
 734 |         -webkit-transform: translateY(2.5px) rotate(2.5deg);
 735 |         transform: translateY(2.5px) rotate(2.5deg)
 736 |     }
 737 |     58% {
 738 |         -webkit-transform: translateY(.5px) rotate(2.5deg);
 739 |         transform: translateY(.5px) rotate(2.5deg)
 740 |     }
 741 |     60% {
 742 |         -webkit-transform: translateY(2.5px) rotate(2.5deg);
 743 |         transform: translateY(2.5px) rotate(2.5deg)
 744 |     }
 745 |     62% {
 746 |         -webkit-transform: translateY(-.5px) rotate(2.5deg);
 747 |         transform: translateY(-.5px) rotate(2.5deg)
 748 |     }
 749 |     64% {
 750 |         -webkit-transform: translateY(-.5px) rotate(1.5deg);
 751 |         transform: translateY(-.5px) rotate(1.5deg)
 752 |     }
 753 |     66% {
 754 |         -webkit-transform: translateY(1.5px) rotate(-.5deg);
 755 |         transform: translateY(1.5px) rotate(-.5deg)
 756 |     }
 757 |     68% {
 758 |         -webkit-transform: translateY(-1.5px) rotate(-.5deg);
 759 |         transform: translateY(-1.5px) rotate(-.5deg)
 760 |     }
 761 |     70% {
 762 |         -webkit-transform: translateY(1.5px) rotate(.5deg);
 763 |         transform: translateY(1.5px) rotate(.5deg)
 764 |     }
 765 |     72% {
 766 |         -webkit-transform: translateY(2.5px) rotate(1.5deg);
 767 |         transform: translateY(2.5px) rotate(1.5deg)
 768 |     }
 769 |     74% {
 770 |         -webkit-transform: translateY(-.5px) rotate(.5deg);
 771 |         transform: translateY(-.5px) rotate(.5deg)
 772 |     }
 773 |     76% {
 774 |         -webkit-transform: translateY(-.5px) rotate(2.5deg);
 775 |         transform: translateY(-.5px) rotate(2.5deg)
 776 |     }
 777 |     78% {
 778 |         -webkit-transform: translateY(-.5px) rotate(1.5deg);
 779 |         transform: translateY(-.5px) rotate(1.5deg)
 780 |     }
 781 |     80% {
 782 |         -webkit-transform: translateY(1.5px) rotate(1.5deg);
 783 |         transform: translateY(1.5px) rotate(1.5deg)
 784 |     }
 785 |     82% {
 786 |         -webkit-transform: translateY(-.5px) rotate(.5deg);
 787 |         transform: translateY(-.5px) rotate(.5deg)
 788 |     }
 789 |     84% {
 790 |         -webkit-transform: translateY(1.5px) rotate(2.5deg);
 791 |         transform: translateY(1.5px) rotate(2.5deg)
 792 |     }
 793 |     86% {
 794 |         -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
 795 |         transform: translateY(-1.5px) rotate(-1.5deg)
 796 |     }
 797 |     88% {
 798 |         -webkit-transform: translateY(-.5px) rotate(2.5deg);
 799 |         transform: translateY(-.5px) rotate(2.5deg)
 800 |     }
 801 |     90% {
 802 |         -webkit-transform: translateY(2.5px) rotate(-.5deg);
 803 |         transform: translateY(2.5px) rotate(-.5deg)
 804 |     }
 805 |     92% {
 806 |         -webkit-transform: translateY(.5px) rotate(-.5deg);
 807 |         transform: translateY(.5px) rotate(-.5deg)
 808 |     }
 809 |     94% {
 810 |         -webkit-transform: translateY(2.5px) rotate(.5deg);
 811 |         transform: translateY(2.5px) rotate(.5deg)
 812 |     }
 813 |     96% {
 814 |         -webkit-transform: translateY(-.5px) rotate(1.5deg);
 815 |         transform: translateY(-.5px) rotate(1.5deg)
 816 |     }
 817 |     98% {
 818 |         -webkit-transform: translateY(-1.5px) rotate(-.5deg);
 819 |         transform: translateY(-1.5px) rotate(-.5deg)
 820 |     }
 821 |     0%, to {
 822 |         -webkit-transform: translate(0) rotate(0deg);
 823 |         transform: translate(0) rotate(0deg)
 824 |     }
 825 | }
 826 | 
 827 | @keyframes dance {
 828 |     2% {
 829 |         -webkit-transform: translateY(1.5px) rotate(1.5deg);
 830 |         transform: translateY(1.5px) rotate(1.5deg)
 831 |     }
 832 |     4% {
 833 |         -webkit-transform: translateY(-1.5px) rotate(-.5deg);
 834 |         transform: translateY(-1.5px) rotate(-.5deg)
 835 |     }
 836 |     6% {
 837 |         -webkit-transform: translateY(1.5px) rotate(-1.5deg);
 838 |         transform: translateY(1.5px) rotate(-1.5deg)
 839 |     }
 840 |     8% {
 841 |         -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
 842 |         transform: translateY(-1.5px) rotate(-1.5deg)
 843 |     }
 844 |     10% {
 845 |         -webkit-transform: translateY(2.5px) rotate(1.5deg);
 846 |         transform: translateY(2.5px) rotate(1.5deg)
 847 |     }
 848 |     12% {
 849 |         -webkit-transform: translateY(-.5px) rotate(1.5deg);
 850 |         transform: translateY(-.5px) rotate(1.5deg)
 851 |     }
 852 |     14% {
 853 |         -webkit-transform: translateY(-1.5px) rotate(1.5deg);
 854 |         transform: translateY(-1.5px) rotate(1.5deg)
 855 |     }
 856 |     16% {
 857 |         -webkit-transform: translateY(-.5px) rotate(-1.5deg);
 858 |         transform: translateY(-.5px) rotate(-1.5deg)
 859 |     }
 860 |     18% {
 861 |         -webkit-transform: translateY(.5px) rotate(-1.5deg);
 862 |         transform: translateY(.5px) rotate(-1.5deg)
 863 |     }
 864 |     20% {
 865 |         -webkit-transform: translateY(-1.5px) rotate(2.5deg);
 866 |         transform: translateY(-1.5px) rotate(2.5deg)
 867 |     }
 868 |     22% {
 869 |         -webkit-transform: translateY(.5px) rotate(-1.5deg);
 870 |         transform: translateY(.5px) rotate(-1.5deg)
 871 |     }
 872 |     24% {
 873 |         -webkit-transform: translateY(1.5px) rotate(1.5deg);
 874 |         transform: translateY(1.5px) rotate(1.5deg)
 875 |     }
 876 |     26% {
 877 |         -webkit-transform: translateY(.5px) rotate(.5deg);
 878 |         transform: translateY(.5px) rotate(.5deg)
 879 |     }
 880 |     28% {
 881 |         -webkit-transform: translateY(.5px) rotate(1.5deg);
 882 |         transform: translateY(.5px) rotate(1.5deg)
 883 |     }
 884 |     30% {
 885 |         -webkit-transform: translateY(-.5px) rotate(2.5deg);
 886 |         transform: translateY(-.5px) rotate(2.5deg)
 887 |     }
 888 |     32% {
 889 |         -webkit-transform: translateY(1.5px) rotate(-.5deg);
 890 |         transform: translateY(1.5px) rotate(-.5deg)
 891 |     }
 892 |     34% {
 893 |         -webkit-transform: translateY(1.5px) rotate(-.5deg);
 894 |         transform: translateY(1.5px) rotate(-.5deg)
 895 |     }
 896 |     36% {
 897 |         -webkit-transform: translateY(-1.5px) rotate(2.5deg);
 898 |         transform: translateY(-1.5px) rotate(2.5deg)
 899 |     }
 900 |     38% {
 901 |         -webkit-transform: translateY(1.5px) rotate(-1.5deg);
 902 |         transform: translateY(1.5px) rotate(-1.5deg)
 903 |     }
 904 |     40% {
 905 |         -webkit-transform: translateY(-.5px) rotate(2.5deg);
 906 |         transform: translateY(-.5px) rotate(2.5deg)
 907 |     }
 908 |     42% {
 909 |         -webkit-transform: translateY(2.5px) rotate(-1.5deg);
 910 |         transform: translateY(2.5px) rotate(-1.5deg)
 911 |     }
 912 |     44% {
 913 |         -webkit-transform: translateY(1.5px) rotate(.5deg);
 914 |         transform: translateY(1.5px) rotate(.5deg)
 915 |     }
 916 |     46% {
 917 |         -webkit-transform: translateY(-1.5px) rotate(2.5deg);
 918 |         transform: translateY(-1.5px) rotate(2.5deg)
 919 |     }
 920 |     48% {
 921 |         -webkit-transform: translateY(-.5px) rotate(.5deg);
 922 |         transform: translateY(-.5px) rotate(.5deg)
 923 |     }
 924 |     50% {
 925 |         -webkit-transform: translateY(.5px) rotate(.5deg);
 926 |         transform: translateY(.5px) rotate(.5deg)
 927 |     }
 928 |     52% {
 929 |         -webkit-transform: translateY(2.5px) rotate(2.5deg);
 930 |         transform: translateY(2.5px) rotate(2.5deg)
 931 |     }
 932 |     54% {
 933 |         -webkit-transform: translateY(-1.5px) rotate(1.5deg);
 934 |         transform: translateY(-1.5px) rotate(1.5deg)
 935 |     }
 936 |     56% {
 937 |         -webkit-transform: translateY(2.5px) rotate(2.5deg);
 938 |         transform: translateY(2.5px) rotate(2.5deg)
 939 |     }
 940 |     58% {
 941 |         -webkit-transform: translateY(.5px) rotate(2.5deg);
 942 |         transform: translateY(.5px) rotate(2.5deg)
 943 |     }
 944 |     60% {
 945 |         -webkit-transform: translateY(2.5px) rotate(2.5deg);
 946 |         transform: translateY(2.5px) rotate(2.5deg)
 947 |     }
 948 |     62% {
 949 |         -webkit-transform: translateY(-.5px) rotate(2.5deg);
 950 |         transform: translateY(-.5px) rotate(2.5deg)
 951 |     }
 952 |     64% {
 953 |         -webkit-transform: translateY(-.5px) rotate(1.5deg);
 954 |         transform: translateY(-.5px) rotate(1.5deg)
 955 |     }
 956 |     66% {
 957 |         -webkit-transform: translateY(1.5px) rotate(-.5deg);
 958 |         transform: translateY(1.5px) rotate(-.5deg)
 959 |     }
 960 |     68% {
 961 |         -webkit-transform: translateY(-1.5px) rotate(-.5deg);
 962 |         transform: translateY(-1.5px) rotate(-.5deg)
 963 |     }
 964 |     70% {
 965 |         -webkit-transform: translateY(1.5px) rotate(.5deg);
 966 |         transform: translateY(1.5px) rotate(.5deg)
 967 |     }
 968 |     72% {
 969 |         -webkit-transform: translateY(2.5px) rotate(1.5deg);
 970 |         transform: translateY(2.5px) rotate(1.5deg)
 971 |     }
 972 |     74% {
 973 |         -webkit-transform: translateY(-.5px) rotate(.5deg);
 974 |         transform: translateY(-.5px) rotate(.5deg)
 975 |     }
 976 |     76% {
 977 |         -webkit-transform: translateY(-.5px) rotate(2.5deg);
 978 |         transform: translateY(-.5px) rotate(2.5deg)
 979 |     }
 980 |     78% {
 981 |         -webkit-transform: translateY(-.5px) rotate(1.5deg);
 982 |         transform: translateY(-.5px) rotate(1.5deg)
 983 |     }
 984 |     80% {
 985 |         -webkit-transform: translateY(1.5px) rotate(1.5deg);
 986 |         transform: translateY(1.5px) rotate(1.5deg)
 987 |     }
 988 |     82% {
 989 |         -webkit-transform: translateY(-.5px) rotate(.5deg);
 990 |         transform: translateY(-.5px) rotate(.5deg)
 991 |     }
 992 |     84% {
 993 |         -webkit-transform: translateY(1.5px) rotate(2.5deg);
 994 |         transform: translateY(1.5px) rotate(2.5deg)
 995 |     }
 996 |     86% {
 997 |         -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
 998 |         transform: translateY(-1.5px) rotate(-1.5deg)
 999 |     }
1000 |     88% {
1001 |         -webkit-transform: translateY(-.5px) rotate(2.5deg);
1002 |         transform: translateY(-.5px) rotate(2.5deg)
1003 |     }
1004 |     90% {
1005 |         -webkit-transform: translateY(2.5px) rotate(-.5deg);
1006 |         transform: translateY(2.5px) rotate(-.5deg)
1007 |     }
1008 |     92% {
1009 |         -webkit-transform: translateY(.5px) rotate(-.5deg);
1010 |         transform: translateY(.5px) rotate(-.5deg)
1011 |     }
1012 |     94% {
1013 |         -webkit-transform: translateY(2.5px) rotate(.5deg);
1014 |         transform: translateY(2.5px) rotate(.5deg)
1015 |     }
1016 |     96% {
1017 |         -webkit-transform: translateY(-.5px) rotate(1.5deg);
1018 |         transform: translateY(-.5px) rotate(1.5deg)
1019 |     }
1020 |     98% {
1021 |         -webkit-transform: translateY(-1.5px) rotate(-.5deg);
1022 |         transform: translateY(-1.5px) rotate(-.5deg)
1023 |     }
1024 |     0%, to {
1025 |         -webkit-transform: translate(0) rotate(0deg);
1026 |         transform: translate(0) rotate(0deg)
1027 |     }
1028 | }
1029 | 


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