4dkankan_official/src/App.vue

<template>
  <div id="app">
    <div class="big-nav">
      <iheader>
        <inavs slot-scope="{cp, split}" :cp="cp" :split="split"/>
      </iheader>
    </div>
    <div class="mask" :class="{active: showMask}" :style="{zIndex: maskZIndex}"></div>
    <!-- <ichat /> -->
    <router-view/>
    <ifooter v-if="$route.name!=='about'" />
  </div>
</template>

<script>
import '@/assets/style/reset.scss'
import '@/assets/style/public.scss'
import '@/assets/imgfont/iconfont.css'
import '@/assets/font/iconfont.css'
import header from '@/page/layout/header'
import footer from '@/page/layout/footer'
import login from '@/page/layout/login'
import navs from '@/page/navs'
import chat from '@/page/chat'

export default {
  name: 'App',
  data () {
    return {
      maskZIndex: -1,
      showMask: false
    }
  },
  components: {
    iheader: header,
    ifooter: footer,
    ilogin: login,
    inavs: navs,
    ichat: chat
  },
  mounted () {
    this.$bus.$on('showMask', () => {
      clearTimeout(this.timeout)
      this.maskZIndex = 3
      this.showMask = true
    })

    this.$bus.$on('hideMask', () => {
      clearTimeout(this.timeout)
      this.showMask = false
      this.timeout = setTimeout(() => {
        this.maskZIndex = -1
      }, 700)
    })
  }
}
</script>

<style lang="scss" scoped>
#app {
  padding-top: 68px;
}

.big-nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 999;
}

.mask {
  z-index: -1;
  display: block;
  background-color: rgba(0,0,0,0);
  transition: background-color .7s cubic-bezier(.77,0,.175,1);
}

.mask.active {
  background-color: rgba(0,0,0,0.4);
}
</style>