强制横屏浏览；结尾二维码

package.json

@@ -16,6 +16,7 @@
     "element-plus": "^2.4.3",
     "lodash": "^4.17.21",
     "mitt": "^3.0.0",
+    "qrcode": "^1.5.3",
     "swiper": "^10.0.4",
     "v-viewer": "^3.0.11",
     "viewerjs": "^1.11.6",

src/App.vue

@@ -1,5 +1,20 @@
 <template>
-  <router-view />
+  <div class="app-root">
+    <router-view />
+    <Teleport to="body">
+      <div class="screen-rotate-tip">
+        <div class="inner-wrapper">
+          <img
+            class=""
+            src="@/assets/images/tip-screen-rotate.png"
+            alt=""
+            draggable="false"
+          >
+          <span>请横屏浏览</span>
+        </div>
+      </div>
+    </Teleport>
+  </div>
 </template>
 
 <script setup>
@@ -146,4 +161,51 @@ const store = useStore()
 // .viewer-backdrop {
 //   background-color: rgba(0, 0, 0, 90%) !important;
 // }
+
+.screen-rotate-tip {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  display: none;
+  z-index: 100;
+  @media (max-aspect-ratio: 1/1) {
+    display: initial;
+  }
+  >.inner-wrapper {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 126px;
+    height: 126px;
+    >img {
+      width: 100%;
+      height: 100%;
+    }
+    >span {
+      position: absolute;
+      left: 50%;
+      bottom: -8px;
+      transform: translate(-50%, 100%);
+      font-size: 16px;
+      font-family: Source Han Sans-Regular, Source Han Sans;
+      font-weight: 400;
+      color: #FFFFFF;
+      white-space: pre;
+    }
+  }
+}
+</style>
+
+<style lang="less" scoped>
+.app-root{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
 </style>

src/views/EpilogueView.vue

@@ -31,11 +31,11 @@
       <div class="qr-code">
         <img
           class="qr-code"
-          src="@/assets/images/qr-code.png"
+          :src="imageUrl"
           alt=""
           draggable="false"
         >
-        <span>扫码体验小程序</span>
+        <!-- <span>扫码体验小程序</span> -->
       </div>
     </div>
   </div>
@@ -45,6 +45,7 @@
 import { ref, computed, watch, onMounted } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
+import QRCode from 'qrcode'
 
 const route = useRoute()
 const router = useRouter()
@@ -52,6 +53,10 @@ const store = useStore()
 
 const isShowVideo = ref(true)
 
+const imageUrl = ref('')
+QRCode.toDataURL(`${location.origin}${process.env.BASE_URL || '/'}index.html#/`).then((url) => {
+  imageUrl.value = url
+})
 </script>
 
 <style lang="less" scoped>