liushengqiang
/
orchestra-music-score


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
							<!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/html2canvas.js"></script>
  <script src="../helpers/qrcode.js"></script>
  <script>
    var remFit = new RemFit(3.75,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">我用小酷Ai智能评测获得了<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">小酷Ai见证你的成长！</div>
      </div>
      <div class="img">
        <img id="qrcode" src="./icons/qrcode.png"/>
        <img class="logo" src="./icons/logo.png"/>
      </div>
    </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 () {
      QRCode.toDataURL(location.origin + '/accompany/colexiu-report-share.html?id=' + (parseSearch.id || '') + '&musicId=' + (parseSearch.musicId || '') + '&client=web', { errorCorrectionLevel: 'H', width: 192 }, function (err, val) {
        console.log(val)
        document.getElementById('qrcode').setAttribute('src', val)
        html2canvas(document.body)
        .then((canvas) => canvas.toDataURL())
        .then(res => {
          // console.log(res)
          if (window.setPng) {
            window.setPng(res)
          }
        })
      })
    })
  </script>
  <!-- <script src="./index.js"></script> -->
</body>
</html>