From f5563e7d084ce5994d4c221cf0be0047d637371c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=AD=A5=E5=B1=A5=E4=B8=8D=E5=81=9C?= <1873501479@qq.com>
Date: Thu, 30 Jun 2022 10:27:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=A4=A7=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/utils.scss                         |  19 ++
 src/views/NewMainPage.vue                     | 177 +++++++++++++++++-
 .../NewMainPageComponents/LeftCenter.vue      |  86 +++++++++
 .../NewMainPageComponents/LeftMiddle.vue      |  18 --
 src/views/NewMainPageComponents/LowerLeft.vue |  11 +-
 .../NewMainPageComponents/RightBottom.vue     |  41 ++++
 .../NewMainPageComponents/RightMiddle.vue     |  50 ++---
 src/views/NewMainPageComponents/RightTop.vue  |   8 +-
 8 files changed, 362 insertions(+), 48 deletions(-)
 create mode 100644 src/styles/utils.scss
 create mode 100644 src/views/NewMainPageComponents/LeftCenter.vue
 delete mode 100644 src/views/NewMainPageComponents/LeftMiddle.vue
 create mode 100644 src/views/NewMainPageComponents/RightBottom.vue

diff --git a/src/styles/utils.scss b/src/styles/utils.scss
new file mode 100644
index 0000000..3e9750d
--- /dev/null
+++ b/src/styles/utils.scss
@@ -0,0 +1,19 @@
+//使用scss的math函数，https://sass-lang.com/documentation/breaking-changes/slash-div
+@use "sass:math";
+
+
+//默认设计稿的宽度
+$designWidth:1920;
+//默认设计稿的高度
+$designHeight:1080;
+
+
+//px转为vw的函数
+@function vw($px) {
+  @return math.div($px , $designWidth) * 100vw;
+}
+
+//px转为vh的函数
+@function vh($px) {
+  @return math.div($px , $designHeight) * 100vh;
+}
diff --git a/src/views/NewMainPage.vue b/src/views/NewMainPage.vue
index 5a0287d..18d396f 100644
--- a/src/views/NewMainPage.vue
+++ b/src/views/NewMainPage.vue
@@ -1,17 +1,188 @@
 <template>
-  <div>
-    111
-  </div>
+  <el-container class="container-box">
+    <!-- 头部 -->
+    <el-header id="new-mainpage-header">
+      <div style="height: 30px" />
+      <div style="display: inline-block;width: 1%" />
+      <div class="btn btn-one">
+        安检门
+      </div><div style="display: inline-block;width: 1%" />
+      <div class="btn btn-one">
+        x射线机
+      </div><div style="display: inline-block;width: 1%" />
+      <div class="btn btn-one">
+        炸探/液探
+      </div><div style="display: inline-block;width: 54%" />
+      <div class="btn btn-one">
+        设备管理
+      </div><div style="display: inline-block;width: 1%" />
+      <div class="btn btn-one">
+        系统设置
+      </div><div style="display: inline-block;width: 1%" />
+      <div class="btn btn-one">
+        后台
+      </div><div style="display: inline-block;width: 1%" />
+    </el-header>
+    <!--  内容  -->
+    <el-main>
+      <div class="left-box">
+        <div class="left-top">
+          1
+        </div>
+        <div class="left-center">
+          <LeftCenter />
+        </div>
+        <div class="left-bottom">
+          <LowerLeft />
+        </div>
+      </div>
+      <div class="center-box">
+        <div class="center-top">
+          1
+        </div>
+        <div class="center-center">
+          1
+        </div>
+        <div class="center-bottom">
+          1
+        </div>
+      </div>
+      <div class="right-box">
+        <div class="right-top">
+          <RightTop />
+        </div>
+        <div class="right-center">
+          <RightMiddle />
+        </div>
+        <div class="right-bottom">
+          <RightBottom />
+        </div>
+      </div>
+    </el-main>
+  </el-container>
 </template>
 <script>
+import RightMiddle from './NewMainPageComponents/RightMiddle'
+import LeftCenter from './NewMainPageComponents/LeftCenter'
+import LowerLeft from './NewMainPageComponents/LowerLeft'
+import RightTop from './NewMainPageComponents/RightTop'
+import RightBottom from './NewMainPageComponents/RightBottom'
 export default {
   name: 'NewMainPage',
+  components: { RightBottom, RightTop, LowerLeft, LeftCenter, RightMiddle },
   data() {
     return {
+
     }
   }
 }
 </script>
 <style scoped lang="less">
