From fddc03dee32d8eaa00417f01292fa265a609e021 Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Fri, 1 Sep 2023 09:50:40 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=BA=E5=88=B6=E6=A8=AA=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html              |  4 ++++
 src/assets/css/reset.css       |  1 -
 src/components/common/Home.vue | 43 ++++++++++++++++++++++++++++++++++
 3 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 872933a..6367340 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,10 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
     <title>视频监控可视化平台</title>
diff --git a/src/assets/css/reset.css b/src/assets/css/reset.css
index c668331..474f731 100644
--- a/src/assets/css/reset.css
+++ b/src/assets/css/reset.css
@@ -9,7 +9,6 @@ body,
 .wrapper {
   width: 100%;
   height: 100%;
-  overflow: hidden;
 }
 
 body {
diff --git a/src/components/common/Home.vue b/src/components/common/Home.vue
index 5465150..26c3fb0 100644
--- a/src/components/common/Home.vue
+++ b/src/components/common/Home.vue
@@ -24,6 +24,32 @@ export default {
   components: {
     vHead,
   },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.forceLandscapeScreenHandle();
+
+      // 这里监控
+      this.onWindowSizeChanged();
+    },
+
+    forceLandscapeScreenHandle() {
+      const body = document.getElementsByTagName("body")[0];
+      const html = document.getElementsByTagName("html")[0];
+      const width = html.clientWidth;
+      const height = html.clientHeight;
+      const max = width > height ? width : height;
+      const min = width > height ? height : width;
+      body.style.width = max + "px";
+      body.style.height = min + "px";
+    },
+
+    onWindowSizeChanged() {
+      window.addEventListener("resize", this.forceLandscapeScreenHandle);
+    },
+  },
   created() {},
 };
 </script>
@@ -46,6 +72,23 @@ export default {
     box-sizing: border-box;
   }
 }
+
+@media screen and (orientation: portrait) {
+  /*竖屏样式*/
+  #app {
+    transform-origin: 0 0;
+    transform: rotateZ(90deg) translateY(-100%);
+  }
+}
+
+// @media screen and (orientation: landscape) {
+//   /*这是横屏模式，所以您需要做一些不一样的事情*/
+//   #app {
+//     // position : absolute ;
+//     transform: rotate(0deg);
+//     transform-origin: 0% 0%;
+//   }
+// }
 @media (max-width: 900px) {
   .greenStyle .header {
     // background: #000;