diff --git a/src/pages/screen/list/index.vue b/src/pages/screen/list/index.vue
index 63230e7..68799e5 100644
--- a/src/pages/screen/list/index.vue
+++ b/src/pages/screen/list/index.vue
@@ -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()
           }
         })
       },
diff --git a/src/styles/page/screen.scss b/src/styles/page/screen.scss
index 667837e..5397e9f 100644
--- a/src/styles/page/screen.scss
+++ b/src/styles/page/screen.scss
@@ -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;
-}
\ No newline at end of file