nsgk_mobile/src/views/contracted/village/contractor/contractor.vue

<template>
  <div class="app-container">

    <van-nav-bar title="B村" left-arrow fixed placeholder @click-left="$router.push({path:'/contracted/index'})" />

    <div class="tap_block">
      <p class="active">承包方</p>
      <p @click="$router.push({path:'/contracted/village/employer'})">发包方</p>
      <p @click="$router.push({path:'/contracted/village/massif'})">地块</p>
      <p @click="$router.push({path:'/contracted/village/map'})">地图</p>
    </div>

    <div class="search_main">

      <van-search
        v-model="value"
        shape="round"
        background="transparent"
        placeholder="请输入姓名搜索"
        @search="onSearch"
      ></van-search>

      <div class="search_btn">
        <p class="active"> + 新增</p>
      </div>

    </div>

    <div class="second_tap">
      <p class="active">待调查 1553</p>
      <p>挂起 527</p>
      <p>已完成 321</p>
    </div>

    <div class="list_main">
      <van-row style="color: #888888;font-size: 14px;">
        <van-col span="5">姓名</van-col>
        <van-col span="14">证件号</van-col>
        <van-col span="5">成员数</van-col>
      </van-row>
      <van-swipe-cell v-for="(item,index) in 50">
        <van-row @click="goDetail">
          <van-col span="5">张三</van-col>
          <van-col span="14">230381199770511239</van-col>
          <van-col span="5" style="color: #f78200">7</van-col>
        </van-row>
        <template #right>
          <van-button square type="danger" text="删除" />
        </template>
      </van-swipe-cell>
    </div>


  </div>
</template>
<script>
  import Cookies from "js-cookie";
  export default {
    name: "contractedVillageContractor",
    data() {
      return {
        loading:false,
        finished:true,
        value:''
      };
    },
    created() {

    },
    methods: {
      getList(){

      },
      onSearch(){

      },
      goDetail(){
        this.$router.push({path:'/contracted/village/contractorDetail'});
      }
    },
  };
</script>
<style scoped lang="scss">

  .app-container{
    background: #fff url("../../../../../static/images/contracted/contracted_index_bg.png") no-repeat center;
    background-size: 100% 100%;
    height: 100vh;
    padding: 0 4vw;
  }

  /deep/ .van-nav-bar{
    background: transparent;
  }

  /deep/ .van-nav-bar .van-icon{
    color: #000000;
  }

  /deep/ .van-hairline--bottom::after{
    border: none;
  }

  /deep/ .van-search__content{
    background: rgba(255,255,255,.5);
  }
  /deep/ .van-search{
    padding: 0;
    flex: 1;
  }

  .tap_block{
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: #ebfaf2;
    padding: 2PX 4PX;
    border-radius: 10PX;
    margin-top: 1vh;
    .active{
      background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
      box-shadow: 0 0 10PX #cccccc;
      color: #333333;
    }
    p{
      width: 25%;
      text-align: center;
      padding: 5PX 0;
      border-radius: 10PX;
      color: #666666;
    }
  }

  .search_main{
    display: flex;
    margin-top: 2vh;
    .search_btn{
      background: rgba(255,255,255,.5);
      width: 25%;
      border-radius: 50PX;
      margin-left: 10PX;
      padding: 2PX;
      .active{
        background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
        color: #333333;
        border-radius: 50PX;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      }
    }
  }

  .second_tap{
    display: flex;
    align-items: center;
    margin-top: 1vh;
    p{
      background: #dbf1ea;
      border: 1px solid #cdcdcd;
      color: #5f5f5f;
      padding: 5PX 15PX;
      margin-right: 3vw;
      border-radius: 50PX;
    }
    .active{
      background: #99eecb;
      border-color: #48e5a2;
      color: #333333;
    }
  }

  .list_main{
    margin-top: 2vh;
    overflow-y: scroll;
    text-align: center;
    background: #ffffff;
    border-top-left-radius: 10PX;
    border-top-right-radius: 10PX;
    height: 77vh;
    overflow-y: scroll;
    .van-col{
      padding: 15PX 0;
    }
  }

</style>