import { defineComponent } from 'vue';
import styles from './index.module.less';
import img1 from '../images/music-room/img1.png';
import img2 from '../images/music-room/img2.png';
import img3 from '../images/music-room/img3.png';
import img4 from '../images/music-room/img4.png';

export default defineComponent({
  name: 'music-room',
  setup() {
    return () => (
      <div class={styles.musicRoom}>
        <div class={styles.section1}>
          <div class={[styles.title]}>
            <span>教学资源</span>
          </div>
          <div class={styles.content}>
            教学资源即拿即用，原创资源共享，使您优秀的教学方式影响更多人
          </div>

          <img src={img1} class={'w100'} />
        </div>

        <div class={styles.section2}>
          <div class={[styles.title]}>
            <span>课后作业</span>
          </div>
          <div class={styles.content}>
            练习、评测两种作业模式混合练习，让学生的作业不再枯燥。学生演奏问题精准呈现，老师因地制宜
          </div>

          <img src={img2} class={'w100'} />
        </div>

        <div class={styles.section3}>
          <div class={[styles.title]}>
            <span>家校互通</span>
          </div>
          <div class={styles.content}>
            班级群聊、老师联系人即时沟通，在家练习遇到困难随时请教，不限时间、不限地点，老师就在你身边
          </div>

          <img src={img3} class={'w100'} />
        </div>

        <div class={styles.section4}>
          <div class={[styles.title, styles.title1]}>
            <span>自定义教材</span>
          </div>
          <div class={styles.content}>
            自定义教材内容，让老师潜心研究的校本设计转化为现实可执行的课堂教学内容，海量共享资源辅助校本课程设计
          </div>

          <img src={img4} class={'w100'} />
        </div>
      </div>
    );
  }
});
