From 8b8ff4f45d3539cb891541a0a339d1f16d5e6010 Mon Sep 17 00:00:00 2001
From: dai <851733175@qq.com>
Date: Fri, 24 Jun 2022 13:27:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/pages/yantai-index.scss | 41 +++++++----------
 src/views/components/fixed1920.vue      | 59 +++++++++++++++++++++++++
 src/views/pages/yantai-index.vue        | 40 ++++++++++-------
 3 files changed, 99 insertions(+), 41 deletions(-)
 create mode 100644 src/views/components/fixed1920.vue

diff --git a/src/assets/scss/pages/yantai-index.scss b/src/assets/scss/pages/yantai-index.scss
index dba5e9bac..600eca09a 100644
--- a/src/assets/scss/pages/yantai-index.scss
+++ b/src/assets/scss/pages/yantai-index.scss
@@ -1,28 +1,19 @@
 @import "~@/assets/scss/c/config.scss";
 @import "~@/assets/scss/c/function.scss";
 
-.g-bd {
-  &::before,
-  &::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: -1;
-    content: "";
-  }
-  &::before {
-    background-image: url(~@/assets/img/yantai/index/bg.png);
-    background-size: cover;
-  }
-  &::after {
-    // background-color: rgba(38, 50, 56, 0.1);
-  }
+.g-cnt {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: url(~@/assets/img/yantai/index/bg.png);
+  background-size: cover;
+  background-position: center;
 }
 
 .m-top {
-  position: fixed;
+  position: absolute;
   top: 0;
   width: 1920px;
   left: -1000px;
@@ -46,7 +37,7 @@
 }
 
 .m-list {
-  position: fixed;
+  position: absolute;
   top: 50%;
   left: 0;
   right: 0;
@@ -59,6 +50,7 @@
     align-items: center;
     width: 100%;
     margin: 0 auto;
+
     .menu {
       position: relative;
 
@@ -126,15 +118,16 @@
     }
 
     .arrow {
+      width: 60px;
       margin: 0 20px;
     }
 
     .item {
+      position: relative;
+      margin: 0 50px;
+      width: 420px;
+
       .item-wrap {
-        position: relative;
-        width: 420px;
-        margin: 0 20px;
-        max-width: 612px;
         text-align: center;
         cursor: pointer;
         transition: all 0.2s ease;
diff --git a/src/views/components/fixed1920.vue b/src/views/components/fixed1920.vue
new file mode 100644
index 000000000..59987491c
--- /dev/null
+++ b/src/views/components/fixed1920.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="g-app">
+    <div class="g-bd" :style="bdStyle">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      clientHeight: document.documentElement.clientHeight,
+      clientWidth: document.documentElement.clientWidth,
+    };
+  },
+
+  components: {},
+  computed: {
+    bdStyle() {
+      const { clientHeight, clientWidth } = this;
+      console.log("clientHeight", clientHeight);
+      const scale = clientWidth / 1920;
+      const height = clientHeight / scale;
+      const top = (clientHeight - height) / 2;
+      const left = (clientWidth - 1920) / 2;
+      return {
+        transform: `scale(${scale})`,
+        height: `${height}px`,
+        left: `${left}px`,
+        top: `${top}px`,
+      };
+    },
+  },
+  created() {},
+  mounted() {
+    window.onresize = () => {
+      this.clientHeight = document.documentElement.clientHeight;
+      this.clientWidth = document.documentElement.clientWidth;
+    };
+  },
+
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.g-app {
+  position: absolute;
+  // width: 1920px;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.g-bd {
+  position: absolute;
+  width: 1920px;
+}
+</style>
diff --git a/src/views/pages/yantai-index.vue b/src/views/pages/yantai-index.vue
index 2f49647ef..4131f351d 100644
--- a/src/views/pages/yantai-index.vue
+++ b/src/views/pages/yantai-index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="g-app">
-    <div class="g-bd" v-if="true">
+  <fixed1920>
+    <div class="g-cnt">
       <div class="m-top animate__animated menu animate__fadeInDown">
         <img class="logo" src="@/assets/img/yantai/index/db.png" />
         <div class="name">烟台市智慧社区平台</div>
@@ -46,9 +46,7 @@
             </div>
           </div>
 
-          <div class="arrow">
-            <img src="@/assets/img/yantai/index/zuo.png" />
-          </div>
+          <img class="arrow" src="@/assets/img/yantai/index/zuo.png" />
 
           <div
             class="item animate__animated animate__pulse"
@@ -70,9 +68,7 @@
             </div>
           </div>
 
-          <div class="arrow">
-            <img src="@/assets/img/yantai/index/you.png" />
-          </div>
+          <img class="arrow" src="@/assets/img/yantai/index/you.png" />
 
           <div class="menu animate__animated menu animate__fadeInRight">
             <img
@@ -137,17 +133,12 @@
         </div>
       </div>
     </div>
-  </div>
+  </fixed1920>
 </template>
 <script>
-import Cookies from "js-cookie";
-import debounce from "lodash/debounce";
 import { messages } from "@/i18n";
-import { getUUID } from "@/utils";
-import { Loading } from "element-ui"; // 引入Loading服务
-import JSEncrypt from "jsencrypt"; //引入加密
+import fixed1920 from "@/views/components/fixed1920.vue";
 
-let loading; // 加载动画
 export default {
   data() {
     return {
@@ -156,8 +147,23 @@ export default {
       i18nMessages: messages,
     };
   },
-  components: {},
-  computed: {},
+
+  components: { fixed1920 },
+  computed: {
+    bdStyle() {
+      console.log("clientHeight", document.documentElement.clientHeight);
+      const scale = document.documentElement.clientWidth / 1920;
+      const height = document.documentElement.clientHeight / scale;
+      const top = (document.documentElement.clientHeight - height) / 2;
+      const left = (document.documentElement.clientWidth - 1920) / 2;
+      return {
+        transform: `scale(${scale})`,
+        height: `${height}px`,
+        left: `${left}px`,
+        top: `${top}px`,
+      };
+    },
+  },
   created() {},
   mounted() {},