音乐盒，表白墙，优化

2 years ago · 27f51cfe06
parent 622c381d91
commit 27f51cfe06
34 changed files with 2584 additions and 369 deletions
--- a/README.md
+++ b/README.md
@ -1,10 +1,10 @@
-# 寻国记：poetry-ui（Vue2）
+# poetry-ui（Vue2）
 ## 网站示例
-[寻国记：poetize.cn](https://poetize.cn)
+[poetize.cn](https://poetize.cn)
 ## 技术栈
-前端技术：Vue2（博客系统），Vue3（聊天室系统），Element UI（Vue2），Element-Plus UI（Vue3），Naive UI（Vue3）
+前端技术：Vue2（博客系统），Vue3（IM 聊天室系统），Element UI（Vue2），Element-Plus UI（Vue3），Naive UI（Vue3）
 后端技术：Java，Spring Boot，spring-boot-starter-mail，Mysql，Mybatis-Plus，t-io，qiniu-java-sdk
@ -17,6 +17,15 @@
 本网站搭建于阿里云，采用前后端分离进行实现，两个前端项目通过Nginx代理。
 ### 2023年1月1日更新
 - 新增：音乐盒功能
 - 新增：表白墙功能
 - 优化：文件管理
 - 优化：登录支持多端登录
 - 优化：登录权限过期时间重置
 - 优化：前端美化
 - 优化：留言分类与资源整合
 ### 首页
 ![首页](首页.jpg)
@ -54,23 +63,32 @@ npm run build
 ```
 ## 配置
-全局搜索：$$$$
+全局搜索：`$$$$`
 替换成自己自定义的内容，因为Https无法跨域，这些内容需要用自己的。
 - 博客：https://gitee.com/littledokey/poetize-vue2.git
 - 聊天室：https://gitee.com/littledokey/poetize-im-vue3.git
 - 后端：https://gitee.com/littledokey/poetize.git
 - 部署文档：https://poetize.cn/article?id=26
 ### 重点事情说三遍
 `Star`
 `Star`
 `Star`
 一定要`Star`
 ## 欢迎进群
 1. 交流（摸鱼）
 2. 安装部署：互相帮助，争取每个人都零基础拥有自己的个人网站
 3. 博客答疑：每段代码都是我自己写的，爱学习的小伙伴可以在这里提问，互相学习，互相进步
-4. 隐藏功能介绍：博客隐藏了很多功能，除了最重要的文章浏览，聊天室，还有朋友圈，网站后台基本信息管理，用户管理，评论管理，留言管理，友链管理，建群，加群，加好友等等等等
+4. 漏洞反馈：欢迎提交BUG
-5. 漏洞反馈：欢迎提交BUG
+5. 迭代升级：欢迎提好的创意
 6. 迭代升级：呼声高的功能可能会采纳，能力有限，时间有限，欢迎创作。
-群名片七天有效，如果需要请加作者好友，然后拉进交流群
+群名片七天有效，如果需要请加作者好友，然后拉进交流群（请按需加群，退群后删除好友）
 ![个人名片](Sara.jpg)
--- a/src/assets/css/animation.css
+++ b/src/assets/css/animation.css
@ -128,6 +128,28 @@
    }
 }
 /* 放大 */
@keyframes imgScale {
    0% {
        transform: scale(0.8, 0.8);
    }
    70% {
        transform: scale(1.3, 1.3);
    }
    100% {
        transform: scale(0.8, 0.8);
    }
 }
 /* 渐变 */
@keyframes jianBian {
    to {
        background-position: -2000rem;
    }
 }
 /* 背景位置移动 */
@keyframes gradientBG {
    0% {
@ -169,3 +191,21 @@
        opacity: 1;
    }
 }
 /* 由左开向右 */
@keyframes passing {
    0% {
        transform: translateX(-150%);
        opacity: 0
    }
    50% {
        transform: translateX(0);
        opacity: 1
    }
    100% {
        transform: translateX(150%);
        opacity: 0
    }
 }
--- a/src/assets/css/color.css
+++ b/src/assets/css/color.css
@ -80,4 +80,5 @@
    --bannerWave2: url(../file/bannerwave2.png) repeat-x;
    --verifyImage: url(../file/bg1.jpg);
    --toolbar: url(../file/bg.jpg);
    --love: url(../file/bg.jpg);
 }
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@ -62,7 +62,7 @@ body {
    position: absolute;
    width: 100%;
    height: 100%;
-    background-color: var(--maxMask);
+    background-color: var(--translucent);
    content: "";
 }
@ -209,7 +209,7 @@ body {
 }
-.el-upload.el-upload--picture {
+.el-upload.el-upload--picture, .el-upload.el-upload--text {
    width: 100%;
 }
@ -254,9 +254,37 @@ body {
    cursor: pointer;
 }
 .el-tooltip__popper.is-light {
    background: var(--lightGreen);
    border-radius: 10px;
    color: var(--white);
    padding: 12px 20px;
    letter-spacing: 1px;
    font-weight: 600;
    line-height: 1.5;
    font-size: 1.2rem;
    border: unset;
 }
 .el-tooltip__popper .popper__arrow {
    border-style: unset;
 }
@media screen and (max-width: 800px) {
    .el-dialog {
        width: 70% !important;
    }
 }
@media screen and (max-width: 600px) {
    .el-dialog {
        width: 80% !important;
    }
 }
@media screen and (max-width: 400px) {
    .el-dialog {
-        width: 75% !important;
+        width: 90% !important;
    }
 }
--- a/src/assets/file/like.svg
+++ b/src/assets/file/like.svg
@ -0,0 +1,113 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200"
     xml:space="preserve">
    <image id="image0" width="200" height="200" x="0" y="0"
           href="data:image/png;base64,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
 MCswMDowMKpp2x8AAAAASUVORK5CYII="/>
 </svg>
--- a/src/components/admin/commentList.vue
+++ b/src/components/admin/commentList.vue
@ -1,14 +1,19 @@
 <template>
  <div>
    <div style="margin-bottom: 20px">
      <el-select v-if="isBoss" v-model="pagination.commentType" placeholder="评论来源类型" style="margin-right: 10px">
        <el-option key="1" label="文章评论" value="article"></el-option>
        <el-option key="2" label="树洞留言" value="message"></el-option>
      </el-select>
      <el-input class="my-input" type="number" style="width: 140px;margin-right: 10px" v-model="pagination.source"
-                placeholder="文章ID"></el-input>
+                placeholder="评论来源标识"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="searchComments()">搜索</el-button>
      <el-button type="danger" @click="clearSearch()">清除参数</el-button>
    </div>
    <el-table :data="comments" border class="table" header-cell-class-name="table-header">
      <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
-      <el-table-column prop="source" label="文章ID" align="center"></el-table-column>
+      <el-table-column prop="source" label="评论来源标识" align="center"></el-table-column>
      <el-table-column prop="type" label="评论来源类型" align="center"></el-table-column>
      <el-table-column prop="userId" label="发表用户ID" align="center"></el-table-column>
      <el-table-column prop="likeCount" label="点赞数" align="center"></el-table-column>
      <el-table-column prop="commentContent" label="评论内容" align="center"></el-table-column>
@ -43,7 +48,8 @@
          current: 1,
          size: 10,
          total: 0,
-          source: null
+          source: null,
          commentType: ""
        },
        comments: []
      }
@ -66,7 +72,8 @@
          current: 1,
          size: 10,
          total: 0,
-          source: null
+          source: null,
          commentType: ""
        }
        this.getComments();
      },
--- a/src/components/admin/common/sidebar.vue
+++ b/src/components/admin/common/sidebar.vue
@ -80,6 +80,10 @@
          icon: "el-icon-bank-card",
          index: "/resourcePathList",
          title: "资源路径管理"
        }, {
          icon: "el-icon-sugar",
          index: "/loveList",
          title: "表白墙管理"
        }]
      }
    },
--- a/src/components/admin/loveList.vue
+++ b/src/components/admin/loveList.vue
@ -0,0 +1,212 @@
 <template>
  <div>
    <div>
      <div class="handle-box">
        <el-select clearable v-model="pagination.status" placeholder="状态" class="handle-select mrb10">
          <el-option key="1" label="启用" :value="true"></el-option>
          <el-option key="2" label="禁用" :value="false"></el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
      </div>
      <el-table :data="loves" border class="table" header-cell-class-name="table-header">
        <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
        <el-table-column prop="userId" label="用户ID" align="center"></el-table-column>
        <el-table-column prop="manName" label="男生昵称" align="center"></el-table-column>
        <el-table-column prop="womanName" label="女生昵称" align="center"></el-table-column>
        <el-table-column label="背景封面" align="center">
          <template slot-scope="scope">
            <el-image lazy :preview-src-list="[scope.row.bgCover]" class="table-td-thumb" :src="scope.row.bgCover"
                      fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="男生头像" align="center">
          <template slot-scope="scope">
            <el-image lazy :preview-src-list="[scope.row.manCover]" class="table-td-thumb" :src="scope.row.manCover"
                      fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="女生头像" align="center">
          <template slot-scope="scope">
            <el-image lazy :preview-src-list="[scope.row.womanCover]" class="table-td-thumb" :src="scope.row.womanCover"
                      fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === false ? 'danger' : 'success'"
                    disable-transitions>
              {{scope.row.status === false ? '禁用' : '启用'}}
            </el-tag>
            <el-switch @click.native="changeStatus(scope.row)" v-model="scope.row.status"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="timing" label="计时" align="center"></el-table-column>
        <el-table-column prop="countdownTitle" label="倒计时标题" align="center"></el-table-column>
        <el-table-column prop="countdownTime" label="倒计时时间" align="center"></el-table-column>
        <el-table-column prop="familyInfo" label="额外信息" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
        <el-table-column prop="updateTime" label="最终修改时间" align="center"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)"
                       @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next"
                       :current-page="pagination.current"
                       :page-size="pagination.size"
                       :total="pagination.total"
                       @current-change="handlePageChange">
        </el-pagination>
      </div>
    </div>
  </div>
 </template>
 <script>
  export default {
    components: {},
    data() {
      return {
        pagination: {
          current: 1,
          size: 10,
          total: 0,
          status: null
        },
        loves: []
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getLoves();
    },
    mounted() {
    },
    methods: {
      handleDelete(item) {
        this.$confirm('确认删除资源？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success',
          center: true
        }).then(() => {
          this.$http.get(this.$constant.baseURL + "/family/deleteFamily", {id: item.id}, true)
            .then((res) => {
              this.pagination.current = 1;
              this.getLoves();
              this.$message({
                message: "删除成功！",
                type: "success"
              });
            })
            .catch((error) => {
              this.$message({
                message: error.message,
                type: "error"
              });
            });
        }).catch(() => {
          this.$message({
            type: 'success',
            message: '已取消删除!'
          });
        });
      },
      search() {
        this.pagination.total = 0;
        this.pagination.current = 1;
        this.getLoves();
      },
      getLoves() {
        this.$http.post(this.$constant.baseURL + "/family/listFamily", this.pagination, true)
          .then((res) => {
            if (!this.$common.isEmpty(res.data)) {
              this.loves = res.data.records;
              this.pagination.total = res.data.total;
            }
          })
          .catch((error) => {
            this.$message({
              message: error.message,
              type: "error"
            });
          });
      },
      changeStatus(item) {
        this.$http.get(this.$constant.baseURL + "/family/changeLoveStatus", {
          id: item.id,
          flag: item.status
        }, true)
          .then((res) => {
            this.$message({
              message: "修改成功！",
              type: "success"
            });
          })
          .catch((error) => {
            this.$message({
              message: error.message,
              type: "error"
            });
          });
      },
      handlePageChange(val) {
        this.pagination.current = val;
        this.getLoves();
      }
    }
  }
 </script>
 <style scoped>
  .handle-box {
    margin-bottom: 20px;
  }
  .handle-select {
    width: 200px;
  }
  .table {
    width: 100%;
    font-size: 14px;
  }
  .mrb10 {
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
  }
  .pagination {
    margin: 20px 0;
    text-align: right;
  }
  .el-switch {
    margin: 5px;
  }
 </style>
--- a/src/components/admin/postEdit.vue
+++ b/src/components/admin/postEdit.vue
@ -18,7 +18,7 @@
    <el-form :model="article" :rules="rules" ref="ruleForm" label-width="150px"
             class="demo-ruleForm">
      <el-form-item label="标题" prop="articleTitle">
-        <el-input v-model="article.articleTitle"></el-input>
+        <el-input maxlength="30" v-model="article.articleTitle"></el-input>
      </el-form-item>
      <el-form-item label="内容" prop="articleContent">
@ -50,20 +50,21 @@
      </el-form-item>
      <el-form-item v-if="article.viewStatus === false" label="不可见时的访问密码" prop="password">
-        <el-input v-model="article.password"></el-input>
+        <el-input maxlength="30" v-model="article.password"></el-input>
      </el-form-item>
      <el-form-item label="封面" prop="articleCover">
        <div style="display: flex">
          <el-input v-model="article.articleCover"></el-input>
          <el-image class="table-td-thumb"
                    lazy
                    style="margin-left: 10px"
                    :preview-src-list="[article.articleCover]"
                    :src="article.articleCover"
                    fit="cover"></el-image>
        </div>
        <uploadPicture :isAdmin="true" :prefix="'articleCover'" style="margin-top: 10px" @addPicture="addArticleCover"
-                       :maxSize="5"
+                       :maxSize="2"
                       :maxNumber="1"></uploadPicture>
      </el-form-item>
      <el-form-item label="分类" prop="sortId">
@ -194,16 +195,21 @@
          return;
        }
        let suffix = "";
        if (file.name.lastIndexOf('.') !== -1) {
          suffix = file.name.substring(file.name.lastIndexOf('.'));
        }
        let fd = new FormData();
        fd.append("file", file);
        fd.append("token", this.token);
-        fd.append("key", "articlePicture" + "/" + this.$store.state.currentAdmin.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentAdmin.id + new Date().getTime());
+        fd.append("key", "articlePicture" + "/" + this.$store.state.currentAdmin.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentAdmin.id + new Date().getTime() + Math.floor(Math.random() * 1000) + suffix);
        this.$http.uploadQiniu(this.$constant.qiniuUrl, fd)
          .then((res) => {
            if (!this.$common.isEmpty(res.key)) {
              let url = this.$constant.qiniuDownload + res.key;
-              this.$common.saveResource(this, "articlePicture", url, true);
+              this.$common.saveResource(this, "articlePicture", url, file.size, file.type, true);
              this.$refs.md.$img2Url(pos, url);
            }
          })
--- a/src/components/admin/postList.vue
+++ b/src/components/admin/postList.vue
@ -45,7 +45,7 @@
      </el-table-column>
      <el-table-column label="封面" align="center">
        <template slot-scope="scope">
-          <el-image class="table-td-thumb" :src="scope.row.articleCover" fit="cover"></el-image>
+          <el-image lazy class="table-td-thumb" :src="scope.row.articleCover" fit="cover"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="是否启用评论" align="center">
@ -116,7 +116,7 @@
    watch: {
      'pagination.sortId'(newVal) {
        this.pagination.labelId = null;
-        if(!this.$common.isEmpty(newVal) && !this.$common.isEmpty(this.labels)){
+        if (!this.$common.isEmpty(newVal) && !this.$common.isEmpty(this.labels)) {
          this.labelsTemp = this.labels.filter(l => l.sortId === newVal);
        }
      }
--- a/src/components/admin/resourceList.vue
+++ b/src/components/admin/resourceList.vue
@ -2,7 +2,7 @@
  <div>
    <div>
      <div class="handle-box">
-        <el-select v-model="pagination.resourceType" placeholder="资源类型" class="handle-select mrb10">
+        <el-select clearable v-model="pagination.resourceType" placeholder="资源类型" class="handle-select mrb10">
          <el-option key="10" label="表情包" value="internetMeme"></el-option>
          <el-option key="1" label="用户头像" value="userAvatar"></el-option>
          <el-option key="2" label="文章封面" value="articleCover"></el-option>
@ -16,6 +16,11 @@
          <el-option key="11" label="聊天群头像" value="im/groupAvatar"></el-option>
          <el-option key="12" label="群聊天图片" value="im/groupMessage"></el-option>
          <el-option key="13" label="朋友聊天图片" value="im/friendMessage"></el-option>
          <el-option key="14" label="Funny声音" value="funnyUrl"></el-option>
          <el-option key="15" label="Funny封面" value="funnyCover"></el-option>
          <el-option key="16" label="Love.Cover" value="love/bgCover"></el-option>
          <el-option key="17" label="Love.Man" value="love/manCover"></el-option>
          <el-option key="18" label="Love.Woman" value="love/womanCover"></el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
        <el-button type="primary" @click="addResources()">新增资源</el-button>
@ -35,11 +40,22 @@
        </el-table-column>
        <el-table-column label="路径" align="center">
          <template slot-scope="scope">
-            <el-image :preview-src-list="[scope.row.path]" class="table-td-thumb" :src="scope.row.path"
+            <template v-if="!$common.isEmpty(scope.row.mimeType) && scope.row.mimeType.includes('image')">
              <el-image lazy :preview-src-list="[scope.row.path]" class="table-td-thumb" :src="scope.row.path"
                        fit="cover"></el-image>
            </template>
            <template v-else>
              {{scope.row.path}}
            </template>
          </template>
        </el-table-column>
        <el-table-column label="大小(KB)" align="center">
          <template slot-scope="scope">
            {{Math.round(scope.row.size / 1024)}}
          </template>
        </el-table-column>
        <el-table-column prop="mimeType" label="类型" align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
--- a/src/components/admin/resourcePathList.vue
+++ b/src/components/admin/resourcePathList.vue
@ -2,7 +2,7 @@
  <div>
    <div>
      <div class="handle-box">
-        <el-select v-model="pagination.resourceType" placeholder="资源路径类型" class="handle-select mrb10">
+        <el-select clearable v-model="pagination.resourceType" placeholder="资源路径类型" class="handle-select mrb10">
          <el-option
            v-for="(item, i) in resourceTypes"
            :key="i"
@ -10,7 +10,7 @@
            :value="item.value">
          </el-option>
        </el-select>
-        <el-select v-model="pagination.resourceStatus" placeholder="状态" class="handle-select mrb10">
+        <el-select clearable v-model="pagination.status" placeholder="状态" class="handle-select mrb10">
          <el-option key="1" label="启用" :value="true"></el-option>
          <el-option key="2" label="禁用" :value="false"></el-option>
        </el-select>
@ -20,6 +20,13 @@
      <el-table :data="resourcePaths" border class="table" header-cell-class-name="table-header">
        <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
        <el-table-column prop="title" label="标题" align="center"></el-table-column>
        <el-table-column prop="introduction" label="简介" align="center"></el-table-column>
        <el-table-column label="封面" align="center">
          <template slot-scope="scope">
            <el-image lazy :preview-src-list="[scope.row.cover]" class="table-td-thumb" :src="scope.row.cover"
                      fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="url" label="链接" align="center"></el-table-column>
        <el-table-column prop="type" label="资源类型" align="center"></el-table-column>
@ -32,16 +39,8 @@
            <el-switch @click.native="changeStatus(scope.row)" v-model="scope.row.status"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="封面" align="center">
          <template slot-scope="scope">
            <el-image :preview-src-list="[scope.row.cover]" class="table-td-thumb" :src="scope.row.cover"
                      fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="introduction" label="简介" align="center"></el-table-column>
        <el-table-column prop="remark" label="备注" align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
@ -75,6 +74,18 @@
      </div>
    </el-dialog>
    <el-dialog title="文件"
               :visible.sync="uploadDialog"
               width="25%"
               :append-to-body="true"
               destroy-on-close
               center>
      <div>
        <uploadPicture :isAdmin="true" :prefix="resourcePath.type + 'Url'" @addPicture="addFile" :maxSize="10"
                       :maxNumber="1" :listType="'text'" :accept="'image/*, video/*, audio/*'"></uploadPicture>
      </div>
    </el-dialog>
    <el-dialog title="资源路径"
               :visible.sync="addResourcePathDialog"
               width="50%"
@ -85,13 +96,31 @@
      <div>
        <div>
          <div style="margin-bottom: 5px">标题：</div>
-          <el-input v-model="resourcePath.title"></el-input>
+          <el-input maxlength="60" v-model="resourcePath.title"></el-input>
          <div style="margin-top: 10px;margin-bottom: 5px">简介：</div>
-          <el-input v-model="resourcePath.introduction"></el-input>
+          <el-input maxlength="1000" v-model="resourcePath.introduction"></el-input>
          <div style="margin-top: 10px;margin-bottom: 5px">封面：</div>
          <div style="display: flex">
            <el-input v-model="resourcePath.cover"></el-input>
            <div style="width: 66px;margin: 3.5px 0 0 10px">
              <proButton :info="'上传封面'"
                         @click.native="addResourcePathCover()"
                         :before="$constant.before_color_1"
                         :after="$constant.after_color_1">
              </proButton>
            </div>
          </div>
          <div style="margin-top: 10px;margin-bottom: 5px">链接：</div>
          <div style="display: flex">
            <el-input v-model="resourcePath.url"></el-input>
            <div style="width: 66px;margin: 3.5px 0 0 10px">
              <proButton :info="'上传文件'"
                         @click.native="addResourcePathUrl()"
                         :before="$constant.before_color_1"
                         :after="$constant.after_color_1">
              </proButton>
            </div>
          </div>
          <div style="margin-top: 10px;margin-bottom: 5px">资源类型：</div>
          <el-select v-model="resourcePath.type" placeholder="资源路径类型" class="handle-select mrb10">
            <el-option
@ -102,15 +131,9 @@
            </el-option>
          </el-select>
          <div style="margin-top: 10px;margin-bottom: 5px">备注：</div>
-          <el-input v-model="resourcePath.remark" type="textarea"></el-input>
+          <el-input maxlength="1000" v-model="resourcePath.remark" type="textarea"></el-input>
        </div>
        <div style="display: flex;margin-top: 30px" class="myCenter">
          <proButton :info="'上传封面'"
                     @click.native="addResourcePathCover()"
                     :before="$constant.before_color_1"
                     :after="$constant.after_color_1"
                     style="margin-right: 20px">
          </proButton>
          <proButton :info="'提交'"
                     @click.native="addResourcePath()"
                     :before="$constant.before_color_2"
@ -134,16 +157,21 @@
    },
    data() {
      return {
-        resourceTypes: [{label: "友链", value: "friendUrl"}],
+        resourceTypes: [
          {label: "友链", value: "friendUrl"},
          {label: "恋爱图片", value: "lovePhoto"},
          {label: "鬼畜", value: "funny"}
        ],
        pagination: {
          current: 1,
          size: 10,
          total: 0,
          resourceType: "",
-          resourceStatus: null
+          status: null
        },
        resourcePaths: [],
        coverDialog: false,
        uploadDialog: false,
        addResourcePathDialog: false,
        isUpdate: false,
        resourcePath: {
@ -173,6 +201,23 @@
        this.resourcePath.cover = res;
        this.coverDialog = false;
      },
      addFile(res) {
        this.resourcePath.url = res;
        this.uploadDialog = false;
      },
      addResourcePathUrl() {
        if (this.addResourcePathDialog === false) {
          return;
        }
        if (this.$common.isEmpty(this.resourcePath.type)) {
          this.$message({
            message: "请选择资源类型！",
            type: "error"
          });
          return;
        }
        this.uploadDialog = true;
      },
      addResourcePathCover() {
        if (this.addResourcePathDialog === false) {
          return;
--- a/src/components/admin/userList.vue
+++ b/src/components/admin/userList.vue
@ -31,7 +31,7 @@
        </el-table-column>
        <el-table-column label="头像" align="center">
          <template slot-scope="scope">
-            <el-image class="table-td-thumb" :src="scope.row.avatar" fit="cover"></el-image>
+            <el-image lazy class="table-td-thumb" :src="scope.row.avatar" fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="性别" align="center">
--- a/src/components/admin/webEdit.vue
+++ b/src/components/admin/webEdit.vue
@ -33,7 +33,7 @@
        <el-form-item label="背景" prop="backgroundImage">
          <div style="display: flex">
            <el-input v-model="webInfo.backgroundImage"></el-input>
-            <el-image class="table-td-thumb"
+            <el-image lazy class="table-td-thumb"
                      style="margin-left: 10px"
                      :preview-src-list="[webInfo.backgroundImage]"
                      :src="webInfo.backgroundImage"
@ -48,7 +48,7 @@
        <el-form-item label="头像" prop="avatar">
          <div style="display: flex">
            <el-input v-model="webInfo.avatar"></el-input>
-            <el-image class="table-td-thumb"
+            <el-image lazy class="table-td-thumb"
                      style="margin-left: 10px"
                      :preview-src-list="[webInfo.avatar]"
                      :src="webInfo.avatar"
@ -166,7 +166,7 @@
          {{avatar}}
        </el-tag>
        <div>
-          <el-image class="table-td-thumb"
+          <el-image lazy class="table-td-thumb"
                    style="margin: 10px"
                    :preview-src-list="[avatar]"
                    :src="avatar"
@ -215,7 +215,7 @@
          {{cover}}
        </el-tag>
        <div>
-          <el-image class="table-td-thumb"
+          <el-image lazy class="table-td-thumb"
                    style="margin: 10px"
                    :preview-src-list="[cover]"
                    :src="cover"
--- a/src/components/article.vue
+++ b/src/components/article.vue
@ -5,6 +5,7 @@
      <!-- 背景图片 -->
      <el-image class="article-image my-el-image"
                v-once
                lazy
                :src="!$common.isEmpty(article.articleCover)?article.articleCover:$constant.random_image+new Date()+Math.floor(Math.random()*10)"
                fit="cover">
        <div slot="error" class="image-slot">
@ -151,7 +152,7 @@
        <!-- 评论 -->
        <div v-if="article.commentStatus === true">
-          <comment :source="article.id" :userId="article.userId"></comment>
+          <comment :type="'article'" :source="article.id" :userId="article.userId"></comment>
        </div>
      </div>
--- a/src/components/articleList.vue
+++ b/src/components/articleList.vue
@ -23,6 +23,7 @@
      <div class="recent-post-item-image" :class="{ leftImage: index % 2 !== 0, rightImage: index % 2 === 0 }">
        <el-image class="my-el-image"
                  v-once
                  lazy
                  :src="!$common.isEmpty(article.articleCover)?article.articleCover:$constant.random_image+new Date()+Math.floor(Math.random()*10)"
                  fit="cover">
          <div slot="error" class="image-slot myCenter" style="background-color: var(--lightGreen)">
@ -180,7 +181,7 @@
    cursor: pointer;
    overflow: hidden;
    border-radius: 10px;
-    animation: zoomIn 0.8s ease-in-out;
+    animation: hideToShow 1s ease-in-out;
  }
  .recent-post-item-image {
@ -289,7 +290,7 @@
    .recent-post-item-image {
      width: 100%;
-      height: 170px;
+      height: 200px;
    }
    .leftImage {
@ -305,10 +306,14 @@
    .recent-post-item-post {
      width: 100%;
-      height: 280px;
+      height: 250px;
      position: relative;
    }
    .recent-post-desc {
      -webkit-line-clamp: 3;
    }
    .leftImage .sort-label {
      position: absolute;
      bottom: 20px;
--- a/src/components/comment/comment.vue
+++ b/src/components/comment/comment.vue
@ -3,7 +3,7 @@
    <!-- 评论框 -->
    <div style="margin-bottom: 40px">
      <div class="comment-head">
-        <i class="el-icon-edit-outline" style="font-weight: bold;font-size: 22px;"></i> 评论
+        <i class="el-icon-edit-outline" style="font-weight: bold;font-size: 22px;"></i> 留言
      </div>
      <div>
        <!-- 文字评论 -->
@ -26,7 +26,7 @@
      <!-- 评论数量 -->
      <div class="commentInfo-title">
        <span style="font-size: 1.15rem">Comments | </span>
-        <span>{{ total }} 条评论</span>
+        <span>{{ total }} 条留言</span>
      </div>
      <!-- 评论详情 -->
      <div id="comment-content" class="commentInfo-detail"
@ -40,7 +40,7 @@
          <div style="display: flex;justify-content: space-between">
            <div>
              <span class="commentInfo-username">{{ item.username }}</span>
-              <span class="commentInfo-master" v-if="item.userId === userId">博主</span>
+              <span class="commentInfo-master" v-if="item.userId === userId">主人翁</span>
              <span class="commentInfo-other">{{ $common.getDateDiff(item.createTime) }}</span>
            </div>
            <div class="commentInfo-reply" @click="replyDialog(item, item)">
@ -62,7 +62,7 @@
                <div style="display: flex;justify-content: space-between">
                  <div>
                    <span class="commentInfo-username-small">{{ childItem.username }}</span>
-                    <span class="commentInfo-master" v-if="childItem.userId === userId">博主</span>
+                    <span class="commentInfo-master" v-if="childItem.userId === userId">主人翁</span>
                    <span class="commentInfo-other">{{ $common.getDateDiff(childItem.createTime) }}</span>
                  </div>
                  <div>
@ -100,10 +100,10 @@
    </div>
    <div v-else class="myCenter" style="color: var(--greyFont)">
-      <i>来发第一个评论啦~</i>
+      <i>来发第一个留言啦~</i>
    </div>
-    <el-dialog title="评论"
+    <el-dialog title="留言"
               :visible.sync="replyDialogVisible"
               width="30%"
               :before-close="handleClose"
@ -134,6 +134,9 @@
      source: {
        type: Number
      },
      type: {
        type: String
      },
      userId: {
        type: Number
      }
@ -151,6 +154,7 @@
          size: 10,
          total: 0,
          source: this.source,
          commentType: this.type,
          floorCommentId: null
        }
      };
@ -171,7 +175,7 @@
        this.getComments(this.pagination);
      },
      getTotal() {
-        this.$http.get(this.$constant.baseURL + "/comment/getCommentCount", {source: this.source})
+        this.$http.get(this.$constant.baseURL + "/comment/getCommentCount", {source: this.source, type: this.type})
          .then((res) => {
            if (!this.$common.isEmpty(res.data)) {
              this.total = res.data;
@ -191,6 +195,7 @@
          size: 5,
          total: 0,
          source: this.source,
          commentType: this.type,
          floorCommentId: floorComment.id
        }
        this.getComments(pagination, floorComment, true);
@ -243,6 +248,7 @@
      submitComment(commentContent) {
        let comment = {
          source: this.source,
          type: this.type,
          commentContent: commentContent
        };
@ -257,6 +263,7 @@
              size: 10,
              total: 0,
              source: this.source,
              commentType: this.type,
              floorCommentId: null
            }
            this.getComments(this.pagination);
@ -272,6 +279,7 @@
      submitReply(commentContent) {
        let comment = {
          source: this.source,
          type: this.type,
          floorCommentId: this.floorComment.id,
          commentContent: commentContent,
          parentCommentId: this.replyComment.id,
@ -287,6 +295,7 @@
              size: 5,
              total: 0,
              source: this.source,
              commentType: this.type,
              floorCommentId: floorComment.id
            }
            this.getComments(pagination, floorComment);
--- a/src/components/comment/graffiti.vue
+++ b/src/components/comment/graffiti.vue
@ -294,14 +294,14 @@
        let fd = new FormData();
        fd.append("file", obj);
        fd.append("token", this.token);
-        fd.append("key", "graffiti" + "/" + this.$store.state.currentUser.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentUser.id + new Date().getTime());
+        fd.append("key", "graffiti" + "/" + this.$store.state.currentUser.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentUser.id + new Date().getTime() + Math.floor(Math.random() * 1000) + ".png");
        this.$http.uploadQiniu(this.$constant.qiniuUrl, fd)
          .then((res) => {
            if (!this.$common.isEmpty(res.key)) {
              this.clearContext();
              let url = this.$constant.qiniuDownload + res.key;
-              this.$common.saveResource(this, "graffiti", url);
+              this.$common.saveResource(this, "graffiti", url, obj.size, obj.type);
              let img = "<你画我猜," + url + ">";
              this.$emit("addGraffitiComment", img);
            }
--- a/src/components/common/card.vue
+++ b/src/components/common/card.vue
@ -7,6 +7,7 @@
      <div class="card-image">
        <el-image class="my-el-image"
                  v-once
                  lazy
                  :src="resourcePath.cover"
                  fit="cover">
          <div slot="error" class="image-slot myCenter" style="background-color: var(--lightGreen)">
--- a/src/components/common/emoji.vue
+++ b/src/components/common/emoji.vue
@ -40,7 +40,7 @@
        for (let i = 0; i < emojiList.length; i++) {
          emojiName = "[" + emojiList[i] + "]";
          let j = i + 1;
-          url = "https://pzh-blog-photo.oss-cn-shenzhen.aliyuncs.com/emoji/q" + j + ".gif";
+          url = this.$constant.qiniuDownload + "emoji/q" + j + ".gif";
          result[emojiName] = url;
        }
        return result;
--- a/src/components/common/photo.vue
+++ b/src/components/common/photo.vue
@ -0,0 +1,155 @@
 <template>
  <div class="card-container" v-if="!$common.isEmpty(resourcePathList)">
    <div v-for="(resourcePath, index) in resourcePathList"
         :key="index"
         class="card-item wow shadow-box-mini">
      <div class="card-image">
        <el-image class="my-el-image"
                  v-once
                  lazy
                  :preview-src-list="[resourcePath.cover]"
                  :src="resourcePath.cover"
                  fit="cover">
          <div slot="error" class="image-slot"></div>
        </el-image>
      </div>
      <div class="card-body">
        <el-tooltip placement="bottom-start" effect="light">
          <div slot="content">{{resourcePath.introduction}}</div>
          <div class="card-desc">
            {{resourcePath.introduction}}
          </div>
        </el-tooltip>
        <div class="card-time">
          Date: {{$common.getDateDiff(resourcePath.createTime)}}
        </div>
      </div>
    </div>
  </div>
 </template>
 <script>
  export default {
    props: {
      resourcePathList: {
        type: Array
      }
    },
    data() {
      return {}
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {}
  }
 </script>
 <style scoped>
  .card-container {
    display: flex;
    flex-wrap: wrap;
  }
  .card-item {
    position: relative;
    overflow: hidden;
    margin: 15px;
    height: 550px;
    flex-shrink: 0;
    width: calc(100% / 3 - 30px);
    cursor: pointer;
    animation: zoomIn 0.8s ease-in-out;
    padding: 1.3rem 1.3rem 1.5rem;
    background: var(--background);
    border-radius: 1.5rem;
    transition: all 0.2s;
  }
  .card-image {
    width: 100%;
    height: 400px;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(147, 147, 147, 0.61);
    margin-bottom: 1rem;
  }
  .card-image >>> .el-image__inner {
    transition: all 1s;
  }
  .card-image >>> .el-image__inner:hover {
    transform: scale(1.2);
  }
  .card-body {
    padding: 10px 5px;
  }
  .card-desc {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--fontColor);
    letter-spacing: 1px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .card-time {
    position: absolute;
    bottom: 15px;
    color: #999999;
    font-weight: 500;
  }
  @media screen and (max-width: 1300px) {
    .card-item {
      width: calc(100% / 2 - 30px);
    }
  }
  @media screen and (max-width: 1000px) {
    .card-item {
      height: 450px;
    }
    .card-image {
      height: 300px;
    }
  }
  @media screen and (max-width: 750px) {
    .card-item {
      width: 100%;
      margin: 15px 0;
    }
  }
  @media screen and (max-width: 450px) {
    .card-item {
      height: 400px;
    }
    .card-image {
      height: 250px;
    }
  }
 </style>
--- a/src/components/common/twoPoem.vue
+++ b/src/components/common/twoPoem.vue
@ -5,14 +5,16 @@
    <el-image class="my-el-image poem-image"
              style="position: absolute;margin-top: -50px"
              v-once
              lazy
              :src="$constant.two_poem_image[Math.floor(Math.random() * $constant.two_poem_image.length)]"
              fit="cover">
      <div slot="error" class="image-slot"></div>
    </el-image>
    <div class="poem-wrap">
-      <div><span>{{isHitokoto?hitokoto.from:guShi.origin}}</span></div>
+      <div v-if="isShehui"><span>鬼畜全明星</span></div>
      <div v-else><span>{{isHitokoto?hitokoto.from:guShi.origin}}</span></div>
      <p class="poem">{{isHitokoto?hitokoto.hitokoto:guShi.content}}</p>
-      <p class="info" v-if="!isHitokoto || (isHitokoto && !$common.isEmpty(hitokoto.from_who))">
+      <p class="info" v-if="!isShehui && (!isHitokoto || (isHitokoto && !$common.isEmpty(hitokoto.from_who)))">
        {{isHitokoto?hitokoto.from_who:guShi.author}}
      </p>
    </div>
@ -24,6 +26,10 @@
      isHitokoto: {
        type: Boolean,
        default: true
      },
      isShehui: {
        type: Boolean,
        default: false
      }
    },
    data() {
@ -42,14 +48,32 @@
      };
    },
    created() {
      if (!this.isShehui) {
        if (this.isHitokoto) {
          this.getHitokoto();
        } else {
          this.getGuShi();
        }
      } else {
        this.hitokoto.from = "";
        this.hitokoto.from_who = "";
        this.sendShehui();
      }
    },
    methods: {
      sendShehui() {
        let that = this;
        let xhr = new XMLHttpRequest();
        xhr.open('get', this.$constant.shehui);
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            let shehui = xhr.responseText;
            that.hitokoto.hitokoto = shehui.substring(1, shehui.length - 1);
          }
        };
        xhr.send();
      },
      getGuShi() {
        let that = this;
        let xhr = new XMLHttpRequest();
@ -88,18 +112,20 @@
    text-align: center;
    letter-spacing: 4px;
    font-weight: 300;
-    width: 60%;
+    width: 100%;
    max-width: 800px;
  }
  .poem-wrap div span {
-    padding: 5px 40px;
+    padding: 5px 10px;
    color: var(--white);
-    font-size: 1.8em;
+    font-size: 2em;
    border-radius: 5px;
  }
  .poem-wrap p {
-    width: 70%;
+    width: 100%;
    max-width: 800px;
    color: var(--white);
  }
@ -109,7 +135,7 @@
  }
  .poem-wrap p.info {
-    margin: 20px auto;
+    margin: 20px auto 40px;
    font-size: 1.1em;
  }
 </style>
--- a/src/components/common/uploadPicture.vue
+++ b/src/components/common/uploadPicture.vue
@ -11,8 +11,8 @@
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      :on-error="handleError"
-      list-type="picture"
+      :list-type="listType"
-      accept="image/*"
+      :accept="accept"
      :limit="maxNumber"
      :auto-upload="false">
      <div class="el-upload__text">
@ -26,9 +26,17 @@
        </svg>
        <div>拖拽上传 / 点击上传</div>
      </div>
      <template v-if="listType === 'picture'">
        <div slot="tip" class="el-upload__tip">
          一次最多上传{{maxNumber}}张图片，且每张图片不超过{{maxSize}}M！
        </div>
      </template>
      <template v-else>
        <div slot="tip" class="el-upload__tip">
          一次最多上传{{maxNumber}}个文件，且每个文件不超过{{maxSize}}M！
        </div>
      </template>
    </el-upload>
    <div style="text-align: center;margin-top: 20px">
@ -50,6 +58,14 @@
        type: String,
        default: ""
      },
      listType: {
        type: String,
        default: "picture"
      },
      accept: {
        type: String,
        default: "image/*"
      },
      maxSize: {
        type: Number,
        default: 5
@ -105,7 +121,7 @@
      handleSuccess(response, file, fileList) {
        this.qiniuParam.key = "";
        let url = this.$constant.qiniuDownload + response.key;
-        this.$common.saveResource(this, this.prefix, url, this.isAdmin);
+        this.$common.saveResource(this, this.prefix, url, file.size, file.raw.type, this.isAdmin);
        this.$emit("addPicture", url);
      },
      handleError(err, file, fileList) {
@ -124,7 +140,13 @@
          });
          return false;
        }
-        this.qiniuParam.key = this.prefix + "/" + (!this.$common.isEmpty(this.$store.state.currentUser.username) ? (this.$store.state.currentUser.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentUser.id) : (this.$store.state.currentAdmin.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentAdmin.id)) + new Date().getTime() + Math.floor(Math.random() * 1000);
+
        let suffix = "";
        if (file.name.lastIndexOf('.') !== -1) {
          suffix = file.name.substring(file.name.lastIndexOf('.'));
        }
        this.qiniuParam.key = this.prefix + "/" + (!this.$common.isEmpty(this.$store.state.currentUser.username) ? (this.$store.state.currentUser.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentUser.id) : (this.$store.state.currentAdmin.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentAdmin.id)) + new Date().getTime() + Math.floor(Math.random() * 1000) + suffix;
      },
      // 添加文件、上传成功和上传失败时都会被调用
      handleChange(file, fileList) {
--- a/src/components/friend.vue
+++ b/src/components/friend.vue
@ -3,6 +3,7 @@
    <el-image style="animation: header-effect 2s"
              class="background-image"
              v-once
              lazy
              :src="$constant.friendBG"
              fit="cover">
      <div slot="error" class="image-slot background-image-error"></div>
@ -35,16 +36,16 @@
                    </div>
                    <div class="user-content">
                      <div>
-                        <el-input v-model="friend.title"></el-input>
+                        <el-input maxlength="30" v-model="friend.title"></el-input>
                      </div>
                      <div>
-                        <el-input v-model="friend.introduction"></el-input>
+                        <el-input maxlength="120" v-model="friend.introduction"></el-input>
                      </div>
                      <div>
-                        <el-input v-model="friend.cover"></el-input>
+                        <el-input maxlength="200" v-model="friend.cover"></el-input>
                      </div>
                      <div>
-                        <el-input v-model="friend.url"></el-input>
+                        <el-input maxlength="200" v-model="friend.url"></el-input>
                      </div>
                    </div>
                  </div>
--- a/src/components/funny.vue
+++ b/src/components/funny.vue
@ -0,0 +1,289 @@
 <template>
  <div style="background: var(--background)">
    <!-- 两句诗 -->
    <div class="my-animation-slide-top">
      <twoPoem :isShehui="true"></twoPoem>
    </div>
    <div style="background: var(--background);padding: 40px 0" class="my-animation-slide-bottom">
      <div class="funny-wrap" v-if="!$common.isEmpty(funnys)">
        <div v-for="(item, index) in funnys" :key="index">
          <div style="display: flex">
            <span class="iconRotate">
              <svg viewBox="0 0 1024 1024" width="28" height="28">
                <path
                  d="M502.272 948.224l-427.008-427.008c-1.536-1.536-1.536-3.584 0-4.608l427.008-427.008c1.536-1.536 3.584-1.536 4.608 0l427.008 427.008c1.536 1.536 1.536 3.584 0 4.608L506.88 948.224c-1.536 1.024-3.584 1.024-4.608 0z"
                  fill="#C9E6FF"></path>
                <path
                  d="M504.32 956.416c-2.56 0-5.632-1.024-7.68-3.072l-427.008-427.008c-4.096-4.096-4.096-11.264 0-15.36L496.64 83.456c4.096-4.096 11.264-4.096 15.36 0l427.008 427.008c4.096 4.096 4.096 11.264 0 15.36L512 953.344c-2.048 2.048-4.608 3.072-7.68 3.072z m-420.864-437.76l420.864 420.864 420.864-420.864L504.32 97.28l-420.864 421.376z"
                  fill="#2E66FF"></path>
                <path
                  d="M497.152 97.792l13.312 414.208 395.264-395.264c5.632-5.632 2.048-15.872-6.144-16.384L506.88 88.064c-5.632-0.512-9.728 4.096-9.728 9.728z"
                  fill="#FFFFFF"></path>
                <path
                  d="M503.296 529.92l-13.824-432.128c0-4.608 1.536-9.216 5.12-12.8s7.68-5.12 12.8-5.12l392.704 12.8c7.168 0 12.8 4.608 15.36 10.752 2.56 6.656 1.024 13.312-3.584 18.432l-408.576 408.064z m1.536-432.64l12.8 396.8 382.464-382.464c0.512-0.512 0.512-1.024 0.512-2.048-0.512-0.512-1.024-1.024-1.536-1.024l-392.704-12.8c-0.512 0-1.024 0.512-1.536 0.512v1.024z"
                  fill="#2E66FF"></path>
                <path
                  d="M522.24 946.688L508.416 532.48l-395.264 395.264c-5.632 5.632-2.048 15.872 6.144 16.384l392.704 12.8c5.632 0 10.24-4.608 10.24-10.24z"
                  fill="#FFFFFF"></path>
                <path
                  d="M512.512 964.096h-0.512l-392.704-12.8c-7.168 0-12.8-4.608-15.36-10.752-2.56-6.656-1.024-13.312 3.584-18.432l407.552-407.552 13.824 432.128c0 4.608-1.536 9.216-5.12 12.8-2.048 3.072-6.656 4.608-11.264 4.608z m-11.264-413.696l-382.464 382.464c-0.512 0.512-0.512 1.024-0.512 2.048 0.512 0.512 1.024 1.024 1.536 1.024l392.704 12.8c0.512 0 1.024-0.512 1.536-0.512 0 0 0.512-0.512 0.512-1.536l-13.312-396.288z"
                  fill="#2E66FF"></path>
                <path
                  d="M931.84 509.952l-414.208 13.312 395.264 395.264c5.632 5.632 15.872 2.048 16.384-6.144l12.8-392.704c0-5.632-4.608-10.24-10.24-9.728z"
                  fill="#FFB5EC"></path>
                <path
                  d="M919.552 929.28c-4.608 0-8.704-1.536-11.776-5.12l-407.552-407.552 432.128-13.824c4.608 0 9.216 1.536 12.8 5.12s5.12 8.192 5.12 12.8l-12.8 392.704c0 7.168-4.608 12.8-10.752 15.36-3.072 0-5.12 0.512-7.168 0.512z m-384-398.848l382.464 382.464c0.512 0.512 1.024 0.512 2.048 0.512 0.512-0.512 1.024-1.024 1.024-1.536l12.8-392.704c0-0.512-0.512-1.024-0.512-1.536 0 0-1.024-0.512-1.536-0.512l-396.288 13.312z"
                  fill="#2E66FF"></path>
                <path
                  d="M76.8 526.848l414.208-13.312-394.752-395.264c-5.632-5.632-15.872-2.048-16.384 6.144L67.072 517.12c0 5.632 4.096 10.24 9.728 9.728z"
                  fill="#FFF152"></path>
                <path
                  d="M76.8 534.528c-4.608 0-8.704-2.048-12.288-5.12-3.584-3.584-5.12-8.192-5.12-12.8l12.8-392.704c0-7.168 4.608-12.8 10.752-15.36 6.656-2.56 13.312-1.024 18.432 3.584l407.552 407.552-432.128 13.824v1.024z m12.8-411.136h-0.512c-0.512 0.512-1.024 1.024-1.024 1.536l-12.8 392.704c0 0.512 0.512 1.024 0.512 1.536 0 0 0.512 0.512 1.536 0.512L474.112 506.88 90.624 123.904c-0.512-0.512-1.024-0.512-1.024-0.512z"
                  fill="#2E66FF"></path>
              </svg>
            </span>
            <span class="funny-title">{{index + 1}}号选手：{{item.title}}</span>
          </div>
          <div class="process-wrap">
            <el-collapse v-model="activeName" accordion @change="changeFunny(item.title)">
              <el-collapse-item title="笑梗不笑人" :name="index">
                <div class="my-animation-slide-bottom"
                     style="display: flex;flex-flow: wrap;margin-left: 20px"
                     v-if="!$common.isEmpty(item.data)">
                  <div style="width: 150px" v-for="(funny, i) in item.data" :key="i">
                    <el-avatar class="funny-avatar myCenter" :size="110"
                               style="margin: 20px"
                               @click.native="playSound(funny.url)"
                               :src="funny.cover">
                    </el-avatar>
                    <div class="funny-item-title">{{funny.introduction}}</div>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
            <hr>
          </div>
        </div>
      </div>
    </div>
    <!-- 页脚 -->
    <myFooter></myFooter>
  </div>
 </template>
 <script>
  const twoPoem = () => import( "./common/twoPoem");
  const myFooter = () => import( "./common/myFooter");
  export default {
    components: {
      twoPoem,
      myFooter
    },
    data() {
      return {
        pagination: {
          current: 1,
          size: 9999,
          order: "introduction",
          desc: false,
          resourceType: "funny",
          searchKey: ""
        },
        activeName: 0,
        audio: null,
        funnys: [{
          title: "",
          count: null,
          data: [{
            title: "",
            cover: "",
            url: "",
            introduction: ""
          }]
        }],
        funny: {
          title: "",
          introduction: "",
          cover: "",
          url: ""
        }
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getFunny();
    },
    mounted() {
    },
    methods: {
      getFunny() {
        this.$http.get(this.$constant.baseURL + "/webInfo/listFunny")
          .then((res) => {
            if (!this.$common.isEmpty(res.data)) {
              this.funnys = res.data;
              this.changeFunny(this.funnys[0].title);
            }
          })
          .catch((error) => {
            this.$message({
              message: error.message,
              type: "error"
            });
          });
      },
      listFunny() {
        this.$http.post(this.$constant.baseURL + "/webInfo/listResourcePath", this.pagination)
          .then((res) => {
            if (!this.$common.isEmpty(res.data) && !this.$common.isEmpty(res.data.records)) {
              this.funnys.forEach(funny => {
                if (funny.title === this.pagination.searchKey) {
                  funny.data = res.data.records;
                  this.$forceUpdate();
                }
              });
            }
            this.pagination.searchKey = "";
          })
          .catch((error) => {
            this.$message({
              message: error.message,
              type: "error"
            });
          });
      },
      changeFunny(title) {
        this.funnys.forEach(funny => {
          if (funny.title === title && this.$common.isEmpty(funny.data)) {
            this.pagination.searchKey = title;
            this.listFunny();
          }
        });
      },
      playSound(src) {
        if (this.audio != null) {
          if (this.audio.src === src) {
            if (this.audio.paused) {
              this.audio.play();
            } else {
              this.audio.pause();
            }
          } else {
            this.audio.pause();
            this.audio.src = src;
            this.audio.load();
            this.audio.play();
          }
        } else {
          this.audio = new Audio(src);
          this.audio.play();
        }
      }
    }
  }
 </script>
 <style scoped>
  .funny-wrap {
    background-color: var(--maxMaxLightGray);
    width: 95%;
    border-radius: 10px;
    max-width: 1600px;
    margin: 0 auto;
    padding: 40px 20px 80px;
  }
  .funny-title {
    color: var(--black);
    font-size: 28px;
    font-weight: 700;
    margin-left: 12px;
  }
  .process-wrap {
    margin: 20px 0 40px;
  }
  .process-wrap hr {
    position: relative;
    margin: 30px auto 100px;
    border: 2px dashed var(--lightGreen);
    overflow: visible;
  }
  .process-wrap hr:before {
    position: absolute;
    top: -14px;
    left: 5%;
    color: var(--lightGreen);
    content: '❄';
    font-size: 30px;
    line-height: 1;
    transition: all 1s ease-in-out;
  }
  .process-wrap hr:hover:before {
    left: calc(95% - 20px);
  }
  .process-wrap >>> .el-collapse-item__header {
    border-bottom: unset;
    font-size: 20px;
    font-weight: 700;
    background-color: var(--maxMaxLightGray);
    color: var(--lightGreen);
    padding: 40px;
  }
  .process-wrap >>> .el-collapse-item__wrap {
    background-color: var(--maxMaxLightGray);
  }
  .process-wrap .el-collapse {
    border-top: unset;
    border-bottom: unset;
    border-radius: 10px;
    overflow: hidden;
  }
  .process-wrap >>> .el-collapse-item__wrap {
    border-bottom: unset;
  }
  .funny-item-title {
    text-align: center;
    margin: 0 10px;
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .funny-item-title:hover {
    text-overflow: unset;
    overflow: unset;
  }
  .funny-avatar {
    cursor: pointer;
    transition: all 0.5s;
    user-select: none;
  }
  .funny-avatar:hover {
    transform: rotate(360deg);
  }
 </style>
--- a/src/components/home.vue
+++ b/src/components/home.vue
@ -26,163 +26,53 @@
          <ul class="scroll-menu">
            <li @click="$router.push({path: '/'})">
              <div class="my-menu">
-                <svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
+                🏡 <span>首页</span>
                  <path d="M221.4 152.6h141.8V396h-141.8V152.6z" fill="#FAD996"></path>
                  <path
                    d="M363.4 152.6c-9-16.6-138.2-14.2-142 0-3 11.4-23.6 287 15.8 182.4 10.4-27.4 22.6-47.6 37.2-78.6 10.6-22.6 22-42.4 32.6-54.4 16.6-18.6 18 9.6 33.6 22.6 41.6 34.4 31.8-55.6 22.8-72z"
                    fill="#F9F8F7"></path>
                  <path
                    d="M834.2 851c0 24.8-20.2 45-45 45H234.8c-24.8 0-45-20.2-45-45v-370h1.2l321.2-270 321.2 270h0.6l0.2 370z"
                    fill="#FAD996"></path>
                  <path d="M833.4 481l-321.2-270-1.8 1.6V896h278.8c24.8 0 45-20.2 45-45l-0.2-370h-0.6z" fill="#F7C872"
                        p-id="16219"></path>
                  <path
                    d="M62 548L432.6 166.2s81.2-90.6 171.8 0c79 79 343.6 400 343.6 400s-55.4 41-125.2 14.2c-37.8-14.4-118.2-68-133.4-150.8-11-60.2-45.8 29-60.8-38.2-9.4-42.2-67.2-96.6-67.2-96.6s-48.4-55.4-100.2 0c-13.8 14.8-11.4 134.6-44 128-26.4-5.2-20-105.6-27-81.2-9.6 33-25 61-54.4 47.2-33.2-15.6-42.4 79.6-64.8 112.8-17.2 25.4-23.8-45.8-40.4-29.2-21.2 21-2.4 94-39.4 108s-132.8-2-129.2-32.4z"
                    fill="#F9F8F7"></path>
                  <path
                    d="M512 126.2v144c28.8 1 49.4 24.6 49.4 24.6s57.8 54.4 67.2 96.6c15 67.2 49.8-22 60.8 38.2 15.2 82.8 95.6 136.4 133.4 150.8 69.8 26.8 125.2-14.2 125.2-14.2s-264.6-321-343.6-400c-33.2-33.2-65.2-42-92.4-40z"
                    fill="#EFEBE8"></path>
                  <path d="M405.2 495h99.8v99.8h-99.8v-99.8zM405.2 609.2h99.8v99.8h-99.8v-99.8z" fill="#FB8A5D"></path>
                  <path d="M519 495h99.8v99.8h-99.8v-99.8zM519 609.2h99.8v99.8h-99.8v-99.8z" fill="#EA6D4B"></path>
                </svg>
                <span>&nbsp;首页</span>
              </div>
            </li>
            <li v-for="(menu, index) in $store.getters.navigationBar"
                @click="$router.push({path: '/sort', query: {sortId: menu.id, labelId: menu.labels[0].id}})"
                :key="index">
              <div class="my-menu">
-                <svg viewBox="0 0 1024 1024" width="18" height="18" style="vertical-align: -3px;">
+                📒 <span>{{ menu.sortName }}</span>
-                  <path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01"></path>
+              </div>
-                  <path
+            </li>
-                    d="M682.666667 341.333333a136.533333 136.533333 0 0 1 273.066666 0v546.133334a68.266667 68.266667 0 0 1-68.266666 68.266666h-204.8V341.333333z"
+
-                    fill="#FFAA44"></path>
+            <!-- 爱情买卖 -->
-                  <path
+            <li @click="$router.push({path: '/love'})">
-                    d="M68.266667 819.2a136.533333 136.533333 0 0 0 136.533333 136.533333h682.666667a68.266667 68.266667 0 0 1-68.266667-68.266666V204.8a136.533333 136.533333 0 0 0-136.533333-136.533333H204.8a136.533333 136.533333 0 0 0-136.533333 136.533333v614.4z"
+              <div class="my-menu">
-                    fill="#FF7744"></path>
+                💋 <span>爱情买卖</span>
                  <path
                    d="M187.733333 273.066667A51.2 51.2 0 0 1 238.933333 221.866667h68.266667a51.2 51.2 0 1 1 0 102.4H238.933333A51.2 51.2 0 0 1 187.733333 273.066667z m0 204.8A51.2 51.2 0 0 1 238.933333 426.666667h409.6a51.2 51.2 0 0 1 0 102.4H238.933333A51.2 51.2 0 0 1 187.733333 477.866667zM238.933333 631.466667a51.2 51.2 0 0 0 0 102.4h204.8a51.2 51.2 0 0 0 0-102.4H238.933333z"
                    fill="#FFFFFF"></path>
                </svg>
                <span>&nbsp;{{ menu.sortName }}</span>
              </div>
            </li>
            <!-- 聊天室 -->
            <li @click="goIm()">
              <div class="my-menu">
-                <svg viewBox="0 0 1024 1024" width="18" height="18" style="vertical-align: -3px;">
+                💬 <span>非礼勿言</span>
-                  <path
+              </div>
-                    d="M544.54784 628.16768a173.7216 173.7216 0 0 1 0-245.1712l158.6432-159.104a172.50816 172.50816 0 0 1 244.46464 0 173.7216 173.7216 0 0 1 0 245.17632L788.992 628.16768a172.50816 172.50816 0 0 1-244.44416 0z m-325.49888 324.608a173.71648 173.71648 0 0 1 0-245.1712l158.6432-159.104a172.50816 172.50816 0 0 1 244.46464 0 173.71648 173.71648 0 0 1 0 245.1712l-158.63808 159.09376a172.51328 172.51328 0 0 1-244.46976 0z"
+            </li>
-                    fill="#F4CA1C"></path>
+            <!-- 鬼畜全明星 -->
-                  <path
+            <li @click="$router.push({path: '/funny'})">
-                    d="M415.6416 567.72096a36.58752 36.58752 0 0 1-25.99936-10.80832 215.58272 215.58272 0 0 1-63.52896-149.15072A203.80672 203.80672 0 0 1 385.536 259.072l163.1744-163.7376c80.70656-80.9728 213.86752-79.104 296.82688 4.13696a215.61856 215.61856 0 0 1 63.53408 149.15072 203.776 203.776 0 0 1-59.392 148.67968l-105.2928 101.83168a36.8384 36.8384 0 0 1-51.03616-53.13024l104.79104-101.376a130.12992 130.12992 0 0 0 37.376-94.78144 142.06976 142.06976 0 0 0-41.984-98.21184c-54.30272-54.48192-140.8-56.32-192.82944-4.13696L437.51936 311.26016a130.50368 130.50368 0 0 0-37.888 95.26272 142.08512 142.08512 0 0 0 41.984 98.21184 36.97664 36.97664 0 0 1 0 52.18304 36.58752 36.58752 0 0 1-25.97376 10.8032z m-169.30816 346.34752a214.74304 214.74304 0 0 1-152.20736-63.67232c-82.85184-83.13856-84.81792-216.48384-4.46976-297.472l104.96-110.80704a36.82816 36.82816 0 1 1 53.30432 50.83648l-105.91232 111.79008c-52.0192 52.1984-50.176 138.99264 4.1216 193.47456s140.8 56.32 192.82432 4.13184l163.18976-163.74784a130.47808 130.47808 0 0 0 37.888-95.232 142.09536 142.09536 0 0 0-41.984-98.21696 36.83328 36.83328 0 0 1 51.9936-52.18304 215.6288 215.6288 0 0 1 63.53408 149.15584 203.81184 203.81184 0 0 1-59.392 148.67968L390.95296 854.528a203.08992 203.08992 0 0 1-144.61952 59.54048z"
+              <div class="my-menu">
-                    fill="#595BB3"></path>
+                🐔 <span>只因</span>
                </svg>
                <span>&nbsp;社交</span>
              </div>
            </li>
            <!-- 微言 -->
 <!--            <li @click="$router.push({path: '/weiYan'})">-->
 <!--              <div class="my-menu">-->
 <!--                <svg viewBox="0 0 1024 1024" width="18" height="18" style="vertical-align: -3px;">-->
 <!--                  <path-->
 <!--                    d="M252.8 862.9h-73.4c-6.8 0-12.4-5.6-12.4-12.4V134.4c0-6.8 5.6-12.4 12.4-12.4h73.4l5.3 6.8v728.8l-5.3 5.3z"-->
 <!--                    fill="#F2B843"></path>-->
 <!--                  <path d="M338.5 942l-42.9-18.1-42.8 18.1v-79.1l7.5-5.3h71.3l7 5.3-0.1 79.1z" fill="#EA800C"></path>-->
 <!--                  <path-->
 <!--                    d="M844.6 327.9h-40.7l-5.3-5.8v-93.3l5.3-7.2h40.7c6.8 0 12.4 5.6 12.4 12.4v81.5c0 6.9-5.6 12.4-12.4 12.4z"-->
 <!--                    fill="#F2B843"></path>-->
 <!--                  <path-->
 <!--                    d="M844.6 540.5h-40.7l-5.3-7.3v-90.6l5.3-8.4h40.7c6.8 0 12.4 5.6 12.4 12.4v81.5c0 6.8-5.6 12.4-12.4 12.4z"-->
 <!--                    fill="#EA800C"></path>-->
 <!--                  <path-->
 <!--                    d="M844.6 753h-40.7l-5.3-6.7v-92.1l5.3-7.5h40.7c6.8 0 12.4 5.6 12.4 12.4v81.5c0 6.8-5.6 12.4-12.4 12.4z"-->
 <!--                    fill="#2F9B77"></path>-->
 <!--                  <path d="M791.8 862.9h-539V122h539.1c6.7 0 12 5.4 12 12v716.8c0 6.7-5.4 12.1-12.1 12.1z"-->
 <!--                        fill="#3DC38A"></path>-->
 <!--                  <path-->
 <!--                    d="M680.3 661.1H343.7c-14 0-25.5-11.5-25.5-25.5s11.5-25.5 25.5-25.5h336.6c14 0 25.5 11.5 25.5 25.5s-11.5 25.5-25.5 25.5zM680.3 779.8H343.7c-14 0-25.5-11.5-25.5-25.5s11.5-25.5 25.5-25.5h336.6c14 0 25.5 11.5 25.5 25.5s-11.5 25.5-25.5 25.5z"-->
 <!--                    fill="#2F9B77"></path>-->
 <!--                  <path-->
 <!--                    d="M594.8 511.1c-79.2 45.7-180.5 18.6-226.3-60.6S350 270 429.2 224.2s180.5-18.6 226.3 60.6 18.5 180.6-60.7 226.3z"-->
 <!--                    fill="#3DC38A"></path>-->
 <!--                  <path-->
 <!--                    d="M523.7 318.1c-1.2 0.3-3.5 0.9-4.5 1.7-1.2 1 0.7 2.3 0 2.9-1.2 1-2.1 2.7-4.7 2.6-5.5-0.3-13.9-7.5-19-10.2 8.1-8.3-4.7-9.6-9.7-9.1-6.5 0.5-17.7 0-23.5 3.2-4.1 2.3-9.5 11.7-12.8 15.5-4.6 5.2-9.1 9.8-12.1 16-10.9 23 5.9 49.4 32.2 46.3 7.3-0.9 14.9-5.5 21.4 0.6 4.8 4.5 2.3 8.7 3.5 13.9 1.1 4.5 6.1 7.3 7.8 11.4 3.3 7.9 1.2 12.9-1.1 20.2-3.1 9.6 4.9 21 8 30.2 1.6 4.7 6.1 17.7 10.7 19.8 7.1 3.2 18.1-6.4 22.4-11.6 3.3-4.1 2.2-8.2 4.4-12 2.4-4.1 5.4-5.3 7.1-10.6 1.8-5.7 3.7-7.1 7.5-11.3 6.2-6.7 5.2-10.6 2.7-18.6-5.1-16.5 13.5-24.2 21.8-36.3 8.7-12.6-8.2-8.4-14.8-12.8-6.8-4.4-9.8-12.9-13.1-19.9s-6-17.5-11.4-23.3c-4.2-4.3-16.9-6.4-22.8-8.6zM609.2 428.8c-2.6 8.9-5.3 17.8-7.9 26.7-1.8 6.2-8.4 26.6-17.5 13.6-3.5-5-0.6-11.4 1.3-16 2.4-5.8-0.9-8.7 0.9-14.1 2-6.2 10-6.4 13.8-10.8 2.7-3 4.3-7.9 6.2-11.5 1 4 2.1 8.1 3.2 12.1z"-->
 <!--                    fill="#F2B843"></path>-->
 <!--                  <path-->
 <!--                    d="M655.4 284.9c-28.5-49.4-78.7-78.5-131.6-82.4l-21.6 27.2-46.4 16.3-12.5 30.2 19.2 26.9 2-5.7c3.4-9.5 12.4-15.8 22.5-15.8h31.7l36.4 12.8 12.5 12v7.6l17.4 33.4 5.1-1.9c11-4 20.9-10.4 29.2-18.7l-4.2-6.3c-1.4-2 0.1-4.7 2.5-4.7h10.2c3 0 5.8 1.3 7.7 3.6l8.3 9.7c0.8 0.9 1.4 2 1.8 3.1l9.1 25.2 4.4-4.4c2.7-2.7 4.1-6.5 4.2-10.4 0-3.1 1.4-6.1 3.7-8.2l3.4-3c0.8-0.8 1.8-1.4 2.8-1.8-3.6-15.3-9.5-30.4-17.8-44.7zM407.6 291.3l7.9-8.5c5.8-6.2 7.4-15.2 4.2-23-3.4-8.3-10.9-13.6-19.2-14.8-29.2 26.5-47.4 62.2-52.6 100 6.2 5.4 12.6 11.2 12.6 11.7-0.1 1 23.2-2.9 23.2-2.9l-12-17.5 17.2-12.3 18.7-32.7zM423.8 456.4c7.5-2.4 11.6-10.4 9.1-17.9l-2.1-6.6c-0.9-2.9-0.9-5.9 0-8.8 2.7-8.1-2.4-16.8-10.8-18.4l-16.8-3.3-30.6-23.2-25.3 8.2c2.5 21.9 9.4 43.7 21.2 64.1 10.9 18.8 24.9 34.7 41 47.4l7.5-39.3 6.8-2.2z"-->
 <!--                    fill="#2F9B77"></path>-->
 <!--                </svg>-->
 <!--                <span>&nbsp;微言</span>-->
 <!--              </div>-->
 <!--            </li>-->
            <!-- 留言 -->
            <li @click="$router.push({path: '/message'})">
              <div class="my-menu">
-                <svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
+                📪 <span>留言</span>
                  <path
                    d="M113.834667 291.84v449.194667a29.013333 29.013333 0 0 0 28.842666 29.013333h252.928v90.453333l160.597334-90.453333h252.928a29.013333 29.013333 0 0 0 29.013333-29.013333V291.84a29.013333 29.013333 0 0 0-29.013333-29.013333h-665.6a29.013333 29.013333 0 0 0-29.696 29.013333z"
                    fill="#FFDEAD"></path>
                  <path
                    d="M809.130667 262.826667h-665.6a29.013333 29.013333 0 0 0-28.842667 29.013333v40.106667a29.013333 29.013333 0 0 1 28.842667-29.013334h665.6a29.013333 29.013333 0 0 1 29.013333 29.013334V291.84a29.013333 29.013333 0 0 0-29.013333-29.013333z"
                    fill="#FFF3DB"></path>
                  <path
                    d="M556.202667 770.048h252.928a29.013333 29.013333 0 0 0 29.013333-29.013333V362.837333s-59.733333 392.533333-724.309333 314.709334v63.488a29.013333 29.013333 0 0 0 28.842666 29.013333h253.098667v90.453333z"
                    fill="#F2C182"></path>
                  <path
                    d="M619.008 632.32l101.888-35.157333-131.754667-76.117334 29.866667 111.274667zM891.904 148.992a61.44 61.44 0 0 0-84.138667 22.528l-19.968 34.133333 106.666667 61.610667 19.968-34.133333a61.781333 61.781333 0 0 0-22.528-84.138667z"
                    fill="#69BAF9"></path>
                  <path d="M775.338667 198.775467l131.669333 76.032-186.026667 322.218666-131.6864-76.032z"
                        fill="#F7FBFF"></path>
                  <path
                    d="M775.168 198.826667l-5.290667 9.216 59.221334 34.133333a34.133333 34.133333 0 0 1 12.458666 46.592l-139.946666 242.346667a34.133333 34.133333 0 0 1-46.762667 12.629333l-59.050667-34.133333-6.656 11.434666 88.746667 51.2L720.896 597.333333l186.026667-322.56z"
                    fill="#D8E3F0"></path>
                  <path
                    d="M616.448 622.592l2.56 9.728 101.888-35.157333-44.885333-25.941334-59.562667 51.370667zM891.904 148.992c-1.024 0-2.218667-0.853333-3.242667-1.536A61.610667 61.610667 0 0 1 887.466667 204.8l-19.968 34.133333-73.728-42.496-5.12 8.704 106.666666 61.610667 19.968-34.133333a61.781333 61.781333 0 0 0-23.381333-83.626667z"
                    fill="#599ED4"></path>
                  <path
                    d="M265.898667 417.621333H494.933333a17.066667 17.066667 0 1 0 0-34.133333H265.898667a17.066667 17.066667 0 1 0 0 34.133333zM265.898667 533.504H494.933333a17.066667 17.066667 0 0 0 0-34.133333H265.898667a17.066667 17.066667 0 0 0 0 34.133333z"
                    fill="#3D3D63"></path>
                  <path
                    d="M959.488 354.645333a99.84 99.84 0 0 0-23.722667-127.488 78.677333 78.677333 0 0 0-142.848-64.170666l-11.605333 20.138666a17.066667 17.066667 0 0 0-20.821333 7.168l-32.085334 55.466667H142.677333a46.250667 46.250667 0 0 0-45.909333 46.08v449.194667a46.08 46.08 0 0 0 45.909333 46.08h236.032v73.386666a17.066667 17.066667 0 0 0 8.362667 14.848 17.066667 17.066667 0 0 0 8.704 2.218667 17.066667 17.066667 0 0 0 8.362667-2.218667l156.672-88.234666h248.32a46.08 46.08 0 0 0 46.08-46.08V398.677333L921.6 283.306667a17.066667 17.066667 0 0 0-4.266667-21.504l1.877334-3.413334a65.365333 65.365333 0 0 1 10.410666 79.189334l-53.077333 91.989333a56.832 56.832 0 0 0 20.821333 77.653333 17.066667 17.066667 0 0 0 24.234667-6.314666 17.066667 17.066667 0 0 0-6.997333-23.04 23.04 23.04 0 0 1-8.362667-31.061334z m-138.410667 386.389334a11.946667 11.946667 0 0 1-11.946666 11.946666H556.202667a17.066667 17.066667 0 0 0-8.362667 2.218667l-134.997333 76.117333v-61.269333a17.066667 17.066667 0 0 0-17.066667-17.066667H142.677333a11.946667 11.946667 0 0 1-11.776-11.946666V291.84a11.946667 11.946667 0 0 1 11.776-11.946667h565.930667L574.464 512a17.066667 17.066667 0 0 0-1.706667 12.970667L597.333333 615.253333H265.898667a17.066667 17.066667 0 1 0 0 34.133334h352.938666a17.066667 17.066667 0 0 0 5.802667 0l102.4-35.328a17.066667 17.066667 0 0 0 9.216-7.509334l85.333333-147.968z m-204.8-184.661334l63.829334 36.864-49.322667 17.066667z m206.848-170.666666v1.365333l-108.373333 186.709333-102.4-59.050666L781.482667 221.866667l102.4 59.050666z m76.458667-161.28L887.466667 244.224l-76.970667-44.373333 11.264-19.797334a44.544 44.544 0 1 1 77.141333 44.544z"
                    fill="#3D3D63"></path>
                </svg>
                <span>&nbsp;留言</span>
              </div>
            </li>
            <!-- 友人帐 -->
            <li @click="$router.push({path: '/friend'})">
              <div class="my-menu">
-                <span>💃&nbsp;友人帐</span>
+                💃 <span>友人帐</span>
              </div>
            </li>
            <!-- 关于 -->
            <li @click="$router.push({path: '/about'})">
              <div class="my-menu">
-                <svg viewBox="0 0 1136 1024" width="22" height="22" style="vertical-align: -5px;">
+                🐟 <span>关于</span>
                  <path
                    d="M255.015385 409.796923s-113.821538-16.344615-106.338462 80.147692c7.483077 96.295385 106.338462 78.769231 106.338462 78.769231s66.363077 252.652308 332.8 257.772308 346.584615-260.135385 346.584615-260.135385 106.338462 32.492308 116.381538-76.209231-111.458462-81.526154-111.458461-81.526153S888.123077 155.766154 587.815385 153.403077s-332.8 256.393846-332.8 256.393846z"
                    fill="#FFC0A9"></path>
                  <path
                    d="M595.101538 846.375385h-7.68c-145.526154-2.756923-233.550769-76.8-281.6-138.436923-37.021538-47.458462-56.516923-94.326154-64.984615-118.153847-19.101538 0.393846-49.821538-2.56-74.633846-21.858461-22.252308-17.132308-34.855385-42.929231-37.415385-76.603077-2.56-31.901538 6.104615-57.304615 25.403077-75.421539 25.206154-23.630769 62.227692-27.569231 84.48-27.175384 5.907692-25.206154 20.283077-72.467692 53.76-119.729231 44.504615-62.621538 131.544615-137.058462 295.384616-135.68 163.052308 1.378462 255.212308 74.830769 303.852307 136.270769 36.627692 46.276923 54.547692 92.16 62.227693 116.775385 23.236923-2.166154 62.424615-1.378462 89.403077 22.252308 21.267692 18.707692 30.523077 46.670769 27.175384 83.101538-3.544615 38.006154-17.92 65.772308-42.732308 82.510769-27.372308 18.313846-60.258462 17.723077-80.344615 14.966154-9.649231 25.009231-31.704615 73.255385-70.892308 121.501539-72.073846 88.812308-169.353846 135.68-281.403077 135.68zM269.784615 545.673846l4.726154 17.92c0.196923 0.590769 16.541538 61.046154 63.803077 120.910769 62.227692 78.966154 146.313846 119.926154 249.895385 121.895385 248.32 4.529231 326.104615-243.396923 326.892307-245.956923l5.71077-19.298462 19.298461 5.907693c0.393846 0 39.384615 11.421538 65.378462-6.104616 14.375385-9.649231 22.843077-27.569231 25.009231-52.775384 2.166154-22.843077-2.363077-39.384615-13.587693-49.23077-20.086154-17.723077-59.864615-13.587692-73.452307-10.633846l-19.889231 4.529231-4.135385-20.086154c-0.196923-0.590769-12.996923-60.652308-60.258461-119.729231-62.818462-78.375385-154.387692-118.744615-271.753847-119.72923-117.76-0.984615-205.784615 38.990769-262.498461 118.744615-42.338462 59.667692-50.215385 119.532308-50.215385 120.123077l-2.56 20.283077-20.086154-2.953846c-13.193846-1.772308-51.593846-2.56-70.892307 15.556923-10.043077 9.452308-14.375385 23.630769-12.8 43.126154 1.772308 22.252308 8.861538 38.006154 22.055384 48.04923 23.827692 18.510769 60.455385 12.603077 60.849231 12.603077l18.510769-3.150769z"
                    fill="#493B4E"></path>
                  <path
                    d="M481.069296 499.027638a35.050906 35.050906 0 1 0 3.652962-70.006569 35.050906 35.050906 0 1 0-3.652962 70.006569Z"
                    fill="#493B4E"></path>
                  <path
                    d="M704.993567 510.606399a35.050906 35.050906 0 1 0 3.652961-70.00657 35.050906 35.050906 0 1 0-3.652961 70.00657Z"
                    fill="#493B4E"></path>
                  <path
                    d="M537.6 597.464615s-5.710769 50.806154 48.836923 54.35077c54.547692 3.544615 54.547692-45.489231 54.547692-45.489231s37.021538-31.507692 50.412308 4.332308c13.390769 35.643077-40.172308 85.858462-95.113846 86.843076s-115.003077-41.550769-109.686154-97.476923c0-0.196923 19.495385-36.627692 51.003077-2.56z"
                    fill="#493B4E"></path>
                  <path
                    d="M634.092308 172.307692s-118.350769 14.966154-93.932308 70.301539c24.418462 55.335385 81.329231 61.44 81.329231 61.44s119.926154 18.116923 33.28-54.547693c0 0-23.04 7.68-41.747693 2.166154s-21.070769-49.033846 4.923077-52.972307 98.067692 13.587692 103.384616 49.624615 41.353846 68.923077-61.243077 112.049231c0 0-144.738462 10.043077-162.264616-112.836923 0 0-17.329231-22.449231 17.132308-73.058462 34.264615-50.806154 119.138462-2.166154 119.138462-2.166154z"
                    fill="#493B4E"></path>
                </svg>
                <span>&nbsp;关于</span>
              </div>
            </li>
            <!-- 个人中心 -->
@ -220,8 +110,8 @@
    <!-- 回到顶部按钮 -->
    <div href="#" class="cd-top" v-if="!$common.mobile()" @click="toTop()"></div>
-    <div class="toolButton" v-show="toolButton">
+    <div class="toolButton">
-      <div class="backTop" v-if="$common.mobile()" @click="toTop()">
+      <div class="backTop" v-if="$common.mobile() && toolButton" @click="toTop()">
        <!-- 回到顶部按钮 -->
        <svg viewBox="0 0 1024 1024" width="50" height="50">
          <path
@ -234,8 +124,8 @@
      </div>
      <el-popover placement="left"
-                  :close-delay="100"
+                  :close-delay="500"
-                  trigger="click">
+                  trigger="hover">
        <div slot="reference">
          <i class="fa fa-cog iconRotate" aria-hidden="true"></i>
        </div>
@ -268,163 +158,53 @@
        <ul class="small-menu">
          <li @click="smallMenu({path: '/'})">
            <div>
-              <svg viewBox="0 0 1024 1024" width="22" height="22" style="vertical-align: -3px;">
+              🏡 <span>首页</span>
                <path d="M221.4 152.6h141.8V396h-141.8V152.6z" fill="#FAD996"></path>
                <path
                  d="M363.4 152.6c-9-16.6-138.2-14.2-142 0-3 11.4-23.6 287 15.8 182.4 10.4-27.4 22.6-47.6 37.2-78.6 10.6-22.6 22-42.4 32.6-54.4 16.6-18.6 18 9.6 33.6 22.6 41.6 34.4 31.8-55.6 22.8-72z"
                  fill="#F9F8F7"></path>
                <path
                  d="M834.2 851c0 24.8-20.2 45-45 45H234.8c-24.8 0-45-20.2-45-45v-370h1.2l321.2-270 321.2 270h0.6l0.2 370z"
                  fill="#FAD996"></path>
                <path d="M833.4 481l-321.2-270-1.8 1.6V896h278.8c24.8 0 45-20.2 45-45l-0.2-370h-0.6z" fill="#F7C872"
                      p-id="16219"></path>
                <path
                  d="M62 548L432.6 166.2s81.2-90.6 171.8 0c79 79 343.6 400 343.6 400s-55.4 41-125.2 14.2c-37.8-14.4-118.2-68-133.4-150.8-11-60.2-45.8 29-60.8-38.2-9.4-42.2-67.2-96.6-67.2-96.6s-48.4-55.4-100.2 0c-13.8 14.8-11.4 134.6-44 128-26.4-5.2-20-105.6-27-81.2-9.6 33-25 61-54.4 47.2-33.2-15.6-42.4 79.6-64.8 112.8-17.2 25.4-23.8-45.8-40.4-29.2-21.2 21-2.4 94-39.4 108s-132.8-2-129.2-32.4z"
                  fill="#F9F8F7"></path>
                <path
                  d="M512 126.2v144c28.8 1 49.4 24.6 49.4 24.6s57.8 54.4 67.2 96.6c15 67.2 49.8-22 60.8 38.2 15.2 82.8 95.6 136.4 133.4 150.8 69.8 26.8 125.2-14.2 125.2-14.2s-264.6-321-343.6-400c-33.2-33.2-65.2-42-92.4-40z"
                  fill="#EFEBE8"></path>
                <path d="M405.2 495h99.8v99.8h-99.8v-99.8zM405.2 609.2h99.8v99.8h-99.8v-99.8z" fill="#FB8A5D"></path>
                <path d="M519 495h99.8v99.8h-99.8v-99.8zM519 609.2h99.8v99.8h-99.8v-99.8z" fill="#EA6D4B"></path>
              </svg>
              <span>&nbsp;首页</span>
            </div>
          </li>
          <li v-for="(menu, index) in $store.getters.navigationBar"
              @click="smallMenu({path: '/sort', query: {sortId: menu.id, labelId: menu.labels[0].id}})"
              :key="index">
            <div>
-              <svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
+              📒 <span>{{ menu.sortName }}</span>
-                <path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01"></path>
+            </div>
-                <path
+          </li>
-                  d="M682.666667 341.333333a136.533333 136.533333 0 0 1 273.066666 0v546.133334a68.266667 68.266667 0 0 1-68.266666 68.266666h-204.8V341.333333z"
+
-                  fill="#FFAA44"></path>
+          <!-- 爱情买卖 -->
-                <path
+          <li @click="smallMenu({path: '/love'})">
-                  d="M68.266667 819.2a136.533333 136.533333 0 0 0 136.533333 136.533333h682.666667a68.266667 68.266667 0 0 1-68.266667-68.266666V204.8a136.533333 136.533333 0 0 0-136.533333-136.533333H204.8a136.533333 136.533333 0 0 0-136.533333 136.533333v614.4z"
+            <div>
-                  fill="#FF7744"></path>
+              💋 <span>爱情买卖</span>
                <path
                  d="M187.733333 273.066667A51.2 51.2 0 0 1 238.933333 221.866667h68.266667a51.2 51.2 0 1 1 0 102.4H238.933333A51.2 51.2 0 0 1 187.733333 273.066667z m0 204.8A51.2 51.2 0 0 1 238.933333 426.666667h409.6a51.2 51.2 0 0 1 0 102.4H238.933333A51.2 51.2 0 0 1 187.733333 477.866667zM238.933333 631.466667a51.2 51.2 0 0 0 0 102.4h204.8a51.2 51.2 0 0 0 0-102.4H238.933333z"
                  fill="#FFFFFF"></path>
              </svg>
              <span>&nbsp;{{ menu.sortName }}</span>
            </div>
          </li>
          <!-- 聊天室 -->
          <li @click="goIm()">
            <div>
-              <svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
+              💬 <span>非礼勿言</span>
-                <path
+            </div>
-                  d="M544.54784 628.16768a173.7216 173.7216 0 0 1 0-245.1712l158.6432-159.104a172.50816 172.50816 0 0 1 244.46464 0 173.7216 173.7216 0 0 1 0 245.17632L788.992 628.16768a172.50816 172.50816 0 0 1-244.44416 0z m-325.49888 324.608a173.71648 173.71648 0 0 1 0-245.1712l158.6432-159.104a172.50816 172.50816 0 0 1 244.46464 0 173.71648 173.71648 0 0 1 0 245.1712l-158.63808 159.09376a172.51328 172.51328 0 0 1-244.46976 0z"
+          </li>
-                  fill="#F4CA1C"></path>
+          <!-- 鬼畜全明星 -->
-                <path
+          <li @click="smallMenu({path: '/funny'})">
-                  d="M415.6416 567.72096a36.58752 36.58752 0 0 1-25.99936-10.80832 215.58272 215.58272 0 0 1-63.52896-149.15072A203.80672 203.80672 0 0 1 385.536 259.072l163.1744-163.7376c80.70656-80.9728 213.86752-79.104 296.82688 4.13696a215.61856 215.61856 0 0 1 63.53408 149.15072 203.776 203.776 0 0 1-59.392 148.67968l-105.2928 101.83168a36.8384 36.8384 0 0 1-51.03616-53.13024l104.79104-101.376a130.12992 130.12992 0 0 0 37.376-94.78144 142.06976 142.06976 0 0 0-41.984-98.21184c-54.30272-54.48192-140.8-56.32-192.82944-4.13696L437.51936 311.26016a130.50368 130.50368 0 0 0-37.888 95.26272 142.08512 142.08512 0 0 0 41.984 98.21184 36.97664 36.97664 0 0 1 0 52.18304 36.58752 36.58752 0 0 1-25.97376 10.8032z m-169.30816 346.34752a214.74304 214.74304 0 0 1-152.20736-63.67232c-82.85184-83.13856-84.81792-216.48384-4.46976-297.472l104.96-110.80704a36.82816 36.82816 0 1 1 53.30432 50.83648l-105.91232 111.79008c-52.0192 52.1984-50.176 138.99264 4.1216 193.47456s140.8 56.32 192.82432 4.13184l163.18976-163.74784a130.47808 130.47808 0 0 0 37.888-95.232 142.09536 142.09536 0 0 0-41.984-98.21696 36.83328 36.83328 0 0 1 51.9936-52.18304 215.6288 215.6288 0 0 1 63.53408 149.15584 203.81184 203.81184 0 0 1-59.392 148.67968L390.95296 854.528a203.08992 203.08992 0 0 1-144.61952 59.54048z"
+            <div>
-                  fill="#595BB3"></path>
+              🐔 <span>只因</span>
              </svg>
              <span>&nbsp;社交</span>
            </div>
          </li>
          <!-- 微言 -->
 <!--          <li @click="smallMenu({path: '/weiYan'})">-->
 <!--            <div>-->
 <!--              <svg viewBox="0 0 1024 1024" width="24" height="24" style="vertical-align: -3px;">-->
 <!--                <path-->
 <!--                  d="M252.8 862.9h-73.4c-6.8 0-12.4-5.6-12.4-12.4V134.4c0-6.8 5.6-12.4 12.4-12.4h73.4l5.3 6.8v728.8l-5.3 5.3z"-->
 <!--                  fill="#F2B843"></path>-->
 <!--                <path d="M338.5 942l-42.9-18.1-42.8 18.1v-79.1l7.5-5.3h71.3l7 5.3-0.1 79.1z" fill="#EA800C"></path>-->
 <!--                <path-->
 <!--                  d="M844.6 327.9h-40.7l-5.3-5.8v-93.3l5.3-7.2h40.7c6.8 0 12.4 5.6 12.4 12.4v81.5c0 6.9-5.6 12.4-12.4 12.4z"-->
 <!--                  fill="#F2B843"></path>-->
 <!--                <path-->
 <!--                  d="M844.6 540.5h-40.7l-5.3-7.3v-90.6l5.3-8.4h40.7c6.8 0 12.4 5.6 12.4 12.4v81.5c0 6.8-5.6 12.4-12.4 12.4z"-->
 <!--                  fill="#EA800C"></path>-->
 <!--                <path-->
 <!--                  d="M844.6 753h-40.7l-5.3-6.7v-92.1l5.3-7.5h40.7c6.8 0 12.4 5.6 12.4 12.4v81.5c0 6.8-5.6 12.4-12.4 12.4z"-->
 <!--                  fill="#2F9B77"></path>-->
 <!--                <path d="M791.8 862.9h-539V122h539.1c6.7 0 12 5.4 12 12v716.8c0 6.7-5.4 12.1-12.1 12.1z"-->
 <!--                      fill="#3DC38A"></path>-->
 <!--                <path-->
 <!--                  d="M680.3 661.1H343.7c-14 0-25.5-11.5-25.5-25.5s11.5-25.5 25.5-25.5h336.6c14 0 25.5 11.5 25.5 25.5s-11.5 25.5-25.5 25.5zM680.3 779.8H343.7c-14 0-25.5-11.5-25.5-25.5s11.5-25.5 25.5-25.5h336.6c14 0 25.5 11.5 25.5 25.5s-11.5 25.5-25.5 25.5z"-->
 <!--                  fill="#2F9B77"></path>-->
 <!--                <path-->
 <!--                  d="M594.8 511.1c-79.2 45.7-180.5 18.6-226.3-60.6S350 270 429.2 224.2s180.5-18.6 226.3 60.6 18.5 180.6-60.7 226.3z"-->
 <!--                  fill="#3DC38A"></path>-->
 <!--                <path-->
 <!--                  d="M523.7 318.1c-1.2 0.3-3.5 0.9-4.5 1.7-1.2 1 0.7 2.3 0 2.9-1.2 1-2.1 2.7-4.7 2.6-5.5-0.3-13.9-7.5-19-10.2 8.1-8.3-4.7-9.6-9.7-9.1-6.5 0.5-17.7 0-23.5 3.2-4.1 2.3-9.5 11.7-12.8 15.5-4.6 5.2-9.1 9.8-12.1 16-10.9 23 5.9 49.4 32.2 46.3 7.3-0.9 14.9-5.5 21.4 0.6 4.8 4.5 2.3 8.7 3.5 13.9 1.1 4.5 6.1 7.3 7.8 11.4 3.3 7.9 1.2 12.9-1.1 20.2-3.1 9.6 4.9 21 8 30.2 1.6 4.7 6.1 17.7 10.7 19.8 7.1 3.2 18.1-6.4 22.4-11.6 3.3-4.1 2.2-8.2 4.4-12 2.4-4.1 5.4-5.3 7.1-10.6 1.8-5.7 3.7-7.1 7.5-11.3 6.2-6.7 5.2-10.6 2.7-18.6-5.1-16.5 13.5-24.2 21.8-36.3 8.7-12.6-8.2-8.4-14.8-12.8-6.8-4.4-9.8-12.9-13.1-19.9s-6-17.5-11.4-23.3c-4.2-4.3-16.9-6.4-22.8-8.6zM609.2 428.8c-2.6 8.9-5.3 17.8-7.9 26.7-1.8 6.2-8.4 26.6-17.5 13.6-3.5-5-0.6-11.4 1.3-16 2.4-5.8-0.9-8.7 0.9-14.1 2-6.2 10-6.4 13.8-10.8 2.7-3 4.3-7.9 6.2-11.5 1 4 2.1 8.1 3.2 12.1z"-->
 <!--                  fill="#F2B843"></path>-->
 <!--                <path-->
 <!--                  d="M655.4 284.9c-28.5-49.4-78.7-78.5-131.6-82.4l-21.6 27.2-46.4 16.3-12.5 30.2 19.2 26.9 2-5.7c3.4-9.5 12.4-15.8 22.5-15.8h31.7l36.4 12.8 12.5 12v7.6l17.4 33.4 5.1-1.9c11-4 20.9-10.4 29.2-18.7l-4.2-6.3c-1.4-2 0.1-4.7 2.5-4.7h10.2c3 0 5.8 1.3 7.7 3.6l8.3 9.7c0.8 0.9 1.4 2 1.8 3.1l9.1 25.2 4.4-4.4c2.7-2.7 4.1-6.5 4.2-10.4 0-3.1 1.4-6.1 3.7-8.2l3.4-3c0.8-0.8 1.8-1.4 2.8-1.8-3.6-15.3-9.5-30.4-17.8-44.7zM407.6 291.3l7.9-8.5c5.8-6.2 7.4-15.2 4.2-23-3.4-8.3-10.9-13.6-19.2-14.8-29.2 26.5-47.4 62.2-52.6 100 6.2 5.4 12.6 11.2 12.6 11.7-0.1 1 23.2-2.9 23.2-2.9l-12-17.5 17.2-12.3 18.7-32.7zM423.8 456.4c7.5-2.4 11.6-10.4 9.1-17.9l-2.1-6.6c-0.9-2.9-0.9-5.9 0-8.8 2.7-8.1-2.4-16.8-10.8-18.4l-16.8-3.3-30.6-23.2-25.3 8.2c2.5 21.9 9.4 43.7 21.2 64.1 10.9 18.8 24.9 34.7 41 47.4l7.5-39.3 6.8-2.2z"-->
 <!--                  fill="#2F9B77"></path>-->
 <!--              </svg>-->
 <!--              <span>&nbsp;微言</span>-->
 <!--            </div>-->
 <!--          </li>-->
          <!-- 留言 -->
          <li @click="smallMenu({path: '/message'})">
            <div>
-              <svg viewBox="0 0 1024 1024" width="24" height="24" style="vertical-align: -3px;">
+              📪 <span>留言</span>
                <path
                  d="M113.834667 291.84v449.194667a29.013333 29.013333 0 0 0 28.842666 29.013333h252.928v90.453333l160.597334-90.453333h252.928a29.013333 29.013333 0 0 0 29.013333-29.013333V291.84a29.013333 29.013333 0 0 0-29.013333-29.013333h-665.6a29.013333 29.013333 0 0 0-29.696 29.013333z"
                  fill="#FFDEAD"></path>
                <path
                  d="M809.130667 262.826667h-665.6a29.013333 29.013333 0 0 0-28.842667 29.013333v40.106667a29.013333 29.013333 0 0 1 28.842667-29.013334h665.6a29.013333 29.013333 0 0 1 29.013333 29.013334V291.84a29.013333 29.013333 0 0 0-29.013333-29.013333z"
                  fill="#FFF3DB"></path>
                <path
                  d="M556.202667 770.048h252.928a29.013333 29.013333 0 0 0 29.013333-29.013333V362.837333s-59.733333 392.533333-724.309333 314.709334v63.488a29.013333 29.013333 0 0 0 28.842666 29.013333h253.098667v90.453333z"
                  fill="#F2C182"></path>
                <path
                  d="M619.008 632.32l101.888-35.157333-131.754667-76.117334 29.866667 111.274667zM891.904 148.992a61.44 61.44 0 0 0-84.138667 22.528l-19.968 34.133333 106.666667 61.610667 19.968-34.133333a61.781333 61.781333 0 0 0-22.528-84.138667z"
                  fill="#69BAF9"></path>
                <path d="M775.338667 198.775467l131.669333 76.032-186.026667 322.218666-131.6864-76.032z"
                      fill="#F7FBFF"></path>
                <path
                  d="M775.168 198.826667l-5.290667 9.216 59.221334 34.133333a34.133333 34.133333 0 0 1 12.458666 46.592l-139.946666 242.346667a34.133333 34.133333 0 0 1-46.762667 12.629333l-59.050667-34.133333-6.656 11.434666 88.746667 51.2L720.896 597.333333l186.026667-322.56z"
                  fill="#D8E3F0"></path>
                <path
                  d="M616.448 622.592l2.56 9.728 101.888-35.157333-44.885333-25.941334-59.562667 51.370667zM891.904 148.992c-1.024 0-2.218667-0.853333-3.242667-1.536A61.610667 61.610667 0 0 1 887.466667 204.8l-19.968 34.133333-73.728-42.496-5.12 8.704 106.666666 61.610667 19.968-34.133333a61.781333 61.781333 0 0 0-23.381333-83.626667z"
                  fill="#599ED4"></path>
                <path
                  d="M265.898667 417.621333H494.933333a17.066667 17.066667 0 1 0 0-34.133333H265.898667a17.066667 17.066667 0 1 0 0 34.133333zM265.898667 533.504H494.933333a17.066667 17.066667 0 0 0 0-34.133333H265.898667a17.066667 17.066667 0 0 0 0 34.133333z"
                  fill="#3D3D63"></path>
                <path
                  d="M959.488 354.645333a99.84 99.84 0 0 0-23.722667-127.488 78.677333 78.677333 0 0 0-142.848-64.170666l-11.605333 20.138666a17.066667 17.066667 0 0 0-20.821333 7.168l-32.085334 55.466667H142.677333a46.250667 46.250667 0 0 0-45.909333 46.08v449.194667a46.08 46.08 0 0 0 45.909333 46.08h236.032v73.386666a17.066667 17.066667 0 0 0 8.362667 14.848 17.066667 17.066667 0 0 0 8.704 2.218667 17.066667 17.066667 0 0 0 8.362667-2.218667l156.672-88.234666h248.32a46.08 46.08 0 0 0 46.08-46.08V398.677333L921.6 283.306667a17.066667 17.066667 0 0 0-4.266667-21.504l1.877334-3.413334a65.365333 65.365333 0 0 1 10.410666 79.189334l-53.077333 91.989333a56.832 56.832 0 0 0 20.821333 77.653333 17.066667 17.066667 0 0 0 24.234667-6.314666 17.066667 17.066667 0 0 0-6.997333-23.04 23.04 23.04 0 0 1-8.362667-31.061334z m-138.410667 386.389334a11.946667 11.946667 0 0 1-11.946666 11.946666H556.202667a17.066667 17.066667 0 0 0-8.362667 2.218667l-134.997333 76.117333v-61.269333a17.066667 17.066667 0 0 0-17.066667-17.066667H142.677333a11.946667 11.946667 0 0 1-11.776-11.946666V291.84a11.946667 11.946667 0 0 1 11.776-11.946667h565.930667L574.464 512a17.066667 17.066667 0 0 0-1.706667 12.970667L597.333333 615.253333H265.898667a17.066667 17.066667 0 1 0 0 34.133334h352.938666a17.066667 17.066667 0 0 0 5.802667 0l102.4-35.328a17.066667 17.066667 0 0 0 9.216-7.509334l85.333333-147.968z m-204.8-184.661334l63.829334 36.864-49.322667 17.066667z m206.848-170.666666v1.365333l-108.373333 186.709333-102.4-59.050666L781.482667 221.866667l102.4 59.050666z m76.458667-161.28L887.466667 244.224l-76.970667-44.373333 11.264-19.797334a44.544 44.544 0 1 1 77.141333 44.544z"
                  fill="#3D3D63"></path>
              </svg>
              <span>&nbsp;留言</span>
            </div>
          </li>
          <!-- 友人帐 -->
          <li @click="smallMenu({path: '/friend'})">
            <div>
-              <span>💃&nbsp;友人帐</span>
+              💃 <span>友人帐</span>
            </div>
          </li>
          <!-- 关于 -->
          <li @click="smallMenu({path: '/about'})">
            <div>
-              <svg viewBox="0 0 1136 1024" width="26" height="26" style="margin-left: -5px;vertical-align: -5px;">
+              🐟 <span>关于</span>
                <path
                  d="M255.015385 409.796923s-113.821538-16.344615-106.338462 80.147692c7.483077 96.295385 106.338462 78.769231 106.338462 78.769231s66.363077 252.652308 332.8 257.772308 346.584615-260.135385 346.584615-260.135385 106.338462 32.492308 116.381538-76.209231-111.458462-81.526154-111.458461-81.526153S888.123077 155.766154 587.815385 153.403077s-332.8 256.393846-332.8 256.393846z"
                  fill="#FFC0A9"></path>
                <path
                  d="M595.101538 846.375385h-7.68c-145.526154-2.756923-233.550769-76.8-281.6-138.436923-37.021538-47.458462-56.516923-94.326154-64.984615-118.153847-19.101538 0.393846-49.821538-2.56-74.633846-21.858461-22.252308-17.132308-34.855385-42.929231-37.415385-76.603077-2.56-31.901538 6.104615-57.304615 25.403077-75.421539 25.206154-23.630769 62.227692-27.569231 84.48-27.175384 5.907692-25.206154 20.283077-72.467692 53.76-119.729231 44.504615-62.621538 131.544615-137.058462 295.384616-135.68 163.052308 1.378462 255.212308 74.830769 303.852307 136.270769 36.627692 46.276923 54.547692 92.16 62.227693 116.775385 23.236923-2.166154 62.424615-1.378462 89.403077 22.252308 21.267692 18.707692 30.523077 46.670769 27.175384 83.101538-3.544615 38.006154-17.92 65.772308-42.732308 82.510769-27.372308 18.313846-60.258462 17.723077-80.344615 14.966154-9.649231 25.009231-31.704615 73.255385-70.892308 121.501539-72.073846 88.812308-169.353846 135.68-281.403077 135.68zM269.784615 545.673846l4.726154 17.92c0.196923 0.590769 16.541538 61.046154 63.803077 120.910769 62.227692 78.966154 146.313846 119.926154 249.895385 121.895385 248.32 4.529231 326.104615-243.396923 326.892307-245.956923l5.71077-19.298462 19.298461 5.907693c0.393846 0 39.384615 11.421538 65.378462-6.104616 14.375385-9.649231 22.843077-27.569231 25.009231-52.775384 2.166154-22.843077-2.363077-39.384615-13.587693-49.23077-20.086154-17.723077-59.864615-13.587692-73.452307-10.633846l-19.889231 4.529231-4.135385-20.086154c-0.196923-0.590769-12.996923-60.652308-60.258461-119.729231-62.818462-78.375385-154.387692-118.744615-271.753847-119.72923-117.76-0.984615-205.784615 38.990769-262.498461 118.744615-42.338462 59.667692-50.215385 119.532308-50.215385 120.123077l-2.56 20.283077-20.086154-2.953846c-13.193846-1.772308-51.593846-2.56-70.892307 15.556923-10.043077 9.452308-14.375385 23.630769-12.8 43.126154 1.772308 22.252308 8.861538 38.006154 22.055384 48.04923 23.827692 18.510769 60.455385 12.603077 60.849231 12.603077l18.510769-3.150769z"
                  fill="#493B4E"></path>
                <path
                  d="M481.069296 499.027638a35.050906 35.050906 0 1 0 3.652962-70.006569 35.050906 35.050906 0 1 0-3.652962 70.006569Z"
                  fill="#493B4E"></path>
                <path
                  d="M704.993567 510.606399a35.050906 35.050906 0 1 0 3.652961-70.00657 35.050906 35.050906 0 1 0-3.652961 70.00657Z"
                  fill="#493B4E"></path>
                <path
                  d="M537.6 597.464615s-5.710769 50.806154 48.836923 54.35077c54.547692 3.544615 54.547692-45.489231 54.547692-45.489231s37.021538-31.507692 50.412308 4.332308c13.390769 35.643077-40.172308 85.858462-95.113846 86.843076s-115.003077-41.550769-109.686154-97.476923c0-0.196923 19.495385-36.627692 51.003077-2.56z"
                  fill="#493B4E"></path>
                <path
                  d="M634.092308 172.307692s-118.350769 14.966154-93.932308 70.301539c24.418462 55.335385 81.329231 61.44 81.329231 61.44s119.926154 18.116923 33.28-54.547693c0 0-23.04 7.68-41.747693 2.166154s-21.070769-49.033846 4.923077-52.972307 98.067692 13.587692 103.384616 49.624615 41.353846 68.923077-61.243077 112.049231c0 0-144.738462 10.043077-162.264616-112.836923 0 0-17.329231-22.449231 17.132308-73.058462 34.264615-50.806154 119.138462-2.166154 119.138462-2.166154z"
                  fill="#493B4E"></path>
              </svg>
              <span>&nbsp;关于</span>
            </div>
          </li>
@ -525,11 +305,11 @@
      this.getWebInfo();
      this.getSortInfo();
-      this.mobile = document.body.clientWidth < 920;
+      this.mobile = document.body.clientWidth < 1100;
      window.addEventListener('resize', () => {
        let docWidth = document.body.clientWidth;
-        if (docWidth < 920) {
+        if (docWidth < 1100) {
          this.mobile = true;
        } else {
          this.mobile = false;
--- a/src/components/index.vue
+++ b/src/components/index.vue
@ -13,6 +13,7 @@
        <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>
--- a/src/components/love.vue
+++ b/src/components/love.vue
--- a/src/components/message.vue
+++ b/src/components/message.vue
@ -4,6 +4,7 @@
      <el-image style="animation: header-effect 2s"
                class="background-image"
                v-once
                lazy
                :src="$constant.random_image+new Date()+Math.floor(Math.random()*10)"
                fit="cover">
        <div slot="error" class="image-slot background-image-error"></div>
@ -33,7 +34,7 @@
    </div>
    <div class="comment-wrap">
      <div class="comment-content">
-        <comment :source="$constant.source" :userId="$constant.userId"></comment>
+        <comment :source="$constant.source" :type="'message'" :userId="$constant.userId"></comment>
      </div>
      <myFooter></myFooter>
    </div>
--- a/src/components/myAside.vue
+++ b/src/components/myAside.vue
@ -20,7 +20,7 @@
    </div>
    <!-- 分类 -->
    <div class="shadow-box background-opacity wow"
-         style="padding: 25px 25px 5px;border-radius: 10px;animation: zoomIn 0.8s ease-in-out">
+         style="padding: 25px 25px 5px;border-radius: 10px;animation: hideToShow 1s ease-in-out">
      <div class="card-content2-title">
        <i class="el-icon-folder-opened card-content2-icon"></i>
        <span>分类</span>
@ -36,7 +36,7 @@
    </div>
    <!-- 推荐文章 -->
    <div v-if="!$common.isEmpty(recommendArticles)"
-         style="padding: 25px;border-radius: 10px;margin-top: 40px;animation: zoomIn 0.8s ease-in-out"
+         style="padding: 25px;border-radius: 10px;margin-top: 40px;animation: hideToShow 1s ease-in-out"
         class="shadow-box background-opacity wow">
      <div class="card-content2-title">
        <i class="el-icon-reading card-content2-icon"></i>
@ -47,7 +47,7 @@
           @click="$router.push({path: '/article', query: {id: article.id}})">
        <div class="aside-post-detail">
          <div class="aside-post-image">
-            <el-image class="my-el-image" :src="article.articleCover" fit="cover">
+            <el-image lazy class="my-el-image" :src="article.articleCover" fit="cover">
              <div slot="error" class="image-slot">
                <div class="error-aside-image">
                  {{article.username}}
--- a/src/components/user.vue
+++ b/src/components/user.vue
@ -7,6 +7,7 @@
      <el-image class="my-el-image"
                style="position: absolute"
                v-once
                lazy
                :src="$constant.two_poem_image[Math.floor(Math.random() * $constant.two_poem_image.length)]"
                fit="cover">
        <div slot="error" class="image-slot"></div>
@ -15,8 +16,11 @@
        <div class="form-container sign-up-container">
          <div class="myCenter">
            <h1>注册</h1>
-            <input v-model="username" type="text" placeholder="用户名">
+            <input v-model="username" type="text" maxlength="30" placeholder="用户名">
-            <input v-model="password" type="password" placeholder="密码">
+            <input v-model="password" type="password" maxlength="30" placeholder="密码">
            <input v-model="email" type="email" placeholder="邮箱">
            <input v-model="code" type="text" placeholder="验证码" disabled>
            <a style="margin: 0" href="#" @click="changeDialog('邮箱验证码')">获取验证码</a>
            <button @click="regist()">注册</button>
          </div>
        </div>
@ -52,6 +56,7 @@
      <el-image class="my-el-image"
                style="position: absolute"
                v-once
                lazy
                :src="$constant.two_poem_image[Math.floor(Math.random() * $constant.two_poem_image.length)]"
                fit="cover">
        <div slot="error" class="image-slot"></div>
@ -72,7 +77,7 @@
            </div>
            <div class="user-content">
              <div>
-                <el-input v-model="currentUser.username"></el-input>
+                <el-input maxlength="30" v-model="currentUser.username"></el-input>
              </div>
              <div>
                <div v-if="!$common.isEmpty(currentUser.phoneNumber)">
@ -158,7 +163,7 @@
              <div style="margin-top: 10px;margin-bottom: 5px">验证码：</div>
              <el-input v-model="code"></el-input>
              <div style="margin-top: 10px;margin-bottom: 5px">新密码：</div>
-              <el-input v-model="password"></el-input>
+              <el-input maxlength="30" v-model="password"></el-input>
            </div>
            <div v-else-if="passwordFlag === 2">
              <div style="margin-bottom: 5px">邮箱：</div>
@ -166,13 +171,21 @@
              <div style="margin-top: 10px;margin-bottom: 5px">验证码：</div>
              <el-input v-model="code"></el-input>
              <div style="margin-top: 10px;margin-bottom: 5px">新密码：</div>
-              <el-input v-model="password"></el-input>
+              <el-input maxlength="30" v-model="password"></el-input>
            </div>
          </div>
          <div v-else-if="dialogTitle === '邮箱验证码'">
            <div>
              <div style="margin-bottom: 5px">邮箱：</div>
              <el-input v-model="email"></el-input>
              <div style="margin-top: 10px;margin-bottom: 5px">验证码：</div>
              <el-input v-model="code"></el-input>
            </div>
          </div>
        </div>
        <div style="display: flex;margin-top: 30px" v-show="dialogTitle !== '修改头像'">
          <proButton :info="codeString"
-                     v-show="dialogTitle === '修改手机号' || dialogTitle === '绑定手机号' || dialogTitle === '修改邮箱' || dialogTitle === '绑定邮箱' || dialogTitle === '找回密码'"
+                     v-show="dialogTitle === '修改手机号' || dialogTitle === '绑定手机号' || dialogTitle === '修改邮箱' || dialogTitle === '绑定邮箱' || dialogTitle === '找回密码' || dialogTitle === '邮箱验证码'"
                     @click.native="getCode()"
                     :before="$constant.before_color_1"
                     :after="$constant.after_color_1"
@ -270,6 +283,22 @@
          return;
        }
        if (this.dialogTitle === "邮箱验证码" && this.$common.isEmpty(this.email)) {
          this.$message({
            message: "请输入邮箱！",
            type: "error"
          });
          return false;
        }
        if (this.$common.isEmpty(this.code)) {
          this.$message({
            message: "请输入验证码！",
            type: "error"
          });
          return;
        }
        if (this.username.indexOf(" ") !== -1 || this.password.indexOf(" ") !== -1) {
          this.$message({
            message: "用户名或密码不能包含空格！",
@ -280,9 +309,14 @@
        let user = {
          username: this.username.trim(),
          code: this.code.trim(),
          password: this.$common.encrypt(this.password.trim())
        };
        if (this.dialogTitle === "邮箱验证码") {
          user.email = this.email;
        }
        this.$http.post(this.$constant.baseURL + "/user/regist", user)
          .then((res) => {
            if (!this.$common.isEmpty(res.data)) {
@ -365,7 +399,7 @@
          }
          params.place = this.phoneNumber;
          return true;
-        } else if (this.dialogTitle === "修改邮箱" || this.dialogTitle === "绑定邮箱" || (this.dialogTitle === "找回密码" && this.passwordFlag === 2)) {
+        } else if (this.dialogTitle === "修改邮箱" || this.dialogTitle === "绑定邮箱" || this.dialogTitle === "邮箱验证码" || (this.dialogTitle === "找回密码" && this.passwordFlag === 2)) {
          params.flag = 2;
          if (this.$common.isEmpty(this.email)) {
            this.$message({
@ -414,6 +448,24 @@
            return;
          }
        }
        if (value === "邮箱验证码") {
          if (this.$common.isEmpty(this.email)) {
            this.$message({
              message: "请输入邮箱！",
              type: "error"
            });
            return false;
          }
          if (!(/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/.test(this.email))) {
            this.$message({
              message: "邮箱格式有误！",
              type: "error"
            });
            return false;
          }
        }
        this.dialogTitle = value;
        this.showDialog = true;
      },
@ -459,6 +511,8 @@
          } else {
            this.updateSecretInfo();
          }
        } else if (this.dialogTitle === "邮箱验证码") {
          this.showDialog = false;
        }
      },
      updateSecretInfo() {
@ -529,7 +583,7 @@
          }
          let url;
-          if (this.dialogTitle === "找回密码") {
+          if (this.dialogTitle === "找回密码" || this.dialogTitle === "邮箱验证码") {
            url = "/user/getCodeForForgetPassword";
          } else {
            url = "/user/getCodeForBind";
@ -594,6 +648,7 @@
    width: 750px;
    max-width: 100%;
    min-height: 450px;
    margin: 10px;
  }
  .in-up p {
@ -629,7 +684,7 @@
  .form-container div {
    background: var(--white);
    flex-direction: column;
-    padding: 0 50px;
+    padding: 0 20px;
    height: 100%;
  }
--- a/src/router/index.js
+++ b/src/router/index.js
@ -28,6 +28,10 @@ const routes = [
      path: "/weiYan",
      name: "weiYan",
      component: () => import('../components/weiYan')
    }, {
      path: "/love",
      name: "love",
      component: () => import('../components/love')
    }, {
      path: "/message",
      name: "message",
@ -36,6 +40,10 @@ const routes = [
      path: "/friend",
      name: "friend",
      component: () => import('../components/friend')
    }, {
      path: "/funny",
      name: "funny",
      component: () => import('../components/funny')
    }, {
      path: "/about",
      name: "about",
@ -91,6 +99,10 @@ const routes = [
      path: '/resourceList',
      name: 'resourceList',
      component: () => import('../components/admin/resourceList')
    }, {
      path: '/loveList',
      name: 'loveList',
      component: () => import('../components/admin/loveList')
    }, {
      path: '/resourcePathList',
      name: 'resourcePathList',
--- a/src/utils/common.js
+++ b/src/utils/common.js
@ -52,7 +52,7 @@ export default {
    content = content.replace(/\[[^\[^\]]+\]/g, (word) => {
      let index = constant.emojiList.indexOf(word.replace("[", "").replace("]", ""));
      if (index > -1) {
-        let url = "https://pzh-blog-photo.oss-cn-shenzhen.aliyuncs.com/emoji/q" + (index + 1) + ".gif";
+        let url = constant.qiniuDownload + "emoji/q" + (index + 1) + ".gif";
        return '<img style="vertical-align: middle;width: 32px;height: 32px" src="' + url + '" title="' + word + '"/>';
      } else {
        return word;
@ -140,10 +140,12 @@ export default {
  /**
   * 保存资源
   */
-  saveResource(that, type, path, isAdmin = false) {
+  saveResource(that, type, path, size, mimeType, isAdmin = false) {
    let resource = {
      type: type,
-      path: path
+      path: path,
      size: size,
      mimeType: mimeType
    };
    that.$http.post(that.$constant.baseURL + "/resource/saveResource", resource, isAdmin)
@ -153,5 +155,150 @@ export default {
          type: "error"
        });
      });
  },
  /**
   * 计算两个时间相差的年、月、日、时、分、秒
   *
   * https://juejin.cn/post/7153816601156911118
   */
  timeDiff(oldTime, newTime) {
    oldTime = oldTime.replace(new RegExp("-", "gm"), "/");
    if (newTime) {
      newTime = newTime.replace(new RegExp("-", "gm"), "/");
    } else {
      newTime = new Date();
    }
    // 计算比较日期
    const getMaxMinDate = (time, twoTime, type) => {
      let minTime = new Date(time).getTime() - new Date(twoTime).getTime() > 0 ? twoTime : time;
      let maxTime = new Date(time).getTime() - new Date(twoTime).getTime() > 0 ? time : twoTime;
      let maxDateDay = new Date(new Date(maxTime).getFullYear(), new Date(maxTime).getMonth() + 1, 0).getDate();
      let maxMinDate = new Date(minTime).getDate() > maxDateDay ? maxDateDay : new Date(minTime).getDate();
      let maxMinTong;
      if (type === 'month') {
        maxMinTong = new Date(maxTime).getFullYear() + '/' + (new Date(minTime).getMonth() + 1) + '/' + maxMinDate + ' ' + new Date(minTime).toLocaleTimeString('chinese', {hour12: false});
      } else {
        maxMinTong = new Date(maxTime).getFullYear() + '/' + (new Date(maxTime).getMonth() + 1) + '/' + maxMinDate + ' ' + new Date(minTime).toLocaleTimeString('chinese', {hour12: false});
      }
      return {
        minTime,
        maxTime,
        maxMinTong
      }
    }
    // 相差年份
    const getYear = (time, twoTime) => {
      let oneYear = new Date(time).getFullYear();
      let twoYear = new Date(twoTime).getFullYear();
      const {minTime, maxTime, maxMinTong} = getMaxMinDate(time, twoTime, 'month');
      let chaYear = Math.abs(oneYear - twoYear);
      if (new Date(maxMinTong).getTime() > new Date(maxTime).getTime()) {
        chaYear--;
      }
      return chaYear;
    }
    // 相差月份
    const getMonth = (time, twoTime, value) => {
      let oneMonth = new Date(time).getFullYear() * 12 + (new Date(time).getMonth() + 1);
      let twoMonth = new Date(twoTime).getFullYear() * 12 + (new Date(twoTime).getMonth() + 1);
      const {minTime, maxTime, maxMinTong} = getMaxMinDate(time, twoTime, 'day');
      let chaMonth = Math.abs(oneMonth - twoMonth);
      if (new Date(maxMinTong).getTime() > new Date(maxTime).getTime()) {
        chaMonth--;
      }
      if (value) {
        return chaMonth - value;
      } else {
        return chaMonth;
      }
    }
    // 相差天数
    const getDay = (time, twoTime, value) => {
      let chaTime = Math.abs(new Date(time).getTime() - new Date(twoTime).getTime());
      if (value) {
        return parseInt(chaTime / 86400000) - value;
      } else {
        return parseInt(chaTime / 86400000);
      }
    }
    // 相差小时
    const getHour = (time, twoTime, value) => {
      let chaTime = Math.abs(new Date(time).getTime() - new Date(twoTime).getTime());
      if (value) {
        return parseInt(chaTime / 3600000) - value;
      } else {
        return parseInt(chaTime / 3600000);
      }
    }
    // 相差分钟
    const getMinute = (time, twoTime, value) => {
      let chaTime = Math.abs(new Date(time).getTime() - new Date(twoTime).getTime());
      if (value) {
        return parseInt(chaTime / 60000) - value;
      } else {
        return parseInt(chaTime / 60000);
      }
    }
    // 相差秒
    const getSecond = (time, twoTime, value) => {
      let chaTime = Math.abs(new Date(time).getTime() - new Date(twoTime).getTime());
      if (value) {
        return parseInt(chaTime / 1000) - value;
      } else {
        return parseInt(chaTime / 1000);
      }
    }
    // 相差年月日时分秒
    const getDiffYMDHMS = (time, twoTime) => {
      const {minTime, maxTime, maxMinTong} = getMaxMinDate(time, twoTime, 'day');
      let diffDay1 = getDay(minTime, maxMinTong);
      if (new Date(maxMinTong).getTime() > new Date(maxTime).getTime()) {
        let prevMonth = new Date(maxMinTong).getMonth() - 1;
        let lastTime = new Date(maxMinTong).setMonth(prevMonth);
        diffDay1 = diffDay1 - getDay((new Date(lastTime).getFullYear() + '/' + (new Date(lastTime).getMonth() + 1) + '/' + new Date(lastTime).getDate()), maxMinTong);
      }
      let diffYear = getYear(time, twoTime);
      let diffMonth = getMonth(time, twoTime, diffYear * 12);
      let diffDay = getDay(time, twoTime, diffDay1);
      let diffHour = getHour(time, twoTime, getDay(time, twoTime) * 24);
      let diffMinute = getMinute(time, twoTime, (getDay(time, twoTime) * 24 * 60 + diffHour * 60));
      let diffSecond = getSecond(time, twoTime, (getDay(time, twoTime) * 24 * 60 * 60 + diffHour * 60 * 60 + diffMinute * 60));
      return {
        diffYear,
        diffMonth,
        diffDay,
        diffHour,
        diffMinute,
        diffSecond
      }
    }
    return getDiffYMDHMS(oldTime, newTime);
  },
  countdown(time) {
    time = new Date(time.replace(new RegExp("-", "gm"), "/"));
    let nowTime = new Date();
    //两个时间点的时间差(秒)
    let seconds = parseInt((time.getTime() - nowTime.getTime()) / 1000);
    let d = parseInt(seconds / 3600 / 24);
    let h = parseInt(seconds / 3600 % 24);
    let m = parseInt(seconds / 60 % 60);
    let s = parseInt(seconds % 60);
    return {
      d,
      h,
      m,
      s
    }
  }
 }
--- a/src/utils/constant.js
+++ b/src/utils/constant.js
@ -11,6 +11,7 @@ export default {
  cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/",
  waifuPath: "/webInfo/getWaifuJson",
  hitokoto: "https://v1.hitokoto.cn",
  shehui: "https://api.oick.cn/yulu/api.php",
  tocbot: "https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js",
  jinrishici: "https://v1.jinrishici.com/all.json",
  random_image: "https://s1.ax1x.com/2022/12/04/zsKgDs.jpg?",
@ -19,6 +20,13 @@ export default {
  qiniuUrl: "https://upload.qiniup.com",
  qiniuDownload: "$$$$七牛云下载地址",
  loveArticle: "https://s1.ax1x.com/2022/12/04/zsKgDs.jpg",
  loveMessage: "https://s1.ax1x.com/2022/12/04/zsKgDs.jpg",
  lovePhoto: "https://s1.ax1x.com/2022/12/04/zsKh5V.jpg",
  loveLike: "https://cdn.cbd.int//hexo-butterfly-envelope/lib/violet.jpg",
  loveSortId: 1,
  loveLabelId: 1,
  friendBG: "https://s1.ax1x.com/2022/12/04/zsKgDs.jpg",
  friendLetterTop: "https://cdn.cbd.int/hexo-butterfly-envelope/lib/before.png",
  friendLetterBottom: "https://cdn.cbd.int/hexo-butterfly-envelope/lib/after.png",
@ -43,5 +51,5 @@ export default {
  userId: 1,
  source: 0,
-  emojiList: ['衰', '鄙视', '再见', '捂嘴', '皱眉', '奋斗', '白眼', '可怜', '皱眉', '鼓掌', '烦恼', '吐舌', '挖鼻', '委屈', '滑稽', '啊这', '生气', '害羞', '晕', '好色', '流泪', '吐血', '微笑', '酷', '坏笑', '吓', '大兵', '哭笑', '困', '呲牙']
+  emojiList: ['衰', '鄙视', '再见', '捂嘴', '摸鱼', '奋斗', '白眼', '可怜', '皱眉', '鼓掌', '烦恼', '吐舌', '挖鼻', '委屈', '滑稽', '啊这', '生气', '害羞', '晕', '好色', '流泪', '吐血', '微笑', '酷', '坏笑', '吓', '大兵', '哭笑', '困', '呲牙']
 }