添加动画等

src/layouts/header/index.vue

@@ -74,6 +74,8 @@ $height: 90px;
   width: 100%;
   min-width: $min-width;
   height: $height;
+  border-bottom: 1px solid #f7f7f7;
+  box-sizing: content-box;
   &:not(.channel) {
     background-color: #fff;
   }

src/layouts/home/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['main', { channel: isChannel }]">
+  <div :class="['main', { channel: isChannel, 'site-en': handleClass() }]">
     <v-head></v-head>
     <div class="layout">
       <transition name="move" mode="out-in">
@@ -20,7 +20,8 @@ import { mapMutations } from 'vuex'
 export default {
   data() {
     return {
-      isChannel: this.$route.path === '/home'
+      isChannel: this.$route.path === '/home',
+      enSite: [1, 4, 6] // 英文站点id
     };
   },
   components: {
@@ -39,6 +40,9 @@ export default {
     ...mapMutations('content', [
       'setSite'
     ]),
+    handleClass() {
+      return this.enSite.includes(this.$route.query.siteId || this.$store.state.content.site)
+    },
     // 长时间未操作,自动退出登录
     autoLogout() {
       let lastTime = new Date().getTime();

src/mixins/page/index.js

@@ -54,8 +54,8 @@ export default {
       }
     },
     // 跳转文章页面
-    toArtice(item) {
-      this.$router.push(`/article?articleId=${item.id}&site=${this.$route.query.siteId || this.site}&id=${item.columnId}`)
+    toArtice(item, form) {
+      this.$router.push(`/article?articleId=${item.id}&site=${this.$route.query.siteId || this.site}&id=${this.id}&columnName=${form.columnTitle === 2 ? form.columnTitleCustom : form.columnName}&path=${this.$route.path.replace('/', '')}`)
     }
   }
 };

src/pages/about/index.vue

@@ -13,8 +13,8 @@
     
     <div class="block history gray">
       <div :class="['inner', {'cursor-pointer': modules[1].form.link.linkName !== '无'}]" @click="openLink(modules[1].form)">
-        <h2 style="margin-left: 57px">{{ modules[1].form.title }}</h2>
-        <div class="texts">
+        <h2 class="wow fadeInLeft" style="margin-left: 57px">{{ modules[1].form.title }}</h2>
+        <div class="texts wow fadeInDown" data-wow-delay="0.5s">
           <div class="left">
             <h2>{{ modules[1].form.subTitle }}</h2>
             <div class="line"></div>
@@ -27,22 +27,22 @@
 
     <div class="block">
       <div class="inner">
-        <h2 class="b-title">{{ modules[2].form.title }}</h2>
-        <p class="intro">{{ modules[2].form.des }}</p>
+        <h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
         <ul class="card">
-          <li :class="['item1', {'cursor-pointer': modules[3].form.link.linkName !== '无'}]" @click="openLink(modules[3].form)">
+          <li :class="['item1 wow fadeInLeft', {'cursor-pointer': modules[3].form.link.linkName !== '无'}]" data-wow-delay="0.7s" @click="openLink(modules[3].form)">
             <h6>{{ modules[3].form.title }}</h6>
             <div class="des" v-html="modules[3].form.des"></div>
           </li>
-          <li :class="['item2', {'cursor-pointer': modules[4].form.link.linkName !== '无'}]" @click="openLink(modules[4].form)">
+          <li :class="['item2 wow fadeInRight', {'cursor-pointer': modules[4].form.link.linkName !== '无'}]" data-wow-delay="0.9s" @click="openLink(modules[4].form)">
             <h6>{{ modules[4].form.title }}</h6>
             <div class="des" v-html="modules[4].form.des"></div>
           </li>
-          <li :class="['item3', {'cursor-pointer': modules[5].form.link.linkName !== '无'}]" @click="openLink(modules[5].form)">
+          <li :class="['item3 wow fadeInLeft', {'cursor-pointer': modules[5].form.link.linkName !== '无'}]" data-wow-delay="1.1s" @click="openLink(modules[5].form)">
             <h6>{{ modules[5].form.title }}</h6>
             <div class="des" v-html="modules[5].form.des"></div>
           </li>
-          <li :class="['item4', {'cursor-pointer': modules[6].form.link.linkName !== '无'}]" @click="openLink(modules[6].form)">
+          <li :class="['item4 wow fadeInRight', {'cursor-pointer': modules[6].form.link.linkName !== '无'}]" data-wow-delay="1.3s" @click="openLink(modules[6].form)">
             <h6>{{ modules[6].form.title }}</h6>
             <div class="des" v-html="modules[6].form.des"></div>
           </li>
@@ -52,30 +52,30 @@
 
     <div class="block gray">
       <div class="inner">
-        <h2 class="b-title">{{ modules[7].form.title }}</h2>
-        <p class="intro">{{ modules[7].form.des }}</p>
+        <h2 class="b-title wow fadeInUp">{{ modules[7].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[7].form.des }}</p>
         <ul class="stat">
-          <li>
+          <li class="wow fadeInLeft" data-wow-delay="0.2s">
             <p class="num">{{ modules[8].form.title }}</p>
             <p class="text">{{ modules[8].form.des }}</p>
           </li>
-          <li>
+          <li class="wow fadeInLeft" data-wow-delay="0.4s">
             <p class="num">{{ modules[9].form.title }}</p>
             <p class="text">{{ modules[9].form.des }}</p>
           </li>
-          <li>
+          <li class="wow fadeInLeft" data-wow-delay="0.6s">
             <p class="num">{{ modules[10].form.title }}</p>
             <p class="text">{{ modules[10].form.des }}</p>
           </li>
-          <li>
+          <li class="wow fadeInLeft" data-wow-delay="0.9s">
             <p class="num">{{ modules[11].form.title }}</p>
             <p class="text">{{ modules[11].form.des }}</p>
           </li>
-          <li>
+          <li class="wow fadeInLeft" data-wow-delay="1.1s">
             <p class="num">{{ modules[12].form.title }}</p>
             <p class="text">{{ modules[12].form.des }}</p>
           </li>
-          <li>
+          <li class="wow fadeInLeft" data-wow-delay="1.3s">
             <p class="num">{{ modules[13].form.title }}</p>
             <p class="text">{{ modules[13].form.des }}</p>
           </li>
@@ -85,8 +85,8 @@
 
     <div class="plan">
       <div :class="['inner', {'cursor-pointer': modules[14].form.link.linkName !== '无'}]" @click="openLink(modules[14].form)">
-        <img class="pic" :src="modules[14].form.pic" alt="">
-        <div class="texts">
+        <img class="pic wow fadeInLeft" :src="modules[14].form.pic" alt="">
+        <div class="texts wow fadeInRight">
           <h6>{{ modules[14].form.title }}</h6>
           <div class="des">{{ modules[14].form.des }}</div>
           <img src="@/assets/images/arrow-white.png" alt="">
@@ -96,11 +96,11 @@
 
     <div class="block">
       <div class="inner">
-        <h2 class="b-title">{{ modules[15].form.title }}</h2>
-        <p class="intro">{{ modules[15].form.des }}</p>
+        <h2 class="b-title wow fadeInUp">{{ modules[15].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[15].form.des }}</p>
         <ul class="people">
           <template v-for="(item, i) in modules[16].list">
-            <li v-if="item.isEnable" :key="i">
+            <li v-if="item.isEnable" :key="i" class="wow fadeInDown" data-wow-delay="0.5s">
               <img class="pic" :src="item.pic" alt="">
               <div class="texts">
                 <p class="sub">{{ item.subTitle }}</p>
@@ -116,20 +116,20 @@
 
     <div class="block list-block gray">
       <div class="inner">
-        <h2 class="b-title">{{ modules[17].form.title }}</h2>
-        <p class="intro">{{ modules[17].form.des }}</p>
+        <h2 class="b-title wow fadeInUp">{{ modules[17].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[17].form.des }}</p>
         <ul class="list">
-          <li :class="{'cursor-pointer': modules[18].form.link.linkName !== '无'}" @click="openLink(modules[18].form)">
+          <li class="wow fadeInDown" data-wow-delay="0.6s" :class="{'cursor-pointer': modules[18].form.link.linkName !== '无'}" @click="openLink(modules[18].form)">
             <img class="pic" :src="modules[18].form.pic" alt="">
             <h6>{{ modules[18].form.title }}</h6>
             <p class="des">{{ modules[18].form.des }}</p>
           </li>
-          <li :class="{'cursor-pointer': modules[19].form.link.linkName !== '无'}" @click="openLink(modules[19].form)">
+          <li class="wow fadeInDown" data-wow-delay="0.8s" :class="{'cursor-pointer': modules[19].form.link.linkName !== '无'}" @click="openLink(modules[19].form)">
             <img class="pic" :src="modules[19].form.pic" alt="">
             <h6>{{ modules[19].form.title }}</h6>
             <p class="des">{{ modules[19].form.des }}</p>
           </li>
-          <li :class="{'cursor-pointer': modules[20].form.link.linkName !== '无'}" @click="openLink(modules[20].form)">
+          <li class="wow fadeInDown" data-wow-delay="1s" :class="{'cursor-pointer': modules[20].form.link.linkName !== '无'}" @click="openLink(modules[20].form)">
             <img class="pic" :src="modules[20].form.pic" alt="">
             <h6>{{ modules[20].form.title }}</h6>
             <p class="des">{{ modules[20].form.des }}</p>
@@ -140,9 +140,9 @@
 
     <div class="block">
       <div class="inner staff-inner">
-        <h2 class="b-title">{{ modules[21].form.title }}</h2>
-        <p class="intro">{{ modules[21].form.des }}</p>
-        <div :class="['staff', {'cursor-pointer': modules[22].form.link.linkName !== '无'}]" @click="openLink(modules[22].form)">
+        <h2 class="b-title wow fadeInUp">{{ modules[21].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[21].form.des }}</p>
+        <div :class="['staff wow fadeInDown', {'cursor-pointer': modules[22].form.link.linkName !== '无'}]" data-wow-delay="0.7s" @click="openLink(modules[22].form)">
           <div class="left">
             <h6>{{ modules[22].form.title }}</h6>
             <div class="des">{{ modules[22].form.des }}</div>
@@ -158,6 +158,7 @@
 import mixins from '@/mixins/page'
 import Setting from '@/setting'
 import Util from '@/libs/util'
+import WOW from 'wow.js'
 export default {
   mixins: [mixins],
   data() {
@@ -166,7 +167,7 @@ export default {
     }
   },
   mounted() {
-    
+    new WOW().init()
   },
   methods: {
     // 获取文章详情
@@ -188,6 +189,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
 @import "../../styles/page/page.scss";
 .history {
   h2 {
@@ -201,6 +203,10 @@ export default {
     margin-top: 20px;
     background-color: #fff;
     border-radius: 100px 0px 0px 0px;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+    }
   }
   .left {
     width: 695px;
@@ -231,6 +237,10 @@ export default {
     padding: 70px 67px 20px;
     margin-bottom: 28px;
     color: #fff;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+    }
     &:nth-child(odd) {
       margin-right: 28px;
     }
@@ -268,11 +278,19 @@ export default {
     width: 42%;
     height: 488px;
     margin-bottom: -120px;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+    }
   }
   .texts {
     width: 51%;
     margin-top: 36px;
     color: #fff;
+    transition: .3s;
+    &:hover {
+      transform: translateY(20px);
+    }
   }
   h6 {
     font-size: 36px;
@@ -287,6 +305,10 @@ export default {
     display: flex;
     justify-content: space-between;
     margin-bottom: 126px;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+    }
     &:nth-child(even) {
       flex-direction: row-reverse;
     }
@@ -329,6 +351,10 @@ export default {
     margin-right: 28px;
     text-align: center;
     background-color: #F5F5F5;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+    }
     &:last-child {
       margin-right: 0;
     }
@@ -351,6 +377,10 @@ export default {
   display: flex;
   justify-content: space-between;
   background: #F8F8F8;
+  transition: .3s;
+  &:hover {
+    transform: scale(1.05);
+  }
   .staff-inner {
     width: 1581px;
   }

src/pages/application/index.vue

@@ -13,8 +13,8 @@
     
     <div class="block history gray">
       <div class="inner">
-        <h2 style="margin-left: 57px">{{ modules[1].form.title }}</h2>
-        <div class="texts">
+        <h2 class="wow fadeInLeft" style="margin-left: 57px">{{ modules[1].form.title }}</h2>
+        <div class="texts wow fadeInDown" data-wow-delay="0.5s">
           <div class="left">
             <h2>{{ modules[1].form.subTitle }}</h2>
             <div class="line"></div>
@@ -28,10 +28,10 @@
     
     <div class="block">
       <div class="inner app-inner">
-        <h2 class="b-title">{{ modules[2].form.title }}</h2>
-        <p class="intro">{{ modules[2].form.des }}</p>
+        <h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
         <ul class="app">
-          <li v-for="(item, i) in modules[3].list" :key="i" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
+          <li v-for="(item, i) in modules[3].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
             <img class="bg" :src="require('@/assets/images/application/app' + (i + 1) + '.png')" alt="">
             <img class="icon" :src="require('@/assets/images/application/app' + (i + 1) + '-1.png')" alt="">
             <p class="text">{{ item.title }}</p>
@@ -42,10 +42,10 @@
 
     <div class="block gray">
       <div class="inner">
-        <h2 class="b-title">{{ modules[4].form.title }}</h2>
-        <p class="intro">{{ modules[4].form.des }}</p>
+        <h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
         <ul class="group">
-          <li v-for="(item, i) in modules[5].list" :key="i" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
+          <li v-for="(item, i) in modules[5].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
             <img :src="item.pic" alt="">
             <p class="text">{{ item.title }}</p>
           </li>
@@ -55,10 +55,10 @@
 
     <div class="block news-block">
       <div class="inner">
-        <h2 class="b-title">{{ modules[6].form.title }}</h2>
-        <p class="intro">{{ modules[6].form.des }}</p>
+        <h2 class="b-title wow fadeInUp">{{ modules[6].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
         <ul class="news">
-          <li v-for="(item, i) in articles" :key="i" @click="toArtice(item)">
+          <li v-for="(item, i) in articles" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" @click="toArtice(item, modules[7].form)">
             <img :src="item.titleImg" alt="">
             <div class="texts">
               <h6>{{ item.title }}</h6>
@@ -76,6 +76,7 @@
 import mixins from '@/mixins/page'
 import Setting from '@/setting'
 import Util from '@/libs/util'
+import WOW from 'wow.js'
 export default {
   mixins: [mixins],
   data() {
@@ -84,7 +85,7 @@ export default {
     }
   },
   mounted() {
-    
+    new WOW().init()
   },
   methods: {
     // 获取文章详情
@@ -114,6 +115,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
 @import "../../styles/page/page.scss";
 .history {
   h2 {
@@ -127,6 +129,10 @@ export default {
     margin-top: 20px;
     background-color: #fff;
     border-radius: 100px 0px 0px 0px;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+    }
   }
   .left {
     width: 695px;
@@ -156,6 +162,13 @@ export default {
     width: 368px;
     height: 252px;
     margin: 0 14px 14px 0;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+      .icon {
+        transform: rotateY(180deg);
+      }
+    }
     &:first-child {
       width: 750px;
     }
@@ -178,6 +191,7 @@ export default {
   }
   .icon {
     position: relative;
+    transition: .3s;
   }
   .text {
     position: relative;
@@ -193,6 +207,10 @@ export default {
     position: relative;
     width: calc((100% - 56px) / 3);
     margin: 0 28px 39px 0;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+    }
     &:nth-child(3n) {
       margin-right: 0;
     }
@@ -202,13 +220,17 @@ export default {
     height: 353px;
   }
   .text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 143px;
     font-size: 30px;
     font-family: SFProDisplay-Bold, SFProDisplay;
     font-weight: bold;
-    line-height: 143px;
-    color: #272727;
+    line-height: 40px;
     text-align: center;
-    background-color: #fff;
+    color: #272727;
+    background-color: #F5F5F5;
   }
 }
 .news-block {
@@ -225,6 +247,10 @@ export default {
     margin-bottom: 28px;
     background-color: #fff;
     cursor: pointer;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+    }
     &:nth-child(odd) {
       margin-right: 28px;
     }

src/pages/article/activity.vue

@@ -78,11 +78,13 @@ export default {
     getInfo() {
       this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
         // 设置面包屑
+        const { columnName, path, id } = this.$route.query
         this.routes = [
           {
-            name: data.columnName,
+            name: columnName || data.columnName,
+            path: '/' + path,
             query: {
-              id: data.columnId
+              id: id || data.columnId
             }
           },
           {
@@ -194,7 +196,7 @@ export default {
     margin-bottom: 25px;
   }
   /deep/.el-tree-node__content {
-    height: 60px;
+    height: 44px;
     background-color: #E5EDF8;
     border-bottom: 2px solid #fff;
   }

src/pages/article/index.vue

@@ -88,11 +88,13 @@ export default {
     getInfo() {
       this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
         // 设置面包屑
+        const { columnName, path, id } = this.$route.query
         this.routes = [
           {
-            name: data.columnName,
+            name: columnName || data.columnName,
+            path: '/' + path,
             query: {
-              id: data.columnId
+              id: id || data.columnId
             }
           },
           {
@@ -103,7 +105,7 @@ export default {
           this.$router.back()
         } else {
           if (data.articleTemplate === 25) { // 会议活动
-            this.$router.replace(`/article/activity?articleId=${this.id}&id=${this.$route.query.columnId}`)
+            this.$router.replace(`/article/activity?articleId=${this.id}&id=${id}&columnName=${columnName}&path=${path}`)
           } else {
             this.form = data
             this.columnId = data.columnId
@@ -239,7 +241,7 @@ export default {
     margin-bottom: 25px;
   }
   /deep/.el-tree-node__content {
-    height: 60px;
+    height: 44px;
     background-color: #E5EDF8;
     border-bottom: 2px solid #fff;
   }

src/pages/careers/index.vue

@@ -14,7 +14,7 @@
     <div class="block">
       <div class="inner">
         <ul class="card">
-          <li>
+          <li class="wow fadeInDown" data-wow-delay="0.1s">
             <img class="pic" :src="modules[1].form.pic" alt="">
             <div class="texts">
               <h6>{{ modules[1].form.title }}</h6>
@@ -24,7 +24,7 @@
               <img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': modules[1].form.link.linkName !== '无'}" @click="openLink(modules[1].form)">
             </div>
           </li>
-          <li>
+          <li class="wow fadeInDown" data-wow-delay="0.3s">
             <img class="pic" :src="modules[2].form.pic" alt="">
             <div class="texts">
               <h6>{{ modules[2].form.title }}</h6>
@@ -34,7 +34,7 @@
               <img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': modules[2].form.link.linkName !== '无'}" @click="openLink(modules[2].form)">
             </div>
           </li>
-          <li>
+          <li class="wow fadeInDown" data-wow-delay="0.5s">
             <img class="pic" :src="modules[3].form.pic" alt="">
             <div class="texts">
               <h6>{{ modules[3].form.title }}</h6>
@@ -44,7 +44,7 @@
               <img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': modules[3].form.link.linkName !== '无'}" @click="openLink(modules[3].form)">
             </div>
           </li>
-          <li>
+          <li class="wow fadeInDown" data-wow-delay="0.7s">
             <img class="pic" :src="modules[4].form.pic" alt="">
             <div class="texts">
               <h6>{{ modules[4].form.title }}</h6>
@@ -60,11 +60,11 @@
 
     <div class="block gray">
       <div class="inner">
-        <h2 class="b-title">{{ modules[5].form.title }}</h2>
-        <p class="intro">{{ modules[5].form.des }}</p>
+        <h2 class="b-title wow fadeInUp">{{ modules[5].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[5].form.des }}</p>
         <ul class="people">
           <template v-for="(item, i) in modules[6].list">
-            <li v-if="item.isEnable" :key="i" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
+            <li v-if="item.isEnable" :key="i" class="wow fadeInDown" data-wow-delay="0.5s" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
               <img class="comma" src="@/assets/images/comma.png" alt="">
               <div class="left">
                 <h6>{{ item.title }}</h6>
@@ -79,12 +79,12 @@
 
     <ul class="shows">
       <template v-for="(item, i) in modules[7].list">
-        <li v-if="item.isEnable" :key="i">
+        <li v-if="item.isEnable" :key="i" class="wow fadeInDown" data-wow-delay="0.3s">
           <div class="left">
             <h6>{{ item.title }}</h6>
             <div class="sub">{{ item.subTitle }}</div>
             <div class="des">{{ item.des }}</div>
-            <img src="@/assets/images/arrow-white.png" alt="" :class="{'arrow': item.link.linkName !== '无'}" @click="openLink(item)">
+            <img src="@/assets/images/arrow-white.png" alt="" class="icon" :class="{'arrow': item.link.linkName !== '无'}" @click="openLink(item)">
           </div>
           <img class="pic" :src="item.pic" alt="">
         </li>
@@ -97,6 +97,7 @@
 import mixins from '@/mixins/page'
 import Setting from '@/setting'
 import Util from '@/libs/util'
+import WOW from 'wow.js'
 export default {
   mixins: [mixins],
   data() {
@@ -105,7 +106,7 @@ export default {
     }
   },
   mounted() {
-    
+    new WOW().init()
   },
   methods: {
     // 获取文章详情
@@ -127,6 +128,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
 @import "../../styles/page/page.scss";
 .card {
   display: flex;
@@ -185,6 +187,10 @@ export default {
     padding: 100px 70px 30px 57px;
     margin-bottom: 100px;
     background-color: #fff;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+    }
     &:nth-child(even) {
       display: flex;
       justify-content: flex-end;
@@ -233,6 +239,11 @@ export default {
     height: 654px;
     margin-bottom: 40px;
     color: #fff;
+    &:hover .left {
+      h6, .sub, .des, .icon {
+        transform: translateY(20px);
+      }
+    }
     &:nth-child(even) {
       flex-direction: row-reverse;
     }
@@ -264,14 +275,20 @@ export default {
   }
   h6 {
     font-size: 46px;
+    transition: .3s;
   }
   .sub {
     margin: 20px;
     font-size: 36px;
+    transition: .3s;
   }
   .des {
     margin-bottom: 40px;
     font-size: 24px;
+    transition: .3s;
+  }
+  .icon {
+    transition: .3s;
   }
 }
 </style>

src/pages/column/index.vue

@@ -107,6 +107,7 @@
               <span class="date">{{ item.createTime }}</span>
             </li>
           </ul>
+          <div class="shadow"></div>
         </div>
       </div>
     </div>
@@ -239,14 +240,15 @@ export default {
     getLeftColumn() {
       this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}`).then(({ data }) => {
         const fromColumn = this.$route.query.column // 有column标识的，说明是通过点击左侧导航跳转过来的，这种情况只查询该栏目下的文章
-        this.sameStyle = !fromColumn
+        this.sameStyle = 1
         this.allColumnId = []
-        fromColumn || data.length && this.handleColumn(data, data[0].listStyleId)
-        this.getArticle(this.sameStyle ? this.allColumnId : [+this.$route.query.id])
+        data.length && this.handleColumn(data, data[0].listStyleId)
+        this.getArticle(this.sameStyle && !fromColumn ? this.allColumnId : [+this.$route.query.id])
         this.columns = data
         this.$nextTick(() => {
           const el = this.$refs.leftColumn
-          el && el.setCurrentKey(this.sameStyle ? data[0].id : this.id)
+          // el && el.setCurrentKey(this.sameStyle && !fromColumn ? data[0].id : this.id)
+          el && el.setCurrentKey(this.id)
         })
       }).catch(err => {})
     },
@@ -315,7 +317,7 @@ export default {
         this.$router.push(`/${to.path}?id=${to.id}`).catch(err => {})
       } else if (left && (typeId === 1 || (typeId === 4 && !to.children.length))) {
         // 常规栏目跳转到column页
-        this.$router.push(`/column?id=${to.id + (left ? '&column=1' : '')}`).catch(err => {})
+        this.$router.push(`/column?id=${to.id + (left && (to.level !== 1 || !this.sameStyle) ? '&column=1' : '')}`).catch(err => {})
       }
     },
     // 查询文章列表
@@ -378,6 +380,7 @@ export default {
   position: relative;
   height: 280px;
   font-size: 48px;
+  font-weight: 600;
   color: #fff;
   .text {
     position: absolute;
@@ -388,7 +391,9 @@ export default {
 }
 .column-wrap {
   padding: 40px 0;
-  background: #F9FAFA url(../../assets/images/column-bg.png) no-repeat;
+  background: url(../../assets/images/column-bg.png) 0 0/auto no-repeat,
+              url(../../assets/images/column-bg2.png) bottom right/auto auto no-repeat;
+  background-color: #F9FAFA;
 }
 .article {
   display: flex;
@@ -495,7 +500,7 @@ export default {
       font-size: 16px;
       color: #666;
       background-color: #fff;
-      border-bottom: 1px solid #F8F9F9;
+      border-top: 1px solid #F8F9F9;
       cursor: pointer;
       &:before {
         content: '';
@@ -522,6 +527,8 @@ export default {
       right: 10px;
     }
     .is-current > .el-tree-node__content {
+      background-color: #E5EDF8;
+      border-top: 0;
       &:after {
         content: '';
         z-index: 2;
@@ -550,6 +557,7 @@ export default {
     .texts {
       max-width: 620px;
       padding-left: 30px;
+      margin-right: 20px;
     }
     .type {
       margin-bottom: 15px;
@@ -578,8 +586,8 @@ export default {
       @include mul-ellipsis(2);
     }
     .pic {
-      width: 45%;
-      min-width: 380px;
+      width: 430px;
+      // min-width: 380px;
       height: 244px;
     }
   }
@@ -592,7 +600,7 @@ export default {
     width: 100%;
     margin-bottom: 25px;
     /deep/.el-tree-node__content {
-      height: 60px;
+      height: 44px;
       background-color: #E5EDF8;
       border-bottom: 2px solid #fff;
     }

src/pages/edu/index.vue

@@ -13,27 +13,27 @@
 
     <div class="block gray">
       <div class="inner">
-        <h2 class="b-title">{{ modules[1].form.title }}</h2>
-        <p class="intro">{{ modules[1].form.des }}</p>
-        <img :class="{'cursor-pointer': modules[1].form.link.linkName !== '无'}" width="100%" height="536" :src="modules[1].form.pic" alt="" @click="openLink(modules[1].form)">
+        <h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.8s">{{ modules[1].form.des }}</p>
+        <img class="block-pic wow fadeInLeft" data-wow-delay="0.8s" :class="{'cursor-pointer': modules[1].form.link.linkName !== '无'}" width="100%" height="536" :src="modules[1].form.pic" alt="" @click="openLink(modules[1].form)">
       </div>
     </div>
     
     <div class="block">
       <div class="inner">
-        <h2 class="b-title">{{ modules[2].form.title }}</h2>
-        <p class="intro">{{ modules[2].form.des }}</p>
-        <img :class="{'cursor-pointer': modules[2].form.link.linkName !== '无'}" width="100%" height="536" :src="modules[2].form.pic" alt="" @click="openLink(modules[2].form)">
+        <h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.8s">{{ modules[2].form.des }}</p>
+        <img class="block-pic wow fadeInRight" data-wow-delay="0.8s" :class="{'cursor-pointer': modules[2].form.link.linkName !== '无'}" width="100%" height="536" :src="modules[2].form.pic" alt="" @click="openLink(modules[2].form)">
       </div>
     </div>
     
     <div class="block gray">
       <div class="inner">
-        <h2 class="b-title">{{ modules[3].form.title }}</h2>
-        <p class="intro">{{ modules[3].form.des }}</p>
+        <h2 class="b-title wow fadeInUp">{{ modules[3].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[3].form.des }}</p>
         <ul class="list">
           <template v-for="(item, i) in modules[4].list">
-            <li v-if="item.isEnable" :key="i">
+            <li v-if="item.isEnable" :key="i" class="wow fadeInUp" data-wow-delay="0.5s">
               <img class="pic" :src="item.pic" alt="" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
               <div class="texts">
                 <h6>{{ item.title }}</h6>
@@ -52,6 +52,7 @@
 import mixins from '@/mixins/page'
 import Setting from '@/setting'
 import Util from '@/libs/util'
+import WOW from 'wow.js'
 export default {
   mixins: [mixins],
   data() {
@@ -60,7 +61,7 @@ export default {
     }
   },
   mounted() {
-    
+    new WOW().init()
   },
   methods: {
     // 获取文章详情
@@ -82,7 +83,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
 @import "../../styles/page/page.scss";
+.block-pic {
+  transition: .3s;
+  &:hover {
+    transform: scale(1.05);
+  }
+}
 .list {
   li {
     position: relative;
@@ -105,6 +113,10 @@ export default {
     height: 440px;
     padding: 60px 30px 30px 100px;
     background-color: #fff;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+    }
   }
   h6 {
     font-size: 40px;

src/pages/home/index.vue

@@ -10,10 +10,10 @@
     
     <div class="block">
       <div class="inner">
-        <h2 class="b-title">{{ modules[1].form.title }}</h2>
-        <p class="intro">{{ modules[1].form.des }}</p>
+        <h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[1].form.des }}</p>
         <ul class="card">
-          <li>
+          <li class="wow fadeInDown" data-wow-delay="0.2s">
             <img class="pic" :src="modules[2].form.pic" alt="">
             <div class="texts">
               <h6>{{ modules[2].form.title }}</h6>
@@ -21,7 +21,7 @@
               <img src="@/assets/images/arrow.png" alt="" :class="{'arrow': modules[2].form.link.linkName !== '无'}" @click="openLink(modules[2].form)">
             </div>
           </li>
-          <li>
+          <li class="wow fadeInDown" data-wow-delay="0.6s">
             <img class="pic" :src="modules[3].form.pic" alt="">
             <div class="texts">
               <h6>{{ modules[3].form.title }}</h6>
@@ -35,10 +35,10 @@
     
     <div class="block news-block">
       <div class="inner">
-        <h2 class="b-title">{{ modules[4].form.title }}</h2>
-        <p class="intro">{{ modules[4].form.des }}</p>
+        <h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
         <ul class="news">
-          <li v-for="(item, i) in articles" :key="i" @click="toArtice(item)">
+          <li class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" v-for="(item, i) in articles" :key="i" @click="toArtice(item, modules[5].form)">
             <img :src="item.titleImg" alt="">
             <div class="texts">
               <h6>{{ item.title }}</h6>
@@ -52,11 +52,11 @@
     
     <div class="block">
       <div class="inner">
-        <h2 class="b-title">{{ modules[6].form.title }}</h2>
-        <p class="intro">{{ modules[6].form.des }}</p>
+        <h2 class="b-title wow fadeInUp">{{ modules[6].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
         <ul class="people">
           <template v-for="(item, i) in modules[7].list">
-            <li v-if="item.isEnable" :key="i">
+            <li v-if="item.isEnable" :key="i" class="wow fadeInDown" :data-wow-delay="(0.4 * i).toFixed(1) + 's'">
               <img class="pic" :src="item.pic" alt="">
               <div class="texts">
                 <h6>{{ item.title }}</h6>
@@ -71,38 +71,38 @@
 
     <div class="about" :class="{'cursor-pointer': modules[8].form.link.linkName !== '无'}" @click="openLink(modules[8].form)">
       <div class="inner">
-        <img src="@/assets/images/about.png" alt="">
-        <div class="line"></div>
-        <div class="text">{{ modules[8].form.title }}</div>
-        <div class="des" v-html="modules[8].form.des"></div>
+        <img class="wow fadeInUp" src="@/assets/images/about.png" alt="">
+        <div class="line wow fadeInUp" data-wow-delay="0.4s"></div>
+        <div class="text wow fadeInUp" data-wow-delay="0.7s">{{ modules[8].form.title }}</div>
+        <div class="des wow fadeInDown" data-wow-delay="1s" v-html="modules[8].form.des"></div>
       </div>
     </div>
 
     <div class="block" style="padding-bottom: 0">
       <div class="inner">
-        <h2 class="glance">{{ modules[9].form.title }}</h2>
+        <h2 class="glance wow fadeInUp">{{ modules[9].form.title }}</h2>
         <ul class="stat">
-          <li>
+          <li class="wow fadeInRight" data-wow-delay="0.2s">
             <p class="num">{{ modules[10].form.title }}</p>
             <p class="text">{{ modules[10].form.des }}</p>
           </li>
-          <li>
+          <li class="wow fadeInRight" data-wow-delay="0.4s">
             <p class="num">{{ modules[11].form.title }}</p>
             <p class="text">{{ modules[11].form.des }}</p>
           </li>
-          <li>
+          <li class="wow fadeInRight" data-wow-delay="0.6s">
             <p class="num">{{ modules[12].form.title }}</p>
             <p class="text">{{ modules[12].form.des }}</p>
           </li>
-          <li>
+          <li class="wow fadeInRight" data-wow-delay="0.9s">
             <p class="num">{{ modules[13].form.title }}</p>
             <p class="text">{{ modules[13].form.des }}</p>
           </li>
-          <li>
+          <li class="wow fadeInRight" data-wow-delay="1.2s">
             <p class="num">{{ modules[14].form.title }}</p>
             <p class="text">{{ modules[14].form.des }}</p>
           </li>
-          <li>
+          <li class="wow fadeInRight" data-wow-delay="1.5s">
             <p class="num">{{ modules[15].form.title }}</p>
             <p class="text">{{ modules[15].form.des }}</p>
           </li>
@@ -116,6 +116,7 @@
 import mixins from '@/mixins/page'
 import Setting from '@/setting'
 import Util from '@/libs/util'
+import WOW from 'wow.js'
 export default {
   mixins: [mixins],
   data() {
@@ -124,7 +125,7 @@ export default {
     }
   },
   mounted() {
-    
+    new WOW().init()
   },
   methods: {
     // 获取文章详情
@@ -154,12 +155,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
 @import "../../styles/page/page.scss";
 .card {
   display: flex;
   justify-content: space-between;
   li {
     width: 47%;
+    transition: .3s;
+    &:hover{
+      margin-top: -15px;
+    }
   }
   .pic {
     width: 100%;
@@ -196,9 +202,13 @@ export default {
     background-color: #fff;
     cursor: pointer;
     overflow: hidden;
+    transition: .3s;
     &:nth-child(odd) {
       margin-right: 28px;
     }
+    &:hover{
+      transform: scale(1.05);
+    }
   }
   img {
     width: 237px;
@@ -229,9 +239,13 @@ export default {
     display: flex;
     justify-content: space-between;
     margin-bottom: 126px;
+    transition: .3s;
     &:nth-child(even) {
       flex-direction: row-reverse;
     }
+    &:hover {
+      transform: scale(1.05);
+    }
   }
   .pic {
     width: 47%;
@@ -312,6 +326,10 @@ export default {
     background: rgba(111, 69, 36, .56);
     border-radius: 17px;
     overflow: visible;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+    }
   }
 }
 </style>

src/pages/news/index.vue

@@ -11,64 +11,67 @@
       </template>
     </el-carousel>
 
-    <ul class="tabs">
+    <ul class="tabs wow fadeInLeft">
       <template v-for="(item, i) in modules[1].list">
         <li v-if="item.columnName" :class="{active: i == curColumn}" :key="i" @click="tabChange(i)">{{ item.columnName }}</li>
       </template>
     </ul>
 
     <div class="block">
-      <div class="inner" v-if="modules[1].list[this.curColumn].articles.length">
-        <el-carousel class="articles" height="410px" arrow="never">
-          <template v-for="(item, i) in modules[1].list[this.curColumn].articles">
-            <el-carousel-item v-if="i < 3" :key="i">
-              <div class="banner" @click="toArtice(item)">
-                <img width="50%" height="480" :src="item.titleImg" alt="">
-                <div class="right">
-                  <h6>{{ item.title }}</h6>
-                  <div class="des" v-html="item.mainBody"></div>
-                  <p class="meta">{{ item.createTime }} {{ item.author && ' | ' + item.author }}</p>
-                </div>
-              </div>
-            </el-carousel-item>
-          </template>
-        </el-carousel>
+      <div class="inner" v-if="modules[1].list[curColumn].articles.length">
+        <div class="banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[1].list[curColumn])">
+          <el-carousel ref="carousel" class="articles" height="410px" arrow="never" :autoplay="false">
+            <template v-for="(item, i) in modules[1].list[curColumn].articles">
+              <el-carousel-item v-if="i < 3" :key="i">
+                <img width="100%" height="480" :src="item.titleImg" alt="">
+              </el-carousel-item>
+            </template>
+          </el-carousel>
+          <div class="right">
+            <h6>{{ curArticle.title }}</h6>
+            <div class="des" v-html="curArticle.mainBody"></div>
+            <p class="meta">{{ curArticle.createTime }} {{ curArticle.author && ' | ' + curArticle.author }}</p>
+            <ul class="inds">
+              <li v-for="i in 3" :key="i" :class="{active: curInd == i - 1}" @click.stop="switchCarousel(i - 1)"></li>
+            </ul>
+          </div>
+        </div>
         
         <ul class="card">
-          <template v-for="(item, i) in modules[1].list[this.curColumn].articles">
-            <li v-if="i > 2" :key="i" @click="toArtice(item)">
+          <template v-for="(item, i) in modules[1].list[curColumn].articles">
+            <li v-if="i > 2" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
               <img class="pic" :src="item.titleImg" alt="">
               <div class="texts">
                 <p class="meta">{{ item.createTime }} {{ item.author && ' | ' + item.author }}</p>
                 <div class="des">{{ item.title }}</div>
-                <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item)">
+                <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[1].list[curColumn])">
               </div>
             </li>
           </template>
         </ul>
-        <div class="more" @click="toMore">More news ></div>
+        <div class="more wow fadeInDown" data-wow-delay="0.5s" @click="toMore">More news ></div>
       </div>
     </div>
 
     <div class="block gray">
       <div class="inner lg">
-        <h2 class="b-title">{{ modules[2].form.title }}</h2>
-        <p class="intro">{{ modules[2].form.des }}</p>
+        <h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
         <div class="shop-shows" v-if="articles.length">
-          <div class="left">
+          <div class="left wow fadeInLeft" data-wow-delay="0.5s">
             <img width="100%" height="400" :src="articles[0].titleImg" alt="">
             <div class="texts">
               <h6>{{ articles[0].title }}</h6>
               <div class="des" v-html="articles[0].mainBody"></div>
             </div>
           </div>
-          <div class="right">
+          <div class="right wow fadeInRight" data-wow-delay="0.5s">
             <ul class="show-card">
-              <li v-if="articles[1]" @click="toArtice(articles[1])">
+              <li v-if="articles[1]" @click="toArtice(articles[1], modules[3].form)">
                 <img class="pic" :src="articles[1].titleImg" alt="">
                 <div class="des">{{ articles[1].title }}</div>
               </li>
-              <li v-if="articles[2]" @click="toArtice(articles[2])">
+              <li v-if="articles[2]" @click="toArtice(articles[2], modules[3].form)">
                 <img class="pic" :src="articles[2].titleImg" alt="">
                 <div class="des">{{ articles[2].title }}</div>
               </li>
@@ -81,7 +84,7 @@
                     <h6>{{ item.title }}</h6>
                     <div class="des" v-html="item.mainBody"></div>
                   </div>
-                  <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item)">
+                  <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[3].form)">
                 </li>
               </template>
             </ul>
@@ -92,10 +95,10 @@
 
     <div class="block conference">
       <div class="inner lg">
-        <h2 class="b-title">{{ modules[4].form.title }}</h2>
-        <p class="intro">{{ modules[4].form.des }}</p>
+        <h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
         <div class="shows" v-if="articles1.length">
-          <div class="left">
+          <div class="left wow fadeInLeft" data-wow-delay="0.5s">
             <img width="100%" height="558" :src="articles1[0].titleImg" alt="">
             <div class="texts">
               <div class="meta">
@@ -108,9 +111,9 @@
               </div>
             </div>
           </div>
-          <ul class="card-list">
+          <ul class="card-list wow fadeInRight" data-wow-delay="0.5s">
             <template v-for="(item, i) in articles1">
-              <li v-if="i" :key="i" @click="toArtice(item)">
+              <li v-if="i" :key="i" @click="toArtice(item, modules[5].form)">
                 <img class="pic" :src="item.titleImg" alt="">
                 <div class="texts">
                   <h6>{{ item.title }}</h6>
@@ -140,17 +143,20 @@
 import mixins from '@/mixins/page'
 import Setting from '@/setting'
 import Util from '@/libs/util'
+import WOW from 'wow.js'
 export default {
   mixins: [mixins],
   data() {
     return {
       curColumn: 0,
       articles: [],
-      articles1: []
+      articles1: [],
+      curInd: 0,
+      curArticle: {}
     }
   },
   mounted() {
-    
+    new WOW().init()
   },
   methods: {
     // 获取文章详情
@@ -167,13 +173,15 @@ export default {
           // 获取文章列表
           const { list } = json[1]
           if (list.length) {
-            list.map(e => {
+            list.map((e, i) => {
               if (e.site && e.column.length) {
                 const id = e.column[e.column.length - 1]
                 e.id = id
                 if (e.columnTitle === 2) e.columnName = e.columnTitleCustom
                 this.$post(`${this.api.queryArticlesByColumnType}?columnId=${id}`).then(({ data }) => {
-                  this.$set(e, 'articles', Util.removeTag(data.slice(0, e.articleNum || 6)))
+                  const list = Util.removeTag(data.slice(0, e.articleNum || 6))
+                  this.$set(e, 'articles', list)
+                  if (list.length && !i) this.curArticle = list[0]
                 }).catch(err => {})
               } else {
                 this.$set(e, 'articles', [])
@@ -198,6 +206,14 @@ export default {
         }
       }).catch(err => {})
     },
+    // 手动轮播切换
+    switchCarousel(i) {
+      if (this.curInd !== i) {
+        this.$refs.carousel[this.curInd > i ? 'prev' : 'next']()
+        this.curInd = i
+        this.curArticle = this.modules[1].list[this.curColumn].articles[i]
+      }
+    },
     // tab回调
     tabChange(i) {
       const { column } = this.modules[1].list[i]
@@ -251,6 +267,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
 @import "../../styles/page/page.scss";
 .tabs {
   display: flex;
@@ -274,6 +291,7 @@ export default {
   width: 1505px;
 }
 /deep/.articles {
+  width: 50%;
   .el-carousel__indicators--horizontal {
     bottom: 20px;
     left: 804px;
@@ -287,21 +305,49 @@ export default {
     height: 380px;
   }
   .right {
+    position: relative;
     width: 50%;
     padding: 50px 50px 30px;
     background: #1583FF;
     color: #fff;
+    &:hover {
+      h6, .des, .meta {
+        transform: translateY(15px);
+      }
+    }
+  }
+  .inds {
+    position: absolute;
+    bottom: 40px;
+    left: 60px;
+    display: flex;
+    li {
+      width: 10px;
+      height: 10px;
+      margin-right: 12px;
+      background: #FFFFFF;
+      border-radius: 50%;
+      transition: .2s;
+      &.active {
+        width: 30px;
+        background: rgba(255,255,255,0.3);
+        border-radius: 5px;
+      }
+    }
   }
   h6 {
     font-size: 24px;
+    transition: .3s;
   }
   .des {
     margin: 30px 0;
     font-size: 16px;
     line-height: 24px;
+    transition: .3s;
   }
   .meta {
     font-size: 16px;
+    transition: .3s;
   }
 }
 .card {
@@ -313,7 +359,10 @@ export default {
     margin-right: 28px;
     box-shadow: 0px 0px 20px 0px rgba(176,176,176,0.21);
     border-radius: 6px;
-    cursor: pointer;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+    }
     &:last-child {
       margin-right: 0;
     }
@@ -332,6 +381,8 @@ export default {
   .des {
     margin: 10px 0;
     font-size: 20px;
+    font-family: SFProDisplay;
+    font-weight: 500;
     color: #333;
     line-height: 28px;
   }
@@ -378,6 +429,7 @@ export default {
     margin-bottom: 20px;
     li {
       position: relative;
+      cursor: pointer;
       &:first-child {
         margin-right: 22px;
       }
@@ -406,7 +458,10 @@ export default {
       display: inline-flex;
       align-items: center;
       margin-bottom: 38px;
-      cursor: pointer;
+      transition: .3s;
+      &:hover {
+        transform: scale(1.05);
+      }
       &:last-child {
         margin-bottom: 0;
       }
@@ -488,6 +543,10 @@ export default {
       margin-bottom: 13px;
       background-color: #fff;
       cursor: pointer;
+      transition: .3s;
+      &:hover {
+        transform: translateX(20px);
+      }
     }
     .pic {
       width: 188px;

src/pages/newsPress/index.vue

@@ -16,8 +16,8 @@
       <ul class="list">
         <template v-for="(item, i) in modules[1].list">
           <li v-if="item.isEnable" :key="i">
-            <img class="pic" :src="item.pic" alt="">
-            <div class="texts">
+            <img class="pic wow fadeInLeft" data-wow-delay="0.1s" :src="item.pic" alt="">
+            <div class="texts wow fadeInRight" data-wow-delay="0.1s">
               <h6>{{ item.title }}</h6>
               <p class="sub">{{ item.subTitle }}</p>
               <div class="des">{{ item.des }}</div>
@@ -35,6 +35,7 @@ import mixins from '@/mixins/page'
 import Setting from '@/setting'
 import Util from '@/libs/util'
 import Breadcrumb from '@/components/breadcrumb'
+import WOW from 'wow.js'
 export default {
   mixins: [mixins],
   data() {
@@ -46,6 +47,7 @@ export default {
     Breadcrumb
   },
   mounted() {
+    new WOW().init()
     this.getColumn()
   },
   methods: {
@@ -96,12 +98,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
 @import "../../styles/page/page.scss";
 .inner {
   padding-top: 35px;
 }
 .list {
-  margin-top: 40px;
+  margin: 40px 0;
   li {
     position: relative;
     &:nth-child(even) {
@@ -125,6 +128,10 @@ export default {
     height: 440px;
     padding: 60px 30px 30px 100px;
     background: rgba(247, 247, 247, .72);
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+    }
   }
   h6 {
     font-size: 40px;

src/pages/newsProcurement/index.vue

@@ -16,8 +16,8 @@
       <ul class="list">
         <template v-for="(item, i) in modules[1].list">
           <li v-if="item.isEnable" :key="i">
-            <img class="pic" :src="item.pic" alt="">
-            <div class="texts">
+            <img class="pic wow fadeInLeft" data-wow-delay="0.1s" :src="item.pic" alt="">
+            <div class="texts wow fadeInRight" data-wow-delay="0.1s">
               <h6>{{ item.title }}</h6>
               <p class="sub">{{ item.subTitle }}</p>
               <div class="des">{{ item.des }}</div>
@@ -35,6 +35,7 @@ import mixins from '@/mixins/page'
 import Setting from '@/setting'
 import Util from '@/libs/util'
 import Breadcrumb from '@/components/breadcrumb'
+import WOW from 'wow.js'
 export default {
   mixins: [mixins],
   data() {
@@ -46,6 +47,7 @@ export default {
     Breadcrumb
   },
   mounted() {
+    new WOW().init()
     this.getColumn()
   },
   methods: {
@@ -96,12 +98,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
 @import "../../styles/page/page.scss";
 .inner {
   padding-top: 35px;
 }
 .list {
-  margin-top: 40px;
+  margin: 40px 0;
   li {
     position: relative;
     &:nth-child(even) {

src/pages/research/index.vue

@@ -12,10 +12,10 @@
     </el-carousel>
 
     <div class="block">
-      <h2 class="b-title">{{ modules[1].form.title }}</h2>
-      <p class="intro">{{ modules[1].form.des }}</p>
+      <h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
+      <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[1].form.des }}</p>
       <ul class="area">
-        <li v-for="(item, i) in modules[2].list" :key="i" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
+        <li v-for="(item, i) in modules[2].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
           <img :src="item.pic" alt="" class="pic">
           <div class="texts">
             <img :src="require('@/assets/images/research/res' + (i + 1) + '-1.png')" alt="" class="icon">
@@ -28,10 +28,10 @@
 
     <div class="block gray">
       <div class="inner">
-        <h2 class="b-title">{{ modules[3].form.title }}</h2>
-        <p class="intro">{{ modules[3].form.des }}</p>
+        <h2 class="b-title wow fadeInUp">{{ modules[3].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[3].form.des }}</p>
         <ul class="group">
-          <li v-for="(item, i) in modules[4].list" :key="i" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
+          <li v-for="(item, i) in modules[4].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
             <img :src="item.pic" alt="">
             <p class="text">{{ item.title }}</p>
           </li>
@@ -41,10 +41,10 @@
     
     <div class="block">
       <div class="inner news-inner">
-        <h2 class="b-title">{{ modules[5].form.title }}</h2>
-        <p class="intro">{{ modules[5].form.des }}</p>
+        <h2 class="b-title wow fadeInUp">{{ modules[5].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[5].form.des }}</p>
         <ul class="news">
-          <li v-for="(item, i) in modules[6].list" :key="i" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
+          <li v-for="(item, i) in modules[6].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
             <img :src="item.pic" alt="">
             <div class="texts">
               <h6>{{ item.title }}</h6>
@@ -61,6 +61,7 @@
 import mixins from '@/mixins/page'
 import Setting from '@/setting'
 import Util from '@/libs/util'
+import WOW from 'wow.js'
 export default {
   mixins: [mixins],
   data() {
@@ -69,7 +70,7 @@ export default {
     }
   },
   mounted() {
-    
+    new WOW().init()
   },
   methods: {
     // 获取文章详情
@@ -91,6 +92,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
 @import "../../styles/page/page.scss";
 .area {
   display: flex;
@@ -100,6 +102,13 @@ export default {
     height: 653px;
     color: #fff;
     background: url(../../assets/images/research/res1.png) 0 0/100% 100% no-repeat;
+    transition: .3s;
+    &:hover {
+      transform: translateY(20px);
+      .icon {
+        transform: rotateY(360deg);
+      }
+    }
     &:nth-child(2) {
       width: 21%;
       margin-top: 70px;
@@ -129,6 +138,9 @@ export default {
     width: 100%;
     height: 443px;
   }
+  .icon {
+    transition: .3s;
+  }
   .texts {
     width: 100%;
     height: 210px;
@@ -152,6 +164,10 @@ export default {
     position: relative;
     width: calc((100% - 56px) / 3);
     margin: 0 28px 39px 0;
+    transition: .3s;
+    &:hover {
+      transform: translateY(20px);
+    }
     &:nth-child(3n) {
       margin-right: 0;
     }
@@ -161,12 +177,16 @@ export default {
     height: 353px;
   }
   .text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 143px;
     font-size: 30px;
     font-family: SFProDisplay-Bold, SFProDisplay;
     font-weight: bold;
-    line-height: 143px;
-    color: #272727;
+    line-height: 40px;
     text-align: center;
+    color: #272727;
     background-color: #F5F5F5;
   }
 }
@@ -186,6 +206,10 @@ export default {
     background-color: #fff;
     box-shadow: 0px 5px 20px 0px rgba(98,117,163,0.08);
     border-radius: 10px;
+    transition: .3s;
+    &:hover {
+      transform: translateY(20px);
+    }
     &:nth-child(3n) {
       margin-right: 0;
     }

src/styles/common.scss

@@ -13,6 +13,10 @@
   font-family: SFProDisplay-Bold;
   src: url('font/SF-Pro-Display-Bold.otf');
 }
+@font-face {
+  font-family: SFProDisplay;
+  src: url('font/SF-Pro-Display-Regular.otf');
+}
 @font-face {
   font-family: toppan;
   src: url('font/toppan.otf');
@@ -21,6 +25,9 @@
 [v-cloak] {
   display: none;
 }
+.site-en {
+  font-family: SFProDisplay;
+}
 .flex-between {
   display: flex;
   justify-content: space-between;

src/styles/page/page.scss

@@ -62,6 +62,7 @@
   background-color: #F2F6F8;
 }
 .arrow {
+  transition: .3s;
   cursor: pointer;
 }
 @media (max-width: 1410px) {