|
|
|
|
@ -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"> |
|
|
|
|
<h6>自定义下载灵活便捷</h6> |
|
|
|
|
<p class="desc">可自选字段，时间区间，数据频率，轻松下载所需的数据。</p> |
|
|
|
|
<img src="@/assets/img/index/index11.png" alt="" class="icon wow flipInX" data-wow-delay="0.2s"> |
|
|
|
|
<h6 class="wow fadeInDown" data-wow-delay="0.3s">自定义下载灵活便捷</h6> |
|
|
|
|
<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"> |
|
|
|
|
<h6>使用概况统计一目了然</h6> |
|
|
|
|
<p class="desc">管理员可随时登录后台查看各种数据统计，了解各类数据的下载情况以及前台用户在数据平台的使用情况。</p> |
|
|
|
|
<img src="@/assets/img/index/index13.png" alt="" class="icon wow fadeInRight" data-wow-delay="0.2s"> |
|
|
|
|
<h6 class="wow fadeInLeft" data-wow-delay="0.3s">使用概况统计一目了然</h6> |
|
|
|
|
<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"> |
|
|
|
|
<h6>海量数据随意下载</h6> |
|
|
|
|
<p class="desc">购买后可享受数据免费更新，且不限账号，不限量，畅享全平台数据。</p> |
|
|
|
|
<img src="@/assets/img/index/index15.png" alt="" class="icon wow fadeInLeft" data-wow-delay="0.5s"> |
|
|
|
|
<h6 class="wow fadeInUp" data-wow-delay="0.5s">海量数据随意下载</h6> |
|
|
|
|
<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"> |
|
|
|
|
<h6>模糊搜索高效定位所需数据</h6> |
|
|
|
|
<p class="desc">强大的搜索功能，用户只需输入品种代码、关键词等，系统就会自动搜索出最匹配的数据供用户查看、下载。</p> |
|
|
|
|
<img src="@/assets/img/index/index17.png" alt="" class="icon wow fadeInLeft" data-wow-delay="0.5s"> |
|
|
|
|
<h6 class="wow fadeInUp" data-wow-delay="0.5s">模糊搜索高效定位所需数据</h6> |
|
|
|
|
<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{ |
|
|
|
|
position: relative; |
|
|
|
|
background-color: #F3F6FA; |
|
|
|
|
.banner{ |
|
|
|
|
padding: 160px 0; |
|
|
|
|
background: url(../../../assets/img/login-bg.png) 0 0/100% 100% no-repeat; |
|
|
|
|
@import url(../../../plugins/wow/animate.css); |
|
|
|
|
.wrap{ |
|
|
|
|
position: relative; |
|
|
|
|
background-color: #F3F6FA; |
|
|
|
|
.banner{ |
|
|
|
|
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{ |
|
|
|
|
margin-bottom: 37px; |
|
|
|
|
font-size: 45px; |
|
|
|
|
color: #fff; |
|
|
|
|
text-align: center; |
|
|
|
|
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; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.list-wrap{ |
|
|
|
|
padding: 20px 40px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
.remove{ |
|
|
|
|
margin-left: 20px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
.search-wrap{ |
|
|
|
|
width: 700px; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
} |
|
|
|
|
.hot{ |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
margin: 20px auto 0; |
|
|
|
|
.name{ |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #efefef; |
|
|
|
|
} |
|
|
|
|
.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; |
|
|
|
|
} |
|
|
|
|
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; |
|
|
|
|
.list{ |
|
|
|
|
display: inline-flex; |
|
|
|
|
margin-left: 20px; |
|
|
|
|
li{ |
|
|
|
|
margin-right: 50px; |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 14px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.hot{ |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
margin: 20px auto 0; |
|
|
|
|
.name{ |
|
|
|
|
} |
|
|
|
|
&.result{ |
|
|
|
|
.banner{ |
|
|
|
|
padding: 46px 0; |
|
|
|
|
} |
|
|
|
|
.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; |
|
|
|
|
} |
|
|
|
|
.list{ |
|
|
|
|
display: inline-flex; |
|
|
|
|
margin-left: 20px; |
|
|
|
|
li{ |
|
|
|
|
margin-right: 50px; |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 14px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
color: #515151; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
&.result{ |
|
|
|
|
.banner{ |
|
|
|
|
padding: 46px 0; |
|
|
|
|
} |
|
|
|
|
.tips{ |
|
|
|
|
margin-bottom: 22px; |
|
|
|
|
.result{ |
|
|
|
|
margin: 30px 0 10px; |
|
|
|
|
font-size: 17px; |
|
|
|
|
color: $main-color; |
|
|
|
|
} |
|
|
|
|
img{ |
|
|
|
|
width: 22px; |
|
|
|
|
margin-right: 5px; |
|
|
|
|
} |
|
|
|
|
.i-title{ |
|
|
|
|
position: relative; |
|
|
|
|
margin-bottom: 37px; |
|
|
|
|
font-size: 30px; |
|
|
|
|
text-align: center; |
|
|
|
|
color: #0B1D30; |
|
|
|
|
&:after{ |
|
|
|
|
content: ''; |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: -10px; |
|
|
|
|
left: 50%; |
|
|
|
|
width: 30px; |
|
|
|
|
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; |
|
|
|
|
color: #515151; |
|
|
|
|
} |
|
|
|
|
&:hover{ |
|
|
|
|
margin-top: -15px; |
|
|
|
|
h6, .desc{ |
|
|
|
|
color: #006EFF; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.i-title{ |
|
|
|
|
position: relative; |
|
|
|
|
margin-bottom: 37px; |
|
|
|
|
font-size: 30px; |
|
|
|
|
text-align: center; |
|
|
|
|
img{ |
|
|
|
|
width: 50px; |
|
|
|
|
margin-right: 15px; |
|
|
|
|
} |
|
|
|
|
h6{ |
|
|
|
|
margin-bottom: 5px; |
|
|
|
|
font-size: 16px; |
|
|
|
|
color: #0B1D30; |
|
|
|
|
&:after{ |
|
|
|
|
content: ''; |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: -10px; |
|
|
|
|
left: 50%; |
|
|
|
|
width: 30px; |
|
|
|
|
height: 4px; |
|
|
|
|
transform: translate(-50%); |
|
|
|
|
background-color: #006EFF; |
|
|
|
|
} |
|
|
|
|
transition: .5s; |
|
|
|
|
} |
|
|
|
|
.desc{ |
|
|
|
|
font-size: 13px; |
|
|
|
|
color: #757F92; |
|
|
|
|
transition: .5s; |
|
|
|
|
} |
|
|
|
|
.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; |
|
|
|
|
align-items: center; |
|
|
|
|
padding: 43px 0; |
|
|
|
|
background-color: #fff; |
|
|
|
|
flex: 1; |
|
|
|
|
height: 370px; |
|
|
|
|
li{ |
|
|
|
|
display: inline-flex; |
|
|
|
|
align-items: center; |
|
|
|
|
cursor: pointer; |
|
|
|
|
&.active, &:hover{ |
|
|
|
|
h6, .desc{ |
|
|
|
|
color: #006EFF; |
|
|
|
|
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; |
|
|
|
|
} |
|
|
|
|
&:hover { |
|
|
|
|
img { |
|
|
|
|
transform: rotateY(180deg) |
|
|
|
|
} |
|
|
|
|
h6 { |
|
|
|
|
margin-top: 40px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
img{ |
|
|
|
|
width: 50px; |
|
|
|
|
margin-right: 15px; |
|
|
|
|
width: 64px; |
|
|
|
|
transition: .6s; |
|
|
|
|
} |
|
|
|
|
h6{ |
|
|
|
|
margin-bottom: 5px; |
|
|
|
|
font-size: 16px; |
|
|
|
|
margin: 45px 0 16px; |
|
|
|
|
font-size: 18px; |
|
|
|
|
color: #0B1D30; |
|
|
|
|
transition: .3s; |
|
|
|
|
} |
|
|
|
|
.desc{ |
|
|
|
|
font-size: 13px; |
|
|
|
|
.text{ |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #757F92; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.inner{ |
|
|
|
|
width: 1200px; |
|
|
|
|
padding: 67px 0; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
} |
|
|
|
|
.pics{ |
|
|
|
|
display: flex; |
|
|
|
|
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{ |
|
|
|
|
.inner{ |
|
|
|
|
padding: 67px; |
|
|
|
|
.pro-pic{ |
|
|
|
|
width: 460px; |
|
|
|
|
} |
|
|
|
|
.pro-bg1 { |
|
|
|
|
position: relative; |
|
|
|
|
width: 555px; |
|
|
|
|
height: 353px; |
|
|
|
|
img { |
|
|
|
|
position: absolute; |
|
|
|
|
transition: .5s; |
|
|
|
|
} |
|
|
|
|
.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; |
|
|
|
|
.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); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.adv{ |
|
|
|
|
.pro-bg2 { |
|
|
|
|
position: relative; |
|
|
|
|
background: #fff url(../../../assets/img/index/index7.png) 0 0/100% 100% no-repeat; |
|
|
|
|
.shape{ |
|
|
|
|
width: 635px; |
|
|
|
|
height: 352px; |
|
|
|
|
img { |
|
|
|
|
position: absolute; |
|
|
|
|
transition: .5s; |
|
|
|
|
} |
|
|
|
|
.shape1{ |
|
|
|
|
top: 25px; |
|
|
|
|
.bg1 { |
|
|
|
|
top: 16px; |
|
|
|
|
left: 36px; |
|
|
|
|
} |
|
|
|
|
.bg2 { |
|
|
|
|
bottom: 0; |
|
|
|
|
left: 0; |
|
|
|
|
} |
|
|
|
|
.bg3 { |
|
|
|
|
top: 0; |
|
|
|
|
right: 0; |
|
|
|
|
} |
|
|
|
|
.shape2{ |
|
|
|
|
bottom: 30px; |
|
|
|
|
left: 50px; |
|
|
|
|
} |
|
|
|
|
.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; |
|
|
|
|
&:hover { |
|
|
|
|
.bg1 { |
|
|
|
|
transform: scale(1.1); |
|
|
|
|
} |
|
|
|
|
h6{ |
|
|
|
|
margin: 45px 0 16px; |
|
|
|
|
font-size: 18px; |
|
|
|
|
color: #0B1D30; |
|
|
|
|
.bg2 { |
|
|
|
|
transform: translate(-20px, 40px); |
|
|
|
|
} |
|
|
|
|
.text{ |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #757F92; |
|
|
|
|
.bg3 { |
|
|
|
|
transform: translate(20px, -30px); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.pics{ |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
.icon{ |
|
|
|
|
width: 60px; |
|
|
|
|
.pro-bg3 { |
|
|
|
|
position: relative; |
|
|
|
|
width: 565px; |
|
|
|
|
height: 308px; |
|
|
|
|
img { |
|
|
|
|
position: absolute; |
|
|
|
|
transition: .5s; |
|
|
|
|
} |
|
|
|
|
.text{ |
|
|
|
|
width: 340px; |
|
|
|
|
.bg1 { |
|
|
|
|
top: 0; |
|
|
|
|
left: 38px; |
|
|
|
|
} |
|
|
|
|
h6{ |
|
|
|
|
margin: 30px 0 10px; |
|
|
|
|
font-size: 28px; |
|
|
|
|
color: #0B1D30; |
|
|
|
|
.bg2 { |
|
|
|
|
top: 47px; |
|
|
|
|
left: 0; |
|
|
|
|
} |
|
|
|
|
.desc{ |
|
|
|
|
font-size: 15px; |
|
|
|
|
color: #757F92; |
|
|
|
|
.bg3 { |
|
|
|
|
top: 131px; |
|
|
|
|
left: 0; |
|
|
|
|
} |
|
|
|
|
.bg4 { |
|
|
|
|
top: 209px; |
|
|
|
|
left: 0; |
|
|
|
|
} |
|
|
|
|
.bg5 { |
|
|
|
|
top: 79px; |
|
|
|
|
right: 0; |
|
|
|
|
} |
|
|
|
|
.pro-pic{ |
|
|
|
|
width: 460px; |
|
|
|
|
.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); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.none{ |
|
|
|
|
padding: 50px 0; |
|
|
|
|
text-align: center; |
|
|
|
|
img{ |
|
|
|
|
width: 324px; |
|
|
|
|
margin-bottom: 42px; |
|
|
|
|
.pro-bg4 { |
|
|
|
|
position: relative; |
|
|
|
|
width: 600px; |
|
|
|
|
height: 330px; |
|
|
|
|
img { |
|
|
|
|
position: absolute; |
|
|
|
|
transition: .5s; |
|
|
|
|
} |
|
|
|
|
.text{ |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: #333; |
|
|
|
|
.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; |
|
|
|
|
text-align: center; |
|
|
|
|
img{ |
|
|
|
|
width: 324px; |
|
|
|
|
margin-bottom: 42px; |
|
|
|
|
} |
|
|
|
|
.text{ |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
/deep/.preview-dia{ |
|
|
|
|
padding: 20px; |
|
|
|
|
.preview-wrap{ |
|
|
|
|
height: calc(100vh - 80px); |
|
|
|
|
overflow: auto; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
/deep/.preview-dia{ |
|
|
|
|
padding: 20px; |
|
|
|
|
.preview-wrap{ |
|
|
|
|
height: calc(100vh - 80px); |
|
|
|
|
overflow: auto; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
