colexiu-project/src/views/home/index.tsx

// import { PaperClipIcon } from '@heroicons/vue/solid'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import albumItem from '@/components/albumItem'
import videoDetailItem from '@/components/videoDetailItem'
import musicLIstItem from '@/components/musicLIstItem'
import titleDot from './images/titleDot.png'
import hotSearch from '@/components/hotSearch'
export default defineComponent({
  name: 'home',
  components: {
    albumItem,
    videoDetailItem,
    musicLIstItem,
    hotSearch
  },
  render() {
    return (
      <div class="bg-white">
        轮播图
        <div class="container mx-auto">
          <div class={styles.section}>
            <div class={styles.titleWrap}>
              <img src={titleDot} class={styles.dotImg} alt="" />
              <h4>热门专辑</h4>
              <img src={titleDot} class={styles.dotImg} alt="" />
            </div>
            <hotSearch></hotSearch>
            <div class={styles.albumList}>
              <albumItem></albumItem>
              <albumItem></albumItem>
              <albumItem></albumItem>
              <albumItem></albumItem>
              <albumItem></albumItem>
              <albumItem></albumItem>
              <albumItem></albumItem>
              <albumItem></albumItem>
              <albumItem></albumItem>
              <albumItem></albumItem>
            </div>
          </div>

          <albumItem></albumItem>
          <videoDetailItem></videoDetailItem>
          <musicLIstItem></musicLIstItem>
        </div>
      </div>
    )
  }
})