novel-front-app/components/novel/RankListItem.vue

<template>
  <view class="rank-item">
    <view class="rank-left">
      <image v-if="rankIcon" :src="rankIcon" class="rank-icon" />
      <image v-else-if="rankNumImg" :src="rankNumImg" class="rank-num-img" />
      <slot name="rankNum" v-else />
      <image v-if="medal" :src="medal" class="medal" />
      <image class="avatar" :src="avatar" mode="aspectFill" />
      <view class="name">{{ name }}</view>
    </view>
    <view class="rank-right">
      <view class="score">{{ score }} 亲密值</view>
      <view class="level">{{ level }}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'RankListItem',
  props: {
    rankIcon: String, // 排名图片（前3名）
    rankNumImg: String, // 排名数字图片（4-10名）
    medal: String, // 勋章图片
    avatar: String,
    name: String,
    score: [String, Number],
    level: {
      type: String,
      default: '护书使者 五级'
    }
  }
}
</script>

<style lang="scss" scoped>
.rank-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fffbe6;
  border-radius: 16rpx;
  margin-bottom: 18rpx;
  box-shadow: 0 2rpx 8rpx 0 rgba(184,110,59,0.06);
  padding: 0 24rpx;
  height: 100rpx;
  .rank-left {
    display: flex;
    align-items: center;
    .rank-icon, .rank-num-img {
      width: 38rpx;
      height: 38rpx;
      margin-right: 10rpx;
    }
    .medal {
      width: 44rpx;
      height: 44rpx;
      margin-right: 10rpx;
    }
    .avatar {
      width: 44rpx;
      height: 44rpx;
      border-radius: 50%;
      margin-right: 14rpx;
      border: 2rpx solid #ffd700;
      object-fit: cover;
    }
    .name {
      font-size: 26rpx;
      color: #222;
      font-weight: 500;
    }
  }
  .rank-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    .score {
      font-size: 22rpx;
      color: #b86e3b;
    }
    .level {
      font-size: 20rpx;
      color: #fff;
      background: #e6b07c;
      border-radius: 8rpx;
      padding: 2rpx 10rpx;
      margin-top: 6rpx;
      font-weight: 500;
    }
  }
}
</style>