|
|
|
|
@ -1,5 +1,7 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="wrap"> |
|
|
|
|
<!-- 全屏 --> |
|
|
|
|
<img class="full" src="@/assets/img/screen/full.png" alt="" @click="fullScreen"> |
|
|
|
|
<!--header--> |
|
|
|
|
<div class="header"> |
|
|
|
|
<div class="bg_header"> |
|
|
|
|
@ -40,7 +42,7 @@ |
|
|
|
|
<img src="@/assets/img/screen/t_1.png" alt=""> |
|
|
|
|
中国宏观杠杆率 |
|
|
|
|
</div> |
|
|
|
|
<div id="chart1" class="chart" style="width:100%;height: 280px;"></div> |
|
|
|
|
<div id="chart1" class="chart" style="height: 280px;"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="left_2" style="cursor: pointer;"> |
|
|
|
|
<div class="t_line_box"> |
|
|
|
|
@ -63,7 +65,7 @@ |
|
|
|
|
<img src="@/assets/img/screen/t_2.png" alt=""> |
|
|
|
|
国际旅游外汇收入构成 |
|
|
|
|
</div> |
|
|
|
|
<div id="chart2" class="chart t_btn9" style="width:100%;height: 280px;"></div> |
|
|
|
|
<div id="chart2" class="chart t_btn9" style="height: 280px;"></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_center fl"> |
|
|
|
|
@ -88,7 +90,7 @@ |
|
|
|
|
<i class="r_b_line"></i> |
|
|
|
|
<i class="b_r_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_title" style="left: 48%"> |
|
|
|
|
<div class="main_title"> |
|
|
|
|
<img src="@/assets/img/screen/t_3.png" alt=""> |
|
|
|
|
加密货币行情 |
|
|
|
|
</div> |
|
|
|
|
@ -135,7 +137,7 @@ |
|
|
|
|
<i class="r_b_line"></i> |
|
|
|
|
<i class="b_r_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_title" style="left: 48%"> |
|
|
|
|
<div class="main_title"> |
|
|
|
|
<img src="@/assets/img/screen/t_3.png" alt=""> |
|
|
|
|
全国用电及客运情况 |
|
|
|
|
</div> |
|
|
|
|
@ -168,11 +170,11 @@ |
|
|
|
|
<i class="r_b_line"></i> |
|
|
|
|
<i class="b_r_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_title" style="left: 50%"> |
|
|
|
|
<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 id="chart3" class="echart t_btn7" style="height: 280px;"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="right_2"> |
|
|
|
|
<!--左上边框--> |
|
|
|
|
@ -199,12 +201,12 @@ |
|
|
|
|
<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 id="chart4" style="height: 280px;"></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="data_bottom"> |
|
|
|
|
<div class="bottom_1 fl t_btn5" style="cursor: pointer;"> |
|
|
|
|
<div class="bottom_1 fl t_btn5"> |
|
|
|
|
<div class="t_line_box"> |
|
|
|
|
<i class="t_l_line"></i> |
|
|
|
|
<i class="l_t_line"></i> |
|
|
|
|
@ -260,11 +262,11 @@ |
|
|
|
|
<i class="r_b_line"></i> |
|
|
|
|
<i class="b_r_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_title" style="left:50%;"> |
|
|
|
|
<div class="main_title"> |
|
|
|
|
<img src="@/assets/img/screen/t_7.png" alt=""> |
|
|
|
|
新增信贷数据 |
|
|
|
|
</div> |
|
|
|
|
<div id="chart5" class="chart" style="width:100%;height: 310px;"></div> |
|
|
|
|
<div id="chart5" class="chart" style="height: 310px;"></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="bottom_4 fr"> |
|
|
|
|
@ -288,7 +290,7 @@ |
|
|
|
|
<img src="@/assets/img/screen/t_7.png" alt=""> |
|
|
|
|
以美元计算进口年率 |
|
|
|
|
</div> |
|
|
|
|
<div id="chart6" class="chart" style="width:100%;height: 310px;"></div> |
|
|
|
|
<div id="chart6" class="chart" style="height: 310px;"></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -355,7 +357,6 @@ export default { |
|
|
|
|
list[coin] = quo |
|
|
|
|
} |
|
|
|
|
this.cryptoList = list |
|
|
|
|
console.log("🚀 ~ file: index.vue ~ line 328 ~ subscribeMarket ~ list", list) |
|
|
|
|
this.$forceUpdate() |
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|
@ -363,6 +364,27 @@ export default { |
|
|
|
|
disconnect() { |
|
|
|
|
this.stompClient && this.stompClient.disconnect() |
|
|
|
|
}, |
|
|
|
|
// 全屏 |
|
|
|
|
fullScreen() { |
|
|
|
|
// 检测是否全屏 |
|
|
|
|
if (document.fullscreenElement || |
|
|
|
|
document.mozFullScreenElement || |
|
|
|
|
document.msFullScreenElement || |
|
|
|
|
document.webkitFullscreenElement) { |
|
|
|
|
const fn = document.exitFullScreen || |
|
|
|
|
document.mozCancelFullScreen || |
|
|
|
|
document.webkitExitFullscreen || |
|
|
|
|
document.msExitFullscreen |
|
|
|
|
fn.call(document) |
|
|
|
|
} else { |
|
|
|
|
const el = document.body |
|
|
|
|
const fn = el.requestFullscreen || |
|
|
|
|
el.mozRequestFullScreen || |
|
|
|
|
el.webkitRequestFullscreen || |
|
|
|
|
el.msRequestFullscreen |
|
|
|
|
fn.call(el) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 获取图标数据并渲染 |
|
|
|
|
renderChart() { |
|
|
|
|
// 中国宏观杠杆率 |
|
|
|
|
@ -1076,250 +1098,5 @@ export default { |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
@import url(../../../styles/page/screen.scss); |
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
|
|
background: #7d65f9; |
|
|
|
|
} |
|
|
|
|
.wrap { |
|
|
|
|
width: 100%; |
|
|
|
|
height: auto; |
|
|
|
|
color:#333; |
|
|
|
|
background: url('../../../assets/img/screen/screen1.jpg') no-repeat; |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.main_table { |
|
|
|
|
width: 100%; |
|
|
|
|
margin-top: 25px; |
|
|
|
|
table { |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
tr{ |
|
|
|
|
height: 42px; |
|
|
|
|
} |
|
|
|
|
th{ |
|
|
|
|
font-size: 12px; |
|
|
|
|
font-weight: 600; |
|
|
|
|
color:#61d2f7; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
td{ |
|
|
|
|
color:#fff; |
|
|
|
|
font-size: 10px; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
tbody tr:nth-child(odd) { |
|
|
|
|
background-color: #072951; |
|
|
|
|
box-shadow:-10px 0px 15px #2C58A6 inset, 10px 0px 15px #2C58A6 inset; |
|
|
|
|
} |
|
|
|
|
.percent { |
|
|
|
|
width: 64px; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
line-height: 24px; |
|
|
|
|
color: #fff; |
|
|
|
|
text-align: center; |
|
|
|
|
background-color: #0faf7d; |
|
|
|
|
border-radius: 2px; |
|
|
|
|
&.fall { |
|
|
|
|
background-color: #db4154; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.charts { |
|
|
|
|
display: flex; |
|
|
|
|
.chart { |
|
|
|
|
width: 50%; |
|
|
|
|
height: 220px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
/*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; |
|
|
|
|
} |
|
|
|
|
@import "../../../styles/page/screen.scss"; |
|
|
|
|
</style> |
