feats

public/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
-    <title>华侨城</title>
+    <title>抽取幸运签，解锁隐藏福利</title>
     <style>
       .page-loading-wrapper {
         position: absolute;

src/components/Modal.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="modal-wrapper" v-show="show">
+    <div class="modal" :style="modalStyle" @click.stop="handleMaskClick">
+      <fire-flies v-if="showFireflies"></fire-flies>
+      <div class="back-btn" v-if="showBack" @click.stop="$emit('close')">
+        <img src="~@/assets/buttonImg/backImg.png" alt="">
+      </div>
+      <div class="modal-body"><slot></slot></div>
+      <slot name="action"></slot>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Modal',
+  components: {
+    FireFlies: () => import('@/components/FireFlies')
+  },
+  props: {
+    show: Boolean,
+    mask: {
+      type: Boolean,
+      default: true,
+    },
+    maskClickCloseable: {
+      type: Boolean,
+      default: true,
+    },
+    showBack: Boolean,
+    showFireflies: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    modalStyle() {
+      return {
+        background: 'rgba(0, 0, 0, 0.6)'
+      }
+    }
+  },
+  methods: {
+    handleMaskClick() {
+      if (this.maskClickCloseable) {
+        this.$emit('close')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.modal-wrapper {
+  position: fixed;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  z-index: 999;
+
+  .modal {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .back-btn {
+      position: absolute;
+      top: 4em;
+      left: 1.5em;
+      width: 4em;
+
+      & > img {
+        width: 100%;
+      }
+    }
+
+    .modal-body {
+      position: relative;
+      z-index: 100;
+    }
+  }
+}
+</style>

src/main.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
+import Modal from '@/components/Modal.vue'
 import App from './App.vue'
-
 import router from './router/index'//路由
 
 import { redirect } from './utils/wx'
@@ -8,6 +8,8 @@ redirect()
 
 Vue.config.productionTip = false
 
+Vue.component('modal', Modal)
+
 const app = new Vue({
   router,
   render: h => h(App),

src/pages/Honghe.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="index-box">
+    <modal :show="true" :show-back="true" >      
+    </modal>
     <bg-music />
     <popup
       :show="showPopup"