【微信小程序-原生开发】TDesign 实战模板——带性别图标的头像

<view class="avatarBox center">
      <t-avatar bindtap="previewImage" data-url="{{detail.avatarUrl}}" wx:if="{{detail.avatarUrl}}" image="{{detail.avatarUrl}}" />
      <t-avatar wx:else icon="user" />
      <view class="genderBox boy" wx:if="{{detail.gender === '1'}}">
        <t-icon name="gender-male" />
      </view>
      <view class="genderBox girl" wx:if="{{detail.gender === '2'}}">
        <t-icon name="gender-female" />
      </view>
    </view>

.genderBox {
  position: absolute;
  right: 50rpx;
  bottom: 10rpx;
  border-radius: 50%;
  color: white;
  padding: 8rpx;
  box-sizing: border-box;
}

.center {
  text-align: center;
}

.avatarBox {
  position: relative;
  width: 300rpx;
  margin: 60rpx auto 30rpx auto;
}

.girl {
  background-color: pink;
}

.boy {
  background-color: #027CBE;
}