横竖屏检测

src/components/Index.vue

@@ -81,7 +81,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="IndexPage">
+  <div class="IndexPage" @touchmove.prevent>
     <div class="index-bg">
       <div class="index-clock-box">
         <div class="index-clock-h"></div>

src/data/imgList.js

@@ -21,6 +21,8 @@ const page = [
     'prize/no-prize.png',
     'music-on.png',
     'music-off.png',
+    'orientation-icon.png',
+    'share.jpg',
     'index/title.png',
     'index/start-btn.png',
     'index/rule-btn.png',
@@ -55,7 +57,7 @@ const page = [
     'rule/cls-btn.png',
     'rule/caidai.png',
     'rule/arrow.png',
-    
+
 ]
 
 // 处理为vite引入图片格式

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>

src/plugins/index.js

@@ -433,7 +433,7 @@ export function mostValue(arr) {
 
 
 // 海报生成
-export function posterCreate(option, imageArr, textArr, theme,eqcode) {
+export function posterCreate(option, imageArr, textArr, theme, eqcode) {
     let posterUrl = ''
     const { width, height } = option
     Toast.loading({
@@ -470,8 +470,8 @@ export function posterCreate(option, imageArr, textArr, theme,eqcode) {
             imgList.map((item, index) => {
                 // console.log('item',imageArr[index]);
                 if (imageArr[index].name != 'eqcode') {
-                ctx.drawImage(item, imageArr[index].pos.x, imageArr[index].pos.y, imageArr[index].pos.w, imageArr[index].pos.h); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
-                    
+                    ctx.drawImage(item, imageArr[index].pos.x, imageArr[index].pos.y, imageArr[index].pos.w, imageArr[index].pos.h); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
+
                 }
             })
 
@@ -500,7 +500,7 @@ export function posterCreate(option, imageArr, textArr, theme,eqcode) {
                 ctx.fillText(textArr[index].content, x, y); //绘制文字
             })
 
-            
+
 
 
             //海报绘制完 ，转成图片对象
@@ -518,4 +518,62 @@ export function posterCreate(option, imageArr, textArr, theme,eqcode) {
         })
 
     return posterUrl
+}
+
+
+// 横竖屏检测
+export function screenOrientation() {
+    const orientationPopNode = createVNode(
+        'div',
+        {
+            class: 'orientationPop',
+        },
+        [
+            createVNode(
+                'div',
+                {
+                    class: 'orientation-icon',
+                },
+            ),
+            createVNode(
+                'div',
+                {
+                    class: 'orientation-text',
+                },
+                '为了您的良好体验'
+            ),
+            createVNode(
+                'div',
+                {
+                    class: 'orientation-text',
+                },
+                '请将手机竖屏操作'
+            )
+        ]
+    )
+    const orientationIconNode = createVNode(
+        'div',
+        {
+            class: 'orientation-icon',
+        },
+        [createVNode('span', {}, '为了您的良好体验')]
+    )
+
+    render(orientationPopNode, document.querySelector('.home'));
+
+
+    window.addEventListener(
+        "onorientationchange" in window ? "orientationchange" : "resize",
+        function () {
+            if (window.orientation === 180 || window.orientation === 0) {
+                // 竖屏
+                gsap.to('.orientationPop', { autoAlpha: 0 })
+            }
+            if (window.orientation === 90 || window.orientation === -90) {
+                // 横屏
+                gsap.to('.orientationPop', { autoAlpha: 1 })
+            }
+        },
+        false
+    );
 }