Merge branch 'master' of https://gitee.com/ynmlzdwsp/ddi2

# Conflicts: # public/index.html # src/assets/css/color.css # src/utils/constant.js
11 months ago · c0e271a79f
parent 3635e6f2e2 4949ba709c
commit c0e271a79f
6 changed files with 468 additions and 413 deletions
--- a/package.json
+++ b/package.json
@ -3,7 +3,7 @@
  "version": "0.1.0",
  "private": true,
  "scripts": {
-    "serve": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",
+    "serve": "vue-cli-service serve",
    "build": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
--- a/public/index.html
+++ b/public/index.html
@ -5,8 +5,8 @@
    <link rel="icon" href="./poetize.jpg" sizes="16x16">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>Poetize</title>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <title>药药相互</title>
+
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
--- a/src/assets/css/color.css
+++ b/src/assets/css/color.css
@ -19,7 +19,7 @@


    /* 主题背景 */
-    --themeBackground: #f5df74;
+    --themeBackground: orange;
    /* 主题悬停背景 */
    --gradualRed: linear-gradient(to right, #ff4b2b, #ff416c);

@ -28,10 +28,12 @@
    /* 导航栏背景 */
    --toolbarBackground: rgba(255, 255, 255, 1);
    /* 灰色字体 */
-    --greyFont: #4b4b4b;
+    --greyFont: #797979;
    --maxGreyFont: #595A5A;
    /* footer背景 */
    --gradientBG: linear-gradient(-90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+
+
    /* 白色遮罩 */
    --whiteMask: rgba(255, 255, 255, 0.3);
    /* max白色遮罩 */
@ -51,7 +53,8 @@
    --maxMask: rgba(0, 0, 0, 0.7);


-    --white: #000000;
+
+    --white: white;

    --red: red;
    --lightRed: #ff4b2b;
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@ -288,3 +288,47 @@ body {
        width: 90% !important;
    }
 }
+
+/* 背景*/
+.dark-mode-sky,
+.dark-mode-sky::before{
+    content: "";
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    /* 固定位置，不随滚动条滚动 */
+    position: fixed;
+    z-index: -1;
+    transition: 2s ease all;
+}
+.dark-mode-sky{
+    background: linear-gradient(#fcd5ce,#f8edeb);
+}
+.dark-mode-sky::before{
+    opacity: 0;
+    background: linear-gradient(#001233,#002855,#0466c8);
+}
+.dark-mode .dark-mode-sky::before{
+    opacity: 1;
+}
+/*日月*/
+.dark-mode-planet {
+    z-index: 19999999999;
+    position: fixed;
+    left: -50%;
+    top: -50%;
+    width: 200%;
+    height: 200%;
+    transition: 2s cubic-bezier(.7,0,0,1) all;
+    transform-origin: center bottom;
+}
+.dark-mode-planet::after{
+    position: absolute;
+    left: 35%;
+    top: 40%;
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    content: "";
+    background: linear-gradient(#ffffff,#f1f3b7);
+}
--- a/src/components/home.vue
+++ b/src/components/home.vue
@ -38,7 +38,7 @@
 <!--              </div>-->
 <!--            </li>-->

-            <!-- 爱情买卖 -->
+            <!-- 预测研发流程 -->
            <li @click="$router.push({path: '/love'})">
              <div class="my-menu">
                🥼 <span>预测研发流程</span>
@ -429,7 +429,7 @@
        this.isDark = !this.isDark;
        let root = document.querySelector(":root");

-        if (this.isDark) {
+       if (this.isDark) {
          root.style.setProperty("--background", "#272727");
          root.style.setProperty("--fontColor", "white");
          root.style.setProperty("--borderColor", "#4F4F4F");
@ -448,6 +448,10 @@
          root.style.setProperty("--commentContent", "#F7F9FE");
          root.style.setProperty("--favoriteBg", "#f7f9fe");
        }
+        $("body").toggleClass("dark-mode");
+        var angle = $('.dark-mode-planet').data('angle') + 360 || 360;
+        $('.dark-mode-planet').css({'transform': 'rotate(' + angle + 'deg)'});
+        $('.dark-mode-planet').data('angle',angle);
      },
      toTop() {
        window.scrollTo({
--- a/src/components/index.vue
+++ b/src/components/index.vue
@ -10,19 +10,23 @@
      <!-- 内容页面 -->
      <template slot="body">
        <!-- 首页图片 -->
-        <el-image style="animation: header-effect 2s"
-                  class="background-image"
-                  v-once
-                  lazy
-                  :src="!$common.isEmpty($store.state.webInfo.backgroundImage)?$store.state.webInfo.backgroundImage:$constant.random_image+new Date()+Math.floor(Math.random()*10)"
-                  fit="cover">
-          <div slot="error" class="image-slot background-image-error"></div>
-        </el-image>
+         <!--<el-image style="animation: header-effect 2s"
+                    class="background-image"
+                    v-once
+                    lazy
+                    :src="!$common.isEmpty($store.state.webInfo.backgroundImage)?$store.state.webInfo.backgroundImage:$constant.random_image+new Date()+Math.floor(Math.random()*10)"
+                    fit="cover">
+            <div slot="error" class="image-slot background-image-error"></div>
+          </el-image>-->
+        <div class="dark-mode-sky">
+          <div class="dark-mode-planet"></div>
+        </div>

        <!-- 首页文字 -->
        <div class="signature-wall myCenter my-animation-hideToShow">
          <h1 class="playful">
-            <span v-for="(a, index) in $store.state.webInfo.webTitle" :key="index">{{a}}</span>
+            <p>药 药 相 互 </p>
+            <!--<span v-for="(a, index) in $store.state.webInfo.webTitle" :key="index">{{a}}</span>-->
          </h1>

          <!-- 搜索 -->
@ -79,9 +83,9 @@
              <div class="announcement background-opacity">
                <i class="fa fa-volume-up" aria-hidden="true"></i>
                <div>
-<!--                  <div v-for="(notice, index) in $store.state.webInfo.notices" :key="index">-->
-<!--                    {{ notice }}-->
-<!--                  </div>-->
+                  <!--                  <div v-for="(notice, index) in $store.state.webInfo.notices" :key="index">-->
+                  <!--                    {{ notice }}-->
+                  <!--                  </div>-->
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;世界上只有一种真正的英雄主义，那就是看清生活的真相之后，依然勇敢地热爱生活。
                </div>
              </div>
@ -134,427 +138,427 @@
 <script>
 import {listTable1, listTotal, selectDetails} from "@/utils/table1";

-  const loader = () => import( "./common/loader");
-  const zombie = () => import( "./common/zombie");
-  const printer = () => import( "./common/printer");
-  const articleList = () => import( "./articleList");
-  const myFooter = () => import( "./common/myFooter");
-  const myAside = () => import( "./myAside");
-
-  export default {
-    components: {
-      loader,
-      zombie,
-      printer,
-      articleList,
-      myFooter,
-      myAside
-    },
+const loader = () => import( "./common/loader");
+const zombie = () => import( "./common/zombie");
+const printer = () => import( "./common/printer");
+const articleList = () => import( "./articleList");
+const myFooter = () => import( "./common/myFooter");
+const myAside = () => import( "./myAside");
+
+export default {
+  components: {
+    loader,
+    zombie,
+    printer,
+    articleList,
+    myFooter,
+    myAside
+  },
+
+  data() {
+    return {
+      currentPage1: 1,
+      loading: false,
+      showAside: true,
+      printerInfo: "你看对面的青山多漂亮",
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0,
+        searchKey: "",
+        sortId: null,
+        articleSearch: ""
+      },
+      guShi: {
+        "content": "",
+        "origin": "",
+        "author": "",
+        "category": ""
+      },
+      articles: [],
+      table1List: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        drug1: null,
+        drug2: null,
+        reaction: null
+      },
+    };
+  },

-    data() {
-      return {
-        currentPage1: 1,
-        loading: false,
-        showAside: true,
-        printerInfo: "你看对面的青山多漂亮",
-        pagination: {
-          current: 1,
-          size: 10,
-          total: 0,
-          searchKey: "",
-          sortId: null,
-          articleSearch: ""
-        },
-        guShi: {
-          "content": "",
-          "origin": "",
-          "author": "",
-          "category": ""
-        },
-        articles: [],
-        table1List: [],
-        // 查询参数
-        queryParams: {
-          pageNum: 1,
-          pageSize: 10,
-          drug1: null,
-          drug2: null,
-          reaction: null
-        },
-      };
-    },
+  watch: {},

-    watch: {},
+  created() {
+    this.getGuShi();
+    this.getArticles();
+    this.handleQuery();
+  },

-    created() {
-      this.getGuShi();
-      this.getArticles();
-      this.handleQuery();
-    },
+  mounted() {
+  },

-    mounted() {
+  methods: {
+    selectDrugDetails(drugName) {
+      this.$refs.myAsideRef.updateDrugName(drugName);
    },
-
-    methods: {
-      selectDrugDetails(drugName) {
-        this.$refs.myAsideRef.updateDrugName(drugName);
-      },
-      /** 查询药品作用列表条数 */
-      getTotal() {
-        listTotal(this.queryParams).then(response => {
-          this.pagination.total = parseInt(response);
-          console.log(this.pagination.total);
-        });
-      },
-      handleSizeChange(val) {
-        this.queryParams.pageSize = val; // 修改每页显示数量
-        this.getList();
-      },
-      handleCurrentChange(val) {
-        this.queryParams.pageNum = val; // 修改每页显示数量
-        this.getList();
-      },
-      /** 搜索按钮操作 */
-      handleQuery() {
-        this.queryParams.pageNum = 1;
-        this.getList();
-        this.getTotal();
-        // 页面自动下滑效果
-        const targetElement = document.querySelector('.recent-posts');
-        if (targetElement) {
-          targetElement.scrollIntoView({ behavior: "smooth", block: "start" });
-        }
-      },
-      /** 查询药品作用管理列表 */
-      getList() {
-        // this.loading = true;
-        this.table1List = []; // 初始化为空数组
-        listTable1(this.queryParams).then(response => {
-          this.table1List = response;
-        });
-      },
-      async selectSort(sort) {
-        this.pagination = {
-          current: 1,
-          size: 10,
-          total: 0,
-          searchKey: "",
-          sortId: sort.id,
-          articleSearch: ""
-        };
-        this.articles = [];
-        await this.getArticles();
-        this.$nextTick(() => {
-          document.querySelector('.recent-posts').scrollIntoView({
-            behavior: "smooth",
-            block: "start",
-            inline: "nearest"
-          });
+    /** 查询药品作用列表条数 */
+    getTotal() {
+      listTotal(this.queryParams).then(response => {
+        this.pagination.total = parseInt(response);
+        console.log(this.pagination.total);
+      });
+    },
+    handleSizeChange(val) {
+      this.queryParams.pageSize = val; // 修改每页显示数量
+      this.getList();
+    },
+    handleCurrentChange(val) {
+      this.queryParams.pageNum = val; // 修改每页显示数量
+      this.getList();
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+      this.getTotal();
+      // 页面自动下滑效果
+      const targetElement = document.querySelector('.recent-posts');
+      if (targetElement) {
+        targetElement.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
+    },
+    /** 查询药品作用管理列表 */
+    getList() {
+      // this.loading = true;
+      this.table1List = []; // 初始化为空数组
+      listTable1(this.queryParams).then(response => {
+        this.table1List = response;
+      });
+    },
+    async selectSort(sort) {
+      this.pagination = {
+        current: 1,
+        size: 10,
+        total: 0,
+        searchKey: "",
+        sortId: sort.id,
+        articleSearch: ""
+      };
+      this.articles = [];
+      await this.getArticles();
+      this.$nextTick(() => {
+        document.querySelector('.recent-posts').scrollIntoView({
+          behavior: "smooth",
+          block: "start",
+          inline: "nearest"
        });
-      },
-      async selectArticle(articleSearch) {
-        this.pagination = {
-          current: 1,
-          size: 10,
-          total: 0,
-          searchKey: "",
-          sortId: null,
-          articleSearch: articleSearch
-        };
-        this.articles = [];
-        await this.getArticles();
-        this.$nextTick(() => {
-          document.querySelector('.recent-posts').scrollIntoView({
-            behavior: "smooth",
-            block: "start",
-            inline: "nearest"
-          });
+      });
+    },
+    async selectArticle(articleSearch) {
+      this.pagination = {
+        current: 1,
+        size: 10,
+        total: 0,
+        searchKey: "",
+        sortId: null,
+        articleSearch: articleSearch
+      };
+      this.articles = [];
+      await this.getArticles();
+      this.$nextTick(() => {
+        document.querySelector('.recent-posts').scrollIntoView({
+          behavior: "smooth",
+          block: "start",
+          inline: "nearest"
        });
-      },
-      pageArticles() {
-        this.pagination.current = this.pagination.current + 1;
-        this.getArticles();
-      },
+      });
+    },
+    pageArticles() {
+      this.pagination.current = this.pagination.current + 1;
+      this.getArticles();
+    },

-      async getArticles() {
-        await this.$http.post(this.$constant.baseURL + "/article/listArticle", this.pagination)
+    async getArticles() {
+      await this.$http.post(this.$constant.baseURL + "/article/listArticle", this.pagination)
        // await this.$http.post("http://localhost:81" + "/system/table1/list", this.pagination)
-          .then((res) => {
-            if (!this.$common.isEmpty(res.data)) {
-              this.articles = this.articles.concat(res.data.records);
-              this.pagination.total = res.data.total;
-            }
-          })
-          .catch((error) => {
-            this.$message({
-              message: error.message,
-              type: "error"
-            });
+        .then((res) => {
+          if (!this.$common.isEmpty(res.data)) {
+            this.articles = this.articles.concat(res.data.records);
+            this.pagination.total = res.data.total;
+          }
+        })
+        .catch((error) => {
+          this.$message({
+            message: error.message,
+            type: "error"
          });
-      },
-      navigation(selector) {
-        let pageId = document.querySelector(selector);
-        window.scrollTo({
-          top: pageId.offsetTop,
-          behavior: "smooth"
        });
-      },
-      getGuShi() {
-        let that = this;
-        let xhr = new XMLHttpRequest();
-        xhr.open('get', this.$constant.jinrishici);
-        xhr.onreadystatechange = function () {
-          if (xhr.readyState === 4) {
-            that.guShi = JSON.parse(xhr.responseText);
-            that.printerInfo = that.guShi.content;
-          }
-        };
-        xhr.send();
-      }
+    },
+    navigation(selector) {
+      let pageId = document.querySelector(selector);
+      window.scrollTo({
+        top: pageId.offsetTop,
+        behavior: "smooth"
+      });
+    },
+    getGuShi() {
+      let that = this;
+      let xhr = new XMLHttpRequest();
+      xhr.open('get', this.$constant.jinrishici);
+      xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4) {
+          that.guShi = JSON.parse(xhr.responseText);
+          that.printerInfo = that.guShi.content;
+        }
+      };
+      xhr.send();
    }
  }
+}
 </script>

 <style scoped>

-  .signature-wall {
-    /* 向下排列 */
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    user-select: none;
-    height: 100vh;
-    overflow: hidden;
-  }
-
-  .playful {
-    color: var(--white);
-    font-size: 40px;
-  }
-
-  /*.playful span {*/
-  /*  position: relative;*/
-  /*  color: #5362f6;*/
-  /*  text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,*/
-  /*  1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,*/
-  /*  2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,*/
-  /*  3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,*/
-  /*  4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,*/
-  /*  5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,*/
-  /*  6px 6px #e485f8;*/
-  /*  animation: scatter 1.75s infinite;*/
-  /*  font-weight: normal;*/
-  /*}*/
-
-  /*.playful span:nth-child(2n) {*/
-  /*  color: #ed625c;*/
-  /*  text-shadow: 0.25px 0.25px #f2a063, 0.5px 0.5px #f2a063, 0.75px 0.75px #f2a063,*/
-  /*  1px 1px #f2a063, 1.25px 1.25px #f2a063, 1.5px 1.5px #f2a063, 1.75px 1.75px #f2a063,*/
-  /*  2px 2px #f2a063, 2.25px 2.25px #f2a063, 2.5px 2.5px #f2a063, 2.75px 2.75px #f2a063,*/
-  /*  3px 3px #f2a063, 3.25px 3.25px #f2a063, 3.5px 3.5px #f2a063, 3.75px 3.75px #f2a063,*/
-  /*  4px 4px #f2a063, 4.25px 4.25px #f2a063, 4.5px 4.5px #f2a063, 4.75px 4.75px #f2a063,*/
-  /*  5px 5px #f2a063, 5.25px 5.25px #f2a063, 5.5px 5.5px #f2a063, 5.75px 5.75px #f2a063,*/
-  /*  6px 6px #f2a063;*/
-  /*  animation-delay: 0.3s;*/
-  /*}*/
-
-  /*.playful span:nth-child(3n) {*/
-  /*  color: #ffd913;*/
-  /*  text-shadow: 0.25px 0.25px #6ec0a9, 0.5px 0.5px #6ec0a9, 0.75px 0.75px #6ec0a9,*/
-  /*  1px 1px #6ec0a9, 1.25px 1.25px #6ec0a9, 1.5px 1.5px #6ec0a9, 1.75px 1.75px #6ec0a9,*/
-  /*  2px 2px #6ec0a9, 2.25px 2.25px #6ec0a9, 2.5px 2.5px #6ec0a9, 2.75px 2.75px #6ec0a9,*/
-  /*  3px 3px #6ec0a9, 3.25px 3.25px #6ec0a9, 3.5px 3.5px #6ec0a9, 3.75px 3.75px #6ec0a9,*/
-  /*  4px 4px #6ec0a9, 4.25px 4.25px #6ec0a9, 4.5px 4.5px #6ec0a9, 4.75px 4.75px #6ec0a9,*/
-  /*  5px 5px #6ec0a9, 5.25px 5.25px #6ec0a9, 5.5px 5.5px #6ec0a9, 5.75px 5.75px #6ec0a9,*/
-  /*  6px 6px #6ec0a9;*/
-  /*  animation-delay: 0.15s;*/
-  /*}*/
-
-  /*.playful span:nth-child(5n) {*/
-  /*  color: #555bff;*/
-  /*  text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,*/
-  /*  1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,*/
-  /*  2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,*/
-  /*  3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,*/
-  /*  4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,*/
-  /*  5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,*/
-  /*  6px 6px #e485f8;*/
-  /*  animation-delay: 0.4s;*/
-  /*}*/
-
-  /*.playful span:nth-child(7n) {*/
-  /*  color: #ff9c55;*/
-  /*  text-shadow: 0.25px 0.25px #ff5555, 0.5px 0.5px #ff5555, 0.75px 0.75px #ff5555,*/
-  /*  1px 1px #ff5555, 1.25px 1.25px #ff5555, 1.5px 1.5px #ff5555, 1.75px 1.75px #ff5555,*/
-  /*  2px 2px #ff5555, 2.25px 2.25px #ff5555, 2.5px 2.5px #ff5555, 2.75px 2.75px #ff5555,*/
-  /*  3px 3px #ff5555, 3.25px 3.25px #ff5555, 3.5px 3.5px #ff5555, 3.75px 3.75px #ff5555,*/
-  /*  4px 4px #ff5555, 4.25px 4.25px #ff5555, 4.5px 4.5px #ff5555, 4.75px 4.75px #ff5555,*/
-  /*  5px 5px #ff5555, 5.25px 5.25px #ff5555, 5.5px 5.5px #ff5555, 5.75px 5.75px #ff5555,*/
-  /*  6px 6px #ff5555;*/
-  /*  animation-delay: 0.25s;*/
-  /*}*/
-
-  .printer {
-    cursor: pointer;
-    color: var(--white);
-    background: var(--translucent);
-    border-radius: 10px;
-    padding-left: 10px;
-    padding-right: 10px;
-  }
-
-  #bannerWave1 {
-    height: 84px;
-    background: var(--bannerWave1);
-    position: absolute;
-    width: 200%;
-    bottom: 0;
-    z-index: 10;
-    animation: gradientBG 120s linear infinite;
-  }
-
-  #bannerWave2 {
-    height: 100px;
-    background: var(--bannerWave2);
-    position: absolute;
-    width: 400%;
-    bottom: 0;
-    z-index: 5;
-    animation: gradientBG 120s linear infinite;
-  }
-
-  /* 光标 */
-  .cursor {
-    margin-left: 1px;
-    animation: hideToShow 0.7s infinite;
-    font-weight: 200;
-  }
-
-  .el-icon-arrow-down {
-    font-size: 40px;
-    font-weight: bold;
-    color: var(--white);
-    position: absolute;
-    bottom: 60px;
-    animation: my-shake 1.5s ease-out infinite;
-    z-index: 15;
-    cursor: pointer;
-  }
-
-  .page-container-wrap {
-    background: var(--background);
-    position: relative;
-  }
-
-  .page-container {
-    display: flex;
-    justify-content: center;
-    width: 90%;
-    padding: 0 20px 40px 20px;
-    margin: 0 auto;
-    flex-direction: row;
-  }
-
+.signature-wall {
+  /* 向下排列 */
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  user-select: none;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.playful {
+  color: var(--white);
+  font-size: 40px;
+}
+
+/*.playful span {*/
+/*  position: relative;*/
+/*  color: #5362f6;*/
+/*  text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,*/
+/*  1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,*/
+/*  2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,*/
+/*  3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,*/
+/*  4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,*/
+/*  5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,*/
+/*  6px 6px #e485f8;*/
+/*  animation: scatter 1.75s infinite;*/
+/*  font-weight: normal;*/
+/*}*/
+
+/*.playful span:nth-child(2n) {*/
+/*  color: #ed625c;*/
+/*  text-shadow: 0.25px 0.25px #f2a063, 0.5px 0.5px #f2a063, 0.75px 0.75px #f2a063,*/
+/*  1px 1px #f2a063, 1.25px 1.25px #f2a063, 1.5px 1.5px #f2a063, 1.75px 1.75px #f2a063,*/
+/*  2px 2px #f2a063, 2.25px 2.25px #f2a063, 2.5px 2.5px #f2a063, 2.75px 2.75px #f2a063,*/
+/*  3px 3px #f2a063, 3.25px 3.25px #f2a063, 3.5px 3.5px #f2a063, 3.75px 3.75px #f2a063,*/
+/*  4px 4px #f2a063, 4.25px 4.25px #f2a063, 4.5px 4.5px #f2a063, 4.75px 4.75px #f2a063,*/
+/*  5px 5px #f2a063, 5.25px 5.25px #f2a063, 5.5px 5.5px #f2a063, 5.75px 5.75px #f2a063,*/
+/*  6px 6px #f2a063;*/
+/*  animation-delay: 0.3s;*/
+/*}*/
+
+/*.playful span:nth-child(3n) {*/
+/*  color: #ffd913;*/
+/*  text-shadow: 0.25px 0.25px #6ec0a9, 0.5px 0.5px #6ec0a9, 0.75px 0.75px #6ec0a9,*/
+/*  1px 1px #6ec0a9, 1.25px 1.25px #6ec0a9, 1.5px 1.5px #6ec0a9, 1.75px 1.75px #6ec0a9,*/
+/*  2px 2px #6ec0a9, 2.25px 2.25px #6ec0a9, 2.5px 2.5px #6ec0a9, 2.75px 2.75px #6ec0a9,*/
+/*  3px 3px #6ec0a9, 3.25px 3.25px #6ec0a9, 3.5px 3.5px #6ec0a9, 3.75px 3.75px #6ec0a9,*/
+/*  4px 4px #6ec0a9, 4.25px 4.25px #6ec0a9, 4.5px 4.5px #6ec0a9, 4.75px 4.75px #6ec0a9,*/
+/*  5px 5px #6ec0a9, 5.25px 5.25px #6ec0a9, 5.5px 5.5px #6ec0a9, 5.75px 5.75px #6ec0a9,*/
+/*  6px 6px #6ec0a9;*/
+/*  animation-delay: 0.15s;*/
+/*}*/
+
+/*.playful span:nth-child(5n) {*/
+/*  color: #555bff;*/
+/*  text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,*/
+/*  1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,*/
+/*  2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,*/
+/*  3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,*/
+/*  4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,*/
+/*  5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,*/
+/*  6px 6px #e485f8;*/
+/*  animation-delay: 0.4s;*/
+/*}*/
+
+/*.playful span:nth-child(7n) {*/
+/*  color: #ff9c55;*/
+/*  text-shadow: 0.25px 0.25px #ff5555, 0.5px 0.5px #ff5555, 0.75px 0.75px #ff5555,*/
+/*  1px 1px #ff5555, 1.25px 1.25px #ff5555, 1.5px 1.5px #ff5555, 1.75px 1.75px #ff5555,*/
+/*  2px 2px #ff5555, 2.25px 2.25px #ff5555, 2.5px 2.5px #ff5555, 2.75px 2.75px #ff5555,*/
+/*  3px 3px #ff5555, 3.25px 3.25px #ff5555, 3.5px 3.5px #ff5555, 3.75px 3.75px #ff5555,*/
+/*  4px 4px #ff5555, 4.25px 4.25px #ff5555, 4.5px 4.5px #ff5555, 4.75px 4.75px #ff5555,*/
+/*  5px 5px #ff5555, 5.25px 5.25px #ff5555, 5.5px 5.5px #ff5555, 5.75px 5.75px #ff5555,*/
+/*  6px 6px #ff5555;*/
+/*  animation-delay: 0.25s;*/
+/*}*/
+
+.printer {
+  cursor: pointer;
+  color: var(--white);
+  background: var(--translucent);
+  border-radius: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+#bannerWave1 {
+  height: 84px;
+  background: var(--bannerWave1);
+  position: absolute;
+  width: 200%;
+  bottom: 0;
+  z-index: 10;
+  animation: gradientBG 120s linear infinite;
+}
+
+#bannerWave2 {
+  height: 100px;
+  background: var(--bannerWave2);
+  position: absolute;
+  width: 400%;
+  bottom: 0;
+  z-index: 5;
+  animation: gradientBG 120s linear infinite;
+}
+
+/* 光标 */
+.cursor {
+  margin-left: 1px;
+  animation: hideToShow 0.7s infinite;
+  font-weight: 200;
+}
+
+.el-icon-arrow-down {
+  font-size: 40px;
+  font-weight: bold;
+  color: var(--white);
+  position: absolute;
+  bottom: 60px;
+  animation: my-shake 1.5s ease-out infinite;
+  z-index: 15;
+  cursor: pointer;
+}
+
+.page-container-wrap {
+  background: var(--background);
+  position: relative;
+}
+
+.page-container {
+  display: flex;
+  justify-content: center;
+  width: 90%;
+  padding: 0 20px 40px 20px;
+  margin: 0 auto;
+  flex-direction: row;
+}
+
+.recent-posts {
+  width: 70%;
+}
+
+.announcement {
+  padding: 22px;
+  border: 1px dashed var(--lightGray);
+  color: var(--greyFont);
+  border-radius: 10px;
+  display: flex;
+  max-width: 780px;
+  margin: 40px auto 40px;
+}
+
+.announcement i {
+  color: var(--themeBackground);
+  font-size: 22px;
+  margin: auto 0;
+  animation: scale 0.8s ease-in-out infinite;
+}
+
+.announcement div div {
+  margin-left: 20px;
+  line-height: 30px;
+}
+
+.aside-content {
+  width: calc(30% - 40px);
+  user-select: none;
+  margin-top: 40px;
+  margin-right: 40px;
+  max-width: 300px;
+  float: right;
+}
+
+.pagination-wrap {
+  display: flex;
+  justify-content: center;
+  margin-top: 40px;
+}
+
+.pagination {
+  padding: 13px 15px;
+  border: 1px solid var(--lightGray);
+  border-radius: 3rem;
+  color: var(--greyFont);
+  width: 100px;
+  user-select: none;
+  cursor: pointer;
+  text-align: center;
+}
+
+.pagination:hover {
+  border: 1px solid var(--themeBackground);
+  color: var(--themeBackground);
+  box-shadow: 0 0 5px var(--themeBackground);
+}
+
+.ais-SearchBox-input {
+  padding: 0 14px;
+  height: 30px;
+  width: calc(100% - 50px);
+  outline: 0;
+  border: 2px solid var(--lightGreen);
+  border-right: 0;
+  border-radius: 40px;
+  color: var(--maxGreyFont);
+  background: var(--white);
+  opacity: 0.5;
+}
+
+@media screen and (max-width: 1100px) {
  .recent-posts {
-    width: 70%;
+    width: 100%;
  }

-  .announcement {
-    padding: 22px;
-    border: 1px dashed var(--lightGray);
-    color: var(--greyFont);
-    border-radius: 10px;
-    display: flex;
-    max-width: 780px;
-    margin: 40px auto 40px;
+  .page-container {
+    width: 100%;
  }
+}

-  .announcement i {
-    color: var(--themeBackground);
-    font-size: 22px;
-    margin: auto 0;
-    animation: scale 0.8s ease-in-out infinite;
-  }
+@media screen and (max-width: 1000px) {

-  .announcement div div {
-    margin-left: 20px;
-    line-height: 30px;
+  .page-container {
+    /* 文章栏与侧标栏垂直排列 */
+    flex-direction: column;
  }

  .aside-content {
-    width: calc(30% - 40px);
-    user-select: none;
-    margin-top: 40px;
-    margin-right: 40px;
-    max-width: 300px;
-    float: right;
-  }
-
-  .pagination-wrap {
-    display: flex;
-    justify-content: center;
-    margin-top: 40px;
-  }
-
-  .pagination {
-    padding: 13px 15px;
-    border: 1px solid var(--lightGray);
-    border-radius: 3rem;
-    color: var(--greyFont);
-    width: 100px;
-    user-select: none;
-    cursor: pointer;
-    text-align: center;
-  }
-
-  .pagination:hover {
-    border: 1px solid var(--themeBackground);
-    color: var(--themeBackground);
-    box-shadow: 0 0 5px var(--themeBackground);
-  }
-
-  .ais-SearchBox-input {
-    padding: 0 14px;
-    height: 30px;
-    width: calc(100% - 50px);
-    outline: 0;
-    border: 2px solid var(--lightGreen);
-    border-right: 0;
-    border-radius: 40px;
-    color: var(--maxGreyFont);
-    background: var(--white);
-    opacity: 0.5;
-  }
-
-  @media screen and (max-width: 1100px) {
-    .recent-posts {
-      width: 100%;
-    }
-
-    .page-container {
-      width: 100%;
-    }
+    width: 100%;
+    max-width: unset;
+    float: unset;
+    margin: 40px auto 0;
  }
+}

-  @media screen and (max-width: 1000px) {
-
-    .page-container {
-      /* 文章栏与侧标栏垂直排列 */
-      flex-direction: column;
-    }
+@media screen and (max-width: 768px) {

-    .aside-content {
-      width: 100%;
-      max-width: unset;
-      float: unset;
-      margin: 40px auto 0;
-    }
-  }
-
-  @media screen and (max-width: 768px) {
-
-    h1 {
-      font-size: 35px;
-    }
+  h1 {
+    font-size: 35px;
  }
+}
 </style>