fix

images/accompaniment.svg

@@ -1,18 +0,0 @@
-<?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>
-        <path d="M14.5,5 C14.9198469,5 15.3333326,5.02709975 15.7387868,5.0796372 L15.739461,11.4914597 C15.425484,11.3833985 15.0883542,11.3247036 14.7374468,11.3247036 C13.0452347,11.3247036 11.6734257,12.6896792 11.6734257,14.3734619 C11.6734257,16.0572446 13.0452347,17.4222202 14.7374468,17.4222202 C16.429659,17.4222202 17.801468,16.0572446 17.801468,14.3734619 L17.7942219,14.1621325 L17.7942219,14.1621325 L17.7727995,13.954679 L17.7707276,5.57515703 C21.4060448,6.90159152 24,10.3757181 24,14.4526775 C24,19.6732471 19.7467051,23.9053549 14.5,23.9053549 C9.25329488,23.9053549 5,19.6732471 5,14.4526775 C5,9.23210785 9.25329488,5 14.5,5 Z M13.6485145,7.42213135 L13.5380921,7.43232999 C11.1412583,7.78453026 9.07005055,9.32180515 8.06867876,11.570923 C6.47021778,15.1611251 8.09835858,19.3711273 11.7018864,20.9755213 C15.3054142,22.5799152 19.5234944,20.9728183 21.1219554,17.3826162 C22.085337,15.2188257 21.8982132,12.7571482 20.6799325,10.7712115 C20.3864474,10.2927972 19.7606992,10.1428825 19.2822849,10.4363676 C18.8038706,10.7298528 18.6539559,11.355601 18.947441,11.8340153 C19.8194764,13.2555325 19.9529316,15.011182 19.2651692,16.5559217 C18.1242057,19.1185678 15.108704,20.2674799 12.5285809,19.1187351 C9.9484578,17.9699903 8.78450142,14.9602635 9.92546495,12.3976175 C10.6403077,10.7920543 12.1179292,9.69534616 13.8335833,9.44324113 C14.3888811,9.36164347 14.7728909,8.8453377 14.6912933,8.29003993 C14.6096956,7.73474215 14.0933898,7.35073233 13.5380921,7.43232999 Z" id="path-1"></path>
-    </defs>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="主界面" transform="translate(-515.000000, -13.000000)">
-            <g id="伴奏" transform="translate(515.000000, 13.000000)">
-                <rect id="矩形备份-27" fill="#2DC7AA" x="0" y="0" width="29" height="29" rx="14.5"></rect>
-                <mask id="mask-2" fill="white">
-                    <use xlink:href="#path-1"></use>
-                </mask>
-                <use id="形状结合" fill="#FFFFFF" xlink:href="#path-1"></use>
-            </g>
-        </g>
-    </g>
-</svg>

images/model-1.svg

@@ -1,67 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="138px" height="50px" viewBox="0 0 138 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>切片</title>
-    <defs>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#46DABE" offset="0%"></stop>
-            <stop stop-color="#2DC7AA" offset="100%"></stop>
-        </linearGradient>
-        <rect id="path-2" x="0" y="0" width="138" height="50" rx="25"></rect>
-        <filter x="-1.8%" y="-5.0%" width="103.6%" height="110.0%" filterUnits="objectBoundingBox" id="filter-3">
-            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
-            <feOffset dx="0" dy="-2" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0.704144022   0 0 0 0 0.569800754  0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
-        </filter>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
-            <stop stop-color="#FFFFFF" stop-opacity="0.5" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-5">
-            <stop stop-color="#FFFFFF" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <text id="text-6" font-family="STYuanti-SC-Bold, Yuanti SC" font-size="15" font-weight="bold" fill="#FFFFFF">
-            <tspan x="0" y="16">练习模式</tspan>
-        </text>
-        <filter x="-3.3%" y="-4.8%" width="106.7%" height="119.0%" filterUnits="objectBoundingBox" id="filter-7">
-            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.318367388   0 0 0 0 0.848505435   0 0 0 0 0.748674244  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <text id="text-8" font-family="STYuanti-SC-Light, Yuanti SC" font-size="10" font-weight="300" fill="#FFFFFF">
-            <tspan x="0" y="30">原音指法跟播</tspan>
-        </text>
-        <filter x="-3.3%" y="-7.1%" width="106.7%" height="128.6%" filterUnits="objectBoundingBox" id="filter-9">
-            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.318367388   0 0 0 0 0.848505435   0 0 0 0 0.748674244  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-    </defs>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="主界面（10.18）" transform="translate(-154.000000, -290.000000)">
-            <g id="示范模式" transform="translate(154.000000, 290.000000)">
-                <g id="矩形">
-                    <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
-                </g>
-                <g id="编组-11" transform="translate(14.000000, 10.000000)">
-                    <circle id="椭圆形" fill="url(#linearGradient-4)" cx="15" cy="15" r="15"></circle>
-                    <path d="M24,14.5 C24,9.25329488 19.7467051,5 14.5,5 C9.25329488,5 5,9.25329488 5,14.5 C5,19.7467051 9.25329488,24 14.5,24" id="路径" stroke="url(#linearGradient-5)" stroke-width="2" stroke-linecap="round" transform="translate(14.500000, 14.500000) rotate(-270.000000) translate(-14.500000, -14.500000) "></path>
-                    <path d="M17.7929013,12.6979322 L20.464394,17.2394698 C20.8844232,17.9535195 20.6460726,18.8728721 19.9320229,19.2929013 C19.7015079,19.4284984 19.4389319,19.5 19.1714927,19.5 L13.8285073,19.5 C13.0000802,19.5 12.3285073,18.8284271 12.3285073,18 C12.3285073,17.7325608 12.400009,17.4699848 12.535606,17.2394698 L15.2070987,12.6979322 C15.6271279,11.9838826 16.5464805,11.7455319 17.2605302,12.1655611 C17.4803607,12.2948732 17.6635893,12.4781017 17.7929013,12.6979322 Z" id="三角形" fill="#FFFFFF" transform="translate(16.500000, 15.000000) rotate(-270.000000) translate(-16.500000, -15.000000) "></path>
-                    <path d="M13.8574929,22.5124882 L15.5913025,25.4021709 C15.8754507,25.8757512 15.7218856,26.4900114 15.2483054,26.7741596 C15.09289,26.8674088 14.9150535,26.9166667 14.7338096,26.9166667 L11.2661904,26.9166667 C10.7139056,26.9166667 10.2661904,26.4689514 10.2661904,25.9166667 C10.2661904,25.7354227 10.3154482,25.5575863 10.4086975,25.4021709 L12.1425071,22.5124882 C12.4266552,22.038908 13.0409155,21.8853429 13.5144958,22.1694911 C13.6552454,22.2539408 13.7730432,22.3717386 13.8574929,22.5124882 Z" id="三角形备份" fill="#FFFFFF" transform="translate(13.000000, 24.000000) rotate(-90.000000) translate(-13.000000, -24.000000) "></path>
-                </g>
-                <g id="编组" transform="translate(56.000000, 6.000000)" fill="#FFFFFF" fill-opacity="1">
-                    <g id="练习模式">
-                        <use filter="url(#filter-7)" xlink:href="#text-6"></use>
-                        <use xlink:href="#text-6"></use>
-                    </g>
-                    <g id="原音指法跟播">
-                        <use filter="url(#filter-9)" xlink:href="#text-8"></use>
-                        <use xlink:href="#text-8"></use>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

