添加动画及移动端修复

package-lock.json

@@ -9938,6 +9938,19 @@
       "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
       "dev": true
     },
+    "is-dom-node": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-dom-node/-/is-dom-node-1.0.4.tgz",
+      "integrity": "sha512-NEnTHKCeyGJTL0cKdzATF8SWzyTMYf5CbNKWBvsXvyMxZG32g+a09qkeCbrfQNLTD85CbPeHb4YjIJCjyzF0yA=="
+    },
+    "is-dom-node-list": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-dom-node-list/-/is-dom-node-list-1.2.1.tgz",
+      "integrity": "sha512-P1H071iT5TGG8pAHslhrLDo/tQLYc8tGuWABVqhGU4l2mm7aDNb9cx2myQ2AujEQO6B2cAujcW4a0/+6UfXInw==",
+      "requires": {
+        "is-dom-node": "^1.0.4"
+      }
+    },
     "is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@@ -11151,6 +11164,11 @@
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
     },
+    "miniraf": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/miniraf/-/miniraf-1.0.0.tgz",
+      "integrity": "sha512-XpvhtJYzVrpXe+JoAthrT9E40NIrSDDMcdHEYL2M+lR/OCas0nadetcBBq/MWYqlgV5aDWVQ3mfAqd+fG6Y/EQ=="
+    },
     "mississippi": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
@@ -14281,6 +14299,11 @@
       "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=",
       "dev": true
     },
+    "rematrix": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/rematrix/-/rematrix-0.3.0.tgz",
+      "integrity": "sha512-xB/9ZvJIKaDgXX0qkvV9/pLD8zK23A6TVV6F8Vhsl+SrxbBeVYutz5uszxgC6Rt3RP9LZiH8OXaYjr+x6WXWmQ=="
+    },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -14747,6 +14770,16 @@
         "ajv-keywords": "^3.5.2"
       }
     },
+    "scrollreveal": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/scrollreveal/-/scrollreveal-4.0.9.tgz",
+      "integrity": "sha512-fefGvzVS8YbXbDK1+T0kvy2yqxaiBJZeGUhPeqajf+7sGqtX4xikbKGAlzQuPCpswAMswx94ZwhDjXKnRIqW1w==",
+      "requires": {
+        "miniraf": "1.0.0",
+        "rematrix": "0.3.0",
+        "tealight": "0.3.6"
+      }
+    },
     "scss-tokenizer": {
       "version": "0.2.3",
       "resolved": "https://registry.npm.taobao.org/scss-tokenizer/download/scss-tokenizer-0.2.3.tgz",
@@ -16003,6 +16036,15 @@
         }
       }
     },
+    "tealight": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/tealight/-/tealight-0.3.6.tgz",
+      "integrity": "sha512-Dys3N8jFBThD9pNVpPCyUiu6DfWcTBdqWQJIvnAuVaFkGEdrPBJ43070vVbn6sTlLvn2IQK2zFW4FrVIrTo8eQ==",
+      "requires": {
+        "is-dom-node": "^1.0.4",
+        "is-dom-node-list": "^1.2.1"
+      }
+    },
     "temp-dir": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz",

package.json

@@ -22,6 +22,7 @@
     "mavon-editor": "^2.9.1",
     "node-sass": "^4.14.1",
     "pinyin-pro": "^3.15.1",
+    "scrollreveal": "^4.0.9",
     "vue": "^2.6.14",
     "vue-animate-number": "^0.4.2",
     "vue-cropperjs": "^3.0.0",

