proginn-frontend/layouts/default.vue

<template>
  <div class="container" :class="{
    'ma-container-mobile':!deviceType.pc
  }" id="markIsAppWebview" :data-app="deviceType.app">
    <proginn-header v-if="deviceType.pc"/>
    <wx-header v-else-if="!deviceType.app && (deviceType.android || deviceType.ios) && !isWeixinApp"></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
    },
    data() {
      return {
        isWeixinApp: true
      }
    },
    mixins: [Stats],
    computed: {
      ...mapState(["isPC", "isWeixin", "deviceType", "noneCommonFooter"])
    },
    mounted() {
      this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1;
      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;
    padding-top: 65px;
  }
  .ma-container-mobile{
    padding-top:0
  }

  .main {
    min-width: 1000px;
    min-height: calc(100vh - 376px);
    margin: 20px 0 30px !important;
  }

  .__nuxt-error-page .title {
    font-size: 100%;
  }

  @media screen and (max-width: 960px) {
    .main {
      min-width: auto;
    }
  }

  .el-drawer__body{
    overflow: auto;
  }
  .el-drawer__header{
    margin-bottom:0px !important;
  }

  .el-drawer__container ::-webkit-scrollbar {
    display: none;
  }
</style>