首页修改

src/page/Home.vue

@@ -79,7 +79,7 @@ export default {
     window.onresize = () => {
       return (() => {
         if (window.screen.width < 750) {
-          that.$router.replace('/home_old')
+          that.$router.replace('/home_small')
         }
       })()
     }

src/page/HomeOld.vue

@@ -2,7 +2,7 @@
   <div>
     <!--https://youzan.github.io/vant/#/zh-CN/grid-->
     <div class="layout-cont home-cont">
-      <van-grid :gutter="10" :column-num="3" :icon-size="40">
+      <van-grid :gutter="10" :column-num="1" :icon-size="40">
         <!--1、icon参数引入使用，否则不显示-->
         <van-grid-item v-for="item in menuList" :key="item.title" :icon="item.img"
                        :text="item.title" @click="_goto(item)"></van-grid-item>

src/page/HomeSmall.vue

+<template>
+  <div>
+    <div class="layout-cont home-cont">
+      <div class="box-c box-c-1" @click="_goto('/sampling_plan/sampling_plan')">
+        <img src="@/assets/home/plan.png">
+        <div>
+          <img src="@/assets/home/plan.png"></div>
+        <div>
+          <div class="title">我创建的抽样计划</div>
+          <!--todo 每个模块的数量-->
+          <div class="num">3</div>
+        </div>
+      </div>
+      <div class="box-c box-c-2" @click="_goto('/sampling_task/sampling_task')">
+        <img src="@/assets/home/task.png">
+        <div>
+          <img src="@/assets/home/task.png"></div>
+        <div>
+          <div class="title">我的双随机任务</div>
+          <div class="num">4</div>
+        </div>
+      </div>
+      <div class="box-c box-c-3" @click="_goto('/sampling_list/sampling_task')">
+        <img src="@/assets/home/task-edit.png">
+        <div>
+          <img src="@/assets/home/task-edit.png"></div>
+        <div>
+          <div class="title">抽样信息录入</div>
+          <div class="num">4</div>
+        </div>
+      </div>
+      <div class="box-c box-c-4" @click="_goto('/message')">
+        <img src="@/assets/home/message.png">
+        <div>
+          <img src="@/assets/home/message.png"></div>
+        <div>
+          <div class="title">消息</div>
+          <div class="num">4</div>
+        </div>
+
+      </div>
+      <div class="box-c box-c-5" @click="_goto('/history_sampling/sampling_list')">
+        <img src="@/assets/home/history-data.png">
+        <div>
+          <img src="@/assets/home/history-data.png"></div>
+        <div>
+          <div class="title">历史任务</div>
+        </div>
+      </div>
+      <div class="box-c box-c-6" @click="_goto('/flow_chart')">
+        <img src="@/assets/home/flow.png">
+        <div>
+          <img src="@/assets/home/flow.png"></div>
+        <div>
+          <div class="title">双随机实现流程</div>
+        </div>
+      </div>
+    </div>
+    <FooterBar></FooterBar>
+  </div>
+</template>
+
+<script>
+import FooterBar from '@/components/FooterBar.vue'
+
+export default {
+  name: "Home",
+  components: {
+    FooterBar
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+    const that = this
+    window.onresize = () => {
+      return (() => {
+        if (window.screen.width > 750) {
+          that.$router.replace('/home')
+        }
+      })()
+    }
+  },
+  methods: {
+    _goto(uri) {
+      this.$router.push(uri)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.home-cont {
+  padding: 20px 30px;
+  color: #ffffff;
+  height: calc(100% - 50px);
+  /*display: flex;*/
+  /*flex-direction: column;*/
+  /*justify-content: space-around;*/
+  overflow: auto;
+}
+
+/*.home-cont > div {*/
+/*width: 100%;*/
+/*height: 23%;*/
+/*}*/
+
+img {
+  width: 60px;
+  height: 60px;
+  opacity: 0.9;
+}
+
+.box-c {
+  display: flex;
+  border-radius: 20px;
+  //width: 700px;
+  margin: 0 auto;
+}
+
+.box-c + .box-c {
+  margin-top: 20px;
+}
+
+.box-c:nth-child(1) {
+  background-image: linear-gradient(45deg, #10239e, #adc6ff)
+}
+.box-c:nth-child(2) {
+  background-image:linear-gradient(45deg, #536DFE, #00B0Ff)
+}
+.box-c:nth-child(3) {
+  background-image: linear-gradient(45deg, #00B0Ff, #536DFE);
+}
+.box-c:nth-child(4) {
+  background-image: linear-gradient(45deg, #00BFA6, #0036ff)
+}
+.box-c:nth-child(5) {
+  background-image: linear-gradient(45deg, #0036ff, #00BFA6);
+}
+.box-c:nth-child(6) {
+  background-image: linear-gradient(45deg, #00474f, #87e8de)
+
+}
+
+.box-c-1, .box-c-2, .box-c-3, .box-c-4, .box-c-5, .box-c-6 {
+  display: flex;
+  align-items: center;
+  box-shadow: 2px 2px 10px #888888;
+  position: relative;
+  overflow: hidden;
+  height: 90px;
+
+  > img {
+    position: absolute;
+    right: 0;
+    top: 0;
+    opacity: 0.1;
+    height: 90px;
+    width: 90px;
+  }
+
+  > div:nth-child(2) {
+    width: 20%;
+    display: flex;
+    margin-left: 30px;
+  }
+
+  > div:nth-child(3) {
+    width: auto;
+    margin-left: 30px;
+
+  }
+
+}
+.title {
+  font-weight: bold;
+  font-size: 18px
+}
+
+.num {
+  text-align: center;
+  font-weight: bold;
+}
+
+</style>

src/router/routes.js

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

src/styles/main.less

@@ -93,6 +93,7 @@ html, body, #app, .main-content-con {
 
 .home-cont {
   padding: 10px 0;
+  height: calc(100% - 50px);
 }
 
 .bottom-btn {
@@ -292,3 +293,7 @@ html, body, #app, .main-content-con {
 .van-field__control--custom{
   flex-wrap: wrap;
 }
+
+.van-grid-item__text{
+  text-align: center;
+}