images/model-3.svg

@@ -1,62 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="138px" height="50px" viewBox="0 0 138 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>切片</title>
-    <defs>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#A259FF" offset="0%"></stop>
-            <stop stop-color="#933FFE" offset="100%"></stop>
-        </linearGradient>
-        <rect id="path-2" x="0" y="0" width="138" height="50" rx="25"></rect>
-        <filter x="-1.8%" y="-5.0%" width="103.6%" height="110.0%" filterUnits="objectBoundingBox" id="filter-3">
-            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
-            <feOffset dx="0" dy="-2" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 0.515291285   0 0 0 0 0.13675686   0 0 0 0 1  0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
-        </filter>
-        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-4">
-            <stop stop-color="#FFFFFF" stop-opacity="0.5" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <text id="text-5" font-family="STYuanti-SC-Light, Yuanti SC" font-size="10" font-weight="300" fill="#FFFFFF">
-            <tspan x="2.48689958e-14" y="30">跟音实时纠错</tspan>
-        </text>
-        <filter x="-3.3%" y="-7.1%" width="106.7%" height="128.6%" filterUnits="objectBoundingBox" id="filter-6">
-            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.675712051   0 0 0 0 0.424161585   0 0 0 0 1  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <text id="text-7" font-family="STYuanti-SC-Bold, Yuanti SC" font-size="15" font-weight="bold" fill="#FFFFFF">
-            <tspan x="2.48689958e-14" y="16">跟练模式</tspan>
-        </text>
-        <filter x="-3.3%" y="-4.8%" width="106.7%" height="119.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.675712051   0 0 0 0 0.424161585   0 0 0 0 1  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-    </defs>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="主界面（10.18）" transform="translate(-550.000000, -290.000000)">
-            <g id="跟练模式" transform="translate(550.000000, 290.000000)">
-                <g id="矩形备份-4">
-                    <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
-                </g>
-                <g id="编组-9" transform="translate(15.000000, 14.000000)">
-                    <rect id="矩形备份-5" fill="url(#linearGradient-4)" x="0" y="1" width="25" height="20"></rect>
-                    <rect id="矩形" fill="#FFFFFF" x="23" y="0" width="3" height="22" rx="1.5"></rect>
-                    <path d="M15.337,3.36984407 C16.3850641,3.45356076 17.0135838,4.94285402 18.7395136,4.94414392 C19.191266,4.94448154 19.3604869,5.36096605 19.1917441,5.54466333 C18.8811643,5.88276768 18.0829942,6.43880357 17.3160371,6.65970461 C16.2873269,6.95599651 15.6529504,6.87779633 15.4386654,6.89730024 L16.0108711,12.7441637 C16.0771854,13.0382245 16.1122361,13.3435336 16.1124855,13.6566725 C16.1143681,16.0199852 14.1332679,17.9343469 11.6875744,17.9325424 C9.24188082,17.9306913 7.25772835,16.0133661 7.25582193,13.6500534 C7.2539632,11.2867407 9.23506342,9.37237896 11.680757,9.37420678 C12.4163451,9.37475653 13.1101814,9.54858569 13.7208897,9.85571169 C13.4786646,6.87677885 13.3574832,5.30079449 13.3573453,5.1277586 C13.356398,3.93855616 14.1664214,3.27634123 15.337,3.36984407 Z" id="路径备份-5" fill="#FFFFFF" transform="translate(13.255823, 10.646827) rotate(-19.000000) translate(-13.255823, -10.646827) "></path>
-                </g>
-                <g id="编组" transform="translate(56.000000, 6.000000)" fill="#FFFFFF" fill-opacity="1">
-                    <g id="跟音实时纠错">
-                        <use filter="url(#filter-6)" xlink:href="#text-5"></use>
-                        <use xlink:href="#text-5"></use>
-                    </g>
-                    <g id="跟练模式">
-                        <use filter="url(#filter-8)" xlink:href="#text-7"></use>
-                        <use xlink:href="#text-7"></use>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

images/music.svg

