<template>
  <view class="student-info"  >
    <image class="ava" :src="require('@/static/image/ava.jpg')" />
    <view class="content-info" >
      <view class="top" >
        <view class="name" >{{itemData.babyName}}</view>
    
      </view>
        <view class="apply-count" >
          参赛号：{{itemData.competitionNo}}
        </view>
      <!-- <view class="bottom" >
        <view class="score" >成绩：{{itemData.score}}分</view>
        <view class="time" >/用时: {{itemData.time}}秒</view>
      </view> -->
    </view>
  </view>
</template>

<script>
export default {
  name: 'student-info',
  props: {
    itemData: {
      type: Object,
      require: true
    }
  }
}
</script>

<style lang="less" scoped>
.student-info {
  display: flex;
  align-items: center;
  .ava {
    width: 104rpx;
    height: 104rpx;
    border-radius: 50%;
    margin-right: 22rpx;
  }
  .content-info {
    .top {
      display: flex;
      align-items: center;
      .name {
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        margin-right: 8rpx;
      }

    }
    .apply-count {
        padding: 0 12rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #F2F4FF;
        border-radius: 18rpx;
        font-size: 20rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(22, 119, 255, 0.8);
        margin-top: 8rpx;
    }
    // .bottom {
    //   font-size: 24rpx;
    //   font-family: PingFangSC-Regular, PingFang SC;
    //   font-weight: 400;
    //   color: #666666;
    //   display: flex;
    //   .score {
        
    //   }
    // }
  }
}
</style>
