import { defineComponent } from 'vue';
import { Swipe, SwipeItem } from 'vant';
import styles from './index.module.less';
import MHeader from '@/components/m-header';
import MFooter from '@/components/m-footer';
import z1 from './images/1.png';
import z2 from './images/2.png';
import z3 from './images/3.png';
import z4 from './images/4.png';
import z5 from './images/5.png';
import z6 from './images/6.png';

import img2 from './images/img2.png';

export default defineComponent({
  name: 'about-us',
  setup() {
    return () => (
      <div class={styles.aboutUs}>
        <MHeader />

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

        <div class={styles.section1}>
          <div class={[styles.title]}>
            <span>关于酷乐秀</span>
          </div>

          <img
            src="https://oss.dayaedu.com/klx/1699519075644%E7%BC%96%E7%BB%84_14_2.png"
            class="w100"
          />
          <div class={styles.content}>
            <p>
              我们是一家专注于音乐教育创新的企业，深度融合新技术，为广大音乐爱好者和机构、学校提供高质量的音乐教育服务。
            </p>
            <p>
              未来数字化音乐教学将更加注重与人工智能、虚拟现实等新技术的深度融合，为音乐教学提供更加智能化、个性化的解决方案。我们深知数字化音乐课堂的重要性，因此积极布局数字化教育领域，现已拥有一系列成熟的音乐教学软件、教学团队及硬件供应链，助力音乐教育迈向新高峰。
            </p>
          </div>
        </div>

        <div class={styles.section3}>
          <div class={[styles.title]}>
            <span>资质认证</span>
          </div>

          <Swipe loop={false}>
            <SwipeItem>
              <div class={styles.imgGroup}>
                <img
                  src={z1}
                  class={styles.z1}
                  onTouchstart={(e: TouchEvent) => e.preventDefault()}
                  onContextmenu={(e: MouseEvent) => e.preventDefault()}
                  onDragstart={(e: DragEvent) => e.preventDefault()}
                />
                <p>增值电信业务经营许可证</p>
              </div>
            </SwipeItem>
            <SwipeItem>
              <div class={styles.imgGroup}>
                <img
                  src={z2}
                  class={styles.z2}
                  onTouchstart={(e: TouchEvent) => e.preventDefault()}
                  onContextmenu={(e: MouseEvent) => e.preventDefault()}
                  onDragstart={(e: DragEvent) => e.preventDefault()}
                />
                <p>网络文化经营许可证</p>
              </div>
            </SwipeItem>
            <SwipeItem>
              <div class={styles.imgGroup}>
                <img
                  src={z3}
                  class={styles.z3}
                  onTouchstart={(e: TouchEvent) => e.preventDefault()}
                  onContextmenu={(e: MouseEvent) => e.preventDefault()}
                  onDragstart={(e: DragEvent) => e.preventDefault()}
                />
                <p>信息系统安全等级保护备案证明</p>
              </div>
            </SwipeItem>
            <SwipeItem>
              <div class={styles.imgGroup}>
                <img
                  src={z4}
                  class={styles.z4}
                  onTouchstart={(e: TouchEvent) => e.preventDefault()}
                  onContextmenu={(e: MouseEvent) => e.preventDefault()}
                  onDragstart={(e: DragEvent) => e.preventDefault()}
                />
                <p>
                  计算机软件著作权登记证书
                  <br />
                  （酷乐秀）
                </p>
              </div>
            </SwipeItem>
            <SwipeItem>
              <div class={styles.imgGroup}>
                <img
                  src={z5}
                  class={styles.z5}
                  onTouchstart={(e: TouchEvent) => e.preventDefault()}
                  onContextmenu={(e: MouseEvent) => e.preventDefault()}
                  onDragstart={(e: DragEvent) => e.preventDefault()}
                />
                <p>
                  计算机软件著作权登记证书
                  <br />
                  （酷乐秀学院）
                </p>
              </div>
            </SwipeItem>
            <SwipeItem>
              <div class={styles.imgGroup}>
                <img
                  src={z6}
                  class={styles.z6}
                  onTouchstart={(e: TouchEvent) => e.preventDefault()}
                  onContextmenu={(e: MouseEvent) => e.preventDefault()}
                  onDragstart={(e: DragEvent) => e.preventDefault()}
                />
                <p>
                  计算机软件著作权登记证书 <br />
                  （音乐数字课堂）
                </p>
              </div>
            </SwipeItem>
          </Swipe>
        </div>

        <div class={styles.section2}>
          <div class={[styles.title]}>
            <span>选择我们你将得到</span>
          </div>

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

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