style: randomBg

76b769c8 · xjh22222228 · 019b2f64 · 76b769c8 · 76b769c8 · 76b769c8
10 changed file
--- a/data/python/package.ts
+++ b/data/python/package.ts
@@ -52,6 +52,11 @@ export default {
            'https://github.com/SeleniumHQ/selenium/'
          ]
        },
+        {
+          name: 'beautifulsoup',
+          desc: '可以从HTML或XML文件中提取数据的Python库',
+          link: 'https://beautifulsoup.readthedocs.io/zh_CN/v4.4.0/',
+        },
      ]
    },
    {

--- a/src/app/app.component.html
+++ b/src/app/app.component.html
-<div id="xiejiahe" class="app">
+<div id="xiejiahe">
  <app-icon-git></app-icon-git>

  <router-outlet></router-outlet>

--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
-#xiejiahe {
-
-  &.app {
-    color: #000;
-  }
-}
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
 import nav from '../../data'
 import { Component } from '@angular/core'
 import { Router, ActivatedRoute } from '@angular/router'
-import { BACKGROUND_LINEAR, TONGJI_URL } from '../../config'
-import { randomInt } from '../utils'
+import { TONGJI_URL } from '../../config'

 @Component({
  selector: 'app-xiejiahe',
@@ -26,10 +25,6 @@ export class AppComponent {
    this.appendTongji()
  }

-  ngAfterViewInit() {
-    setInterval(this.setBackground, 10000)
-  }
-
  goRoute(queryParams: object) {
    const screenWidth = window.innerWidth

@@ -40,17 +35,6 @@ export class AppComponent {
    }
  }

-  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)
-  }
-
  appendTongji() {
    if (document.getElementById('tongji_url')) return


--- a/src/index.html
+++ b/src/index.html
@@ -36,15 +36,17 @@
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="renderer" content="webkit">
-  <link rel="icon" href="assets/icon/logo.png">
  <meta name="description" content="发现导航 - 精选实用导航网站">
  <meta name="keywords" content="导航,前端资源,社区站点,设计师,实用工具,学习资源,运营,网络安全,node.js">
+  <link rel="icon" href="assets/icon/logo.png">
  <link rel ="apple-touch-icon" href="assets/icon/logo.png">
 </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;">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>
 </body>

--- a/src/styles.scss
+++ b/src/styles.scss
@@ -22,7 +22,7 @@ body {
  font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", Arial, "Microsoft YaHei", "Helvetica Neue", sans-serif;
  font-size: 14px;
  color: #333;
-  overflow: hidden;
+  transition: 1s linear;
 }

 footer,

--- a/src/utils/index.ts
+++ b/src/utils/index.ts
 import nav from '../../data';
+import { BACKGROUND_LINEAR } from '../../config';

 export function debounce(func, wait, immediate) {
  let timeout
@@ -83,3 +84,25 @@ export function totalWeb(): number {

  return total
 }
+
+export function randomBgImg() {
+  const el = document.createElement('div')
+  el.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;z-index:-3;transition: 1s linear;'
+  el.style.backgroundImage = BACKGROUND_LINEAR[randomInt(BACKGROUND_LINEAR.length)]
+  document.body.appendChild(el)
+
+  function setBg() {
+    const randomBg = BACKGROUND_LINEAR[randomInt(BACKGROUND_LINEAR.length)]
+    el.style.opacity = '.3'
+    setTimeout(() => {
+      el.style.backgroundImage = randomBg
+      el.style.opacity = '1'
+    }, 1000)
+  }
+
+  setInterval(setBg, 10000)
+}
+
+export function onImgError(e: any) {
+  e.target.src = 'assets/img/transparent.gif'
+}
--- a/src/view/index/default/index.component.html
+++ b/src/view/index/default/index.component.html
 <div class="index-wrapper">
  <main class="homepage container">
-    <div class="bg-color-linear" id="index-background"></div>
    <input 
      type="text" 
      class="search" 

--- a/src/view/index/default/index.component.scss
+++ b/src/view/index/default/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%);
-}
-
 .index-wrapper {
  display: flex;
  flex-direction: column;

--- a/src/view/index/default/index.component.ts
+++ b/src/view/index/default/index.component.ts
 import nav from '../../../../data';
 import { Component } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
-import { debounce, fuzzySearch } from '../../../utils';
+import { debounce, fuzzySearch, randomBgImg, onImgError } from '../../../utils';
 import { appLanguage, GIT_REPO_URL } from '../../../../config';
 import { annotate } from 'rough-notation';

@@ -27,7 +27,8 @@ export default class HomeComponent {
  GIT_REPO_URL: string = GIT_REPO_URL;

  ngOnInit () {
-    const that = this;
+    randomBgImg();
+
    const initList = () => {
      this.list = this.nav[this.page].nav[this.id].nav;
    };
@@ -149,7 +150,5 @@ export default class HomeComponent {
    annotation.show();
  }

-  onImgError = (e) => {
-    e.target.src = 'assets/img/transparent.gif'
-  }
+  onImgError = onImgError
 }