4dkankan_official/src/App.vue

<template>
  <div id="app">
    <div class="big-nav">
      <iheader />
      <inavs />
    </div>
    <div class="mask" :class="{active: cp}" :style="{zIndex: maskZIndex}"></div>
    <!-- <ichat /> -->
    <router-view/>
    <ifooter />
  </div>
</template>

<script>
import {mapState} from 'vuex'
import '@/assets/style/reset.scss'
import '@/assets/style/public.scss'
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
    }
  },
  components: {
    iheader: header,
    ifooter: footer,
    ilogin: login,
    inavs: navs,
    ichat: chat
  },
  computed: {
    ...mapState({
      cp: state => state.ui.nav
    })
  },
  watch: {
    cp (newVal) {
      clearTimeout(this.timeout)
      if (newVal) {
        this.maskZIndex = 3
      } else {
        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: 4;
}

.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>