<template>
    <div class="app-container">
      <van-nav-bar
        title="网上家园"
      >
        <template #left>
            <van-icon name="location" color="3A80FB" size="16"/>
          <p  style="color: #878787;margin-left: 5px">柳沟村</p>
        </template>
        <template #right>
          <van-icon name="wap-nav" color="#000" size="18"/>
        </template>
      </van-nav-bar>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" style="width: 96%;margin: 2%;height:120px;border-radius: 6px;">
        <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
      </van-swipe>
      <van-row style="margin:2%;width:96%;padding:20px 0;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16); min-height: 100px;background: #fff;">
        <van-cell style="border-radius: 6px;">
          <template #title>
            <p style="display:inline-block;background: #EC4B2C;height:20px;width: 20px;border-radius: 2px;margin-right: 10px;float: left"></p>
            <p style="font-weight: bold;font-size: 18px;display: inline-block">待办</p>
          </template>
          <template #label>
            <p>暂无代办</p>
          </template>
        </van-cell>
      </van-row>
      <van-row style="margin:2%;width:96%;padding:20px 0;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);background: #fff">
        <van-cell style="border-radius: 6px;">
          <template #title>
            <p style="display:inline-block;background: #FFA63E;height:20px;width: 20px;border-radius: 2px;margin-right: 10px;float: left"></p>
            <p style="font-weight: bold;font-size: 18px;display: inline-block">业务申请</p>
          </template>
        </van-cell>
          <van-grid :gutter="10" :border="false">
            <van-grid-item text="用章申请" >
              <div slot="default" style="background:#FFA63E;padding: 10px;text-align:center;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px" >
                <img src="../../../static/images/onlineHome/icon1.png" style="height: 25px;vertical-align: center;" alt />
              </div>
              <p style="margin-top: 5px;color: #666666;">用章申请</p>
            </van-grid-item>
            <van-grid-item text="宅基地申请" >
              <div slot="default">
                <div style="background:#539FFD;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px">
                  <img src="../../../static/images/onlineHome/icon2.png" style="width: 25px" alt />
                </div>
              </div>
              <p style="margin-top: 5px;color: #666666;">宅基地申请</p>
            </van-grid-item>
            <van-grid-item text="宅基地流转" >
              <div slot="default">
                <div style="background:#FFA63E;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                  <img src="../../../static/images/onlineHome/icon3.png" style="width: 25px;margin-top:5px;display: inline-block" alt />
                </div>
              </div>
              <p style="margin-top: 5px;color: #666666;">宅基地流转</p>
            </van-grid-item>
            <van-grid-item text="宅基地退出" >
              <div slot="default">
                <div style="background:#539FFD;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                  <img src="../../../static/images/onlineHome/icon4.png" style="width: 25px" alt />
                </div>
              </div>
              <p style="margin-top: 5px;color: #666666;">宅基地退出</p>
            </van-grid-item>
            <van-grid-item text="付款申请" >
              <div slot="default">
                <div style="background:#FF4646;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                  <img src="../../../static/images/onlineHome/icon5.png" style="width: 25px" alt />
                </div>
              </div>
              <p style="margin-top: 5px;color: #666666;">付款申请</p>
            </van-grid-item>
            <van-grid-item text="项目申报" >
              <div slot="default">
                <div style="background:#FF6464;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                  <img src="../../../static/images/onlineHome/icon6.png" style="width: 25px" alt />
                </div>
              </div>
              <p style="margin-top: 5px;color: #666666;">项目申报</p>
            </van-grid-item>
            <van-grid-item text="拨付申请" >
              <div slot="default">
                <div style="background:#FF7E45;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                  <img src="../../../static/images/onlineHome/icon7.png" style="width: 25px" alt />
                </div>
              </div>
              <p style="margin-top: 5px;color: #666666;">拨付申请</p>
            </van-grid-item>
            <van-grid-item text="验收申请" >
              <div slot="default">
                <div style="background:#7DDA4F;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                  <img src="../../../static/images/onlineHome/icon8.png" style="width: 25px" alt />
                </div>
              </div>
              <p style="margin-top: 5px;color: #666666;">验收申请</p>
            </van-grid-item>
          </van-grid>
      </van-row>
      <van-row  style="margin:2%;width:96%;padding:20px 0;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);background: #fff">
        <van-cell style="border-radius: 6px;">
          <template #title>
            <p style="font-weight: bold;font-size: 18px;display: inline-block">农村三资管理</p>
          </template>
        </van-cell>
        <van-grid :gutter="10" :border="false">
          <van-grid-item text="支出明细" to="expenditureDetail">
            <div slot="default" style="background:#FF4646;padding: 10px;text-align:center;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px" >
              <img src="../../../static/images/onlineHome/icon9.png" style="height: 25px;vertical-align: center;" alt />
            </div>
            <p style="margin-top: 5px;color: #666666;">支出明细</p>
          </van-grid-item>
          <van-grid-item text="收入明细" to="incomeDetail">
            <div slot="default">
              <div style="background:#FF4646;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px">
                <img src="../../../static/images/onlineHome/icon9.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">收入明细</p>
          </van-grid-item>
          <van-grid-item text="收支明细" to="inAndOutDetail">
            <div slot="default">
              <div style="background:#FF4646;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon9.png" style="width: 25px;" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">收支明细</p>
          </van-grid-item>
          <van-grid-item text="现金银行" >
            <div slot="default">
              <div style="background:#3AC2DB;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon10.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">现金银行</p>
          </van-grid-item>
        </van-grid>
      </van-row>
      <van-row  style="margin:2%;width:96%;padding:20px 0;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);background: #fff">
        <van-cell style="border-radius: 6px;">
          <template #title>
            <p style="font-weight: bold;font-size: 18px;display: inline-block">农村产权交易管理</p>
          </template>
        </van-cell>
        <van-grid :gutter="10" :border="false">
          <van-grid-item text="挂牌项目" >
            <div slot="default" style="background:#FF4646;padding: 10px;text-align:center;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px" >
              <img src="../../../static/images/onlineHome/icon6.png" style="width: 25px;" alt />
            </div>
            <p style="margin-top: 5px;color: #666666;">挂牌项目</p>
          </van-grid-item>
          <van-grid-item text="成交公示" >
            <div slot="default">
              <div style="background:#C5685F;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px">
                <img src="../../../static/images/onlineHome/icon11.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">成交公示</p>
          </van-grid-item>
          <van-grid-item text="合同管理" >
            <div slot="default">
              <div style="background:#539FFD;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon12.png" style="width: 25px;" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">合同管理</p>
          </van-grid-item>
          <van-grid-item text="招标管理" >
            <div slot="default">
              <div style="background:#3AC2DB;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon13.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">招标管理</p>
          </van-grid-item>
        </van-grid>
      </van-row>
      <van-row  style="margin:2%;width:96%;padding:20px 0;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);background: #fff">
        <van-cell style="border-radius: 6px;">
          <template #title>
            <p style="font-weight: bold;font-size: 18px;display: inline-block">农村产权交易管理</p>
          </template>
        </van-cell>
        <van-grid :gutter="10" :border="false">
          <van-grid-item text="宅基地申请" >
            <div slot="default" style="background:#539FFD;padding: 10px;text-align:center;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px" >
              <img src="../../../static/images/onlineHome/icon2.png" style="width: 25px;" alt />
            </div>
            <p style="margin-top: 5px;color: #666666;">宅基地申请</p>
          </van-grid-item>
          <van-grid-item text="证书打印" >
            <div slot="default">
              <div style="background:#7790FE;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px">
                <img src="../../../static/images/onlineHome/icon12.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">证书打印</p>
          </van-grid-item>
          <van-grid-item text="公示查询" >
            <div slot="default">
              <div style="background:#C5685F;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon11.png" style="width: 25px;" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">公示查询</p>
          </van-grid-item>
          <van-grid-item text="巡查执法" >
            <div slot="default">
              <div style="background:#1D6FE9;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon16.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">巡查执法</p>
          </van-grid-item>
          <van-grid-item text="村庄规划" >
            <div slot="default">
              <div style="background:#FFCE05;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px">
                <img src="../../../static/images/onlineHome/icon17.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">村庄规划</p>
          </van-grid-item>
          <van-grid-item text="基础档案" >
            <div slot="default">
              <div style="background:#FF7E45;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon18.png" style="width: 25px;" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">基础档案</p>
          </van-grid-item>
          <van-grid-item text="盘活利用" >
            <div slot="default">
              <div style="background:#7DDA4F;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon19.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">盘活利用</p>
          </van-grid-item>
        </van-grid>
      </van-row>
      <van-row  style="margin:2%;width:96%;padding:20px 0;padding:20px 0;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);background: #fff">
        <van-cell style="border-radius: 6px;">
          <template #title>
            <p style="font-weight: bold;font-size: 18px;display: inline-block">农村产权制度改革管理</p>
          </template>
        </van-cell>
        <van-grid :gutter="10" :border="false">
          <van-grid-item text="财务管理" >
            <div slot="default" style="background:#FF4646;padding: 10px;text-align:center;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px" >
              <img src="../../../static/images/onlineHome/icon6.png" style="width: 25px;" alt />
            </div>
            <p style="margin-top: 5px;color: #666666;">财务管理</p>
          </van-grid-item>
          <van-grid-item text="资产管理" >
            <div slot="default">
              <div style="background:#FF6464;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px">
                <img src="../../../static/images/onlineHome/icon11.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">资产管理</p>
          </van-grid-item>
          <van-grid-item text="合同管理" >
            <div slot="default">
              <div style="background:#539FFD;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon12.png" style="width: 25px;" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">合同管理</p>
          </van-grid-item>
          <van-grid-item text="股权管理" >
            <div slot="default">
              <div style="background:#FFA63E;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon13.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">股权管理</p>
          </van-grid-item>
        </van-grid>
      </van-row>
      <onlineHomeIndex></onlineHomeIndex>
    </div>
</template>

<script>
  import onlineHomeIndex from "../onlineHomeIndex";
    export default {
      components: {
        onlineHomeIndex
      },
        name: "workbench",
      data() {
        return {
          list1: [],

        };
      },
    }
</script>

<style scoped>
    >>>.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 144px;
    text-align: center;
    background-color: #39a9ed;
  }
  >>>.van-grid-item__content{
    padding:0.213333rem;
  }
  >>>.van-cell::after{
    border: none;
  }
  >>>.app-container{
    padding:0;
  }
</style>
