【微信小程序-原生开发】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;
}