refactor: stylle

README.md

 
 [![HitCount](http://hits.dwyl.com/xjh22222228/nav.svg)](http://hits.dwyl.com/xjh22222228/nav)
 
-<div align="center">
-  <p>发现导航 - 精选实用导航网站</p>
-  <div>
-    <a href="https://github.com/xjh22222228/nav/">GitHub</a>&nbsp;&nbsp;&nbsp;
-    <a href="https://github.com/xjh22222228/nav/issues/">Contribution</a>&nbsp;&nbsp;&nbsp;
-    <a href="https://github.com/xjh22222228/">Author</a>
-  </div>
-</div>
+
+
+## 发现导航是什么？
+一个纯静态、易管理的强大导航网站，希望您喜欢它。
+
 
 
 
@@ -21,8 +18,8 @@
 
 
 
-## 它为什么强大？
-- [√] 默认提供 `650+` 网站。
+## 拥有出色的特性
+- [√] 内置 `650+` 实用网站。
 - [√] 三叉树分类、结构清晰、分类清晰。
 - [√] 颜值与简约并存，不再是杀马特时代。
 - [√] 支持3种浏览模式，创新。
@@ -30,7 +27,7 @@
 - [√] 支持移动端浏览。
 - [√] 支持搜索查询。
 - [√] 纯静态, 提供自动化部署功能。
-- [√] 二次修改简单, 只需要懂一点开发知识即可。
+- [√] 完全开源，轻松定制化。
 
 
 ## 贡献

config/index.ts

+/**
+ * 所有配置通过此文件进行配置
+ * @author xiejiahe
+ * @url https://github.com/xjh22222228/nav
+ */
 
 export const appLanguage = [
   '英文',
@@ -15,3 +20,33 @@ export const webpLanguage = [
 export const start = new Date(2018, 3, 26, 0, 0, 0, 0);
 
 export const git = 'https://github.com/xjh22222228/nav';
+
+// http://nav.xiejiahe.com/#/index?q=grabient
+export const BACKGROUND_LINEAR = [
+  'linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%)',
+  'linear-gradient(90deg, #FEE140 0%, #FA709A 100%)',
+  'linear-gradient(0deg, #08AEEA 0%, #2AF598 100%)',
+  'linear-gradient(19deg, #21D4FD 0%, #B721FF 100%)',
+  'linear-gradient(19deg, #FAACA8 0%, #DDD6F3 100%)',
+  'linear-gradient(147deg, #FFE53B 0%, #FF2525 74%)',
+  'linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%)',
+  'linear-gradient(180deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%)',
+  'linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%)',
+  'linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%)',
+  'linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%)',
+  'linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)',
+  'linear-gradient(90deg, #74EBD5 0%, #9FACE6 100%)',
+  'linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%)',
+  'linear-gradient(90deg, #FAD961 0%, #F76B1C 100%)',
+  'linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%)',
+  'linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%)',
+  'linear-gradient(90deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%)',
+  'linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%)',
+  'linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%)',
+  'linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%)',
+  'linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%)',
+  'linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%)',
+  'linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%)',
+  'linear-gradient(90deg, #74EBD5 0%, #9FACE6 100%)',
+  'linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)'
+];

data/frontend/index.ts

@@ -11,13 +11,13 @@ import learData from './learData';
 export default {
   title: 'WEB前端',
   nav: [
+    javascript,
     react,
     vue,
     angular,
     smallProgram,
     tool,
     css,
-    javascript,
     ts,
     learData
   ]

data/study/docs.ts

@@ -78,6 +78,12 @@ export default {
     {
       subtitle: '其他文档',
       nav: [
+        {
+          icon: 'https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/linux/linux.png',
+          name: 'Linux 常用命令参考手册',
+          desc: 'Linux 常用命令参考手册',
+          link: 'https://github.com/xjh22222228/linux-manual',
+        },
         {
           icon: 'assets/icon/utility-tool/062.png',
           name: 'linux-command',
@@ -127,12 +133,12 @@ export default {
           link: 'https://learnxinyminutes.com/',
         },
         {
-          icon: 'https://learnxinyminutes.com/favicon.ico',
+          icon: 'https://code.visualstudio.com/apple-touch-icon.png',
           name: 'Vscode Docs',
           desc: 'Vscode 扩展开发文档',
           link: 'https://liiked.github.io/VS-Code-Extension-Doc-ZH/#/',
           language: [
-            'https://code.visualstudio.com/docs',
+            'https://code.visualstudio.com/api',
             'https://liiked.github.io/VS-Code-Extension-Doc-ZH/#/',
             'https://github.com/microsoft/vscode-docs'
           ]

package.json

@@ -30,6 +30,7 @@
     "@angular/router": "~8.0.3",
     "iscroll": "^5.2.0",
     "jquery": "^3.4.1",
+    "rough-notation": "^0.3.3",
     "rxjs": "~6.4.0",
     "tslib": "^1.9.0",
     "zone.js": "~0.9.1"

src/app/app.component.ts

 import { Component } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import nav from '../../data';
+import { BACKGROUND_LINEAR } from '../../config';
+import { randomInt } from '../utils';
 
 @Component({
   selector: 'app-xiejiahe',
@@ -14,7 +16,7 @@ export class AppComponent {
   page: number = 0;
   includeTotal: number = 0;
 
-  ngOnInit () {
+  ngOnInit() {
     const screenWidth = window.innerWidth;
     const hash = window.location.hash;
     const params = new URLSearchParams(hash.slice(hash.indexOf('?')));
@@ -45,6 +47,10 @@ export class AppComponent {
     this.computedTotal();
   }
 
+  ngAfterViewInit() {
+    setInterval(this.setBackground, 10000);
+  }
+
   // 计算收录个数
   computedTotal() {
     let total = 0;
@@ -61,4 +67,15 @@ export class AppComponent {
     r(this.nav);
     this.includeTotal = total;
   }
+
+  setBackground() {
+    const randomBg = BACKGROUND_LINEAR[randomInt(BACKGROUND_LINEAR.length)];
+    const el = document.getElementById('index-background');
+    if (!el) return;
+    el.style.opacity = '.3';
+    setTimeout(() => {
+      el.style.backgroundImage = randomBg;
+      el.style.opacity = '1';
+    }, 1000);
+  }
 }

src/index.html

@@ -43,7 +43,7 @@
 </head>
 <body>
 <app-xiejiahe>
-  <div style="position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: #fff;text-align: center;display: flex;justify-content: center;align-items: center;font-size: 14px;">Loading...</div>
+  <div style="position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: #fff;text-align: center;display: flex;justify-content: center;align-items: center;font-size: 14px;">L O A D I N G ...</div>
 </app-xiejiahe>
 <script src="./assets/js/jquery.min.js"></script>
 <script src="./assets/js/ripple.min.js"></script>

src/styles.scss

@@ -22,8 +22,6 @@ body {
   font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", Arial, "Microsoft YaHei", "Helvetica Neue", sans-serif;
   font-size: 14px;
   color: #333;
-  background-color: #3EECAC;
-  background-image: linear-gradient(19deg, #3EECAC 0%, #EE74E1 100%);
   overflow: hidden;
 }
 

src/utils/index.ts

@@ -20,3 +20,7 @@ export function debounce(func, wait, immediate) {
     }
   }
 }
+
+export function randomInt(max) {
+  return Math.floor(Math.random() * max);
+}

src/view/index.component.html

 <main class="homepage container">
+  <div class="bg-color-linear" id="index-background"></div>
   <input 
     type="text" 
     class="search" 

src/view/index.component.scss

+.bg-color-linear {
+  z-index: -3;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transition: 1s linear;
+  background-image: linear-gradient(19deg, #3EECAC 0%, #EE74E1 100%);
+}
+
 .homepage {
   position: relative;
   margin-top: 20px;
@@ -50,7 +61,7 @@
 
   .top-nav {
     padding: 10px;
-    overflow-x: auto;
+    overflow: none;
     white-space: nowrap;
     border-bottom: 1px solid #eee;
     text-align: center;
@@ -67,10 +78,6 @@
         text-decoration: none;
       }
     }
-
-    .active {
-      background: #eee;
-    }
   }
 }
 

src/view/index.component.ts

@@ -3,6 +3,9 @@ import { Component } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { debounce } from '../utils';
 import { appLanguage, git } from '../../config';
+import { annotate } from 'rough-notation';
+
+let equeue = [];
 
 @Component({
   selector: 'app-home',
@@ -30,6 +33,7 @@ export class HomeComponent {
     };
 
     this.activatedRoute.queryParams.subscribe(query => {
+      const tempPage = this.page;
       const id = +query.id || 0;
       const page = +query.page || 0;
       this.search = query.q || '';
@@ -51,6 +55,10 @@ export class HomeComponent {
       } else {
         initList();
       }
+
+      if (tempPage !== page) {
+        this.setAnnotate();
+      }
     });
 
     function fuzzySearch() {
@@ -110,6 +118,8 @@ export class HomeComponent {
     }, 1000, false);
   }
 
+  handleSearch = null
+
   handleScroll(e) {
     const target = e.target;
     const top = target.scrollTop;
@@ -125,8 +135,6 @@ export class HomeComponent {
     });
   }
 
-  handleSearch() {}
-
   handleOnClickSearch() {
     this.showInput = true;
     setTimeout(() => {
@@ -148,6 +156,8 @@ export class HomeComponent {
   }
 
   ngAfterViewInit () {
+    this.setAnnotate();
+
     (<any>window).$.ripple('.ripple-btn', {
       multi: true,
       debug: false,
@@ -161,4 +171,21 @@ export class HomeComponent {
   goBack = () => {
     history.go(-1);
   }
+
+  setAnnotate() {
+    const elList = document.querySelectorAll('.top-nav .ripple-btn') || [];
+    if (elList.length === 0) return;
+
+    equeue.forEach(item => item.hide());
+    equeue = [];
+
+    const annotation = annotate(elList[this.page], {
+      type: 'underline',
+      color: 'red',
+      padding: 3,
+      strokeWidth: 3
+    });
+    equeue.push(annotation);
+    annotation.show();
+  }
 }