首页添加动画及资源压缩

package-lock.json

@@ -1586,6 +1586,11 @@
       "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
     },
+    "animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -10949,6 +10954,11 @@
         "ajv-keywords": "^3.1.0"
       }
     },
+    "scrollmonitor": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/scrollmonitor/-/scrollmonitor-1.2.9.tgz",
+      "integrity": "sha512-pgviMf1xa3nfKvVxH/MhA3o96UVHHWyjUPKfKSfGmRjWpLJLM/IMRlNpqWtgsV9Av2WyI2JmyiSeVJVkt/AV3w=="
+    },
     "scss-tokenizer": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
@@ -12460,6 +12470,14 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.3.tgz",
       "integrity": "sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ=="
     },
+    "v-animate-css": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/v-animate-css/-/v-animate-css-0.0.5.tgz",
+      "integrity": "sha512-FML26yVYX3hCTWTKioTNAIXjaWIFWa1mSczb92cLkMYI9QI6uRacKx7QnBNB17IOFLFEv8mc14aawe2In/ba1w==",
+      "requires": {
+        "scrollmonitor": "^1.2.4"
+      }
+    },
     "v8flags": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-2.1.1.tgz",
@@ -13196,6 +13214,11 @@
         }
       }
     },
+    "wow.js": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/wow.js/-/wow.js-1.2.2.tgz",
+      "integrity": "sha1-JHUZsKNCMZsaY+Iq6prOwanqV/U="
+    },
     "wrap-ansi": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",

package.json

@@ -8,6 +8,7 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",
     "echarts": "^4.9.0",
@@ -17,6 +18,7 @@
     "mavon-editor": "^2.6.17",
     "postcss-px2rem": "^0.3.0",
     "px2rem-loader": "^0.1.9",
+    "v-animate-css": "0.0.5",
     "vue": "^2.6.10",
     "vue-cropperjs": "^3.0.0",
     "vue-i18n": "^8.10.0",
@@ -25,7 +27,8 @@
     "vue-router": "^3.0.3",
     "vue-schart": "^2.0.0",
     "vuedraggable": "^2.17.0",
-    "vuex": "^3.4.0"
+    "vuex": "^3.4.0",
+    "wow.js": "^1.2.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.9.0",

src/pages/index/list/index.vue

@@ -51,21 +51,21 @@
         <template v-else>
             <!-- 简介 -->
             <ul class="intro">
-                <li :class="{active: active === 1}" @click="toPart(1)">
+                <li class="wow fadeInUp" :class="{active: active === 1}" data-wow-delay="0.2s" @click="toPart(1)">
                     <img src="@/assets/img/index/index1.png" alt="">
                     <div class="text">
                         <h6>平台概览</h6>
                         <p class="desc">值得信赖的财经数据平台</p>
                     </div>
                 </li>
-                <li :class="{active: active === 2}" @click="toPart(2)">
+                <li class="wow fadeInUp" :class="{active: active === 2}" data-wow-delay="0.5s" @click="toPart(2)">
                     <img src="@/assets/img/index/index2.png" alt="">
                     <div class="text">
                         <h6>平台特色与优势</h6>
                         <p class="desc">海量数据，轻松下载</p>
                     </div>
                 </li>
-                <li :class="{active: active === 3}" @click="toPart(3)">
+                <li class="wow fadeInUp" :class="{active: active === 3}" data-wow-delay="0.8s" @click="toPart(3)">
                     <img src="@/assets/img/index/index20.png" alt="">
                     <div class="text">
                         <h6>平台产品介绍</h6>
@@ -76,7 +76,7 @@
             <!-- 关于 -->
             <div class="about" id="part1">
                 <div class="inner">
-                    <h6 class="i-title">关于Dataforward</h6>
+                    <h6 class="i-title wow fadeInDown">关于Dataforward</h6>
                     <div class="desc">欢迎使用 Dataforward——数据前瞻，这是我们的财经数据库。我们的数据涵盖股票数据，期货数据，债券数据，期权数据，利率数据，公募数据和宏观数据，拥有超40年的历史数据，可为您解读、预测、分析，模拟市场趋势、经济周期和世界事件影响提供必要的数据支持。我们的数据均来源于各大专业财经权威网站和数据官方发布平台，并经过专业的数据分类和整理，可让用户轻松便捷地搜索并批量下载到自己研究所需的数据，极大地减轻自己搜索整理数据的时间，提高研究效率, 从而高效的输出研究成果。</div>
                 </div>
             </div>
