农村事项管理平台

src/views/sunVillage_info/index.vue

@@ -48,7 +48,7 @@
 
             <div class="nav_list">
               <div class="nav_list_box">
-                <van-cell style="border-radius: 6px;">
+                <van-cell :border="false" style="border-radius: 6px;">
                   <template #title>
                     <p style="font-weight: bold;font-size: 18px;display: inline-block">阳光村务</p>
                   </template>
@@ -63,82 +63,25 @@
             </div>
 
             <div class="nav_list">
-              <div class="nav_box">
-                <van-cell style="border-radius: 6px;">
+              <div class="nav_list_box">
+                <van-cell :border="false" style="border-radius: 6px;">
                   <template #title>
                     <p style="font-weight: bold;font-size: 18px;display: inline-block">支出申请</p>
                   </template>
                 </van-cell>
-                <van-grid :border="false">
-                  <van-grid-item text="银行卡转账" :to="{name:'sunVillageApprovalList'}" >
-                    <div class="icon" slot="default" style="background:#FF4646;" >
-                      <img src="../../../static/images/onlineHome/icon_Y1.png" alt />
-                    </div>
-                    <p style="margin-top: 5px;color: #666666;">银行卡转账</p>
-                  </van-grid-item>
-                  <!--          <van-grid-item text="代管转账" :to="{name:'approvalList4'}" >-->
-                  <!--            <div class="icon" slot="default" style="background:#c568f5;" >-->
-                  <!--              <img src="../../../static/images/onlineHome/icon_Y4.png" alt />-->
-                  <!--            </div>-->
-                  <!--            <p style="margin-top: 5px;color: #666666;">代管转账</p>-->
-                  <!--          </van-grid-item>-->
-                  <van-grid-item text="信用卡还款" :to="{name:'sunVillageApprovalList2'}" >
-                    <div class="icon" slot="default" style="background:#3ac2db;" >
-                      <img src="../../../static/images/onlineHome/icon_Y2.png" alt />
-                    </div>
-                    <p style="margin-top: 5px;color: #666666;">信用卡还款</p>
-                  </van-grid-item>
-                  <!--          <van-grid-item text="现金提现" :to="{name:'approvalList10'}" >-->
-                  <!--            <div class="icon" slot="default" style="background:#FF6464;" >-->
-                  <!--              <img src="../../../static/images/onlineHome/icon_Y6.png" alt />-->
-                  <!--            </div>-->
-                  <!--            <p style="margin-top: 5px;color: #666666;">现金提现</p>-->
-                  <!--          </van-grid-item>-->
-                  <van-grid-item text="备付金支出" :to="{name:'sunVillageApprovalList11'}" >
-                    <div class="icon" slot="default" style="background:#7790FE;" >
-                      <img src="../../../static/images/onlineHome/icon_Y7.png" alt />
-                    </div>
-                    <p style="margin-top: 5px;color: #666666;">备付金支出</p>
-                  </van-grid-item>
-                  <van-grid-item text="汇票支出" :to="{name:'sunVillageApprovalList12'}" >
-                    <div class="icon" slot="default" style="background:#539ffd;" >
-                      <img src="../../../static/images/onlineHome/icon_Y8.png" alt />
-                    </div>
-                    <p style="margin-top: 5px;color: #666666;">汇票支出</p>
-                  </van-grid-item>
-                  <van-grid-item text="收款账户" :to="{name:'sunVillageCollectionList'}" >
-                    <div class="icon" slot="default" style="background:#7dda4f;" >
-                      <img src="../../../static/images/onlineHome/icon_Y9.png" alt />
-                    </div>
-                    <p style="margin-top: 5px;color: #666666;">收款账户</p>
-                  </van-grid-item>
-                  <van-grid-item text="付款账户" :to="{name:'sunVillagePaymentAccountList'}" >
-                    <div class="icon" slot="default" style="background:#FF4646;" >
-                      <img src="../../../static/images/onlineHome/icon_Y10.png" alt />
-                    </div>
-                    <p style="margin-top: 5px;color: #666666;">付款账户</p>
-                  </van-grid-item>
-                  <van-grid-item text="开户行" :to="{name:'sunVillageBankOfDepositList'}" >
-                    <div class="icon" slot="default" style="background:#FF6464;" >
-                      <img src="../../../static/images/onlineHome/icon_Y6.png" alt />
-                    </div>
-                    <p style="margin-top: 5px;color: #666666;">开户行</p>
-                  </van-grid-item>
-                  <!--
-                  <van-grid-item text="重大事项" :to="{name:'sunVillageApprovalList13'}" >
-                    <div class="icon" slot="default" style="background:#c568f5;" >
-                      <img src="../../../static/images/onlineHome/icon_Y3.png" alt />
-                    </div>
-                    <p style="margin-top: 5px;color: #666666;">重大事项</p>
-                  </van-grid-item>
-                  -->
-                </van-grid>
+                <router-link :to="{name:'sunVillageApprovalList'}" class="nav_item n_01">银行卡转账</router-link>
+                <router-link :to="{name:'sunVillageApprovalList2'}" class="nav_item n_02">信用卡还款</router-link>
+                <router-link :to="{name:'sunVillageApprovalList11'}" class="nav_item n_03">备付金支出</router-link>
+                <router-link :to="{name:'sunVillageApprovalList12'}" class="nav_item n_04">汇票支出</router-link>
+                <router-link :to="{name:'sunVillageCollectionList'}" class="nav_item n_05">收款账户</router-link>
+                <router-link :to="{name:'sunVillagePaymentAccountList'}" class="nav_item n_06">付款账户</router-link>
+                <router-link :to="{name:'sunVillageBankOfDepositList'}" class="nav_item n_07">开户行</router-link>
               </div>
             </div>
 
           <div class="nav_list">
             <div class="nav_list_box">
