添加提示

src/App.tsx

@@ -7,6 +7,9 @@ import { lighten } from './utils';
 import RouterError from './components/RouterError';
 import { useRegisterSW } from 'virtual:pwa-register/vue';
 import { useUserStore } from './store/modules/users';
+import { modalClickMask } from './state';
+import ScreenTips from './screen-tips';
+import { debounce } from 'lodash';
 export function unregister() {
   if ('serviceWorker' in navigator) {
     // console.log('unregister - pwa');
@@ -38,6 +41,7 @@ export default defineComponent({
   name: 'App',
   setup() {
     const isIOSChrome = ref();
+    const showModalMask = ref(false)
     const getThemeOverrides = computed(() => {
       const appTheme = setting.appTheme;
       const lightenStr = lighten(setting.appTheme, 6);
@@ -170,6 +174,18 @@ export default defineComponent({
       }
     };
 
+    const resize = () => {
+      const params = {
+        width: document.body.clientWidth,
+        height: document.body.clientHeight
+      }
+      if(params.height >= params.width) {
+        showModalMask.value = true;
+      } else {
+        showModalMask.value = false
+      }
+    }
+
     onMounted(() => {
       window.addEventListener('message', handleOpen);
 
@@ -218,8 +234,14 @@ export default defineComponent({
           }
         });
       }
+
+
+      window.addEventListener('resize', debounce(resize, 80));
+      // 横竖屏切换时
+      resize()
     });
     onUnmounted(() => {
+      window.removeEventListener('resize', resize);
       window.removeEventListener('message', handleOpen);
     });
 
@@ -237,7 +259,14 @@ export default defineComponent({
             <RouterView />
             <RouterError />
           </AppProvider>
+
+          
         </NConfigProvider>
+        <NModal
+          maskClosable={modalClickMask}
+          v-model:show={showModalMask.value}>
+          <ScreenTips />
+        </NModal>
         {/* <NModal
           show={showModal.value}
           closeOnEsc={false}

src/screen-tips/index.module.less

@@ -0,0 +1,52 @@
+.commonWork {
+    width: 560px;
+    background: #FFFFFF;
+    border-radius: 24px;
+    position: relative;
+    padding: 0 30px 35px;
+  
+    .downMoveBg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 560px;
+      height: 121px;
+    }
+  
+    .dingPng {
+      width: 162px;
+      height: 98px;
+      position: absolute;
+      left: 50%;
+      margin-left: -81px;
+      top: -49px;
+      z-index: 100;
+    }
+  
+    h2 {
+      margin-top: 74px;
+      height: 33px;
+      font-size: max(24px, 18Px);
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #000000;
+      line-height: 33px;
+      text-align: center;
+      margin-bottom: 15px;
+    }
+  
+  
+    .header {
+      text-align: center;
+      padding: 25px 0 50px;
+      font-weight: 400;
+      font-size: max(18px, 14Px);
+      color: #777777;
+      line-height: max(30px, 18Px);
+
+      span {
+        color: #2784FF;
+      }
+    }
+  
+  }

src/screen-tips/index.tsx

@@ -0,0 +1,23 @@
+import { defineComponent } from 'vue';
+import styles from './index.module.less';
+import commentBg from './images/tip-bg.png';
+import commentTop from './images/tip-dang.png';
+
+export default defineComponent({
+  name: 'screen-tips',
+  setup() {
+
+
+    return () => (
+      <div class={styles.commonWork}>
+        <img src={commentTop} class={styles.dingPng} alt="" />
+        <img src={commentBg} class={styles.downMoveBg} alt="" />
+        <h2>温馨提示</h2>
+        
+        <div class={styles.header}>
+          为了更好的上课体验，请切换到<span>横屏模式</span>
+        </div>
+      </div>
+    );
+  }
+});

vite.config.ts

@@ -169,7 +169,7 @@ export default defineConfig(() => {
     },
     server: {
       host: '0.0.0.0',
-      port: 5002,
+      port: 5005,
       strictPort: true,
       cors: true,
       https: false,