@@ -86,19 +86,19 @@
                 <img src="@/assets/img/index/index9.png" alt="" class="shape shape2">
                 <img src="@/assets/img/index/index10.png" alt="" class="shape shape3">
                 <div class="inner">
-                    <h6 class="i-title">特色与优势</h6>
+                    <h6 class="i-title wow fadeInDown">特色与优势</h6>
                     <ul class="list">
-                        <li>
+                        <li class="wow fadeInDown" data-wow-delay="0.5s">
                             <img src="@/assets/img/index/index3.png" alt="">
                             <h6>综合全面的财经数据库</h6>
                             <p class="text">跨越多种主要资产类别，超40 年的历史数据和上千种宏观指标数据</p>
                         </li>
-                        <li>
+                        <li class="wow fadeInRight" data-wow-delay="0.8s">
                             <img src="@/assets/img/index/index4.png" alt="">
                             <h6>权威、多样数据源</h6>
                             <p class="text">原始数据来源权威、可靠，用户可依据自己所需进行数据再加工，以获得更准确的结果</p>
                         </li>
-                        <li>
+                        <li class="wow fadeInUp" data-wow-delay="1.1s">
                             <img src="@/assets/img/index/index5.png" alt="">
                             <h6>实时更新无限下载</h6>
                             <p class="text">数据库实时更新，会员用户可无限量下载平台各种数据表，随时获取最新数据</p>
@@ -109,25 +109,34 @@
             <!-- 产品展示 -->
             <div class="product" id="part3">
                 <div class="inner">
-                    <h6 class="i-title">产品展示</h6>
+                    <h6 class="i-title wow fadeInDown">产品展示</h6>
                     <div class="pics">
                         <div class="text">
-                            <img src="@/assets/img/index/index11.png" alt="" class="icon">
+                            <img src="@/assets/img/index/index11.png" alt="" class="icon wow flipInX" data-wow-delay="0.2s">
-                            <h6>自定义下载灵活便捷</h6>
+                            <h6 class="wow fadeInDown" data-wow-delay="0.3s">自定义下载灵活便捷</h6>
-                            <p class="desc">可自选字段，时间区间，数据频率，轻松下载所需的数据。</p>
+                            <p class="desc wow fadeInDown" data-wow-delay="0.7s">可自选字段，时间区间，数据频率，轻松下载所需的数据。</p>
+                        </div>
+                        <div class="pro-bg1">
+                            <img src="@/assets/img/index/pro-bg1-1.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.3s">
+                            <img src="@/assets/img/index/pro-bg1-2.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.5s">
+                            <img src="@/assets/img/index/pro-bg1-3.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.8s">
+                            <img src="@/assets/img/index/pro-bg1-4.png" alt="" class="bg4 wow fadeInDown" data-wow-delay="1.1s">
                         </div>
-                        <img src="@/assets/img/index/index12.png" alt="" class="pro-pic">
                     </div>
                 </div>
             </div>
             <div class="product bg-white">
                 <div class="inner">
                     <div class="pics">
-                        <img src="@/assets/img/index/index14.png" alt="" class="pro-pic">
+                        <div class="pro-bg2">
+                            <img src="@/assets/img/index/pro-bg2-1.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.3s">
+                            <img src="@/assets/img/index/pro-bg2-2.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.5s">
+                            <img src="@/assets/img/index/pro-bg2-3.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.8s">
+                        </div>
                         <div class="text">
-                            <img src="@/assets/img/index/index13.png" alt="" class="icon">
+                            <img src="@/assets/img/index/index13.png" alt="" class="icon wow fadeInRight" data-wow-delay="0.2s">
-                            <h6>使用概况统计一目了然</h6>
+                            <h6 class="wow fadeInLeft" data-wow-delay="0.3s">使用概况统计一目了然</h6>
-                            <p class="desc">管理员可随时登录后台查看各种数据统计，了解各类数据的下载情况以及前台用户在数据平台的使用情况。</p>
+                            <p class="desc wow fadeInLeft" data-wow-delay="0.7s">管理员可随时登录后台查看各种数据统计，了解各类数据的下载情况以及前台用户在数据平台的使用情况。</p>
                         </div>
                     </div>
                 </div>
