|
|
@ -51,21 +51,21 @@ |
|
|
|
<template v-else> |
|
|
|
<template v-else> |
|
|
|
<!-- 简介 --> |
|
|
|
<!-- 简介 --> |
|
|
|
<ul class="intro"> |
|
|
|
<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=""> |
|
|
|
<img src="@/assets/img/index/index1.png" alt=""> |
|
|
|
<div class="text"> |
|
|
|
<div class="text"> |
|
|
|
<h6>平台概览</h6> |
|
|
|
<h6>平台概览</h6> |
|
|
|
<p class="desc">值得信赖的财经数据平台</p> |
|
|
|
<p class="desc">值得信赖的财经数据平台</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</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=""> |
|
|
|
<img src="@/assets/img/index/index2.png" alt=""> |
|
|
|
<div class="text"> |
|
|
|
<div class="text"> |
|
|
|
<h6>平台特色与优势</h6> |
|
|
|
<h6>平台特色与优势</h6> |
|
|
|
<p class="desc">海量数据,轻松下载</p> |
|
|
|
<p class="desc">海量数据,轻松下载</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</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=""> |
|
|
|
<img src="@/assets/img/index/index20.png" alt=""> |
|
|
|
<div class="text"> |
|
|
|
<div class="text"> |
|
|
|
<h6>平台产品介绍</h6> |
|
|
|
<h6>平台产品介绍</h6> |
|
|
@ -76,7 +76,7 @@ |
|
|
|
<!-- 关于 --> |
|
|
|
<!-- 关于 --> |
|
|
|
<div class="about" id="part1"> |
|
|
|
<div class="about" id="part1"> |
|
|
|
<div class="inner"> |
|
|
|
<div class="inner"> |
|
|
|
<h6 class="i-title">关于Dataforward</h6> |
|
|
|
<h6 class="i-title wow fadeInDown">关于Dataforward</h6> |
|
|
|
<div class="desc">欢迎使用 Dataforward——数据前瞻,这是我们的财经数据库。我们的数据涵盖股票数据,期货数据,债券数据,期权数据,利率数据,公募数据和宏观数据,拥有超40年的历史数据,可为您解读、预测、分析,模拟市场趋势、经济周期和世界事件影响提供必要的数据支持。我们的数据均来源于各大专业财经权威网站和数据官方发布平台,并经过专业的数据分类和整理,可让用户轻松便捷地搜索并批量下载到自己研究所需的数据,极大地减轻自己搜索整理数据的时间,提高研究效率, 从而高效的输出研究成果。</div> |
|
|
|
<div class="desc">欢迎使用 Dataforward——数据前瞻,这是我们的财经数据库。我们的数据涵盖股票数据,期货数据,债券数据,期权数据,利率数据,公募数据和宏观数据,拥有超40年的历史数据,可为您解读、预测、分析,模拟市场趋势、经济周期和世界事件影响提供必要的数据支持。我们的数据均来源于各大专业财经权威网站和数据官方发布平台,并经过专业的数据分类和整理,可让用户轻松便捷地搜索并批量下载到自己研究所需的数据,极大地减轻自己搜索整理数据的时间,提高研究效率, 从而高效的输出研究成果。</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -86,19 +86,19 @@ |
|
|
|
<img src="@/assets/img/index/index9.png" alt="" class="shape shape2"> |
|
|
|
<img src="@/assets/img/index/index9.png" alt="" class="shape shape2"> |
|
|
|
<img src="@/assets/img/index/index10.png" alt="" class="shape shape3"> |
|
|
|
<img src="@/assets/img/index/index10.png" alt="" class="shape shape3"> |
|
|
|
<div class="inner"> |
|
|
|
<div class="inner"> |
|
|
|
<h6 class="i-title">特色与优势</h6> |
|
|
|
<h6 class="i-title wow fadeInDown">特色与优势</h6> |
|
|
|
<ul class="list"> |
|
|
|
<ul class="list"> |
|
|
|
<li> |
|
|
|
<li class="wow fadeInDown" data-wow-delay="0.5s"> |
|
|
|
<img src="@/assets/img/index/index3.png" alt=""> |
|
|
|
<img src="@/assets/img/index/index3.png" alt=""> |
|
|
|
<h6>综合全面的财经数据库</h6> |
|
|
|
<h6>综合全面的财经数据库</h6> |
|
|
|
<p class="text">跨越多种主要资产类别,超40 年的历史数据和上千种宏观指标数据</p> |
|
|
|
<p class="text">跨越多种主要资产类别,超40 年的历史数据和上千种宏观指标数据</p> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<li class="wow fadeInRight" data-wow-delay="0.8s"> |
|
|
|
<img src="@/assets/img/index/index4.png" alt=""> |
|
|
|
<img src="@/assets/img/index/index4.png" alt=""> |
|
|
|
<h6>权威、多样数据源</h6> |
|
|
|
<h6>权威、多样数据源</h6> |
|
|
|
<p class="text">原始数据来源权威、可靠,用户可依据自己所需进行数据再加工,以获得更准确的结果</p> |
|
|
|
<p class="text">原始数据来源权威、可靠,用户可依据自己所需进行数据再加工,以获得更准确的结果</p> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<li class="wow fadeInUp" data-wow-delay="1.1s"> |
|
|
|
<img src="@/assets/img/index/index5.png" alt=""> |
|
|
|
<img src="@/assets/img/index/index5.png" alt=""> |
|
|
|
<h6>实时更新无限下载</h6> |
|
|
|
<h6>实时更新无限下载</h6> |
|
|
|
<p class="text">数据库实时更新,会员用户可无限量下载平台各种数据表,随时获取最新数据</p> |
|
|
|
<p class="text">数据库实时更新,会员用户可无限量下载平台各种数据表,随时获取最新数据</p> |
|
|
@ -109,25 +109,34 @@ |
|
|
|
<!-- 产品展示 --> |
|
|
|
<!-- 产品展示 --> |
|
|
|
<div class="product" id="part3"> |
|
|
|
<div class="product" id="part3"> |
|
|
|
<div class="inner"> |
|
|
|
<div class="inner"> |
|
|
|
<h6 class="i-title">产品展示</h6> |
|
|
|
<h6 class="i-title wow fadeInDown">产品展示</h6> |
|
|
|
<div class="pics"> |
|
|
|
<div class="pics"> |
|
|
|
<div class="text"> |
|
|
|
<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> |
|
|
|
</div> |
|
|
|
<img src="@/assets/img/index/index12.png" alt="" class="pro-pic"> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="product bg-white"> |
|
|
|
<div class="product bg-white"> |
|
|
|
<div class="inner"> |
|
|
|
<div class="inner"> |
|
|
|
<div class="pics"> |
|
|
|
<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"> |
|
|
|
<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> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -136,22 +145,34 @@ |
|
|
|
<div class="inner"> |
|
|
|
<div class="inner"> |
|
|
|
<div class="pics"> |
|
|
|
<div class="pics"> |
|
|
|
<div class="text"> |
|
|
|
<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> |
|
|
|
</div> |
|
|
|
<img src="@/assets/img/index/index16.png" alt="" class="pro-pic"> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="product bg-white"> |
|
|
|
<div class="product bg-white"> |
|
|
|
<div class="inner"> |
|
|
|
<div class="inner"> |
|
|
|
<div class="pics"> |
|
|
|
<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"> |
|
|
|
<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> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -212,6 +233,8 @@ import { mapState } from 'vuex' |
|
|
|
import Setting from '@/setting' |
|
|
|
import Setting from '@/setting' |
|
|
|
import util from '@/libs/util' |
|
|
|
import util from '@/libs/util' |
|
|
|
import axios from 'axios' |
|
|
|
import axios from 'axios' |
|
|
|
|
|
|
|
// import '@/plugins/wow/wow.min.js' |
|
|
|
|
|
|
|
import WOW from 'wow.js' |
|
|
|
let startTimeLimit = '' |
|
|
|
let startTimeLimit = '' |
|
|
|
let endTimeLimit = '' |
|
|
|
let endTimeLimit = '' |
|
|
|
export default { |
|
|
|
export default { |
|
|
@ -288,6 +311,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
mounted() { |
|
|
|
|
|
|
|
new WOW().init() |
|
|
|
this.getHot() |
|
|
|
this.getHot() |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
methods: { |
|
|
@ -538,7 +562,8 @@ export default { |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.wrap{ |
|
|
|
@import url(../../../plugins/wow/animate.css); |
|
|
|
|
|
|
|
.wrap{ |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
background-color: #F3F6FA; |
|
|
|
background-color: #F3F6FA; |
|
|
|
.banner{ |
|
|
|
.banner{ |
|
|
@ -654,13 +679,21 @@ export default { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
justify-content: space-around; |
|
|
|
align-items: center; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
height: 138px; |
|
|
|
padding: 43px 0; |
|
|
|
padding: 43px 0; |
|
|
|
background-color: #fff; |
|
|
|
background-color: #fff; |
|
|
|
li{ |
|
|
|
li{ |
|
|
|
display: inline-flex; |
|
|
|
display: inline-flex; |
|
|
|
align-items: center; |
|
|
|
align-items: center; |
|
|
|
cursor: pointer; |
|
|
|
cursor: pointer; |
|
|
|
&.active, &:hover{ |
|
|
|
transition: .3s; |
|
|
|
|
|
|
|
&.active{ |
|
|
|
|
|
|
|
h6, .desc{ |
|
|
|
|
|
|
|
color: #006EFF; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
&:hover{ |
|
|
|
|
|
|
|
margin-top: -15px; |
|
|
|
h6, .desc{ |
|
|
|
h6, .desc{ |
|
|
|
color: #006EFF; |
|
|
|
color: #006EFF; |
|
|
|
} |
|
|
|
} |
|
|
@ -674,10 +707,12 @@ export default { |
|
|
|
margin-bottom: 5px; |
|
|
|
margin-bottom: 5px; |
|
|
|
font-size: 16px; |
|
|
|
font-size: 16px; |
|
|
|
color: #0B1D30; |
|
|
|
color: #0B1D30; |
|
|
|
|
|
|
|
transition: .5s; |
|
|
|
} |
|
|
|
} |
|
|
|
.desc{ |
|
|
|
.desc{ |
|
|
|
font-size: 13px; |
|
|
|
font-size: 13px; |
|
|
|
color: #757F92; |
|
|
|
color: #757F92; |
|
|
|
|
|
|
|
transition: .5s; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.inner{ |
|
|
|
.inner{ |
|
|
@ -729,14 +764,24 @@ export default { |
|
|
|
&:last-child{ |
|
|
|
&:last-child{ |
|
|
|
margin-right: 0; |
|
|
|
margin-right: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
|
|
|
img { |
|
|
|
|
|
|
|
transform: rotateY(180deg) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
h6 { |
|
|
|
|
|
|
|
margin-top: 40px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
img{ |
|
|
|
img{ |
|
|
|
width: 64px; |
|
|
|
width: 64px; |
|
|
|
|
|
|
|
transition: .6s; |
|
|
|
} |
|
|
|
} |
|
|
|
h6{ |
|
|
|
h6{ |
|
|
|
margin: 45px 0 16px; |
|
|
|
margin: 45px 0 16px; |
|
|
|
font-size: 18px; |
|
|
|
font-size: 18px; |
|
|
|
color: #0B1D30; |
|
|
|
color: #0B1D30; |
|
|
|
|
|
|
|
transition: .3s; |
|
|
|
} |
|
|
|
} |
|
|
|
.text{ |
|
|
|
.text{ |
|
|
|
font-size: 14px; |
|
|
|
font-size: 14px; |
|
|
@ -765,6 +810,157 @@ export default { |
|
|
|
.pro-pic{ |
|
|
|
.pro-pic{ |
|
|
|
width: 460px; |
|
|
|
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{ |
|
|
|
.none{ |
|
|
|
padding: 50px 0; |
|
|
|
padding: 50px 0; |
|
|
@ -778,12 +974,12 @@ export default { |
|
|
|
color: #333; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
/deep/.preview-dia{ |
|
|
|
/deep/.preview-dia{ |
|
|
|
padding: 20px; |
|
|
|
padding: 20px; |
|
|
|
.preview-wrap{ |
|
|
|
.preview-wrap{ |
|
|
|
height: calc(100vh - 80px); |
|
|
|
height: calc(100vh - 80px); |
|
|
|
overflow: auto; |
|
|
|
overflow: auto; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |