添加自适应

.env.development

@@ -24,5 +24,5 @@ VITE_GLOB_DOMAIN_URL=http://47.94.222.6:9999
 VITE_GLOB_API_URL_PREFIX=
 
 #微前端qiankun应用,命名必须以VITE_APP_SUB_开头,jeecg-app-1为子应用的项目名称,也是子应用的路由父路径
-VITE_APP_SUB_APP = [["micro-need-air", "//182.92.126.35:8099/"], ["micro-vent-3dModal", "//localhost:8093/"], ["micro-fire-front", "//localhost:8090/"]]
+VITE_APP_SUB_APP = [["micro-need-air", "//182.92.126.35:8099/"], ["micro-vent-3dModal", "//localhost:8091/"], ["micro-fire-front", "//localhost:8090/"]]
 

src/App.vue

@@ -28,8 +28,14 @@
 
   // support Multi-language
   const { getAntdLocale } = useLocale();
-  const width = ref(document.body.clientWidth);
-  const height = ref(document.body.clientHeight);
+  const width = ref(1920);
+  const height = ref(929);
+
+  const body = document.body.getBoundingClientRect();
+  if (screen.height === body.height && screen.width === body.width) {
+    height.value = 1080;
+  }
+  console.log('[ 屏幕可视高 ] >', height.value, body.height);
 
   useTitle();
 </script>

src/components/Container/src/Adaptive.vue

@@ -43,10 +43,12 @@
               //传入宽高
               width.value = ctx.options.width;
               height.value = ctx.options.height;
+              console.log('[ 屏幕可见宽高 ] >', [width.value, height.value]);
             } else {
               //可见宽高
               width.value = dom.clientWidth;
               height.value = dom.clientHeight;
+              console.log('[ 屏幕可见宽高 ] >', [width.value, height.value]);
             }
             // 获取画布尺寸
             if (!originalWidth.value || !originalHeight.value) {

src/layouts/default/content/index.vue

@@ -66,7 +66,7 @@
         const route = unref(currentRoute);
         if (!route.path.startsWith('/micro-')) {
           document.getElementsByName('body')[0];
-          debugger;
+          // debugger;
         }
       });
       onMounted(() => {

src/store/modules/user.ts

@@ -290,7 +290,7 @@ export const useUserStore = defineStore({
      * 退出询问
      */
     confirmLoginOut() {
-      debugger;
+      // debugger;
       const { createConfirm } = useMessage();
       const { t } = useI18n();
       createConfirm({

src/views/sys/login/Login.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="login-container">
+  <!-- <AdaptiveContainer :options="{ width: 1920, height: 1080 }" style="overflow-y: hidden"> -->
+  <div class="login-container" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%">
     <div class="login-bg"></div>
     <span class="-enter-x xl:hidden">
       <AppLogo :alwaysShowTitle="true" />
@@ -15,9 +16,10 @@
     </div>
     <div class="bottom"> </div>
   </div>
+  <!-- </AdaptiveContainer> -->
 </template>
 <script lang="ts" setup>
-  import { computed } from 'vue';
+  import { computed, ref } from 'vue';
   import { AppLogo } from '/@/components/Application';
   import LoginForm from './LoginForm.vue';
   import { useGlobSetting } from '/@/hooks/setting';
@@ -25,12 +27,14 @@
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useLocaleStore } from '/@/store/modules/locale';
   import { useLoginState } from './useLogin';
+
+  import AdaptiveContainer from '/@/components/Container/src/Adaptive.vue';
+
   defineProps({
     sessionTimeout: {
       type: Boolean,
     },
   });
-
   const globSetting = useGlobSetting();
   const { prefixCls } = useDesign('login');
   const { t } = useI18n();
@@ -81,7 +85,7 @@
 
   .login-container {
     width: 100vw;
-    height: 100vh;
+    height: 100%;
     background: linear-gradient(to bottom, #000c37, #001e63);
     padding: 0 !important;
     position: relative;
@@ -147,11 +151,12 @@
 
     .center {
       width: 100%;
-      height: calc(100vh - 520px);
+      height: calc(100% - 540px);
       display: flex;
-      left: 0px;
       flex-direction: column;
       align-items: center;
+      position: relative;
+      justify-content: center;
     }
   }
 

src/views/sys/login/LoginForm.vue

@@ -191,8 +191,8 @@
     }
     .btn-box {
       width: 100%;
-      position: fixed;
-      bottom: 100px;
+      position: relative;
+      top: 40px;
       left: 0px;
       display: flex;
       justify-content: center;

src/views/system/notice/DetailModal.vue

@@ -27,7 +27,7 @@
       return;
     }
     const document = iframe.ownerDocument;
-    debugger;
+    // debugger;
     document.body.style.backgroundColor = '#ffffff00';
 
     // iframe.style.height = `${clientHeight}px`;