+* {
+  margin: 0;
+  padding: 0;
+}
+.container-box {
+  width: 100%;
+  height: 100%;
+}
+#new-mainpage-header {
+  width: 100%;
+  height: 90px!important;
+  background-image: url("../assets/images/header-bg.png");
+  background-repeat: no-repeat;
+  background-size:100% 100% ;
+  .btn {
+    display: inline-block;
+    color: rgb(0, 240, 255);
+    font-size: 18px;
+    text-align: center;
+    line-height: 34px;
+    // font-weight: bold;
+    width: 106px;
+    height: 34px;
+    background-image: url("../assets/images/header-btn.png");
+    background-repeat: no-repeat;
+    background-size:100% 100% ;
+  }
+}
+.el-main {
+  font-size: 0px;
+  vertical-align: top;
+  width: 100%;
+  height: cale(100%-90px);
+  background-image: url("../assets/images/main-bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  .left-box,
+  .center-box,
+  .right-box {
+    display: inline-block;
+  }
 
+  .left-box {
+    vertical-align: top;
+    width: 27%;
+    height: 98%;
+    background-image: url("../assets/images/left-box-bg.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    .left-top {
+      height: 33%;
+      border: 1px solid #000000;
+    }
+    .left-center {
+      height: 31%;
+      border: 1px solid #000000;
+    }
+    .left-bottom {
+      height: 35%;
+      border: 1px solid #000000;
+    }
+  }
+
+  .center-box {
+    vertical-align: top;
+    width: 46%;
+    height: 98%;
+    .center-top {
+      margin: 0 50px;
+      height: 50%;
+      border: 1px solid #000000;
+      background-image: url("../assets/images/center-box-bg.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+    .center-center,
+    .center-bottom {
+      height: 25%;
+      border: 1px solid #000000;
+    }
+  }
+
+  .right-box {
+    vertical-align: top;
+    width: 26%;
+    height: 98%;
+    background-image: url("../assets/images/right-box-bg.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+
+    .right-top{
+      height: 33%;
+      border: 1px solid #000000;
+    }
+
+    .right-center {
+      position: relative;
+      height: 37%;
+      border: 1px solid #000000;
+    }
+
+    .right-bottom {
+      height: 30%;
+      border: 1px solid #000000;
+    }
+  }
+}
 </style>
diff --git a/src/views/NewMainPageComponents/LeftCenter.vue b/src/views/NewMainPageComponents/LeftCenter.vue
new file mode 100644
index 0000000..b95a5f2
--- /dev/null
+++ b/src/views/NewMainPageComponents/LeftCenter.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="infinite-list-wrapper" style="overflow:auto;width:24%;height: 23%;position: absolute;left: 20px;top: 43%;">
+    <div class="table-wrapper">
+      <el-table
+        id="playList"
+        :data="tableData"
+        style="width: 100%;color: rgb(160, 165, 178);"
+        :show-header="true"
+        :row-class-name="tableRowClassName"
+      >
+        <el-table-column prop="index" label="序号" min-width="10px" />
+        <el-table-column prop="name" label="区域" min-width="20px" />
+        <el-table-column prop="address" label="日期" min-width="20px" />
+        <p v-if="loading">
+          加载中...
+        </p>
+        <p v-if="noMore">
+          没有更多了
+        </p>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LeftCenter',
+  data() {
+    return {
+      tableData: [{
+        date: '2',
+        name: '王小虎',
+        address: '上海'
+      }, {
+        date: '2',
+        name: '王小虎',
+        address: '上海'
+      }, {
+        date: '2',
+        name: '王小虎',
+        address: '上海'
+      }, {
+        date: '2',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }]
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.el-table,
+.el-table__expanded-cell{
+  background-color: transparent;
+}
+/* 表格内背景颜色 */
+.el-table th,
+.el-table tr,
+.el-table td {
+  background-color: transparent;
+}
+/*最外层透明*/
+/deep/ .el-table, /deep/ .el-table__expanded-cell{
+  background-color: transparent;
+}
+/* 表格内背景颜色 */
+/deep/ .el-table th,
+/deep/ .el-table tr,
+/deep/ .el-table td {
+  background-color: transparent;
+}
+/* 表格表头字体颜色 */
+.el-table thead {
+  color: #40b4fc!important;
+  font-weight: 500;
+}
+::-webkit-scrollbar {
+  width: 0px !important;
+  background-color: rgba(30, 144, 255, 0.26);
+}
+::-webkit-scrollbar {
+  width: 0px !important;height: 5px;
+}
+
+</style>
diff --git a/src/views/NewMainPageComponents/LeftMiddle.vue b/src/views/NewMainPageComponents/LeftMiddle.vue
deleted file mode 100644
index 0cc6ae7..0000000
--- a/src/views/NewMainPageComponents/LeftMiddle.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div>
-    左中
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'LeftMiddle',
-  data() {
-    return {}
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/NewMainPageComponents/LowerLeft.vue b/src/views/NewMainPageComponents/LowerLeft.vue
index faa97be..6ba9bd0 100644
--- a/src/views/NewMainPageComponents/LowerLeft.vue
+++ b/src/views/NewMainPageComponents/LowerLeft.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <!--左下-->
-    <div id="lowerLeft" class="lowerLeft_echarts" style="width: 25%;height: 300px" />
+    <div id="lowerLeft" class="lowerLeft_echarts" style="overflow:auto;width:24%;height: 30%;position: absolute;left: 10px;top: 68%" />
   </div>
 </template>
 
@@ -34,27 +34,36 @@ export default {
         },
         legend: {},
         grid: {
+          top: '12%',
           left: '3%',
           right: '4%',
           bottom: '3%',
           containLabel: true
         },
         xAxis: {
+          // show: false,
+          splitLine: {
+            show: false // 不显示网格线
+          },
           type: 'value',
           boundaryGap: [0, 0.01]
+
         },
         yAxis: {
+          // show: false,
           type: 'category',
           data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10']
         },
         series: [
           {
             name: '当前通过人数',
+            color: '#55a0a1',
             type: 'bar',
             data: [18203, 23489, 29034, 104970, 131744, 630230, 29034, 104970, 131744, 630230]
           },
           {
             name: '当前报警人数',
+            color: '#cfc844',
             type: 'bar',
             data: [19325, 23438, 31000, 121594, 134141, 681807, 31000, 121594, 134141, 681807]
           }
diff --git a/src/views/NewMainPageComponents/RightBottom.vue b/src/views/NewMainPageComponents/RightBottom.vue
new file mode 100644
index 0000000..a85c4b2
--- /dev/null
+++ b/src/views/NewMainPageComponents/RightBottom.vue
@@ -0,0 +1,41 @@
+<template>
+  <div style="display: flex;justify-content: space-between;width:100%;height: 100%;border: 1px solid #ffffff;">
+    <div style="width: 50%;height: 100%;border: 1px solid #ffffff;">
+      <div style="height: 35px;border: 1px solid #ffffff;" />
+      <div class="infinite-list-wrapper" style="overflow:auto;width:100%;height: 60%;">
+        <div class="table-wrapper">
+          <el-table
+            id="playList"
+            :data="tableData"
+            style="width: 100%;color: rgb(160, 165, 178);"
+            :show-header="true"
+            :row-class-name="tableRowClassName"
+          >
+            <el-table-column prop="index" label="序号" min-width="10px" />
+            <el-table-column prop="name" label="区域" min-width="20px" />
+            <el-table-column prop="address" label="日期" min-width="20px" />
+            <p v-if="loading">
+              加载中...
+            </p>
+            <p v-if="noMore">
+              没有更多了
+            </p>
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <div style="width: 50%;height: 100%;border: 1px solid #ffffff;">
+      <div style="height: 35px;border: 1px solid #ffffff;" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RightBottom'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/NewMainPageComponents/RightMiddle.vue b/src/views/NewMainPageComponents/RightMiddle.vue
index 1e652a8..3bab75f 100644
--- a/src/views/NewMainPageComponents/RightMiddle.vue
+++ b/src/views/NewMainPageComponents/RightMiddle.vue
@@ -1,19 +1,15 @@
 <template>
   <!--右中-->
-  <div
-    style="display: flex;
-			justify-content: space-between;width: 25%;background: #073055;"
-  >
-    <div style="width: 50%;height: 300px">
-      <div id="rightMiddle1" class="rightMiddle_echarts" style="width: 100%;height: 26vh" />
-      <el-button
-        round
-        size="mini"
-        style="background-color: #0a106b;color: #eeeeee;margin-left:62px"
+  <div style="display: flex;justify-content: space-between;width:100%;height: 100%;border: 1px solid #ffffff;">
+    <div style="width: 50%;height: 100%">
+      <div id="rightMiddle1" class="rightMiddle_echarts" style="width: 100%;height: 70%;" />
+      <div
+        class="right-center-btn"
+        style="border: 0;color: #eeeeee;font-size: 16px;text-align: center;line-height: 30px;margin-left:72px;width: 95px;height: 30px"
       >
         报警率
-      </el-button>
-      <div style="display: flex;font-size: 8px;background-color: #0c1426;margin:6px 0 0 35px;width: 130px">
+      </div>
+      <div style="display: flex;font-size: 8px;background-color: #0c1426;margin:6px 0 0 60px;width: 130px">
         <div style="color:#c0ae14;border: 1px solid #083770;width: 60px;text-align: center">
           <span>本周期</span><br>
           <span style="font-size: 15px">56%</span>
@@ -24,16 +20,15 @@
         </div>
       </div>
     </div>
-    <div style="width: 50%">
-      <div id="rightMiddle2" class="rightMiddle_echarts" style="width: 100%;height: 26vh" />
-      <el-button
-        round
-        size="mini"
-        style="background-color: #0a106b;color: #eeeeee;margin-left: 62px"
+    <div style="width: 50%;height: 100%">
+      <div id="rightMiddle2" class="rightMiddle_echarts" style="width: 100%;height:70%" />
+      <div
+        class="right-center-btn"
+        style="border: 0;color: #eeeeee;font-size: 16px;text-align: center;line-height: 30px;margin-left:72px;width: 95px;height: 30px"
       >
         离线率
-      </el-button>
-      <div style="display: flex;font-size: 8px;background-color: #0c1426;margin:6px 0 0 35px;width: 130px">
+      </div>
+      <div style="display: flex;font-size: 8px;background-color: #0c1426;margin:6px 0 0 60px;width: 130px">
         <div style="color:#c0ae14;border: 1px solid #083770;width: 60px;text-align: center">
           <span>本周期</span><br>
           <span style="font-size: 15px">56%</span>
@@ -100,10 +95,10 @@ export default {
             },
             anchor: {
               show: true,
-              icon: 'path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z',
+              icon: 'image://http://ldjy.asc.jx.cn/f9f9f665-43c9-4628-b06a-f8c4fc1872d0.png',
               showAbove: false,
               offsetCenter: [0, '-35%'],
-              size: 70,
+              size: 25,
               keepAspect: true,
               itemStyle: {
                 color: '#707177'
@@ -202,10 +197,10 @@ export default {
             },
             anchor: {
               show: true,
-              icon: 'path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z',
+              icon: 'image://http://ldjy.asc.jx.cn/efedef9e-197a-4220-b99e-23b21caa8cfc.png',
               showAbove: false,
               offsetCenter: [0, '-35%'],
-              size: 70,
+              size: 25,
               keepAspect: true,
               itemStyle: {
                 color: '#707177'
@@ -262,7 +257,7 @@ export default {
 .rightMiddle_echarts {
   width: 9.625rem;
   height: 6.325rem;
-  background: #073055;
+  // background: #073055;
   box-sizing: border-box;
   padding: 0.5rem 0.425rem 0.4rem 0.425rem;
   display: inline-block;
@@ -271,4 +266,9 @@ export default {
     height: 100%;
   }
 }
+.right-center-btn {
+  background-image: url("../../assets/images/right-center-btn.png");
+  background-repeat: no-repeat;
+  background-size:100% 100% ;
+}
 </style>
diff --git a/src/views/NewMainPageComponents/RightTop.vue b/src/views/NewMainPageComponents/RightTop.vue
index 57d56e3..17aee09 100644
--- a/src/views/NewMainPageComponents/RightTop.vue
+++ b/src/views/NewMainPageComponents/RightTop.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <!--右上-->
-    <div id="rightTop" class="rightTop_echarts" style="width: 25%;height: 300px" />
+    <div id="rightTop" class="rightTop_echarts" style="width:26%;height: 28%;position: absolute;right: 20px;top:14%;" />
   </div>
 </template>
 
@@ -52,6 +52,9 @@ export default {
         ],
         yAxis: [
           {
+            splitLine: {
+              show: false // 不显示网格线
+            },
             type: 'value',
             name: '数据统计',
             axisLabel: {
@@ -70,6 +73,7 @@ export default {
         series: [
           {
             name: '通行人次',
+            color: '#1ec3ea',
             type: 'bar',
             tooltip: {
               valueFormatter: function(value) {
@@ -82,6 +86,7 @@ export default {
           },
           {
             name: '报警人次',
+            color: '#ff9d1f',
             type: 'bar',
             tooltip: {
               valueFormatter: function(value) {
@@ -94,6 +99,7 @@ export default {
           },
           {
             name: '报警率',
+            color: '#43ebfa',
             type: 'line',
             yAxisIndex: 1,
             tooltip: {
-- 
Gitee