From c69a48cc05f1ebe0cab5903c2f3824a50e2a0d11 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Sat, 18 Sep 2021 19:36:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E9=A1=B9=E7=9B=AE?=
 =?UTF-8?q?=E9=80=82=E9=85=8D=E6=96=B9=E6=A1=88=EF=BC=8C=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?scale=E7=BC=A9=E6=94=BE=E8=BF=9B=E8=A1=8C=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  12 +-
 src/assets/scss/_variables.scss               |  15 +-
 src/assets/scss/index.scss                    |  94 +++++++---
 src/assets/scss/style.scss                    |   2 +-
 src/common/echart/index.vue                   |   2 -
 src/common/flexible.js                        | 147 ---------------
 .../echart/bottom/bottomLeftChart/chart.vue   |   2 +-
 .../echart/bottom/bottomRightChart/chart.vue  |   2 +-
 .../echart/center/centerChartRate/index.vue   |   4 +-
 .../centerLeft/centerLeft1Chart/chart.vue     |   6 +-
 .../centerLeft/centerLeft1Chart/index.vue     |  14 +-
 .../centerLeft/centerLeft2Chart/chart.vue     |  98 +++++-----
 .../centerRight/centerRightChart/chart.vue    |   5 +-
 .../centerRight/centerRightChart/index.vue    |   9 +-
 src/main.js                                   |  19 +-
 src/utils/drawMixin.js                        |  58 ++++++
 src/utils/{resizeMixins.js => resizeMixin.js} |   0
 src/views/bottomLeft.vue                      |  41 ++--
 src/views/bottomRight.vue                     |  38 ++--
 src/views/center.vue                          | 176 +++++++++++-------
 src/views/centerLeft1.vue                     | 115 +++++++-----
 src/views/centerLeft2.vue                     |  41 ++--
 src/views/centerRight1.vue                    |  65 ++++---
 src/views/centerRight2.vue                    |  56 +++---
 src/views/index.vue                           |  94 +++++-----
 25 files changed, 572 insertions(+), 543 deletions(-)
 delete mode 100644 src/common/flexible.js
 create mode 100644 src/utils/drawMixin.js
 rename src/utils/{resizeMixins.js => resizeMixin.js} (100%)

diff --git a/src/App.vue b/src/App.vue
index 1c8a32f..5b680b1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,13 +4,11 @@
   </div>
 </template>
 
