添加动画及移动端修复

8 months ago · b849c5d88a
parent cf06f798a6
commit b849c5d88a
8 changed files with 169 additions and 64 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/assets/images/occupationlab.png
+++ b/src/assets/images/occupationlab.png
--- a/src/components/occuQrcode/index.vue
+++ b/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>
--- a/src/layouts/header/index.vue
+++ b/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=""
-               :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>
+    <occuQrcode :visible.sync="qrcodeVisible" />
  </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 {
--- a/src/pages/aboutUs/index.vue
+++ b/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"
-                :key="item">
+            <li v-for="(item, i) in modules[9].list"
+                :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;
--- a/src/pages/index/show/index.vue
+++ b/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: {
    // 产品详情
--- a/src/pages/member/index.vue
+++ b/src/pages/member/index.vue
@ -29,36 +29,25 @@
      </div>
    </div>

-    <el-dialog title=""
-               :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>
+    <occuQrcode :visible.sync="qrcodeVisible" />
  </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 {