样式修改

src/music-sheet/index.tsx

@@ -187,7 +187,7 @@ export default defineComponent({
             await useOsmdLoader(osmd.value, score.value)
             emit('rerender', osmd.value)
             event.emit('loaded')
-            // resetFormate()
+            resetFormate()
           } catch (error) {
             console.error(error)
             emit('renderError')
@@ -197,6 +197,15 @@ export default defineComponent({
       { immediate: true }
     )
 
+    const resetFormate = () => {
+      // const svg = container.value?.querySelector("svg");
+			// if (!svg) return;
+			// console.log("🚀 ~ svg:", svg)
+			// const svgBBox = svg.getBBox();
+      // if (svgBBox.y < 0) {
+      //   svg.setAttribute('height', Number(svg.getAttribute('height')) - svgBBox.y + '')
+      // }
+    }
     /**
      * 重新渲染曲谱方法
      * @param {SetRenderOptions} options
@@ -215,6 +224,7 @@ export default defineComponent({
             await useOsmdLoader(osmd.value, renderScore)
             emit('rerender', osmd.value)
             event.emit('loaded')
+            resetFormate()
           } catch (error) {
             console.error(error)
             emit('renderError')

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

@@ -1,6 +1,6 @@
 <?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>
+    <title>智能指法@2x</title>
     <defs>
         <linearGradient x1="-7.37257477e-16%" y1="-4.51028104e-15%" x2="100%" y2="100%" id="linearGradient-1">
             <stop stop-color="#FF9C63" offset="0%"></stop>
@@ -8,13 +8,11 @@
         </linearGradient>
     </defs>
     <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="练习模式2" transform="translate(-650.000000, -14.000000)">
-            <g id="智能指法" transform="translate(650.000000, 14.000000)">
+        <g id="曲谱评测（按钮合集）备份" transform="translate(-536.000000, -292.000000)">
+            <g id="智能指法" transform="translate(536.000000, 292.000000)">
                 <rect id="矩形备份-33" fill="url(#linearGradient-1)" x="0" y="0" width="29" height="29" rx="14.5"></rect>
-                <g id="编组-30" transform="translate(5.800000, 5.800000)">
-                    <path d="M16.8932208,6.69623304 L14.4526566,14.502339 C14.0807721,15.4253062 13.9177595,16.0966251 12.5620189,17.0276851 C11.2430584,17.9334863 7.41318289,18.1356915 5.47680623,16.5605206 L16.9257689,5.99282456 C16.9742705,6.21887716 16.9668611,6.46058395 16.8932208,6.69623304 Z M8.79847084,0 C9.5060148,0 10.0860005,0.578829536 10.1083521,1.30718361 L10.2921748,7.37371794 L11.2436595,2.68142205 C11.3881742,1.96848287 12.0567956,1.50218211 12.7539345,1.6285843 L12.8333212,1.64284308 C13.5300747,1.76963065 14.0036976,2.44287645 13.90273,3.16429382 L13.462,6.304 L4.02623291,15.0144403 C3.68425373,14.5954712 3.36629419,14.1713471 3.13542155,13.8221564 L0.2759574,9.87863937 C-0.164138026,9.27244838 -0.0681802669,8.41769212 0.494848996,7.93096661 C1.05246495,7.44542751 1.89761274,7.50174773 2.38587199,8.05698343 L4.65494543,10.5973591 L3.61366886,3.16429382 C3.51270126,2.44287645 3.98593872,1.76924527 4.68307762,1.64284308 L4.76246436,1.6285843 C5.45960327,1.50179674 6.1282246,1.9680975 6.2727393,2.68142205 L7.22345332,7.37371794 L7.40804676,1.30718361 C7.430013,0.578829536 8.00999865,0 8.71792799,0 L8.79847084,0 Z" id="形状结合" fill="#FFFFFF" fill-rule="nonzero"></path>
-                    <line x1="2.76472334" y1="3.9258533" x2="16.5419034" y2="16.6432502" id="直线备份" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" transform="translate(9.653313, 10.284552) scale(-1, 1) translate(-9.653313, -10.284552) "></line>
-                </g>
+                <path d="M21.8314994,12.1141007 L19.528609,19.479859 C19.1777028,20.350761 19.0238859,20.9842104 17.7446236,21.8627487 C16.4653612,22.741287 12.6828466,22.9183764 10.9104974,21.2936624 C10.8341571,21.2236444 10.7539763,21.1463166 10.6711119,21.0631483 L18.2712366,14.0446067 L18.2497104,14.2017201 L18.3342366,13.9866067 L21.6314328,10.9434088 C21.8733368,11.2649544 21.9610729,11.6994655 21.8314994,12.1141007 Z M14.1930161,5.79560673 C14.8610107,5.79560673 15.4082789,6.3417841 15.4293697,7.02905123 L15.6028228,12.7533683 L16.5006337,8.32576795 C16.6369962,7.65304615 17.2679002,7.21304974 17.925713,7.33232149 L18.0006215,7.34577593 C18.6580707,7.46541132 19.1049761,8.10067887 19.0097042,8.7814006 L18.7752366,10.4486067 L9.17960068,19.3070578 C9.05715714,19.1413393 8.94553502,18.9828633 8.84978688,18.838046 L6.15162702,15.1169854 C5.73635768,14.54499 5.82690239,13.7384512 6.3581708,13.2791822 C6.88433126,12.8210327 7.68180369,12.8741758 8.14251991,13.3980903 L10.2835934,15.7951617 L9.30105593,8.7814006 C9.20578398,8.10067887 9.6523258,7.46504768 10.3101386,7.34577593 L10.3850471,7.33232149 C11.0428599,7.2126861 11.6737639,7.65268252 11.8101264,8.32576795 L12.70721,12.7533683 L12.8813904,7.02905123 C12.9021175,6.3417841 13.4493858,5.79560673 14.1173804,5.79560673 L14.1930161,5.79560673 Z" id="形状结合" fill="#FFFFFF" fill-rule="nonzero"></path>
+                <line x1="8.5" y1="9.5" x2="21.5" y2="21.5" id="直线备份" stroke="#FFFFFF" stroke-width="1.3" stroke-linecap="round" transform="translate(15.000000, 15.500000) scale(-1, 1) translate(-15.000000, -15.500000) "></line>
             </g>
         </g>
     </g>

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

@@ -1,6 +1,6 @@
 <?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>
+    <title>选段（未点）@2x</title>
     <defs>
         <linearGradient x1="-7.37257477e-16%" y1="-4.51028104e-15%" x2="100%" y2="100%" id="linearGradient-1">
             <stop stop-color="#FF9C63" offset="0%"></stop>
@@ -8,8 +8,8 @@
         </linearGradient>
     </defs>
     <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="练习模式" transform="translate(-601.000000, -14.000000)">
-            <g id="选段（未点）" transform="translate(601.000000, 14.000000)">
+        <g id="曲谱评测（按钮合集）备份" transform="translate(-577.000000, -289.000000)">
+            <g id="选段（未点）" transform="translate(577.000000, 289.000000)">
                 <rect id="矩形备份-29" fill="url(#linearGradient-1)" x="0" y="0" width="29" height="29" rx="14.5"></rect>
                 <g id="编组-17" transform="translate(3.248612, 6.908582)" fill="#FFFFFF" fill-rule="nonzero">
                     <path d="M4.82909557,0 C5.38138032,0 5.82909557,0.44771525 5.82909557,1 C5.82909557,1.51283584 5.44305538,1.93550716 4.94571669,1.99327227 L4.82909557,2 L3,2 C2.48716416,2 2.06449284,2.38604019 2.00672773,2.88337887 L2,3 L2,12.0123414 C2,12.5251772 2.38604019,12.9478485 2.88337887,13.0056136 L3,13.0123414 L4.82909557,13.0123414 C5.38138032,13.0123414 5.82909557,13.4600566 5.82909557,14.0123414 C5.82909557,14.5251772 5.44305538,14.9478485 4.94571669,15.0056136 L4.82909557,15.0123414 L3,15.0123414 C1.40231912,15.0123414 0.0963391206,13.7634214 0.00509269341,12.1886141 L0,12.0123414 L0,3 C0,1.40231912 1.24891996,0.0963391206 2.82372721,0.00509269341 L3,0 L4.82909557,0 Z" id="路径-6"></path>

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

@@ -1,6 +1,6 @@
 <?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>
+    <title>选段（全选）@2x</title>
     <defs>
         <linearGradient x1="-7.37257477e-16%" y1="-4.51028104e-15%" x2="100%" y2="100%" id="linearGradient-1">
             <stop stop-color="#FF9C63" offset="0%"></stop>
@@ -8,10 +8,10 @@
         </linearGradient>
     </defs>
     <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="练习模式2" transform="translate(-601.000000, -14.000000)">
-            <g id="选段（未点）" transform="translate(601.000000, 14.000000)">
+        <g id="曲谱评测（按钮合集）备份" transform="translate(-662.000000, -289.000000)">
+            <g id="选段（全选）" transform="translate(662.000000, 289.000000)">
                 <rect id="矩形备份-29" fill="url(#linearGradient-1)" x="0" y="0" width="29" height="29" rx="14.5"></rect>
-                <g id="编组-17" transform="translate(3.248612, 6.908582)" fill="#DD5A29" fill-rule="nonzero">
+                <g id="编组-17" transform="translate(3.000000, 7.000000)" fill="#ED4711" fill-rule="nonzero">
                     <path d="M4.82909557,0 C5.38138032,0 5.82909557,0.44771525 5.82909557,1 C5.82909557,1.51283584 5.44305538,1.93550716 4.94571669,1.99327227 L4.82909557,2 L3,2 C2.48716416,2 2.06449284,2.38604019 2.00672773,2.88337887 L2,3 L2,12.0123414 C2,12.5251772 2.38604019,12.9478485 2.88337887,13.0056136 L3,13.0123414 L4.82909557,13.0123414 C5.38138032,13.0123414 5.82909557,13.4600566 5.82909557,14.0123414 C5.82909557,14.5251772 5.44305538,14.9478485 4.94571669,15.0056136 L4.82909557,15.0123414 L3,15.0123414 C1.40231912,15.0123414 0.0963391206,13.7634214 0.00509269341,12.1886141 L0,12.0123414 L0,3 C0,1.40231912 1.24891996,0.0963391206 2.82372721,0.00509269341 L3,0 L4.82909557,0 Z" id="路径-6"></path>
                     <path d="M21.6,0 C22.1522847,0 22.6,0.44771525 22.6,1 C22.6,1.51283584 22.2139598,1.93550716 21.7166211,1.99327227 L21.6,2 L19.7709044,2 C19.2580686,2 18.8353973,2.38604019 18.7776322,2.88337887 L18.7709044,3 L18.7709044,12.0123414 C18.7709044,12.5251772 19.1569446,12.9478485 19.6542833,13.0056136 L19.7709044,13.0123414 L21.6,13.0123414 C22.1522847,13.0123414 22.6,13.4600566 22.6,14.0123414 C22.6,14.5251772 22.2139598,14.9478485 21.7166211,15.0056136 L21.6,15.0123414 L19.7709044,15.0123414 C18.1732235,15.0123414 16.8672436,13.7634214 16.7759971,12.1886141 L16.7709044,12.0123414 L16.7709044,3 C16.7709044,1.40231912 18.0198244,0.0963391206 19.5946316,0.00509269341 L19.7709044,0 L21.6,0 Z" id="路径-6备份" transform="translate(19.685452, 7.506171) scale(-1, 1) translate(-19.685452, -7.506171) "></path>
                     <path d="M7.38663183,3.16468672 C7.67103319,3.16468672 7.9078373,3.23169101 8.09151342,3.36963037 C8.19044984,3.44393086 8.27198807,3.52660038 8.3370836,3.62199294 L8.39673361,3.72178778 L8.44570689,3.8399476 L11.0060052,11.1981261 C11.1333826,11.5979826 11.0897965,11.9243383 10.8559616,12.1436112 C10.6539869,12.333008 10.3871342,12.4278738 10.0761394,12.4277317 C9.75429837,12.4380234 9.49912749,12.3615939 9.32051223,12.1904329 C9.24559071,12.1186382 9.17929676,12.0399003 9.12078366,11.9524097 L9.03874382,11.8143831 L8.97623509,11.6791532 L8.451,10.3786867 L6.31,10.3786867 L5.8360114,11.6128561 L5.78899311,11.7253373 L5.7346217,11.8325957 L5.67169734,11.9362452 L5.56873498,12.0716304 L5.45888479,12.1839617 C5.2756179,12.348604 5.02191188,12.4278659 4.70552324,12.4278659 C4.38793911,12.4278659 4.12219063,12.3363839 3.92007589,12.1522708 C3.73475991,11.9834603 3.67243907,11.7417995 3.72281336,11.4405697 L3.75127202,11.3078628 L3.79386528,11.1676918 L6.32514346,3.84722707 C6.38320366,3.66304901 6.50412779,3.50302345 6.68175023,3.36963037 C6.86542636,3.23169101 7.10223046,3.16468672 7.38663183,3.16468672 Z M7.386,5.84368672 L6.499,8.67968672 L6.515,8.70168672 L8.258,8.70168672 L8.274,8.67968672 L7.386,5.84368672 Z" id="形状"></path>

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

@@ -249,8 +249,8 @@
   background-size: 100%;
   background-position: center;
   background-repeat: no-repeat;
-  width: 67px;
-  height: 23px;
+  width: 64px;
+  height: 20px;
   border-radius: 12px;
   border: none;
   color: #6f4900;
@@ -324,7 +324,6 @@
     font-size: 6px;
     line-height: 8px;
     padding: 4px;
-    padding-top: 6px;
     box-sizing: border-box;
   }
   .dialogueIcon {

src/subpages/colexiu/buttons/index.tsx

@@ -21,7 +21,7 @@ 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 iconBack from './icons/icon-back.svg'
+import iconBack from './icons/icon-back.png'
 import iconFollowEndBtn from '../popups/follow/icons/icon-followEndBtn.png'
 import iconEvaluatingEnd from './icons/icon-evaluatingEnd.png'
 import iconCameraOff from './icons/icon-camera-off.png'
@@ -196,23 +196,25 @@ export default defineComponent({
             <Transition name="finish">
               {!startButtonShow.value && (
                 <Button
-                  style={{ backgroundImage: `url(${iconEvaluatingEnd})` }}
                   class={[styles.button, styles.finish]}
                   onClick={() => {
                     evaluatingRef.value?.playerStop?.()
                   }}
-                ></Button>
+                >
+                  <img style={{width: '100%', display: 'block'}} src={iconEvaluatingEnd} />
+                </Button>
               )}
             </Transition>
             <Transition name="finish">
               {followRef?.value?.data.start && (
                 <Button
-                  style={{ backgroundImage: `url(${iconFollowEndBtn})` }}
                   class={[styles.button, styles.finish, styles.followEndBtn]}
                   onClick={() => {
                     followRef.value?.handleEnd?.()
                   }}
-                ></Button>
+                >
+                  <img style={{width: '100%', display: 'block'}} src={iconFollowEndBtn} />
+                </Button>
               )}
             </Transition>
           </div>