liushengqiang
/
music-score


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
							<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="管乐迷APP，是国内首款专为管乐在线教学打造的专业级平台，丰富、便捷的学习工具，让管乐教学与学习更轻松。">
  <title>管乐迷</title>
  <link rel="stylesheet" href="index.css">
  <script src="../helpers/rem-fit.min.js"></script>
  <script src="../helpers/qs.min.js"></script>
  <script src="../helpers/html-to-image.js"></script>
  <script>
    var remFit = new RemFit(375,true)
    remFit.init()
    window.addEventListener('resize', function () {
      remFit.init()
    })
    var parseSearch = Qs.parse(window.location.search, { ignoreQueryPrefix: true })
  </script>
  <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/plyr@3.6.8/dist/plyr.css"> -->
</head>
<body>
  <div class="content">
    <div class="tag"></div>
    <div class="userinfo">
      <img id="avatar" crossOrigin="anonymous"/>
      <div class="cont">
        <p class="name" id="name"></p>
        <p class="sub" id="subjectName"></p>
      </div>
    </div>
    <div class="desc">
      <div class="tit">我在管乐迷智能评测获得了<span id="score"></span>分！</div>
      <div class="info" id="examSongName"></div>
    </div>
    <div class="fraction" style="display: none;">
      <div class="item" id="intonation">
        <div class="decs">音准</div>
        <div class="view"><span id="intonation-view"></span></div>
        <div class="val" id="intonation-val"></div>
      </div>
    </div>
    <div class="fraction" style="display: none;">
      <div class="item" id="cadence">
        <div class="decs">节奏</div>
        <div class="view"><span id="cadence-view"></span></div>
        <div class="val" id="cadence-val"></div>
      </div>
    </div>
    <div class="fraction" style="display: none;">
      <div class="item" id="integrity">
        <div class="decs">完成度</div>
        <div class="view"><span id="integrity-view"></span></div>
        <div class="val" id="integrity-val"></div>
      </div>
    </div>
    <div class="line"></div>
    <div class="app">
      <div class="app-info">
        <div class="app-title">管乐迷</div>
        <div class="app-desc">管乐学习的<span>不二选择</span></div>
        <div class="app-subtitle">云练习见证你的成长！</div>
      </div>
      <img src="./icons/qrcode.png"/>
    </div>
  </div>
  <script>
    document.getElementById('avatar').src = (decodeURIComponent(parseSearch.avatar) || './icons/avatar.png') + '?v=' + parseInt(Math.random() * 10000000)
    document.getElementById('name').innerText = parseSearch.name || ''
    document.getElementById('subjectName').innerText = parseSearch.subjectName || ''
    document.getElementById('examSongName').innerText = parseSearch.examSongName || ''
    document.getElementById('score').innerText = parseSearch.score || ''
    if (parseSearch.intonation) {
      document.getElementById('intonation').parentElement.style.display = 'flex'
      document.getElementById('intonation-val').innerText = parseSearch.intonation || ''
      document.getElementById('intonation-view').style.width = parseSearch.intonation + '%' || ''
    }
    if (parseSearch.cadence) {
      document.getElementById('cadence').parentElement.style.display = 'flex'
      document.getElementById('cadence-val').innerText = parseSearch.cadence || ''
      document.getElementById('cadence-view').style.width = parseSearch.cadence + '%' || ''
    }
    if (parseSearch.integrity) {
      document.getElementById('integrity').parentElement.style.display = 'flex'
      document.getElementById('integrity-val').innerText = parseSearch.integrity || ''
      document.getElementById('integrity-view').style.width = parseSearch.integrity + '%' || ''
    }

    window.addEventListener('load', function () {
      htmlToImage.toPng(document.body)
      .then(() => htmlToImage.toPng(document.body))
      .then(res => {
        if (window.setPng) {
          window.setPng(res)
        }
      })
    })
  </script>
  <!-- <script src="./index.js"></script> -->
</body>
</html>