首页添加动画及资源压缩

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,252 +562,424 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-    .wrap{
+@import url(../../../plugins/wow/animate.css);
-        position: relative;
+.wrap{
-        background-color: #F3F6FA;
+    position: relative;
-        .banner{
+    background-color: #F3F6FA;
-            padding: 160px 0;
+    .banner{
-            background:  url(../../../assets/img/login-bg.png) 0 0/100% 100% no-repeat;
+        padding: 160px 0;
+        background:  url(../../../assets/img/login-bg.png) 0 0/100% 100% no-repeat;
+    }
+    .title{
+        margin-bottom: 37px;
+        font-size: 45px;
+        color: #fff;
+        text-align: center;
+    }
+    .list-wrap{
+        padding: 20px 40px;
+        background-color: #fff;
+    }
+    .search-wrap{
+        width: 700px;
+        margin: 0 auto;
+    }
+    .search{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 62px;
+        margin: 0 auto;
+        background-color: #fff;
+        border-radius: 4px;
+        overflow: hidden;
+        .icon-wrap{
+            width: 20px;
+            margin: 0 20px;
         }
-        .title{
+        input{
-            margin-bottom: 37px;
+            flex: 1;
-            font-size: 45px;
+            padding-left: 15px;
-            color: #fff;
+            font-size: 18px;
-            text-align: center;
+            color: #919191;
+            background-color: transparent;
+            border: 0;
+            border-left: 2px solid #fff;
+            &::-webkit-input-placeholder{color: #999}
+            &::-moz-placeholder{color: #f5f5f5}
+            &:-moz-placeholder{color: #f5f5f5}
+            &:focus{
+                outline: none;
+            }
         }
-        .list-wrap{
+        .remove{
-            padding: 20px 40px;
+            margin-left: 20px;
-            background-color: #fff;
+            cursor: pointer;
         }
-        .search-wrap{
+    }
-            width: 700px;
+    .hot{
-            margin: 0 auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: 20px auto 0;
+        .name{
+            font-size: 14px;
+            color: #efefef;
         }
-        .search{
+        .list{
-            display: flex;
+            display: inline-flex;
-            justify-content: space-between;
+            margin-left: 20px;
-            align-items: center;
+            li{
-            height: 62px;
+                margin-right: 50px;
-            margin: 0 auto;
+                color: #fff;
-            background-color: #fff;
+                font-size: 14px;
-            border-radius: 4px;
-            overflow: hidden;
-            .icon-wrap{
-                width: 20px;
-                margin: 0 20px;
-            }
-            input{
-                flex: 1;
-                padding-left: 15px;
-                font-size: 18px;
-                color: #919191;
-                background-color: transparent;
-                border: 0;
-                border-left: 2px solid #fff;
-                &::-webkit-input-placeholder{color: #999}
-                &::-moz-placeholder{color: #f5f5f5}
-                &:-moz-placeholder{color: #f5f5f5}
-                &:focus{
-                    outline: none;
-                }
-            }
-            .remove{
-                margin-left: 20px;
                 cursor: pointer;
             }
         }
-        .hot{
+    }
-            display: flex;
+    &.result{
-            justify-content: center;
+        .banner{
-            align-items: center;
+            padding: 46px 0;
-            margin: 20px auto 0;
+        }
-            .name{
+        .tips{
+            margin-bottom: 22px;
+            .result{
+                margin: 30px 0 10px;
+                font-size: 17px;
+                color: $main-color;
+            }
+            img{
+                width: 22px;
+                margin-right: 5px;
+            }
+            .num{
                 font-size: 14px;
-                color: #efefef;
+                color: #515151;
-            }
-            .list{
-                display: inline-flex;
-                margin-left: 20px;
-                li{
-                    margin-right: 50px;
-                    color: #fff;
-                    font-size: 14px;
-                    cursor: pointer;
-                }
             }
         }
-        &.result{
+    }
-            .banner{
+    .i-title{
-                padding: 46px 0;
+        position: relative;
-            }
+        margin-bottom: 37px;
-            .tips{
+        font-size: 30px;
-                margin-bottom: 22px;
+        text-align: center;
-                .result{
+        color: #0B1D30;
-                    margin: 30px 0 10px;
+        &:after{
-                    font-size: 17px;
+            content: '';
-                    color: $main-color;
+            position: absolute;
-                }
+            bottom: -10px;
-                img{
+            left: 50%;
-                    width: 22px;
+            width: 30px;
-                    margin-right: 5px;
+            height: 4px;
+            transform: translate(-50%);
+            background-color: #006EFF;
+        }
+    }
+    .intro{
+        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;
+            transition: .3s;
+            &.active{
+                h6, .desc{
+                    color: #006EFF;
                 }
-                .num{
+            }
-                    font-size: 14px;
+            &:hover{
-                    color: #515151;
+                margin-top: -15px;
+                h6, .desc{
+                    color: #006EFF;
                 }
             }
         }
-        .i-title{
+        img{
-            position: relative;
+            width: 50px;
-            margin-bottom: 37px;
+            margin-right: 15px;
-            font-size: 30px;
+        }
-            text-align: center;
+        h6{
+            margin-bottom: 5px;
+            font-size: 16px;
             color: #0B1D30;
-            &:after{
+            transition: .5s;
-                content: '';
+        }
-                position: absolute;
+        .desc{
-                bottom: -10px;
+            font-size: 13px;
-                left: 50%;
+            color: #757F92;
-                width: 30px;
+            transition: .5s;
-                height: 4px;
-                transform: translate(-50%);
-                background-color: #006EFF;
-            }
         }
-        .intro{
+    }
+    .inner{
+        width: 1200px;
+        padding: 67px 0;
+        margin: 0 auto;
+    }
+    .about{
+        .inner{
+            padding: 67px;
+        }
+        .desc{
+            min-height: 200px;
+            padding: 35px 280px 35px 55px;
+            font-size: 14px;
+            color: #0B1D30;
+            line-height: 30px;
+            background: url(../../../assets/img/index/index6.png) 0 0/100% 100% no-repeat;
+        }
+    }
+    .adv{
+        position: relative;
+        background: #fff url(../../../assets/img/index/index7.png) 0 0/100% 100% no-repeat;
+        .shape{
+            position: absolute;
+        }
+        .shape1{
+            top: 25px;
+            right: 0;
+        }
+        .shape2{
+            bottom: 30px;
+            left: 50px;
+        }
+        .shape3{
+            bottom: 25px;
+            right: 50px;
+        }
+        .list{
             display: flex;
-            justify-content: space-around;
+            flex: 1;
-            align-items: center;
+            height: 370px;
-            padding: 43px 0;
-            background-color: #fff;
             li{
-                display: inline-flex;
+                padding: 107px 35px 0;
-                align-items: center;
+                margin-right: 20px;
-                cursor: pointer;
+                text-align: center;
-                &.active, &:hover{
+                box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
-                    h6, .desc{
+                border-radius: 10px;
-                        color: #006EFF;
+                &:last-child{
+                    margin-right: 0;
+                }
+                &:hover {
+                    img {
+                        transform: rotateY(180deg)
+                    }
+                    h6 {
+                        margin-top: 40px;
                     }
                 }
             }
             img{
-                width: 50px;
+                width: 64px;
-                margin-right: 15px;
+                transition: .6s;
             }
             h6{
-                margin-bottom: 5px;
+                margin: 45px 0 16px;
-                font-size: 16px;
+                font-size: 18px;
                 color: #0B1D30;
+                transition: .3s;
             }
-            .desc{
+            .text{
-                font-size: 13px;
+                font-size: 14px;
                 color: #757F92;
             }
         }
-        .inner{
+    }
-            width: 1200px;
+    .pics{
-            padding: 67px 0;
+        display: flex;
-            margin: 0 auto;
+        justify-content: space-between;
+        .icon{
+            width: 60px;
+        }
+        .text{
+            width: 340px;
+        }
+        h6{
+            margin: 30px 0 10px;
+            font-size: 28px;
+            color: #0B1D30;
+        }
+        .desc{
+            font-size: 15px;
+            color: #757F92;
         }
-        .about{
+        .pro-pic{
-            .inner{
+            width: 460px;
-                padding: 67px;
+        }
+        .pro-bg1 {
+            position: relative;
+            width: 555px;
+            height: 353px;
+            img {
+                position: absolute;
+                transition: .5s;
             }
-            .desc{
+            .bg1 {
-                min-height: 200px;
+                top: 0;
-                padding: 35px 280px 35px 55px;
+                left: 0;
-                font-size: 14px;
+            }
-                color: #0B1D30;
+            .bg2 {
-                line-height: 30px;
+                top: 84px;
-                background: url(../../../assets/img/index/index6.png) 0 0/100% 100% no-repeat;
+                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);
+                }
             }
         }
-        .adv{
+        .pro-bg2 {
             position: relative;
-            background: #fff url(../../../assets/img/index/index7.png) 0 0/100% 100% no-repeat;
+            width: 635px;
-            .shape{
+            height: 352px;
+            img {
                 position: absolute;
+                transition: .5s;
             }
-            .shape1{
+            .bg1 {
-                top: 25px;
+                top: 16px;
+                left: 36px;
+            }
+            .bg2 {
+                bottom: 0;
+                left: 0;
+            }
+            .bg3 {
+                top: 0;
                 right: 0;
             }
-            .shape2{
+            &:hover {
-                bottom: 30px;
+                .bg1 {
-                left: 50px;
+                    transform: scale(1.1);
-            }
-            .shape3{
-                bottom: 25px;
-                right: 50px;
-            }
-            .list{
-                display: flex;
-                flex: 1;
-                height: 370px;
-                li{
-                    padding: 107px 35px 0;
-                    margin-right: 20px;
-                    text-align: center;
-                    box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
-                    border-radius: 10px;
-                    &:last-child{
-                        margin-right: 0;
-                    }
-                }
-                img{
-                    width: 64px;
                 }
-                h6{
+                .bg2 {
-                    margin: 45px 0 16px;
+                    transform: translate(-20px, 40px);
-                    font-size: 18px;
-                    color: #0B1D30;
                 }
-                .text{
+                .bg3 {
-                    font-size: 14px;
+                    transform: translate(20px, -30px);
-                    color: #757F92;
                 }
             }
         }
-        .pics{
+        .pro-bg3 {
-            display: flex;
+            position: relative;
-            justify-content: space-between;
+            width: 565px;
-            .icon{
+            height: 308px;
-                width: 60px;
+            img {
+                position: absolute;
+                transition: .5s;
             }
-            .text{
+            .bg1 {
-                width: 340px;
+                top: 0;
+                left: 38px;
             }
-            h6{
+            .bg2 {
-                margin: 30px 0 10px;
+                top: 47px;
-                font-size: 28px;
+                left: 0;
-                color: #0B1D30;
             }
-            .desc{
+            .bg3 {
-                font-size: 15px;
+                top: 131px;
-                color: #757F92;
+                left: 0;
+            }
+            .bg4 {
+                top: 209px;
+                left: 0;
+            }
+            .bg5 {
+                top: 79px;
+                right: 0;
             }
-            .pro-pic{
+            .bg6 {
-                width: 460px;
+                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);
+                }
             }
         }
-        .none{
+        .pro-bg4 {
-            padding: 50px 0;
+            position: relative;
-            text-align: center;
+            width: 600px;
-            img{
+            height: 330px;
-                width: 324px;
+            img {
-                margin-bottom: 42px;
+                position: absolute;
+                transition: .5s;
             }
-            .text{
+            .bg1 {
-                font-size: 12px;
+                top: 0;
-                color: #333;
+                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;
+        text-align: center;
+        img{
+            width: 324px;
+            margin-bottom: 42px;
+        }
+        .text{
+            font-size: 12px;
+            color: #333;
         }
     }
-    /deep/.preview-dia{
+}
-      padding: 20px;
+/deep/.preview-dia{
-      .preview-wrap{
+    padding: 20px;
-        height: calc(100vh - 80px);
+    .preview-wrap{
-        overflow: auto;
+    height: calc(100vh - 80px);
-      }
+    overflow: auto;
     }
+}
 </style>