强制横屏、竖屏

src/App.vue

@@ -4,22 +4,67 @@
     <Transition name="toast-transition">
       <ToastComp v-if="isShowToast" />
     </Transition>
+    <div
+      v-if="windowOrientation === 'portrait' && route.meta.windowOrientation === 'landscape'"
+      class="force-landscape window-orientation-tip"
+    >
+      <div class="wrap">
+        <img
+          class=""
+          src="@/assets/images/force-landscape.png"
+          alt=""
+          draggable="false"
+        >
+        <div class="txt">
+          请开启自动旋转后
+        </div>
+        <div class="txt">
+          横屏播放
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="windowOrientation === 'landscape' && route.meta.windowOrientation === 'portrait'"
+      class="force-portrait window-orientation-tip"
+    >
+      <div class="wrap">
+        <img
+          class=""
+          src="@/assets/images/force-portrait.png"
+          alt=""
+          draggable="false"
+        >
+        <div class="txt">
+          请竖屏播放
+        </div>
+      </div>
+    </div>
   </teleport>
 </template>
 
 <script setup>
-// import { onClickOutside } from '@vueuse/core'
+import { useWindowSize } from '@vueuse/core'
 import { computed, inject, ref } from 'vue'
 import ToastComp from "@/components/ToastComp.vue"
 import { isShowToast } from "@/store/index.js"
+import { useRoute, useRouter } from "vue-router"
+
+const route = useRoute()
+const router = useRouter()
 
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
 } = useSizeAdapt()
 
-inject('$uaInfo')
-inject('$env')
+// inject('$uaInfo')
+// inject('$env')
+
+const { width: windowWidth, height: windowHeight } = useWindowSize()
+console.log(windowWidth)
+const windowOrientation = computed(() => {
+  return windowWidth.value >= windowHeight.value ? 'landscape' : 'portrait'
+})
 </script>
 
 <style lang="less">
@@ -126,4 +171,36 @@ input, textarea {
 // .viewer-backdrop {
 //   background-color: rgba(0, 0, 0, 90%) !important;
 // }
+</style>
+
+<style lang="less" scoped>
+.window-orientation-tip{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  background: rgba(0,0,0,0.7);
+  backdrop-filter: blur(calc(90 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  >.wrap{
+    text-align: center;
+    >img{
+      width: calc(113 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(113 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      margin-bottom: calc(39 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+    >.txt{
+      font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+      font-weight: 400;
+      color: rgba(255,255,255,0.7);
+      line-height: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      letter-spacing: calc(1 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+  }
+}
 </style>

src/router/index.js

@@ -16,26 +16,41 @@ const routes = [
     path: '/home',
     name: 'HomeView',
     component: HomeView,
+    meta: {
+      windowOrientation: 'landscape',
+    }
   },
   {
     path: '/entry-list',
     name: 'EntryList',
     component: EntryList,
+    meta: {
+      windowOrientation: 'landscape',
+    }
   },
   {
     path: '/common-draw-list',
     name: 'CommonDrawList',
     component: CommonDrawList,
+    meta: {
+      windowOrientation: 'landscape',
+    }
   },
   {
     path: '/start',
     name: 'StartView',
     component: StartView,
+    meta: {
+      windowOrientation: 'portrait',
+    }
   },
   {
     path: '/draw',
     name: 'DrawView',
     component: DrawView,
+    meta: {
+      windowOrientation: 'portrait',
+    }
   },
 ]