proginn-frontend/layouts/default.vue

<template>
  <div class="container">
    <proginn-header v-if="deviceType.pc"/>
    <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)
    // 修改密码处理
    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;
}
@media screen and (max-width: 960px) {
  .main {
    min-width: auto;
  }
}
</style>