弹窗优化

components/dialog/confirm.vue

@@ -2,8 +2,9 @@
   <Dialog
     :visible.sync="visible"
     :show-close="false"
-    :append-to-body="false"
-    top="300px"
+    :append-to-body="true"
+    :style="style"
+    top="0px"
     custom-class="game-dialog"
     title=""
     width="542px"
@@ -28,6 +29,7 @@
 import {
   Dialog,
 } from 'element-ui'
+import { mapState } from 'vuex'
 export default {
   components: {
     Dialog,
@@ -51,6 +53,24 @@ export default {
       visible: false,
     }
   },
+  computed: {
+    ...mapState([
+      'zoom',
+    ]),
+    style() {
+      const { zoom } = this
+      const style = {
+        zoom,
+      }
+      const { innerWidth, innerHeight } = window
+      if (innerWidth / innerHeight > 1080 / 608) {
+        style.top = `120px`
+      } else {
+        style.top = `${(innerHeight / 2 - (184 * zoom)) / zoom}px`
+      }
+      return style
+    },
+  },
   methods: {
     confirm() {
       this.$emit('confirm')

layouts/default.vue

 <template>
   <div class="root">
-    <div :style="style" class="sceen">
+    <div :style="style" :class="{ margin : marginSceen }" class="sceen">
       <nuxt />
     </div>
     <!-- 背景音乐组件 -->
@@ -18,6 +18,7 @@ export default {
   data() {
     return {
       zoom: 1,
+      marginSceen: false,
     }
   },
   computed: {
@@ -41,6 +42,8 @@ export default {
     }),
     ...mapMutations([
       'SetZoom',
+      'SetInnerWidth',
+      'SetInnerHeight',
     ]),
     initSceen() {
       let zoom = 1
@@ -48,20 +51,24 @@ export default {
       if (innerWidth / innerHeight > 1080 / 608) {
         console.log('比例')
         zoom = window.innerHeight / 608
+        this.marginSceen = true
       } else {
         zoom = window.innerWidth / 1080
+        this.marginSceen = false
       }
       if (process.env.NODE_ENV === 'development') {
-        return
+        // return
       }
       this.SetZoom(zoom)
+      // this.SetInnerWidth(innerWidth)
+      // this.SetInnerHeight(innerHeight)
       this.zoom = zoom
     },
   },
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   .root{
     left: 0;
     top: 0;
@@ -78,7 +85,9 @@ export default {
     width: 1080px;
     height: 608px;
     position: relative;
-    margin-left: auto;
-    margin-right: auto;
+    &.margin {
+      margin-left: auto;
+      margin-right: auto;
+    }
   }
 </style>

store/index.js

@@ -33,6 +33,8 @@ export const state = () => ({
   deviceList: [], // 设备列表
   device: {}, // 当前设备
   zoom: 1, // 当前屏幕缩放比例
+  innerWidth: window.innerWidth,
+  innerHeight: window.innerHeight,
   appConfig: {
     project_name: '——', // 项目名称
     img_domain: '', // 图片名称
@@ -156,6 +158,12 @@ export const mutations = {
   SetZoom(state, data) {
     state.zoom = data
   },
+  SetInnerWidth(state, data) {
+    state.innerWidth = data
+  },
+  SetInnerHeight(state, data) {
+    state.innerHeight = data
+  },
 }
 
 export const actions = {