@@ -1,25 +0,0 @@
-<?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>编组 6</title>
-    <defs>
-        <linearGradient x1="41.2368343%" y1="0%" x2="97.1381951%" y2="78.9366254%" id="linearGradient-1">
-            <stop stop-color="#FFC660" offset="0%"></stop>
-            <stop stop-color="#FFBD4B" offset="100%"></stop>
-        </linearGradient>
-        <path d="M9.37679833,1.81534677 L9.37419306,3.04816586 C9.37346127,3.33467339 9.18383076,3.5868294 8.90940839,3.66620062 L5.85992188,4.0208176 L5.85188205,7.82778866 C5.84934408,9.03897664 4.89162503,10.0343315 3.68635578,10.0784143 L3.60963888,10.0798661 C2.64577957,10.0818791 1.79156753,9.46371158 1.4895916,8.54564682 C1.18761568,7.62758207 1.50574958,6.61596919 2.27916009,6.03495037 C3.05257061,5.45393155 4.10742189,5.43409966 4.89716884,5.9857301 L4.90515888,2.05098317 L4.92593563,2.0509391 C4.98390648,1.83154189 5.15266508,1.65863389 5.36991876,1.59603942 L8.56333252,1.19938128 C8.90300857,1.10135042 9.25633505,1.29808342 9.35255706,1.63882333 C9.36877585,1.69621115 9.37693434,1.75562497 9.37679833,1.81534677 Z" id="path-2"></path>
-    </defs>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="主界面播放中" transform="translate(-515.000000, -13.000000)">
-            <g id="编组-6" transform="translate(515.000000, 13.000000)">
-                <rect id="矩形备份-40" fill="#2DC7AA" x="0" y="0" width="29" height="29" rx="14.5"></rect>
-                <g id="原声" transform="translate(3.396546, 5.242923)" fill-rule="nonzero">
-                    <path d="M11.6943607,4.24183306 C11.3291428,4.24183306 10.9752986,4.38175852 10.7040597,4.66163723 C10.4319278,4.94555471 10.2994641,5.31335252 10.2974559,5.68515601 L10.3059192,7.44794878 L10.3162589,12.2210844 C9.87412006,11.8946809 9.33560726,11.7009401 8.7539964,11.703952 C7.25680722,11.6985079 6.0505457,12.9437999 6.04950867,14.4878049 C6.05688754,16.0248766 7.27348324,17.2775431 8.76418639,17.281423 C10.2553241,17.2854168 11.4616178,16.0401248 11.4605456,14.495146 L11.4379862,7.45282164 L18.8956957,7.47795057 L18.903767,12.2510171 C18.4600339,11.9237701 17.9258022,11.7310559 17.3395869,11.724006 C15.8475723,11.7240347 14.6402265,12.9742541 14.6454327,14.5108044 C14.6455314,16.0597895 15.8604372,17.311975 17.3543339,17.311975 C18.8459774,17.3113798 20.056664,16.0666783 20.0495087,14.5207016 L20.0343921,7.47546658 L20.0309119,5.71905145 C20.0307636,5.34672653 19.8899744,4.97734178 19.612914,4.69009969 C19.3403622,4.41335562 18.9795651,4.27168215 18.6262951,4.26924317 L11.6943607,4.24183306 Z" id="路径备份-4" fill="#FFFFFF" transform="translate(13.049509, 10.776904) rotate(8.000000) translate(-13.049509, -10.776904) "></path>
-                    <g id="路径备份-6" transform="translate(5.376798, 5.627027) rotate(-22.000000) translate(-5.376798, -5.627027) ">
-                        <use fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
-                        <use fill="#FFFFFF" xlink:href="#path-2"></use>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

images/pause.svg

@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>播放</title>
-    <defs>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="99.3846973%" id="linearGradient-1">
-            <stop stop-color="#FFFFFF" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" stop-opacity="0.589416077" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="主界面播放中" transform="translate(-737.000000, -301.000000)">
-            <g id="播放" transform="translate(737.000000, 301.000000)">
-                <rect id="矩形" fill="#2DC7AA" x="0" y="0" width="40" height="40" rx="20"></rect>
-                <path d="M14.5,11 C15.8807119,11 17,12.1192881 17,13.5 L17,26.5 C17,27.8807119 15.8807119,29 14.5,29 C13.1192881,29 12,27.8807119 12,26.5 L12,13.5 C12,12.1192881 13.1192881,11 14.5,11 Z" id="矩形" fill="url(#linearGradient-1)"></path>
-                <path d="M26.0066313,11 C27.3873432,11 28.5066313,12.1192881 28.5066313,13.5 L28.5066313,26.5 C28.5066313,27.8807119 27.3873432,29 26.0066313,29 C24.6259194,29 23.5066313,27.8807119 23.5066313,26.5 L23.5066313,13.5 C23.5066313,12.1192881 24.6259194,11 26.0066313,11 Z" id="矩形备份-30" fill="url(#linearGradient-1)"></path>
-            </g>
-        </g>
-    </g>
-</svg>

images/play.svg

@@ -1,30 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>播放</title>
-    <defs>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="99.3846973%" id="linearGradient-1">
-            <stop stop-color="#FFFFFF" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" stop-opacity="0.589416077" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
-            <stop stop-color="#FFFFFF" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" stop-opacity="0.667663147" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50%" y1="4.46840985%" x2="50%" y2="104.686646%" id="linearGradient-3">
-            <stop stop-color="#FFFFFF" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" stop-opacity="0.696550276" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="主界面" transform="translate(-737.000000, -301.000000)">
-            <g id="播放" transform="translate(737.000000, 301.000000)">
-                <rect id="矩形" fill="#2DC7AA" x="0" y="0" width="40" height="40" rx="20"></rect>
-                <g id="编组-2" transform="translate(11.204229, 6.895148)">
-                    <path d="M3.14942999,1.45267811 C4.53014187,1.45267811 5.64942999,2.57196623 5.64942999,3.95267811 L5.64942999,22.3439825 C5.64942999,23.7246943 4.53014187,24.8439825 3.14942999,24.8439825 C1.76871812,24.8439825 0.649429993,23.7246943 0.649429993,22.3439825 L0.649429993,3.95267811 C0.649429993,2.57196623 1.76871812,1.45267811 3.14942999,1.45267811 Z" id="矩形" fill="url(#linearGradient-1)"></path>
-                    <path d="M10.7709354,8.19196933 C12.1516472,8.19196933 13.2709354,9.31125746 13.2709354,10.6919693 L13.2709354,27.4310998 C13.2709354,28.8118116 12.1516472,29.9310998 10.7709354,29.9310998 C9.39022348,29.9310998 8.27093535,28.8118116 8.27093535,27.4310998 L8.27093535,10.6919693 C8.27093535,9.31125746 9.39022348,8.19196933 10.7709354,8.19196933 Z" id="矩形备份" fill="url(#linearGradient-2)" transform="translate(10.770935, 19.061535) rotate(62.000000) translate(-10.770935, -19.061535) "></path>
-                    <path d="M11.0789734,-2.50463277 C12.4596853,-2.50463277 13.5789734,-1.38534465 13.5789734,-0.00463277154 L13.5789734,17.6040632 C13.5789734,18.9847751 12.4596853,20.1040632 11.0789734,20.1040632 C9.69826153,20.1040632 8.57897341,18.9847751 8.57897341,17.6040632 L8.57897341,-0.00463277154 C8.57897341,-1.38534465 9.69826153,-2.50463277 11.0789734,-2.50463277 Z" id="矩形备份-28" fill="url(#linearGradient-3)" transform="translate(11.078973, 8.799715) rotate(127.000000) translate(-11.078973, -8.799715) "></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