@@ -136,22 +145,34 @@
                 <div class="inner">
                     <div class="pics">
                         <div class="text">
-                            <img src="@/assets/img/index/index15.png" alt="" class="icon">
+                            <img src="@/assets/img/index/index15.png" alt="" class="icon wow fadeInLeft" data-wow-delay="0.5s">
-                            <h6>海量数据随意下载</h6>
+                            <h6 class="wow fadeInUp" data-wow-delay="0.5s">海量数据随意下载</h6>
-                            <p class="desc">购买后可享受数据免费更新，且不限账号，不限量，畅享全平台数据。</p>
+                            <p class="desc wow fadeInUp" data-wow-delay="0.5s">购买后可享受数据免费更新，且不限账号，不限量，畅享全平台数据。</p>
+                        </div>
+                        <div class="pro-bg3">
+                            <img src="@/assets/img/index/pro-bg3-1.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.6s">
+                            <img src="@/assets/img/index/pro-bg3-2.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.7s">
+                            <img src="@/assets/img/index/pro-bg3-3.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.2s">
+                            <img src="@/assets/img/index/pro-bg3-4.png" alt="" class="bg4 wow fadeInDown" data-wow-delay="0.5s">
+                            <img src="@/assets/img/index/pro-bg3-5.png" alt="" class="bg5 wow fadeInDown" data-wow-delay="1s">
+                            <img src="@/assets/img/index/pro-bg3-6.png" alt="" class="bg6 wow fadeInDown" data-wow-delay="1.2s">
+                            <img src="@/assets/img/index/pro-bg3-7.png" alt="" class="bg7 wow fadeInDown" data-wow-delay="1.5s">
                         </div>
-                        <img src="@/assets/img/index/index16.png" alt="" class="pro-pic">
                     </div>
                 </div>
             </div>
             <div class="product bg-white">
                 <div class="inner">
                     <div class="pics">
-                        <img src="@/assets/img/index/index18.png" alt="" class="pro-pic">
+                        <div class="pro-bg4">
+                            <img src="@/assets/img/index/pro-bg4-1.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.2s">
+                            <img src="@/assets/img/index/pro-bg4-2.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.5s">
+                            <img src="@/assets/img/index/pro-bg4-3.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.7s">
+                        </div>
                         <div class="text">
-                            <img src="@/assets/img/index/index17.png" alt="" class="icon">
+                            <img src="@/assets/img/index/index17.png" alt="" class="icon wow fadeInLeft" data-wow-delay="0.5s">
-                            <h6>模糊搜索高效定位所需数据</h6>
+                            <h6 class="wow fadeInUp" data-wow-delay="0.5s">模糊搜索高效定位所需数据</h6>
-                            <p class="desc">强大的搜索功能，用户只需输入品种代码、关键词等，系统就会自动搜索出最匹配的数据供用户查看、下载。</p>
+                            <p class="desc wow fadeInUp" data-wow-delay="0.5s">强大的搜索功能，用户只需输入品种代码、关键词等，系统就会自动搜索出最匹配的数据供用户查看、下载。</p>
                         </div>
                     </div>
                 </div>
@@ -212,6 +233,8 @@ import { mapState } from 'vuex'
 import Setting from '@/setting'
 import util from '@/libs/util'
 import axios from 'axios'
