框架搭建

src/components/pc/index.vue

@@ -70,7 +70,7 @@ function tabHandle(sub) {
           </div>
         </div>
         <div class="mc-right">
-          <router-view />
+          <router-view class="pcMianPage" />
         </div>
       </div>
     </div>
@@ -135,6 +135,12 @@ function tabHandle(sub) {
       font-weight: bold;
     }
   }
+  .pcMianPage{
+    padding: 30px 0;
+    width: 972px;
+    min-height: 676px;
+    background: #fff;
+  }
 }
 </style>
 

src/router/index.ts

@@ -1,60 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
-const pc = () => import('../components/pc/index.vue')
-const mobile = () => import('../components/mobile/index.vue')
-import pcHome from '../views/pc/index.vue'
-import mobileHome from '../views/mobile/index.vue'
-const routesP = [{
-  path: '/',
-  name: 'Pc',
-  redirect: '/',
-  component: pc,
-  children: [{
-    path: '/',
-    name: 'index',
-    component: pcHome
-  }]
-}]
-
-const routesM = [{
-  path: '/',
-  name: 'Mobile',
-  redirect: '/',
-  component: mobile,
-          children: [
-            {
-              name: 'information',
-              path: '/information',
-              component: resolve => require(['@/page/manage/temp/information'], resolve),
-              meta: { hideFooterFind: false, requireAuth: true }
-            },
-            {
-              name: 'scene',
-              path: '/scene',
-              component: resolve => require(['@/page/manage/temp/scene'], resolve),
-              meta: { hideFooterFind: false, requireAuth: true }
-            },
-            {
-              name: 'order',
-              path: '/order',
-              component: resolve => require(['@/page/manage/temp/order'], resolve),
-              meta: { hideFooterFind: false, requireAuth: true }
-
-            },
-            {
-              name: 'device',
-              path: '/device',
-              component: resolve => require(['@/page/manage/temp/device'], resolve),
-              meta: { hideFooterFind: false, requireAuth: true }
-            },
-            {
-              name: 'appProduct',
-              path: '/appProduct',
-              component: resolve => require(['@/page/manage/temp/appProduct'], resolve),
-              meta: { hideFooterFind: false, requireAuth: true }
-            }
-          ]
-}]
-
+import routesP from './pcRoute'
+import routesM from './mbRoute'
 var routes = [];
 if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
 routes = routesM

src/router/mbRoute.ts

@@ -5,7 +5,7 @@ const order = () => import('../views/mobile/order/index.vue')
 const device = () => import('../views/mobile/device/index.vue')
 const appProduct = () => import('../views/mobile/appProduct/index.vue')
 const information = () => import('../views/mobile/information/index.vue')
-const routesP = [{
+const routesM = [{
   path: '/',
   name: 'Mobile',
   redirect: '/information',
@@ -47,4 +47,4 @@ const routesP = [{
   }]
 
 }]
-export default routesP
+export default routesM

src/views/pc/appProduct/index.vue

@@ -12,14 +12,13 @@ const userStore = useUserStore();
 const isEur = userStore.isEur
 </script>
 <template>
-  <div class="mobilePage">mobilePage
+  <div class="pcPage">mobilePage
   </div>
 </template>
 
 <style lang="less" scoped>
-.mobilePage {
+.pcPage {
   background: #f7f7f7;
-  min-height: calc(100vh - 50px);
   max-width: 100vw;
   display: block;
   color:#202020;

src/views/pc/device/index.vue

@@ -12,14 +12,13 @@ const userStore = useUserStore();
 const isEur = userStore.isEur
 </script>
 <template>
-  <div class="mobilePage">mobilePage
+  <div class="pcPage">mobilePage
   </div>
 </template>
 
 <style lang="less" scoped>
-.mobilePage {
+.pcPage {
   background: #f7f7f7;
-  min-height: calc(100vh - 50px);
   max-width: 100vw;
   display: block;
   color:#202020;

src/views/pc/information/index.vue

@@ -12,14 +12,13 @@ const userStore = useUserStore();
 const isEur = userStore.isEur
 </script>
 <template>
-  <div class="mobilePage">mobilePage
+  <div class="pcPage">mobilePage
   </div>
 </template>
 
 <style lang="less" scoped>
-.mobilePage {
+.pcPage {
   background: #f7f7f7;
-  min-height: calc(100vh - 50px);
   max-width: 100vw;
   display: block;
   color:#202020;

src/views/pc/order/index.vue

@@ -12,14 +12,13 @@ const userStore = useUserStore();
 const isEur = userStore.isEur
 </script>
 <template>
-  <div class="mobilePage">mobilePage
+  <div class="pcPage">mobilePage
   </div>
 </template>
 
 <style lang="less" scoped>
-.mobilePage {
+.pcPage {
   background: #f7f7f7;
-  min-height: calc(100vh - 50px);
   max-width: 100vw;
   display: block;
   color:#202020;

src/views/pc/scene/index.vue

@@ -12,14 +12,13 @@ const userStore = useUserStore();
 const isEur = userStore.isEur
 </script>
 <template>
-  <div class="mobilePage">mobilePage
+  <div class="pcPage">mobilePage
   </div>
 </template>
 
 <style lang="less" scoped>
-.mobilePage {
+.pcPage {
   background: #f7f7f7;
-  min-height: calc(100vh - 50px);
   max-width: 100vw;
   display: block;
   color:#202020;