package-lock.json

@@ -20,7 +20,8 @@
         "umi-request": "^1.4.0",
         "vant": "^4.1.2",
         "vue": "^3.2.47",
-        "vue-router": "^4.1.6"
+        "vue-router": "^4.1.6",
+        "vue3-lottie": "^2.5.0"
       },
       "devDependencies": {
         "@types/howler": "^2.2.7",
@@ -3438,6 +3439,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -3459,6 +3465,11 @@
       "resolved": "https://registry.npmjs.org/lodash.transform/-/lodash.transform-4.6.0.tgz",
       "integrity": "sha512-LO37ZnhmBVx0GvOU/caQuipEh4GN82TcWv3yHlebGDgOxbxiwwzW5Pcx2AcvpIv2WmvmSMoC492yQFNhy/l/UQ=="
     },
+    "node_modules/lottie-web": {
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.11.0.tgz",
+      "integrity": "sha512-9vSt0AtdOH98GKDXwD5LPfFg9Pcmxt5+1BllAbudKM5iqPxpJnJUfuGaP45OyudDrESCOBgsjnntVUTygBNlzw=="
+    },
     "node_modules/lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -4496,6 +4507,21 @@
         "typescript": "*"
       }
     },
+    "node_modules/vue3-lottie": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/vue3-lottie/-/vue3-lottie-2.5.0.tgz",
+      "integrity": "sha512-JwlTzykr4ofPnSXsTAPt571RDrtQNy66H8w/zYBVHNgrCRG4RINI30c/oJx3Dj+XpxuktpKzgfI08tv1FjYkAQ==",
+      "dependencies": {
+        "lodash-es": "^4.17.21",
+        "lottie-web": "^5.8.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "vue": "^3.2"
+      }
+    },
     "node_modules/webpack-sources": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
@@ -6913,6 +6939,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -6934,6 +6965,11 @@
       "resolved": "https://registry.npmjs.org/lodash.transform/-/lodash.transform-4.6.0.tgz",
       "integrity": "sha512-LO37ZnhmBVx0GvOU/caQuipEh4GN82TcWv3yHlebGDgOxbxiwwzW5Pcx2AcvpIv2WmvmSMoC492yQFNhy/l/UQ=="
     },
+    "lottie-web": {
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.11.0.tgz",
+      "integrity": "sha512-9vSt0AtdOH98GKDXwD5LPfFg9Pcmxt5+1BllAbudKM5iqPxpJnJUfuGaP45OyudDrESCOBgsjnntVUTygBNlzw=="
+    },
     "lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -7668,6 +7704,15 @@
         "@volar/vue-typescript": "1.2.0"
       }
     },
+    "vue3-lottie": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/vue3-lottie/-/vue3-lottie-2.5.0.tgz",
+      "integrity": "sha512-JwlTzykr4ofPnSXsTAPt571RDrtQNy66H8w/zYBVHNgrCRG4RINI30c/oJx3Dj+XpxuktpKzgfI08tv1FjYkAQ==",
+      "requires": {
+        "lodash-es": "^4.17.21",
+        "lottie-web": "^5.8.1"
+      }
+    },
     "webpack-sources": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",

package.json

@@ -20,7 +20,8 @@
     "umi-request": "^1.4.0",
     "vant": "^4.1.2",
     "vue": "^3.2.47",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.1.6",
+    "vue3-lottie": "^2.5.0"
   },
   "devDependencies": {
     "@types/howler": "^2.2.7",

src/page-colexiu/detail/index.module.less

@@ -64,11 +64,15 @@
         min-height: 58PX;
         content: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
         margin-top: -14PX;
-        border-radius: 2px;
-        background-image: var(--cursor-color);
-        background-repeat: repeat-y;
-        background-position-x: 50%;
+        border-radius: 4Px;
+        background-color: var(--van-primary-color);
+        width: 8Px;
+        transform: translateX(8Px);
         opacity: var(--corsor-opacity);
     }
-
+    .eyeProtection{
+        #cursorImg-0{
+            background-color: rgb(255, 159, 88);
+        }
+    }
 }

src/page-colexiu/detail/index.tsx

@@ -1,5 +1,5 @@
 import { Skeleton } from "vant";
-import { computed, defineComponent, nextTick, onBeforeMount, onMounted, reactive, Transition, watch, watchEffect } from "vue";
+import { computed, defineComponent, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, Transition, watch, watchEffect } from "vue";
 import { useRoute } from "vue-router";
 import { formateTimes } from "../../helpers/formateMusic";
 import Metronome, { metronomeData } from "../../helpers/metronome";
