评测报告UI

colexiu-report.html

@@ -4,31 +4,9 @@
   <meta charset="UTF-8">
   <link rel="icon" href="/favicon.ico" />
   <meta name="description" content="酷乐秀APP，器乐学习的不二选择">
-  <title>酷乐秀</title>
+  <title>评测记录</title>
   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
-  <!-- <link rel="preconnect" href="https://fonts.loli.net"> -->
-  <!-- <link href="https://fonts.loli.net/css2?family=Roboto:wght@700&display=swap" rel="stylesheet"> -->
-  <script type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1279349593'%3E%3C/span%3E%3Cscript src='https://s9.cnzz.com/z_stat.php%3Fid%3D1279349593%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>
-  <script type="text/javascript">
-    // if (window.location.hostname !== 'mstuonline.dayaedu.com') {
-    //   document.write(unescape("%3Cscript%20src%3D%22https%3A//cdn.jsdelivr.net/npm/eruda@2.4.1/eruda.min.js%22%3E%3C/script%3E"))
-    // }
-    if (window._czc) {
-      window._czc.push(["_setAutoPageView", false])
-    }
-  </script>
   <script>
-    // if (window.location.hostname !== 'mstuonline.dayaedu.com') {
-    //   eruda.init()
-    // }
-    if(window.navigator && navigator.serviceWorker) {
-      navigator.serviceWorker.getRegistrations()
-      .then(function(registrations) {
-        for(let registration of registrations) {
-          registration.unregister();
-        }
-      });
-    }
     function getBroswer(){
       var Sys = {};
       var ua = navigator.userAgent.toLowerCase();
@@ -57,9 +35,7 @@
       document.getElementById('loading').className = ''
     }
   })
-  // console.log("broswer:"+abc.broswer+" version:"+abc.version);
   </script>
-  <title>酷乐秀学院</title>
   <style>
     #loading{
       position: fixed;
@@ -84,9 +60,6 @@
       visibility: visible;
       opacity: 1;
     }
-    #cnzz_stat_icon_1279349593{
-      display: none;
-    }
     #update{
       margin-top: 100px;
       opacity: 0;
@@ -123,54 +96,6 @@
     <img src="/loading.svg" alt="loading"/>
     <div>请求时间过长，请检查网络环境 <a href="javascript:;" onclick="_back()">点击返回</a></div>
   </div>
-  <script>
-    const _onlyPostmessage = (function () {
-      'use strict';
-      const getRandomKey = () => {
-          return '' + new Date().getTime() + Math.floor(Math.random() * 1000000);
-      };
-
-      /**
-       * @param instanceKey 实例函数key
-       */
-      var onlyPostmessage = (instanceKey) => {
-          var _a, _b;
-          const win = window;
-          win.originalPostMessage = win.originalPostMessage || window.postMessage;
-          const instance = win[instanceKey] || ((_b = (_a = win.webkit) === null || _a === void 0 ? void 0 : _a.messageHandlers) === null || _b === void 0 ? void 0 : _b[instanceKey]);
-          return function (data) {
-              if (instance) {
-                  const uuid = getRandomKey();
-                  data.content = data.content ? Object.assign(Object.assign({}, data.content), { uuid }) : { uuid };
-                  instance.postMessage(JSON.stringify(data));
-                  console.log('send:', JSON.stringify(data));
-              }
-          };
-      };
-
-      return onlyPostmessage;
-
-  })();
-
-  window._setupMessage = _onlyPostmessage('COLEXIU');
-
-  ;(function() {
-    try {
-      setTimeout(() => {
-        var tips = document.querySelector('#loading div')
-        if (tips) {
-          tips.style.display = 'block'
-        }
-      }, 10 * 1000)
-    } catch (error) {}
-  })()
-
-  function _back() {
-    window._setupMessage({
-      api: 'back',
-    })
-  }
-  </script>
   <script type="module" src="/src/subpages/colexiu-report/main.ts"></script>
 </body>
 </html>

