invitee.vue

<template>
  <div class="invitee">
    <div class="baseInfo">
      <img class="avatar" src="@/assets/images/avatar.png" alt="用户头像" />
      <span class="userName">丁晓霞</span>
      <span style="font-size: 12px;color:#666666">西天森合伙人</span>
    </div>
    <div class="detail">
      <p>
        <span>客户来源</span>
        <span>直推</span>
      </p>
      <p>
        <span>累计消费金额</span>
        <span>￥1020</span>
      </p>
      <p>
        <span>当月消费金额</span>
        <span>￥360</span>
      </p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.invitee {
  height: 130px;
  margin-bottom: 10px;
  padding: 10px 16px;
  font-size: 16px;
  background-color: #f8f8f8;
  p {
    margin: 10px;
  }
  &:nth-child(1) {
    margin-top: 10px;
  }
}
.baseInfo {
  display: flex;
  align-items: center;
  padding-left: 10px;
  .avatar {
    width: 25px;
    height: 25px;
    border-radius: 50%;
  }
  .userName {
    margin: 0 10px;
    font-size: 16px;
    font-weight: bold;
  }
}
.detail {
  padding-left: 35px;
  padding-right: 10px;
  font-size: 14px;
  p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: PingFang-SC-Regular;
    color: #333333;
  }
}
</style>