优化

src/views/sunVillage_info/index_code.vue

@@ -15,11 +15,11 @@
         <div class="index_info">
             <div class="title"></div>
             <div class="nav_list">
-              <router-link :to="{name:'sunVillageInfoListFinance',query:{type:'code'}}" class="nav_item n_1">财务公开榜</router-link>
-              <router-link :to="{name:'sunVillageInfoListTourists',query:{type:'code'}}" class="nav_item n_2">零工公开榜</router-link>
-              <router-link :to="{name:'sunVillageInfoListIssues',query:{type:'code'}}" class="nav_item n_3">重大事项公开</router-link>
-<!--                <router-link :to="{name:'sunVillageInfoFixedAssets'}" class="nav_item n_4">固定资产</router-link>-->
-<!--                <router-link :to="{name:'sunVillageInfoInformation'}" class="nav_item n_5">合同登记</router-link>-->
+              <div class="nav_list_box">
+                <router-link :to="{name:'sunVillageInfoListFinance',query:{type:'code'}}" class="nav_item n_1">财务公开榜</router-link>
+                <router-link :to="{name:'sunVillageInfoListTourists',query:{type:'code'}}" class="nav_item n_2">零工公开榜</router-link>
+                <router-link :to="{name:'sunVillageInfoListIssues',query:{type:'code'}}" class="nav_item n_3">重大事项公开</router-link>
+              </div>
             </div>
         </div>
         <div class="footer">
@@ -165,51 +165,66 @@
             background-size: 100% 100%;
             margin:0 auto;
         }
-        .nav_list{
-            margin-top: 6vh;
-            padding:0 38px;
-            display: flex;
-            flex-flow: wrap;
-
-            .nav_item{
-                flex:0 0 200px;
-                height: 249px;
-                margin-right: 34px;
-                margin-bottom: 35px;
-                box-shadow: 6px 0px 18px rgba(63,68,75,0.2);
-                border-radius: 30px;
-                font-size: 30px;
-                color: #fff;
-                text-align: center;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                padding-top: 120px;
-                &:nth-child(3){
-                    margin-right: 0;
-                }
-                &.n_1{
-                    background: url('../../assets/images/sunVillage_info/index_block_1.png') no-repeat;
-                    background-size: 100% 100%;
-                }
-                 &.n_2{
-                    background: url('../../assets/images/sunVillage_info/index_block_2.png') no-repeat;
-                    background-size: 100% 100%;
-                }
-                &.n_3 {
-                    background: url('../../assets/images/sunVillage_info/index_block_3.png') no-repeat;
-                    background-size: 100% 100%;
-                }
-                &.n_4 {
-                    background: url('../../assets/images/sunVillage_info/index_block_4.png') no-repeat;
-                    background-size: 100% 100%;
-                }
-                &.n_5 {
-                    background: url('../../assets/images/sunVillage_info/index_block_5.png') no-repeat;
-                    background-size: 100% 100%;
-                }
-            }
+      .nav_list{
+        margin-top: 6vh;
+        padding:0 38px;
+        .nav_list_box{
+          display: flex;
+          flex-flow: wrap;
+          box-shadow: 0px 0px 18px rgba(63,68,75,0.2);
+          margin-bottom: 40PX;
+          padding: 20PX 0;
+          border-radius: 15PX;
         }
+        .nav_item{
+          width: 25%;
+          /*height: 180px;*/
+          border-radius: 30px;
+          font-size: 24px;
+          color: #3f3d56;
+          text-align: center;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding-top: 100px;
+          &.n_1{
+            background: url('../../assets/images/sunVillage_info/index_block_01.png') no-repeat center top;
+            background-size: 50%;
+            /*margin-bottom: 20PX;*/
+          }
+          &.n_2{
+            background: url('../../assets/images/sunVillage_info/index_block_02.png') no-repeat center top;
+            background-size: 50%;
+            /*margin-bottom: 20PX;*/
+          }
+          &.n_3 {
+            background: url('../../assets/images/sunVillage_info/index_block_03.png') no-repeat center top;
+            background-size: 50%;
+            /*margin-bottom: 20PX;*/
+          }
+          &.n_4 {
+            background: url('../../assets/images/sunVillage_info/index_block_04.png') no-repeat center top;
+            background-size: 50%;
+            /*margin-bottom: 20PX;*/
+          }
+          &.n_5 {
+            background: url('../../assets/images/sunVillage_info/index_block_05.png') no-repeat center top;
+            background-size: 50%;
+          }
+          &.n_6 {
+            background: url('../../assets/images/sunVillage_info/index_block_06.png') no-repeat center top;
+            background-size: 50%;
+          }
+          &.n_7 {
+            background: url('../../assets/images/sunVillage_info/index_block_07.png') no-repeat center top;
+            background-size: 50%;
+          }
+          &.n_8 {
+            background: url('../../assets/images/sunVillage_info/index_block_08.png') no-repeat center top;
+            background-size: 50%;
+          }
+        }
+      }
     }
     .footer{
         position: absolute;