colexiu-project/src/components/col-footer/index.tsx

import { defineComponent } from 'vue'
import classes from './index.module.less'
import download from '../silder/images/download.png'
import publicCode from '../silder/images/public-code.jpg'
import whileLogo from './images/footLogo.png'
import studentCode from '@/common/images/studentCode.png'
import teacherCode from '@/common/images/teacherCode.png'
import weixinCode from '@/common/images/weixinCode.jpg'

export default defineComponent({
  name: 'col-footer',
  setup() {
    return () => (
      <>
        <div>
          <div class={classes.footerSection}>
            <div class={classes.footerInfo}>
              <div class={classes.width1200}>
                <div class={classes.attention}>
                  <div class={classes.qrcode}>
                    <div class={classes.qrcodeItem} style="padding-right:50px">
                      <img
                        class={classes.whileLogo}
                        src={whileLogo}
                        width="142px"
                        height="65px"
                        alt=""
                      />
                    </div>
                    <div class={classes.hotLine}>
                      <h2>咨询热线：400 - 8851569</h2>
                      <span>（周一至周五 09:00~21:00）</span>
                    </div>
                  </div>
                </div>
                <div class={classes.friendShip}>
                  <div class={classes.lineWrap}>
                    <h2>友情链接</h2>
                    <div class={classes.itemWrap}>
                      <div class={classes.friendshipItem}>
                        <a target="view_window" href="http://www.chnmusic.org/">
                          中国音乐家协会
                        </a>
                      </div>
                      <div class={classes.friendshipItem}>
                        <a
                          target="view_window"
                          href="https://www.cnorch.com/leaderInfo/list?leaderType=2"
                        >
                          中国音协管乐学会低音铜管专业委员会
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class={classes.qrcodeWrap}>
                  <div class={classes.qrcode}>
                    <div class={classes.qrcodeItem}>
                      <p>公众号</p>
                      <img class={classes.codeImg} src={weixinCode} />
                    </div>
                  </div>
                  <div class={classes.qrcode}>
                    <div class={classes.qrcodeItem}>
                      <p>酷乐秀</p>
                      <img class={classes.codeImg} src={studentCode} />
                    </div>
                  </div>
                  <div class={classes.qrcode}>
                    <p>酷乐秀学院</p>
                    <div class={classes.qrcodeItem}>
                      <img class={classes.codeImg} src={teacherCode} />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class={classes.footerCoptyright}>
              <div class={classes.width1200}>
                <p>
                  Copyright © 2021 武汉酷乐秀网络科技有限公司
                  <br /> All Rights Reserved.{' '}
                  <a target="_blank" href="https://beian.miit.gov.cn/">
                    鄂ICP备2021020787号-1
                  </a>
                </p>
              </div>
            </div>
          </div>
        </div>
      </>
    )
  }
})