nsgk_mobile/src/views/onlineHome/farmerPortrait.vue

<template>
  <div class="app-container">
    <van-nav-bar
      title="村民画像"
      left-arrow
      @click-left="$router.back(-1)"
    >
    </van-nav-bar>
    <van-list
      finished-text="没有更多了"
      >
      <van-swipe-cell v-for="(item,index) in list" :key="index">
        <van-cell :title="'户编号：'+item.name1" center class="van-cell-group">
          <template #icon>
            <van-icon name="../../../static/images/onlineHome/myIcon1.png" size="22" color="#FF4646" style="margin-right: 10px;" />
          </template>
          <template #label>
            <p><span>{{item.name2}}</span><i style="margin-right: 30px;"></i>{{item.name3}}<i style="margin-right: 30px;"></i>{{item.name4}}</p>
          </template>
        </van-cell>
      </van-swipe-cell>
    </van-list>
  </div>
</template>

<script>
  import onlineHomeIndex from "../onlineHomeIndex";
  export default {
    components: {
      onlineHomeIndex
    },
    name: "farmerPortrait",
    data() {
      return {
        list:[{name1:'53123123123123',name2:'张三',name3:'男',name4:'53岁'},
          {name1:'53123123123123',name2:'张三',name3:'男',name4:'53岁'},
          {name1:'53123123123123',name2:'张三',name3:'男',name4:'53岁'},
          {name1:'53123123123123',name2:'张三',name3:'男',name4:'53岁'},
          {name1:'53123123123123',name2:'张三',name3:'男',name4:'53岁'},
          {name1:'53123123123123',name2:'张三',name3:'男',name4:'53岁'},
          {name1:'53123123123123',name2:'张三',name3:'男',name4:'53岁'},
          {name1:'53123123123123',name2:'张三',name3:'男',name4:'53岁'},
          {name1:'53123123123123',name2:'张三',name3:'男',name4:'53岁'}],
        finished: false,
        loading: false,
      };
    },
    methods: {
      getList(){
      },
    },
  }
</script>

<style scoped>
  >>> .van-cell-group{
    width: 96%;margin:1% 2%;border-radius: 8px;overflow: hidden;padding-top: 20px;padding-bottom: 20px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
  }
</style>