首页宽度固定

src/page/Home.vue

@@ -2,6 +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">-->
                 <div>
                     <img src="@/assets/home/plan.png"></div>
                 <div>
@@ -52,24 +53,12 @@
                     <div class="title">双随机实现流程</div>
                 </div>
             </div>
-            <!--<van-grid :gutter="10" :column-num="3" :icon-size="40">-->
-            <!--&lt;!&ndash;1、icon参数引入使用，否则不显示&ndash;&gt;-->
-            <!--<van-grid-item v-for="item in menuList" :key="item.title" :icon="item.img"-->
-            <!--:text="item.title" @click="_goto(item)"></van-grid-item>-->
-            <!--&lt;!&ndash;2、require使用  详见：https://youzan.github.io/vant/#/zh-CN/image#chang-jian-wen-ti&ndash;&gt;-->
-            <!--&lt;!&ndash;<van-grid-item v-for="item in menuList" :key="item.title" :icon="require('../assets/index/1.png')"&ndash;&gt;-->
-            <!--&lt;!&ndash;:text="item.title" ></van-grid-item>&ndash;&gt;-->
-            <!--&lt;!&ndash;3、使用该组件的icon插槽 详见：https://youzan.github.io/vant/#/zh-CN/grid#api&ndash;&gt;-->
-            <!--</van-grid>-->
         </div>
         <FooterBar></FooterBar>
     </div>
 </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'
 
     export default {
@@ -79,11 +68,7 @@
         },
         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'},
-                ],
+
             }
         },
         methods: {
@@ -99,32 +84,37 @@
         padding: 20px 30px;
         color: #ffffff;
         height: calc(100% - 50px);
-        display: flex;
-        flex-direction: column;
-        justify-content: space-around;
+        /*display: flex;*/
+        /*flex-direction: column;*/
+        /*justify-content: space-around;*/
+        overflow: auto;
     }
 
-    .home-cont > div {
-        width: 100%;
-        height: 23%;
-    }
+    /*.home-cont > div {*/
+        /*width: 100%;*/
+        /*height: 23%;*/
+    /*}*/
 
     img {
         width: 100%;
+        opacity: 0.6;
     }
 
     .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: #589dff;*/
         background-image: linear-gradient(45deg, #10239e, #adc6ff)
     }
 
     .box-c:nth-child(4) {
-        /*background: #9B9C9D;*/
         background-image: linear-gradient(45deg, #00474f, #87e8de)
 
     }
@@ -134,7 +124,7 @@
         align-items: center;
         justify-content: center;
         box-shadow: 2px 2px 10px #888888;
-
+        height: 200px;
         > div:nth-child(1) {
             width: 20%;
             display: flex;
@@ -155,6 +145,7 @@
     }
 
     .box-c-2, .box-c-3 {
+        height: 180px;
         > div {
             width: 50%;
             border-radius: 20px;
@@ -175,27 +166,23 @@
 
     .box-c-2 {
         > div:nth-child(1) {
-            /*background: #b562bb;*/
-            background-image: linear-gradient(45deg,#237804, #95de64)
+            background-image: linear-gradient(45deg,#536DFE,#00B0Ff)
 
         }
 
         > div:nth-child(2) {
-            /*background:  #e8835e;*/
-            background-image: linear-gradient(45deg, #874d00, #e8835e);
+            background-image: linear-gradient(45deg, #00B0Ff,#536DFE);
             margin-left: 30px;
         }
     }
 
     .box-c-3 {
         > div:nth-child(1) {
-            /*background: #E24343;*/
-            background-image: linear-gradient(45deg, #E24343, #ff7875)
+            background-image: linear-gradient(45deg,#00BFA6,#0036ff)
         }
 
         > div:nth-child(2) {
-            /*background: #a1aeca;*/
-            background-image: linear-gradient(45deg, #8e9bb7, #e0e0e0);
+            background-image: linear-gradient(45deg, #0036ff,#00BFA6);
             margin-left: 30px;
         }
     }