|
|
|
|
@ -1,26 +1,28 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="wrap" :class="{result: keyword}"> |
|
|
|
|
<hr class="shadow" v-if="keyword"> |
|
|
|
|
<div class="title" v-if="!keyword">准确，多元，海量数据</div> |
|
|
|
|
<div class="search-wrap"> |
|
|
|
|
<div class="search"> |
|
|
|
|
<div class="icon-wrap"> |
|
|
|
|
<img src="../../../assets/img/search-white.png" alt=""> |
|
|
|
|
<div class="banner"> |
|
|
|
|
<hr class="shadow" v-if="keyword"> |
|
|
|
|
<div class="title" v-if="!keyword">准确，多元，海量数据</div> |
|
|
|
|
<div class="search-wrap"> |
|
|
|
|
<div class="search"> |
|
|
|
|
<input ref="keyword" v-model="keyword" type="text" placeholder="请输入关键词"> |
|
|
|
|
<img v-if="keyword" src="../../../assets/img/remove-gray.png" alt="" class="remove" @click="keyword = ''"> |
|
|
|
|
<div class="icon-wrap"> |
|
|
|
|
<img src="../../../assets/img/search-white.png" alt=""> |
|
|
|
|
搜索 |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="hot" v-if="hotData.length"> |
|
|
|
|
<span class="name">热门下载：</span> |
|
|
|
|
<ul class="list"> |
|
|
|
|
<li v-for="(item,index) in hotData" :key="index" @click="toData(item)">{{item.categoryTwo}}</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
<input ref="keyword" v-model="keyword" type="text" placeholder="请输入关键词"> |
|
|
|
|
<img v-if="keyword" src="../../../assets/img/remove-gray.png" alt="" class="remove" @click="keyword = ''"> |
|
|
|
|
</div> |
|
|
|
|
<div class="hot" v-if="hotData.length"> |
|
|
|
|
<span class="name">热门下载：</span> |
|
|
|
|
<ul class="list"> |
|
|
|
|
<li v-for="(item,index) in hotData" :key="index" @click="toData(item)">{{item.categoryTwo}}</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<template v-if="keyword"> |
|
|
|
|
<div class="list-wrap" v-if="keyword"> |
|
|
|
|
<div class="tips"> |
|
|
|
|
<p class="result">搜索结果</p> |
|
|
|
|
<p class="result"><img src="@/assets/img/index/search.png" alt=""> 搜索结果</p> |
|
|
|
|
<p class="num">搜索完成，共有{{total}}个结果匹配</p> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
@ -42,9 +44,122 @@ |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
<div class="pagination"> |
|
|
|
|
<div class="pagination" v-show="total"> |
|
|
|
|
<el-pagination background @current-change="handleCurrentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination> |
|
|
|
|
</div> |
|
|
|
|
<div class="none" v-if="!total"> |
|
|
|
|
<img src="@/assets/img/index/index19.png" alt=""> |
|
|
|
|
<p class="text">暂无数据</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<template v-else> |
|
|
|
|
<!-- 简介 --> |
|
|
|
|
<ul class="intro"> |
|
|
|
|
<li> |
|
|
|
|
<img src="@/assets/img/index/index1.png" alt=""> |
|
|
|
|
<div class="text"> |
|
|
|
|
<h6>平台概览</h6> |
|
|
|
|
<p class="desc">了解数据平台一句话简介</p> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<img src="@/assets/img/index/index2.png" alt=""> |
|
|
|
|
<div class="text"> |
|
|
|
|
<h6>平台特色与优势</h6> |
|
|
|
|
<p class="desc">了解数据平台一句话简介</p> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<img src="@/assets/img/index/index1.png" alt=""> |
|
|
|
|
<div class="text"> |
|
|
|
|
<h6>平台概览</h6> |
|
|
|
|
<p class="desc">了解数据平台一句话简介</p> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<!-- 关于 --> |
|
|
|
|
<div class="about"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<h6 class="l-title">关于数据平台</h6> |
|
|
|
|
<div class="desc">欢迎使用数据平台，这是我们的财经数据库。我们的数据涵盖股票数据，期货数据，债券数据，期权数据，利率数据，公募数据和宏观数据，拥有超40年的历史数据，可为您解读、预测、分析，模拟市场趋势、经济周期和世界事件影响提供必要的数据支持。我们的数据均来源于各大专业财经权威网站和数据官方发布平台，并经过专业的数据分类和整理，可让用户轻松便捷地搜索并批量下载到自己研究所需的数据，极大地减轻自己搜索整理数据的时间，提高研究效率, 从而高效的输出研究成果。</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<!-- 特色与优势 --> |
|
|
|
|
<div class="adv"> |
|
|
|
|
<img src="@/assets/img/index/index8.png" alt="" class="shape shape1"> |
|
|
|
|
<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="l-title">特色与优势</h6> |
|
|
|
|
<ul class="list"> |
|
|
|
|
<li> |
|
|
|
|
<img src="@/assets/img/index/index3.png" alt=""> |
|
|
|
|
<h6>综合全面的财经数据库</h6> |
|
|
|
|
<p class="text">跨越多种主要资产类别，超40 年的历史数据和上千种宏观指标数据</p> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<img src="@/assets/img/index/index4.png" alt=""> |
|
|
|
|
<h6>权威、多样数据源</h6> |
|
|
|
|
<p class="text">原始数据来源权威、可靠，用户可依据自己所需进行数据再加工，以获得更准确的结果</p> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<img src="@/assets/img/index/index5.png" alt=""> |
|
|
|
|
<h6>实时更新无限下载</h6> |
|
|
|
|
<p class="text">数据库实时更新，会员用户可无限量下载平台各种数据表，随时获取最新数据</p> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<!-- 产品展示 --> |
|
|
|
|
<div class="product"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<h6 class="l-title">产品展示</h6> |
|
|
|
|
<div class="pics"> |
|
|
|
|
<div class="text"> |
|
|
|
|
<img src="@/assets/img/index/index11.png" alt="" class="icon"> |
|
|
|
|
<h6>自定义下载灵活便捷</h6> |
|
|
|
|
<p class="desc">可自选字段，时间区间，数据频率，轻松下载所需的数据。</p> |
|
|
|
|
</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="text"> |
|
|
|
|
<img src="@/assets/img/index/index13.png" alt="" class="icon"> |
|
|
|
|
<h6>使用概况统计一目了然</h6> |
|
|
|
|
<p class="desc">管理员可随时登录后台查看各种数据统计，了解各类数据的下载情况以及前台用户在数据平台的使用情况。</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="product"> |
|
|
|
|
<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> |
|
|
|
|
</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="text"> |
|
|
|
|
<img src="@/assets/img/index/index17.png" alt="" class="icon"> |
|
|
|
|
<h6>模糊搜索高效定位所需数据</h6> |
|
|
|
|
<p class="desc">强大的搜索功能，用户只需输入品种代码、关键词等，系统就会自动搜索出最匹配的数据供用户查看、下载。</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
@ -152,36 +267,50 @@ export default { |
|
|
|
|
<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; |
|
|
|
|
} |
|
|
|
|
.title{ |
|
|
|
|
margin: 70px 0 90px; |
|
|
|
|
font-size: 50px; |
|
|
|
|
margin-bottom: 37px; |
|
|
|
|
font-size: 45px; |
|
|
|
|
color: #fff; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
.list-wrap{ |
|
|
|
|
padding: 20px 40px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
} |
|
|
|
|
.search-wrap{ |
|
|
|
|
width: 600px; |
|
|
|
|
width: 700px; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
} |
|
|
|
|
.search{ |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
height: 46px; |
|
|
|
|
height: 62px; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
border: 2px solid $main-color; |
|
|
|
|
background-color: #fff; |
|
|
|
|
|
|
|
|
|
border-radius: 4px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
.icon-wrap{ |
|
|
|
|
display: inline-flex; |
|
|
|
|
align-items: center; |
|
|
|
|
height: 100%; |
|
|
|
|
padding: 0 30px; |
|
|
|
|
font-size: 18px; |
|
|
|
|
text-align: center; |
|
|
|
|
background-color: $main-color; |
|
|
|
|
color: #fff; |
|
|
|
|
background-color: #006EFF; |
|
|
|
|
img{ |
|
|
|
|
margin-right: 5px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
input{ |
|
|
|
|
flex: 1; |
|
|
|
|
padding-left: 20px; |
|
|
|
|
padding-left: 15px; |
|
|
|
|
font-size: 18px; |
|
|
|
|
color: #333; |
|
|
|
|
background-color: transparent; |
|
|
|
|
@ -195,7 +324,7 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.remove{ |
|
|
|
|
margin: 0 10px; |
|
|
|
|
margin: 0 20px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -213,15 +342,13 @@ export default { |
|
|
|
|
margin-left: 20px; |
|
|
|
|
li{ |
|
|
|
|
margin-right: 50px; |
|
|
|
|
color: #568df2; |
|
|
|
|
font-size: 16px; |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 14px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
&.result{ |
|
|
|
|
padding: 70px 90px 50px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
.shadow{ |
|
|
|
|
position: absolute; |
|
|
|
|
top: 0; |
|
|
|
|
@ -231,11 +358,6 @@ export default { |
|
|
|
|
border-bottom: 1px solid rgba(228,228,228,0.5); |
|
|
|
|
box-shadow: 0 0 12px 2px rgba(228,228,228,0.8); |
|
|
|
|
} |
|
|
|
|
.hot{ |
|
|
|
|
.name{ |
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.tips{ |
|
|
|
|
margin-bottom: 50px; |
|
|
|
|
.result{ |
|
|
|
|
@ -243,11 +365,154 @@ export default { |
|
|
|
|
font-size: 17px; |
|
|
|
|
color: $main-color; |
|
|
|
|
} |
|
|
|
|
img{ |
|
|
|
|
width: 22px; |
|
|
|
|
margin-right: 5px; |
|
|
|
|
} |
|
|
|
|
.num{ |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #515151; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.l-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; |
|
|
|
|
padding: 43px 0; |
|
|
|
|
background-color: #fff; |
|
|
|
|
li{ |
|
|
|
|
display: inline-flex; |
|
|
|
|
align-items: center; |
|
|
|
|
} |
|
|
|
|
img{ |
|
|
|
|
width: 50px; |
|
|
|
|
margin-right: 15px; |
|
|
|
|
} |
|
|
|
|
h6{ |
|
|
|
|
margin-bottom: 5px; |
|
|
|
|
font-size: 16px; |
|
|
|
|
color: #0B1D30; |
|
|
|
|
} |
|
|
|
|
.desc{ |
|
|
|
|
font-size: 13px; |
|
|
|
|
color: #757F92; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.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; |
|
|
|
|
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{ |
|
|
|
|
margin: 45px 0 16px; |
|
|
|
|
font-size: 18px; |
|
|
|
|
color: #0B1D30; |
|
|
|
|
} |
|
|
|
|
.text{ |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #757F92; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.pics{ |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
.icon{ |
|
|
|
|
width: 44px; |
|
|
|
|
} |
|
|
|
|
.text{ |
|
|
|
|
width: 340px; |
|
|
|
|
} |
|
|
|
|
h6{ |
|
|
|
|
margin: 30px 0 10px; |
|
|
|
|
font-size: 28px; |
|
|
|
|
color: #0B1D30; |
|
|
|
|
} |
|
|
|
|
.desc{ |
|
|
|
|
font-size: 15px; |
|
|
|
|
color: #757F92; |
|
|
|
|
} |
|
|
|
|
.pro-pic{ |
|
|
|
|
width: 460px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.none{ |
|
|
|
|
padding: 50px 0; |
|
|
|
|
text-align: center; |
|
|
|
|
img{ |
|
|
|
|
width: 324px; |
|
|
|
|
margin-bottom: 42px; |
|
|
|
|
} |
|
|
|
|
.text{ |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
