proginn-frontend/layouts/default.vue

<template>
  <div class="container" id="markIsAppWebview" :data-app="deviceType.app">
    <proginn-header v-if="deviceType.pc" />
    <wx-header v-if="deviceType.wx"></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";

export default {
  components: {
    ProginnHeader,
    ProginnFooter,
    WxHeader
  },
  computed: {
    ...mapState(["isPC", "isWeixin", "deviceType", "noneCommonFooter"])
  },
  mounted() {
    this.checkTerminal();
    window.addEventListener("resize", this.checkInnerWidth);
    // 修改密码处理
    if (
      this.$route.path.includes("/setting/check/change_mobile") ||
      this.$route.path.includes("/setting/check/real_info")
    ) {
      // 如果上页不是验证码页面，则认为是复制地址过来，强制踢出
      if (
        localStorage.getItem("proginn-history") !== "/setting/check/old_mobile"
      ) {
        this.$message("请验证旧手机号。");
        setTimeout(() => {
          this.$router.replace("/setting/check/old_mobile");
        }, 1500);
      }
    } else {
      localStorage.removeItem("proginn-history");
    }
  },
  methods: {
    ...mapMutations(["updateIsPC", "updateIsWeixin"]),
    checkTerminal() {
      this.updateIsPC({
        isPC: window.innerWidth > 960
      });
      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>