先上效果图，一个H5样式图，一个PC样式图

代码：

<template><div :class="screen>1280?'ms':'xs'"><div class="" v-for="(item,index) in listData" :key="index"><div class="xuhao">{{item.group}}</div><div class="flex flex-between" v-for="(i,j) in item.data" :key="j"><div class="flex libox"><div class="avatar flex1"><img v-if="i.profilePic" :src="i.profilePic" alt="" srcset=""><span v-if="!i.profilePic">{{i.name.slice(-2)}}</span><!-- 如果有头像就展示头像，否则展示名字(取名字最后两位展示) --></div><div class="flex flex-between flex-column lieditbox" style="align-items:flex-start;"><div>{{i.name}}</div><div class="colorgray">{{i.phone}}</div></div></div><div class="color"><span style="margin-right:10px;">编辑</span><span>删除</span></div></div></div></div>
</template>
<script>
import { getPlatformContact } from '@/api/PersonalCenter'
export default {data() {return {keyword: "",listData: [],screen: 0}},methods: {async getList(){let res = await getPlatformContact({searchValue: this.keyword});if (res.code == 200) {this.listData = res.data;}},setRem() {let deviceWidth = document.documentElement.clientWidth;this.screen = deviceWidth;},},mounted(){this.getList()this.setRem();window.addEventListener("resize", this.setRem);},beforeDestroy() {window.removeEventListener("resize", this.setRem);},
}
</script><style lang="scss">.color{color: #ef3c40;}.colorgray{color: #73797F;}.flex{display: flex;}.flex-between{justify-content: space-between;}.flex-column{flex-direction: column;}.flex1{display: flex;align-items: center;justify-content: center;}.xuhao{margin-bottom: 10px;font-size: 20px;font-weight: 400;margin-top: 20px;}.libox{margin-bottom: 10px;.lieditbox{height: 3rem;}.avatar{width: 3rem;height: 3rem;background: #ef3c40;border-radius: 4px;overflow: hidden;text-align: center;margin-right: 8px;img {width: 100%;height: 100%;}span{color: #fff;}}}.xs{font-size: 0.28rem;padding: 0.48rem;.libox{.avatar{width: 1rem;height: 1rem;}.lieditbox{height: 1rem;}}}
</style>

 

接口返回的数据格式：