@@ -109,7 +109,7 @@ export default defineComponent({
 
 			// 设置指法
 			state.fingeringInfo = subjectFingering(state.subjectId);
-			// console.log("🚀 ~ state.fingeringInfo:", state.fingeringInfo, state.subjectId)
+			// console.log("🚀 ~ state.fingeringInfo:", state.fingeringInfo, state.subjectId, state.track)
 		};
 
 		const setCustom = () => {
@@ -196,6 +196,12 @@ export default defineComponent({
 		watch(() => state.playState, () => {
 			detailData.headerHide = state.playState === 'play' ? true : false
 		})
+		onMounted(() => {
+			window.addEventListener('resize', resetMusicScore)
+		})
+		onBeforeUnmount(() => {
+			window.removeEventListener('resize', resetMusicScore)
+		})
 		return () => (
 			<div
 				class={[styles.detail, state.setting.camera && styles.opencamera, state.setting.eyeProtection && "eyeProtection"]}

src/page-colexiu/evaluat-model/earphone/index.module.less

@@ -1,40 +1,27 @@
 .fraction {
+    
+    color: #fff;
+    border-radius: 18px;
+    width: 244px;
+    overflow: hidden;
+}
+.content{
     display: flex;
     flex-direction: column;
     align-items: center;
-    color: #fff;
+    width: 100%;
     background-color: #fff;
-    border-radius: 18px;
-    min-width: 244px;
 }
-
 .title {
-    position: relative;
-    width: 100px;
-    height: 30px;
-    top: -4.5px;
-
-    img {
-        display: block;
-        width: 100%;
-        height: 100%;
-    }
-
-    .titleDes {
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        top: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 15px;
-    }
+    color: #1A1A1A;
+    font-size: 17px;
+    padding: 16px 0 10px 0;
+    font-weight: bold;
 }
 
 .erji {
-    width: 150px;
+    width: 100%;
+    display: block;
 }
 
 .tip {
@@ -43,12 +30,8 @@
 }
 
 .btn {
+    display: block;
     width: 106px;
     height: 31px;
     margin: 11px 0 17px 0;
-    line-height: 31px;
-    text-align: center;
-    background: #01C1B5;
-    border-radius: 36px;
-    font-size: 13px;
 }

src/page-colexiu/evaluat-model/earphone/index.tsx

@@ -8,14 +8,11 @@ export default defineComponent({
 	setup(props, { emit }) {
 		return () => (
 			<div class={styles.fraction}>
-				<div class={styles.title}>
-					<img src={icons.title} />
-					<div class={styles.titleDes}>提示</div>
-				</div>
 				<img class={styles.erji} src={icons.erji} />
-				<div class={styles.tip}>请佩戴耳机以保证测评准确率～</div>
-				<div class={styles.btn} onClick={() => emit("close")}>
-					确定
+				<div class={styles.content}>
+					<div class={styles.title}>请佩戴耳机</div>
+					<div class={styles.tip}>佩戴耳机以保证测评准确率～</div>
+					<img src={icons.erjibtn} class={styles.btn} onClick={() => emit("close")} />
 				</div>
 			</div>
 		);

src/page-colexiu/evaluat-model/icons/task-bg.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<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">
+            <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>
+</svg>

src/page-colexiu/evaluat-model/index.module.less

@@ -27,52 +27,63 @@
     justify-content: space-evenly;
 }
 
-.notice {
-    position: absolute;
-    left: 0;
-    top: 0;
+.dialogueBox {
+    position: fixed;
+    bottom: -1px;
+    right: 0;
+    z-index: 9;
     display: flex;
-    align-items: center;
-    width: 100%;
-    z-index: 2;
+    flex-direction: column;
+    align-items: flex-end;
 
-    &>img {
-        width: 56px;
-        height: 92px;
-    }
+    .dialogue {
+        position: relative;
+        right: 21px;
+        top: 15px;
+        width: 190px;
+        height: 50px;
 
-    :global {
-        .van-notice-bar {
-            height: 32PX !important;
-            width: 35vw;
-            min-width: 270PX;
-            margin-left: 2vw;
-            border-radius: 5PX;
-            border: 1PX solid #01C1B5;
-
-            &::before {
-                content: '';
-                display: block;
-                width: 6PX;
-                height: 6PX;
-                border-bottom: 1px solid #01C1B5;
-                border-left: 1px solid #01C1B5;
-                transform: rotate(45deg);
-                background-color: #fff;
-                margin-left: -22PX;
-            }
+        .dialoguebg {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
         }
 
-        .van-swipe-item {
-            line-height: 32PX !important;
-            font-size: 12PX !important;
-            text-align: left;
-            padding-left: 10PX;
+        &>div {
+            position: relative;
+            z-index: 1;
+            padding: 10px;
+            font-size: 11px;
+            font-weight: 400;
+            color: #6F4900;
+            line-height: 18px;
         }
+    }
 
-        .van-notice-bar__left-icon,
-        .van-notice-bar__right-icon {
-            font-size: 14PX;
-        }
+    .dialogueing {
+        position: absolute;
+        bottom: 10px;
+        right: 70%;
+        width: 54px;
+        line-height: 23px;
+        background: #FFE1B8;
+        border-radius: 12px;
+        border: 1px solid #FFFFFF;
+        font-size: 11px;
+        color: #6F4900;
+        text-align: center;
+        z-index: 1;
+    }
+
+    .dialogueIcon {
+        width: 100px;
+        height: 100px;
+    }
+
+    .inRadioIcon {
+        width: 66px;
+        height: 72px;
+        margin-right: 6px;
     }
 }

src/page-colexiu/evaluat-model/index.tsx

@@ -17,12 +17,16 @@ import state from "/src/state";
 import { storeData } from "/src/store";
 import { browser } from "/src/utils";
 import { getNoteByMeasuresSlursStart } from "/src/helpers/formateMusic";
-import { Icon, NoticeBar, showToast, Swipe, SwipeItem } from "vant";
-import iconStudent from "./icons/student.png";
+import { Icon } from "vant";
 import EvaluatResult from "./evaluat-result";
 import EvaluatAudio from "./evaluat-audio";
 import { api_openWebView, api_proxyServiceMessage, api_videoUpdate } from "/src/helpers/communication";
 import EvaluatShare from "./evaluat-share";
+import { Vue3Lottie } from "vue3-lottie";
+import startData from "./data/start.json";
+import startingData from "./data/starting.json";
+import iconTastBg from "./icons/task-bg.svg";
+import iconEvaluat from './icons/evaluating.json'
 
 // frequency 频率, amplitude 振幅, decibels 分贝
 type TCriteria = "frequency" | "amplitude" | "decibels";
@@ -41,18 +45,7 @@ export default defineComponent({
 		 * 铜管乐器一级的1a，1b，5，6测评要放原音音频
 		 */
 		const getMusicMode = () => {
-			const muguan = [2, 4, 5, 6];
-			const tongguan = [12, 13, 14, 15, 17];
-			if (muguan.includes(state.subjectId) && (state.examSongName || "").search(/[^\u0000-\u00FF](1-2|1-3|1-6)/gi) > -1) {
-				return "music";
-			}
-			if (tongguan.includes(state.subjectId) && (state.examSongName || "").search(/[^\u0000-\u00FF](1-1-1|1-1-2|1-5|1-6)/gi) > -1) {
-				return "music";
-			}
-			if ([23, 113, 121].includes(state.subjectId)) {
-				return "music";
-			}
-			return "background";
+			return "music";
 		};
 		const browserInfo = browser();
 		/** 是否是节奏练习 */
@@ -120,9 +113,10 @@ export default defineComponent({
 					// 重复的情况index会自然累加,render的index是谱面渲染的index
 					measureIndex: note.measureOpenIndex,
 					measureRenderIndex: item.measureListIndex,
-					dontEvaluating: ListenMode || dontEvaluatingMode,
+					dontEvaluating: ListenMode || dontEvaluatingMode || item.skipMode,
 					musicalNotesIndex: item.i,
 					denominator: note.noteElement?.Length.denominator,
+					isOrnament: !!note?.voiceEntry?.ornamentContainer
 				};
 				datas.push(data);
 			}
@@ -134,24 +128,23 @@ export default defineComponent({
 			const rate = state.speed / state.originSpeed;
 			const content = {
 				musicXmlInfos: formatTimes(),
-				id: state.examSongId,
 				subjectId: state.subjectId,
 				detailId: state.detailId,
 				examSongId: state.examSongId,
 				xmlUrl: state.xmlUrl,
 				partIndex: state.partIndex,
 				behaviorId,
-				tenantId: storeData.user.tenantId,
 				platform: browserInfo.ios ? "IOS" : browserInfo.android ? "ANDROID" : "WEB",
 				clientId: storeData.platformType === "STUDENT" ? "student" : storeData.platformType === "TEACHER" ? "teacher" : "education",
+				hertz: state.setting.frequency,
+				reactionTimeMs: state.setting.reactionTimeMs,
 				speed: state.speed,
 				heardLevel: state.setting.evaluationDifficulty,
 				beatLength: Math.round((state.fixtime * 1000) / rate),
-				campId: sessionStorage.getItem("campId") || "",
-				evaluationCriteria: getEvaluationCriteria(),
+				// evaluationCriteria: getEvaluationCriteria(),
 			};
-			const result = await connectWebsocket(content);
-			state.playSource = getMusicMode();
+			await connectWebsocket(content);
+			state.playSource = 'music';
 		};
 
 		/** 评测结果按钮处理 */
@@ -214,54 +207,34 @@ export default defineComponent({
 				}
 			}
 		);
-		watch(
-			() => evaluatingData.startBegin,
-			() => {
-				if (evaluatingData.startBegin) {
-					evaluatModel.tips = false;
-				}
-			}
-		);
 		return () => (
 			<div>
-				{evaluatingData.websocketState && (
+				{!evaluatingData.websocketState && (
 					<>
 						{!evaluatingData.startBegin && (
 							<div class={styles.btn} onClick={handleStartBegin}>
-								开始演奏
+								<img src={iconEvaluat.evaluatingStart} />
 							</div>
 						)}
 						{evaluatingData.startBegin && (
 							<div class={[styles.btn, styles.endBtn]} onClick={() => handleEndBegin(false)}>
-								<Icon name="success" />
-								<span>结束演奏</span>
+								<img src={iconEvaluat.evaluatingEnd} />
 							</div>
 						)}
 					</>
 				)}
-				{evaluatModel.tips && (
-					<>
-						<div class={styles.notice}>
-							<img src={iconStudent} />
-							<NoticeBar
-								scrollable={false}
-								style="background: #fff;color: #01C1B5;"
-								mode="closeable"
-								onClose={() => {
-									evaluatModel.tips = false;
-								}}
-							>
-								<Swipe style="height: 32px;" show-indicators={false} autoplay={3000} vertical>
-									<SwipeItem>请在周围安静的环境下演奏，减少杂音</SwipeItem>
-									<SwipeItem>请选择稳定、良好的网络环境，避免信号中断</SwipeItem>
-									<SwipeItem>演奏前请调试好乐器，保证最佳演奏状态</SwipeItem>
-									<SwipeItem>演奏时请佩戴耳机，评测收音更精准</SwipeItem>
-								</Swipe>
-							</NoticeBar>
-						</div>
-						<div style={{ height: "40px" }}></div>
-					</>
-				)}
+				<div style={{ display: !evaluatingData.startBegin ? "" : "none" }} class={styles.dialogueBox} key="start">
+					<div class={styles.dialogue}>
+						<img class={styles.dialoguebg} src={iconTastBg} />
+						<div>演奏前请调整好乐器，保证最佳演奏状态。</div>
+					</div>
+					<Vue3Lottie class={styles.dialogueIcon} animationData={startData}></Vue3Lottie>
+				</div>
+				<div style={{ display: evaluatingData.startBegin ? "" : "none" }} class={styles.dialogueBox} key="start">
+					<div class={styles.dialogueing}>收音中...</div>
+					<Vue3Lottie class={styles.dialogueIcon} animationData={startingData}></Vue3Lottie>
+				</div>
+
 				<Popup teleport="body" closeOnClickOverlay={false} defaultStyle={false} v-model:show={evaluatingData.earphoneMode}>
 					<Earphone
 						onClose={() => {

src/page-colexiu/evaluat-model/sound-effect/index.module.less

@@ -2,6 +2,8 @@
   position: relative;
   width: 100vw;
   height: 100vh;
+  display: flex;
+  flex-direction: column;
   background-image: url('./icons/bg.png');
   background-size: 100% 100%;
   background-repeat: no-repeat;
@@ -12,12 +14,13 @@
 .top {
   display: flex;
   justify-content: space-between;
-  padding: 20px 30px 10px 20px;
+  padding: 18px 34px 10px 30px;
+  flex-shrink: 0;
 }
 
 .back {
-  width: 30px;
-  height: 30px;
+  width: 40px;
+  height: 40px;
 
   img {
     width: 100%;
@@ -36,34 +39,38 @@
 }
 
 .rightSkipBtn {
-  font-size: 17px;
-
+  font-size: 15px;
+  padding: 6px 16px;
+  background-color: #fff;
+  border-radius: 20px;
+  &:active{
+    opacity: .8;
+  }
   .tran {
-    margin-left: 6px;
+    margin-left: 2px;
     transform: rotate(90deg);
   }
 }
 
 .content {
+  flex: 1;
   display: flex;
   justify-content: center;
-  align-items: center;
   background-image: url('./icons/bg-note.png');
   background-repeat: no-repeat;
-  background-size: 94%;
+  background-size: 76%;
   background-position: center 30%;
 }
 
 .heiban {
   position: relative;
-  width: 50%;
-  height: 75vh;
+  width: 60%;
+  height: 61vh;
   background-image: url('./icons/content-bg.png');
   background-repeat: no-repeat;
-  background-size: contain;
+  background-size: 100% 100%;
   background-position: center;
   max-height: 370PX;
-  min-height: 260PX;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -71,10 +78,9 @@
 
 .iconChild {
   position: absolute;
-  bottom: 0;
-  left: 8%;
-  width: 8vw;
-  max-width: 95PX;
+  bottom: -30%;
+  left: -6%;
+  width: 26vw;
 }
 .scoreContent{
   text-align: center;

src/page-colexiu/header-top/image/task-bg.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<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">
+            <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>
+</svg>

src/page-colexiu/header-top/index.module.less

@@ -1,4 +1,4 @@
-.headerTop{
+.headerTop {
     display: flex;
     align-items: center;
     width: 100%;
@@ -8,22 +8,26 @@
     background: var(--container-background);
     padding-bottom: 0;
 }
-.back{
+
+.back {
     display: flex;
     align-items: center;
     height: 100%;
     padding: 0 11px 0 6px;
-    img{
+
+    img {
         display: block;
         width: 24px;
         height: 24px;
     }
 }
-.headRight{
+
+.headRight {
     display: flex;
     align-items: center;
     margin-left: auto;
-    .btn{
+
+    .btn {
         position: relative;
         display: flex;
         flex-direction: column;
@@ -33,20 +37,24 @@
         line-height: 16px;
         font-weight: 400;
         padding: 0 6px;
-        .iconBtn{
+
+        .iconBtn {
             display: block;
             width: 25px;
             height: 25px;
         }
-        span{
+
+        span {
             white-space: nowrap;
         }
-        .btnWrap{
+
+        .btnWrap {
             position: relative;
             width: 25px;
             height: 25px;
         }
-        .progress{
+
+        .progress {
             position: absolute;
             left: 50%;
             top: 50%;
@@ -54,40 +62,48 @@
             width: 85%;
             height: 85%;
         }
-        &.disabled{
+
+        &.disabled {
             opacity: .8;
         }
     }
-    .badge{
-        :global{
-            .van-badge{
+
+    .badge {
+        :global {
+            .van-badge {
                 border: none;
-                color: #005e58;
-                background-color: #d7fffc;
+                color: #135D4F;
+                background: linear-gradient(180deg, #FFD689 0%, #FEBD41 100%);
+                border: 1px solid #FFFFFF;
                 font-weight: 400;
             }
         }
     }
-    .playBtn{
+
+    .playBtn {
         position: fixed;
         right: 32px;
         bottom: 32px;
-        .btnWrap{
+
+        .btnWrap {
             width: 36px;
             height: 36px;
-            .iconBtn{
+
+            .iconBtn {
                 display: block;
                 width: 100%;
                 height: 100%;
             }
         }
     }
-    .resetBtn{
+
+    .resetBtn {
         position: fixed;
         right: 88px;
         bottom: 32px;
         padding: 0;
-        .iconBtn{
+
+        .iconBtn {
             display: block;
             width: 36px;
             height: 36px;
@@ -95,12 +111,13 @@
     }
 }
 
-.disable{
+.disable {
     pointer-events: none;
     opacity: .6;
 }
-:global{
-    .var-popup{
+
+:global {
+    .var-popup {
         overflow: hidden;
     }
 }

src/page-colexiu/header-top/index.tsx

@@ -13,6 +13,7 @@ import { Popup } from "@varlet/ui";
 import Settting from "./settting";
 import ModeTypeMode from "./mode-type-mode";
 import state, { handleChangeSection, handleResetPlay, handleRessetState, togglePlay } from "/src/state";
+import { getAudioCurrentTime } from "/src/view/audio-list";
 
 export const headData = reactive({
 	speedShow: false,
@@ -33,12 +34,31 @@ export default defineComponent({
 
 		/** 切换模式 */
 		const handleChangeModeType = (value: "practise" | "follow" | "evaluating") => {
-			if (value === 'evaluating') {
-				toggleEvaluat()
+			if (value === "evaluating") {
+				toggleEvaluat();
 			}
 			headerData.modeMode = false;
 		};
 		const disabledList = ["evaluating"];
+
+		/** 按钮禁用 */
+
+		/** 重播按钮显示条件 */
+		const resetBtnDisplay = computed(() => {
+			const currentTime = getAudioCurrentTime();
+			const playState = state.playState;
+			const modeType = state.modeType;
+			return currentTime !== 0 && playState !== "play" && modeType === "practise";
+		});
+		/** 播放按钮显示条件 */
+		const playBtnDisplay = computed(() => {
+			const modeType = state.modeType;
+			return modeType === "practise";
+		});
+		/** 指法显示条件 */
+		const fingeringDisplay = computed(() => {
+			return state.fingeringInfo.name;
+		});
 		return () => (
 			<div ref={headRef} class={styles.headerTop}>
 				<div class={styles.back}>
@@ -47,27 +67,17 @@ export default defineComponent({
 				<Title text={state.examSongName} rightView={false} />
 
 				<div class={styles.headRight} style={{ display: headerData.modeMode ? "none" : "" }}>
-					<div class={styles.btn} onClick={() => {
-						handleRessetState()
-						headerData.modeMode = true
-					}}>
+					<div
+						class={styles.btn}
+						onClick={() => {
+							handleRessetState();
+							headerData.modeMode = true;
+						}}
+					>
 						<img class={styles.iconBtn} src={headImg(`modeType.svg`)} />
 						<span>模式</span>
 					</div>
-					{/* <div class={styles.btn} id="tips-step-2" onClick={toggleEvaluat}>
-						<img class={styles.iconBtn} src={state.modeType === "evaluating" ? icons.evaluating2 : icons.evaluating} />
-						<span>评测</span>
-					</div> */}
-					<div class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]} id="tips-step-4" onClick={() => handleChangeSection()}>
-						<img class={styles.iconBtn} src={headImg(`section${state.section.length}.svg`)} />
-						<span>选段</span>
-					</div>
-					<div class={[styles.btn, styles.playBtn, disabledList.includes(state.modeType) && styles.disable]} id="tips-step-5" onClick={() => togglePlay()}>
-						<div class={styles.btnWrap}>
-							<img class={styles.iconBtn} src={state.playState === "paused" ? icons.play : icons.pause} />
-							<Circle style={{opacity: state.playState === "play" ? 1 : 0}} class={styles.progress} stroke-width={80} currentRate={state.playProgress} rate={100} color="#FFC830" />
-						</div>
-					</div>
+
 					<div
 						class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]}
 						id="tips-step-6"
@@ -78,6 +88,21 @@ export default defineComponent({
 						<img class={styles.iconBtn} src={state.playSource === "music" ? icons.music : icons.background} />
 						<span>{state.playSource === "music" ? "原声" : "伴奏"}</span>
 					</div>
+					<div class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]} id="tips-step-4" onClick={() => handleChangeSection()}>
+						<img class={styles.iconBtn} src={headImg(`section${state.section.length}.svg`)} />
+						<span>选段</span>
+					</div>
+					<div
+						style={{ display: fingeringDisplay.value ? "" : "none" }}
+						class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]}
+						onClick={() => {
+							state.setting.displayFingering = !state.setting.displayFingering;
+						}}
+					>
+						<img class={styles.iconBtn} src={state.setting.displayFingering ? icons.fingeringOn : icons.fingeringOff} />
+						<span>指法</span>
+					</div>
+
 					{/* <div
 						class={[styles.btn]}
 						onClick={async () => {
@@ -98,9 +123,6 @@ export default defineComponent({
 						<img style={{ display: !metronomeData.disable ? "block" : "none" }} class={styles.iconBtn} src={headImg("tickon.png")} />
 						<span style={{ whiteSpace: "nowrap" }}>节拍器</span>
 					</div> */}
-					<div class={[styles.btn, styles.resetBtn, disabledList.includes(state.modeType) && styles.disable]} id="tips-step-7" onClick={() => handleResetPlay()}>
-						<img class={styles.iconBtn} src={headImg("replay.svg")} />
-					</div>
 
 					<Popover trigger="manual" v-model:show={headData.speedShow} placement="bottom" overlay={false}>
 						{{
@@ -126,6 +148,33 @@ export default defineComponent({
 						<img class={styles.iconBtn} src={headImg("menu.svg")} />
 						<span>设置</span>
 					</div>
+
+					<div
+						style={{ display: playBtnDisplay.value ? "" : "none" }}
+						class={[styles.btn, styles.playBtn, disabledList.includes(state.modeType) && styles.disable]}
+						id="tips-step-5"
+						onClick={() => togglePlay()}
+					>
+						<div class={styles.btnWrap}>
+							<img class={styles.iconBtn} src={state.playState === "paused" ? icons.play : icons.pause} />
+							<Circle
+								style={{ opacity: state.playState === "play" ? 1 : 0 }}
+								class={styles.progress}
+								stroke-width={80}
+								currentRate={state.playProgress}
+								rate={100}
+								color="#FFC830"
+							/>
+						</div>
+					</div>
+					<div
+						style={{ display: resetBtnDisplay.value ? "" : "none" }}
+						class={[styles.btn, styles.resetBtn, disabledList.includes(state.modeType) && styles.disable]}
+						id="tips-step-7"
+						onClick={() => handleResetPlay()}
+					>
+						<img class={styles.iconBtn} src={headImg("replay.svg")} />
+					</div>
 				</div>
 
 				<Popup teleport="body" defaultStyle={false} v-model:show={headerData.settingMode}>

src/state.ts

@@ -109,6 +109,8 @@ const state = reactive({
 		saveToAlbum: false,
 		/** 开启伴奏 */
 		enableAccompaniment: false,
+		/** 反应时间 */
+		reactionTimeMs: 0
 	},
 	/** 节拍器的时间 */
 	fixtime: 0,

src/store.ts

@@ -33,7 +33,7 @@ export const storeData = reactive({
 	/** 开发模式api前缀 */
 	proxy: "" as IProxy,
 	/** 是否在APP中 */
-	isApp: false, //
+	isApp: false,
 });
 
 /** 初始化 */

src/view/evaluating/index.tsx

@@ -111,6 +111,7 @@ export const connectWebsocket = async (content: any) => {
 		// console.log("🚀 ~ content:", JSON.stringify(content))
 	} catch (error) {}
 	const res = await startEvaluating(content);
+	// console.log("🚀 ~ res:", res)
 	if (res?.api === "startEvaluating") {
 		evaluatingData.websocketState = true;
 	} else {
@@ -144,7 +145,6 @@ export const handlePerformDetection = async () => {
 		} else {
 			handlePerformDetection();
 		}
-		
 		return;
 	}
 	if (evaluatingData.checkStep === 10) {
@@ -192,8 +192,8 @@ export const handleStartBegin = async () => {
     evaluatingData.resultData = {};
 	sendResult(handleScoreResult);
 	await startRecording();
+	await togglePlay("play");
 	evaluatingData.backtime = Date.now();
-	togglePlay("play");
 };
 
 /**