contract/src/components/contactBlock.vue

<template>
  <div @click="handleClick(userData)" class="contact-container clearfix">
    <img class="user-profile" :src="userData.userImg||require('../../static/contact/myavt.png')">
    <p class="user-name">{{userData.username}}<span class="user-realname">{{userData.userRealname}}</span></p>
    <p class="phone">{{userData.phone}}</p>
  </div>
</template>

<script>
    export default {
        name: "contactBlock",
      props:['userData'],
      methods:{
          handleClick(user){
            this.$emit('click',user)
          }
      }
    }
</script>

<style scoped>
  .contact-container{
    width: 100%;
    height: 1.7rem;
    background-color: white;
    box-shadow: 0rem 0rem 0.3rem 0.1rem
    rgba(96, 192, 255, 0.35);
    border-radius: 0.1rem;
    margin-top: 0.4rem;

  }
  .user-profile{
    float: left;
    width: 1.2rem;
    height: 1.2rem;
    margin:0.25rem 0.3rem;

  }
  .user-name{
    font-size: 0.4rem;
    line-height: 0.6rem;
    color:#1491e2;
    margin-top: 0.3rem;
    text-align: left;
  }
  .user-realname{
    height: 0.6rem;
    font-size: 0.3rem;
    color: white;
    background-color:  #60c0ff;
    border-radius: 0.3rem;
    padding: 0.1rem 0.15rem;
    margin-left: 0.3rem;
  }
  .phone{
    text-align: left;
    margin-top: 0.05rem;
    font-size: 0.4rem;
    color: #666666;
  }
</style>