src/components/occuQrcode/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-dialog title=""
+             :visible.sync="diaVisible"
+             center
+             :width="$store.getters.getModelType ? '500px' : '100%'"
+             append-to-body
+             :top="qrcodeTop"
+             lock-scroll
+             custom-class="qrcode-dia">
+    <div class="pic-wrap">
+      <img class="pic"
+           src="@/assets/images/occupationlab.png"
+           alt="">
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: ['visible'],
+  data () {
+    return {
+      qrcodeTop: '100px'
+    };
+  },
+  computed: {
+    diaVisible: {
+      get () {
+        return this.visible
+      },
+      set (val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+  mounted () {
+    const height = (window.innerHeight - (this.$store.getters.getModelType ? 758 : 600)) / 2
+    this.qrcodeTop = (height > 0 ? height : 0) + 'px'
+  },
+  methods: {
+    close () {
+      this.$emit('update:visible', false)
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+/deep/.qrcode-dia {
+    background-color: transparent;
+    .el-dialog__header,
+    .el-dialog__body {
+        padding: 0;
+        background-color: transparent;
+        overflow: hidden;
+    }
+    .el-dialog__headerbtn .el-dialog__close {
+        color: #fff;
+    }
+    .pic-wrap {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .pic {
+        width: 100%;
+    }
+}
+@media (max-width: 1200px) {
+    /deep/.qrcode-dia {
+        .pic {
+            width: 95%;
+        }
+    }
+}
+</style>

src/layouts/header/index.vue

@@ -32,6 +32,8 @@
     <!-- 手机端 -->
     <div v-else
          class="mobile-tools">
+      <i class="login el-icon-user-solid"
+         @click="toLogin"></i>
       <i class="menu-icon"
          :class="modelType ? 'el-icon-s-fold': 'el-icon-s-unfold' "
          @click.stop="updateModelType"></i>
@@ -41,30 +43,16 @@
                 :isHome.sync="isHome"
                 @updateModelType="updateType"></navbar>
       </div>
-      <i class="login el-icon-user-solid"
-         @click="toLogin"></i>
     </div>
 
-    <el-dialog title=""
+    <occuQrcode :visible.sync="qrcodeVisible" />
-               :visible.sync="qrcodeVisible"
-               fullscreen
-               center
-               :top="qrcodeTop"
-               append-to-body
-               custom-class="qrcode-dia">
-      <div>
-        <img width="100%"
-             style="height: 100vh;object-fit: cover;"
-             src="@/assets/images/occupationlab.png"
-             alt="">
-      </div>
-    </el-dialog>
   </div>
 </template>
 <script>
 import Util from '@/libs/util'
 import { mapMutations } from 'vuex'
 import navbar from '../navbar'
+import occuQrcode from '@/components/occuQrcode'
 export default {
   data () {
     return {
@@ -79,11 +67,11 @@ export default {
       modelType: false,
       navShow: true,
       qrcodeVisible: false,
-      qrcodeTop: '100px'
     };
   },
   components: {
-    navbar
+    navbar,
+    occuQrcode
   },
   computed: {
     isSfel () {
@@ -108,8 +96,6 @@ export default {
     window.removeEventListener('scroll', this.handleScroll)
   },
   mounted () {
-    const height = (window.innerHeight - 758) / 2
-    this.qrcodeTop = (height > 0 ? height : 0) + 'px'
     this.setKeyword('')
     window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
     document.body.addEventListener('click', e => {
@@ -258,7 +244,7 @@ $height: 90px;
         }
     }
     .menu-icon {
-        margin-right: 10px;
+        margin-left: 10px;
         font-size: 1.8rem;
         color: #c1c1c1;
         cursor: pointer;
@@ -310,15 +296,6 @@ $height: 90px;
     max-height: 30rem;
     overflow-y: scroll;
 }
-/deep/.qrcode-dia {
-    .el-dialog__header,
-    .el-dialog__body {
-        padding: 0;
-    }
-    .el-dialog__headerbtn .el-dialog__close {
-        color: #fff;
-    }
-}
 @media (max-width: 1660px) {
     .header {
         .logo {

src/pages/aboutUs/index.vue

@@ -100,7 +100,8 @@
         <ul class="list">
           <template v-for="(item, i) in modules[4].list">
             <li v-if="item.isEnable"
-                :key="i">
+                :key="i"
+                class="fadeInUp">
               <img :src="item.pic"
                    alt="">
               <h6>{{ item.title }}</h6>
@@ -123,7 +124,8 @@
         <ul class="list">
           <template v-for="(item, i) in modules[6].list">
             <li v-if="item.isEnable"
-                :key="i">
+                :key="i"
+                class="fadeInUp">
               <img :src="item.pic"
                    alt="">
               <h6>{{ item.title }}</h6>
@@ -164,8 +166,8 @@
                 :class-option="{limitMoveNum: 2, direction: 2}">
           <ul class="client-list"
               ref="client">
-            <li v-for="item in modules[9].list"
+            <li v-for="(item, i) in modules[9].list"
-                :key="item">
+                :key="i">
               <img :src="item.pic"
                    alt="">
             </li>
@@ -283,26 +285,46 @@
 
 <script>
 import mixins from '@/mixins/page'
-import Setting from '@/setting'
 import Util from '@/libs/util'
-import WOW from 'wow.js'
 import scroll from 'vue-seamless-scroll'
+import ScrollReveal from 'scrollreveal'
 export default {
   mixins: [mixins],
   data () {
     return {
       isImg: Util.isImg,
       active: '',
-      clients: [1, 2, 3, 4, 5]
+      clients: [1, 2, 3, 4, 5],
+      sr: null,
     }
   },
   components: {
     scroll
   },
   mounted () {
-    new WOW().init()
+
   },
   methods: {
+    // 初始化动画
+    initAnimate () {
+      ScrollReveal().reveal('.wow', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        // origin: 'bottom', // 动画开始的方向
+        distance: '50px',//移动距离
+        duration: 1000, // 动画持续时间
+        scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      ScrollReveal().reveal('.fadeInUp', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: 'top', // 动画开始的方向
+        distance: '100px',//移动距离
+        duration: 1000, // 动画持续时间
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+    },
     // 获取文章详情
     getInfo () {
       // 预览/详情
@@ -314,6 +336,7 @@ export default {
             data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
           this.modules = json
           console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+          this.$nextTick(this.initAnimate)
         }
       }).catch(err => { })
     },
@@ -331,7 +354,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import url(../../plugins/wow/animate.css);
 .wrap {
     position: relative;
     background-color: #f9f9f9;

src/pages/index/show/index.vue

@@ -213,6 +213,7 @@
 import Util from "@/libs/util"
 import Setting from "@/setting"
 import Breadcrumb from '@/components/breadcrumb'
+import ScrollReveal from 'scrollreveal'
 export default {
   data () {
     return {
@@ -289,6 +290,13 @@ export default {
     this.qrcodeTop = (height > 0 ? height : 0) + 'px'
     this.getData()
     this.getHot()
+    ScrollReveal().reveal('.products', {
+      reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+      origin: 'bottom', // 动画开始的方向
+      // distance: '300px',//移动距离
+      duration: 1000, // 动画持续时间
+      scale: 0.8,
+    })
   },
   methods: {
     // 产品详情

src/pages/member/index.vue

@@ -29,36 +29,25 @@
       </div>
     </div>
 
-    <el-dialog title=""
+    <occuQrcode :visible.sync="qrcodeVisible" />
-               :visible.sync="qrcodeVisible"
-               width="500px"
-               center
-               :top="qrcodeTop"
-               custom-class="qrcode-dia">
-      <div>
-        <img width="100%"
-             src="@/assets/images/occupationlab.png"
-             alt="">
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
 import mixins from '@/mixins/page'
-import Setting from '@/setting'
 import WOW from 'wow.js'
+import occuQrcode from '@/components/occuQrcode'
 export default {
   mixins: [mixins],
   data () {
     return {
       qrcodeVisible: false,
-      qrcodeTop: '100px'
     }
   },
+  components: {
+    occuQrcode
+  },
   mounted () {
-    const height = (window.innerHeight - 758) / 2
-    this.qrcodeTop = (height > 0 ? height : 0) + 'px'
     new WOW().init()
   },
   methods: {
@@ -188,15 +177,6 @@ export default {
         }
     }
 }
-/deep/.qrcode-dia {
-    .el-dialog__header,
-    .el-dialog__body {
-        padding: 0;
-    }
-    .el-dialog__headerbtn .el-dialog__close {
-        color: #fff;
-    }
-}
 @media (max-width: 1200px) {
     .reg {
         h6 {