detail-item.tsx 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. import { defineComponent, reactive, ref } from 'vue'
  2. import styles from './detail-item.module.less'
  3. import defaultIcon from '@/school/images/default-icon.jpg'
  4. import msgIcon from '@/school/images/msg-icon.png'
  5. import sendmsgIcon from '@/school/images/sendmsg-icon.png'
  6. import phoneIcon from '@/school/images/phone-icon.png'
  7. import { Icon, ActionSheet } from 'vant'
  8. export default defineComponent({
  9. props: ['item'],
  10. name: 'detail-item',
  11. setup(props) {
  12. return () => (
  13. <>
  14. <div>
  15. <div class={styles.itemWrap}>
  16. <div class={styles.itemTop}>
  17. <div class={styles.itemTopLeft}>
  18. <p class={styles.itemTopMain}>{props.item.musicSheetName}</p>
  19. <p class={styles.itemTopSub}>{props.item.createTime}</p>
  20. </div>
  21. <div class={styles.itemTopRight}>
  22. <div class={styles.imgWrap}>
  23. <img src="" alt="" />
  24. </div>
  25. <Icon name="arrow" class={styles.imgIcon} />
  26. </div>
  27. </div>
  28. <div class={styles.itemBottom}>
  29. <div class={styles.itemBottomDot}>
  30. <p class={styles.dotMain} style={{ color: '#F67146' }}>
  31. {props.item.score} <span>分</span>{' '}
  32. </p>
  33. <p class={styles.dotSub}> 综合得分</p>
  34. </div>
  35. <div class={styles.itemBottomDot}>
  36. <p class={styles.dotMain}>
  37. {props.item.intonation}
  38. <span>分</span>{' '}
  39. </p>
  40. <p class={styles.dotSub}>音准 </p>
  41. </div>
  42. <div class={styles.itemBottomDot}>
  43. <p class={styles.dotMain}>
  44. {props.item.cadence} <span>分</span>{' '}
  45. </p>
  46. <p class={styles.dotSub}>节奏 </p>
  47. </div>
  48. <div class={styles.itemBottomDot}>
  49. <p class={styles.dotMain}>
  50. {props.item.integrity} <span>分</span>{' '}
  51. </p>
  52. <p class={styles.dotSub}>完成度 </p>
  53. </div>
  54. </div>
  55. </div>
  56. </div>
  57. </>
  58. )
  59. }
  60. })