-<style lang="scss">
-body {
-  margin: 0;
-}
+<style lang="scss" scoped>
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  width: 100vw;
+  height: 100vh;
+  background-color: #020308;
+  overflow: hidden;
 }
 </style>
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index a95b2e2..80edb92 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -1,6 +1,6 @@
 // 颜色
 $colors: (
-  "primary": #db9e3f,
+  "primary": #1A5CD7,
   "info-1": #4394e4,
   "info": #4b67af,
   "white": #ffffff,
@@ -11,6 +11,7 @@ $colors: (
   "dark": #222222,
   "black-1": #171823,
   "black": #000000,
+  "icon": #5cd9e8
 );
 
 // 字体大小
@@ -86,12 +87,12 @@ $spacing-directions: (
   b: bottom,
   l: left,
 );
-$spacing-base-size: 0.2rem;
+$spacing-base-size: 0.5rem;
 $spacing-sizes: (
   0: 0,
-  1: 0.25,
-  2: 0.5,
-  3: 1,
-  4: 1.5,
-  5: 3,
+  1: 0.5,
+  2: 1,
+  3: 1.5,
+  4: 2,
+  5: 2.5,
 );
diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss
index 8e4a33b..e2c7683 100644
--- a/src/assets/scss/index.scss
+++ b/src/assets/scss/index.scss
@@ -1,56 +1,88 @@
 #index {
   color: #d3d6dd;
-  background-color: #000000;
-  width: 100%;
-  height: 100%;
-
+  width: 1920px;
+  height: 1080px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: left top;
+  overflow: hidden;
+  
   .bg {
-    padding: 0.2rem 0.2rem 0 0.2rem;
+    width: 100%;
+    height: 100%;
+    padding: 16px 16px 0 16px;
     background-image: url("../assets/pageBg.png");
     background-size: cover;
     background-position: center center;
   }
 
   .host-body {
+    .dv-dec-10,
+    .dv-dec-10-s {
+      width: 33.3%;
+      height: 5px;
+    }
+    .dv-dec-10-s {
+      transform: rotateY(180deg);
+    }
+    .dv-dec-8 {
+      width: 200px;
+      height: 50px;
+    }
     .title {
       position: relative;
-      width: 6.25rem;
+      width: 500px;
       text-align: center;
       background-size: cover;
       background-repeat: no-repeat;
 
       .title-text {
-        font-size: 0.3rem;
+        font-size: 24px;
         position: absolute;
         bottom: 0;
         left: 50%;
         transform: translate(-50%);
       }
 
-      .title-bototm {
+      .dv-dec-6 {
         position: absolute;
-        bottom: -0.375rem;
+        bottom: -30px;
         left: 50%;
+        width: 250px;
+        height: 8px;
         transform: translate(-50%);
       }
     }
 
+    // 第二行
+    .aside-width {
+      width: 40%;
+    }
+    .react-r-s,
+    .react-l-s {
+      background-color: #0f1325;
+    }
+
     // 平行四边形
-    .react-left {
-      cursor: pointer;
-      font-size: 0.225rem;
-      width: 3.75rem;
-      height: 0.625rem;
-      line-height: 0.625rem;
+    .react-right {
+      &.react-l-s {
+        text-align: right;
+        width: 500px;
+      }
+      font-size: 18px;
+      width: 300px;
+      line-height: 50px;
       text-align: center;
       transform: skewX(-45deg);
 
       .react-after {
         position: absolute;
-        right: -0.3125rem;
+        right: -25px;
         top: 0;
-        height: 0.625rem;
-        width: 0.625rem;
+        height: 50px;
+        width: 50px;
         background-color: #0f1325;
         transform: skewX(45deg);
       }
@@ -61,21 +93,25 @@
       }
     }
 
-    .react-right {
-      cursor: pointer;
-      font-size: 0.225rem;
-      width: 3.75rem;
-      height: 0.625rem;
-      line-height: 0.625rem;
+    .react-left {
+      &.react-l-s {
+        width: 500px;
+        text-align: left;
+      }
+      font-size: 18px;
+      width: 300px;
+      height: 50px;
+      line-height: 50px;
       text-align: center;
       transform: skewX(45deg);
+      background-color: #0f1325;
 
       .react-before {
         position: absolute;
-        left: -0.3125rem;
+        left: -25px;
         top: 0;
-        height: 0.625rem;
-        width: 0.625rem;
+        height: 50px;
+        width: 50px;
         background-color: #0f1325;
         transform: skewX(-45deg);
       }
@@ -87,7 +123,7 @@
     }
 
     .body-box {
-      margin-top: 0.2rem;
+      margin-top: 16px;
       display: flex;
       flex-direction: column;
 
@@ -99,7 +135,7 @@
 
       // 底部数据
       .bototm-box {
-        margin-top: 0.125rem;
+        margin-top: 10px;
         display: grid;
         grid-template-columns: repeat(2, 50%);
       }
diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index e4c3a05..17b9778 100644
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -5,8 +5,8 @@
   margin: 0;
   padding: 0;
   list-style-type: none;
-  box-sizing: border-box;
   outline: none;
+  box-sizing: border-box;
 }
 
 html {
diff --git a/src/common/echart/index.vue b/src/common/echart/index.vue
index bce9d47..7db3a64 100644
--- a/src/common/echart/index.vue
+++ b/src/common/echart/index.vue
@@ -4,12 +4,10 @@
 
 <script>
 import tdTheme from './theme.json' // 引入默认主题
-import resizeMixins from "@/utils/resizeMixins";
 import '../map/fujian.js'
 
 export default {
   name: 'echart',
-  mixins: [resizeMixins],
   props: {
     className: {
       type: String,
diff --git a/src/common/flexible.js b/src/common/flexible.js
deleted file mode 100644
index 2ad23f3..0000000
--- a/src/common/flexible.js
+++ /dev/null
@@ -1,147 +0,0 @@
-(function(win, lib) {
-  var doc = win.document;
-  var docEl = doc.documentElement;
-  var metaEl = doc.querySelector('meta[name="viewport"]');
-  var flexibleEl = doc.querySelector('meta[name="flexible"]');
-  var dpr = 0;
-  var scale = 0;
-  var tid;
-  var flexible = lib.flexible || (lib.flexible = {});
-
-  if (metaEl) {
-    console.warn("将根据已有的meta标签来设置缩放比例");
-    var match = metaEl
-      .getAttribute("content")
-      // eslint-disable-next-line no-useless-escape
-      .match(/initial\-scale=([\d\.]+)/);
-    if (match) {
-      scale = parseFloat(match[1]);
-      dpr = parseInt(1 / scale);
-    }
-  } else if (flexibleEl) {
-    var content = flexibleEl.getAttribute("content");
-    if (content) {
-      // eslint-disable-next-line no-useless-escape
-      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
-      // eslint-disable-next-line no-useless-escape
-      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
-      if (initialDpr) {
-        dpr = parseFloat(initialDpr[1]);
-        scale = parseFloat((1 / dpr).toFixed(2));
-      }
-      if (maximumDpr) {
-        dpr = parseFloat(maximumDpr[1]);
-        scale = parseFloat((1 / dpr).toFixed(2));
-      }
-    }
-  }
-
-  if (!dpr && !scale) {
-    // eslint-disable-next-line no-unused-vars
-    var isAndroid = win.navigator.appVersion.match(/android/gi);
-    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
-    var devicePixelRatio = win.devicePixelRatio;
-    if (isIPhone) {
-      // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
-      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
-        dpr = 3;
-      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
-        dpr = 2;
-      } else {
-        dpr = 1;
-      }
-    } else {
-      // 其他设备下，仍旧使用1倍的方案
-      dpr = 1;
-    }
-    scale = 1 / dpr;
-  }
-
-  docEl.setAttribute("data-dpr", dpr);
-  if (!metaEl) {
-    metaEl = doc.createElement("meta");
-    metaEl.setAttribute("name", "viewport");
-    metaEl.setAttribute(
-      "content",
-      "initial-scale=" +
-        scale +
-        ", maximum-scale=" +
-        scale +
-        ", minimum-scale=" +
-        scale +
-        ", user-scalable=no"
-    );
-    if (docEl.firstElementChild) {
-      docEl.firstElementChild.appendChild(metaEl);
-    } else {
-      var wrap = doc.createElement("div");
-      wrap.appendChild(metaEl);
-      doc.write(wrap.innerHTML);
-    }
-  }
-
-  function refreshRem() {
-    var width = docEl.getBoundingClientRect().width;
-    // 最小1366px，最大适配2560px
-    if (width / dpr < 1366) {
-      width = 1366 * dpr;
-    } else if (width / dpr > 2560) {
-      width = 2560 * dpr;
-    }
-    // 设置成24等份，设计稿时1920px的，这样1rem就是80px
-    var rem = width / 24;
-    docEl.style.fontSize = rem + "px";
-    flexible.rem = win.rem = rem;
-  }
-
-  win.addEventListener(
-    "resize",
-    function() {
-      clearTimeout(tid);
-      tid = setTimeout(refreshRem, 300);
-    },
-    false
-  );
-  win.addEventListener(
-    "pageshow",
-    function(e) {
-      if (e.persisted) {
-        clearTimeout(tid);
-        tid = setTimeout(refreshRem, 300);
-      }
-    },
-    false
-  );
-
-  if (doc.readyState === "complete") {
-    doc.body.style.fontSize = 12 * dpr + "px";
-  } else {
-    doc.addEventListener(
-      "DOMContentLoaded",
-      // eslint-disable-next-line no-unused-vars
-      function(e) {
-        doc.body.style.fontSize = 12 * dpr + "px";
-      },
-      false
-    );
-  }
-
-  refreshRem();
-
-  flexible.dpr = win.dpr = dpr;
-  flexible.refreshRem = refreshRem;
-  flexible.rem2px = function(d) {
-    var val = parseFloat(d) * this.rem;
-    if (typeof d === "string" && d.match(/rem$/)) {
-      val += "px";
-    }
-    return val;
-  };
-  flexible.px2rem = function(d) {
-    var val = parseFloat(d) / this.rem;
-    if (typeof d === "string" && d.match(/px$/)) {
-      val += "rem";
-    }
-    return val;
-  };
-})(window, window["lib"] || (window["lib"] = {}));
diff --git a/src/components/echart/bottom/bottomLeftChart/chart.vue b/src/components/echart/bottom/bottomLeftChart/chart.vue
index 4ebc9fc..70e6cec 100644
--- a/src/components/echart/bottom/bottomLeftChart/chart.vue
+++ b/src/components/echart/bottom/bottomLeftChart/chart.vue
@@ -4,7 +4,7 @@
     <Echart
       :options="options"
       id="bottomLeftChart"
-      height="6.25rem"
+      height="480px"
       width="100%"
     ></Echart>
   </div>
diff --git a/src/components/echart/bottom/bottomRightChart/chart.vue b/src/components/echart/bottom/bottomRightChart/chart.vue
index f67bd80..32ef723 100644
--- a/src/components/echart/bottom/bottomRightChart/chart.vue
+++ b/src/components/echart/bottom/bottomRightChart/chart.vue
@@ -3,7 +3,7 @@
     <Echart
       :options="options"
       id="centreLeft1Chart"
-      height="6rem"
+      height="480px"
       width="100%"
     ></Echart>
   </div>
diff --git a/src/components/echart/center/centerChartRate/index.vue b/src/components/echart/center/centerChartRate/index.vue
index fe811f7..ddc1210 100644
--- a/src/components/echart/center/centerChartRate/index.vue
+++ b/src/components/echart/center/centerChartRate/index.vue
@@ -4,8 +4,8 @@
     <Echart
       :options="options"
       :id="id"
-      height="1.25rem"
-      width="1.5rem"
+      height="100px"
+      width="100px"
     ></Echart>
   </div>
 </template>
diff --git a/src/components/echart/centerLeft/centerLeft1Chart/chart.vue b/src/components/echart/centerLeft/centerLeft1Chart/chart.vue
index a8e20c7..d600744 100644
--- a/src/components/echart/centerLeft/centerLeft1Chart/chart.vue
+++ b/src/components/echart/centerLeft/centerLeft1Chart/chart.vue
@@ -3,8 +3,8 @@
     <Echart
       :options="options"
       id="centreLeft1Chart"
-      height="2.75rem"
-      width="3.25rem"
+      height="220px"
+      width="260px"
     ></Echart>
   </div>
 </template>
@@ -62,7 +62,7 @@ export default {
             {
               name: "通过率统计",
               type: "pie",
-              radius: [10, 60],
+              radius: [10, 50],
               roseType: "area",
               center: ["50%", "40%"],
               data: newData.seriesData
diff --git a/src/components/echart/centerLeft/centerLeft1Chart/index.vue b/src/components/echart/centerLeft/centerLeft1Chart/index.vue
index 3763944..583b417 100644
--- a/src/components/echart/centerLeft/centerLeft1Chart/index.vue
+++ b/src/components/echart/centerLeft/centerLeft1Chart/index.vue
@@ -10,14 +10,14 @@ export default {
   data () {
     return {
       cdata: {
-        xData: ["rose1", "rose2", "rose3", "rose4", "rose5", "rose6"],
+        xData: ["data1", "data2", "data3", "data4", "data5", "data6"],
         seriesData: [
-          { value: 10, name: "rose1" },
-          { value: 5, name: "rose2" },
-          { value: 15, name: "rose3" },
-          { value: 25, name: "rose4" },
-          { value: 20, name: "rose5" },
-          { value: 35, name: "rose6" }
+          { value: 10, name: "data1" },
+          { value: 5, name: "data2" },
+          { value: 15, name: "data3" },
+          { value: 25, name: "data4" },
+          { value: 20, name: "data5" },
+          { value: 35, name: "data6" }
         ]
       }
     }
diff --git a/src/components/echart/centerLeft/centerLeft2Chart/chart.vue b/src/components/echart/centerLeft/centerLeft2Chart/chart.vue
index 142df4a..2ce64e6 100644
--- a/src/components/echart/centerLeft/centerLeft2Chart/chart.vue
+++ b/src/components/echart/centerLeft/centerLeft2Chart/chart.vue
@@ -4,8 +4,8 @@
       id="centreLeft2Chart"
       ref="centreLeft2ChartRef"
       :options="options"
-      height="4.5rem"
-      width="4.125rem"
+      height="360px"
+      width="330px"
     ></Echart>
   </div>
 </template>
@@ -224,57 +224,65 @@ export default {
     reSelectMapRandomArea() {
       const length = 9;
       this.$nextTick(() => {
-        const map = this.$refs.centreLeft2ChartRef.chart;
-        let index = Math.floor(Math.random() * length);
-        while (index === this.preSelectMapIndex || index >= length) {
-          index = Math.floor(Math.random() * length);
-        }
-        map.dispatchAction({
-          type: 'mapUnSelect',
-          seriesIndex: 0,
-          dataIndex: this.preSelectMapIndex,
-        });
-        map.dispatchAction({
-          type: 'showTip',
-          seriesIndex: 0,
-          dataIndex: index,
-        });
-        map.dispatchAction({
-          type: 'mapSelect',
-          seriesIndex: 0,
-          dataIndex: index,
-        });
-        this.preSelectMapIndex = index;
-      });
-    },
-    handleMapRandomSelect() {
-      this.$nextTick(() => {
-        const map = this.$refs.centreLeft2ChartRef.chart;
-        const _self = this;
-        setTimeout(() => {
-          _self.reSelectMapRandomArea();
-        }, 0);
-        // 移入区域，清除定时器、取消之前选中并选中当前
-        map.on('mouseover', function (params) {
-          clearInterval(_self.intervalId);
+        try {
+          const map = this.$refs.centreLeft2ChartRef.chart;
+          let index = Math.floor(Math.random() * length);
+          while (index === this.preSelectMapIndex || index >= length) {
+            index = Math.floor(Math.random() * length);
+          }
           map.dispatchAction({
             type: 'mapUnSelect',
             seriesIndex: 0,
-            dataIndex: _self.preSelectMapIndex,
+            dataIndex: this.preSelectMapIndex,
+          });
+          map.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: index,
           });
           map.dispatchAction({
             type: 'mapSelect',
             seriesIndex: 0,
-            dataIndex: params.dataIndex,
+            dataIndex: index,
           });
-          _self.preSelectMapIndex = params.dataIndex;
-        });
-        // 移出区域重新随机选中地图区域，并开启定时器
-        map.on('globalout', function () {
-          _self.reSelectMapRandomArea();
-          _self.startInterval();
-        });
-        this.startInterval();
+          this.preSelectMapIndex = index;
+        } catch (error) {
+          console.log(error)
+        }
+      });
+    },
+    handleMapRandomSelect() {
+      this.$nextTick(() => {
+        try {
+          const map = this.$refs.centreLeft2ChartRef.chart;
+          const _self = this;
+          setTimeout(() => {
+            _self.reSelectMapRandomArea();
+          }, 0);
+          // 移入区域，清除定时器、取消之前选中并选中当前
+          map.on('mouseover', function (params) {
+            clearInterval(_self.intervalId);
+            map.dispatchAction({
+              type: 'mapUnSelect',
+              seriesIndex: 0,
+              dataIndex: _self.preSelectMapIndex,
+            });
+            map.dispatchAction({
+              type: 'mapSelect',
+              seriesIndex: 0,
+              dataIndex: params.dataIndex,
+            });
+            _self.preSelectMapIndex = params.dataIndex;
+          });
+          // 移出区域重新随机选中地图区域，并开启定时器
+          map.on('globalout', function () {
+            _self.reSelectMapRandomArea();
+            _self.startInterval();
+          });
+          this.startInterval();
+        } catch (error) {
+          console.log(error)
+        }
       });
     },
   },
diff --git a/src/components/echart/centerRight/centerRightChart/chart.vue b/src/components/echart/centerRight/centerRightChart/chart.vue
index 532630d..0bd0afa 100644
--- a/src/components/echart/centerRight/centerRightChart/chart.vue
+++ b/src/components/echart/centerRight/centerRightChart/chart.vue
@@ -3,8 +3,8 @@
     <Echart
       :options="options"
       id="centreRight2Chart1"
-      height="2.60rem"
-      width="100%"
+      height="200px"
+      width="260px"
     ></Echart>
   </div>
 </template>
@@ -42,6 +42,7 @@ export default {
             indicator: newData.indicatorData,
             shape: "circle",
             splitNumber: 5,
+            radius: ["0%", "65%"],
             name: {
               textStyle: {
                 color: "rgb(238, 197, 102)"
diff --git a/src/components/echart/centerRight/centerRightChart/index.vue b/src/components/echart/centerRight/centerRightChart/index.vue
index cdab9a7..64a40a9 100644
--- a/src/components/echart/centerRight/centerRightChart/index.vue
+++ b/src/components/echart/centerRight/centerRightChart/index.vue
@@ -50,13 +50,6 @@ export default {
   },
   components: {
     Chart,
-  },
-  mounted () {
-  },
-  methods: {
   }
 }
-</script>
-
-<style lang="scss" scoped>
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index d119222..1cfdc05 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,8 +3,8 @@ import App from './App.vue';
 import router from './router';
 import store from './store';
 import dataV from '@jiaminghi/data-view';
-Vue.use(dataV);
-
+// 引入全局css
+import './assets/scss/style.scss';
 // 按需引入vue-awesome图标
 import Icon from 'vue-awesome/components/Icon';
 import 'vue-awesome/icons/chart-bar.js';
@@ -13,16 +13,6 @@ import 'vue-awesome/icons/chart-pie.js';
 import 'vue-awesome/icons/chart-line.js';
 import 'vue-awesome/icons/align-left.js';
 
-// 全局注册图标
-Vue.component('icon', Icon);
-
-// 适配flex
-import '@/common/flexible.js';
-
-// 引入全局css
-import './assets/scss/style.scss';
-
-
 //引入echart
 //4.x 引用方式
 import echarts from 'echarts'
@@ -30,9 +20,12 @@ import echarts from 'echarts'
 //希望使用5.x版本的话,需要在package.json中更新版本号,并切换引用方式
 //import * as echarts from 'echarts'
 Vue.prototype.$echarts = echarts
-
 Vue.config.productionTip = false;
 
+// 全局注册
+Vue.component('icon', Icon);
+Vue.use(dataV);
+
 new Vue({
   router,
   store,
diff --git a/src/utils/drawMixin.js b/src/utils/drawMixin.js
new file mode 100644
index 0000000..f5aee1d
--- /dev/null
+++ b/src/utils/drawMixin.js
@@ -0,0 +1,58 @@
+// 屏幕适配 mixin 函数
+
+// * 默认缩放值
+const scale = {
+  width: '1',
+  height: '1',
+}
+
+// * 设计稿尺寸（px）
+const baseWidth = 1920
+const baseHeight = 1080
+
+// * 需保持的比例（默认1.77778）
+const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
+
+export default {
+  data() {
+    return {
+      // * 定时函数
+      drawTiming: null
+    }
+  },
+  mounted () {
+    this.calcRate()
+    window.addEventListener('resize', this.resize)
+  },
+  unMounted () {
+    window.removeEventListener('resize', this.resize)
+  },
+  methods: {
+    calcRate () {
+      const appRef = this.$refs["appRef"]
+      console.log(appRef)
+      if (!appRef) return 
+      // 当前宽高比
+      const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
+      if (appRef) {
+        if (currentRate > baseProportion) {
+          // 表示更宽
+          scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
+          scale.height = (window.innerHeight / baseHeight).toFixed(5)
+          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+        } else {
+          // 表示更高
+          scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
+          scale.width = (window.innerWidth / baseWidth).toFixed(5)
+          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+        }
+      }
+    },
+    resize () {
+      clearTimeout(this.drawTiming)
+      this.drawTiming = setTimeout(() => {
+        this.calcRate()
+      }, 200)
+    }
+  },
+}
\ No newline at end of file
diff --git a/src/utils/resizeMixins.js b/src/utils/resizeMixin.js
similarity index 100%
rename from src/utils/resizeMixins.js
rename to src/utils/resizeMixin.js
diff --git a/src/views/bottomLeft.vue b/src/views/bottomLeft.vue
index b3ae1c0..3a17b3d 100644
--- a/src/views/bottomLeft.vue
+++ b/src/views/bottomLeft.vue
@@ -2,8 +2,8 @@
   <div id="bottomLeft">
     <div class="bg-color-black">
       <div class="d-flex pt-2 pl-2">
-        <span style="color:#5cd9e8">
-          <icon name="chart-bar"></icon>
+        <span>
+          <icon name="chart-bar" class="text-icon"></icon>
         </span>
         <div class="d-flex">
           <span class="fs-xl text mx-2">数据统计图</span>
@@ -17,39 +17,36 @@
 </template>
 
 <script>
-import BottomLeftChart from "@/components/echart/bottom/bottomLeftChart";
+import BottomLeftChart from '@/components/echart/bottom/bottomLeftChart'
 export default {
-  data() {
-    return {};
-  },
   components: {
     BottomLeftChart
-  },
-  mounted() {},
-  methods: {}
-};
+  }
+}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+$box-height: 520px;
+$box-width: 100%;
 #bottomLeft {
-  padding: 0.3rem 0.2rem;
-  height: 6.5rem;
-  min-width: 3.75rem;
-  border-radius: 0.0625rem;
+  padding: 20px 16px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
   .bg-color-black {
-    height: 6.0625rem;
-    border-radius: 0.125rem;
+    height: $box-height - 35px;
+    border-radius: 10px;
   }
   .text {
     color: #c3cbde;
   }
   .chart-box {
-    margin-top: 0.2rem;
-    width: 2.125rem;
-    height: 2.125rem;
+    margin-top: 16px;
+    width: 170px;
+    height: 170px;
     .active-ring-name {
-      padding-top: 0.125rem;
+      padding-top: 10px;
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/bottomRight.vue b/src/views/bottomRight.vue
index e38316a..ed7792a 100644
--- a/src/views/bottomRight.vue
+++ b/src/views/bottomRight.vue
@@ -2,8 +2,8 @@
   <div id="bottomRight">
     <div class="bg-color-black">
       <div class="d-flex pt-2 pl-2">
-        <span style="color:#5cd9e8">
-          <icon name="chart-area"></icon>
+        <span>
+          <icon name="chart-area" class="text-icon"></icon>
         </span>
         <div class="d-flex">
           <span class="fs-xl text mx-2">工单修复以及满意度统计图</span>
@@ -22,40 +22,38 @@
 <script>
 import BottomRightChart from "@/components/echart/bottom/bottomRightChart";
 export default {
-  data() {
-    return {};
-  },
   components: {
     BottomRightChart
-  },
-  mounted() {},
-  methods: {}
+  }
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" class>
+$box-height: 520px;
+$box-width: 100%;
 #bottomRight {
-  padding: 0.2rem 0.2rem 0;
-  height: 6.5rem;
-  min-width: 3.75rem;
-  border-radius: 0.0625rem;
+  padding: 14px 16px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
   .bg-color-black {
-    height: 6.1875rem;
-    border-radius: 0.125rem;
+    height: $box-height - 30px;
+    border-radius: 10px;
   }
   .text {
     color: #c3cbde;
-  } //下滑线动态
+  }
+  //下滑线动态
   .decoration2 {
     position: absolute;
     right: 0.125rem;
   }
   .chart-box {
-    margin-top: 0.2rem;
-    width: 2.125rem;
-    height: 2.125rem;
+    margin-top: 16px;
+    width: 170px;
+    height: 170px;
     .active-ring-name {
-      padding-top: 0.125rem;
+      padding-top: 10px;
     }
   }
 }
diff --git a/src/views/center.vue b/src/views/center.vue
index 7f4578c..d4b6d9e 100644
--- a/src/views/center.vue
+++ b/src/views/center.vue
@@ -1,32 +1,47 @@
 <template>
   <div id="center">
     <div class="up">
-      <div class="bg-color-black item" v-for="item in titleItem" :key="item.title">
-        <p class="ml-3 colorBlue fw-b">{{item.title}}</p>
+      <div
+        class="bg-color-black item"
+        v-for="item in titleItem"
+        :key="item.title"
+      >
+        <p class="ml-3 colorBlue fw-b fs-xl">{{ item.title }}</p>
         <div>
-          <dv-digital-flop :config="item.number" style="width:1.25rem;height:.625rem;" />
+          <dv-digital-flop
+            class="dv-dig-flop ml-1 mt-2 pl-3"
+            :config="item.number"
+          />
         </div>
       </div>
     </div>
     <div class="down">
       <div class="ranking bg-color-black">
-        <span style="color:#5cd9e8">
-          <icon name="align-left"></icon>
+        <span>
+          <icon name="chart-pie" class="text-icon"></icon>
         </span>
-        <span class="fs-xl text mx-2 mb-1">年度负责人组件达标榜</span>
-        <dv-scroll-ranking-board :config="ranking" style="height:2.75rem" />
+        <span class="fs-xl text mx-2 mb-1 pl-3">年度负责人组件达标榜</span>
+        <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
       </div>
       <div class="percent">
         <div class="item bg-color-black">
           <span>今日任务通过率</span>
-          <CenterChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" />
+          <CenterChart
+            :id="rate[0].id"
+            :tips="rate[0].tips"
+            :colorObj="rate[0].colorData"
+          />
         </div>
         <div class="item bg-color-black">
           <span>今日任务达标率</span>
-          <CenterChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />
+          <CenterChart
+            :id="rate[1].id"
+            :tips="rate[1].tips"
+            :colorObj="rate[1].colorData"
+          />
         </div>
         <div class="water">
-          <dv-water-level-pond :config="water" style="height: 1.5rem" />
+          <dv-water-level-pond class="dv-wa-le-po" :config="water" />
         </div>
       </div>
     </div>
@@ -34,152 +49,174 @@
 </template>
 
 <script>
-import CenterChart from "@/components/echart/center/centerChartRate";
+import CenterChart from '@/components/echart/center/centerChartRate'
 
 export default {
-  data () {
+  data() {
     return {
       titleItem: [
         {
-          title: "今年累计任务建次数",
+          title: '今年累计任务建次数',
           number: {
             number: [120],
             toFixed: 1,
-            content: "{nt}"
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
           }
         },
         {
-          title: "本月累计任务次数",
+          title: '本月累计任务次数',
           number: {
             number: [18],
             toFixed: 1,
-            content: "{nt}"
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
           }
         },
         {
-          title: "今日累计任务次数",
+          title: '今日累计任务次数',
           number: {
             number: [2],
             toFixed: 1,
-            content: "{nt}"
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
           }
         },
         {
-          title: "今年失败任务次数",
+          title: '今年失败任务次数',
           number: {
             number: [14],
             toFixed: 1,
-            content: "{nt}"
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
           }
         },
         {
-          title: "今年成功任务次数",
+          title: '今年成功任务次数',
           number: {
             number: [106],
             toFixed: 1,
-            content: "{nt}"
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
           }
         },
         {
-          title: "今年达标任务个数",
+          title: '今年达标任务个数',
           number: {
             number: [100],
             toFixed: 1,
-            content: "{nt}"
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
           }
         }
       ],
       ranking: {
         data: [
           {
-            name: "周口",
+            name: '周口',
             value: 55
           },
           {
-            name: "南阳",
+            name: '南阳',
             value: 120
           },
           {
-            name: "西峡",
+            name: '西峡',
             value: 78
           },
           {
-            name: "驻马店",
+            name: '驻马店',
             value: 66
           },
           {
-            name: "新乡",
+            name: '新乡',
             value: 80
           },
           {
-            name: "新乡2",
+            name: '新乡2',
             value: 80
           },
           {
-            name: "新乡3",
+            name: '新乡3',
             value: 80
           },
           {
-            name: "新乡4",
+            name: '新乡4',
             value: 80
           },
           {
-            name: "新乡5",
+            name: '新乡5',
             value: 80
           },
           {
-            name: "新乡6",
+            name: '新乡6',
             value: 80
-          },
+          }
         ],
-        carousel: "single",
-        unit: "人"
+        carousel: 'single',
+        unit: '人'
       },
       water: {
         data: [24, 45],
-        shape: "roundRect",
-        formatter: "{value}%",
+        shape: 'roundRect',
+        formatter: '{value}%',
         waveNum: 3
       },
       // 通过率和达标率的组件复用数据
       rate: [
         {
-          id: "centerRate1",
+          id: 'centerRate1',
           tips: 60,
           colorData: {
-            textStyle: "#3fc0fb",
+            textStyle: '#3fc0fb',
             series: {
-              color: ["#00bcd44a", "transparent"],
+              color: ['#00bcd44a', 'transparent'],
               dataColor: {
-                normal: "#03a9f4",
-                shadowColor: "#97e2f5"
+                normal: '#03a9f4',
+                shadowColor: '#97e2f5'
               }
             }
           }
         },
         {
-          id: "centerRate2",
+          id: 'centerRate2',
           tips: 40,
           colorData: {
-            textStyle: "#67e0e3",
+            textStyle: '#67e0e3',
             series: {
-              color: ["#faf3a378", "transparent"],
+              color: ['#faf3a378', 'transparent'],
               dataColor: {
-                normal: "#ff9800",
-                shadowColor: "#fcebad"
+                normal: '#ff9800',
+                shadowColor: '#fcebad'
               }
             }
           }
         }
       ]
-    };
+    }
   },
   components: {
     CenterChart
-    // centerChart1,
-    // centerChart2
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
@@ -192,26 +229,33 @@ export default {
     flex-wrap: wrap;
     justify-content: space-around;
     .item {
-      border-radius: 0.0625rem;
-      padding-top: 0.2rem;
-      margin-top: 0.1rem;
+      border-radius: 6px;
+      padding-top: 8px;
+      margin-top: 8px;
       width: 32%;
-      height: 0.875rem;
+      height: 70px;
+      .dv-dig-flop {
+        width: 150px;
+        height: 30px;
+      }
     }
   }
   .down {
-    padding: 0.07rem 0.05rem;
+    padding: 6px 4px;
     padding-bottom: 0;
     width: 100%;
     display: flex;
-    height: 3.1875rem;
+    height: 255px;
     justify-content: space-between;
     .bg-color-black {
-      border-radius: 0.0625rem;
+      border-radius: 5px;
     }
     .ranking {
-      padding: 0.125rem;
+      padding: 10px;
       width: 59%;
+      .dv-scr-rank-board {
+        height: 225px;
+      }
     }
     .percent {
       width: 40%;
@@ -219,17 +263,21 @@ export default {
       flex-wrap: wrap;
       .item {
         width: 50%;
-        height: 1.5rem;
+        height: 120px;
         span {
-          margin-top: 0.0875rem;
+          margin-top: 8px;
+          font-size: 14px;
           display: flex;
           justify-content: center;
         }
       }
       .water {
         width: 100%;
+        .dv-wa-le-po {
+          height: 120px;
+        }
       }
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/centerLeft1.vue b/src/views/centerLeft1.vue
index 957358b..8d7e5f8 100644
--- a/src/views/centerLeft1.vue
+++ b/src/views/centerLeft1.vue
@@ -2,12 +2,12 @@
   <div id="centerLeft1">
     <div class="bg-color-black">
       <div class="d-flex pt-2 pl-2">
-        <span style="color:#5cd9e8">
-          <icon name="chart-bar"></icon>
+        <span>
+          <icon name="chart-bar" class="text-icon"></icon>
         </span>
         <div class="d-flex">
           <span class="fs-xl text mx-2">任务通过率</span>
-          <dv-decoration-3 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" />
+          <dv-decoration-3 class="dv-dec-3" />
         </div>
       </div>
       <div class="d-flex jc-center">
@@ -15,13 +15,17 @@
       </div>
       <!-- 4个主要的数据 -->
       <div class="bottom-data">
-        <div class="item-box" v-for="(item,index) in numberData" :key="index">
+        <div
+          class="item-box mt-2"
+          v-for="(item, index) in numberData"
+          :key="index"
+        >
           <div class="d-flex">
             <span class="coin">￥</span>
-            <dv-digital-flop :config="item.number" style="width:2.5rem;height:.625rem;" />
+            <dv-digital-flop class="dv-digital-flop" :config="item.number" />
           </div>
           <p class="text" style="text-align: center;">
-            {{item.text}}
+            {{ item.text }}
             <span class="colorYellow">(件)</span>
           </p>
         </div>
@@ -31,7 +35,7 @@
 </template>
 
 <script>
-import CenterLeft1Chart from "@/components/echart/centerLeft/centerLeft1Chart";
+import CenterLeft1Chart from '@/components/echart/centerLeft/centerLeft1Chart'
 export default {
   data() {
     return {
@@ -40,99 +44,126 @@ export default {
           number: {
             number: [15],
             toFixed: 1,
-            content: "{nt}"
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 24
+            }
           },
-          text: "今日构建总量"
+          text: '今日构建总量'
         },
         {
           number: {
             number: [1144],
             toFixed: 1,
-            content: "{nt}"
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 24
+            }
           },
-          text: "总共完成数量"
+          text: '总共完成数量'
         },
         {
           number: {
             number: [361],
             toFixed: 1,
-            content: "{nt}"
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 24
+            }
           },
-          text: "正在编译数量"
+          text: '正在编译数量'
         },
         {
           number: {
             number: [157],
             toFixed: 1,
-            content: "{nt}"
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 24
+            }
           },
-          text: "未通过数量"
+          text: '未通过数量'
         }
       ]
-    };
+    }
   },
   components: {
     CenterLeft1Chart
   },
   mounted() {
-    this.changeTiming();
+    this.changeTiming()
   },
   methods: {
     changeTiming() {
       setInterval(() => {
-        this.changeNumber();
-      }, 3000);
+        this.changeNumber()
+      }, 3000)
     },
     changeNumber() {
       this.numberData.forEach((item, index) => {
-        item.number.number[0] += ++index;
-        item.number = { ...item.number };
-      });
+        item.number.number[0] += ++index
+        item.number = { ...item.number }
+      })
     }
   }
-};
+}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+$box-width: 300px;
+$box-height: 410px;
+
 #centerLeft1 {
-  padding: 0.2rem;
-  height: 5.125rem;
-  min-width: 3.75rem;
-  border-radius: 0.0625rem;
+  padding: 16px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 10px;
   .bg-color-black {
-    height: 4.8125rem;
-    border-radius: 0.125rem;
+    height: $box-height - 30px;
+    border-radius: 10px;
   }
   .text {
     color: #c3cbde;
   }
-  .chart-box {
-    margin-top: 0.2rem;
-    width: 2.125rem;
-    height: 2.125rem;
-    .active-ring-name {
-      padding-top: 0.125rem;
-    }
+  .dv-dec-3 {
+    position: relative;
+    width: 100px;
+    height: 20px;
+    top: -3px;
   }
 
   .bottom-data {
     .item-box {
+      & > div {
+        padding-right: 5px;
+      }
+      font-size: 14px;
       float: right;
       position: relative;
       width: 50%;
       color: #d3d6dd;
+      .dv-digital-flop {
+        width: 120px;
+        height: 30px;
+      }
       // 金币
       .coin {
-        position: absolute;
-        left: 0.1rem;
-        top: 0.2125rem;
-        font-size: 0.25rem;
+        position: relative;
+        top: 6px;
+        font-size: 20px;
         color: #ffc107;
       }
       .colorYellow {
         color: yellowgreen;
       }
+      p {
+        text-align: center;
+      }
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/centerLeft2.vue b/src/views/centerLeft2.vue
index 4fa65d8..7a9938f 100644
--- a/src/views/centerLeft2.vue
+++ b/src/views/centerLeft2.vue
@@ -2,12 +2,12 @@
   <div id="centerLeft1">
     <div class="bg-color-black">
       <div class="d-flex pt-2 pl-2">
-        <span style="color:#5cd9e8">
-          <icon name="chart-pie"></icon>
+        <span>
+          <icon name="chart-pie" class="text-icon"></icon>
         </span>
         <div class="d-flex">
           <span class="fs-xl text mx-2">地图数据</span>
-          <dv-decoration-1 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" />
+          <dv-decoration-1 class="dv-dec-1" />
         </div>
       </div>
       <div class="d-flex jc-center">
@@ -20,36 +20,39 @@
 <script>
 import CenterLeft2Chart from "@/components/echart/centerLeft/centerLeft2Chart";
 export default {
-  data() {
-    return {};
-  },
   components: {
     CenterLeft2Chart
   },
-  mounted() {},
-  methods: {}
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 #centerLeft1 {
-  padding: 0.2rem;
-  height: 5.125rem;
-  min-width: 3.75rem;
-  border-radius: 0.0625rem;
+  $box-width: 300px;
+  $box-height: 410px;
+  padding: 16px;
+  height: $box-height;
+  min-width: $box-width;
+  border-radius: 5px;
   .bg-color-black {
-    height: 4.8125rem;
-    border-radius: 0.125rem;
+    height: $box-height - 30px;
+    border-radius: 10px;
   }
   .text {
     color: #c3cbde;
   }
+  .dv-dec-1 {
+    position: relative;
+    width: 100px;
+    height: 20px;
+    top: -3px;
+  }
   .chart-box {
-    margin-top: 0.2rem;
-    width: 2.125rem;
-    height: 2.125rem;
+    margin-top: 16px;
+    width: 170px;
+    height: 170px;
     .active-ring-name {
-      padding-top: 0.125rem;
+      padding-top: 10px;
     }
   }
 }
diff --git a/src/views/centerRight1.vue b/src/views/centerRight1.vue
index bcf5fcb..e711c00 100644
--- a/src/views/centerRight1.vue
+++ b/src/views/centerRight1.vue
@@ -2,15 +2,15 @@
   <div id="centerRight1">
     <div class="bg-color-black">
       <div class="d-flex pt-2 pl-2">
-        <span style="color:#5cd9e8">
-          <icon name="chart-line"></icon>
+        <span>
+          <icon name="chart-line" class="text-icon"></icon>
         </span>
         <div class="d-flex">
           <span class="fs-xl text mx-2">任务完成排行榜</span>
         </div>
       </div>
       <div class="d-flex jc-center body-box">
-        <dv-scroll-board :config="config" style="width:3.375rem;height:4.28rem" />
+        <dv-scroll-board class="dv-scr-board" :config="config" />
       </div>
     </div>
   </div>
@@ -21,52 +21,59 @@ export default {
   data() {
     return {
       config: {
-        header: ["组件", "分支", "覆盖率"],
+        header: ['组件', '分支', '覆盖率'],
         data: [
-          ["组件1", "dev-1", "<span  class='colorGrass'>↑75%</span>"],
-          ["组件2", "dev-2", "<span  class='colorRed'>↓33%</span>"],
-          ["组件3", "dev-3", "<span  class='colorGrass'>↑100%</span>"],
-          ["组件4", "rea-1", "<span  class='colorGrass'>↑94%</span>"],
-          ["组件5", "rea-2", "<span  class='colorGrass'>↑95%</span>"],
-          ["组件6", "fix-2", "<span  class='colorGrass'>↑63%</span>"],
-          ["组件7", "fix-4", "<span  class='colorGrass'>↑84%</span>"],
-          ["组件8", "fix-7", "<span  class='colorRed'>↓46%</span>"],
-          ["组件9", "dev-2", "<span  class='colorRed'>↓13%</span>"],
-          ["组件10", "dev-9", "<span  class='colorGrass'>↑76%</span>"]
+          ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+          ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+          ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+          ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+          ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+          ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+          ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+          ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+          ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+          ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
         ],
         rowNum: 7, //表格行数
         headerHeight: 35,
-        headerBGC: "#0f1325", //表头
-        oddRowBGC: "#0f1325", //奇数行
-        evenRowBGC: "#171c33", //偶数行
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
         index: true,
         columnWidth: [50],
-        align: ["center"]
+        align: ['center']
       }
-    };
+    }
   },
   components: {},
   mounted() {},
   methods: {}
-};
+}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+$box-height: 410px;
+$box-width: 300px;
 #centerRight1 {
-  padding: 0.2rem;
-  height: 5.125rem;
-  min-width: 3.75rem;
-  border-radius: 0.0625rem;
+  padding: 16px;
+  padding-top: 20px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
   .bg-color-black {
-    height: 4.8125rem;
-    border-radius: 0.125rem;
+    height: $box-height - 30px;
+    border-radius: 10px;
   }
   .text {
     color: #c3cbde;
   }
   .body-box {
-    border-radius: 0.125rem;
+    border-radius: 10px;
     overflow: hidden;
+    .dv-scr-board {
+      width: 270px;
+      height: 340px;
+    }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/centerRight2.vue b/src/views/centerRight2.vue
index 13c49f6..7b8a87f 100644
--- a/src/views/centerRight2.vue
+++ b/src/views/centerRight2.vue
@@ -2,14 +2,13 @@
   <div id="centerRight2">
     <div class="bg-color-black">
       <div class="d-flex pt-2 pl-2">
-        <span style="color:#5cd9e8">
-          <icon name="align-left"></icon>
+        <span>
+          <icon name="align-left" class="text-icon"></icon>
         </span>
         <span class="fs-xl text mx-2">产品销售渠道分析</span>
       </div>
-      <div class="d-flex jc-center body-box" style=" margin-top: 0;">
-        <dv-capsule-chart :config="config" style="width: 100%;height:2rem" />
-        <!-- ---------------------------------------- -->
+      <div class="d-flex ai-center flex-column body-box">
+        <dv-capsule-chart class="dv-cap-chart" :config="config" />
         <centerRight2Chart1 />
       </div>
     </div>
@@ -17,7 +16,7 @@
 </template>
 
 <script>
-import centerRight2Chart1 from "@/components/echart/centerRight/centerRightChart";
+import centerRight2Chart1 from '@/components/echart/centerRight/centerRightChart'
 
 export default {
   data() {
@@ -25,52 +24,57 @@ export default {
       config: {
         data: [
           {
-            name: "南阳",
+            name: '南阳',
             value: 167
           },
           {
-            name: "周口",
+            name: '周口',
             value: 67
           },
           {
-            name: "漯河",
+            name: '漯河',
             value: 123
           },
           {
-            name: "郑州",
+            name: '郑州',
             value: 55
           },
           {
-            name: "西峡",
+            name: '西峡',
             value: 98
           }
         ]
       }
-    };
+    }
   },
-  components: { centerRight2Chart1 },
-  mounted() {},
-  methods: {}
-};
+  components: { centerRight2Chart1 }
+}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 #centerRight2 {
-  padding: 0.0625rem;
-  height: 5rem;
-  min-width: 3.75rem;
-  border-radius: 0.0625rem;
+  $box-height: 410px;
+  $box-width: 340px;
+  padding: 5px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
   .bg-color-black {
-    padding: 0.0625rem;
-    height: 5.0625rem;
-    border-radius: 0.125rem;
+    padding: 5px;
+    height: $box-height;
+    width: $box-width;
+    border-radius: 10px;
   }
   .text {
     color: #c3cbde;
   }
   .body-box {
-    border-radius: 0.125rem;
+    border-radius: 10px;
     overflow: hidden;
+    .dv-cap-chart {
+      width: 100%;
+      height: 160px;
+    }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/index.vue b/src/views/index.vue
index 092f8e1..9c95e8c 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,54 +1,49 @@
 <template>
-  <div id="index">
-    <dv-full-screen-container class="bg">
+  <div id="index" ref="appRef">
+    <div class="bg">
       <dv-loading v-if="loading">Loading...</dv-loading>
       <div v-else class="host-body">
         <div class="d-flex jc-center">
-          <dv-decoration-10 style="width:33.3%;height:.0625rem;" />
+          <dv-decoration-10 class="dv-dec-10" />
           <div class="d-flex jc-center">
-            <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" />
+            <dv-decoration-8 class="dv-dec-8" :color="['#568aea', '#000000']" />
             <div class="title">
               <span class="title-text">大数据可视化平台</span>
               <dv-decoration-6
-                class="title-bototm"
+                class="dv-dec-6"
                 :reverse="true"
                 :color="['#50e3c2', '#67a1e5']"
-                style="width:3.125rem;height:.1rem;"
               />
             </div>
             <dv-decoration-8
+              class="dv-dec-8"
               :reverse="true"
               :color="['#568aea', '#000000']"
-              style="width:2.5rem;height:.625rem;"
             />
           </div>
-          <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
+          <dv-decoration-10 class="dv-dec-10-s" />
         </div>
 
         <!-- 第二行 -->
         <div class="d-flex jc-between px-2">
-          <div class="d-flex" style="width: 40%">
-            <div
-              class="react-right ml-4"
-              style="width: 6.25rem; text-align: left;background-color: #0f1325;"
-            >
+          <div class="d-flex aside-width">
+            <div class="react-left ml-4 react-l-s">
               <span class="react-before"></span>
               <span class="text">数据分析1</span>
             </div>
-            <div class="react-right ml-3" style="background-color: #0f1325;">
-              <span class="text colorBlue">数据分析2</span>
+            <div class="react-right ml-3">
+              <span class="text">数据分析2</span>
             </div>
           </div>
-          <div style="width: 40%" class="d-flex">
-            <div class="react-left bg-color-blue mr-3">
+          <div class="d-flex aside-width">
+            <div class="react-right bg-color-blue mr-3">
               <span class="text fw-b">vue-big-screen</span>
             </div>
-            <div
-              class="react-left mr-4"
-              style="width: 6.25rem; background-color: #0f1325; text-align: right;"
-            >
+            <div class="react-right mr-4 react-l-s">
               <span class="react-after"></span>
-              <span class="text">{{dateYear}} {{dateWeek}} {{dateDay}}</span>
+              <span class="text"
+                >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
+              >
             </div>
           </div>
         </div>
@@ -92,28 +87,32 @@
           </div>
         </div>
       </div>
-    </dv-full-screen-container>
+    </div>
   </div>
 </template>
 
 <script>
+import drawMixin from "../utils/drawMixin";
 import { formatTime } from '../utils/index.js'
-import centerLeft1 from "./centerLeft1";
-import centerLeft2 from "./centerLeft2";
-import centerRight1 from "./centerRight1";
-import centerRight2 from "./centerRight2";
-import center from "./center";
-import bottomLeft from "./bottomLeft";
-import bottomRight from "./bottomRight";
+import centerLeft1 from './centerLeft1'
+import centerLeft2 from './centerLeft2'
+import centerRight1 from './centerRight1'
+import centerRight2 from './centerRight2'
+import center from './center'
+import bottomLeft from './bottomLeft'
+import bottomRight from './bottomRight'
+
 export default {
-  data () {
+  mixins: [ drawMixin ],
+  data() {
     return {
+      timing: null,
       loading: true,
       dateDay: null,
       dateYear: null,
       dateWeek: null,
-      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
-    };
+      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+    }
   },
   components: {
     centerLeft1,
@@ -124,27 +123,30 @@ export default {
     bottomLeft,
     bottomRight
   },
-  mounted () {
-    this.timeFn();
-    this.cancelLoading();
+  mounted() {
+    this.timeFn()
+    this.cancelLoading()
+  },
+  unMounted() {
+    clearInterval(this.timing)
   },
   methods: {
-    timeFn () {
-      setInterval(() => {
-        this.dateDay = formatTime(new Date(), 'HH: mm: ss');
-        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
-        this.dateWeek = this.weekday[new Date().getDay()];
+    timeFn() {
+      this.timing = setInterval(() => {
+        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
+        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
+        this.dateWeek = this.weekday[new Date().getDay()]
       }, 1000)
     },
-    cancelLoading () {
+    cancelLoading() {
       setTimeout(() => {
-        this.loading = false;
-      }, 500);
+        this.loading = false
+      }, 500)
     }
   }
-};
+}
 </script>
 
 <style lang="scss">
 @import '../assets/scss/index.scss';
-</style>
\ No newline at end of file
+</style>