+// import '@/plugins/wow/wow.min.js'
+import WOW from 'wow.js'
 let startTimeLimit = ''
 let endTimeLimit = ''
 export default {
@@ -288,6 +311,7 @@ export default {
         }
     },
     mounted() {
+        new WOW().init()
         this.getHot()
     },
     methods: {
@@ -538,6 +562,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import url(../../../plugins/wow/animate.css);
 .wrap{
     position: relative;
     background-color: #F3F6FA;
@@ -654,13 +679,21 @@ export default {
         display: flex;
         justify-content: space-around;
         align-items: center;
+        height: 138px;
         padding: 43px 0;
         background-color: #fff;
         li{
             display: inline-flex;
             align-items: center;
             cursor: pointer;
-                &.active, &:hover{
+            transition: .3s;
+            &.active{
+                h6, .desc{
+                    color: #006EFF;
+                }
+            }
+            &:hover{
+                margin-top: -15px;
                 h6, .desc{
                     color: #006EFF;
                 }
@@ -674,10 +707,12 @@ export default {
             margin-bottom: 5px;
             font-size: 16px;
             color: #0B1D30;
+            transition: .5s;
         }
         .desc{
             font-size: 13px;
             color: #757F92;
+            transition: .5s;
         }
     }
     .inner{
@@ -729,14 +764,24 @@ export default {
                 &:last-child{
                     margin-right: 0;
                 }
+                &:hover {
+                    img {
+                        transform: rotateY(180deg)
+                    }
+                    h6 {
+                        margin-top: 40px;
+                    }
+                }
             }
             img{
                 width: 64px;
+                transition: .6s;
             }
             h6{
                 margin: 45px 0 16px;
                 font-size: 18px;
                 color: #0B1D30;
+                transition: .3s;
             }
             .text{
                 font-size: 14px;
@@ -765,6 +810,157 @@ export default {
         .pro-pic{
             width: 460px;
         }
+        .pro-bg1 {
+            position: relative;
+            width: 555px;
+            height: 353px;
+            img {
+                position: absolute;
+                transition: .5s;
+            }
+            .bg1 {
+                top: 0;
+                left: 0;
+            }
+            .bg2 {
+                top: 84px;
+                left: 222px;
+            }
+            .bg3 {
+                top: 160px;
+                left: 91px;
+            }
+            .bg4 {
+                top: 29px;
+                right: 0;
+            }
+            &:hover {
+                .bg1 {
+                    transform: scale(1.1);
+                }
+                .bg2 {
+                    transform: scale(1.05);
+                }
+                .bg3 {
+                    transform: translate(-20px, -10px);
+                }
+                .bg4 {
+                    transform: translate(10px, -20px);
+                }
+            }
+        }
+        .pro-bg2 {
+            position: relative;
+            width: 635px;
+            height: 352px;
+            img {
+                position: absolute;
+                transition: .5s;
+            }
+            .bg1 {
+                top: 16px;
+                left: 36px;
+            }
+            .bg2 {
+                bottom: 0;
+                left: 0;
+            }
+            .bg3 {
+                top: 0;
+                right: 0;
+            }
+            &:hover {
+                .bg1 {
+                    transform: scale(1.1);
+                }
+                .bg2 {
+                    transform: translate(-20px, 40px);
+                }
+                .bg3 {
+                    transform: translate(20px, -30px);
+                }
+            }
+        }
+        .pro-bg3 {
+            position: relative;
+            width: 565px;
+            height: 308px;
+            img {
+                position: absolute;
+                transition: .5s;
+            }
+            .bg1 {
+                top: 0;
+                left: 38px;
+            }
+            .bg2 {
+                top: 47px;
+                left: 0;
+            }
+            .bg3 {
+                top: 131px;
+                left: 0;
+            }
+            .bg4 {
+                top: 209px;
+                left: 0;
+            }
+            .bg5 {
+                top: 79px;
+                right: 0;
+            }
+            .bg6 {
+                top: 123px;
+                right: 0;
+            }
+            .bg7 {
+                top: 172px;
+                right: 0;
+            }
+            &:hover {
+                .bg1 {
+                    transform: scale(1.1);
+                }
+                .bg2, .bg3, .bg4 {
+                    transform: translateX(-40px);
+                }
+                .bg5, .bg6, .bg7 {
+                    transform: translate(20px, -30px);
+                }
+            }
+        }
+        .pro-bg4 {
+            position: relative;
+            width: 600px;
+            height: 330px;
+            img {
+                position: absolute;
+                transition: .5s;
+            }
+            .bg1 {
+                top: 0;
+                left: 0;
+            }
+            .bg2 {
+                top: 89px;
+                left: 42px;
+            }
+            .bg3 {
+                top: 27px;
+                right: 0;
+            }
+            &:hover {
+                .bg1 {
+                    transform: scale(1.1);
+                }
+                .bg2 {
+                    transform: translate(-120px, 40px);
+                }
+                .bg3 {
+                    transform: translate(20px, -30px);
+                }
+            }
+        }
     }
     .none{
         padding: 50px 0;