orchestra-app/src/student/ranking-list/modals/rank-item.tsx

import { defineComponent, reactive, ref, watch } from 'vue'
import { Image } from 'vant'
import styles from './rank-item.module.less'
import defaultIcon from '@/school/images/student-icon.png'
import firstIcon from '../images/first.png'
import secondIcon from '../images/second.png'
import thirdIcon from '../images/third.png'
export default defineComponent({
  props: ['item', 'type', 'index'],
  name: 'rank-item',
  setup(props) {
    return () => (
      <>
        <div>
          <div class={styles.itemWrap}>
            <div class={styles.wrapLeft}>
              <div class={styles.numWrap}>
                {props.index == 1 ? <img src={firstIcon} alt="" /> : null}
                {props.index == 2 ? <img src={secondIcon} alt="" /> : null}
                {props.index == 3 ? <img src={thirdIcon} alt="" /> : null}
                {props.index > 3 ? <p>{props.index}</p> : null}
              </div>
              <div class={styles.headerWrap}>
                <Image
                  width="100%"
                  height="100%"
                  src={props.item.avatar ? props.item.avatar : defaultIcon}
                  alt=""
                  fit="cover"
                />
              </div>
              <div>
                <p class={styles.studentName}>{props.item.nickname}</p>
                <div class={styles.tag}>
                  {props.item.subjectNames ? props.item.subjectNames : '暂无声部'}
                </div>
              </div>
            </div>
            <div class={styles.wrapRight}>
              {props.type == 'day' ? (
                <p>
                  <span>{props.item.practiceDays ? props.item.practiceDays : 0}</span> 天
                </p>
              ) : (
                <p>
                  <span>{props.item.practiceTimes ? props.item.practiceTimes : 0}</span> 分钟
                </p>
              )}
            </div>
          </div>
        </div>
      </>
    )
  }
})