feat: 新增屏幕适配

src/App.vue

@@ -8,7 +8,7 @@
 .app {
   width: 100vw;
   height: 100vh;
-  // background-color: #000000;
+  background-color: #020308;
   overflow: hidden;
 }
 </style>

src/assets/scss/index.scss

@@ -2,10 +2,10 @@
   color: #d3d6dd;
   width: 1920px;
   height: 1080px;
-  // position: absolute;
-  // top: 50%;
-  // left: 50%;
-  // transform: translate(-50%, -50%);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   transform-origin: left top;
   .bg {
     width: 100%;

src/utils/useDraw.ts

@@ -24,14 +24,12 @@ export default function useIndex() {
         // 表示更宽
         scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
         scale.height = (window.innerHeight / baseHeight).toFixed(5)
-        // appRef.value.style.transform = `scale(${scale.width}, ${scale.height} translate(-50%, -50%)`
-        appRef.value.style.transform = `scale(${scale.width}, ${scale.height}`
+        appRef.value.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.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
-        appRef.value.style.transform = `scale(${scale.width}, ${scale.height})`
+        appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
       }
     }
   }

src/views/index/index.vue

@@ -29,15 +29,15 @@
           <div class="d-flex aside-width">
             <div class="react-left ml-4 react-l-s">
               <span class="react-before"></span>
-              <span class="text">{{subtitle[0]}}</span>
+              <span class="text">{{ subtitle[0] }}</span>
             </div>
-            <div class="react-left ml-3" >
-              <span class="text">{{subtitle[1]}}</span>
+            <div class="react-left ml-3">
+              <span class="text">{{ subtitle[1] }}</span>
             </div>
           </div>
           <div class="d-flex aside-width">
             <div class="react-right bg-color-blue mr-3">
-              <span class="text fw-b">{{subtitle[2]}}</span>
+              <span class="text fw-b">{{ subtitle[2] }}</span>
             </div>
             <div class="react-right mr-4 react-l-s">
               <span class="react-after"></span>
@@ -93,18 +93,24 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, reactive, onMounted, onBeforeUnmount } from 'vue'
+import {
+  defineComponent,
+  ref,
+  reactive,
+  onMounted,
+  onBeforeUnmount,
+} from 'vue'
 import { formatTime } from '@/utils/index'
 import { WEEK } from '@/constant/index'
 import useIndex from '@/utils/useDraw'
 import { title, subtitle, moduleInfo } from '@/constant/index'
-import CenterLeft1 from "../centerLeft1/index.vue";
-import CenterLeft2 from "../centerLeft2/index.vue";
-import Center from "../center/index.vue";
-import CenterRight1 from "../centerRight1/index.vue";
-import CenterRight2 from "../centerRight2/index.vue";
-import BottomLeft from "../bottomLeft/index.vue";
-import BottomRight from "../bottomRight/index.vue";
+import CenterLeft1 from '../centerLeft1/index.vue'
+import CenterLeft2 from '../centerLeft2/index.vue'
+import Center from '../center/index.vue'
+import CenterRight1 from '../centerRight1/index.vue'
+import CenterRight2 from '../centerRight2/index.vue'
+import BottomLeft from '../bottomLeft/index.vue'
+import BottomRight from '../bottomRight/index.vue'
 
 export default defineComponent({
   components: {
@@ -124,7 +130,7 @@ export default defineComponent({
       setInterval: 0,
       dateDay: '',
       dateYear: '',
-      dateWeek: '',
+      dateWeek: ''
     })
     // * 适配处理
     const { appRef, calcRate, windowDraw } = useIndex()
@@ -160,8 +166,15 @@ export default defineComponent({
     }
 
     // return
-    return { loading, timeInfo, appRef, title, subtitle, moduleInfo }
-  },
+    return {
+      loading,
+      timeInfo,
+      appRef,
+      title,
+      subtitle,
+      moduleInfo
+    }
+  }
 })
 </script>