首页修改

src/page/Home.vue

@@ -64,9 +64,9 @@
 </template>
 
 <script>
-    import FooterBar from '@/components/FooterBar.vue'
+import FooterBar from '@/components/FooterBar.vue'
 
-    export default {
+export default {
   name: "Home",
   components: {
     FooterBar
@@ -74,16 +74,26 @@
   data() {
     return {}
   },
+  mounted() {
+    const that = this
+    window.onresize = () => {
+      return (() => {
+        if (window.screen.width < 750) {
+          that.$router.replace('/home_old')
+        }
+      })()
+    }
+  },
   methods: {
     _goto(uri) {
       this.$router.push(uri)
     }
   }
-    }
+}
 </script>
 
 <style scoped lang="less">
-    .home-cont {
+.home-cont {
   padding: 20px 30px;
   color: #ffffff;
   height: calc(100% - 50px);
@@ -91,40 +101,40 @@
   /*flex-direction: column;*/
   /*justify-content: space-around;*/
   overflow: auto;
-    }
+}
 
-    /*.home-cont > div {*/
-    /*width: 100%;*/
-    /*height: 23%;*/
-    /*}*/
+/*.home-cont > div {*/
+/*width: 100%;*/
+/*height: 23%;*/
+/*}*/
 
-    img {
+img {
   width: 70px;
   height: 70px;
   opacity: 0.9;
-    }
+}
 
-    .box-c {
+.box-c {
   display: flex;
   border-radius: 20px;
   width: 700px;
   margin: 0 auto;
-    }
+}
 
-    .box-c + .box-c {
+.box-c + .box-c {
   margin-top: 20px;
-    }
+}
 
-    .box-c:nth-child(1) {
+.box-c:nth-child(1) {
   background-image: linear-gradient(45deg, #10239e, #adc6ff)
-    }
+}
 
-    .box-c:nth-child(4) {
+.box-c:nth-child(4) {
   background-image: linear-gradient(45deg, #00474f, #87e8de)
 
-    }
+}
 
-    .box-c-1, .box-c-4 {
+.box-c-1, .box-c-4 {
   display: flex;
   align-items: center;
   box-shadow: 2px 2px 10px #888888;
@@ -155,9 +165,9 @@
   }
 
 
-    }
+}
 
-    .box-c-2, .box-c-3 {
+.box-c-2, .box-c-3 {
 
   height: 180px;
 
@@ -186,9 +196,9 @@
   .cont {
     margin-left: 30px;
   }
-    }
+}
 
-    .box-c-2 {
+.box-c-2 {
   > div:nth-child(1) {
     background-image: linear-gradient(45deg, #536DFE, #00B0Ff)
   }
@@ -198,9 +208,9 @@
     margin-left: 30px;
   }
 
-    }
+}
 
-    .box-c-3 {
+.box-c-3 {
   > div:nth-child(1) {
     background-image: linear-gradient(45deg, #00BFA6, #0036ff)
   }
@@ -209,17 +219,17 @@
     background-image: linear-gradient(45deg, #0036ff, #00BFA6);
     margin-left: 30px;
   }
-    }
+}
 
-    .title {
+.title {
   font-weight: bold;
   font-size: 24px
-    }
+}
 
-    .num {
+.num {
   text-align: center;
   font-weight: bold;
   margin-top: 5px;
-    }
+}
 
 </style>

src/page/HomeOld.vue

@@ -17,12 +17,14 @@
 </template>
 
 <script>
-    import indexImg10 from '../assets/index/10.png'
-    import indexImg1 from '../assets/index/1.png'
-    import indexImg11 from '../assets/index/11.png'
-    import FooterBar from '@/components/FooterBar.vue'
+import indexImg27 from '../assets/index/27.png'
+import indexImg10 from '../assets/index/10.png'
+import indexImg1 from '../assets/index/1.png'
+import indexImg11 from '../assets/index/11.png'
+import indexImg13 from '../assets/index/13.png'
+import FooterBar from '@/components/FooterBar.vue'
 
-    export default {
+export default {
   name: "Home",
   components: {
     FooterBar
@@ -30,18 +32,30 @@
   data() {
     return {
       menuList: [
-                    {img: indexImg10, title: '抽样任务', uri: '/sampling_task/sampling_task'},
-                    {img: indexImg1, title: '抽样单管理', uri: '/sampling_list/sampling_task'},
-                    {img: indexImg11, title: '历史抽样单', uri: '/history_sampling/sampling_list'},
+        {img: indexImg27, title: '我创建的抽样计划', uri: '/sampling_plan/sampling_plan'},
+        {img: indexImg10, title: '我的双随机任务', uri: '/sampling_task/sampling_task'},
+        {img: indexImg1, title: '抽样信息录入', uri: '/sampling_list/sampling_task'},
+        {img: indexImg11, title: '历史任务', uri: '/history_sampling/sampling_list'},
+        {img: indexImg13, title: '双随机实现流程', uri: '/flow_chart'},
       ],
     }
   },
+  mounted() {
+    const that = this
+    window.onresize = () => {
+      return (() => {
+        if (window.screen.width > 750) {
+          that.$router.replace('/home')
+        }
+      })()
+    }
+  },
   methods: {
     _goto(item) {
       this.$router.push(item.uri)
     }
   }
-    }
+}
 </script>
 
 <style scoped>

src/router/routes.js

 import Index from '@/page/Index'
 import Home from '@/page/Home'
+import HomeOld from '@/page/HomeOld'
 import Login from '@/page/Login'
 import ForgetPwd from '@/page/ForgetPwd'
 import Message from '@/page/Message'
@@ -32,6 +33,12 @@ export default [
                 meta: {title: "双随机抽样", leftArrow: false},
             },
             {
+                path: "/home_old",
+                name: "homeOld",
+                component: HomeOld,
+                meta: {title: "双随机抽样", leftArrow: false},
+            },
+            {
                 path: "/login",
                 name: "login",
                 component: Login,