fix: 修改项目适配方案，使用scale缩放进行适配

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>
+</style>