首页

.env.production

 NODE_ENV=production
-VUE_APP_BASE_URL=http://api.patzn.com
+VUE_APP_BASE_URL=http://192.168.0.155:7000
 

src/page/Home.vue

@@ -3,34 +3,55 @@
         <!--https://youzan.github.io/vant/#/zh-CN/grid-->
         <div class="layout-cont home-cont">
             <!--todo  首页布局 颜色-->
-            <div style="background: cornflowerblue;" class="box-c" @click="_goto('/sampling_plan/sampling_plan')">
-                <div>抽样计划执行双随机</div>
-                <div>3</div>
+            <div class="box-c box-c-1" @click="_goto('/sampling_plan/sampling_plan')">
+                <div>
+                    <img src="@/assets/home/plan.png"></div>
+                <div>
+                    <div class="title">抽样计划执行双随机</div>
+                    <div class="num">3</div>
+                </div>
             </div>
-            <div style="display: flex" class="box-c">
-                <div style="width:50%;background: #FC81FF" @click="_goto('/sampling_task/sampling_task')">
-                    <div>我的任务</div>
-                    <div>4</div>
+            <div class="box-c box-c-2">
+                <div @click="_goto('/sampling_task/sampling_task')">
+                    <div class="box-img">
+                        <img src="@/assets/home/task.png"></div>
+                    <div class="cont">
+                        <div class="title">我的任务</div>
+                        <div class="num">4</div>
+                    </div>
                 </div>
-                <div style="width:50%;background:coral;margin-left: 30px"
-                     @click="_goto('/sampling_list/sampling_task')">
-                    <div>抽样信息录入</div>
-                    <div>4</div>
+                <div @click="_goto('/sampling_list/sampling_task')">
+                    <div class="box-img">
+                        <img src="@/assets/home/task-edit.png"></div>
+                    <div class="cont">
+                        <div class="title">抽样信息录入</div>
+                        <div class="num">4</div>
+                    </div>
                 </div>
             </div>
-            <div style="display: flex" class="box-c">
-                <div style="width:50%;background: brown" @click="_goto('/message')">
-                    <!--todo 消息-->
-                    <div>消息</div>
-                    <div>4</div>
+            <div class="box-c box-c-3">
+                <div @click="_goto('/message')">
+                    <div class="box-img">
+                        <img src="@/assets/home/message.png"></div>
+                    <div class="cont">
+                        <div class="title">消息</div>
+                        <div class="num">4</div>
+                    </div>
                 </div>
-                <div style="width:50%;background: #576b95;margin-left: 30px"
-                     @click="_goto('/history_sampling/sampling_list')">
-                    <div>历史任务</div>
+                <div @click="_goto('/history_sampling/sampling_list')">
+                    <div class="box-img">
+                        <img src="@/assets/home/history-data.png"></div>
+                    <div class="cont">
+                        <div class="title">历史任务</div>
+                    </div>
                 </div>
             </div>
-            <div class="box-c" @click="_goto('/flow_chart')">
-                <div style="background: #646566;height: 100%;">双随机实现流程</div>
+            <div class="box-c box-c-4" @click="_goto('/flow_chart')">
+                <div>
+                    <img src="@/assets/home/flow.png"></div>
+                <div>
+                    <div class="title">双随机实现流程</div>
+                </div>
             </div>
             <!--<van-grid :gutter="10" :column-num="3" :icon-size="40">-->
             <!--&lt;!&ndash;1、icon参数引入使用，否则不显示&ndash;&gt;-->
@@ -74,18 +95,111 @@
     }
 </script>
 
-<style scoped>
+<style scoped lang="less">
     .home-cont {
         padding: 20px 30px;
         color: #ffffff;
+        height: calc(100% - 50px);
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
     }
 
     .home-cont > div {
         width: 100%;
-        height: 25%;
+        height: 23%;
+    }
+
+    img {
+        width: 100%;
+    }
+
+    .box-c {
+        display: flex;
+        border-radius: 20px;
+    }
+
+    .box-c:nth-child(1) {
+        background: #589dff;
+    }
+
+    .box-c:nth-child(4) {
+        background: #9B9C9D;
+    }
+
+    .box-c-1, .box-c-4 {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        > div:nth-child(1) {
+            width: 20%;
+            display: flex;
+            align-items: center;
+            padding-left: 50px;
+            margin-left: -5%;
+        }
+
+        > div:nth-child(2) {
+            width: auto;
+            margin-left: 30px;
+
+        }
+
+        img {
+            width: 80%;
+        }
     }
 
-    .box-c + .box-c {
-        padding-top: 30px;
+    .box-c-2, .box-c-3 {
+        > div {
+            width: 50%;
+            border-radius: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .box-img {
+            width: 20%;
+        }
+
+        .cont {
+            margin-left: 30px;
+        }
+    }
+
+    .box-c-2 {
+        > div:nth-child(1) {
+            background: #b562bb;
+        }
+
+        > div:nth-child(2) {
+            background:  #e8835e;
+            margin-left: 30px;
+        }
     }
+
+    .box-c-3 {
+        > div:nth-child(1) {
+            background: #E24343;
+        }
+
+        > div:nth-child(2) {
+            background: #a1aeca;
+            margin-left: 30px;
+        }
+    }
+
+    .title {
+        font-weight: bold;
+        font-size: 24px
+    }
+
+    .num {
+        text-align: center;
+        font-weight: bold;
+        margin-top: 5px;
+    }
+
 </style>