feat: 新增居中方案

src/App.vue

@@ -1,6 +1,14 @@
 <template>
-  <div id="app">
+  <div class="app">
     <router-view />
   </div>
 </template>
 
+<style lang="scss" scoped>
+.app {
+  width: 100vw;
+  height: 100vh;
+  background-color: #000000;
+  overflow: hidden;
+}
+</style>

src/assets/scss/index.scss

@@ -1,12 +1,16 @@
 #index {
   color: #d3d6dd;
-  background-color: #000000;
-  width: 100%;
-  height: 100%;
-
+  width: 1920px;
+  height: 1080px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: left top;
   .bg {
+    width: 100%;
+    height: 100%;
     padding: 16px 16px 0 16px;
-    background-image: url("../assets/pageBg.png");
+    background-image: url('../assets/pageBg.png');
     background-size: cover;
     background-position: center center;
   }

src/utils/useDraw.ts

@@ -15,39 +15,23 @@ export default function useIndex() {
   const baseHeight = 1080
 
   // * 需保持的比例（默认1.77778）
-  const baseProportion = (baseWidth / baseHeight).toFixed(5)
+  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
 
   const calcRate = () => {
     // 当前宽高比
-    const currentRate = (window.innerWidth / window.innerHeight).toFixed(5)
-
+    const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
     if (appRef.value) {
       if (currentRate > baseProportion) {
         // 表示更宽
-        scale.width = (
-          (window.innerHeight * parseFloat(baseProportion)) /
-          baseWidth
-        ).toFixed(5)
+        scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
         scale.height = (window.innerHeight / baseHeight).toFixed(5)
-        appRef.value.style.transform = `scale(${scale.width},${scale.height})`
+        appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
       } else {
         // 表示更高
-        appRef.value.style.transform = `scale(1,1)`
+        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%)`
       }
-      // 设置比例
-      // scale.width = (window.innerHeight / baseHeight).toFixed(5)
-      // scale.height = (window.innerWidth / baseWidth).toFixed(5)
-
-      // appRef.value.style.transform = `scale(${scale.width},${scale.height})`
-      // if (currentRate > baseRate) {
-      //   // 以高为准
-      //   scale.value = (window.innerHeight / baseHeight.value).toFixed(5)
-      //   appRef.value.style.transform = 'scale(' + scale.value + ')'
-      // } else {
-      //   // 以宽为准
-      //   scale.value = (window.innerWidth / baseWidth.value).toFixed(5)
-      //   appRef.value.style.transform = 'scale(' + scale.value + ')'
-      // }
     }
   }
 

src/views/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="index" ref="appRef">
-    <dv-full-screen-container class="bg">
+    <div class="bg">
       <dv-loading v-if="loading">Loading...</dv-loading>
       <div v-else class="host-body">
         <div class="d-flex jc-center">
@@ -84,7 +84,7 @@
             </div>
             <!-- 中间 -->
             <div>
-              <centerRight2 />
+              <!-- <centerRight2 /> -->
             </div>
             <div>
               <dv-border-box-13>
@@ -104,7 +104,7 @@
           </div>
         </div>
       </div>
-    </dv-full-screen-container>
+    </div>
   </div>
 </template>