huoran
/
FE_huoran_data
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

可视化改版

Browse Source
dev_2022-04-07
yujialong 3 years ago
parent 67c0225b70
commit 83bcdb0461
2 changed files with 322 additions and 756 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 529
      src/pages/screen/list/index.vue
  2. 549
      src/styles/page/screen.scss

529
src/pages/screen/list/index.vue
Unescape View File

@ -10,296 +10,261 @@
</div>
<!--main-->
<div class="data_content">
<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="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="height: 280px;"></div>
</div>
<div class="content">
<div class="left">
<div class="item">
<!--左上边框-->
<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="height: 280px;"></div>
</div>
<div class="item">
<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="chart5" class="chart t_btn9" style="height: 280px;"></div>
</div>
<div class="item">
<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_center fl">
<div class="center_text" style="position: relative;margin-bottom: 25px;">
<!--左上边框-->
<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_3.png" alt="">
加密货币行情
</div>
<div class="main_table">
<table>
<thead>
<tr>
<th width="30%">币种</th>
<th width="25%">最新价</th>
<th width="25%">24H成交量</th>
<th>24H涨跌</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, i) in cryptoList" :key="i">
<td>{{ item.currencyPair }}</td>
<td>${{ item.amount }}</td>
<td>{{ parseInt(item.total) }}M</td>
<td><p :class="['percent', {fall: item.percent < 0}]">{{ (item.percent * 100).toFixed(2) }}%</p></td>
</tr>
</tbody>
</table>
</div>
<!-- <div id="chart_map" style="width:100%;height:610px;"></div> -->
</div>
<div class="center_text" style="position: relative;height: 232px">
<!--左上边框-->
<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_3.png" alt="">
全国用电及客运情况
</div>
<div class="charts">
<div class="chart" id="chart7"></div>
<div class="chart" id="chart8"></div>
</div>
</div>
<div class="main_title">
<img src="@/assets/img/screen/t_7.png" alt="">
{{ goodsSell.length ? goodsSell[0].operation_time.substr(0, 4) : 2021 }}年商品零售价格指数
</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="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" style="height: 280px;"></div>
</div>
<div class="main_table">
<table>
<thead>
<tr>
<th width="70%">概况名称</th>
<th>指数</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="data_bottom">
<div class="bottom_1 fl t_btn5">
<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="">
{{ goodsSell.length ? goodsSell[0].operation_time.substr(0, 4) : 2021 }}年商品零售价格指数
</div>
<div class="main_table t_btn8">
<table>
<thead>
<tr>
<th width="70%">概况名称</th>
<th>指数</th>
</tr>
</thead>
</table>
<div class="main_table" ref="tableWrap" style="height: 196px;margin-top: 0;overflow: auto">
<table>
<tbody>
<tr v-for="(item, i) in goodsSell" :key="i">
<td width="70%">{{ item.hct }}</td>
<td>{{ item.rcpi }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="middle">
<div class="item" style="height: 350px">
<!--左上边框-->
<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_3.png" alt="">
加密货币行情
</div>
<div class="main_table t_btn8" ref="tableWrap" style="height: 215px;margin-top: 0;overflow: auto">
<table>
<tbody>
<tr v-for="(item, i) in goodsSell" :key="i">
<td width="70%">{{ item.hct }}</td>
<td>{{ item.rcpi }}</td>
</tr>
</tbody>
</table>
<div class="main_table">
<table>
<thead>
<tr>
<th width="30%">币种</th>
<th width="25%">最新价</th>
<th width="25%">24H成交量</th>
<th>24H涨跌</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, i) in cryptoList" :key="i">
<td>{{ item.currencyPair }}</td>
<td>${{ item.amount }}</td>
<td>{{ parseInt(item.total) }}M</td>
<td><p :class="['percent', {fall: item.percent < 0}]">{{ (item.percent * 100).toFixed(2) }}%</p></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">
<img src="@/assets/img/screen/t_7.png" alt="">
新增信贷数据
</div>
<div id="chart5" class="chart" style="height: 310px;"></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>
<div class="item" style="height: 520px">
<!--左上边框-->
<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_3.png" alt="">
主要央行利率
</div>
<div class="chart" id="chart7"></div>
</div>
</div>
<div class="right">
<div class="item">
<!--左上边框-->
<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="height: 280px;"></div>
</div>
<div class="item">
<!--左上边框-->
<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" style="height: 280px;"></div>
</div>
<div class="item">
<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="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 id="chart6" class="chart" style="height: 310px;"></div>
<i class="r_b_line"></i>
<i class="b_r_line"></i>
</div>
</div>
<div class="main_title">
<img src="@/assets/img/screen/t_7.png" alt="">
以美元计算进口年率
</div>
<div id="chart6" class="chart" style="height: 270px;"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import Setting from '@/setting'
import util from '@/libs/util'
import * as echarts from 'echarts'
import SockJS from 'sockjs-client'
import Stomp from 'stompjs'
@ -409,7 +374,7 @@ export default {
// id和操作时间不用显示
e.field !== 'id' && e.field !== 'operation_time' && series.push({
name: e.comment,
type: 'line',
type: 'bar',
data: data.map(n => n[e.field])
})
})
@ -443,7 +408,7 @@ export default {
endValue: 6 // 一次性展示6个。
}
],
color: ['#FF4949','#FFA74D','#FFEA51','#4BF0FF','#44AFF0','#4E82FF','#584BFF','#BE4DFF','#F845F1'],
color: ['#6188e9','#9032f3','#a57de3','#4BF0FF','#44AFF0','#4E82FF','#584BFF','#BE4DFF','#F845F1'],
xAxis: {
type: 'category',
boundaryGap: false,
@ -822,8 +787,8 @@ export default {
trigger: 'axis'
},
grid: {
left: '10%',
right: '8%',
left: '18%',
right: '12%',
bottom: '12%'
},
dataZoom: [//滑动条
@ -1190,7 +1155,7 @@ export default {
// 监听resize事件，动态改变chart大小
window.addEventListener('resize', () => {
for (let i = 0; i < 8; i++) {
chart[i].resize()
chart[i] && chart[i].resize()
}
})
},

549
src/styles/page/screen.scss
Unescape View File

@ -1,15 +1,6 @@
::-webkit-scrollbar-thumb {
display: none;
}
.canvas {
z-index: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .7;
}
.wrap {
width: 100%;
height: auto;
@ -27,6 +18,64 @@
transform: scale(1.2);
}
}
.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;
}
}
.main_table {
width: 100%;
@ -72,7 +121,6 @@
height: 220px;
}
}
/*header开始*/
.header{
z-index: 2;
position: relative;
@ -86,117 +134,6 @@
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);
}
.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%;
@ -205,182 +142,23 @@
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;
}
.data_content{
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:nth-child(1){
margin-bottom: 50px;
.content{
display: flex;
padding: 20px;
.left, .right {
width: 24%;
}
.middle {
flex: 1;
margin: 0 30px;
}
.item {
position: relative;
height: 280px;
margin-bottom: 30px;
border: 1px solid #2C58A6;
box-shadow: 0 0 10px #2C58A6;
}
}
.main_title{
display: flex;
@ -404,180 +182,3 @@
margin-right: 10px;
}
}
.data_content .data_main .main_center{
width: 52%;
height: 610px;
}
.data_content .data_main .main_center .center_text{
width: calc(100% - 50px);
height: 350px;
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 .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: 310px;
margin-left: 20px;
}
.data_content .data_bottom .bottom_1{
width: 24%;
height: 310px;
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: 310px;
padding: 0 25px;
}
.data_content .data_bottom .bottom_2{
width: 100%;
height: 310px;
position: relative;
box-sizing: border-box;
border: 1px solid #2C58A6;
box-shadow: 0 0 10px #2C58A6;
}
.data_content .data_bottom .bottom_3{
width: calc(50% - 40px);
height: 310px;
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: 310px;
position: relative;
box-sizing: border-box;
border: 1px solid #2C58A6;
box-shadow: 0 0 10px #2C58A6;
}
.t_btn8,.t_btn2,.t_btn3{
position: relative;
z-index: 100;
cursor: pointer;
}
.table_zdy a{
color: #fff;
}
Write Preview
Loading…
Cancel
Save