From 2ab7f2daab1e0d70f9d1355d92db7582855b3c17 Mon Sep 17 00:00:00 2001
From: Andy Leong <andyleong007@gmail.com>
Date: Mon, 22 Jan 2024 23:51:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A8=AA=E7=AB=96=E5=B1=8F=E6=A3=80=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/orientation-icon.png | Bin 0 -> 951 bytes
 src/components/Index.vue               |   2 +-
 src/data/imgList.js                    |   4 +-
 src/page/Home/App.vue                  |  27 ++++++++--
 src/plugins/index.js                   |  66 +++++++++++++++++++++++--
 5 files changed, 89 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/images/orientation-icon.png

diff --git a/src/assets/images/orientation-icon.png b/src/assets/images/orientation-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..6722105e4dd7e429ccb4b97b7160ab94766f6fa1
GIT binary patch
literal 951
zcmeAS@N?(olHy`uVBq!ia0vp^HXzKw3=&b&bO2H-0(?STf%N~O0F<xW<^tVnUJ~RN
z%<z4}?22E`!q?l1Gm<T*-Z>!f>GjhGn^)!s*o!sPC~#dqx^_vYmxdJU+3gFXLrrvf
zcju~f>-#8kCvIk7U~2btaSZV|K6hGX^CAPDwq}hp3sxvRU@Y1pS8@OL|NrO9j?0O7
zYoGbe$;9tD+l28+7c;M7zVwTUyuG3dYUMQsvkyvXz4X7sBDZjp)vslCHttQozJ9!&
zH-q=ozgXs3C%1{+`Lz2&$n<y9F6#bRlDS3V{PI0VC4#D^Yh1j^u-|Nh_rv8aaVu`H
zCq;ew7NdS`=bX2}K`{>x9=$fT=c?eO%j&%8Ik9KAahOPjy7F!2yT|J;x|ua0^pd&I
z1f^&9&ihWkQxh&@b~a>V(5;Vg+uG--&I-Bc{^r)iO<q=_z8?g<_utssu|9TAUyxA6
z{zdQ2(m%&fQ!g*DIkqZu^LwuOuLHvZcKcL!WN`R+M@h@SU{2aKrT9JLiVW`O^G>lf
z{NVY&wZim7fUiHpJJuQ&b!QFljP){y-S6A7-Tx59+^~PiR__-pKHPO$Q&hHu?Nf+v
zy|}8&?wfK(HHNLG#w%aSS=jB{C3N1y`tU}%wRaz`ndtJK^U-XBw^zDqyv;LsPA^K3
zSnK^l>~y}g{{2VMcSTla&XwK$I7wpaskdJymVH>mvZ}bUZS9na(p#Q)8{4q;y=z`^
zqdNbml~$L#Z@xjdnUnqHWU<*Te6^E26NUH4IQX`wlq|E%mz{Js=(3vZ?!=>Fzbx}F
z-D~gq+^QSjl6vaMLhI_q`kIL!rwGo<d#<@$Kl&Kgu1D%Sd;COnZv5Hbw&R__;x(^!
zym9<+_Q>X>2air{+Zv@~!5n1U>0unUYOD9Xou98w_P@EBlWVQOwCcxePf9Gm$h0-5
z%8cD@<r3c2>FOUmXHQxC{x{3lqe&@JthtYS_}{&+f45a(o$q?f=Z|>u`*vS&`9AIZ
tVLOv6RhyEJrXJK6vFmlV&RRX`8~>w)e*{<l5C^4d22WQ%mvv4FO#rCV57Gbt

literal 0
HcmV?d00001

diff --git a/src/components/Index.vue b/src/components/Index.vue
index 2afc3ae..236a6cd 100644
--- a/src/components/Index.vue
+++ b/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>
diff --git a/src/data/imgList.js b/src/data/imgList.js
index e64259f..f46c1ed 100644
--- a/src/data/imgList.js
+++ b/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引入图片格式
diff --git a/src/page/Home/App.vue b/src/page/Home/App.vue
index 0684125..1b5c9d3 100644
--- a/src/page/Home/App.vue
+++ b/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>
diff --git a/src/plugins/index.js b/src/plugins/index.js
index 6c4a3e7..b545a74 100644
--- a/src/plugins/index.js
+++ b/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
+    );
 }
\ No newline at end of file