UI走查

src/helpers/request.ts

@@ -69,7 +69,7 @@ request.interceptors.response.use(
     }
     const data = await res.clone().json()
     if (data.code !== 200 && data.errCode !== 0) {
-      const msg = data.msg || '处理失败，请重试'
+      const msg = data.msg || data.message || '处理失败，请重试'
       if (!(data.code === 403 || data.code === 401)) {
         Toast(msg)
       }

src/subpages/colexiu/buttons/evaluating.tsx

@@ -24,6 +24,8 @@ import { getLeveByScoreMeasure } from '/src/pages/detail/evaluating/helper'
 import Evaluating, { evaluatingShow } from '../popups/evaluating'
 // @ts-ignore
 import StartEvaluating from './dotlotties/start-evaluating.lottie?url'
+import iconStartEvaluating from './dotlotties/StartEvaluating.png'
+import iconRecord from './dotlotties/iconRecord.png'
 // @ts-ignore
 import Recording from './dotlotties/recording2.lottie?url'
 import request from '/src/helpers/request'
@@ -583,14 +585,16 @@ export default defineComponent({
                     演奏前请调整好乐器，保证最佳演奏状态。<span class={styles.triangle}></span>
                   </div>
                 </div>
-                <dotlottie-player src={StartEvaluating} autoplay loop class={styles.animation} />
+                <img class={styles.dialogueIcon} src={iconStartEvaluating} />
+                {/* <dotlottie-player src={StartEvaluating} autoplay loop class={styles.animation} /> */}
               </div>
             </Teleport>
           ) : (
             <Teleport to="body" key="Recording">
               <div class={styles.dialogueBox}>
                 <div class={styles.inRadio}>收音中...</div>
-                <dotlottie-player src={Recording} autoplay loop class={styles.animation} />
+                <img class={styles.inRadioIcon} src={iconRecord} />
+                {/* <dotlottie-player src={Recording} autoplay loop class={styles.animation} /> */}
               </div>
             </Teleport>
           )}

src/subpages/colexiu/buttons/icons/icon-evaluatingEnd.svg

@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="129px" height="44px" viewBox="0 0 129 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>编组 20</title>
-    <defs>
-        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
-            <stop stop-color="#E0782C" offset="0%"></stop>
-            <stop stop-color="#E78E36" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50%" y1="6.26178469%" x2="50%" y2="100%" id="linearGradient-2">
-            <stop stop-color="#FFEDB2" offset="0%"></stop>
-            <stop stop-color="#FFC84F" offset="39.8519449%"></stop>
-            <stop stop-color="#FFC648" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="结束评测" transform="translate(-342.000000, -16.000000)">
-            <g id="编组-20" transform="translate(342.000000, 16.000000)">
-                <rect id="矩形" fill="url(#linearGradient-1)" x="0" y="0" width="129" height="44" rx="19"></rect>
-                <rect id="矩形" fill="url(#linearGradient-2)" x="0" y="0" width="129" height="38" rx="19"></rect>
-                <circle id="椭圆形" fill="#FFFFFF" cx="8" cy="17" r="2"></circle>
-                <ellipse id="椭圆形" fill="#FFFFFF" transform="translate(11.183013, 9.683013) rotate(-52.000000) translate(-11.183013, -9.683013) " cx="11.1830127" cy="9.6830127" rx="3.5" ry="2.5"></ellipse>
-            </g>
-        </g>
-    </g>
-</svg>

src/subpages/colexiu/buttons/icons/icon-evaluatingStart.svg

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="154px" height="154px" viewBox="0 0 154 154" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>编组 31</title>
-    <defs>
-        <linearGradient x1="2.13579154e-12%" y1="1.36002321e-13%" x2="100%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#FFC761" offset="0.0109265734%"></stop>
-            <stop stop-color="#FF9622" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="评测模式" transform="translate(-329.000000, -155.000000)">
-            <g id="编组-17" transform="translate(329.000000, 155.000000)">
-                <circle id="椭圆形" fill-opacity="0.767755682" fill="#FFDAAB" cx="77" cy="77" r="77"></circle>
-                <circle id="椭圆形" fill="url(#linearGradient-1)" cx="77" cy="77" r="68"></circle>
-            </g>
-        </g>
-    </g>
-</svg>

src/subpages/colexiu/buttons/icons/modelType1.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="29px" height="29px" viewBox="0 0 29 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>示范</title>
+    <defs>
+        <linearGradient x1="2.13579154e-12%" y1="-2.20656826e-13%" x2="100%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#D4A9FF" offset="0%"></stop>
+            <stop stop-color="#8F80FF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="跟练模式" transform="translate(-699.000000, -14.000000)">
+            <g id="示范" transform="translate(699.000000, 14.000000)">
+                <rect id="矩形备份-37" fill="url(#linearGradient-1)" x="0" y="0" width="29" height="29" rx="14.5"></rect>
+                <g id="编组-19" transform="translate(7.500000, 6.757359)" fill="#FFFFFF">
+                    <rect id="矩形" x="0" y="1.24264069" width="6" height="6" rx="1"></rect>
+                    <rect id="矩形备份-9" x="0" y="9.24264069" width="6" height="6" rx="1"></rect>
+                    <rect id="矩形备份-8" transform="translate(11.000000, 4.242641) rotate(-315.000000) translate(-11.000000, -4.242641) " x="8" y="1.24264069" width="6" height="6" rx="1"></rect>
+                    <rect id="矩形备份-10" x="8" y="9.24264069" width="6" height="6" rx="1"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/subpages/colexiu/buttons/icons/modelType2.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="29px" height="29px" viewBox="0 0 29 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>示范</title>
+    <defs>
+        <linearGradient x1="2.13579154e-12%" y1="1.36002321e-13%" x2="100%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FFC761" offset="0.0109265734%"></stop>
+            <stop stop-color="#FF9622" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="评测模式" transform="translate(-699.000000, -14.000000)">
+            <g id="示范" transform="translate(699.000000, 14.000000)">
+                <rect id="矩形备份-37" fill="url(#linearGradient-1)" x="0" y="0" width="29" height="29" rx="14.5"></rect>
+                <g id="编组-19" transform="translate(7.500000, 6.757359)" fill="#FFFFFF">
+                    <rect id="矩形" x="0" y="1.24264069" width="6" height="6" rx="1"></rect>
+                    <rect id="矩形备份-9" x="0" y="9.24264069" width="6" height="6" rx="1"></rect>
+                    <rect id="矩形备份-8" transform="translate(11.000000, 4.242641) rotate(-315.000000) translate(-11.000000, -4.242641) " x="8" y="1.24264069" width="6" height="6" rx="1"></rect>
+                    <rect id="矩形备份-10" x="8" y="9.24264069" width="6" height="6" rx="1"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/subpages/colexiu/buttons/icons/task-bg.svg

@@ -2,7 +2,7 @@
 <svg width="208px" height="70px" viewBox="0 0 208 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>矩形</title>
     <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="曲谱评测" transform="translate(-582.000000, -215.000000)" fill="#FFE1B8" stroke="#FFFFFF" stroke-width="2">
+        <g id="曲谱评测" transform="translate(-582.000000, -215.000000)" fill="#FF8F4F" >
             <path d="M591,216.506546 L781,216.506546 C785.418278,216.506546 789,220.088268 789,224.506546 L789,278.353946 C789,281.11537 786.761424,283.353946 784,283.353946 C783.212178,283.353946 782.435504,283.167782 781.733289,282.810629 L768.300488,275.978581 L768.300488,275.978581 L591,275.978581 C586.581722,275.978581 583,272.396859 583,267.978581 L583,224.506546 C583,220.088268 586.581722,216.506546 591,216.506546 Z" id="矩形"></path>
         </g>
     </g>

src/subpages/colexiu/buttons/index.module.less

@@ -1,35 +1,22 @@
 :global(.eyeProtection) {
   .container {
-    &::before {
-      background: var(--eye-background-color);
-    }
+    background: var(--eye-background-color) !important;
   }
 }
 .container {
-  display: flex;
   position: fixed;
   z-index: 9;
   top: 0;
   right: 0;
   left: 0;
-  padding: 0;
+  display: flex;
   align-items: center;
   justify-content: center;
   height: calc(34px + var(--header-padding-top));
   box-sizing: border-box;
   overflow: hidden;
-  background-color: #fff;
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100vh;
-    width: 100vw;
-    z-index: -1;
-  }
-  > div {
-    flex: 1 1 33.33%;
-  }
+  padding: 0 16px;
+  background: #fff;
 }
 
 .moreButton {
@@ -41,26 +28,26 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  margin: 0 auto;
 }
 
 .leftButton {
   display: flex;
   align-items: center;
-  flex: 1;
-  padding-left: 16px;
-  > div > div {
+  .titleWrap {
+    margin-left: 6px;
+  }
+  .title {
     max-width: 20vw;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-  }
-  .title {
     font-size: 10px;
-    color: #333333;
+    color: #985131;
   }
   .album {
     font-size: 6px;
-    color: #999999;
+    color: #ab7f6a;
   }
 }
 .button {
@@ -73,8 +60,8 @@
   &.hasText {
     height: 27px;
     border: none;
-    font-size: 12Px;
-    margin: 0 5Px;
+    font-size: 12px;
+    margin: 0 4px;
     img {
       width: 15px;
       height: 14px;
@@ -145,12 +132,10 @@
 .backbtn {
   display: inline-block;
   padding: 0;
-  width: 32Px;
-  height: 32Px;
-}
-.titleWrap {
-  margin-left: 15Px;
+  width: 32px;
+  height: 32px;
 }
+
 .speed {
   display: block;
   > div {
@@ -158,15 +143,15 @@
   }
   :global {
     .van-slider__button-wrapper {
-      background: #FFE8B1;
-      border-radius: 20Px;
+      background: #ffe8b1;
+      border-radius: 20px;
       border: 1px solid #ffffff;
-      padding: 2Px 4Px;
+      padding: 2px 4px;
       > div {
         background-color: transparent !important;
       }
       span {
-        color: #F67146 !important;
+        color: #f67146 !important;
       }
     }
     .van-slider {
@@ -217,7 +202,7 @@
     font-size: 4px;
     color: var(--primary-color);
     line-height: 7px;
-    background: #FFE8B1;
+    background: #ffe8b1;
     border-radius: 5px;
     border: 1px solid #ffffff;
     right: -4px;
@@ -316,29 +301,40 @@
     position: fixed;
     bottom: 56px;
   }
+
   .dialogue > div {
     width: 96px;
     height: 32px;
     background: url('./icons/task-bg.svg') no-repeat center;
     background-size: cover;
     margin-right: 10px;
-    color: #6f4900;
+    color: #fff;
     font-size: 6px;
     line-height: 8px;
     padding: 4px;
     padding-top: 6px;
     box-sizing: border-box;
   }
+  .dialogueIcon {
+    width: 50px;
+    height: 56px;
+    margin-right: 14px;
+  }
+  .inRadioIcon {
+    width: 66px;
+    height: 72px;
+    margin-right: 6px;
+  }
 }
 
 .inRadio {
   width: 32px;
   height: 14px;
   font-size: 6px;
-  background: #ffe1b8;
+  background: linear-gradient(180deg, #FF975B, #FF6A3A);
   border-radius: 7px;
-  border: 1px solid #ffffff;
-  color: #6f4900;
+  border: 1Px solid #ffffff;
+  color: #fff;
   line-height: 12px;
   box-sizing: border-box;
   text-align: center;
@@ -361,7 +357,7 @@
   transform: translateY(-50%);
   z-index: 10;
   margin: 0;
-  width: 40Px;
+  width: 40px;
   img {
     width: 100%;
   }
@@ -370,21 +366,21 @@
 .toggleMusicType {
   :global {
     .van-popover__content {
-      padding: 4Px 0;
-      border-radius: 8Px;
+      padding: 4px 0;
+      border-radius: 8px;
     }
     .van-popover__action {
-      width: 130Px;
-      height: 40Px;
-      padding: 0 14Px;
+      width: 130px;
+      height: 40px;
+      padding: 0 14px;
       & > img {
-        width: 38Px;
-        margin-right: 16Px;
+        width: 38px;
+        margin-right: 16px;
       }
     }
     .action-text {
       flex: 1;
-      font-size: 14Px;
+      font-size: 14px;
       text-align: justify;
       text-align-last: justify;
       text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器
@@ -434,9 +430,9 @@
   }
 }
 
-.followEndBtn{
+.followEndBtn {
   background-color: transparent;
   background-size: 100%;
   background-position: center;
   color: #fff;
-}
+}

src/subpages/colexiu/buttons/index.tsx

@@ -21,8 +21,8 @@ import evastyles from '../popups/evaluating/index.module.less'
 import ModelWraper from './model-wraper'
 import Follow from '../popups/follow'
 import { switchProps } from '../popups/setting/evaluat'
-import iconFollowEndBtn from '../popups/follow/icons/icon-followEndBtn.svg'
-import iconEvaluatingEnd from './icons/icon-evaluatingEnd.svg'
+import iconFollowEndBtn from '../popups/follow/icons/icon-followEndBtn.png'
+import iconEvaluatingEnd from './icons/icon-evaluatingEnd.png'
 import store from 'store'
 import { useRoute } from 'vue-router'
 import styles from './index.module.less'
@@ -202,7 +202,14 @@ export default defineComponent({
             styles.container,
             show.value ? 'animate__animated animate__fadeInDown' : 'animate__animated animate__fadeOutUp',
           ]}
-          style={route.query.headerHeight ? {paddingTop: route.query.headerHeight + 'px', height: `calc(0.90667rem + var(--header-padding-top) + ${route.query.headerHeight + 'px'})`} : {}}
+          style={
+            route.query.headerHeight
+              ? {
+                  paddingTop: route.query.headerHeight + 'px',
+                  height: `calc(0.90667rem + var(--header-padding-top) + ${route.query.headerHeight + 'px'})`,
+                }
+              : {}
+          }
         >
           <div class={styles.leftButton}>
             {!route.query?.modelType && (
@@ -226,7 +233,6 @@ export default defineComponent({
                     evaluatingRef.value?.playerStop?.()
                   }}
                 >
-                  结束评测
                 </Button>
               )}
 
@@ -237,9 +243,7 @@ export default defineComponent({
                   onClick={() => {
                     followRef.value?.handleEnd?.()
                   }}
-                >
-                  结束演奏
-                </Button>
+                ></Button>
               )}
             </Transition>
           </div>
@@ -269,7 +273,16 @@ export default defineComponent({
                   modelWraperShow.value = true
                 }}
               >
-                <ButtonIcon key="modelType" name="modelType" />
+                <ButtonIcon
+                  key="modelType"
+                  name={
+                    ['init', 'practice'].includes(modelType.value)
+                      ? 'modelType'
+                      : ['follow'].includes(modelType.value)
+                      ? 'modelType1'
+                      : 'modelType2'
+                  }
+                />
                 <span>模式</span>
               </Button>
             )}

src/subpages/colexiu/buttons/model-wraper.module.less

@@ -5,7 +5,7 @@
   bottom: 0;
   z-index: 100;
   .wrap {
-    padding: 16px 0;
+    padding: 10px 0;
     display: flex;
     justify-content: center;
     background: rgba(255, 255, 255, 0.7);

src/subpages/colexiu/buttons/model-wraper.tsx

@@ -1,8 +1,8 @@
 import { defineComponent, onMounted, Teleport, Transition } from 'vue'
 import styles from './model-wraper.module.less'
-import model1 from './icons/model-1.svg'
-import model2 from './icons/model-2.svg'
-import model3 from './icons/model-3.svg'
+import model1 from './icons/model-1.png'
+import model2 from './icons/model-2.png'
+import model3 from './icons/model-3.png'
 
 export default defineComponent({
   name: 'modelWraper',
@@ -19,21 +19,17 @@ export default defineComponent({
   setup(props, ctx) {
     return () => (
       <Teleport to="body">
-        <div class={styles.modelWraper}>
-          <Transition
-            mode="out-in"
-            enter-active-class="animate__animated animate__flipInX"
-            leave-active-class="animate__animated animate__fadeOut"
-          >
-            {props.show && (
+        <Transition name="van-fade">
+          {props.show && (
+            <div class={styles.modelWraper}>
               <div class={styles.wrap}>
                 <img data-step="step0" onClick={() => props.onChangeModelType!('practice')} src={model1} />
                 <img data-step="step1" onClick={() => props.onChangeModelType!('follow')} src={model3} />
                 <img data-step="step2" onClick={() => props.onChangeModelType!('evaluation')} src={model2} />
               </div>
-            )}
-          </Transition>
-        </div>
+            </div>
+          )}
+        </Transition>
       </Teleport>
     )
   },

src/subpages/colexiu/buttons/player.tsx

@@ -5,7 +5,7 @@ import { Button } from 'vant'
 import { evaluatingRef, startButtonShow } from './'
 import ButtonIcon from './icon'
 import { useMenu, useWiredHeadsetCheck } from '../uses'
-import iconEvaluatingStart from './icons/icon-evaluatingStart.svg'
+import iconEvaluatingStart from './icons/icon-evaluatingStart.png'
 import styles from './index.module.less'
 
 export default defineComponent({
@@ -54,7 +54,6 @@ export default defineComponent({
                     evaluatingRef.value?.togglePlay?.()
                   }}
                 >
-                  开始
                 </Button>
               )}
             </Transition>

src/subpages/colexiu/index.module.less

@@ -7,7 +7,13 @@
   height: 100vh;
   background-size: cover;
 }
-
+.headTitle {
+  font-size: 12px;
+  font-weight: bold;
+  text-align: center;
+  padding: 0 10px;
+  margin: 8px 0 0 0;
+}
 :global(.openCamera) {
   opacity: 0.7;
 }
@@ -18,7 +24,7 @@
     }
   }
   .musicSheet {
-    background: var(--eye-background-color)!important;
+    background: var(--eye-background-color) !important;
   }
   &.container {
     &::before {
@@ -38,10 +44,10 @@
   overflow: hidden;
   overflow-y: auto;
   &:global(.evaluating) {
-    background: #E2F6F1;
+    background: #e2f6f1;
   }
   box-sizing: border-box;
-  &::-webkit-scrollbar{
+  &::-webkit-scrollbar {
     width: 0;
   }
 }

src/subpages/colexiu/index.tsx

@@ -336,21 +336,14 @@ export default defineComponent({
             {error && <Empty />}
             {score.value && fingeringInited && (
               <>
-                <h3
+                <div
                   style={{
-                    fontSize: '24px',
-                    fontWeight: 'normal',
-                    textAlign: 'center',
-                    padding: '0 10px',
-                    marginTop: '36px',
-                    marginBottom: '0px',
-                    marginLeft: 'auto',
                     width: musicSheetStyle.width,
                   }}
-                  class="van-ellipsis"
+                  class={["van-ellipsis", styles.headTitle]}
                 >
                   {detail.value.musicSheetName}
-                </h3>
+                </div>
                 <MusicSheet
                   ref={MusicSheetRef}
                   style={musicSheetStyle}

src/subpages/colexiu/popups/evaluating/content.tsx

@@ -23,7 +23,7 @@ import Image1 from './icons/5.svg'
 import Image2 from './icons/4.svg'
 import Image3 from './icons/3.svg'
 import Image4 from './icons/2.svg'
-import Image5 from './icons/1.svg'
+import Image5 from './icons/1.png'
 import iconShare from './icons/icon-share.svg'
 import iconUpload from './icons/icon-upload.svg'
 import { useOriginSearch } from '../../uses'

src/subpages/colexiu/popups/follow/icons/icon-followEndBtn.svg

@@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="129px" height="44px" viewBox="0 0 129 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>编组 20</title>
-    <defs>
-        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
-            <stop stop-color="#6A56E5" offset="0%"></stop>
-            <stop stop-color="#A368EE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="2.13579154e-12%" y1="45.6613184%" x2="100%" y2="54.3386816%" id="linearGradient-2">
-            <stop stop-color="#D4A9FF" offset="0%"></stop>
-            <stop stop-color="#9680FF" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="结束跟练" transform="translate(-342.000000, -16.000000)">
-            <g id="编组-20" transform="translate(342.000000, 16.000000)">
-                <rect id="矩形" fill="url(#linearGradient-1)" x="0" y="0" width="129" height="44" rx="19"></rect>
-                <rect id="矩形" fill="url(#linearGradient-2)" x="0" y="0" width="129" height="38" rx="19"></rect>
-                <circle id="椭圆形" fill="#FFFFFF" cx="8" cy="17" r="2"></circle>
-                <ellipse id="椭圆形" fill="#FFFFFF" transform="translate(11.183013, 9.683013) rotate(-52.000000) translate(-11.183013, -9.683013) " cx="11.1830127" cy="9.6830127" rx="3.5" ry="2.5"></ellipse>
-            </g>
-        </g>
-    </g>
-</svg>

src/subpages/colexiu/popups/follow/icons/icon-follwBtn.svg

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="154px" height="154px" viewBox="0 0 154 154" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>编组 17</title>
-    <defs>
-        <linearGradient x1="2.13579154e-12%" y1="-2.20656826e-13%" x2="100%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#D4A9FF" offset="0%"></stop>
-            <stop stop-color="#8F80FF" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="跟练模式" transform="translate(-329.000000, -155.000000)">
-            <g id="编组-17" transform="translate(329.000000, 155.000000)">
-                <circle id="椭圆形" fill-opacity="0.300180288" fill="#B58EFF" cx="77" cy="77" r="77"></circle>
-                <circle id="椭圆形" fill="url(#linearGradient-1)" cx="77" cy="77" r="68"></circle>
-            </g>
-        </g>
-    </g>
-</svg>

src/subpages/colexiu/popups/follow/index.tsx

@@ -9,7 +9,7 @@ import { getPlatform, getRequestHostname } from '/src/helpers/utils'
 import { setStepIndex } from '/src/pages/detail/helpers'
 import state, { refreshView, setCurrentTime } from '/src/pages/detail/runtime'
 import detailState from '/src/pages/detail/state'
-import iconFollwBtn from './icons/icon-follwBtn.svg'
+import iconFollwBtn from './icons/icon-follwBtn.png'
 // 显示或隐藏播放按钮
 const togglePlayer = (show: boolean = false) => {
   let globalPlayer: HTMLElement = document.querySelector('#globalPlayer')!
@@ -36,7 +36,7 @@ const openToggleRecord = (open: boolean = true) => {
     },
   })
   // 记录跟练时长
-  if(open) {
+  if (open) {
     followTime.value = Date.now()
   } else {
     const playTime = Date.now() - followTime.value
@@ -50,7 +50,7 @@ const initBehaviorId = '' + new Date().valueOf()
 /**
  * 记录时长
  */
-async function updatePlayTime(time: number){
+async function updatePlayTime(time: number) {
   const search = useOriginSearch()
   const behaviorId = sessionStorage.getItem('behaviorId') || search.behaviorId || initBehaviorId
   const prefix = getRequestHostname()
@@ -68,7 +68,7 @@ async function updatePlayTime(time: number){
         behaviorId,
       },
     })
-  }catch(err){}
+  } catch (err) {}
 }
 
 // 清除音符状态
@@ -105,7 +105,7 @@ const handleEnd = () => {
 
 // 下一个
 const next = () => {
-  if (state.osmd.product){
+  if (state.osmd.product) {
     state.osmd.cursor.setPosition(detailState.times[data.index].cursorBox)
   } else {
     state.osmd.cursor.next()
@@ -192,9 +192,11 @@ export default defineComponent({
         <div class={styles.follow}>
           <Transition name="start" duration={300}>
             {!data.start && (
-              <Button style={{backgroundImage: `url(${iconFollwBtn})`}} class={[styles.button, styles.start, styles.followBtn]} onClick={() => handleStart()}>
-                开始
-              </Button>
+              <Button
+                style={{ backgroundImage: `url(${iconFollwBtn})` }}
+                class={[styles.button, styles.start, styles.followBtn]}
+                onClick={() => handleStart()}
+              ></Button>
             )}
           </Transition>
           {/* <div class={styles.title}>

src/subpages/colexiu/popups/setting/index.module.less

@@ -106,48 +106,40 @@
 }
 
 .btnsbar {
-  padding: 0 7px;
   margin: 4px auto;
-  margin-bottom: 3px;
+  margin-bottom: 8px;
   box-sizing: border-box;
-  // margin-top: 10px;
-  // height: 15px;
   position: absolute;
   bottom: 0;
   display: flex;
   width: 100%;
   justify-content: center;
   .btn {
-    height: 15px;
-    border-radius: 3px;
+    width: 32%;
+    height: 16px;
+    background: #fff6e8;
+    border-radius: 4px;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 5px;
-    background: #fff6e8;
-    color: #6c442d;
-    border: none;
-    // padding: 0 3px;
-    margin: 0 5Px;
-    :global {
-      .van-button__text {
-        margin: 0;
-      }
-    }
-    img {
+    font-size: 6px;
+    color: #904C24;
+    margin: 0 2px;
+    .iconBtn {
       width: 10px;
       height: 10px;
-      margin-right: 0;
+      margin-right: 2px;
     }
   }
 }
 
 .radioGroup {
   display: flex;
+  justify-content: space-evenly;
   align-items: center;
-  padding: 4Px;
-  border-radius: 4px;
-  background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-color) 100%);
+  padding: 2px;
+  border-radius: 2px;
+  background: var(--primary-color);
   margin-left: auto;
   :global {
     .van-radio__icon {
@@ -155,18 +147,18 @@
     }
     .van-radio__label {
       margin: 0;
-      font-size: 12Px;
+      font-size: 6px;
       color: #fff;
       line-height: normal;
       white-space: nowrap;
-      padding: 2Px 4Px;
+      padding: 0 2px;
     }
     .van-radio {
+      flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: 3px;
-      margin: 0 1px;
+      border-radius: 2px;
     }
     .van-radio[aria-checked='true'] {
       background: #fff;
@@ -187,3 +179,4 @@
     background-color: #2dc7aa;
   }
 }
+

src/subpages/colexiu/popups/setting/sett.tsx

@@ -2,8 +2,8 @@ import { defineComponent, Ref, ref } from 'vue'
 import { Button, Cell, CellGroup, Col, Dialog, Divider, NoticeBar, Radio, RadioGroup, Row, Switch, Toast } from 'vant'
 import InfoIcon from './info.svg'
 import iconDown from './icons/down.svg'
-import iconTv from './icons/tv.svg'
-import iconYijian from './icons/yijian.svg'
+import iconTv from './icons/tv.png'
+import iconYijian from './icons/yijian.png'
 import styles from './index.module.less'
 import evastyles from '../evaluating/index.module.less'
 import detailState from '/src/pages/detail/state'
@@ -82,7 +82,7 @@ export default defineComponent({
             backend = runtime.osmd.Drawer.Backends[0]
           }
           const { width, height } = (backend as any).ctx
-          console.log("🚀 ~ width", backend)
+          console.log('🚀 ~ width', backend)
           const cw = width
           const ch = height
           const svg: SVGAElement = (backend as any).ctx.svg.cloneNode(true)
@@ -117,7 +117,13 @@ export default defineComponent({
       return (
         <>
           <div>
-            <NoticeBar class={styles.noticebar} left-icon={InfoIcon} background="#FFF6E8" color="var(--van-primary-color)" text="全局设置会更改所有乐谱练习及评测" />
+            <NoticeBar
+              class={styles.noticebar}
+              left-icon={InfoIcon}
+              background="#FFF6E8"
+              color="var(--van-primary-color)"
+              text="全局设置会更改所有乐谱练习及评测"
+            />
             <div class={styles.groupBox} style={{ height: 'auto' }}>
               <Cell center border={false} title="护眼模式">
                 <Switch v-model={SettingState.sett.eyeProtection} {...switchProps}></Switch>
@@ -146,21 +152,23 @@ export default defineComponent({
               </Cell> */}
             </div>
             <div class={styles.btnsbar}>
-              {/* <Button class={styles.btn} icon={iconDown} onClick={download}>
+              {/* <div class={styles.btn} onClick={download}>
+                <img class={styles.iconBtn} src={iconTv} />
                 下载曲谱
-              </Button> */}
-              <Button class={styles.btn} icon={iconTv} onClick={() => (helperShow.value = true)}>
+              </div> */}
+              <div class={styles.btn} onClick={() => (helperShow.value = true)}>
+                <img class={styles.iconBtn} src={iconTv} />
                 投屏帮助
-              </Button>
-              <Button
+              </div>
+              <div
                 class={styles.btn}
-                icon={iconYijian}
                 onClick={() => {
                   suggestPopup.value?.onShow()
                 }}
               >
+                <img class={styles.iconBtn} src={iconYijian} />
                 意见反馈
-              </Button>
+              </div>
             </div>
           </div>
 

src/subpages/colexiu/popups/sound-effect/icons/icon-arrow.svg

@@ -2,7 +2,7 @@
 <svg width="12px" height="8px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>编组</title>
     <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="校音" transform="translate(-752.000000, -31.000000)" fill="#2DC7AA" fill-rule="nonzero">
+        <g id="校音" transform="translate(-752.000000, -31.000000)" fill="rgba(239,135,97,1)" fill-rule="nonzero">
             <g id="编组-3" transform="translate(662.000000, 17.000000)">
                 <g id="编组" transform="translate(90.000000, 14.000000)">
                     <path d="M11.7400568,1.65016112 L6.60700607,7.43152524 C6.45363484,7.61126842 6.23254967,7.71428571 6.00021922,7.71428571 C5.76792263,7.71428571 5.5468889,7.6113319 5.39343237,7.43152524 L0.260381669,1.65016112 C0.00978292395,1.37755102 -0.0676492725,0.980236305 0.0618736743,0.629323308 C0.191396621,0.278410311 0.503941123,0.0333512352 0.867168518,0 L11.1290463,0 C11.4936816,0.0319011815 11.807634,0.275510204 11.9371569,0.627873255 C12.0680877,0.980236305 11.9906555,1.37610097 11.7400568,1.65016112 Z" id="路径"></path>

src/subpages/colexiu/popups/sound-effect/icons/icon-sound.svg

@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="588px" height="145px" viewBox="0 0 588 145" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>音符</title>
-    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="校音" transform="translate(-104.000000, -105.000000)" fill-rule="nonzero">
-            <g id="音符" transform="translate(104.569207, 105.524378)">
-                <path d="M577.500939,108.495286 C577.012135,109.030476 574.683685,109.678471 572.763157,109.776654 C570.345293,109.874002 569.071805,110.089166 567.762144,110.565031 C565.999853,111.315384 564.929308,112.458042 564.922261,113.703893 C564.966968,113.979217 566.486067,117.371672 568.268398,121.25712 C570.131609,125.157191 571.662766,128.462746 571.731588,128.564269 C571.788353,128.752692 571.464833,128.694202 570.344572,128.402586 C566.822027,127.498492 563.309502,128.912298 561.419586,131.777507 C560.882552,132.660298 560.729326,133.167078 560.572576,134.296784 C560.210845,136.903796 561.21554,139.223366 563.473131,140.878649 C564.383401,141.488622 564.694864,141.634012 566.716862,141.999577 C568.900621,142.394386 568.981501,142.409008 570.545859,141.890111 C574.705423,140.593285 576.865618,136.975218 575.742385,133.11985 C575.527384,132.279256 574.023866,128.176975 572.370646,123.958548 L569.384201,116.203109 L570.031241,116.32009 C572.643515,116.614211 574.54345,116.066903 575.96163,114.808935 C577.193935,113.695522 577.69832,112.450507 577.906825,110.350274 C578.091214,108.423843 577.989743,107.960096 577.500939,108.495286 L577.500939,108.495286 Z" id="路径" fill="#36D2C8" transform="translate(569.246688, 125.288409) rotate(39.000000) translate(-569.246688, -125.288409) "></path>
-                <path d="M580.131042,84.3857629 C579.901016,84.637617 578.805275,84.9425561 577.901497,84.9887599 C576.763679,85.0345708 576.16439,85.1358242 575.548079,85.3597606 C574.718766,85.7128681 574.21498,86.2505895 574.211664,86.8368722 C574.232702,86.9664363 574.947572,88.562886 575.786316,90.3913321 C576.663121,92.2266594 577.383666,93.7822149 577.416053,93.8299904 C577.442766,93.9186602 577.290521,93.8911354 576.763339,93.7539042 C575.105671,93.3284482 573.452718,93.9937689 572.563346,95.3421023 C572.310624,95.7575336 572.238518,95.9960183 572.164753,96.5276443 C571.994527,97.7544735 572.467324,98.8460362 573.52972,99.6249927 C573.958083,99.9120388 574.104653,99.9804579 575.056182,100.152488 C576.083833,100.338281 576.121894,100.345162 576.858063,100.100975 C578.815505,99.4907037 579.832067,97.7880839 579.303487,95.9737932 C579.20231,95.5782196 578.494772,93.6477342 577.716786,91.6625921 L576.3114,88.012974 L576.61589,88.0680237 C577.845195,88.2064337 578.739282,87.9488772 579.406661,87.356892 C579.986569,86.8329331 580.223927,86.2470433 580.322047,85.2586987 C580.408818,84.3521428 580.361067,84.1339088 580.131042,84.3857629 L580.131042,84.3857629 Z" id="路径备份" fill="#00AC98" transform="translate(576.246688, 92.288409) rotate(54.000000) translate(-576.246688, -92.288409) "></path>
-                <path d="M40.372203,5.79625843 L17.6521975,9.39114882 C17.5785509,9.40219446 17.5097063,9.422847 17.4429686,9.44698031 L16.6222719,9.44698031 C16.0626458,9.44698031 15.6180711,9.8709378 15.6180711,10.3935171 L15.6180711,34.9936797 C14.7315677,34.5081823 13.7007111,34.2310203 12.6020878,34.2310203 C9.27103621,34.2310203 6.57031733,36.7827478 6.57031733,39.9310325 C6.57031733,43.0795493 9.27098722,45.6309056 12.6020878,45.6309056 C15.9330415,45.6309056 18.6338094,43.0795029 18.6338094,39.9310325 C18.6338094,39.7002809 18.6191584,39.4735669 18.5915716,39.2522829 C18.6191584,39.1647067 18.6338094,39.0737427 18.6338094,38.9770238 L18.6338094,18.9704997 L39.7450062,15.4444822 L39.7450062,29.2917647 C38.8584539,28.8081236 37.8276952,28.5291517 36.729023,28.5291517 C33.3979713,28.5291517 30.6973014,31.08255 30.6973014,34.2310204 C30.6973014,37.3776807 33.3979223,39.9310326 36.729023,39.9310326 C40.0601236,39.9310326 42.7607935,37.3776343 42.7607935,34.2310204 C42.7607935,34.0003615 42.7460935,33.7736475 42.7186047,33.5504143 C42.7461425,33.4628382 42.7607935,33.3718277 42.7607935,33.2752016 L42.7607935,6.67596443 C42.7607935,6.21088749 42.4044184,5.82234098 41.9351968,5.74413973 C41.7712437,5.6475136 41.5651018,5.60834338 41.338282,5.6437544 L40.8042338,5.72933489 L40.749207,5.72933489 C40.6157317,5.72938125 40.4879894,5.7535146 40.372203,5.79625843 L40.372203,5.79625843 Z" id="路径备份-3" fill="#EE694E" transform="translate(24.665555, 25.630906) rotate(-24.000000) translate(-24.665555, -25.630906) "></path>
-                <path d="M55.9482145,46.6970467 L46.8602123,48.1350029 C46.8307536,48.1394211 46.8032158,48.1476821 46.7765207,48.1573355 L46.448242,48.1573355 C46.2243916,48.1573355 46.0465617,48.3269185 46.0465617,48.5359502 L46.0465617,58.3760152 C45.6919604,58.1818162 45.2796177,58.0709515 44.8401684,58.0709515 C43.5077477,58.0709515 42.4274602,59.0916425 42.4274602,60.3509564 C42.4274602,61.6103631 43.5077281,62.6309056 44.8401684,62.6309056 C46.1725498,62.6309056 47.252857,61.6103445 47.252857,60.3509564 C47.252857,60.2586557 47.2469966,60.1679701 47.2359619,60.0794565 C47.2469966,60.044426 47.252857,60.0080404 47.252857,59.9693528 L47.252857,51.9667432 L55.6973358,50.5563362 L55.6973358,56.0952492 C55.3427148,55.9017928 54.9304114,55.790204 54.4909424,55.790204 C53.1585218,55.790204 52.0782538,56.8115633 52.0782538,58.0709515 C52.0782538,59.3296156 53.1585022,60.3509564 54.4909424,60.3509564 C55.8233827,60.3509564 56.9036507,59.3295971 56.9036507,58.0709515 C56.9036507,57.9786879 56.8977707,57.8880023 56.8867751,57.798709 C56.8977903,57.7636786 56.9036507,57.7272744 56.9036507,57.688624 L56.9036507,47.0489291 C56.9036507,46.8628983 56.7611006,46.7074797 56.573412,46.6761992 C56.5078307,46.6375488 56.425374,46.6218807 56.334646,46.6360451 L56.1210268,46.6702773 L56.0990161,46.6702773 C56.045626,46.6702958 55.994529,46.6799492 55.9482145,46.6970467 L55.9482145,46.6970467 Z" id="路径备份-4" fill="#01C1B5" transform="translate(49.665555, 54.630906) rotate(34.000000) translate(-49.665555, -54.630906) "></path>
-            </g>
-        </g>
-    </g>
-</svg>

src/subpages/colexiu/popups/sound-effect/index.module.less

@@ -81,16 +81,20 @@
 .bottom {
   position: absolute;
   bottom: 0;
-  left: 64px;
+  left: 26px;
+  width: 210Px;
+  height: 188Px;
 }
 .wrap {
   display: flex;
   flex-direction: column;
-  width: 211px;
-  height: 115px;
+  width: 290px;
+  height: 170px;
   margin: 0 auto;
-  background: url('./icons/icon-heiban.svg') no-repeat 100%/100%;
-  padding-top: 20px;
+  background-image: url('./icons/icon-heiban.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  padding-top: 28px;
   align-items: center;
   box-sizing: border-box;
 }

src/subpages/colexiu/popups/sound-effect/index.tsx

@@ -6,12 +6,12 @@ import { OpenSheetMusicDisplay } from '/osmd-extended/src'
 import SettingState from '/src/pages/detail/setting-state'
 import styles from './index.module.less'
 import iconArrow from './icons/icon-arrow.svg'
-import iconBottom from './icons/icon-bottom.svg'
+import iconBottom from './icons/icon-bottom.png'
 import iconRed from './icons/icon-red.png'
 import iconBack from './icons/back.svg'
 import iconGreen from './icons/icon-green.png'
 import iconWhite from './icons/icon-white.png'
-import iconSound from './icons/icon-sound.svg'
+import iconSound from './icons/icon-sound.png'
 import getScore from '/src/pages/detail/tuning-popup/data'
 import { getAllNodes } from '/src/pages/detail/helpers'
 import { storeKeys } from '/src/constant/store-keys'