diff --git a/README.md b/README.md
index 3c5464f..3661f0c 100644
--- a/README.md
+++ b/README.md
@@ -161,8 +161,25 @@ props: {
 6. **如何更换图表**
    直接进入 `components/echart` 下的文件修改成你要的 echarts 模样，可以去[echarts 官方社区](https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all)里面查看案例。
 
-7. **屏幕比例不对怎么办**
-   其实 dataV 插件已经对屏幕的比例做了一定程度的适配，但肯定有比例不合适的屏幕，所以可能需要自己去写 js 代码，让项目按照比例缩放，这也是通用的适配方法。
+7. **屏幕适配问题**
+   本项目借助了 flexible 插件，通过改变 rem 的值来进行适配，原设计为 1920px。 ，适配区间为：1366px ~ 2560px，本项目有根据实际情况进行源文件的更改，小屏幕（如:宽为 1366px）需要自己舍弃部分动态组件进行适配，如'动态文字变换组件'会影响布局，需要手动换成一般节点，
+
+```js
+// flexible文件位置: `common/flexible.js`,修改部分如下
+function refreshRem() {
+  var width = docEl.getBoundingClientRect().width;
+  // 最小1366px，最大适配2560px
+  if (width / dpr < 1366) {
+    width = 1366 * dpr;
+  } else if (width / dpr > 2560) {
+    width = 2560 * dpr;
+  }
+  // 原项目是1920px我设置成24等份，这样1rem就是80px
+  var rem = width / 24;
+  docEl.style.fontSize = rem + "px";
+  flexible.rem = win.rem = rem;
+}
+```
 
 ## 四、更新情况
 
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index 0a615af..a95b2e2 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -14,24 +14,23 @@ $colors: (
 );
 
 // 字体大小
-$base-font-size: 1rem;
+$base-font-size: 0.2rem;
 $font-sizes: (
-  xxs: 0.6154,
+  xxs: 0.1,
   //8px
-    xs: 0.7692,
+    xs: 0.125,
   //10px
-    sm: 0.9231,
+    sm: 0.2875,
   //12px
-    md: 1 ,
+    md: 0.1625,
   //13px
-    lg: 1.0769 ,
+    lg: 0.175,
   //14px
-    xl: 1.2308 ,
+    xl: 0.2,
   //16px
-    xxl: 1.3846 ,
+    xxl: 0.225,
   //18px
-    xxxl: 1.5385 
-  //20px
+    xxxl: 0.25 //20px,,,,
 );
 
 // 宽高
@@ -61,14 +60,14 @@ $flex-jc: (
   center: center,
   between: space-between,
   around: space-around,
-  evenly: space-evenly
+  evenly: space-evenly,
 );
 
 $flex-ai: (
   start: flex-start,
   end: flex-end,
   center: center,
-  stretch: stretch
+  stretch: stretch,
 );
 
 .flex-1 {
@@ -79,20 +78,20 @@ $flex-ai: (
 //spacing
 $spacing-types: (
   m: margin,
-  p: padding
+  p: padding,
 );
 $spacing-directions: (
   t: top,
   r: right,
   b: bottom,
-  l: left
+  l: left,
 );
-$spacing-base-size: 1rem;
+$spacing-base-size: 0.2rem;
 $spacing-sizes: (
   0: 0,
   1: 0.25,
   2: 0.5,
   3: 1,
   4: 1.5,
-  5: 3
+  5: 3,
 );
diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss
index 727d612..fe05277 100644
--- a/src/assets/scss/index.scss
+++ b/src/assets/scss/index.scss
@@ -1,36 +1,35 @@
 #index {
-  * {
-    color: #D3D6DD;
-  }
-
+  color: #d3d6dd;
   background-color: #000000;
   width: 100%;
   height: 100vh;
 
   .bg {
-    padding: 1rem;
+    padding: 0.2rem 0.2rem 0 0.2rem;
     background-image: url("../assets/pageBg.png");
+    background-size: cover;
+    background-position: center center;
   }
 
   .host-body {
     .title {
       position: relative;
-      width: 500px;
+      width: 6.25rem;
       text-align: center;
       background-size: cover;
       background-repeat: no-repeat;
 
       .title-text {
-        font-size: 2rem;
+        font-size: 0.2rem;
         position: absolute;
-        bottom: 0px;
+        bottom: 0;
         left: 50%;
         transform: translate(-50%);
       }
 
       .title-bototm {
         position: absolute;
-        bottom: -30px;
+        bottom: -0.375rem;
         left: 50%;
         transform: translate(-50%);
       }
@@ -39,19 +38,19 @@
     // 平行四边形
     .react-left {
       cursor: pointer;
-      font-size: 1.3rem;
-      width: 300px;
-      height: 50px;
-      line-height: 50px;
+      font-size: 0.225rem;
+      width: 3.75rem;
+      height: 0.625rem;
+      line-height: 0.625rem;
       text-align: center;
       transform: skewX(-45deg);
 
       .react-after {
         position: absolute;
-        right: -25px;
-        top: 0px;
-        height: 50px;
-        width: 50px;
+        right: -0.3125rem;
+        top: 0;
+        height: 0.625rem;
+        width: 0.625rem;
         background-color: #0f1325;
         transform: skewX(45deg);
       }
@@ -64,22 +63,21 @@
 
     .react-right {
       cursor: pointer;
-      font-size: 1.3rem;
-      width: 300px;
-      height: 50px;
-      line-height: 50px;
+      font-size: 0.225rem;
+      width: 3.75rem;
+      height: 0.625rem;
+      line-height: 0.625rem;
       text-align: center;
       transform: skewX(45deg);
 
       .react-before {
         position: absolute;
-        left: -25px;
-        top: 0px;
-        height: 50px;
-        width: 50px;
+        left: -0.3125rem;
+        top: 0;
+        height: 0.625rem;
+        width: 0.625rem;
         background-color: #0f1325;
         transform: skewX(-45deg);
-
       }
 
       .text {
@@ -88,9 +86,8 @@
       }
     }
 
-
     .body-box {
-      margin-top: 1rem;
+      margin-top: 0.2rem;
       display: flex;
       flex-direction: column;
 
@@ -102,10 +99,10 @@
 
       // 底部数据
       .bototm-box {
-        margin-top: 10px;
+        margin-top: 0.125rem;
         display: grid;
         grid-template-columns: repeat(2, 50%);
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index f3b17df..e4c3a05 100644
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -10,7 +10,6 @@
 }
 
 html {
-  font-size: 13px;
   margin: 0;
   padding: 0;
 }
@@ -49,7 +48,6 @@ a {
   float: left;
 }
 
-
 // 字体加粗
 .fw-b {
   font-weight: bold;
@@ -63,14 +61,13 @@ a {
 }
 
 .bg-color-black {
-  background-color: rgba(19, 25, 47, .6);
+  background-color: rgba(19, 25, 47, 0.6);
 }
 
 .bg-color-blue {
-  background-color: #1A5CD7;
+  background-color: #1a5cd7;
 }
 
-
 .colorBlack {
   color: #272727 !important;
 
@@ -80,10 +77,10 @@ a {
 }
 
 .colorGrass {
-  color: #33CEA0;
+  color: #33cea0;
 
   &:hover {
-    color: #33CEA0 !important;
+    color: #33cea0 !important;
   }
 }
 
@@ -96,10 +93,10 @@ a {
 }
 
 .colorText {
-  color: #D3D6DD !important;
+  color: #d3d6dd !important;
 
   &:hover {
-    color: #D3D6DD !important;
+    color: #d3d6dd !important;
   }
 }
 
@@ -111,10 +108,8 @@ a {
   }
 }
 
-
 //颜色
-@each $colorkey,
-$color in $colors {
+@each $colorkey, $color in $colors {
   .text-#{$colorkey} {
     color: $color;
   }
@@ -124,7 +119,6 @@ $color in $colors {
   }
 }
 
-
 //对齐
 @each $var in (left, center, right) {
   .text-#{$var} {
@@ -133,46 +127,38 @@ $color in $colors {
 }
 
 //flex
-@each $key,
-$value in $flex-jc {
+@each $key, $value in $flex-jc {
   .jc-#{$key} {
     justify-content: $value;
   }
 }
 
-@each $key,
-$value in $flex-ai {
+@each $key, $value in $flex-ai {
   .ai-#{$key} {
     align-items: $value;
   }
 }
 
 //字体
-@each $fontkey,
-$fontvalue in $font-sizes {
+@each $fontkey, $fontvalue in $font-sizes {
   .fs-#{$fontkey} {
     font-size: $fontvalue * $base-font-size;
   }
 }
 
-
 //.mt-1 => margin top
 //spacing
 
-@each $typekey,
-$type in $spacing-types {
-
+@each $typekey, $type in $spacing-types {
   //.m-1
-  @each $sizekey,
-  $size in $spacing-sizes {
+  @each $sizekey, $size in $spacing-sizes {
     .#{$typekey}-#{$sizekey} {
       #{$type}: $size * $spacing-base-size;
     }
   }
 
   //.mx-1
-  @each $sizekey,
-  $size in $spacing-sizes {
+  @each $sizekey, $size in $spacing-sizes {
     .#{$typekey}x-#{$sizekey} {
       #{$type}-left: $size * $spacing-base-size;
       #{$type}-right: $size * $spacing-base-size;
@@ -185,11 +171,8 @@ $type in $spacing-types {
   }
 
   //.mt-1
-  @each $directionkey,
-  $direction in $spacing-directions {
-
-    @each $sizekey,
-    $size in $spacing-sizes {
+  @each $directionkey, $direction in $spacing-directions {
+    @each $sizekey, $size in $spacing-sizes {
       .#{$typekey}#{$directionkey}-#{$sizekey} {
         #{$type}-#{$direction}: $size * $spacing-base-size;
       }
@@ -199,4 +182,4 @@ $type in $spacing-types {
   .#{$typekey} {
     #{$type}: 0;
   }
-}
\ No newline at end of file
+}
diff --git a/src/common/flexible.js b/src/common/flexible.js
new file mode 100644
index 0000000..2ad23f3
--- /dev/null
+++ b/src/common/flexible.js
@@ -0,0 +1,147 @@
+(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.vue b/src/components/echart/bottom/bottomLeftChart.vue
index f36d3f1..2b34df4 100644
--- a/src/components/echart/bottom/bottomLeftChart.vue
+++ b/src/components/echart/bottom/bottomLeftChart.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div id="bottomLeftChart" style="width:900px;height:500px;"></div>
+    <div id="bottomLeftChart" style="width:11.25rem;height:6.25rem;"></div>
   </div>
 </template>
 
diff --git a/src/components/echart/bottom/bottomRightChart.vue b/src/components/echart/bottom/bottomRightChart.vue
index 35cf7cb..777404f 100644
--- a/src/components/echart/bottom/bottomRightChart.vue
+++ b/src/components/echart/bottom/bottomRightChart.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div id="bottomRightChart" style="width:900px;height:480px;"></div>
+    <div id="bottomRightChart" style="width:11.25rem;height:6rem;"></div>
   </div>
 </template>
 
@@ -388,8 +388,7 @@ export default {
             barWidth: "50%",
             data: weekMaxData,
             animation: false
-          },
-          
+          }
         ]
       };
 
diff --git a/src/components/echart/center/centerChartRate.vue b/src/components/echart/center/centerChartRate.vue
index f76c519..5c1984b 100644
--- a/src/components/echart/center/centerChartRate.vue
+++ b/src/components/echart/center/centerChartRate.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div :id="id" style="width:120px;height:100px;"></div>
+    <div :id="id" style="width:1.5rem;height:1.25rem;"></div>
   </div>
 </template>
 
diff --git a/src/components/echart/centerLeft2/centreLeft1Chart.vue b/src/components/echart/centerLeft2/centreLeft1Chart.vue
index 4a5082f..ea35fa3 100644
--- a/src/components/echart/centerLeft2/centreLeft1Chart.vue
+++ b/src/components/echart/centerLeft2/centreLeft1Chart.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div id="centreLeft1Chart" style="width:260px; height: 220px;"></div>
+    <div id="centreLeft1Chart" style="width:3.25rem; height: 2.75rem;"></div>
   </div>
 </template>
 
diff --git a/src/components/echart/centerLeft2/centreLeft2Chart.vue b/src/components/echart/centerLeft2/centreLeft2Chart.vue
index b2f6f64..5a0a520 100644
--- a/src/components/echart/centerLeft2/centreLeft2Chart.vue
+++ b/src/components/echart/centerLeft2/centreLeft2Chart.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div id="centreLeft2Chart" style="width:330px; height: 370px;"></div>
+    <div id="centreLeft2Chart" style="width:4.125rem; height: 4.625rem;"></div>
   </div>
 </template>
 
diff --git a/src/components/echart/centreRight2/centreRight2Chart1.vue b/src/components/echart/centreRight2/centreRight2Chart1.vue
index 73c3fcf..a0ab959 100644
--- a/src/components/echart/centreRight2/centreRight2Chart1.vue
+++ b/src/components/echart/centreRight2/centreRight2Chart1.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div id="centreRight2Chart1" style="width:260px; height: 215px;">123</div>
+    <div id="centreRight2Chart1" style="width:3.25rem; height: 2.60rem;">123</div>
   </div>
 </template>
 
@@ -168,7 +168,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-#centreRight2Chart1{
+#centreRight2Chart1 {
   margin: 0 auto;
 }
 </style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f97bcfd..15712ba 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,23 +1,26 @@
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
-import dataV from '@jiaminghi/data-view'
-Vue.use(dataV)
+import Vue from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import dataV from "@jiaminghi/data-view";
+Vue.use(dataV);
 
 // 引入vue-awesome
-import Icon from 'vue-awesome/components/Icon'
-import 'vue-awesome/icons/index.js'
+import Icon from "vue-awesome/components/Icon";
+import "vue-awesome/icons/index.js";
 // 全局注册图标
-Vue.component('icon', Icon)
+Vue.component("icon", Icon);
+
+// 适配flex
+import "@/common/flexible.js";
 
 // 引入全局css
-import './assets/scss/style.scss'
+import "./assets/scss/style.scss";
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 new Vue({
   router,
   store,
-  render: h => h(App)
-}).$mount('#app')
\ No newline at end of file
+  render: (h) => h(App),
+}).$mount("#app");
diff --git a/src/views/bottomLeft.vue b/src/views/bottomLeft.vue
index 3a735dd..e4fd862 100644
--- a/src/views/bottomLeft.vue
+++ b/src/views/bottomLeft.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="bottomLeft">
-    <div class="bg-color-black ">
+    <div class="bg-color-black">
       <div class="d-flex pt-2 pl-2">
         <span style="color:#5cd9e8">
           <icon name="chart-bar"></icon>
@@ -25,31 +25,30 @@ export default {
   components: {
     bottomLeftChart
   },
-  mounted() {
-  },
+  mounted() {},
   methods: {}
 };
 </script>
 
 <style lang="scss">
 #bottomLeft {
-  padding: 1.5rem 1rem;
-  height: 520px;
-  min-width: 300px;
-  border-radius: 5px;
+  padding: 0.3rem 0.2rem;
+  height: 6.5rem;
+  min-width: 3.75rem;
+  border-radius: 0.0625rem;
   .bg-color-black {
-    height: 485px;
-    border-radius: 10px;
+    height: 6.0625rem;
+    border-radius: 0.125rem;
   }
   .text {
     color: #c3cbde;
   }
   .chart-box {
-    margin-top: 1rem;
-    width: 170px;
-    height: 170px;
+    margin-top: 0.2rem;
+    width: 2.125rem;
+    height: 2.125rem;
     .active-ring-name {
-      padding-top: 10px;
+      padding-top: 0.125rem;
     }
   }
 }
diff --git a/src/views/bottomRight.vue b/src/views/bottomRight.vue
index 51b303f..30d7395 100644
--- a/src/views/bottomRight.vue
+++ b/src/views/bottomRight.vue
@@ -35,27 +35,27 @@ export default {
 
 <style lang="scss">
 #bottomRight {
-  padding: 1rem 1rem 0rem;
-  height: 520px;
-  min-width: 300px;
-  border-radius: 5px;
+  padding: 0.2rem 0.2rem 0;
+  height: 6.5rem;
+  min-width: 3.75rem;
+  border-radius: 0.0625rem;
   .bg-color-black {
-    height: 495px;
-    border-radius: 10px;
+    height: 6.1875rem;
+    border-radius: 0.125rem;
   }
   .text {
     color: #c3cbde;
   } //下滑线动态
   .decoration2 {
     position: absolute;
-    right: 10px;
+    right: 0.125rem;
   }
   .chart-box {
-    margin-top: 1rem;
-    width: 170px;
-    height: 170px;
+    margin-top: 0.2rem;
+    width: 2.125rem;
+    height: 2.125rem;
     .active-ring-name {
-      padding-top: 10px;
+      padding-top: 0.125rem;
     }
   }
 }
diff --git a/src/views/center.vue b/src/views/center.vue
index cd3d1da..6d2d841 100644
--- a/src/views/center.vue
+++ b/src/views/center.vue
@@ -4,7 +4,7 @@
       <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>
-          <dv-digital-flop :config="item.number" style="width:100px;height:50px;" />
+          <dv-digital-flop :config="item.number" style="width:1.25rem;height:.625rem;" />
         </div>
       </div>
     </div>
@@ -14,7 +14,7 @@
           <icon name="align-left"></icon>
         </span>
         <span class="fs-xl text mx-2 mb-1">年度负责人组件达标榜</span>
-        <dv-scroll-ranking-board :config="ranking" style="height:220px" />
+        <dv-scroll-ranking-board :config="ranking" style="height:2.75rem" />
       </div>
       <div class="percent">
         <div class="item bg-color-black">
@@ -26,7 +26,7 @@
           <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: 120px" />
+          <dv-water-level-pond :config="water" style="height: 1.5rem" />
         </div>
       </div>
     </div>
@@ -185,25 +185,25 @@ export default {
     flex-wrap: wrap;
     justify-content: space-around;
     .item {
-      border-radius: 5px;
-      padding-top: 1rem;
-      margin-top: 0.5rem;
+      border-radius: 0.0625rem;
+      padding-top: 0.2rem;
+      margin-top: 0.1rem;
       width: 32%;
-      height: 70px;
+      height: 0.875rem;
     }
   }
   .down {
-    padding: 4px;
-    padding-bottom: 0px;
+    padding: 0.07rem 0.05rem;
+    padding-bottom: 0;
     width: 100%;
     display: flex;
-    height: 255px;
+    height: 3.1875rem;
     justify-content: space-between;
     .bg-color-black {
-      border-radius: 5px;
+      border-radius: 0.0625rem;
     }
     .ranking {
-      padding: 10px;
+      padding: 0.125rem;
       width: 59%;
     }
     .percent {
@@ -212,9 +212,9 @@ export default {
       flex-wrap: wrap;
       .item {
         width: 50%;
-        height: 120px;
+        height: 1.5rem;
         span {
-          margin-top: 7px;
+          margin-top: 0.0875rem;
           display: flex;
           justify-content: center;
         }
diff --git a/src/views/centreLeft1.vue b/src/views/centerLeft1.vue
similarity index 87%
rename from src/views/centreLeft1.vue
rename to src/views/centerLeft1.vue
index 9dc8ac5..c0c105e 100644
--- a/src/views/centreLeft1.vue
+++ b/src/views/centerLeft1.vue
@@ -7,7 +7,7 @@
         </span>
         <div class="d-flex">
           <span class="fs-xl text mx-2">任务通过率</span>
-          <dv-decoration-3 style="width:100px;height:20px; position:relative;top:-3px;" />
+          <dv-decoration-3 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" />
         </div>
       </div>
       <div class="d-flex jc-center">
@@ -18,7 +18,7 @@
         <div class="item-box" v-for="(item,index) in numberData" :key="index">
           <div class="d-flex">
             <span class="coin">￥</span>
-            <dv-digital-flop :config="item.number" style="width:200px;height:50px;" />
+            <dv-digital-flop :config="item.number" style="width:2.5rem;height:.625rem;" />
           </div>
           <p class="text" style="text-align: center;">
             {{item.text}}
@@ -123,23 +123,23 @@ export default {
 
 <style lang="scss">
 #centreLeft1 {
-  padding: 1rem;
-  height: 410px;
-  min-width: 300px;
-  border-radius: 5px;
+  padding: 0.2rem;
+  height: 5.125rem;
+  min-width: 3.75rem;
+  border-radius: 0.0625rem;
   .bg-color-black {
-    height: 385px;
-    border-radius: 10px;
+    height: 4.8125rem;
+    border-radius: 0.125rem;
   }
   .text {
     color: #c3cbde;
   }
   .chart-box {
-    margin-top: 1rem;
-    width: 170px;
-    height: 170px;
+    margin-top: 0.2rem;
+    width: 2.125rem;
+    height: 2.125rem;
     .active-ring-name {
-      padding-top: 10px;
+      padding-top: 0.125rem;
     }
   }
 
@@ -152,9 +152,9 @@ export default {
       // 金币
       .coin {
         position: absolute;
-        left: 0px;
-        top: 17px;
-        font-size: 2rem;
+        left: 0.1rem;
+        top: 0.2125rem;
+        font-size: 0.25rem;
         color: #ffc107;
       }
       .colorYellow {
diff --git a/src/views/centreLeft2.vue b/src/views/centerLeft2.vue
similarity index 70%
rename from src/views/centreLeft2.vue
rename to src/views/centerLeft2.vue
index b87aa06..6a5cf98 100644
--- a/src/views/centreLeft2.vue
+++ b/src/views/centerLeft2.vue
@@ -7,7 +7,7 @@
         </span>
         <div class="d-flex">
           <span class="fs-xl text mx-2">数据情况雷达图</span>
-          <dv-decoration-1 style="width:100px;height:20px; position:relative;top:-3px;" />
+          <dv-decoration-1 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" />
         </div>
       </div>
       <div class="d-flex jc-center">
@@ -33,23 +33,23 @@ export default {
 
 <style lang="scss">
 #centreLeft1 {
-  padding: 1rem;
-  height: 410px;
-  min-width: 300px;
-  border-radius: 5px;
+  padding: 0.2rem;
+  height: 5.125rem;
+  min-width: 3.75rem;
+  border-radius: 0.0625rem;
   .bg-color-black {
-    height: 385px;
-    border-radius: 10px;
+    height: 4.8125rem;
+    border-radius: 0.125rem;
   }
   .text {
     color: #c3cbde;
   }
   .chart-box {
-    margin-top: 1rem;
-    width: 170px;
-    height: 170px;
+    margin-top: 0.2rem;
+    width: 2.125rem;
+    height: 2.125rem;
     .active-ring-name {
-      padding-top: 10px;
+      padding-top: 0.125rem;
     }
   }
 }
diff --git a/src/views/centreRight1.vue b/src/views/centerRight1.vue
similarity index 87%
rename from src/views/centreRight1.vue
rename to src/views/centerRight1.vue
index de15cb9..ce07455 100644
--- a/src/views/centreRight1.vue
+++ b/src/views/centerRight1.vue
@@ -10,7 +10,7 @@
         </div>
       </div>
       <div class="d-flex jc-center body-box">
-        <dv-scroll-board :config="config" style="width:270px;height:360px" />
+        <dv-scroll-board :config="config" style="width:3.375rem;height:4.28rem" />
       </div>
     </div>
   </div>
@@ -53,21 +53,20 @@ export default {
 
 <style lang="scss">
 #centreRight1 {
-  padding: 1rem;
-  height: 410px;
-  min-width: 300px;
-  border-radius: 5px;
+  padding: 0.2rem;
+  height: 5.125rem;
+  min-width: 3.75rem;
+  border-radius: 0.0625rem;
   .bg-color-black {
-    height: 385px;
-    border-radius: 10px;
+    height: 4.8125rem;
+    border-radius: 0.125rem;
   }
   .text {
     color: #c3cbde;
   }
   .body-box {
-    border-radius: 10px;
+    border-radius: 0.125rem;
     overflow: hidden;
   }
-  
 }
 </style>
\ No newline at end of file
diff --git a/src/views/centreRight2.vue b/src/views/centerRight2.vue
similarity index 82%
rename from src/views/centreRight2.vue
rename to src/views/centerRight2.vue
index 1dba378..878c0da 100644
--- a/src/views/centreRight2.vue
+++ b/src/views/centerRight2.vue
@@ -7,8 +7,8 @@
         </span>
         <span class="fs-xl text mx-2">产品销售渠道分析</span>
       </div>
-      <div class="d-flex jc-center body-box">
-        <dv-capsule-chart :config="config" style="width: 100%;height:160px" />
+      <div class="d-flex jc-center body-box" style=" margin-top: 0;">
+        <dv-capsule-chart :config="config" style="width: 100%;height:2rem" />
         <!-- ---------------------------------------- -->
         <centreRight2Chart1></centreRight2Chart1>
       </div>
@@ -56,21 +56,20 @@ export default {
 
 <style lang="scss">
 #centreRight2 {
-  padding: 5px;
-  height: 400px;
-  min-width: 300px;
-  border-radius: 5px;
+  padding: 0.0625rem;
+  height: 5rem;
+  min-width: 3.75rem;
+  border-radius: 0.0625rem;
   .bg-color-black {
-    padding: 5px;
-    height: 405px;
-    border-radius: 10px;
+    padding: 0.0625rem;
+    height: 5.0625rem;
+    border-radius: 0.125rem;
   }
   .text {
     color: #c3cbde;
   }
   .body-box {
-    flex-direction: column;
-    border-radius: 10px;
+    border-radius: 0.125rem;
     overflow: hidden;
   }
 }
diff --git a/src/views/index.vue b/src/views/index.vue
index 88f103e..21152f5 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -4,25 +4,25 @@
       <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:5px;" />
+          <dv-decoration-10 style="width:33.3%;height:.0625rem;" />
           <div class="d-flex jc-center">
-            <dv-decoration-8 :color="['#568aea', '#000000']" style="width:200px;height:50px;" />
+            <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" />
             <div class="title">
               <span class="title-text">大数据可视化平台</span>
               <dv-decoration-6
                 class="title-bototm"
                 :reverse="true"
                 :color="['#50e3c2', '#67a1e5']"
-                style="width:250px;height:8px;"
+                style="width:3.125rem;height:.1rem;"
               />
             </div>
             <dv-decoration-8
               :reverse="true"
               :color="['#568aea', '#000000']"
-              style="width:200px;height:50px;"
+              style="width:2.5rem;height:.625rem;"
             />
           </div>
-          <dv-decoration-10 style="width:33.3%;height:5px; transform: rotateY(180deg);" />
+          <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
         </div>
 
         <!-- 第二行 -->
@@ -30,13 +30,13 @@
           <div class="d-flex" style="width: 40%">
             <div
               class="react-right ml-4"
-              style="width: 500px; text-align: left;background-color: #0f1325;"
+              style="width: 6.25rem; text-align: left;background-color: #0f1325;"
             >
               <span class="react-before"></span>
-              <span class="text fw-b">数据分析1</span>
+              <span class="text">数据分析1</span>
             </div>
             <div class="react-right ml-3" style="background-color: #0f1325;">
-              <span class="text colorBlue fw-b">数据分析2</span>
+              <span class="text colorBlue">数据分析2</span>
             </div>
           </div>
           <div style="width: 40%" class="d-flex">
@@ -45,7 +45,7 @@
             </div>
             <div
               class="react-left mr-4"
-              style="width: 500px; background-color: #0f1325; text-align: right;"
+              style="width: 6.25rem; background-color: #0f1325; text-align: right;"
             >
               <span class="react-after"></span>
               <span class="text">2020年03月16日 周一 12:00</span>
@@ -58,12 +58,12 @@
           <div class="content-box">
             <div>
               <dv-border-box-12>
-                <centreLeft1 />
+                <centerLeft1 />
               </dv-border-box-12>
             </div>
             <div>
               <dv-border-box-12>
-                <centreLeft2 />
+                <centerLeft2 />
               </dv-border-box-12>
             </div>
             <!-- 中间 -->
@@ -72,11 +72,11 @@
             </div>
             <!-- 中间 -->
             <div>
-              <centreRight2 />
+              <centerRight2 />
             </div>
             <div>
               <dv-border-box-13>
-                <centreRight1 />
+                <centerRight1 />
               </dv-border-box-13>
             </div>
           </div>
@@ -97,10 +97,10 @@
 </template>
 
 <script>
-import centreLeft1 from "./centreLeft1";
-import centreLeft2 from "./centreLeft2";
-import centreRight1 from "./centreRight1";
-import centreRight2 from "./centreRight2";
+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";
@@ -111,10 +111,10 @@ export default {
     };
   },
   components: {
-    centreLeft1,
-    centreLeft2,
-    centreRight1,
-    centreRight2,
+    centerLeft1,
+    centerLeft2,
+    centerRight1,
+    centerRight2,
     center,
     bottomLeft,
     bottomRight
@@ -132,6 +132,6 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "../assets/scss/index.scss";
 </style>
\ No newline at end of file