proginn-frontend/layouts/opacity_header.vue

<template>
  <div class="container" id="markIsAppWebview" :data-app="deviceType.app" :class="scope ? ['scoped-view', scope] : []">
    <proginn-header v-if="deviceType.pc" transparent="true" />
    <wx-header v-else-if="!deviceType.app"></wx-header>
    <nuxt class="main" />
    <proginn-footer v-if="deviceType.pc && !noneCommonFooter" />
  </div>
</template>

<script>
import ProginnHeader from "@/components/header";
import ProginnFooter from "@/components/footer";
import WxHeader from "@/components/wx_header";
import { mapState, mapMutations } from "vuex";
import Stats from "@/mixins/stats";

export default {
  components: {
    ProginnHeader,
    ProginnFooter,
    WxHeader
  },
  mixins: [Stats],
  computed: {
    ...mapState(["isPC", "isWeixin", "deviceType", "noneCommonFooter", "scope"])
  },
  mounted() {
    // console.log("this****", this);
    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;
}
.__nuxt-error-page .title {
  font-size: 100%;
}
@media screen and (max-width: 960px) {
  .main {
    min-width: auto;
  }
}
</style>