colexiu-project/src/components/musicLIstItem/index.tsx

import { defineComponent,reactive } from 'vue'
import icon from '../videoDetailItem/images/icon.png'
import classes from './index.module.less'
import detaile from './images/detaile.png'
import music from './images/music.png'
import arrow from './images/arrow.png'

export default defineComponent({
  name: 'musicLIstItem',
  props: {
    detail: {
      type: Object,
      default: {
        albumRow: 0,
        auditStatus: '',
        chargeType: '',
        createBy: 0,
        idAndName: '',
        musicTagIds: '',
        order: '',
        page: 0,
        platform: '',
        rows: 0,
        search: '',
        sheetRow: 0,
        sort: '',
        sourceType: '',
        state: '',
        subjectIds: '',
        version: ''
      }
    }
  },
  setup(props) {
    const state = reactive({
      detail:props.detail
    })
    return () => (
      <>
        <div>
          <div class={classes.itemWrap}>
            <div class={classes.left}>
              <div class={classes.imgWrap}>
                <img src={music} alt="" />
              </div>
              <div class={classes.textWrap}>
                <p>
                 {state.detail.musicSheetName} <span>作曲: {state.detail.composer}</span>
                </p>
                <div class={classes.authorInfo}>
                  <img class={classes.icon} src={ state.detail.addUserAvatar?state.detail.addUserAvatar: icon} alt="" />
                  <span class={ classes.authorName}>{state.detail.addName}</span>
                  <div class={classes.tagList}>
                    <div class={classes.tag}>单簧管</div>
                    <div class={classes.tag}>圆号</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class={classes.right}>
            <div class={classes.touchButton}>点播</div>
            <img class={classes.arrow} src={arrow} alt="" />
          </div>
        </div>
      </>
    )
  }
})