meilan-app/src/components/UserInfo.vue

<template>
  <div>
    <div class="user-info">
      亲爱的，{{ name }}
    </div>

    <div v-if="subTitle || $scopedSlots.default" class="sub-title">
      <slot>{{ subTitle }}</slot>
    </div>
  </div>
</template>

<script>
import userIcon from "@/static/images/user-icon.png";

export default {
  props: {
    name: {
      type: String,
      default: ""
    },
    subTitle: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      userIcon,
    }
  },
}
</script>

<style lang="scss" scoped>
.user-info {
  padding: 4rpx 0 4rpx 130rpx;
  font-weight: 400;
  font-size: 48rpx;
  color: #FFFFFF;
  background: url("../static/images/user-icon.png") no-repeat;
  background-size: auto 100%;
}

.sub-title {
  padding: 28rpx 0;
  font-weight: 400;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.7);
  line-height: 40rpx;
}
</style>