// import { PaperClipIcon } from '@heroicons/vue/solid'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import finch from './images/finch.png'
import demo from './images/demo.png'
import ios from './images/iosIcon.png'
import andIcon from './images/andIcon.png'
import code from '@/common/images/studentCode.png'
import studentCode from '@/common/images/studentCode.png'
import teacherCode from '@/common/images/teacherCode.png'
import joinUs from './images/joinUs.png'
import { Vue3Lottie } from 'vue3-lottie'
import 'vue3-lottie/dist/style.css'
import AstronautJSON from '@/common/animate/kulexiuyunjiaolian.json'
export default defineComponent({
  name: 'downLoad',
  components: {
    Vue3Lottie
  },
  setup() {},
  render() {
    return (
      <div>
        <div class={styles.wall}></div>
        <div class={styles.bgWhite}>
          <div class={styles.container}>
            <div class={styles.textWrap}>
              <h4>下载酷乐秀APP</h4>
              <p class={styles.subtitle}>
                <span class={styles.dot}></span>
                <p> 酷乐秀学院：器乐教学平台，课程信息一目了然,专业网络教室</p>
              </p>
              <p class={styles.subtitle}>
                <span class={styles.dot}></span>
                <p>酷乐秀：您的学习好帮手，专业教师一对一，器乐练习云练习</p>
              </p>
              <div class={styles.codeList}>
                <div class={styles.codeItem}>
                  <h5>酷乐秀</h5>
                  <div class={styles.code}>
                    <img src={studentCode} alt="" />
                  </div>
                  <div class={styles.iconWrap}>
                    <div
                      class={styles.iconItem}
                      style="margin-right:20px;margin-left:6px;"
                    >
                      <img src={ios} alt="" />
                      <span>ios</span>
                    </div>
                    <div class={styles.iconItem}>
                      <img src={andIcon} alt="" />
                      <span>Android</span>
                    </div>
                  </div>
                </div>
                <div class={styles.codeItem}>
                  <h5>酷乐秀学院</h5>
                  <div class={styles.code}>
                    <img src={teacherCode} alt="" />
                  </div>
                  <div class={styles.iconWrap}>
                    <div
                      class={styles.iconItem}
                      style="margin-right:20px;margin-left:6px;"
                    >
                      <img src={ios} alt="" />
                      <span>ios</span>
                    </div>
                    <div class={styles.iconItem}>
                      <img src={andIcon} alt="" />
                      <span>Android</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class={styles.imgWrap}>
              {/* <img src={demo} class={styles.demo} alt="" /> */}
              <Vue3Lottie animationData={AstronautJSON} class={styles.finch} />
            </div>
          </div>
          <div style={{ height: '110px' }}></div>
          <div class={styles.joinWrap}>
            <img src={joinUs} alt="" />
          </div>
        </div>
      </div>
    )
  }
})
