流程圖

src/page/FlowChart.vue

+<template>
+    <div>
+        <div class="layout-cont flow-cont">
+            <div style="background: #ee0a24">确定样本量或者抽样样</div>
+            <div><img src="@/assets/right-arrow.png"></div>
+            <div style="background: #ff9328">选择随机抽样方法</div>
+            <div><img src="@/assets/right-arrow.png"></div>
+            <div style="background: #63c689">对批中产品编号</div>
+            <div><img src="@/assets/right-arrow.png"></div>
+            <div style="background: #0fb32e">生成随机样本单元号</div>
+            <div><img src="@/assets/right-arrow.png"></div>
+            <div style="background: #5883f0">按样本单元编号取出产品</div>
+            <div><img src="@/assets/right-arrow.png"></div>
+            <div style="background: #646566">管理并检验样本单元</div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "FlowChart"
+    }
+</script>
+
+<style scoped lang="less">
+    .flow-cont {
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+        padding: 30px;
+        color: #ffffff;
+        font-weight: bold;
+        > div {
+            width: 12vw;
+            height: 12vw;
+            -moz-border-radius: 50%;
+            -webkit-border-radius: 50%;
+            border-radius: 50%;
+            align-items: center;
+            display: flex;
+            justify-content: center;
+            text-align: center;
+            padding: 10px;
+        }
+
+        > div:nth-child(2n-1) {
+            background: #07c160;
+        }
+
+        > div:nth-child(2n) {
+            width: 4vw;
+            height: 4vw;
+            margin-top: 4vw;
+            padding: 0;
+        }
+
+        img {
+            width: 100%;
+        }
+    }
+</style>

src/page/Home.vue

@@ -29,7 +29,7 @@
                     <div>历史任务</div>
                 </div>
             </div>
-            <div class="box-c">
+            <div class="box-c" @click="_goto('/flow_chart')">
                 <div style="background: #646566;height: 100%;">双随机实现流程</div>
             </div>
             <!--<van-grid :gutter="10" :column-num="3" :icon-size="40">-->

src/router/routes.js

@@ -3,6 +3,7 @@ import Home from '@/page/Home'
 import Login from '@/page/Login'
 import ForgetPwd from '@/page/ForgetPwd'
 import Message from '@/page/Message'
+import FlowChart from '@/page/FlowChart'
 import SamplingPlanRoutes from './sampling-plan-routes'
 import SamplingTaskRoutes from './sampling-task-routes'
 import SamplingListRoutes from './sampling-list-routes'
@@ -41,6 +42,11 @@ export default [
                 name: 'message',
                 component: Message,
                 meta: {title: '我的消息'}
+            },{
+                path: "/flow_chart",
+                name: 'flowChart',
+                component: FlowChart,
+                meta: {title: '流程'}
             }
 
         ],