src/subpages/colexiu-report/explain.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="33px" height="33px" viewBox="0 0 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>button-normal备份 2</title>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="评测报告（节奏）" transform="translate(-690.000000, -13.000000)">
-            <g id="button-normal备份-2" transform="translate(690.000000, 13.000000)">
-                <rect id="button-normal" fill="#FFEFE5" x="0" y="0" width="33" height="33" rx="16.5"></rect>
-                <g id="编组" transform="translate(7.000000, 7.000000)" fill="#FF8800" fill-rule="nonzero" stroke="#FF8800">
-                    <path d="M9.5,0 C4.25322823,0 0,4.25324263 0,9.5 C0,14.7467574 4.25324678,19 9.5,19 C14.7467532,19 19,14.7467574 19,9.5 C19,4.25324263 14.7467347,0 9.5,0 Z M9.49999096,17.5000093 C5.08224075,17.5000093 1.50001028,13.9181622 1.50001028,9.50000928 C1.50001028,5.08182021 5.08222266,1.50000928 9.49999096,1.50000928 C13.9185552,1.50000928 17.4999897,5.08182019 17.4999897,9.50000928 C17.4999897,13.9181622 13.9185552,17.5000093 9.49999096,17.5000093 Z" id="形状"></path>
-                    <path d="M9.60242663,4.40820056 C8.69574736,4.40820056 7.97469307,4.6677898 7.4389318,5.18715088 C6.90315395,5.69822914 6.63526502,6.415299 6.63526502,7.33837705 L8.04487302,7.33837705 C8.04487302,6.81089915 8.14788552,6.40699959 8.35389392,6.12666179 C8.58443543,5.78879242 8.97191911,5.61974983 9.51601299,5.61974983 C9.94462863,5.61974983 10.2743981,5.73539395 10.5053048,5.96591863 C10.7358463,6.21324134 10.8512913,6.53471105 10.8512913,6.9303112 C10.8512913,7.24366409 10.739996,7.53608583 10.5173721,7.8081242 L10.3691112,7.9813165 C9.56127805,8.69838636 9.0790813,9.22189715 8.9224877,9.55148369 C8.75761128,9.87295341 8.67534734,10.2768696 8.67534736,10.763033 L8.67534736,10.9362087 L10.0970393,10.9362087 L10.0970393,10.763033 C10.0970393,10.4745617 10.1589364,10.2066731 10.2826809,9.95935037 C10.3977774,9.72050967 10.5626538,9.51431889 10.7769782,9.34134239 C11.3538881,8.83856355 11.7085558,8.51294411 11.8402179,8.36446749 C12.1450891,7.96075053 12.2978816,7.45383858 12.2978816,6.84373165 C12.2978816,6.08551327 12.050791,5.49202176 11.5561285,5.06338994 C11.0697654,4.62665788 10.4185259,4.40820056 9.60242663,4.40820056 Z M8.69988046,12.8015559 C8.51877034,12.9747482 8.42784181,13.1971561 8.42784181,13.4692111 C8.42784181,13.7412494 8.51877034,13.9638565 8.69988046,14.1368496 C8.8979878,14.3183413 9.1243464,14.4088879 9.38018456,14.4088879 C9.6522066,14.4088879 9.87859838,14.3223084 10.0600737,14.1493153 C10.2494998,13.976123 10.3445946,13.7495489 10.3445946,13.4692111 C10.3445946,13.2056547 10.2536329,12.9830477 10.0725228,12.8015559 C9.89104754,12.6285628 9.66015745,12.5419667 9.38018456,12.5419667 C9.11606357,12.5419667 8.88967177,12.6285628 8.69988046,12.8015559 Z" id="形状"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

src/subpages/colexiu-report/header/index.module.less

@@ -1,50 +1,51 @@
 :global(.eyeProtection) {
   .header {
-    &::before {
-      background: var(--eye-background-color) !important;
-    }
+    background: var(--eye-background-color) !important;
   }
 }
 
