import { defineComponent } from "vue";
import { getImage } from "./images";
import styles from './index.module.less'

export default defineComponent({
    name: 'accompany-category',
    setup(props, ctx) {
        const svgs = [
            {
                icon: getImage('l1.png'),
                title: '声部训练',
                subtitle: '乐器基础，巩固自己的基本功'
            },
            {
                icon: getImage('l2.png'),
                title: '合奏训练',
                subtitle: '团队协作，加强协调配合能力'
            },
            {
                icon: getImage('l3.png'),
                title: '独奏曲目',
                subtitle: '热播金曲，练习更加有趣'
            },
        ]
        return () => (
            <div class={styles.accompanyCategory}>
                {svgs.map((item: any) => {
                    return (
                        <div class={styles.container} style={{backgroundImage: `url(${item.icon})`}}>
                            {/* <img src={item.icon} /> */}
                        </div>
                    )
                })}
            </div>
        )
    },
})