parent
bf93450b76
commit
f9a9afdf57
16 changed files with 1351 additions and 8 deletions
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 77 KiB |
|
After Width: | Height: | Size: 506 B |
|
After Width: | Height: | Size: 539 B |
|
After Width: | Height: | Size: 472 B |
|
After Width: | Height: | Size: 427 B |
|
After Width: | Height: | Size: 471 B |
|
After Width: | Height: | Size: 290 B |
@ -0,0 +1,956 @@ |
|||||||
|
<template> |
||||||
|
<div class="wrap"> |
||||||
|
<!--header--> |
||||||
|
<div class="header"> |
||||||
|
<div class="bg_header"> |
||||||
|
<div class="header_nav fl t_title">数据前瞻大屏展示</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!--main--> |
||||||
|
<div class="data_content"> |
||||||
|
<!-- <div class="data_time"> |
||||||
|
温馨提示: 点击模块后跳转至详情页面。 |
||||||
|
</div> --> |
||||||
|
|
||||||
|
<div class="data_main"> |
||||||
|
<div class="main_left fl"> |
||||||
|
<div class="left_1 t_btn6" style="cursor: pointer;"> |
||||||
|
<!--左上边框--> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="t_l_line"></i> |
||||||
|
<i class="l_t_line"></i> |
||||||
|
</div> |
||||||
|
<!--右上边框--> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="t_r_line"></i> |
||||||
|
<i class="r_t_line"></i> |
||||||
|
</div> |
||||||
|
<!--左下边框--> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="l_b_line"></i> |
||||||
|
<i class="b_l_line"></i> |
||||||
|
</div> |
||||||
|
<!--右下边框--> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="r_b_line"></i> |
||||||
|
<i class="b_r_line"></i> |
||||||
|
</div> |
||||||
|
<div class="main_title"> |
||||||
|
<img src="@/assets/img/screen/t_1.png" alt=""> |
||||||
|
中国宏观杠杆率 |
||||||
|
</div> |
||||||
|
<div id="chart1" class="chart" style="width:100%;height: 280px;"></div> |
||||||
|
</div> |
||||||
|
<div class="left_2" style="cursor: pointer;"> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="t_l_line"></i> |
||||||
|
<i class="l_t_line"></i> |
||||||
|
</div> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="t_r_line"></i> |
||||||
|
<i class="r_t_line"></i> |
||||||
|
</div> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="l_b_line"></i> |
||||||
|
<i class="b_l_line"></i> |
||||||
|
</div> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="r_b_line"></i> |
||||||
|
<i class="b_r_line"></i> |
||||||
|
</div> |
||||||
|
<div class="main_title"> |
||||||
|
<img src="@/assets/img/screen/t_2.png" alt=""> |
||||||
|
国际旅游外汇收入构成 |
||||||
|
</div> |
||||||
|
<div id="chart2" class="chart t_btn9" style="width:100%;height: 280px;"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="main_center fl"> |
||||||
|
<div class="center_text" style="position: relative;"> |
||||||
|
<!--左上边框--> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="t_l_line"></i> |
||||||
|
<i class="l_t_line"></i> |
||||||
|
</div> |
||||||
|
<!--右上边框--> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="t_r_line"></i> |
||||||
|
<i class="r_t_line"></i> |
||||||
|
</div> |
||||||
|
<!--左下边框--> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="l_b_line"></i> |
||||||
|
<i class="b_l_line"></i> |
||||||
|
</div> |
||||||
|
<!--右下边框--> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="r_b_line"></i> |
||||||
|
<i class="b_r_line"></i> |
||||||
|
</div> |
||||||
|
<div class="main_title" style="left: 48%"> |
||||||
|
<img src="@/assets/img/screen/t_3.png" alt=""> |
||||||
|
加密货币行情 |
||||||
|
</div> |
||||||
|
<div id="chart_map" style="width:100%;height:610px;"> |
||||||
|
</div> |
||||||
|
<div class="linshi_zdy"> |
||||||
|
<ul> |
||||||
|
<li><span></span>2015批(8个)</li> |
||||||
|
<li><span></span>2016批(15个)</li> |
||||||
|
<li><span></span>2017批(13个)</li> |
||||||
|
<li><span></span>2018批(11个)</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="main_right fr"> |
||||||
|
<div class="right_1"> |
||||||
|
<!--左上边框--> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="t_l_line"></i> |
||||||
|
<i class="l_t_line"></i> |
||||||
|
</div> |
||||||
|
<!--右上边框--> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="t_r_line"></i> |
||||||
|
<i class="r_t_line"></i> |
||||||
|
</div> |
||||||
|
<!--左下边框--> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="l_b_line"></i> |
||||||
|
<i class="b_l_line"></i> |
||||||
|
</div> |
||||||
|
<!--右下边框--> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="r_b_line"></i> |
||||||
|
<i class="b_r_line"></i> |
||||||
|
</div> |
||||||
|
<div class="main_title"> |
||||||
|
<img src="@/assets/img/screen/t_4.png" alt=""> |
||||||
|
人民币汇率中间价报告 |
||||||
|
</div> |
||||||
|
<div id="chart3" class="echart t_btn7" style="width:100%;height: 280px;"></div> |
||||||
|
</div> |
||||||
|
<div class="right_2"> |
||||||
|
<!--左上边框--> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="t_l_line"></i> |
||||||
|
<i class="l_t_line"></i> |
||||||
|
</div> |
||||||
|
<!--右上边框--> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="t_r_line"></i> |
||||||
|
<i class="r_t_line"></i> |
||||||
|
</div> |
||||||
|
<!--左下边框--> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="l_b_line"></i> |
||||||
|
<i class="b_l_line"></i> |
||||||
|
</div> |
||||||
|
<!--右下边框--> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="r_b_line"></i> |
||||||
|
<i class="b_r_line"></i> |
||||||
|
</div> |
||||||
|
<div class="main_title"> |
||||||
|
<img src="@/assets/img/screen/t_5.png" alt=""> |
||||||
|
央行货币当局资产负债 |
||||||
|
</div> |
||||||
|
<div id="chart4" class="echart fl t_btn4" style="width:100%;height: 280px;cursor: pointer;"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="data_bottom"> |
||||||
|
<div class="bottom_1 fl t_btn5" style="cursor: pointer;"> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="t_l_line"></i> |
||||||
|
<i class="l_t_line"></i> |
||||||
|
</div> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="t_r_line"></i> |
||||||
|
<i class="r_t_line"></i> |
||||||
|
</div> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="l_b_line"></i> |
||||||
|
<i class="b_l_line"></i> |
||||||
|
</div> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="r_b_line"></i> |
||||||
|
<i class="b_r_line"></i> |
||||||
|
</div> |
||||||
|
<div class="main_title"> |
||||||
|
<img src="@/assets/img/screen/t_7.png" alt=""> |
||||||
|
商品零售价格指数 |
||||||
|
</div> |
||||||
|
<div class="main_table t_btn8"> |
||||||
|
<table> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th>概况名称</th> |
||||||
|
<th>详情</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<tr v-for="(item, i) in goodsSell" :key="i"> |
||||||
|
<td>{{ item.hct }}</td> |
||||||
|
<td>{{ item.rcpi }}</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="bottom_center fl"> |
||||||
|
<div class="bottom_2 fl"> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="t_l_line"></i> |
||||||
|
<i class="l_t_line"></i> |
||||||
|
</div> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="t_r_line"></i> |
||||||
|
<i class="r_t_line"></i> |
||||||
|
</div> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="l_b_line"></i> |
||||||
|
<i class="b_l_line"></i> |
||||||
|
</div> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="r_b_line"></i> |
||||||
|
<i class="b_r_line"></i> |
||||||
|
</div> |
||||||
|
<div class="main_title" style="left:40%;"> |
||||||
|
<img src="@/assets/img/screen/t_7.png" alt=""> |
||||||
|
广西电子商务热销产品排行榜 |
||||||
|
</div> |
||||||
|
<div class="main_table t_btn8"> |
||||||
|
<table> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th>产品名称</th> |
||||||
|
<th>品种</th> |
||||||
|
<th>产地</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<tr> |
||||||
|
<td>荔浦百香果</td> |
||||||
|
<td>百香果</td> |
||||||
|
<td>荔浦</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>荔浦砂糖桔</td> |
||||||
|
<td>砂糖桔</td> |
||||||
|
<td>荔浦</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>90g将军峰小方盒绿茶</td> |
||||||
|
<td>中小叶种</td> |
||||||
|
<td>广西贺州</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>珍珠糯玉米</td> |
||||||
|
<td>粮食</td> |
||||||
|
<td>忻城县</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>桂花红糖</td> |
||||||
|
<td>桂花红糖</td> |
||||||
|
<td>大新县</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="bottom_3 fl"> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="t_l_line"></i> |
||||||
|
<i class="l_t_line"></i> |
||||||
|
</div> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="t_r_line"></i> |
||||||
|
<i class="r_t_line"></i> |
||||||
|
</div> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="l_b_line"></i> |
||||||
|
<i class="b_l_line"></i> |
||||||
|
</div> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="r_b_line"></i> |
||||||
|
<i class="b_r_line"></i> |
||||||
|
</div> |
||||||
|
<div class="main_title" style="left:45%;"> |
||||||
|
<img src="@/assets/img/screen/t_7.png" alt=""> |
||||||
|
电子商务热销店铺排行榜 |
||||||
|
</div> |
||||||
|
<div class="main_table t_btn2"> |
||||||
|
<table> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th>店铺名称</th> |
||||||
|
<th>产品</th> |
||||||
|
<th>销售额(月销)</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<tr> |
||||||
|
<td>鲜迪食品专营店</td> |
||||||
|
<td>海鸭蛋</td> |
||||||
|
<td>2.8万</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>中鼎水果专营店</td> |
||||||
|
<td>红心芭乐番石榴</td> |
||||||
|
<td>2.5万</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>中闽飘香旗舰店</td> |
||||||
|
<td>广西桂林罗汉果</td> |
||||||
|
<td>2.4万</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>芋小妹旗舰店</td> |
||||||
|
<td>广西荔浦大芋头</td> |
||||||
|
<td>1.3万</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>桂甄堂旗舰店</td> |
||||||
|
<td>柳州螺狮粉</td> |
||||||
|
<td>1.1万</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="bottom_4 fr"> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="t_l_line"></i> |
||||||
|
<i class="l_t_line"></i> |
||||||
|
</div> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="t_r_line"></i> |
||||||
|
<i class="r_t_line"></i> |
||||||
|
</div> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="l_b_line"></i> |
||||||
|
<i class="b_l_line"></i> |
||||||
|
</div> |
||||||
|
<div class="t_line_box"> |
||||||
|
<i class="r_b_line"></i> |
||||||
|
<i class="b_r_line"></i> |
||||||
|
</div> |
||||||
|
<div class="main_title"> |
||||||
|
<img src="@/assets/img/screen/t_7.png" alt=""> |
||||||
|
平台活动案例 |
||||||
|
</div> |
||||||
|
<div class="main_table t_btn3 table_zdy"> |
||||||
|
<table> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th>活动主题</th> |
||||||
|
<th>活动举办地</th> |
||||||
|
<th>日期</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<tr> |
||||||
|
<td><a target="blank" href="http://www.gxitps.org/zhanhui/detail/id/20.html">2018广西特产行销全国</a></td> |
||||||
|
<td>南宁</td> |
||||||
|
<td>2018年</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td><a target="blank" href="http://www.gxitps.org/zhanhui/detail/id/16.html">2018壮族三月三电商节</a></td> |
||||||
|
<td>南宁</td> |
||||||
|
<td>2018年</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td><a target="blank" href="http://www.gxitps.org/zhanhui/detail/id/17.html">2018灵山荔枝节</a></td> |
||||||
|
<td>灵山县</td> |
||||||
|
<td>2018年</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>2018年货节</td> |
||||||
|
<td>广西</td> |
||||||
|
<td>2018年</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>2017好讲师大赛</td> |
||||||
|
<td>南宁</td> |
||||||
|
<td>2017年</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Setting from '@/setting' |
||||||
|
import util from '@/libs/util' |
||||||
|
import * as echarts from 'echarts' |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
goodsSell: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.renderChart() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
renderChart() { |
||||||
|
// 中国宏观杠杆率 |
||||||
|
this.$get(`${this.api.previewData}?tableName=hg_zg_zhongguohongguanganggan&tableId=14`).then(res => { |
||||||
|
const { comment, data } = res |
||||||
|
const series = [] |
||||||
|
comment.map(e => { |
||||||
|
// id和操作时间不用显示 |
||||||
|
e.field !== 'id' && e.field !== 'operation_time' && series.push({ |
||||||
|
name: e.comment, |
||||||
|
type: 'line', |
||||||
|
data: data.map(n => n[e.field]) |
||||||
|
}) |
||||||
|
}) |
||||||
|
echarts.init(document.querySelector(`#chart1`)).setOption({ |
||||||
|
title: { |
||||||
|
text: '' |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'axis' |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
data: comment.map(e => e.comment), |
||||||
|
textStyle:{ |
||||||
|
color: '#fff' |
||||||
|
}, |
||||||
|
top: '8%' |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
top: '40%', |
||||||
|
left: '3%', |
||||||
|
right: '4%', |
||||||
|
bottom: '3%', |
||||||
|
containLabel: true |
||||||
|
}, |
||||||
|
color: ['#FF4949','#FFA74D','#FFEA51','#4BF0FF','#44AFF0','#4E82FF','#584BFF','#BE4DFF','#F845F1'], |
||||||
|
xAxis: { |
||||||
|
type: 'category', |
||||||
|
boundaryGap: false, |
||||||
|
data: data.map(e => e.date.replace(' 00:00:00', '')), // 年份 |
||||||
|
splitLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: '#fff' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
name: '', |
||||||
|
type: 'value', |
||||||
|
splitLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: '#fff' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
series |
||||||
|
}) |
||||||
|
}).catch(res => {}) |
||||||
|
|
||||||
|
// 全国税收收入 |
||||||
|
this.$get(`${this.api.previewData}?tableName=hg_zg_jr_quanguoshuishoushouru&tableId=33`).then(res => { |
||||||
|
const { comment, data } = res |
||||||
|
echarts.init(document.querySelector(`#chart3`)).setOption({ |
||||||
|
title: { |
||||||
|
text: '' |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'axis' |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: 'category', |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: '#fff' |
||||||
|
} |
||||||
|
}, |
||||||
|
data: data.map(e => e.quarter) |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
type: 'value', |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: '#fff' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
color: ['#4BF0FF','#44AFF0','#4E82FF','#584BFF','#BE4DFF','#F845F1'], |
||||||
|
legend: { |
||||||
|
data: ['税收收入合计'], |
||||||
|
textStyle:{ |
||||||
|
color: '#fff' |
||||||
|
}, |
||||||
|
top: '8%' |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
top: '20%', |
||||||
|
left: '3%', |
||||||
|
right: '4%', |
||||||
|
bottom: '3%', |
||||||
|
containLabel: true |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
data: data.map(e => e.ttr), |
||||||
|
type: 'bar', |
||||||
|
showBackground: true, |
||||||
|
backgroundStyle: { |
||||||
|
color: 'rgba(180, 180, 180, 0.2)' |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
}) |
||||||
|
}).catch(res => {}) |
||||||
|
|
||||||
|
// 国际旅游外汇收入构成 |
||||||
|
this.$get(`${this.api.previewData}?tableName=hg_zg_jr_guojilvyouwaihuishourugoucheng&tableId=52`).then(res => { |
||||||
|
const { comment, data } = res |
||||||
|
const colors = ['#f845f1', '#ad46f3', '#5045f6', '#4777f5', '#44aff0', '#45dbf7', '#f6d54a'] |
||||||
|
const series = [] |
||||||
|
data.map((e, i) => { |
||||||
|
series.push({ |
||||||
|
value: e.quantity, |
||||||
|
name: e.indexs, |
||||||
|
itemStyle: { |
||||||
|
normal: { |
||||||
|
color: colors[i] |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
echarts.init(document.querySelector(`#chart2`)).setOption({ |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
formatter: "{a} <br/>{b} : {c}亿" |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
x: 'center', |
||||||
|
y: '15%', |
||||||
|
data: data.map(e => e.indexs), |
||||||
|
icon: 'circle', |
||||||
|
textStyle: { |
||||||
|
color: '#fff', |
||||||
|
} |
||||||
|
}, |
||||||
|
calculable: true, |
||||||
|
series: [{ |
||||||
|
name: '', |
||||||
|
type: 'pie', |
||||||
|
//起始角度，支持范围[0, 360] |
||||||
|
// startAngle: 0, |
||||||
|
//饼图的半径，数组的第一项是内半径，第二项是外半径 |
||||||
|
radius : '45%', |
||||||
|
//支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度 |
||||||
|
center: ['50%', '65%'], |
||||||
|
//是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式： |
||||||
|
// 'radius' 面积展现数据的百分比，半径展现数据的大小。 |
||||||
|
// 'area' 所有扇区面积相同，仅通过半径展现数据大小 |
||||||
|
// roseType: 'radius', |
||||||
|
//是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。 |
||||||
|
// avoidLabelOverlap: false, |
||||||
|
label: { |
||||||
|
normal: { |
||||||
|
show: true, |
||||||
|
formatter: '{b}{c}万件' |
||||||
|
}, |
||||||
|
emphasis: { |
||||||
|
show: true |
||||||
|
} |
||||||
|
}, |
||||||
|
labelLine: { |
||||||
|
normal: { |
||||||
|
show: true, |
||||||
|
length2: 1, |
||||||
|
}, |
||||||
|
emphasis: { |
||||||
|
show: true |
||||||
|
} |
||||||
|
}, |
||||||
|
data: series |
||||||
|
}] |
||||||
|
}) |
||||||
|
}).catch(res => {}) |
||||||
|
|
||||||
|
// 央行货币当局资产负债 |
||||||
|
this.$get(`${this.api.previewData}?tableName=hg_zg_jr_yanghanghuobidangjuzichanfuzhai&tableId=55`).then(res => { |
||||||
|
const { comment, data } = res |
||||||
|
echarts.init(document.querySelector(`#chart4`)).setOption({ |
||||||
|
tooltip: { |
||||||
|
trigger: 'axis', |
||||||
|
axisPointer: { |
||||||
|
lineStyle: { |
||||||
|
color: '#dddc6b' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
top: '0%', |
||||||
|
data: ['货币黄金', '储备货币'], |
||||||
|
textStyle: { |
||||||
|
color: 'rgba(255,255,255,.5)', |
||||||
|
fontSize: '12', |
||||||
|
} |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
left: '10', |
||||||
|
top: '30', |
||||||
|
right: '10', |
||||||
|
bottom: '10', |
||||||
|
containLabel: true |
||||||
|
}, |
||||||
|
xAxis: [{ |
||||||
|
type: 'category', |
||||||
|
boundaryGap: false, |
||||||
|
axisLabel: { |
||||||
|
textStyle: { |
||||||
|
color: "rgba(255,255,255,.6)", |
||||||
|
fontSize: 12, |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: 'rgba(255,255,255,.2)' |
||||||
|
} |
||||||
|
}, |
||||||
|
data: data.map(e => e.statistical_time.replace(' 0:00', '')) |
||||||
|
}, { |
||||||
|
axisPointer: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
position: 'bottom', |
||||||
|
offset: 20 |
||||||
|
}], |
||||||
|
yAxis: [{ |
||||||
|
type: 'value', |
||||||
|
axisTick: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: 'rgba(255,255,255,.1)' |
||||||
|
} |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
textStyle: { |
||||||
|
color: "rgba(255,255,255,.6)", |
||||||
|
fontSize: 12, |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: 'rgba(255,255,255,.1)' |
||||||
|
} |
||||||
|
} |
||||||
|
}], |
||||||
|
series: [{ |
||||||
|
name: '货币黄金', |
||||||
|
type: 'line', |
||||||
|
smooth: true, |
||||||
|
symbol: 'circle', |
||||||
|
symbolSize: 5, |
||||||
|
showSymbol: false, |
||||||
|
lineStyle: { |
||||||
|
normal: { |
||||||
|
color: '#0184d5', |
||||||
|
width: 2 |
||||||
|
} |
||||||
|
}, |
||||||
|
areaStyle: { |
||||||
|
normal: { |
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
||||||
|
offset: 0, |
||||||
|
color: 'rgba(1, 132, 213, 0.4)' |
||||||
|
}, { |
||||||
|
offset: 0.8, |
||||||
|
color: 'rgba(1, 132, 213, 0.1)' |
||||||
|
}], false), |
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.1)', |
||||||
|
} |
||||||
|
}, |
||||||
|
itemStyle: { |
||||||
|
normal: { |
||||||
|
color: '#0184d5', |
||||||
|
borderColor: 'rgba(221, 220, 107, .1)', |
||||||
|
borderWidth: 12 |
||||||
|
} |
||||||
|
}, |
||||||
|
data: data.map(e => e.monetary_gold) |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '储备货币', |
||||||
|
type: 'line', |
||||||
|
smooth: true, |
||||||
|
symbol: 'circle', |
||||||
|
symbolSize: 5, |
||||||
|
showSymbol: false, |
||||||
|
lineStyle: { |
||||||
|
normal: { |
||||||
|
color: '#00d887', |
||||||
|
width: 2 |
||||||
|
} |
||||||
|
}, |
||||||
|
areaStyle: { |
||||||
|
normal: { |
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
||||||
|
offset: 0, |
||||||
|
color: 'rgba(0, 216, 135, 0.4)' |
||||||
|
}, { |
||||||
|
offset: 0.8, |
||||||
|
color: 'rgba(0, 216, 135, 0.1)' |
||||||
|
}], false), |
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.1)', |
||||||
|
} |
||||||
|
}, |
||||||
|
itemStyle: { |
||||||
|
normal: { |
||||||
|
color: '#00d887', |
||||||
|
borderColor: 'rgba(221, 220, 107, .1)', |
||||||
|
borderWidth: 12 |
||||||
|
} |
||||||
|
}, |
||||||
|
data: data.map(e => e.reserve_money) |
||||||
|
} |
||||||
|
] |
||||||
|
}) |
||||||
|
}).catch(res => {}) |
||||||
|
|
||||||
|
// 商品零售价格指数 |
||||||
|
this.$get(`${this.api.previewData}?tableName=hg_zg_jr_shangpinlingshoujiagezhishu&tableId=60`).then(res => { |
||||||
|
const { data } = res |
||||||
|
const goodsSell = [] |
||||||
|
data.map(e => { |
||||||
|
goodsSell.push({ |
||||||
|
hct: e.hct, |
||||||
|
rcpi: e.rcpi |
||||||
|
}) |
||||||
|
}) |
||||||
|
this.goodsSell = goodsSell |
||||||
|
}).catch(res => {}) |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@import url(../../../styles/page/screen.scss); |
||||||
|
.wrap { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
color:#333; |
||||||
|
/* overflow: hidden;*/ |
||||||
|
background: url('../../../assets/img/screen/screen1.jpg') no-repeat; |
||||||
|
background-size: 100% 100%; |
||||||
|
} |
||||||
|
/*header开始*/ |
||||||
|
.header{ |
||||||
|
width: 100%; |
||||||
|
height: 80px; |
||||||
|
padding:0 20px; |
||||||
|
min-width: 1366px; |
||||||
|
} |
||||||
|
.bg_header{ |
||||||
|
width: 100%; |
||||||
|
height: 80px; |
||||||
|
background: url(../../../assets/img/screen/screen2.png) no-repeat; |
||||||
|
background-size: 100% 100%; |
||||||
|
} |
||||||
|
.header>.header_logo{ |
||||||
|
padding:18px 10px 10px 0px; |
||||||
|
} |
||||||
|
.header>.header_logo>a{ |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.header>.header_logo>a>img{ |
||||||
|
width:260px; |
||||||
|
} |
||||||
|
|
||||||
|
.header>.header_nav{ |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
.header>.header_nav>ul>li{ |
||||||
|
float: left; |
||||||
|
margin-right: 6px; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.header>.header_nav>ul>li>a{ |
||||||
|
display: block; |
||||||
|
height: 80px; |
||||||
|
padding:0 10px 0 30px; |
||||||
|
line-height: 80px; |
||||||
|
color:#fff; |
||||||
|
} |
||||||
|
.header>.header_nav>ul>li>a:hover{ |
||||||
|
border-bottom: 4px solid #4b8df8; |
||||||
|
} |
||||||
|
.header>.header_nav>ul>li>img{ |
||||||
|
float: left; |
||||||
|
position: absolute; |
||||||
|
top: 33px; |
||||||
|
left:10px; |
||||||
|
} |
||||||
|
.header>.header_nav>ul>li>a.nav_current{ |
||||||
|
border-bottom: 4px solid #4b8df8; |
||||||
|
} |
||||||
|
|
||||||
|
.header>.header_myself{ |
||||||
|
width: 90px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.header>.header_myself>p{ |
||||||
|
color:#fff; |
||||||
|
font-size: 13px; |
||||||
|
margin-top: 15px; |
||||||
|
} |
||||||
|
.header>.header_myself>a{ |
||||||
|
color:#fff; |
||||||
|
font-size: 13px; |
||||||
|
} |
||||||
|
|
||||||
|
/*content 开始*/ |
||||||
|
|
||||||
|
.content{ |
||||||
|
margin: 20px; |
||||||
|
width: calc(100% - 40px); |
||||||
|
min-width: 1366px; |
||||||
|
} |
||||||
|
.content>.content_title{ |
||||||
|
width: 100%; |
||||||
|
height: 35px; |
||||||
|
line-height: 35px; |
||||||
|
background-color: #4b8df8; |
||||||
|
box-sizing: border-box; |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
.content>.content_title>p{ |
||||||
|
color:#fff; |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
.content>.content_title>img{ |
||||||
|
margin: 10px 10px 0px 10px; |
||||||
|
} |
||||||
|
.content>.content_main{ |
||||||
|
min-width: 1366px; |
||||||
|
} |
||||||
|
.content>.content_main>.content_search>div{ |
||||||
|
margin-right: 25px; |
||||||
|
} |
||||||
|
.content>.content_main>.content_search>div>label{ |
||||||
|
width: 80px; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
.content>.content_main>.content_search>div>select, |
||||||
|
.content>.content_main>.content_search>div>input |
||||||
|
{ |
||||||
|
width: 200px; |
||||||
|
} |
||||||
|
.content>.content_main>.content_table{ |
||||||
|
margin-top: 30px; |
||||||
|
} |
||||||
|
.content>.content_main>.content_table>table{ |
||||||
|
margin-top: 15px; |
||||||
|
} |
||||||
|
.content>.content_main>.content_table>table th:nth-child(1), |
||||||
|
.content>.content_main>.content_table>table td:nth-child(1){ |
||||||
|
width: 50px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.content>.content_main>.content_page>span { |
||||||
|
font-size: 12.8px; |
||||||
|
margin-top: 7px; |
||||||
|
} |
||||||
|
.content>.content_main>.content_page>select{ |
||||||
|
width: 70px; |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
/*content 结束*/ |
||||||
|
|
||||||
|
.t_title{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
text-align: center; |
||||||
|
font-size: 2.5em; |
||||||
|
line-height: 80px; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
#chart_map{ |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.t_show{ |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
right: 0; |
||||||
|
border-radius: 2px; |
||||||
|
background: #2C58A6; |
||||||
|
padding: 2px 5px; |
||||||
|
color: #fff; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.linshi_zdy{ |
||||||
|
position: absolute; |
||||||
|
right: 0px; |
||||||
|
top: 450px; |
||||||
|
} |
||||||
|
.linshi_zdy li{ |
||||||
|
width: 150px; |
||||||
|
font-size: 16px; |
||||||
|
padding: 3px 8px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.linshi_zdy span{ |
||||||
|
display: block; |
||||||
|
width: 14px; |
||||||
|
height: 14px; |
||||||
|
float: left; |
||||||
|
border-radius: 50%; |
||||||
|
margin-top: 3px; |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
.linshi_zdy li:first-child{ |
||||||
|
color: #ff0000; |
||||||
|
} |
||||||
|
.linshi_zdy li:first-child span{ |
||||||
|
background: #ff0000; |
||||||
|
} |
||||||
|
.linshi_zdy li:nth-child(2){ |
||||||
|
color: #9cff00; |
||||||
|
} |
||||||
|
.linshi_zdy li:nth-child(2) span{ |
||||||
|
background: #9cff00; |
||||||
|
} |
||||||
|
.linshi_zdy li:nth-child(3){ |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
.linshi_zdy li:nth-child(3) span{ |
||||||
|
background: #fff; |
||||||
|
} |
||||||
|
.linshi_zdy li:nth-child(4){ |
||||||
|
color: #f4a100; |
||||||
|
} |
||||||
|
.linshi_zdy li:nth-child(4) span{ |
||||||
|
background: #f4a100; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
export default { |
||||||
|
path: '/screen', |
||||||
|
name: 'screen', |
||||||
|
component: () => import('@/pages/screen/list'), |
||||||
|
meta: { title: '大屏展示' } |
||||||
|
}; |
||||||
@ -0,0 +1,370 @@ |
|||||||
|
.data_content{ |
||||||
|
/*overflow-x: hidden;*/ |
||||||
|
min-width: 1366px; |
||||||
|
padding-top: 20px; |
||||||
|
padding-bottom: 20px; |
||||||
|
} |
||||||
|
.data_content .data_time{ |
||||||
|
width: 340px; |
||||||
|
height: 35px; |
||||||
|
background-color: #2C58A6; |
||||||
|
line-height: 35px; |
||||||
|
color: #fff; |
||||||
|
font-size: 12.8px; |
||||||
|
position: relative; |
||||||
|
margin-bottom: 25px; |
||||||
|
margin-left: 20px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.data_content .data_time img{ |
||||||
|
position: absolute; |
||||||
|
top: 8px; |
||||||
|
left: 15px; |
||||||
|
} |
||||||
|
.data_content .data_info{ |
||||||
|
width: calc(100% - 40px); |
||||||
|
margin-bottom: 40px; |
||||||
|
height: 110px; |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
.data_content .data_info .info_1{ |
||||||
|
width: 40%; |
||||||
|
height: 110px; |
||||||
|
} |
||||||
|
.data_content .data_info .info_1>.text_1{ |
||||||
|
width: calc(100% - 25px); |
||||||
|
background-color: #034c6a; |
||||||
|
height: 110px; |
||||||
|
} |
||||||
|
|
||||||
|
.data_content .data_info .info_2{ |
||||||
|
width: 31%; |
||||||
|
height: 110px; |
||||||
|
} |
||||||
|
.data_content .data_info .info_2>.text_2{ |
||||||
|
width: calc(100% - 25px); |
||||||
|
background-color: #034c6a; |
||||||
|
height: 110px; |
||||||
|
} |
||||||
|
|
||||||
|
.data_content .data_info .info_3{ |
||||||
|
width: 29%; |
||||||
|
height: 110px; |
||||||
|
} |
||||||
|
.data_content .data_info .info_3>.text_3{ |
||||||
|
width:100%; |
||||||
|
background-color: #034c6a; |
||||||
|
height: 110px; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.data_content .data_info>div.info_1>.text_1>div{ |
||||||
|
width: 33.333%; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.data_content .data_info>div.info_2>div>div, |
||||||
|
.data_content .data_info>div.info_3>div>div{ |
||||||
|
width: 50%; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.data_content .data_info img{ |
||||||
|
position: absolute; |
||||||
|
top: 35px; |
||||||
|
left: 15px; |
||||||
|
} |
||||||
|
.data_content .data_info>div>div>div>div{ |
||||||
|
margin-left:65px; |
||||||
|
margin-top: 23px; |
||||||
|
} |
||||||
|
.data_content .data_info>div.info_2>div>div>div{ |
||||||
|
margin-left: 70px; |
||||||
|
margin-top: 23px; |
||||||
|
} |
||||||
|
.data_content .data_info p:nth-child(1){ |
||||||
|
color:#fff; |
||||||
|
font-size: 12.8px; |
||||||
|
} |
||||||
|
.data_content .data_info p:nth-child(2){ |
||||||
|
font-weight: 600; |
||||||
|
font-size: 28px; |
||||||
|
color:#ffff43; |
||||||
|
} |
||||||
|
.data_content .data_info>div.info_2 p:nth-child(2){ |
||||||
|
font-weight: 600; |
||||||
|
font-size: 28px; |
||||||
|
color:#25f3e6; |
||||||
|
} |
||||||
|
.data_content .data_info>div.info_3 p:nth-child(2){ |
||||||
|
font-weight: 600; |
||||||
|
font-size: 28px; |
||||||
|
color:#ff4e4e; |
||||||
|
} |
||||||
|
|
||||||
|
.data_content .data_main{ |
||||||
|
width: calc(100% - 40px); |
||||||
|
margin-bottom: 40px; |
||||||
|
height: 615px; |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
.data_content .data_main .main_left{ |
||||||
|
width: 24%; |
||||||
|
} |
||||||
|
.data_content .data_main .main_left>div{ |
||||||
|
width: 100%; |
||||||
|
height: 280px; |
||||||
|
box-sizing: border-box; |
||||||
|
border: 1px solid #2C58A6; |
||||||
|
position: relative; |
||||||
|
box-shadow: 0 0 10px #2C58A6; |
||||||
|
} |
||||||
|
.data_content .data_main .main_left div.left_1{ |
||||||
|
/*background: url("../images/chart_1.png") no-repeat center;*/ |
||||||
|
} |
||||||
|
|
||||||
|
.data_content .data_main .main_left div.left_2{ |
||||||
|
/*background: url("../images/chart_2.png") no-repeat center;*/ |
||||||
|
} |
||||||
|
.data_content .data_main .main_left div:nth-child(1){ |
||||||
|
margin-bottom: 50px; |
||||||
|
} |
||||||
|
.main_title{ |
||||||
|
height: 35px; |
||||||
|
line-height: 33px; |
||||||
|
background-color: #2C58A6; |
||||||
|
border-radius: 18px; |
||||||
|
position: absolute; |
||||||
|
top: -17px; |
||||||
|
left: 40%; |
||||||
|
margin-left: -90px; |
||||||
|
color:#fff; |
||||||
|
font-size: 18px; |
||||||
|
font-weight: 600; |
||||||
|
padding: 0 20px; |
||||||
|
z-index: 1000; |
||||||
|
text-align: center; |
||||||
|
img{ |
||||||
|
position: absolute; |
||||||
|
top: 8px; |
||||||
|
left: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.data_content .data_main .main_center{ |
||||||
|
width: 52%; |
||||||
|
height: 610px; |
||||||
|
|
||||||
|
} |
||||||
|
.data_content .data_main .main_center .center_text{ |
||||||
|
width: calc(100% - 50px); |
||||||
|
height: 610px; |
||||||
|
margin-left: 25px; |
||||||
|
margin-right: 25px; |
||||||
|
box-sizing: border-box; |
||||||
|
border: 1px solid #2C58A6; |
||||||
|
box-shadow: 0px 0px 6px #2C58A6; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.l_t_line{ |
||||||
|
width: 5px; |
||||||
|
height: 24px; |
||||||
|
left: -3px; |
||||||
|
top: -3px; |
||||||
|
} |
||||||
|
.t_l_line{ |
||||||
|
height: 5px; |
||||||
|
width: 26px; |
||||||
|
left: -3px; |
||||||
|
top: -3px; |
||||||
|
} |
||||||
|
.t_line_box { |
||||||
|
position: absolute; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.t_line_box i{ |
||||||
|
background-color: #4788fb; |
||||||
|
box-shadow: 0px 0px 10px #4788fb; |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
.t_r_line{ |
||||||
|
height: 5px; |
||||||
|
width: 26px; |
||||||
|
right: -3px; |
||||||
|
top: -3px; |
||||||
|
} |
||||||
|
.r_t_line{ |
||||||
|
width: 5px; |
||||||
|
height: 24px; |
||||||
|
right: -3px; |
||||||
|
top: -3px; |
||||||
|
} |
||||||
|
.l_b_line{ |
||||||
|
width: 5px; |
||||||
|
height: 24px; |
||||||
|
left: -3px; |
||||||
|
bottom: -3px; |
||||||
|
} |
||||||
|
.b_l_line{ |
||||||
|
height: 5px; |
||||||
|
width: 26px; |
||||||
|
left: -3px; |
||||||
|
bottom: -3px; |
||||||
|
} |
||||||
|
.r_b_line{ |
||||||
|
width: 5px; |
||||||
|
height: 24px; |
||||||
|
right: -3px; |
||||||
|
bottom: -3px; |
||||||
|
} |
||||||
|
.b_r_line{ |
||||||
|
height: 5px; |
||||||
|
width: 26px; |
||||||
|
right: -3px; |
||||||
|
bottom: -3px; |
||||||
|
} |
||||||
|
|
||||||
|
.data_content .data_main .main_right{ |
||||||
|
width: 24%; |
||||||
|
} |
||||||
|
.data_content .data_main .main_right>div{ |
||||||
|
width: 100%; |
||||||
|
height: 280px; |
||||||
|
box-sizing: border-box; |
||||||
|
border: 1px solid #2C58A6; |
||||||
|
position: relative; |
||||||
|
box-shadow: 0 0 10px #2C58A6; |
||||||
|
} |
||||||
|
.data_content .data_main .main_right div.right_1 .choice{ |
||||||
|
position: absolute; |
||||||
|
top: 25px; |
||||||
|
right: 30px; |
||||||
|
z-index: 1000; |
||||||
|
} |
||||||
|
.data_content .data_main .main_right div.right_1 .choice label{ |
||||||
|
color:#fff; |
||||||
|
} |
||||||
|
|
||||||
|
.data_content .data_main .main_right div.right_2{ |
||||||
|
/*background: url("../images/chart_4.png") no-repeat center;*/ |
||||||
|
} |
||||||
|
.data_content .data_main .main_right div.right_2 .chart_text { |
||||||
|
width: 18%; |
||||||
|
color:#fff; |
||||||
|
text-align: center; |
||||||
|
margin-top: 12px; |
||||||
|
} |
||||||
|
.data_content .data_main .main_right div.right_2 .chart_text p{ |
||||||
|
margin-top: 21px; |
||||||
|
} |
||||||
|
.data_content .data_main .main_right div.right_2 .chart_text p img{ |
||||||
|
margin-right: 5px; |
||||||
|
margin-top: -4px; |
||||||
|
} |
||||||
|
.data_content .data_main .main_right div.right_2 .chart_text p:nth-child(1){ |
||||||
|
font-size: 14px; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
.data_content .data_main .main_right div.right_2 .text_sum{ |
||||||
|
text-align: center; |
||||||
|
color:#ffff43; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
.data_content .data_main .main_right div.right_2 .text_sum div:nth-child(2){ |
||||||
|
font-size: 18px; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
.data_content .data_main .main_right div:nth-child(1){ |
||||||
|
margin-bottom: 50px; |
||||||
|
} |
||||||
|
.data_content .data_bottom{ |
||||||
|
width: calc(100% - 40px); |
||||||
|
height: 280px; |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
.data_content .data_bottom div{ |
||||||
|
|
||||||
|
} |
||||||
|
.data_content .data_bottom .bottom_1{ |
||||||
|
width: 24%; |
||||||
|
height: 280px; |
||||||
|
position: relative; |
||||||
|
box-sizing: border-box; |
||||||
|
border: 1px solid #2C58A6; |
||||||
|
box-shadow: 0 0 10px #2C58A6; |
||||||
|
} |
||||||
|
.data_content .data_bottom .bottom_center{ |
||||||
|
width: 52%; |
||||||
|
height: 280px; |
||||||
|
} |
||||||
|
.data_content .data_bottom .bottom_2{ |
||||||
|
width: calc(50% - 35px); |
||||||
|
height: 280px; |
||||||
|
position: relative; |
||||||
|
box-sizing: border-box; |
||||||
|
border: 1px solid #2C58A6; |
||||||
|
margin-left: 25px; |
||||||
|
box-shadow: 0 0 10px #2C58A6; |
||||||
|
} |
||||||
|
.data_content .data_bottom .bottom_3{ |
||||||
|
width: calc(50% - 40px); |
||||||
|
height: 280px; |
||||||
|
position: relative; |
||||||
|
box-sizing: border-box; |
||||||
|
border: 1px solid #2C58A6; |
||||||
|
margin-left:25px; |
||||||
|
box-shadow: 0 0 10px #2C58A6; |
||||||
|
} |
||||||
|
.data_content .data_bottom .bottom_4{ |
||||||
|
width: 24%; |
||||||
|
height: 280px; |
||||||
|
position: relative; |
||||||
|
box-sizing: border-box; |
||||||
|
border: 1px solid #2C58A6; |
||||||
|
box-shadow: 0 0 10px #2C58A6; |
||||||
|
} |
||||||
|
|
||||||
|
.data_content .data_bottom div .main_table tr{ |
||||||
|
height: 42px; |
||||||
|
} |
||||||
|
.data_content .data_bottom div .main_table{ |
||||||
|
width: 100%; |
||||||
|
margin-top: 25px; |
||||||
|
} |
||||||
|
.data_content .data_bottom div .main_table table{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.data_content .data_bottom div .main_table thead tr{ |
||||||
|
height: 42px; |
||||||
|
} |
||||||
|
.data_content .data_bottom div .main_table th{ |
||||||
|
font-size: 12px; |
||||||
|
font-weight: 600; |
||||||
|
color:#61d2f7; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.data_content .data_bottom div .main_table th:nth-child(1){ |
||||||
|
|
||||||
|
} |
||||||
|
.data_content .data_bottom div .main_table th:nth-child(2){ |
||||||
|
|
||||||
|
} |
||||||
|
.data_content .data_bottom div .main_table td{ |
||||||
|
color:#fff; |
||||||
|
font-size: 10px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.data_content .data_bottom div .main_table tbody tr:nth-child(1), |
||||||
|
.data_content .data_bottom div .main_table tbody tr:nth-child(3), |
||||||
|
.data_content .data_bottom div .main_table tbody tr:nth-child(5){ |
||||||
|
background-color: #072951; |
||||||
|
box-shadow:-10px 0px 15px #2C58A6 inset, /*左边阴影*/ |
||||||
|
10px 0px 15px #2C58A6 inset; /*右边阴影*/ |
||||||
|
} |
||||||
|
.t_btn8,.t_btn2,.t_btn3{ |
||||||
|
position: relative; |
||||||
|
z-index: 100; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.table_zdy a{ |
||||||
|
color: #fff; |
||||||
|
} |
||||||
Loading…
Reference in new issue