添加动画

src/pages/aboutUs/index.vue

@@ -27,7 +27,7 @@
             <div class="text"
                  v-html="item.des"></div>
             <div v-if="!GTA"
-                 class="qrcodes">
+                 class="qrcodes fadeInUp">
               <div class="qrcode">
                 <img width="103"
                      :src="item.weixinPic1"
@@ -47,7 +47,7 @@
     </el-carousel>
 
     <div v-else
-         class="banner">
+         class="banner fadeInUp">
       <img class="texts"
            src="https://huorantech.com/images/about/banner-text.png"
            alt="">
@@ -73,15 +73,14 @@
         <div class="pics">
           <div class="text">
             <div class="title-wrap">
-              <p class="title">{{ modules[1].form.title }}</p>
-              <p class="brief">{{ modules[1].form.subTitle1 }}</p>
-              <p class="en">{{ modules[1].form.subTitle2 }}</p>
+              <p class="title fadeInLeft">{{ modules[1].form.title }}</p>
+              <p class="brief fadeInLeft">{{ modules[1].form.subTitle1 }}</p>
+              <p class="en fadeInRight">{{ modules[1].form.subTitle2 }}</p>
             </div>
-            <div class="desc wow fadeInLeft"
-                 data-wow-delay="0.7s"
+            <div class="desc animate"
                  v-html="modules[1].form.des"></div>
           </div>
-          <img class="bg"
+          <img class="bg fadeInRight"
                :src="modules[1].form.pic"
                alt="">
         </div>
@@ -95,8 +94,8 @@
     </div>
     <div class="culture">
       <div class="inner">
-        <h6 class="i-title wow fadeInDown">{{ modules[3].form.title }}</h6>
-        <p class="en">{{ modules[3].form.des }}</p>
+        <h6 class="i-title animate">{{ modules[3].form.title }}</h6>
+        <p class="en fadeInUp">{{ modules[3].form.des }}</p>
         <ul class="list">
           <template v-for="(item, i) in modules[4].list">
             <li v-if="item.isEnable"
@@ -117,9 +116,9 @@
     <div class="adv"
          id="part2">
       <div class="inner">
-        <h6 class="i-title wow fadeInDown">{{ modules[5].form.title }}</h6>
-        <p class="en">{{ modules[5].form.subTitle }}</p>
-        <p class="title-des wow fadeInDown">{{ modules[5].form.des }}</p>
+        <h6 class="i-title animate">{{ modules[5].form.title }}</h6>
+        <p class="en fadeInUp">{{ modules[5].form.subTitle }}</p>
+        <p class="title-des animate">{{ modules[5].form.des }}</p>
 
         <ul class="list">
           <template v-for="(item, i) in modules[6].list">
@@ -139,14 +138,14 @@
     <!-- 合作客户 -->
     <div class="client">
       <div class="inner">
-        <h6 class="i-title wow fadeInDown">{{ modules[7].form.title }}</h6>
-        <p class="en">{{ modules[7].form.subTitle }}</p>
-        <p class="title-des wow fadeInDown">{{ modules[7].form.des }}</p>
+        <h6 class="i-title animate">{{ modules[7].form.title }}</h6>
+        <p class="en fadeInUp">{{ modules[7].form.subTitle }}</p>
+        <p class="title-des animate">{{ modules[7].form.des }}</p>
         <div class="client-pic">
-          <img class="bg"
+          <img class="bg fadeInLeft"
                :src="modules[8].form.pic"
                alt="">
-          <div class="text">
+          <div class="text fadeInRight">
             <div class="c-title1">
               <img src="https://huorantech.com/images/index/comma1.png"
                    alt="">
@@ -166,11 +165,13 @@
                 :class-option="{limitMoveNum: 2, direction: 2}">
           <ul class="client-list"
               ref="client">
-            <li v-for="(item, i) in modules[9].list"
-                :key="i">
-              <img :src="item.pic"
-                   alt="">
-            </li>
+            <template v-for="item in modules[9].list">
+              <li v-if="item.isEnable"
+                  :key="item">
+                <img :src="item.pic"
+                     alt="">
+              </li>
+            </template>
           </ul>
         </scroll>
       </div>
