弹窗兼容

.gitignore

@@ -88,3 +88,5 @@ sw.*
 
 # Vim swap files
 *.swp
+
+/pages/test/*

components/common/header/index.vue

@@ -174,7 +174,7 @@ export default {
 .header {
   height: 80px;
   position: relative;
-  z-index: 1;
+  z-index: 100;
 }
 .left-block {
   position: absolute;

components/dialog/confirm.vue

 <template>
   <Dialog
-    :visible.sync="visible"
-    :show-close="false"
-    :append-to-body="true"
-    :style="style"
-    top="0px"
-    custom-class="game-dialog"
-    title=""
+    ref="dialog"
     width="542px"
-    modal-append-to-body
   >
     <div class="bg"/>
     <div class="content">
@@ -26,9 +19,7 @@
 </template>
 
 <script>
-import {
-  Dialog,
-} from 'element-ui'
+import Dialog from '@/components/dialog/index'
 import { mapState } from 'vuex'
 export default {
   components: {
@@ -57,18 +48,14 @@ export default {
     ...mapState([
       'zoom',
     ]),
-    style() {
-      const { zoom } = this
-      const style = {
-        zoom,
-      }
-      const { innerWidth, innerHeight } = window
-      if (innerWidth / innerHeight > 1080 / 608) {
-        style.top = `120px`
+  },
+  watch: {
+    visible(value) {
+      if (value) {
+        this.$refs.dialog.show()
       } else {
-        style.top = `${(innerHeight / 2 - (184 * zoom)) / zoom}px`
+        this.$refs.dialog.close()
       }
-      return style
     },
   },
   methods: {
@@ -77,7 +64,6 @@ export default {
       this.visible = false
     },
     show() {
-      console.log('show')
       this.visible = true
     },
   },

components/dialog/index.vue

+<template>
+  <div v-show="visible" class="dialog-layout" >
+    <div class="mark"/>
+    <div class="dlalog">
+      <slot/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+  },
+  data() {
+    return {
+      visible: false,
+    }
+  },
+  methods: {
+    show() {
+      this.visible = true
+    },
+    close() {
+      this.visible = false
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+.dialog-layout {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  .mark {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: black;
+    opacity: 0.3;
+  }
+
+  .dlalog {
+    width: 620px;
+    height: 350px;
+    position: relative;
+  }
+}
+
+</style>