横竖屏检测

src/page/Home/App.vue

@@ -19,7 +19,7 @@ import MyPrize from "@/components/MyPrize";
 import Draw from "@/components/Draw";
 import Result from "@/components/Result";
 import Rule from "@/components/Rule";
-import { createBGM, getQueryString } from "@/plugins";
+import { createBGM, getQueryString, screenOrientation } from "@/plugins";
 import { authorize, getUserInfo } from "@/api";
 import { Toast } from "vant";
 import { useMainStore } from "@/store";
@@ -77,7 +77,7 @@ const drawFn = (item) => {
   }
 };
 
-const showResult = ref(true);
+const showResult = ref(false);
 const resultFn = (item) => {
   if (item.action == "hide") {
     showResult.value = false;
@@ -95,6 +95,9 @@ const ruleFn = (item) => {
 };
 
 onMounted(() => {
+  fontAdpat(); //字体适配
+  screenOrientation(); //横竖屏检测
+
   let code = getQueryString("code");
   let url = import.meta.env.VITE_URL;
   console.log("code:", code);
@@ -178,8 +181,6 @@ onMounted(() => {
   } else {
     showLoad.value = true;
   }
-
-  fontAdpat();
 });
 
 // 字体适配
@@ -233,4 +234,22 @@ const fontAdpat = () => {
   overflow: hidden;
   margin: 0 auto;
 }
+
+.orientationPop {
+  @include fixed();
+  @include flexCen();
+  background-color: rgba($color: #000000, $alpha: 1);
+  visibility: hidden;
+}
+
+.orientation-icon {
+  @include box(60px, 60px);
+  @include bg_pos("orientation-icon.png");
+  margin-bottom: 20px;
+}
+.orientation-text {
+  color: #fff;
+  font-size: 30px;
+  margin-top: 10px;
+}
 </style>