proginn-frontend/layouts/opacity_header.vue

<template>
  <div class="container">
    <proginn-header v-if="deviceType.pc" transparent="true"/>
    <wx-header v-if="deviceType.wx"></wx-header>
    <nuxt class="main"/>
    <proginn-footer v-if="deviceType.pc"/>
  </div>
</template>

<script>
import ProginnHeader from '@/components/header'
import ProginnFooter from '@/components/footer'
import WxHeader from '@/components/wx_header'
import { mapState, mapMutations } from 'vuex'

export default {
  components: {
    ProginnHeader,
    ProginnFooter,
    WxHeader,
  },
  computed: {
    ...mapState(['isPC', 'isWeixin', 'deviceType']),
  },
  mounted() {
    this.checkTerminal()
    window.addEventListener('resize', this.checkInnerWidth)
  },
  methods: {
    ...mapMutations(['updateIsPC', 'updateIsWeixin']),
    checkTerminal() {
      this.updateIsPC({
        isPC: this.$deviceType.isPC()
      })
      this.updateIsWeixin({
        isWeixin: window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i)
      })
    },
  }
}
</script>


<style>
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main {
  min-width: 1000px;
  min-height: calc(100vh - 376px);
  margin: 20px 0 30px;
}
@media screen and (max-width: 960px) {
  .main {
    min-width: auto;
  }
}
</style>