-.center {
-  padding-top: 2px;
-}
 .header {
   :global(.van-hairline--right)::after {
-    border-color: #f2f2f2 !important;
-    border-right-width: 1px !important;
+    border-color: #ebdabf !important;
+    height: 80%;
+    top: 10%;
   }
   position: absolute;
   z-index: 2;
-  // padding-bottom: 5px;
-  // padding: 12px 22px;
   top: 0;
   left: 0;
   right: 0;
   border-radius: 5px 5px 0 0;
   background-color: #fff;
-  // &::before {
-  //   position: absolute;
-  //   top: 0;
-  //   left: 0;
-  //   content: '';
-  //   height: 100vh;
-  //   width: 100vw;
-  //   background: #E2F6F1;
-  //   z-index: -1;
-  // }
-  // box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.02);
-  > div.info {
+  .leftButton{
+    display: flex;
+    align-items: center;
+  }
+  .info {
     display: flex;
+    justify-content: space-between;
     height: 36px;
     box-sizing: border-box;
-    padding: 5px 13px;
-    padding-top: calc(var(--header-padding-top) + 5px);
+    padding: 0 16px;
+    :global{
+      .van-grid-item__content{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        background-color: transparent;
+      }
+    }
+  }
+  .musicName {
+    margin-left: 7px;
+    max-width: 20vw;
     overflow: hidden;
-    padding-left: 0;
-    // padding-left: 20px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 10px;
+    color: #985131;
   }
-  > div.demos {
+  .demos {
     position: absolute;
     right: 5px;
     height: initial;
@@ -67,13 +68,6 @@
       }
     }
   }
-  .maininfo {
-    flex: 1;
-    // display: flex;
-    flex-direction: column;
-    font-size: 12px;
-    color: #000;
-  }
   :global {
     .van-grid {
       &::after {
@@ -86,7 +80,6 @@
       padding: 0;
       color: #333;
       display: flex;
-      justify-content: space-between;
       &::after {
         border-color: #e5e5e5;
       }
@@ -109,13 +102,12 @@
           border-radius: 6px;
         }
         &.active {
-          background-color: #defff9;
-          color: #009b7e;
+          background-color: var(--van-primary-color);
+          color: #fff;
         }
       }
     }
     .van-grid-item__content {
-      background-color: transparent;
       > span {
         width: initial;
         height: initial;
@@ -144,21 +136,21 @@
 }
 
 .back {
-  // position: absolute;
   z-index: 9;
   padding: 0;
   height: auto;
   background-color: transparent;
   border: none;
-  // top: 13px;
-  // left: 15px;
-  // transform: translate(-30%, -30%);
 }
 
 .btns {
-  margin-left: 10px;
   :global {
     .van-grid-item__content {
+      img{
+        display: block;
+        width: 15px;
+        height: 15px;
+      }
       > span {
         margin-top: 0;
         font-size: 5px;
@@ -211,15 +203,13 @@
   position: absolute;
   right: -6px;
   top: -6px;
-  width: 12px;
-  height: 12px;
-  border-radius: 100%;
-  border: 2px solid #ffffff;
-  background-color: #2dc7aa;
+  width: 16px;
+  height: 16px;
   display: flex;
   img {
     display: block;
-    margin: auto;
+    width: 100%;
+    height: 100%;
   }
 }
 

src/subpages/colexiu-report/header/index.tsx

@@ -2,15 +2,15 @@ import { defineComponent, toRefs, PropType, ref, Transition, onMounted } from 'v
 import { Button, Grid, GridItem, Popup } from 'vant'
 import qs from 'query-string'
 import { MusicSheelDetail, ShaeetStatusType } from '../../colexiu/index.d'
-import BackIcon from '../../colexiu/header/icons/back.svg'
+import BackIcon from '../../colexiu/buttons/icons/icon-back.svg'
 import { heardLevel } from '/src/constant/formats'
 import Note from '/src/pages/report/note'
 import PlayerPopup from '/src/pages/report/player'
 import styles from './index.module.less'
 import state from '/src/pages/state'
 import AgainIcon from '../again.svg'
-import ExplainIcon from '../explain.svg'
-import ReplayIcon from '../replay.svg'
+import ExplainIcon from '../icon-explain.png'
+import ReplayIcon from '../icon-replay.png'
 import CloseIcon from './close.png'
 import detailStyles from './index.module.less'
 import { postMessage } from '/src/helpers/native-message'
@@ -40,6 +40,7 @@ export default defineComponent({
   },
   emits: ['activeChange'],
   setup(props, { emit, expose }) {
+    const { detail, record } = toRefs(props)
     const back = () => {
       postMessage({
         api: 'back',
@@ -87,30 +88,29 @@ export default defineComponent({
     })
 
     return () => {
-      const { detail, record } = toRefs(props)
       return (
         <header class={[styles.header, styles.className]}>
           <div class={styles.info}>
-            {search.source !== 'web' ? (
+            <div class={styles.leftButton}>
               <Button onClick={back} class={styles.back}>
                 <img src={BackIcon} alt="back" />
               </Button>
-            ) : null}
-            <div class={[styles.maininfo, 'van-ellipsis']}></div>
+              <span class={styles.musicName}>{record?.value?.sysMusicScoreName}</span>
+            </div>
             {record.value && record.value?.heardLevel ? (
               <Grid class={styles.center} columnNum={5}>
                 <GridItem
                   class="van-hairline--right"
                   vSlots={{
-                    text: () => <span>难度</span>,
                     icon: () => <span>{(heardLevel as any)[record.value?.heardLevel]}</span>,
+                    text: () => <span>难度</span>,
                   }}
                 />
                 <GridItem
                   class="van-hairline--right"
                   vSlots={{
-                    text: () => <span>评测分数</span>,
                     icon: () => <span>{record.value?.score}分</span>,
+                    text: () => <span>评测分数</span>,
                   }}
                 />
                 <GridItem
@@ -120,8 +120,8 @@ export default defineComponent({
                     emit('activeChange', 'pitch')
                   }}
                   vSlots={{
+                    icon: () => <span style={{ color: 'var(--van-primary-color)' }}>{record.value?.intonation}分</span>,
                     text: () => <span class={['switch', { active: active.value === 'pitch' }]}>音准</span>,
-                    icon: () => <span style={{ color: '#2DC7AA' }}>{record.value?.intonation}分</span>,
                   }}
                 />
                 <GridItem
@@ -131,8 +131,8 @@ export default defineComponent({
                     emit('activeChange', 'rhythm')
                   }}
                   vSlots={{
+                    icon: () => <span style={{ color: 'var(--van-primary-color)' }}>{record.value?.cadence}分</span>,
                     text: () => <span class={['switch', { active: active.value === 'rhythm' }]}>节奏</span>,
-                    icon: () => <span style={{ color: '#FF4E19' }}>{record.value?.cadence}分</span>,
                   }}
                 />
                 <GridItem
@@ -141,8 +141,8 @@ export default defineComponent({
                     emit('activeChange', 'completion')
                   }}
                   vSlots={{
-                    text: () => <span class={['switch', { active: active.value === 'completion' }]}>时值</span>,
-                    icon: () => <span style={{ color: '#FFC459' }}>{record.value?.integrity}分</span>,
+                    icon: () => <span style={{ color: '#4EA1FF' }}>{record.value?.integrity}分</span>,
+                    text: () => <span class={['switch', { active: active.value === 'completion' }]}>完成度</span>,
                   }}
                 />
               </Grid>
@@ -152,8 +152,8 @@ export default defineComponent({
                 <PlayerPopup {...record.value} btnClass={detailStyles.btn} popupClass={detailStyles.popup}>
                   <GridItem
                     vSlots={{
-                      text: () => <span>回放</span>,
                       icon: () => <img src={ReplayIcon} />,
+                      text: () => <span>回放</span>,
                     }}
                   />
                 </PlayerPopup>
@@ -161,16 +161,16 @@ export default defineComponent({
               <GridItem
                 onClick={() => (visible.value = true)}
                 vSlots={{
-                  text: () => <span>释义</span>,
                   icon: () => <img src={ExplainIcon} />,
+                  text: () => <span>释义</span>,
                 }}
               />
               {search.source !== 'web' ? (
                 <GridItem
                   onClick={again}
                   vSlots={{
-                    text: () => <span>再来一遍</span>,
                     icon: () => <img src={AgainIcon} />,
+                    text: () => <span>再来一遍</span>,
                   }}
                 />
               ) : null}

src/subpages/colexiu-report/index.module.less

@@ -1,11 +1,16 @@
 .musicSheet {
-  padding-top: 48px;
+  padding-top: 36px;
   background: #E2F6F1;
   img {
     display: none!important;
   }
 }
-
+.headTitle {
+  font-size: 12px;
+  font-weight: bold;
+  text-align: center;
+  padding: 7px 0 0 0;
+}
 .btn {
   position: fixed;
   bottom: 15px;

src/subpages/colexiu-report/index.tsx

@@ -57,7 +57,7 @@ const useDetail = (id: number | string): [Ref<ShaeetStatusType>, Ref<MusicSheelD
     }
     status.value = 'loading'
     try {
-      const recordRes = await request.get('/musicPracticeRecord/getLastEvaluationMusicalNotesPlayStats',{
+      const recordRes = await request.get('/musicPracticeRecord/getLastEvaluationMusicalNotesPlayStats', {
         params: {
           recordId: search.id,
         },
@@ -279,20 +279,7 @@ export default defineComponent({
             {error && <Empty />}
             {score.value && (
               <>
-                <h3
-                  style={{
-                    fontSize: '24px',
-                    fontWeight: 'normal',
-                    textAlign: 'center',
-                    padding: '0 10px',
-                    marginTop: '36px',
-                    marginBottom: '0px',
-                    marginLeft: 'auto',
-                  }}
-                  class="van-ellipsis"
-                >
-                  {detail.value.musicSheetName}
-                </h3>
+                <div class={styles.headTitle}>{detail.value.musicSheetName}</div>
                 <MusicSheet
                   score={score.value}
                   showSection