自适应兼容处理

pages/index.vue

@@ -1,20 +1,36 @@
 <template>
   <section id="proginn-container">
-    <proginn-header/>
-    <router-view id="main"/>
-    <proginn-footer/>
+    <proginn-header v-if="isPC != -1 && isPC"/>
+    <router-view v-if="isPC != -1" id="main"/>
+    <proginn-footer v-if="isPC != -1 && isPC"/>
   </section>
 </template>
 
 <script>
 import ProginnHeader from '@/components/header'
 import ProginnFooter from '@/components/footer'
+import { mapState, mapMutations } from 'vuex'
 
 export default {
   components: {
     ProginnHeader,
     ProginnFooter
   },
+  computed: {
+    ...mapState(['isPC']),
+  },
+  mounted() {
+    this.checkInnerWidth()
+    window.addEventListener('resize', this.checkInnerWidth)
+  },
+  methods: {
+    ...mapMutations(['updateIsPC']),
+    checkInnerWidth() {
+      this.updateIsPC({
+        isPC: window.innerWidth > 960,
+      })
+    }
+  }
 }
 </script>
 

pages/index/type/pay.vue

@@ -0,0 +1,15 @@
+<template>
+  <section class="pay">
+    pay
+  </section>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

pages/index/type/vip.vue

@@ -95,7 +95,6 @@ export default {
       return this.vipList[1];
     }
   },
-  mounted() {},
   methods: {
     /**
      * 点击支付

store/index.js

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+Vue.use(Vuex)
+
+const store = () => new Vuex.Store({
+  state: {
+    isPC: -1,
+  },
+  mutations: {
+    updateIsPC(state, payload) {
+      state.isPC = payload.isPC
+    }
+  }
+})
+
+export default store