import { defineComponent, ref } from 'vue';
import styles from './index.module.less';
import MHeader from '@/components/m-header';
import MFooter from '@/components/m-footer';
import img1 from './images/img1.png';
import img21 from './images/img2-1.png';
import img22 from './images/img2-2.png';
import img23 from './images/img2-3.png';
import qrcode from './images/qrcode-bg.png';
import TheSubmit from '@/components/the-submit';
import img31 from './images/img3-1.png';
import img32 from './images/img3-2.png';
import img33 from './images/img3-3.png';
import img34 from './images/img3-4.png';

export default defineComponent({
  name: 'about-us',
  setup() {
    const activeTab = ref<'trade' | 'juvenile'>('trade');
    return () => (
      <div class={styles.aboutUs}>
        <MHeader />

        <div class={styles.banner}>
          <img
            class={styles.bannerImg}
            src="https://oss.dayaedu.com/klx/1699439262168banner.png"
          />
        </div>

        <div class={[styles.section1]}>
          <div class={[styles.title]}>
            <span>美育培训解决方案</span>
          </div>
          <div class={styles.content}>器乐 学 / 练 / 评 / 管 / 演 一步到位</div>

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

        <div class={[styles.section2, styles.sectionBg]}>
          <div class={styles.tabGroup}>
            <span
              onClick={() => (activeTab.value = 'trade')}
              class={[activeTab.value === 'trade' && styles.active]}>
              管乐团曲目训练
            </span>
            <span
              onClick={() => (activeTab.value = 'juvenile')}
              class={[activeTab.value === 'juvenile' && styles.active]}>
              少儿美育培训
            </span>
          </div>

          <div
            class={styles.loveImg}
            style={{ display: activeTab.value === 'trade' ? 'block' : 'none' }}>
            <img src={img21} class="w100" />

            <div class={[styles.title]}>
              <span>解决音乐课堂数字化问题</span>
            </div>
            <div class={styles.content}>
              利用小酷AI的合奏曲谱将总谱分给各个声部的演奏者，让他们单独练习自己的部分。练习过程统一各声部的练习进度和标准；以便后续在合排的基础上，对曲目进行细化练习.
            </div>
          </div>

          <div
            class={styles.musicImg}
            style={{
              display: activeTab.value === 'juvenile' ? 'block' : 'none'
            }}>
            <img src={img31} class="w100" />

            <div class={[styles.title]}>
              <span>解决新课标器乐进课堂问题</span>
            </div>
            <div class={styles.content}>
              我国政府高度重视青少年美育工作，提倡通过多元化的教育方式培养学生的审美情趣和艺术素养。在此背景下，美育培训应运而生，成为一种注重培养学生全面发展的新型教育模式。
            </div>
          </div>
        </div>

        <div
          style={{ display: activeTab.value === 'trade' ? 'block' : 'none' }}>
          <div class={[styles.section3, styles.sectionBg]}>
            <img class="w100" src={img22} />
            <div class={styles.content}>
              同时，注意乐团的整体平衡，确保各个声部之间协调一致；在细化练习的基础上，让乐团从起始点到结束连续演奏整个曲目。在合排过程中，团员需要掌握曲目中的难点，提高演奏的流畅性。
            </div>
          </div>
          <div class={[styles.section4, styles.sectionBg]}>
            <img class="w100" src={img23} />
            <div class={styles.content}>
              针对演奏中出现的问题，进行反复练习。练习模式让团员跟随动态乐谱和伴奏重叠起来的效果会给团员有即时表演的乐趣和身处乐团中震撼力，审美得到立体、全面的熏陶。
            </div>
          </div>
        </div>
        <div
          class={[styles.sectionJuvenile]}
          style={{
            display: activeTab.value === 'juvenile' ? 'block' : 'none'
          }}>
          <div class={[styles.section3, styles.sectionBg]}>
            <img class="w100" src={img32} />
            <div class={[styles.title]}>
              <span>基本乐理</span>
            </div>
            <div class={styles.content}>
              学习音乐的基本知识，包括音符、节拍、音高、音程、和声等。了解音乐的基本构成，为后续学习作曲和编曲打下基础。
            </div>
          </div>
          <div class={[styles.section4, styles.sectionBg]}>
            <img class="w100" src={img33} />

            <div class={[styles.title]}>
              <span>视唱练耳</span>
            </div>
            <div class={styles.content}>
              通过听音乐、分析音乐、演唱音乐等方式，提高学员的音准、节奏感和音乐感知能力。视唱练耳训练可以帮助学员更好地理解和把握音乐作品。
            </div>
          </div>
          <div class={[styles.section5, styles.sectionBg]}>
            <img class="w100" src={img34} />
            <div class={[styles.title]}>
              <span>乐器演奏</span>
            </div>
            <div class={styles.content}>
              学习一门或多门乐器，如钢琴、吉他、小提琴等。通过乐器演奏，培养学员的音乐表现力和创作能力。
            </div>
          </div>
        </div>

        <div class={styles.section6}>
          <div class={[styles.title6]}>
            <span>提交</span>合作信息
          </div>

          <div class={styles.content}>我们将在提交后尽快与您取得联系</div>

          <TheSubmit type="tenant" />
        </div>

        <div class={styles.section7}>
          <div class={[styles.title7]}></div>

          <div class={styles.content}>
            咨询热线：18186104867 <br /> 周一至周五 09:00~21:00
          </div>
          <div class={styles.qrcode}>
            <img src={qrcode} />
            <p>扫一扫添加微信好友</p>
          </div>
        </div>

        <MFooter />
      </div>
    );
  }
});
