mobile/src/components/user-space.vue

<template>
  <view class="user-space flex items-center">
    <view class="icon-box flex justify-center items-center">
      <!-- <u-icon name="account-fill" size="40" color="#BFBFBF"></u-icon> -->
      <open-data type="userAvatarUrl" style="width: 100%; height: 100%"></open-data>
    </view>
    <text class="u-name">刘洋</text>
  </view>
</template>

<script>
  export default {
    name: 'UserSpace'
  }
</script>

<style lang="scss" scoped>
  .user-space {
    height: 100rpx;
    padding: 0 24rpx;
    .icon-box {
      width: 64rpx;
      height: 64rpx;
      border-radius: 8rpx;
      background-color: #f0f0f0;
      overflow: hidden;
    }
    .u-name {
      font-size: 36rpx;
      color: #262626;
      margin-left: 16rpx;
      font-weight: bold;
    }
  }
</style>