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

import { defineComponent, reactive, ref, watch } from 'vue'
import styles from './rank-item.module.less'
import defaultIcon from '@/school/images/student-icon.png'
export default defineComponent({
  props: ['item', 'type', 'index'],
  name: 'rank-item',
  setup(props) {
    return () => (
      <>
        <div>
          <div class={styles.itemRankWrap}>
            <div class={styles.wrapLeft}>
              <div class={styles.headerWrap}>
                <img src={props.item.avatar ? props.item.avatar : defaultIcon} alt="" />
              </div>
              <div>
                <p class={styles.studentName}>{props.item.nickname}</p>
                <div class={styles.myTag}>
                  {props.item.subjectNames ? props.item.subjectNames : '暂无声部'}
                </div>
              </div>
            </div>
            <div class={styles.wrapRight}>
              {props.item.ranking <= 50 ? (
                <p>
                  <span>我的排名</span>
                  {props.item.ranking <= 50 ? props.item.ranking : 0}
                </p>
              ) : (
                <p>
                  {' '}
                  <span>暂无排名</span>
                </p>
              )}
            </div>
          </div>
          <div class={styles.wall}></div>
        </div>
      </>
    )
  }
})