-              <van-cell style="border-radius: 6px;">
+              <van-cell :border="false" style="border-radius: 6px;">
                 <template #title>
                   <p style="font-weight: bold;font-size: 18px;display: inline-block">财务信息</p>
                 </template>
@@ -355,6 +298,9 @@
           &:nth-child(3){
             margin-top: 3vh;
           }
+          &:nth-child(4){
+            margin-top: 3vh;
+          }
           .van-cell{
             background: transparent;
           }
@@ -362,9 +308,10 @@
             display: flex;
             flex-flow: wrap;
             box-shadow: 0px 0px 18px rgba(63,68,75,0.2);
-            padding: 0 0 20PX;
+            /*padding: 0 0 20PX;*/
             border-radius: 15PX;
             overflow: hidden;
+            background: #ffffff;
           }
           .nav_box{
             box-shadow: 0px 0px 18px rgba(63,68,75,0.2);
@@ -405,7 +352,7 @@
                 &.n_4 {
                     background: url('../../assets/images/sunVillage_info/index_block_04.png') no-repeat center top;
                     background-size: 50%;
-                    // margin-bottom: 20PX;
+                    margin-bottom: 20PX;
                 }
                 &.n_5 {
                     background: url('../../assets/images/sunVillage_info/index_block_05.png') no-repeat center top;
@@ -415,12 +362,12 @@
                 &.n_6 {
                     background: url('../../assets/images/sunVillage_info/index_block_06.png') no-repeat center top;
                     background-size: 50%;
-                    // margin-bottom: 20PX;
+                    margin-bottom: 20PX;
                 }
                 &.n_7 {
                     background: url('../../assets/images/sunVillage_info/index_block_07.png') no-repeat center top;
                     background-size: 50%;
-                    // margin-bottom: 20PX;
+                    margin-bottom: 20PX;
                 }
                 &.n_8 {
                     background: url('../../assets/images/sunVillage_info/index_block_08.png') no-repeat center top;
@@ -436,7 +383,44 @@
                 &.n_10 {
                     background: url('../../assets/images/sunVillage_info/index_block_10.png') no-repeat center top;
                     background-size: 50%;
-                    // margin-bottom: 20PX;
+                    margin-bottom: 20PX;
+                }
+
+
+                &.n_01 {
+                  background: url('../../assets/images/sunVillage_info/index_icon_01.png') no-repeat center top;
+                  background-size: 50%;
+                  margin-bottom: 20PX;
+                }
+                &.n_02 {
+                  background: url('../../assets/images/sunVillage_info/index_icon_02.png') no-repeat center top;
+                  background-size: 50%;
+                  margin-bottom: 20PX;
+                }
+                &.n_03 {
+                  background: url('../../assets/images/sunVillage_info/index_icon_03.png') no-repeat center top;
+                  background-size: 50%;
+                  margin-bottom: 20PX;
+                }
+                &.n_04 {
+                  background: url('../../assets/images/sunVillage_info/index_icon_04.png') no-repeat center top;
+                  background-size: 50%;
+                  margin-bottom: 20PX;
+                }
+                &.n_05 {
+                  background: url('../../assets/images/sunVillage_info/index_icon_05.png') no-repeat center top;
+                  background-size: 50%;
+                  margin-bottom: 20PX;
+                }
+                &.n_06 {
+                  background: url('../../assets/images/sunVillage_info/index_icon_06.png') no-repeat center top;
+                  background-size: 50%;
+                  margin-bottom: 20PX;
+                }
+                &.n_07 {
+                  background: url('../../assets/images/sunVillage_info/index_icon_07.png') no-repeat center top;
+                  background-size: 50%;
+                  margin-bottom: 20PX;
                 }
             }
           .icon{