新增分类

css/style.css

 /*!
     @author xiejiahe;
     @link https://github.com/xjh22222228
-*/a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;color:#333;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{overflow-x:hidden;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html::-webkit-scrollbar{width:8px;height:16px;border-radius:2px}html::-webkit-scrollbar-track{border-radius:6px;background:#fff}html::-webkit-scrollbar-thumb{border-radius:6px;background:#ccc}body{min-width:320px;font-size:12px;-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;font-family:-apple-system, "PingFang SC", "Hiragino Sans GB", Arial, "Microsoft YaHei", "Helvetica Neue", sans-serif;background:#f8f8f8}body,html,#xiejiahe{height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}h1{font-size:18px}h2{font-size:16px}h3{font-size:14px}h4,h5,h6{font-size:100%}address,cite,dfn,em,var{font-style:normal}small{font-size:12px}ol,ul,li{list-style:none}a{text-decoration:none}abbr[title],acronym[title]{border-bottom:1px dotted;cursor:help}q:after,q:before{content:''}legend{color:#000}fieldset,img,iframe{border:none}button,input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}hr{border:none;height:1px}input[type="text"],input[type="password"],input[type="submit"],input[type="reset"]{-webkit-appearance:none;outline:none;border:1px solid #e1e1e1}textarea{resize:none;outline:none;-webkit-appearance:none}button,input[type="submit"],input[type="reset"]{cursor:pointer;outline:none}i,em{font-style:normal}[ng-cloak]{display:none}a,img{-webkit-touch-callout:none}.user-select-none{user-select:none;-webkit-user-select:none;-ms-user-select:none}.sidebar{z-index:3;position:fixed;top:0;left:0;width:180px;height:100%;background:#30333c;height:100%;visibility:visible;transition:all 0.2s linear;-webkit-transition:all 0.2s linear;-ms-transition:all 0.2s linear}.sidebar .logo{margin-top:10px;text-align:center}.sidebar .logo a{display:inline-block}.sidebar .logo img{width:50px;height:50px;pointer-events:none}.sidebar .nav{padding-top:20px}.sidebar .nav-title{text-align:center;cursor:pointer;font-size:16px}.sidebar .nav-title a{padding:15px 0;display:block;color:#fff}.sidebar .nav-title a.active{background:rgba(255,255,255,0.2);font-weight:bold}.container{margin-left:180px;transition:all 0.2s linear;-webkit-transition:all 0.2s linear;-ms-transition:all 0.2s linear}.container .main{margin:20px 20px}.container .main .block{margin:15px 0;padding:20px 0 10px 0;background:#fff;box-shadow:0 0 5px #ccc}.container .main .title{color:#000;font-size:18px;padding:0 0 10px 30px;border-bottom:1px dotted #eee}.container .main-nav{margin:20px 20px 0 30px}.container .main-nav .nav-ul{display:flex;display:-webkit-flex;display:-ms-flexbox;flex-wrap:wrap}.container .main-nav li{position:relative;margin:0 30px 30px 0;width:200px;padding:15px;border:1px solid #eee;cursor:pointer;border-radius:5px;overflow:hidden;transform-origin:right bottom;-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transition:0.1s linear;-webkit-transition:0.1s linear;-ms-transition:0.1s linear}.container .main-nav li .icon{width:35px;height:35px;vertical-align:middle;border-radius:50%;pointer-events:none}.container .main-nav li .name{display:inline-block;font-size:16px;margin-left:5px;width:calc(100% - 50px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.container .main-nav li .desc{padding-top:5px;border-top:1px solid #eee;margin-top:8px}.container .main-nav li .mark{z-index:28;position:absolute;bottom:-50px;left:0;width:100%;height:50px;background:#fff;cursor:auto;display:flex;display:-webkit-flex;display:-ms-flexbox;display:box;display:-webkit-box;display:-ms-flexbox;justify-content:center;align-items:center;box-pack:center;-webkit-box-pack:center;-ms-box-pack:center;box-align:center;-webkit-box-align:center;-ms-box-align:center;transition:0.1s linear;-webkit-transition:0.1s linear;-ms-transition:0.1s linear}.container .main-nav li .mark .button-box{width:100%;text-align:center}.container .main-nav li .mark a{display:inline-block;position:relative;font-size:16px;padding:3px 0;border:none;width:30%;background:#2db7f5;color:#fff;border-radius:3px;overflow:hidden}.container .main-nav li .mark a:nth-child(1){margin-right:15px}.container .main-nav li .mark a:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#000;opacity:0}.container .main-nav li .mark a:active:after{opacity:.2}.container .main-nav li .mark .zh{background:#26a2ff}.header{display:none;text-align:center}.header .header-top{position:relative;height:45px;border-bottom:1px solid #eee;background:#fff}.header .header-top .logo{display:inline-block}.header .header-top .logo img{width:35px;height:35px;margin-top:4px;pointer-events:none}.header .open{position:absolute;top:9px;right:15px;cursor:pointer}.header .open i{display:block;margin-top:6px;height:2px;width:25px;background:#000;transform-origin:right center;-webkit-transform-origin:right center;-ms-transform-origin:right center;transition:0.1s linear;-webkit-transition:0.1s linear;-ms-transition:0.1s linear}.header .open.active i:nth-child(1){transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg)}.header .open.active i:nth-child(2){opacity:0}.header .open.active i:nth-child(3){transform:translateY(2px) rotate(45deg);-webkit-transform:translateY(2px) rotate(45deg);-ms-transform:translateY(2px) rotate(45deg)}.header .nav-open{display:none;box-shadow:1px 1px 5px #ccc;overflow:hidden;background:#fff;transition:0.1s linear;-webkit-transition:0.1s linear;-ms-transition:0.1s linear}.header .nav-title{font-size:16px}.header .nav-title a{display:block;padding:8px 0}.header .nav-title a:active,.header .nav-title a.active{background:rgba(0,0,0,0.05)}.footer{margin-top:20px;padding:10px 10px 10px 15px;background:#fff;line-height:22px}.footer a{color:#0366d6}.scroll-top{z-index:66;position:fixed;bottom:25px;right:15px;width:30px;height:30px;cursor:pointer}@media screen and (max-width: 768px){.sidebar{transform:translate3d(-100%, 0, 0);-webkit-transform:translate3d(-100%, 0, 0);-ms-transform:translate3d(-100%, 0, 0)}.header{display:block}.container{margin-left:0}.container .main{margin:10px}.container .main .block{padding:20px 0 10px 0}.container .main .title{padding-left:20px}.main-nav{margin:20px 5px 0 20px !important}.main-nav .nav-ul li{width:calc(50% - 15px)}.main-nav .nav-ul li:not(:nth-child(even)){margin:0 15px 30px 0}.main-nav .nav-ul li:not(:nth-child(odd)){margin:0 0 30px 0}}@media screen and (min-width: 768px){.container .nav-ul li:hover .mark{bottom:0}.footer a:hover{text-decoration:underline}}/*! Ripple.js v1.2.1
+*/a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;color:#333;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{overflow-x:hidden;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html::-webkit-scrollbar{width:8px;height:16px;border-radius:2px}html::-webkit-scrollbar-track{border-radius:6px;background:#fff}html::-webkit-scrollbar-thumb{border-radius:6px;background:#ccc}body{min-width:320px;font-size:12px;-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;font-family:-apple-system, "PingFang SC", "Hiragino Sans GB", Arial, "Microsoft YaHei", "Helvetica Neue", sans-serif;background:#f8f8f8}body,html,#xiejiahe{height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}h1{font-size:18px}h2{font-size:16px}h3{font-size:14px}h4,h5,h6{font-size:100%}address,cite,dfn,em,var{font-style:normal}small{font-size:12px}ol,ul,li{list-style:none}a{text-decoration:none}abbr[title],acronym[title]{border-bottom:1px dotted;cursor:help}q:after,q:before{content:''}legend{color:#000}fieldset,img,iframe{border:none}button,input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}hr{border:none;height:1px}input[type="text"],input[type="password"],input[type="submit"],input[type="reset"]{-webkit-appearance:none;outline:none;border:1px solid #e1e1e1}textarea{resize:none;outline:none;-webkit-appearance:none}button,input[type="submit"],input[type="reset"]{cursor:pointer;outline:none}i,em{font-style:normal}[ng-cloak]{display:none}a,img{-webkit-touch-callout:none}.user-select-none{user-select:none;-webkit-user-select:none;-ms-user-select:none}.sidebar{z-index:3;position:fixed;top:0;left:0;width:180px;height:100%;background:#30333c;height:100%;visibility:visible;transition:all 0.2s linear;-webkit-transition:all 0.2s linear;-ms-transition:all 0.2s linear}.sidebar .logo{margin-top:10px;text-align:center}.sidebar .logo a{display:inline-block}.sidebar .logo img{width:50px;height:50px;pointer-events:none}.sidebar .nav{padding-top:20px}.sidebar .nav-title{text-align:center;cursor:pointer;font-size:16px}.sidebar .nav-title a{padding:12px 0;display:block;color:#fff}.sidebar .nav-title a.active{background:rgba(255,255,255,0.2);font-weight:bold}.container{margin-left:180px;transition:all 0.2s linear;-webkit-transition:all 0.2s linear;-ms-transition:all 0.2s linear}.container .main{margin:20px 20px}.container .main .block{margin:15px 0;padding:20px 0 10px 0;background:#fff;box-shadow:0 0 5px #ccc}.container .main .title{color:#000;font-size:18px;padding:0 0 10px 30px;border-bottom:1px dotted #eee}.container .main-nav{margin:20px 20px 0 30px}.container .main-nav .nav-ul{display:flex;display:-webkit-flex;display:-ms-flexbox;flex-wrap:wrap}.container .main-nav li{position:relative;margin:0 30px 30px 0;width:200px;padding:15px;border:1px solid #eee;cursor:pointer;border-radius:5px;overflow:hidden;transform-origin:right bottom;-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transition:0.1s linear;-webkit-transition:0.1s linear;-ms-transition:0.1s linear}.container .main-nav li .icon{width:35px;height:35px;vertical-align:middle;border-radius:50%;pointer-events:none}.container .main-nav li .name{display:inline-block;font-size:16px;margin-left:5px;width:calc(100% - 50px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.container .main-nav li .desc{padding-top:5px;border-top:1px solid #eee;margin-top:8px}.container .main-nav li .mark{z-index:28;position:absolute;bottom:-50px;left:0;width:100%;height:50px;background:#fff;cursor:auto;display:flex;display:-webkit-flex;display:-ms-flexbox;display:box;display:-webkit-box;display:-ms-flexbox;justify-content:center;align-items:center;box-pack:center;-webkit-box-pack:center;-ms-box-pack:center;box-align:center;-webkit-box-align:center;-ms-box-align:center;transition:0.1s linear;-webkit-transition:0.1s linear;-ms-transition:0.1s linear}.container .main-nav li .mark .button-box{width:100%;text-align:center}.container .main-nav li .mark a{display:inline-block;position:relative;font-size:16px;padding:3px 0;border:none;width:30%;background:#2db7f5;color:#fff;border-radius:3px;overflow:hidden}.container .main-nav li .mark a:nth-child(1){margin-right:15px}.container .main-nav li .mark a:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#000;opacity:0}.container .main-nav li .mark a:active:after{opacity:.2}.container .main-nav li .mark .zh{background:#26a2ff}.header{display:none;text-align:center}.header .header-top{position:relative;height:45px;border-bottom:1px solid #eee;background:#fff}.header .header-top .logo{display:inline-block}.header .header-top .logo img{width:35px;height:35px;margin-top:4px;pointer-events:none}.header .open{position:absolute;top:9px;right:15px;cursor:pointer}.header .open i{display:block;margin-top:6px;height:2px;width:25px;background:#000;transform-origin:right center;-webkit-transform-origin:right center;-ms-transform-origin:right center;transition:0.1s linear;-webkit-transition:0.1s linear;-ms-transition:0.1s linear}.header .open.active i:nth-child(1){transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg)}.header .open.active i:nth-child(2){opacity:0}.header .open.active i:nth-child(3){transform:translateY(2px) rotate(45deg);-webkit-transform:translateY(2px) rotate(45deg);-ms-transform:translateY(2px) rotate(45deg)}.header .nav-open{display:none;box-shadow:1px 1px 5px #ccc;overflow:hidden;background:#fff;transition:0.1s linear;-webkit-transition:0.1s linear;-ms-transition:0.1s linear}.header .nav-title{font-size:16px}.header .nav-title a{display:block;padding:8px 0}.header .nav-title a:active,.header .nav-title a.active{background:rgba(0,0,0,0.05)}.footer{margin-top:20px;padding:10px 10px 10px 15px;background:#fff;line-height:22px}.footer a{color:#0366d6}.scroll-top{z-index:66;position:fixed;bottom:25px;right:15px;width:30px;height:30px;cursor:pointer}@media screen and (max-width: 768px){.sidebar{transform:translate3d(-100%, 0, 0);-webkit-transform:translate3d(-100%, 0, 0);-ms-transform:translate3d(-100%, 0, 0)}.header{display:block}.container{margin-left:0}.container .main{margin:10px}.container .main .block{padding:20px 0 10px 0}.container .main .title{padding-left:20px}.main-nav{margin:20px 5px 0 20px !important}.main-nav .nav-ul li{width:calc(50% - 15px)}.main-nav .nav-ul li:not(:nth-child(even)){margin:0 15px 30px 0}.main-nav .nav-ul li:not(:nth-child(odd)){margin:0 0 30px 0}}@media screen and (min-width: 768px){.container .nav-ul li:hover .mark{bottom:0}.footer a:hover{text-decoration:underline}}/*! Ripple.js v1.2.1
  * The MIT License (MIT)
  * Copyright (c) 2014 Jacob Kelley */.has-ripple{position:relative;overflow:hidden;-webkit-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.ripple{display:block;position:absolute;pointer-events:none;border-radius:50%;-webkit-transform:scale(0);-o-transform:scale(0);transform:scale(0);background:#fff;opacity:1}.ripple-animate{-webkit-animation:ripple;-o-animation:ripple;animation:ripple}@-webkit-keyframes ripple{100%{opacity:0;-webkit-transform:scale(2);transform:scale(2)}}@-o-keyframes ripple{100%{opacity:0;-o-transform:scale(2);transform:scale(2)}}@keyframes ripple{100%{opacity:0;transform:scale(2)}}

data/page8.js

+module.exports = {
+  title: '博客看点',
+  hash: '#page8',
+  nav: [
+      {
+          icon: './icon/page8/icon-8x001.png',
+          name: '凹凸实验室',
+          desc: 'O2面向多终端技术体系，致力于构建沉淀与分享包括但不限于交互、页面制作技巧...',
+          link: 'https://aotu.io/',
+      },
+  ]
+}
\ No newline at end of file

index.html

@@ -115,6 +115,5 @@
 	</section>
 </div>
 <script src="./bundle.js"></script>
-<script src="https://hm.baidu.com/hm.js?15a99cb1c1eea969bcc1da33d0d8763b"></script>
 </body>
 </html>
\ No newline at end of file

index.js

@@ -7,8 +7,10 @@ import page4 from './data/page4'
 import page5 from './data/page5'
 import page6 from './data/page6'
 import page7 from './data/page7'
+import page8 from './data/page8'
 import page99 from './data/page99'
 
+var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?15a99cb1c1eea969bcc1da33d0d8763b";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();
 !function(a,b,c){a.ripple=function(d,e){var f=this,g=f.log=function(){f.defaults.debug&&console&&console.log&&console.log.apply(console,arguments)};f.selector=d,f.defaults={debug:!1,on:"mousedown",opacity:.4,color:"auto",multi:!1,duration:.7,rate:function(a){return a},easing:"linear"},f.defaults=a.extend({},f.defaults,e);var h=function(b){var d,e,h=a(this);if(h.addClass("has-ripple"),e=a.extend({},f.defaults,h.data()),e.multi||!e.multi&&0===h.find(".ripple").length){if(d=a("<span></span>").addClass("ripple"),d.appendTo(h),g("Create: Ripple"),!d.height()&&!d.width()){var i=c.max(h.outerWidth(),h.outerHeight());d.css({height:i,width:i}),g("Set: Ripple size")}if(e.rate&&"function"==typeof e.rate){var j=c.round(d.width()/e.duration),k=e.rate(j),l=d.width()/k;e.duration.toFixed(2)!==l.toFixed(2)&&(g("Update: Ripple Duration",{from:e.duration,to:l}),e.duration=l)}var m="auto"==e.color?h.css("color"):e.color,n={animationDuration:e.duration.toString()+"s",animationTimingFunction:e.easing,background:m,opacity:e.opacity};g("Set: Ripple CSS",n),d.css(n)}e.multi||(g("Set: Ripple Element"),d=h.find(".ripple")),g("Destroy: Ripple Animation"),d.removeClass("ripple-animate");var o=b.pageX-h.offset().left-d.width()/2,p=b.pageY-h.offset().top-d.height()/2;e.multi&&(g("Set: Ripple animationend event"),d.one("animationend webkitAnimationEnd oanimationend MSAnimationEnd",function(){g("Note: Ripple animation ended"),g("Destroy: Ripple"),a(this).remove()})),g("Set: Ripple location"),g("Set: Ripple animation"),d.css({top:p+"px",left:o+"px"}).addClass("ripple-animate")};a(b).on(f.defaults.on,f.selector,h)}}($,document,Math);$.ripple.version = "1.2.1";
 
 window.addEventListener('load', () => {
@@ -25,6 +27,7 @@ app.controller('controller', ['$scope', function ($scope) {
 		page5,
 		page6,
 		page7,
+		page8,
 		page99,
 	];
 	$scope.hash = function () {
@@ -94,3 +97,5 @@ app.controller('controller', ['$scope', function ($scope) {
 		});
 	});
 }]);
+
+

scss/style.scss

@@ -225,7 +225,7 @@ img {
         font-size: 16px;
 
         a {
-            padding: 15px 0;
+            padding: 12px 0;
             display: block;
             color: #fff;