通讯录列表样式

先上效果图，一个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>

接口返回的数据格式：