优化

src/page/FlowChart.vue

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

src/page/Home.vue

@@ -2,7 +2,7 @@
     <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">-->
+                <img src="@/assets/home/plan.png">
                 <div>
                     <img src="@/assets/home/plan.png"></div>
                 <div>
@@ -47,6 +47,7 @@
                 </div>
             </div>
             <div class="box-c box-c-4" @click="_goto('/flow_chart')">
+                <img src="@/assets/home/flow.png">
                 <div>
                     <img src="@/assets/home/flow.png"></div>
                 <div>
@@ -67,9 +68,7 @@
             FooterBar
         },
         data() {
-            return {
-
-            }
+            return {}
         },
         methods: {
             _goto(uri) {
@@ -96,8 +95,8 @@
     /*}*/
 
     img {
-        width: 100%;
-        opacity: 0.6;
+        width: 70px;
+        opacity: 0.8;
     }
 
     .box-c {
@@ -106,7 +105,8 @@
         width: 700px;
         margin: 0 auto;
     }
-    .box-c+.box-c{
+
+    .box-c + .box-c {
         margin-top: 20px;
     }
 
@@ -122,30 +122,39 @@
     .box-c-1, .box-c-4 {
         display: flex;
         align-items: center;
-        justify-content: center;
         box-shadow: 2px 2px 10px #888888;
         height: 200px;
-        > div:nth-child(1) {
+        position: relative;
+        overflow: hidden;
+
+        > img {
+            position: absolute;
+            right: -40px;
+            top: -40px;
+            opacity: 0.2;
+            width: 300px;
+        }
+
+        > div:nth-child(2) {
             width: 20%;
             display: flex;
-            align-items: center;
             padding-left: 50px;
-            margin-left: -5%;
+            margin-left: 30px;
         }
 
-        > div:nth-child(2) {
+        > div:nth-child(3) {
             width: auto;
             margin-left: 30px;
 
         }
 
-        img {
-            width: 80%;
-        }
+
     }
 
     .box-c-2, .box-c-3 {
+
         height: 180px;
+
         > div {
             width: 50%;
             border-radius: 20px;
@@ -166,23 +175,23 @@
 
     .box-c-2 {
         > div:nth-child(1) {
-            background-image: linear-gradient(45deg,#536DFE,#00B0Ff)
+            background-image: linear-gradient(45deg, #536DFE, #00B0Ff)
 
         }
 
         > div:nth-child(2) {
-            background-image: linear-gradient(45deg, #00B0Ff,#536DFE);
+            background-image: linear-gradient(45deg, #00B0Ff, #536DFE);
             margin-left: 30px;
         }
     }
 
     .box-c-3 {
         > div:nth-child(1) {
-            background-image: linear-gradient(45deg,#00BFA6,#0036ff)
+            background-image: linear-gradient(45deg, #00BFA6, #0036ff)
         }
 
         > div:nth-child(2) {
-            background-image: linear-gradient(45deg, #0036ff,#00BFA6);
+            background-image: linear-gradient(45deg, #0036ff, #00BFA6);
             margin-left: 30px;
         }
     }

src/page/sampling-plan/loc/LocChecked.vue

@@ -25,7 +25,7 @@
         </div>
         <div class="bottom-btn">
             <van-button type="info" square block @click="_add">添加</van-button>
-            <van-button type="default" square block @click="_create">生成抽样地点</van-button>
+            <van-button type="primary" square block @click="_create">随机生成抽样地点</van-button>
         </div>
     </div>
 </template>

src/page/sampling-plan/sampler/SamplerChecked.vue

@@ -24,7 +24,7 @@
         </div>
         <div class="bottom-btn">
             <van-button type="info" square block @click="_add">添加</van-button>
-            <van-button type="default" square block @click="_create">生成抽样人员</van-button>
+            <van-button type="primary" square block @click="_create">随机生成抽样人员</van-button>
         </div>
     </div>
 </template>