nsgk_mobile/src/views/onlineHome/mailList.vue

<template>
  <div class="app-container">
    <van-nav-bar
      title="通讯录"
      left-arrow
      @click-left="$router.back(-1)"
    />
    <van-row style="margin-top: 20px">
      <van-col span="16" :offset="2">
        <h3>张村村民联系方式</h3>
      </van-col>
    </van-row>
    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
      <van-cell v-for="item in list">
        <template #icon>
          <p style="color: #fff;line-height:14px;background: #1D6FE9;padding:8px 3px;height: 30px;border-radius: 8px;display: inline-block">{{item.name.substring(item.name.length-2)}}</p>
        </template>
        <template #title>
          <van-row>
            <van-col span="5" :offset="1">
              <h3 style="line-height: 30px">{{item.name}}</h3>
            </van-col>
            <van-col span="5" :offset="1">
              <h3 style="line-height: 30px;color: #878787">{{item.phone}}</h3>
            </van-col>
            <van-col span="2" :offset="10">
              <van-image
                height="30"
                width="20"
                src="../../../static/images/onlineHome/phone.png"></van-image>
            </van-col>
          </van-row>
        </template>
      </van-cell>
    </van-cell-group>
    <onlineHomeIndex></onlineHomeIndex>
  </div>
</template>

<script>
  import onlineHomeIndex from "../onlineHomeIndex";

  export default {
    components: {
      onlineHomeIndex
    },
    name: "mailList",
    data() {
      return {
        activeName: 'a',
        list: [
          {name:"张友全",phone:"13306311234"},
          {name:"张友全",phone:"13306311234"},
          {name:"张友全",phone:"13306311234"},
          {name:"张友全",phone:"13306311234"},
          {name:"张友全",phone:"13306311234"},
          {name:"张友全",phone:"13306311234"},
          {name:"张友全",phone:"13306311234"},
          {name:"张友全",phone:"13306311234"},
          {name:"张友全",phone:"13306311234"},
          {name:"张友全",phone:"13306311234"},
          {name:"张友全",phone:"13306311234"},
          {name:"张友全",phone:"13306311234"},
          {name:"张友全",phone:"13306311234"},
          {name:"张友全",phone:"13306311234"},
          {name:"张友全",phone:"13306311234"},
          {name:"张友全",phone:"13306311234"},
          {name:"张友全",phone:"13306311234"},
          {name:"张友全",phone:"13306311234"},
          ],
        loading: false,
        finished: false,
        result:[],

      };
    },
    methods: {

    },
  }
</script>

<style scoped>
</style>