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

export default defineComponent({
  name: 'music-room',
  setup() {
    return () => (
      <div class={styles.coPerson}>
        <div class={styles.section1}>
          <div class={[styles.title]}>
            <span>演奏Mlog达人</span>
          </div>
          <div class={styles.content}>
            展示个人演奏风采，吸引学员约课。个人风采资料填写、演奏视频上传
          </div>

          <img
            src="https://oss.dayaedu.com/klx/1699439433898img1.png"
            class={'w100'}
          />
        </div>

        <div class={styles.section2}>
          <div class={[styles.title]}>
            <span>教学视频达人</span>
          </div>
          <div class={styles.content}>
            可自行创建上传演奏教学的课程组，学员可购买或免费观看课程。可查看已上传视频课，创建与设置视频课参数
          </div>

          <img
            src="https://oss.dayaedu.com/klx/1699439493307img2.png"
            class={'w100'}
          />
        </div>

        <div class={styles.section3}>
          <div class={[styles.title]}>
            <span>直播UP达人</span>
          </div>
          <div class={styles.content}>
            可开启演奏live直播，与粉丝互动。可自行创建收费课程的慕课，邀请学员购买或免费观看课程
          </div>

          <img
            src="https://oss.dayaedu.com/klx/1699439513817img3.png"
            class={'w100'}
          />
        </div>

        <div class={styles.section4}>
          <i class={styles.iconTip}></i>
          <div class={[styles.title]}>
            <span>乐谱歌单达人</span>
          </div>
          <div class={styles.content}>上传分享曲谱伴奏，可自由定价曲目</div>

          <img
            src="https://oss.dayaedu.com/klx/1699521877106img4.png"
            class={'w100'}
          />
        </div>
      </div>
    );
  }
});