@@ -307,7 +308,8 @@ export default {
   methods: {
     // 初始化动画
     initAnimate () {
-      ScrollReveal().reveal('.wow', {
+      const sr = ScrollReveal()
+      sr.reveal('.animate', {
         reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
         // origin: 'bottom', // 动画开始的方向
         distance: '50px',//移动距离
@@ -316,7 +318,7 @@ export default {
         // viewFactor: 100,
       })
 
-      ScrollReveal().reveal('.fadeInUp', {
+      sr.reveal('.fadeInUp', {
         reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
         origin: 'top', // 动画开始的方向
         distance: '100px',//移动距离
@@ -324,6 +326,33 @@ export default {
         // scale: 0.8,
         // viewFactor: 100,
       })
+
+      sr.reveal('.fadeInDown', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: 'bottom', // 动画开始的方向
+        distance: '100px',//移动距离
+        duration: 1000, // 动画持续时间
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      sr.reveal('.fadeInLeft', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: this.$store.getters.getModelType ? 'left' : 'top', // 动画开始的方向
+        distance: '100px',//移动距离
+        duration: 1000, // 动画持续时间
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      sr.reveal('.fadeInRight', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: this.$store.getters.getModelType ? 'right' : 'bottom', // 动画开始的方向
+        distance: '100px',//移动距离
+        duration: 1000, // 动画持续时间
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
     },
     // 获取文章详情
     getInfo () {

src/pages/column/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-show="loaded"
        :class="['wrap', { activity: info.listStyleId === 15, party: info.listStyleId === 68 }]">
-    <div class="banner">
+    <div class="banner fadeInUp">
       <img width="100%"
            height="280"
            :src="info.columnBanner"
@@ -473,6 +473,7 @@ import Setting from '@/setting';
 import Util from '@/libs/util';
 import Breadcrumb from '@/components/breadcrumb';
 import mixins from '@/mixins/article';
+import ScrollReveal from 'scrollreveal'
 export default {
   mixins: [mixins],
   data () {
@@ -551,7 +552,6 @@ export default {
       }
     ];
     this.init();
-
   },
   methods: {
     init () {
@@ -577,6 +577,16 @@ export default {
             this.handlePublication()
             this.getLeftColumn()
             this.getClassification()
+
+
+            ScrollReveal().reveal('.fadeInUp', {
+              reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+              origin: 'top', // 动画开始的方向
+              distance: '150px',//移动距离
+              duration: 1000, // 动画持续时间
+              // scale: 0.8,
+              // viewFactor: 100,
+            })
           })
           .catch((res) => { });
     },

src/pages/index/list/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="wrap">
-    <el-carousel class="carousel"
+    <el-carousel class="carousel fadeInUp"
                  :interval="6000"
                  height="354px"
                  :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
@@ -32,7 +32,7 @@
         <template v-for="(item, i) in modules[1].list">
           <li v-if="item.isEnable"
               :key="i"
-              :class="[{'cursor-pointer': isLink(item.link.linkName)}]"
+              :class="[{'cursor-pointer': isLink(item.link.linkName)}, 'fadeInDown' + i]"
               @click="openLink(item)">
             <img :src="item.pic"
                  alt="">
@@ -252,6 +252,7 @@
 <script>
 import mixins from '@/mixins/page'
 import { Loading } from "element-ui";
+import ScrollReveal from 'scrollreveal'
 export default {
   mixins: [mixins],
   data () {
@@ -350,7 +351,73 @@ export default {
     this.getClass()
     this.initData()
   },
-  methods: {
+  methods: {// 初始化动画
+    initAnimate () {
+      ScrollReveal().reveal('.animate', {
+        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,
+      })
+
+      ScrollReveal().reveal('.fadeInDown0', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: 'bottom', // 动画开始的方向
+        distance: '150px',//移动距离
+        duration: 1000, // 动画持续时间
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      ScrollReveal().reveal('.fadeInDown1', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: 'bottom', // 动画开始的方向
+        distance: '150px',//移动距离
+        duration: 1000, // 动画持续时间
+        delay: 100,
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      ScrollReveal().reveal('.fadeInDown2', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: 'bottom', // 动画开始的方向
+        distance: '150px',//移动距离
+        duration: 1000, // 动画持续时间
+        delay: 200,
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      ScrollReveal().reveal('.fadeInLeft', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: this.$store.getters.getModelType ? 'left' : 'top', // 动画开始的方向
+        distance: '100px',//移动距离
+        duration: 1000, // 动画持续时间
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      ScrollReveal().reveal('.fadeInRight', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: this.$store.getters.getModelType ? 'right' : 'bottom', // 动画开始的方向
+        distance: '100px',//移动距离
+        duration: 1000, // 动画持续时间
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+    },
     // 获取banner
     getBanner () {
       // 预览/详情
@@ -361,6 +428,7 @@ export default {
             data :
             data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
           this.modules = json
+          this.$nextTick(this.initAnimate)
           console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
         }
       }).catch(err => { })

src/pages/index/show/index.vue

@@ -1,18 +1,10 @@
 <template>
   <div class="wrap">
-    <!-- <el-card shadow="hover"
-             class="m-b-20">
-      <div class="flex-between">
-        <el-page-header @back="$router.back()"
-                        :content="form.mall.productName"></el-page-header>
-      </div>
-    </el-card> -->
-
     <div class="inner">
       <Breadcrumb ref="breadcrumb"
                   :data.sync="routes" />
       <div class="top">
-        <el-carousel class="pics"
+        <el-carousel class="pics fadeInLeft"
                      :interval="6000"
                      height="278px"
                      :arrow="form.pics.length > 1 ? 'hover' : 'never'"
@@ -25,7 +17,7 @@
             </el-image>
           </el-carousel-item>
         </el-carousel>
-        <div class="right"
+        <div class="right fadeInRight"
              id="fields">
           <h6>{{ form.mall.productName }}</h6>
           <div v-if="isCourse"
@@ -90,13 +82,13 @@
       <div class="course"
            id="part0">
         <div class="detail">
-          <ul class="tab">
+          <ul class="tab fadeInDown">
             <li v-for="(tab, i) in tabs"
                 :key="i"
                 :class="{active: curTab === tab.id}"
                 @click="tabChange(tab)">{{ tab.name }}</li>
           </ul>
-          <div class="courses">
+          <div class="courses fadeInUp">
             <div class="des"
                  v-html="form.mall.detailedIntroduction"></div>
             <div class="chapter"
@@ -138,8 +130,8 @@
           </div>
         </div>
         <div class="products">
-          <h6>热门产品推荐</h6>
-          <ul class="product">
+          <h6 class="fadeInUp">热门产品推荐</h6>
+          <ul class="product fadeInDown">
             <li v-for="(item, i) in hots"
                 :key="i"
                 @click="toDetail(item.mallId)">
@@ -290,13 +282,6 @@ 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: {
     // 产品详情
@@ -327,6 +312,7 @@ export default {
         e.mall.associatedProduct && this.getChapter()
         this.$nextTick(() => {
           this.height = document.querySelector('#fields').clientHeight + 'px'
+          this.initAnimate()
         })
       }).catch(err => { })
     },
@@ -335,6 +321,84 @@ export default {
       let res = await this.$get(this.api.curriculumChapter + '/' + this.form.mall.associatedProduct)
       this.chapterList = res.chapterList
     },
+    // 初始化动画
+    initAnimate () {
+      const sr = ScrollReveal()
+      sr.reveal('.animate', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        // origin: 'bottom', // 动画开始的方向
+        distance: '50px',//移动距离
+        duration: 1000, // 动画持续时间
+        scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      sr.reveal('.fadeInUp', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: 'top', // 动画开始的方向
+        distance: '100px',//移动距离
+        duration: 1000, // 动画持续时间
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      sr.reveal('.fadeInDown', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: 'bottom', // 动画开始的方向
+        distance: '100px',//移动距离
+        duration: 1000, // 动画持续时间
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+
+
+      ScrollReveal().reveal('.fadeInDown0', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: 'bottom', // 动画开始的方向
+        distance: '150px',//移动距离
+        duration: 1000, // 动画持续时间
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      ScrollReveal().reveal('.fadeInDown1', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: 'bottom', // 动画开始的方向
+        distance: '150px',//移动距离
+        duration: 1000, // 动画持续时间
+        delay: 100,
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      ScrollReveal().reveal('.fadeInDown2', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: 'bottom', // 动画开始的方向
+        distance: '150px',//移动距离
+        duration: 1000, // 动画持续时间
+        delay: 200,
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      sr.reveal('.fadeInLeft', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: this.$store.getters.getModelType ? 'left' : 'top', // 动画开始的方向
+        distance: '100px',//移动距离
+        duration: 1000, // 动画持续时间
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      sr.reveal('.fadeInRight', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: this.$store.getters.getModelType ? 'right' : 'bottom', // 动画开始的方向
+        distance: '100px',//移动距离
+        duration: 1000, // 动画持续时间
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+    },
     // tab切换
     tabChange ({ id }) {
       this.curTab = id

src/pages/member/index.vue

@@ -35,8 +35,8 @@
 
 <script>
 import mixins from '@/mixins/page'
-import WOW from 'wow.js'
 import occuQrcode from '@/components/occuQrcode'
+import ScrollReveal from 'scrollreveal'
 export default {
   mixins: [mixins],
   data () {
@@ -48,7 +48,7 @@ export default {
     occuQrcode
   },
   mounted () {
-    new WOW().init()
+
   },
   methods: {
     // 获取文章详情
@@ -61,16 +61,94 @@ export default {
             data :
             data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
           this.modules = json
+          // this.$nextTick(this.initAnimate)
           console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
         }
       }).catch(err => { })
     },
+    // 初始化动画
+    initAnimate () {
+      const sr = ScrollReveal()
+      sr.reveal('.animate', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        // origin: 'bottom', // 动画开始的方向
+        distance: '50px',//移动距离
+        duration: 1000, // 动画持续时间
+        scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      sr.reveal('.fadeInUp', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: 'top', // 动画开始的方向
+        distance: '100px',//移动距离
+        duration: 1000, // 动画持续时间
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      sr.reveal('.fadeInDown', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: 'bottom', // 动画开始的方向
+        distance: '100px',//移动距离
+        duration: 1000, // 动画持续时间
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+
+
+      ScrollReveal().reveal('.fadeInDown0', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: 'bottom', // 动画开始的方向
+        distance: '150px',//移动距离
+        duration: 1000, // 动画持续时间
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      ScrollReveal().reveal('.fadeInDown1', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: 'bottom', // 动画开始的方向
+        distance: '150px',//移动距离
+        duration: 1000, // 动画持续时间
+        delay: 100,
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      ScrollReveal().reveal('.fadeInDown2', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: 'bottom', // 动画开始的方向
+        distance: '150px',//移动距离
+        duration: 1000, // 动画持续时间
+        delay: 200,
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      sr.reveal('.fadeInLeft', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: this.$store.getters.getModelType ? 'left' : 'top', // 动画开始的方向
+        distance: '100px',//移动距离
+        duration: 1000, // 动画持续时间
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      sr.reveal('.fadeInRight', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: this.$store.getters.getModelType ? 'right' : 'bottom', // 动画开始的方向
+        distance: '100px',//移动距离
+        duration: 1000, // 动画持续时间
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+    },
   }
 };
 </script>
 
 <style lang="scss" scoped>
-@import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
 .reg {
     padding-bottom: 50px;
@@ -213,17 +291,37 @@ export default {
 }
 @media (max-width: 640px) {
     .reg {
+        h6 {
+            font-size: 1.6rem;
+        }
         .step {
             li {
                 width: 100%;
-                margin-bottom: 10px;
+                margin-bottom: 1.1rem !important;
+                font-size: 0.9rem;
                 &:last-child {
                     margin-bottom: 0;
                 }
             }
         }
+        .member-des {
+            font-size: 1rem;
+        }
+        .param {
+            li {
+                .name {
+                    font-size: 0.95rem;
+                }
+                .name {
+                    font-size: 0.8rem;
+                }
+            }
+        }
         .btn {
             width: 100%;
+            height: 3.5rem;
+            line-height: 3.5rem;
+            font-size: 1.1rem;
         }
     }
 }

src/pages/supplier/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="wrap index">
-    <div class="banner">
+    <div class="banner fadeInDown">
       <h6>教育数字化产品供应商</h6>
       <p class="text">与3000所高校共建数字化教育产业未来</p>
       <el-button class="dev"
@@ -8,7 +8,7 @@
                  @click="openDev">登录供应商平台</el-button>
     </div>
     <!-- 关于教育产业数字化产品供应商 -->
-    <div class="about">
+    <div class="about fadeInUp">
       <div class="inner">
         <div class="text">如果您是从事高职、本科市场相应数字化场景的软件、硬件研发、生产或代理的供应商；如果您正面临拓展渠道难、精准触达客户难、售前支持难、按时回款难等发展瓶颈；请加入职站商城，让您的产品轻松走进全国院校。</div>
 
@@ -61,17 +61,17 @@
     <!-- 我们提供的支持 -->
     <div class="sup">
       <div class="inner">
-        <h6 class="i-title">我们提供的支持</h6>
+        <h6 class="i-title fadeInLeft">我们提供的支持</h6>
         <ul class="list">
-          <li>
+          <li class="fadeInDown0">
             <h6>生产力赋能</h6>
             <p class="text">公司打造的产业中台将赋能联盟厂家高效地进行软件产品的开发与交付。</p>
           </li>
-          <li>
+          <li class="fadeInDown1">
             <h6>渠道与运营服务赋能</h6>
             <p class="text">公司会为联盟厂家提供公共的渠道支撑和客户获取，帮助厂家获得客户成交，降低产品厂家的市场压力。</p>
           </li>
-          <li>
+          <li class="fadeInDown2">
             <h6>创业技术孵化服务</h6>
             <p class="text">对于还在创业阶段的产品创业者，我司还提供初始的技术外包支撑服务，帮助产品创业者最小成本的完成产品的落地。</p>
           </li>
@@ -81,21 +81,21 @@
     <!-- 产品供应商需要具备的条件 -->
     <div class="con">
       <div class="inner">
-        <h6 class="i-title">产品供应商需要具备的条件</h6>
+        <h6 class="i-title fadeInRight">产品供应商需要具备的条件</h6>
         <ul class="list">
-          <li>
+          <li class="fadeInDown0">
             <img src="@/assets/images/dev/con1.png"
                  alt="">
             <h6>产品研发</h6>
             <p class="text">具备独立设计、开发教育产业数字化产品的能力</p>
           </li>
-          <li>
+          <li class="fadeInDown1">
             <img src="@/assets/images/dev/con2.png"
                  alt="">
             <h6>产品运维 </h6>
             <p class="text">具备独立的产品运维支持的能力</p>
           </li>
-          <li>
+          <li class="fadeInDown2">
             <img src="@/assets/images/dev/con3.png"
                  alt="">
             <h6>专业服务</h6>
@@ -105,15 +105,15 @@
       </div>
     </div>
     <div class="profit">
-      <div class="item1">产品供应商受益</div>
-      <div class="item2">我们将与产品供应商共享教育产业数字化蓝海的巨大收益！</div>
+      <div class="item1 fadeInUp">产品供应商受益</div>
+      <div class="item2 fadeInDown">我们将与产品供应商共享教育产业数字化蓝海的巨大收益！</div>
     </div>
     <!-- 联系 -->
     <div class="contact">
-      <img class="love"
+      <img class="love fadeInRight"
            src="@/assets/images/love.png"
            alt="">
-      <img class="contact-info"
+      <img class="contact-info fadeInLeft"
            src="@/assets/images/contact-info.png"
            alt="">
     </div>
@@ -134,8 +134,8 @@
 </template>
 
 <script>
+import ScrollReveal from 'scrollreveal'
 export default {
-  name: 'cityPartner',
   data () {
     return {
       qrcodeVisible: false,
@@ -145,8 +145,87 @@ export default {
   mounted () {
     const height = (window.innerHeight - 758) / 2
     this.qrcodeTop = (height > 0 ? height : 0) + 'px'
+    this.initAnimate()
   },
   methods: {
+    // 初始化动画
+    initAnimate () {
+      const sr = ScrollReveal()
+      sr.reveal('.animate', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        // origin: 'bottom', // 动画开始的方向
+        distance: '50px',//移动距离
+        duration: 1000, // 动画持续时间
+        scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      sr.reveal('.fadeInUp', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: 'top', // 动画开始的方向
+        distance: '100px',//移动距离
+        duration: 1000, // 动画持续时间
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      sr.reveal('.fadeInDown', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: 'bottom', // 动画开始的方向
+        distance: '100px',//移动距离
+        duration: 1000, // 动画持续时间
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+
+
+      ScrollReveal().reveal('.fadeInDown0', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: 'bottom', // 动画开始的方向
+        distance: '150px',//移动距离
+        duration: 1000, // 动画持续时间
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      ScrollReveal().reveal('.fadeInDown1', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: 'bottom', // 动画开始的方向
+        distance: '150px',//移动距离
+        duration: 1000, // 动画持续时间
+        delay: 100,
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      ScrollReveal().reveal('.fadeInDown2', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: 'bottom', // 动画开始的方向
+        distance: '150px',//移动距离
+        duration: 1000, // 动画持续时间
+        delay: 200,
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      sr.reveal('.fadeInLeft', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: this.$store.getters.getModelType ? 'left' : 'top', // 动画开始的方向
+        distance: '100px',//移动距离
+        duration: 1000, // 动画持续时间
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+
+      sr.reveal('.fadeInRight', {
+        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
+        origin: this.$store.getters.getModelType ? 'right' : 'bottom', // 动画开始的方向
+        distance: '100px',//移动距离
+        duration: 1000, // 动画持续时间
+        // scale: 0.8,
+        // viewFactor: 100,
+      })
+    },
     openDev () {
       window.open('https://dev.huorantech.cn')
     }