Merge branch '2023-9-13_指法'

dist/assets/index-2563c577.js

@@ -1 +1,5 @@
+<<<<<<<< HEAD:dist/assets/index-2563c577.js
 import{d as i,E as l,U as d,by as e,K as r,S as c,j as s,aI as u}from"./index-14c60a63.js";const f="_skeleton_vtlsh_1",m="_detail_vtlsh_12",p="_container_vtlsh_20",a={skeleton:f,detail:m,container:p},_=i({name:"music-list",setup(){const n=l(),t=d({isLoading:!0,isProductLoading:!1,product:[{state:!1,name:"五线谱",type:e.staff,base64:""},{state:!1,name:"首调",type:e.firstTone,base64:""},{state:!1,name:"固定调",type:e.fixedTone,base64:""}]});r(()=>{window.appName="colexiu",c.xmlUrl=n.xmlUrl,t.isLoading=!1});const o=async()=>{console.log("渲染完成")};return()=>s("div",{class:a.detail},[s("div",{id:"scrollContainer",class:[a.container,"hideCursor"]},[!t.isLoading&&s(u,{onRendered:o},null)])])}});export{_ as default};
+========
+import{d as i,E as l,U as d,by as e,K as r,S as c,j as s,aI as u}from"./index-6199309f.js";const f="_skeleton_vtlsh_1",m="_detail_vtlsh_12",p="_container_vtlsh_20",a={skeleton:f,detail:m,container:p},_=i({name:"music-list",setup(){const n=l(),t=d({isLoading:!0,isProductLoading:!1,product:[{state:!1,name:"五线谱",type:e.staff,base64:""},{state:!1,name:"首调",type:e.firstTone,base64:""},{state:!1,name:"固定调",type:e.fixedTone,base64:""}]});r(()=>{window.appName="colexiu",c.xmlUrl=n.xmlUrl,t.isLoading=!1});const o=async()=>{console.log("渲染完成")};return()=>s("div",{class:a.detail},[s("div",{id:"scrollContainer",class:[a.container,"hideCursor"]},[!t.isLoading&&s(u,{onRendered:o},null)])])}});export{_ as default};
+>>>>>>>> 2023-9-13_指法:dist/assets/index-e4fae5f7.js

dist/assets/index-6ea27331.js

@@ -0,0 +1,5 @@
+<<<<<<<< HEAD:dist/assets/index-f7eadb12.js
+import{d as f,E as y,U as h,by as r,K as w,S as v,an as T,j as i,aI as b,A as _,ap as S}from"./index-14c60a63.js";import{s as L}from"./instrument-305e5d0f.js";import"./vue3-lottie.es-5860b2d3.js";import"./index-c5837739.js";import"./index-cfefcdb9.js";import"./index-3c694d30.js";const x="_skeleton_vtlsh_1",A="_detail_vtlsh_12",N="_container_vtlsh_20",c={skeleton:x,detail:A,container:N},C=f({name:"music-list",setup(){const d=y(),o="productRenderType",e=h({isLoading:!0,isProductLoading:!1,step:0,product:[{state:!1,name:"五线谱",type:r.staff,base64:""},{state:!1,name:"首调",type:r.firstTone,base64:""},{state:!1,name:"固定调",type:r.fixedTone,base64:""}]});w(()=>{window.appName="colexiu",v.xmlUrl=d.xmlUrl,sessionStorage.setItem(o,e.product[e.step].type),T({message:"生成中",duration:0}),setTimeout(()=>{e.isLoading=!1},500)});const p=async()=>{var t;e.product[e.step].state=!0,e.product[e.step].base64=await l();try{console.log(JSON.parse(JSON.stringify(e.product)),e.step)}catch(n){}if(e.step+=1,e.step!==e.product.length){sessionStorage.setItem(o,e.product[e.step].type),_(()=>{e.isLoading=!0,setTimeout(()=>{e.isLoading=!1},500)});return}S(),console.log(e.product),(t=window.parent)==null||t.postMessage({api:"webApi_renderSvg",product:JSON.stringify(e.product)},"*")},l=()=>new Promise(t=>{setTimeout(async()=>{var n;try{const s=(n=document.getElementById("osmdSvgPage1"))==null?void 0:n.cloneNode(!0);if(!s){t("");return}const u=s.width.animVal.value,m=s.height.animVal.value,a=document.createElementNS("http://www.w3.org/2000/svg","rect");a.setAttribute("x","0"),a.setAttribute("y","0"),a.setAttribute("width",`${u*2}`),a.setAttribute("height",`${m*2}`),a.setAttribute("fill","#fff"),s.prepend(a);const g=L(s.outerHTML).toDataURL("image/png",1);t(g)}catch(s){t("")}},500)});return()=>i("div",{class:c.detail},[i("div",{id:"scrollContainer",class:[c.container,"hideCursor"]},[!e.isLoading&&i(b,{renderTypeKey:o,showSelection:!1,onRendered:p},null)])])}});export{C as default};
+========
+import{d as f,E as y,U as h,by as r,K as w,S as v,an as T,j as i,aI as b,A as _,ap as S}from"./index-6199309f.js";import{s as L}from"./instrument-7657205f.js";import"./vue3-lottie.es-40cc32b9.js";import"./index-ecb0d945.js";import"./index-2f8d5658.js";import"./index-f6dbcd56.js";const x="_skeleton_vtlsh_1",A="_detail_vtlsh_12",N="_container_vtlsh_20",c={skeleton:x,detail:A,container:N},C=f({name:"music-list",setup(){const d=y(),o="productRenderType",e=h({isLoading:!0,isProductLoading:!1,step:0,product:[{state:!1,name:"五线谱",type:r.staff,base64:""},{state:!1,name:"首调",type:r.firstTone,base64:""},{state:!1,name:"固定调",type:r.fixedTone,base64:""}]});w(()=>{window.appName="colexiu",v.xmlUrl=d.xmlUrl,sessionStorage.setItem(o,e.product[e.step].type),T({message:"生成中",duration:0}),setTimeout(()=>{e.isLoading=!1},500)});const p=async()=>{var t;e.product[e.step].state=!0,e.product[e.step].base64=await l();try{console.log(JSON.parse(JSON.stringify(e.product)),e.step)}catch(n){}if(e.step+=1,e.step!==e.product.length){sessionStorage.setItem(o,e.product[e.step].type),_(()=>{e.isLoading=!0,setTimeout(()=>{e.isLoading=!1},500)});return}S(),console.log(e.product),(t=window.parent)==null||t.postMessage({api:"webApi_renderSvg",product:JSON.stringify(e.product)},"*")},l=()=>new Promise(t=>{setTimeout(async()=>{var n;try{const s=(n=document.getElementById("osmdSvgPage1"))==null?void 0:n.cloneNode(!0);if(!s){t("");return}const u=s.width.animVal.value,m=s.height.animVal.value,a=document.createElementNS("http://www.w3.org/2000/svg","rect");a.setAttribute("x","0"),a.setAttribute("y","0"),a.setAttribute("width",`${u*2}`),a.setAttribute("height",`${m*2}`),a.setAttribute("fill","#fff"),s.prepend(a);const g=L(s.outerHTML).toDataURL("image/png",1);t(g)}catch(s){t("")}},500)});return()=>i("div",{class:c.detail},[i("div",{id:"scrollContainer",class:[c.container,"hideCursor"]},[!e.isLoading&&i(b,{renderTypeKey:o,showSelection:!1,onRendered:p},null)])])}});export{C as default};
+>>>>>>>> 2023-9-13_指法:dist/assets/index-6ea27331.js

dist/assets/index-70080c7b.js

@@ -0,0 +1,5 @@
+<<<<<<<< HEAD:dist/assets/index-82e5c971.js
+import{d,r as i,U as p,S as e,x as r,j as o,ae as n}from"./index-14c60a63.js";const c=d({name:"measureSpeed",setup(){const s=i(!1),t=p({speed:e.speed,originSpeed:e.originSpeed});return r(()=>e.section.length,()=>{if(e.modeType==="practise"){if(!s.value&&e.section.length===2){s.value=!0,t.speed=e.speed;const a=e.section[0].beatSpeed;e.originSpeed=a,n(a)}s.value&&e.section.length===0&&(s.value=!1,e.originSpeed=t.originSpeed,n(t.speed))}}),()=>o("div",null,null)}});export{c as M};
+========
+import{d,r as i,U as p,S as e,x as r,j as o,ae as n}from"./index-6199309f.js";const c=d({name:"measureSpeed",setup(){const s=i(!1),t=p({speed:e.speed,originSpeed:e.originSpeed});return r(()=>e.section.length,()=>{if(e.modeType==="practise"){if(!s.value&&e.section.length===2){s.value=!0,t.speed=e.speed;const a=e.section[0].beatSpeed;e.originSpeed=a,n(a)}s.value&&e.section.length===0&&(s.value=!1,e.originSpeed=t.originSpeed,n(t.speed))}}),()=>o("div",null,null)}});export{c as M};
+>>>>>>>> 2023-9-13_指法:dist/assets/index-70080c7b.js

dist/assets/index-82e5c971.js

@@ -1 +1,5 @@
+<<<<<<<< HEAD:dist/assets/index-82e5c971.js
 import{d,r as i,U as p,S as e,x as r,j as o,ae as n}from"./index-14c60a63.js";const c=d({name:"measureSpeed",setup(){const s=i(!1),t=p({speed:e.speed,originSpeed:e.originSpeed});return r(()=>e.section.length,()=>{if(e.modeType==="practise"){if(!s.value&&e.section.length===2){s.value=!0,t.speed=e.speed;const a=e.section[0].beatSpeed;e.originSpeed=a,n(a)}s.value&&e.section.length===0&&(s.value=!1,e.originSpeed=t.originSpeed,n(t.speed))}}),()=>o("div",null,null)}});export{c as M};
+========
+import{d,r as i,U as p,S as e,x as r,j as o,ae as n}from"./index-6199309f.js";const c=d({name:"measureSpeed",setup(){const s=i(!1),t=p({speed:e.speed,originSpeed:e.originSpeed});return r(()=>e.section.length,()=>{if(e.modeType==="practise"){if(!s.value&&e.section.length===2){s.value=!0,t.speed=e.speed;const a=e.section[0].beatSpeed;e.originSpeed=a,n(a)}s.value&&e.section.length===0&&(s.value=!1,e.originSpeed=t.originSpeed,n(t.speed))}}),()=>o("div",null,null)}});export{c as M};
+>>>>>>>> 2023-9-13_指法:dist/assets/index-70080c7b.js

dist/assets/index-e4fae5f7.js

@@ -0,0 +1,5 @@
+<<<<<<<< HEAD:dist/assets/index-2563c577.js
+import{d as i,E as l,U as d,by as e,K as r,S as c,j as s,aI as u}from"./index-14c60a63.js";const f="_skeleton_vtlsh_1",m="_detail_vtlsh_12",p="_container_vtlsh_20",a={skeleton:f,detail:m,container:p},_=i({name:"music-list",setup(){const n=l(),t=d({isLoading:!0,isProductLoading:!1,product:[{state:!1,name:"五线谱",type:e.staff,base64:""},{state:!1,name:"首调",type:e.firstTone,base64:""},{state:!1,name:"固定调",type:e.fixedTone,base64:""}]});r(()=>{window.appName="colexiu",c.xmlUrl=n.xmlUrl,t.isLoading=!1});const o=async()=>{console.log("渲染完成")};return()=>s("div",{class:a.detail},[s("div",{id:"scrollContainer",class:[a.container,"hideCursor"]},[!t.isLoading&&s(u,{onRendered:o},null)])])}});export{_ as default};
+========
+import{d as i,E as l,U as d,by as e,K as r,S as c,j as s,aI as u}from"./index-6199309f.js";const f="_skeleton_vtlsh_1",m="_detail_vtlsh_12",p="_container_vtlsh_20",a={skeleton:f,detail:m,container:p},_=i({name:"music-list",setup(){const n=l(),t=d({isLoading:!0,isProductLoading:!1,product:[{state:!1,name:"五线谱",type:e.staff,base64:""},{state:!1,name:"首调",type:e.firstTone,base64:""},{state:!1,name:"固定调",type:e.fixedTone,base64:""}]});r(()=>{window.appName="colexiu",c.xmlUrl=n.xmlUrl,t.isLoading=!1});const o=async()=>{console.log("渲染完成")};return()=>s("div",{class:a.detail},[s("div",{id:"scrollContainer",class:[a.container,"hideCursor"]},[!t.isLoading&&s(u,{onRendered:o},null)])])}});export{_ as default};
+>>>>>>>> 2023-9-13_指法:dist/assets/index-e4fae5f7.js

dist/assets/index-f7eadb12.js

@@ -1 +1,5 @@
+<<<<<<<< HEAD:dist/assets/index-f7eadb12.js
 import{d as f,E as y,U as h,by as r,K as w,S as v,an as T,j as i,aI as b,A as _,ap as S}from"./index-14c60a63.js";import{s as L}from"./instrument-305e5d0f.js";import"./vue3-lottie.es-5860b2d3.js";import"./index-c5837739.js";import"./index-cfefcdb9.js";import"./index-3c694d30.js";const x="_skeleton_vtlsh_1",A="_detail_vtlsh_12",N="_container_vtlsh_20",c={skeleton:x,detail:A,container:N},C=f({name:"music-list",setup(){const d=y(),o="productRenderType",e=h({isLoading:!0,isProductLoading:!1,step:0,product:[{state:!1,name:"五线谱",type:r.staff,base64:""},{state:!1,name:"首调",type:r.firstTone,base64:""},{state:!1,name:"固定调",type:r.fixedTone,base64:""}]});w(()=>{window.appName="colexiu",v.xmlUrl=d.xmlUrl,sessionStorage.setItem(o,e.product[e.step].type),T({message:"生成中",duration:0}),setTimeout(()=>{e.isLoading=!1},500)});const p=async()=>{var t;e.product[e.step].state=!0,e.product[e.step].base64=await l();try{console.log(JSON.parse(JSON.stringify(e.product)),e.step)}catch(n){}if(e.step+=1,e.step!==e.product.length){sessionStorage.setItem(o,e.product[e.step].type),_(()=>{e.isLoading=!0,setTimeout(()=>{e.isLoading=!1},500)});return}S(),console.log(e.product),(t=window.parent)==null||t.postMessage({api:"webApi_renderSvg",product:JSON.stringify(e.product)},"*")},l=()=>new Promise(t=>{setTimeout(async()=>{var n;try{const s=(n=document.getElementById("osmdSvgPage1"))==null?void 0:n.cloneNode(!0);if(!s){t("");return}const u=s.width.animVal.value,m=s.height.animVal.value,a=document.createElementNS("http://www.w3.org/2000/svg","rect");a.setAttribute("x","0"),a.setAttribute("y","0"),a.setAttribute("width",`${u*2}`),a.setAttribute("height",`${m*2}`),a.setAttribute("fill","#fff"),s.prepend(a);const g=L(s.outerHTML).toDataURL("image/png",1);t(g)}catch(s){t("")}},500)});return()=>i("div",{class:c.detail},[i("div",{id:"scrollContainer",class:[c.container,"hideCursor"]},[!e.isLoading&&i(b,{renderTypeKey:o,showSelection:!1,onRendered:p},null)])])}});export{C as default};
+========
+import{d as f,E as y,U as h,by as r,K as w,S as v,an as T,j as i,aI as b,A as _,ap as S}from"./index-6199309f.js";import{s as L}from"./instrument-7657205f.js";import"./vue3-lottie.es-40cc32b9.js";import"./index-ecb0d945.js";import"./index-2f8d5658.js";import"./index-f6dbcd56.js";const x="_skeleton_vtlsh_1",A="_detail_vtlsh_12",N="_container_vtlsh_20",c={skeleton:x,detail:A,container:N},C=f({name:"music-list",setup(){const d=y(),o="productRenderType",e=h({isLoading:!0,isProductLoading:!1,step:0,product:[{state:!1,name:"五线谱",type:r.staff,base64:""},{state:!1,name:"首调",type:r.firstTone,base64:""},{state:!1,name:"固定调",type:r.fixedTone,base64:""}]});w(()=>{window.appName="colexiu",v.xmlUrl=d.xmlUrl,sessionStorage.setItem(o,e.product[e.step].type),T({message:"生成中",duration:0}),setTimeout(()=>{e.isLoading=!1},500)});const p=async()=>{var t;e.product[e.step].state=!0,e.product[e.step].base64=await l();try{console.log(JSON.parse(JSON.stringify(e.product)),e.step)}catch(n){}if(e.step+=1,e.step!==e.product.length){sessionStorage.setItem(o,e.product[e.step].type),_(()=>{e.isLoading=!0,setTimeout(()=>{e.isLoading=!1},500)});return}S(),console.log(e.product),(t=window.parent)==null||t.postMessage({api:"webApi_renderSvg",product:JSON.stringify(e.product)},"*")},l=()=>new Promise(t=>{setTimeout(async()=>{var n;try{const s=(n=document.getElementById("osmdSvgPage1"))==null?void 0:n.cloneNode(!0);if(!s){t("");return}const u=s.width.animVal.value,m=s.height.animVal.value,a=document.createElementNS("http://www.w3.org/2000/svg","rect");a.setAttribute("x","0"),a.setAttribute("y","0"),a.setAttribute("width",`${u*2}`),a.setAttribute("height",`${m*2}`),a.setAttribute("fill","#fff"),s.prepend(a);const g=L(s.outerHTML).toDataURL("image/png",1);t(g)}catch(s){t("")}},500)});return()=>i("div",{class:c.detail},[i("div",{id:"scrollContainer",class:[c.container,"hideCursor"]},[!e.isLoading&&i(b,{renderTypeKey:o,showSelection:!1,onRendered:p},null)])])}});export{C as default};
+>>>>>>>> 2023-9-13_指法:dist/assets/index-6ea27331.js

dist/assets/index-legacy-0079d0f6.js

@@ -1 +1,5 @@
+<<<<<<<< HEAD:dist/assets/index-legacy-0079d0f6.js
 System.register(["./index-legacy-419b22fd.js"],(function(e,t){"use strict";var i,n,a,o,r,s,d,l,c=document.createElement("style");return c.textContent="._skeleton_vtlsh_1{position:fixed;left:0;top:0;width:100vw;height:100vh;padding:.53333rem .8rem;background-color:#fff;z-index:1000;--van-skeleton-paragraph-height: .8rem}._detail_vtlsh_12{width:100vw;height:100vh;overflow:hidden;overflow-y:auto;--header-height: 1.65333rem;background:var(--container-background)}._detail_vtlsh_12 ._container_vtlsh_20{margin:0 .26667rem;border-radius:.26667rem}._detail_vtlsh_12 #musicAndSelection{overflow:initial!important;height:initial!important;max-height:initial!important}\n",document.head.appendChild(c),{setters:[e=>{i=e.d,n=e.E,a=e.U,o=e.by,r=e.K,s=e.S,d=e.j,l=e.aI}],execute:function(){const t="_detail_vtlsh_12",c="_container_vtlsh_20";e("default",i({name:"music-list",setup(){const e=n(),i=a({isLoading:!0,isProductLoading:!1,product:[{state:!1,name:"五线谱",type:o.staff,base64:""},{state:!1,name:"首调",type:o.firstTone,base64:""},{state:!1,name:"固定调",type:o.fixedTone,base64:""}]});r((()=>{window.appName="colexiu",s.xmlUrl=e.xmlUrl,i.isLoading=!1}));const h=async()=>{console.log("渲染完成")};return()=>d("div",{class:t},[d("div",{id:"scrollContainer",class:[c,"hideCursor"]},[!i.isLoading&&d(l,{onRendered:h},null)])])}}))}}}));
+========
+System.register(["./index-legacy-a72bfbf7.js"],(function(e,t){"use strict";var i,n,a,o,r,s,d,l,c=document.createElement("style");return c.textContent="._skeleton_vtlsh_1{position:fixed;left:0;top:0;width:100vw;height:100vh;padding:.53333rem .8rem;background-color:#fff;z-index:1000;--van-skeleton-paragraph-height: .8rem}._detail_vtlsh_12{width:100vw;height:100vh;overflow:hidden;overflow-y:auto;--header-height: 1.65333rem;background:var(--container-background)}._detail_vtlsh_12 ._container_vtlsh_20{margin:0 .26667rem;border-radius:.26667rem}._detail_vtlsh_12 #musicAndSelection{overflow:initial!important;height:initial!important;max-height:initial!important}\n",document.head.appendChild(c),{setters:[e=>{i=e.d,n=e.E,a=e.U,o=e.by,r=e.K,s=e.S,d=e.j,l=e.aI}],execute:function(){const t="_detail_vtlsh_12",c="_container_vtlsh_20";e("default",i({name:"music-list",setup(){const e=n(),i=a({isLoading:!0,isProductLoading:!1,product:[{state:!1,name:"五线谱",type:o.staff,base64:""},{state:!1,name:"首调",type:o.firstTone,base64:""},{state:!1,name:"固定调",type:o.fixedTone,base64:""}]});r((()=>{window.appName="colexiu",s.xmlUrl=e.xmlUrl,i.isLoading=!1}));const h=async()=>{console.log("渲染完成")};return()=>d("div",{class:t},[d("div",{id:"scrollContainer",class:[c,"hideCursor"]},[!i.isLoading&&d(l,{onRendered:h},null)])])}}))}}}));
+>>>>>>>> 2023-9-13_指法:dist/assets/index-legacy-c33393b3.js

dist/assets/index-legacy-151ed373.js

@@ -0,0 +1,5 @@
+<<<<<<<< HEAD:dist/assets/index-legacy-4fe904ea.js
+System.register(["./index-legacy-419b22fd.js"],(function(e,n){"use strict";var i,t,s,r,d,p,o;return{setters:[e=>{i=e.d,t=e.r,s=e.U,r=e.S,d=e.x,p=e.j,o=e.ae}],execute:function(){e("M",i({name:"measureSpeed",setup(){const e=t(!1),n=s({speed:r.speed,originSpeed:r.originSpeed});return d((()=>r.section.length),(()=>{if("practise"===r.modeType){if(!e.value&&2===r.section.length){e.value=!0,n.speed=r.speed;const i=r.section[0].beatSpeed;r.originSpeed=i,o(i)}e.value&&0===r.section.length&&(e.value=!1,r.originSpeed=n.originSpeed,o(n.speed))}})),()=>p("div",null,null)}}))}}}));
+========
+System.register(["./index-legacy-a72bfbf7.js"],(function(e,n){"use strict";var i,t,s,r,d,p,o;return{setters:[e=>{i=e.d,t=e.r,s=e.U,r=e.S,d=e.x,p=e.j,o=e.ae}],execute:function(){e("M",i({name:"measureSpeed",setup(){const e=t(!1),n=s({speed:r.speed,originSpeed:r.originSpeed});return d((()=>r.section.length),(()=>{if("practise"===r.modeType){if(!e.value&&2===r.section.length){e.value=!0,n.speed=r.speed;const i=r.section[0].beatSpeed;r.originSpeed=i,o(i)}e.value&&0===r.section.length&&(e.value=!1,r.originSpeed=n.originSpeed,o(n.speed))}})),()=>p("div",null,null)}}))}}}));
+>>>>>>>> 2023-9-13_指法:dist/assets/index-legacy-151ed373.js

dist/assets/index-legacy-4fe904ea.js

@@ -1 +1,5 @@
+<<<<<<<< HEAD:dist/assets/index-legacy-4fe904ea.js
 System.register(["./index-legacy-419b22fd.js"],(function(e,n){"use strict";var i,t,s,r,d,p,o;return{setters:[e=>{i=e.d,t=e.r,s=e.U,r=e.S,d=e.x,p=e.j,o=e.ae}],execute:function(){e("M",i({name:"measureSpeed",setup(){const e=t(!1),n=s({speed:r.speed,originSpeed:r.originSpeed});return d((()=>r.section.length),(()=>{if("practise"===r.modeType){if(!e.value&&2===r.section.length){e.value=!0,n.speed=r.speed;const i=r.section[0].beatSpeed;r.originSpeed=i,o(i)}e.value&&0===r.section.length&&(e.value=!1,r.originSpeed=n.originSpeed,o(n.speed))}})),()=>p("div",null,null)}}))}}}));
+========
+System.register(["./index-legacy-a72bfbf7.js"],(function(e,n){"use strict";var i,t,s,r,d,p,o;return{setters:[e=>{i=e.d,t=e.r,s=e.U,r=e.S,d=e.x,p=e.j,o=e.ae}],execute:function(){e("M",i({name:"measureSpeed",setup(){const e=t(!1),n=s({speed:r.speed,originSpeed:r.originSpeed});return d((()=>r.section.length),(()=>{if("practise"===r.modeType){if(!e.value&&2===r.section.length){e.value=!0,n.speed=r.speed;const i=r.section[0].beatSpeed;r.originSpeed=i,o(i)}e.value&&0===r.section.length&&(e.value=!1,r.originSpeed=n.originSpeed,o(n.speed))}})),()=>p("div",null,null)}}))}}}));
+>>>>>>>> 2023-9-13_指法:dist/assets/index-legacy-151ed373.js

dist/assets/index-legacy-c33393b3.js

@@ -0,0 +1,5 @@
+<<<<<<<< HEAD:dist/assets/index-legacy-0079d0f6.js
+System.register(["./index-legacy-419b22fd.js"],(function(e,t){"use strict";var i,n,a,o,r,s,d,l,c=document.createElement("style");return c.textContent="._skeleton_vtlsh_1{position:fixed;left:0;top:0;width:100vw;height:100vh;padding:.53333rem .8rem;background-color:#fff;z-index:1000;--van-skeleton-paragraph-height: .8rem}._detail_vtlsh_12{width:100vw;height:100vh;overflow:hidden;overflow-y:auto;--header-height: 1.65333rem;background:var(--container-background)}._detail_vtlsh_12 ._container_vtlsh_20{margin:0 .26667rem;border-radius:.26667rem}._detail_vtlsh_12 #musicAndSelection{overflow:initial!important;height:initial!important;max-height:initial!important}\n",document.head.appendChild(c),{setters:[e=>{i=e.d,n=e.E,a=e.U,o=e.by,r=e.K,s=e.S,d=e.j,l=e.aI}],execute:function(){const t="_detail_vtlsh_12",c="_container_vtlsh_20";e("default",i({name:"music-list",setup(){const e=n(),i=a({isLoading:!0,isProductLoading:!1,product:[{state:!1,name:"五线谱",type:o.staff,base64:""},{state:!1,name:"首调",type:o.firstTone,base64:""},{state:!1,name:"固定调",type:o.fixedTone,base64:""}]});r((()=>{window.appName="colexiu",s.xmlUrl=e.xmlUrl,i.isLoading=!1}));const h=async()=>{console.log("渲染完成")};return()=>d("div",{class:t},[d("div",{id:"scrollContainer",class:[c,"hideCursor"]},[!i.isLoading&&d(l,{onRendered:h},null)])])}}))}}}));
+========
+System.register(["./index-legacy-a72bfbf7.js"],(function(e,t){"use strict";var i,n,a,o,r,s,d,l,c=document.createElement("style");return c.textContent="._skeleton_vtlsh_1{position:fixed;left:0;top:0;width:100vw;height:100vh;padding:.53333rem .8rem;background-color:#fff;z-index:1000;--van-skeleton-paragraph-height: .8rem}._detail_vtlsh_12{width:100vw;height:100vh;overflow:hidden;overflow-y:auto;--header-height: 1.65333rem;background:var(--container-background)}._detail_vtlsh_12 ._container_vtlsh_20{margin:0 .26667rem;border-radius:.26667rem}._detail_vtlsh_12 #musicAndSelection{overflow:initial!important;height:initial!important;max-height:initial!important}\n",document.head.appendChild(c),{setters:[e=>{i=e.d,n=e.E,a=e.U,o=e.by,r=e.K,s=e.S,d=e.j,l=e.aI}],execute:function(){const t="_detail_vtlsh_12",c="_container_vtlsh_20";e("default",i({name:"music-list",setup(){const e=n(),i=a({isLoading:!0,isProductLoading:!1,product:[{state:!1,name:"五线谱",type:o.staff,base64:""},{state:!1,name:"首调",type:o.firstTone,base64:""},{state:!1,name:"固定调",type:o.fixedTone,base64:""}]});r((()=>{window.appName="colexiu",s.xmlUrl=e.xmlUrl,i.isLoading=!1}));const h=async()=>{console.log("渲染完成")};return()=>d("div",{class:t},[d("div",{id:"scrollContainer",class:[c,"hideCursor"]},[!i.isLoading&&d(l,{onRendered:h},null)])])}}))}}}));
+>>>>>>>> 2023-9-13_指法:dist/assets/index-legacy-c33393b3.js

dist/colexiu.html

@@ -2,7 +2,11 @@
 <html lang="en">
 
 <head>
+<<<<<<< HEAD
   <script type="module" crossorigin src="./assets/polyfills-bd296a6c.js"></script>
+=======
+  <script type="module" crossorigin src="./assets/polyfills-b9de8233.js"></script>
+>>>>>>> 2023-9-13_指法
 
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="./vite.svg" />
@@ -40,11 +44,19 @@
       },
     })
   </script>
+<<<<<<< HEAD
   <script type="module" crossorigin src="./assets/colexiu-59df7a79.js"></script>
   <link rel="modulepreload" crossorigin href="./assets/index-14c60a63.js">
   <link rel="modulepreload" crossorigin href="./assets/index-c5837739.js">
   <link rel="modulepreload" crossorigin href="./assets/vue3-lottie.es-5860b2d3.js">
   <link rel="modulepreload" crossorigin href="./assets/index-82e5c971.js">
+=======
+  <script type="module" crossorigin src="./assets/colexiu-eba6ee95.js"></script>
+  <link rel="modulepreload" crossorigin href="./assets/index-6199309f.js">
+  <link rel="modulepreload" crossorigin href="./assets/index-ecb0d945.js">
+  <link rel="modulepreload" crossorigin href="./assets/vue3-lottie.es-40cc32b9.js">
+  <link rel="modulepreload" crossorigin href="./assets/index-70080c7b.js">
+>>>>>>> 2023-9-13_指法
   <link rel="stylesheet" href="./assets/index-96ddda46.css">
   <link rel="stylesheet" href="./assets/index-cc0254c0.css">
   <link rel="stylesheet" href="./assets/colexiu-4a62fa3a.css">
@@ -57,8 +69,13 @@
   <img id="loading" class="show" src="./loading.svg" alt="loading" />
   
   <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
+<<<<<<< HEAD
   <script nomodule crossorigin id="vite-legacy-polyfill" src="./assets/polyfills-legacy-00986d5e.js"></script>
   <script nomodule crossorigin id="vite-legacy-entry" data-src="./assets/colexiu-legacy-764548a3.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+=======
+  <script nomodule crossorigin id="vite-legacy-polyfill" src="./assets/polyfills-legacy-f3f8346b.js"></script>
+  <script nomodule crossorigin id="vite-legacy-entry" data-src="./assets/colexiu-legacy-c646170e.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+>>>>>>> 2023-9-13_指法
 </body>
 
 </html>

dist/index.html

@@ -2,7 +2,11 @@
 <html lang="ZH-cn">
 
 <head>
+<<<<<<< HEAD
   <script type="module" crossorigin src="./assets/polyfills-bd296a6c.js"></script>
+=======
+  <script type="module" crossorigin src="./assets/polyfills-b9de8233.js"></script>
+>>>>>>> 2023-9-13_指法
 
   <meta charset="UTF-8">
   <link rel="icon" href="./favicon.ico" />
@@ -75,12 +79,21 @@
       }
     })
   </script>
+<<<<<<< HEAD
   <script type="module" crossorigin src="./assets/index-c47a86ab.js"></script>
   <link rel="modulepreload" crossorigin href="./assets/index-14c60a63.js">
   <link rel="modulepreload" crossorigin href="./assets/index-c5837739.js">
   <link rel="modulepreload" crossorigin href="./assets/index-3c694d30.js">
   <link rel="modulepreload" crossorigin href="./assets/index-933cc539.js">
   <link rel="modulepreload" crossorigin href="./assets/index-82e5c971.js">
+=======
+  <script type="module" crossorigin src="./assets/index-93bd6021.js"></script>
+  <link rel="modulepreload" crossorigin href="./assets/index-6199309f.js">
+  <link rel="modulepreload" crossorigin href="./assets/index-ecb0d945.js">
+  <link rel="modulepreload" crossorigin href="./assets/index-f6dbcd56.js">
+  <link rel="modulepreload" crossorigin href="./assets/index-de208c7b.js">
+  <link rel="modulepreload" crossorigin href="./assets/index-70080c7b.js">
+>>>>>>> 2023-9-13_指法
   <link rel="modulepreload" crossorigin href="./assets/plyr.min-424cfb91.js">
   <link rel="stylesheet" href="./assets/index-96ddda46.css">
   <link rel="stylesheet" href="./assets/index-cc0254c0.css">
@@ -100,8 +113,13 @@
   <img id="loading" class="show" src="./loading.svg" alt="loading" />
   
   <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
+<<<<<<< HEAD
   <script nomodule crossorigin id="vite-legacy-polyfill" src="./assets/polyfills-legacy-00986d5e.js"></script>
   <script nomodule crossorigin id="vite-legacy-entry" data-src="./assets/index-legacy-182a9632.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+=======
+  <script nomodule crossorigin id="vite-legacy-polyfill" src="./assets/polyfills-legacy-f3f8346b.js"></script>
+  <script nomodule crossorigin id="vite-legacy-entry" data-src="./assets/index-legacy-fe464652.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+>>>>>>> 2023-9-13_指法
 </body>
 
 </html>

dist/instrument.html

@@ -2,7 +2,11 @@
 <html lang="en">
 
 <head>
+<<<<<<< HEAD
   <script type="module" crossorigin src="./assets/polyfills-bd296a6c.js"></script>
+=======
+  <script type="module" crossorigin src="./assets/polyfills-b9de8233.js"></script>
+>>>>>>> 2023-9-13_指法
 
   <meta charset="UTF-8" />
   <meta name="viewport"
@@ -42,12 +46,21 @@
     }
 
   </script>
+<<<<<<< HEAD
   <script type="module" crossorigin src="./assets/instrument-305e5d0f.js"></script>
   <link rel="modulepreload" crossorigin href="./assets/index-14c60a63.js">
   <link rel="modulepreload" crossorigin href="./assets/vue3-lottie.es-5860b2d3.js">
   <link rel="modulepreload" crossorigin href="./assets/index-c5837739.js">
   <link rel="modulepreload" crossorigin href="./assets/index-cfefcdb9.js">
   <link rel="modulepreload" crossorigin href="./assets/index-3c694d30.js">
+=======
+  <script type="module" crossorigin src="./assets/instrument-7657205f.js"></script>
+  <link rel="modulepreload" crossorigin href="./assets/index-6199309f.js">
+  <link rel="modulepreload" crossorigin href="./assets/vue3-lottie.es-40cc32b9.js">
+  <link rel="modulepreload" crossorigin href="./assets/index-ecb0d945.js">
+  <link rel="modulepreload" crossorigin href="./assets/index-2f8d5658.js">
+  <link rel="modulepreload" crossorigin href="./assets/index-f6dbcd56.js">
+>>>>>>> 2023-9-13_指法
   <link rel="stylesheet" href="./assets/index-96ddda46.css">
   <link rel="stylesheet" href="./assets/index-cc0254c0.css">
   <link rel="stylesheet" href="./assets/instrument-b3dbe73e.css">
@@ -60,8 +73,13 @@
   <img id="loading" class="show" src="./loading.svg" alt="loading" />
   
   <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
+<<<<<<< HEAD
   <script nomodule crossorigin id="vite-legacy-polyfill" src="./assets/polyfills-legacy-00986d5e.js"></script>
   <script nomodule crossorigin id="vite-legacy-entry" data-src="./assets/instrument-legacy-82f691a4.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+=======
+  <script nomodule crossorigin id="vite-legacy-polyfill" src="./assets/polyfills-legacy-f3f8346b.js"></script>
+  <script nomodule crossorigin id="vite-legacy-entry" data-src="./assets/instrument-legacy-49746108.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+>>>>>>> 2023-9-13_指法
 </body>
 
 </html>

dist/orchestra.html

@@ -2,7 +2,11 @@
 <html lang="en">
 
 <head>
+<<<<<<< HEAD
   <script type="module" crossorigin src="./assets/polyfills-bd296a6c.js"></script>
+=======
+  <script type="module" crossorigin src="./assets/polyfills-b9de8233.js"></script>
+>>>>>>> 2023-9-13_指法
 
   <meta charset="UTF-8" />
   <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
@@ -41,6 +45,7 @@
       transition: opacity .3s;
     }
   </style>
+<<<<<<< HEAD
   <script type="module" crossorigin src="./assets/orchestra-6d60a083.js"></script>
   <link rel="modulepreload" crossorigin href="./assets/index-14c60a63.js">
   <link rel="modulepreload" crossorigin href="./assets/index-c5837739.js">
@@ -48,6 +53,15 @@
   <link rel="modulepreload" crossorigin href="./assets/index-933cc539.js">
   <link rel="modulepreload" crossorigin href="./assets/index-82e5c971.js">
   <link rel="modulepreload" crossorigin href="./assets/index-cfefcdb9.js">
+=======
+  <script type="module" crossorigin src="./assets/orchestra-bca473b5.js"></script>
+  <link rel="modulepreload" crossorigin href="./assets/index-6199309f.js">
+  <link rel="modulepreload" crossorigin href="./assets/index-ecb0d945.js">
+  <link rel="modulepreload" crossorigin href="./assets/vue3-lottie.es-40cc32b9.js">
+  <link rel="modulepreload" crossorigin href="./assets/index-de208c7b.js">
+  <link rel="modulepreload" crossorigin href="./assets/index-70080c7b.js">
+  <link rel="modulepreload" crossorigin href="./assets/index-2f8d5658.js">
+>>>>>>> 2023-9-13_指法
   <link rel="stylesheet" href="./assets/index-96ddda46.css">
   <link rel="stylesheet" href="./assets/index-cc0254c0.css">
   <link rel="stylesheet" href="./assets/index-85f95688.css">
@@ -72,8 +86,13 @@
   </script>
   
   <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
+<<<<<<< HEAD
   <script nomodule crossorigin id="vite-legacy-polyfill" src="./assets/polyfills-legacy-00986d5e.js"></script>
   <script nomodule crossorigin id="vite-legacy-entry" data-src="./assets/orchestra-legacy-2acaac22.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+=======
+  <script nomodule crossorigin id="vite-legacy-polyfill" src="./assets/polyfills-legacy-f3f8346b.js"></script>
+  <script nomodule crossorigin id="vite-legacy-entry" data-src="./assets/orchestra-legacy-8a1ea393.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+>>>>>>> 2023-9-13_指法
 </body>
 
 </html>

dist/report-share.html

@@ -2,7 +2,11 @@
 <html lang="en">
 
 <head>
+<<<<<<< HEAD
   <script type="module" crossorigin src="./assets/polyfills-bd296a6c.js"></script>
+=======
+  <script type="module" crossorigin src="./assets/polyfills-b9de8233.js"></script>
+>>>>>>> 2023-9-13_指法
 
   <meta charset="UTF-8" />
   <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
@@ -25,8 +29,13 @@
       transition: opacity .3s;
     }
   </style>
+<<<<<<< HEAD
   <script type="module" crossorigin src="./assets/report-share-11f0d3fd.js"></script>
   <link rel="modulepreload" crossorigin href="./assets/index-14c60a63.js">
+=======
+  <script type="module" crossorigin src="./assets/report-share-b0205005.js"></script>
+  <link rel="modulepreload" crossorigin href="./assets/index-6199309f.js">
+>>>>>>> 2023-9-13_指法
   <link rel="modulepreload" crossorigin href="./assets/plyr.min-424cfb91.js">
   <link rel="stylesheet" href="./assets/index-96ddda46.css">
   <link rel="stylesheet" href="./assets/plyr-ad8ef5ae.css">
@@ -51,8 +60,13 @@
   </script>
   
   <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
+<<<<<<< HEAD
   <script nomodule crossorigin id="vite-legacy-polyfill" src="./assets/polyfills-legacy-00986d5e.js"></script>
   <script nomodule crossorigin id="vite-legacy-entry" data-src="./assets/report-share-legacy-e1942886.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+=======
+  <script nomodule crossorigin id="vite-legacy-polyfill" src="./assets/polyfills-legacy-f3f8346b.js"></script>
+  <script nomodule crossorigin id="vite-legacy-entry" data-src="./assets/report-share-legacy-ab4a9cd2.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+>>>>>>> 2023-9-13_指法
 </body>
 
 </html>

public/flexible.js

@@ -4,7 +4,7 @@
     var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
     var b = width > height ? height : width;
     b / i > 640 && (b = 640 * i);
-    b / i < 420 && (b = 420 * i);
+    b / i < 375 && (b = 375 * i);
     var c = b / 10;
     f.style.fontSize = c + "px", k.rem = a.rem = c
   }

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

@@ -42,6 +42,7 @@
     display: flex;
     flex-direction: column;
     align-items: flex-end;
+    pointer-events: none;
 
     .dialogue {
         position: relative;

src/page-instrument/view-detail/index.tsx

@@ -422,18 +422,23 @@ export default defineComponent({
           </>
         )}
 
-        <Popup
-          zIndex={5050}
-          teleport="body"
-          v-model:show={detailData.fingerPreView}
-          position="bottom"
-          onOpened={() => {
-            detailData.fingerPreViewGuide = true;
-          }}
-        >
-          <ViewFigner show={detailData.fingerPreViewGuide} subject={state.fingeringInfo.name} isComponent={true} onClose={handleCloseFignerView} />
-        </Popup>
-      </div>
-    );
-  },
+				<Popup
+					zIndex={5050}
+					teleport="body"
+					v-model:show={detailData.fingerPreView}
+					position="bottom"
+					onOpened={() => {
+						detailData.fingerPreViewGuide = true;
+					}}
+				>
+					<ViewFigner
+						show={detailData.fingerPreViewGuide}
+						subject={state.fingeringInfo.name}
+						isComponent={true}
+						onClose={handleCloseFignerView}
+					/>
+				</Popup>
+			</div>
+		);
+	},
 });

src/page-instrument/view-figner/index.module.less

@@ -11,7 +11,7 @@
     flex-direction: column;
     width: 100vw;
     height: 100vh;
-    background: linear-gradient(180deg, #6BC6E1 0%, #E1FBEB 35%, #9DE7E2 100%);
+    background: rgba(215, 205, 199, 1);
     user-select: none;
 
     &.fingerRight {
@@ -23,14 +23,42 @@
 
         }
 
+        .backBtn{
+            padding: 26px 17px 26px 29px;
+        }
+
 
         .tips {
             width: 43%;
             border-radius: 18px 0px 0px 18px;
+            padding: 8px;
+            background-image: url('./image/icon_shuo_h.png');
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: 8px;
+                top: 8px;
+                right: 8px;
+                bottom: 8px;
+                border-radius: 15px;
+                border: 1px solid rgba(240, 234, 230, 1);
+                pointer-events: none;
+            }
 
             &.tipHidden {
                 margin-right: -43%;
             }
+
+            .tipContentbox {
+                padding: 6px 8px 8px 8px;
+                border-radius: 16px;
+            }
+
+            .tipContent {
+                border-radius: 16px;
+                padding: 4px 8px;
+            }
         }
     }
 
@@ -40,17 +68,41 @@
 
         .fingerContent {
             flex-direction: column;
-
         }
 
 
         .tips {
             height: 238px;
             border-radius: 18px 18px 0 0;
+            padding: 8px 8px 0 8px;
+            background-image: url('./image/icon_shuo_v.png');
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: 8px;
+                top: 8px;
+                right: 8px;
+                bottom: 0;
+                border-radius: 15px;
+                border: 1px solid rgba(240, 234, 230, 1);
+                pointer-events: none;
+            }
 
             &.tipHidden {
                 margin-bottom: -238px;
             }
+
+            .tipContentbox {
+                padding: 6px 8px 0 8px;
+                border-radius: 16px 16px 0 0;
+            }
+
+            .tipContent {
+                border-radius: 16px 16px 0 0;
+                border-bottom: transparent;
+                padding: 4px;
+            }
         }
     }
 }
@@ -59,25 +111,26 @@
 .head {
     position: absolute;
     left: 0;
-    top: 20px;
+    top: 0;
     right: 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
     pointer-events: none;
-    padding-right: 10px;
+    padding-right: 18px;
     padding-top: env(safe-area-inset-top);
     z-index: 5;
 
     .backBtn {
         position: relative;
-        padding: 6px 30px 10px 33px;
+        padding: 12px 12px 12px 18px;
         display: flex;
         align-items: center;
         justify-content: center;
         border: none;
         background: none;
         cursor: pointer;
+        pointer-events: auto;
 
         img {
             height: 34px;
@@ -87,64 +140,40 @@
     .left {
         display: flex;
         align-items: center;
-        pointer-events: auto;
-        margin-left: 100px;
-    }
-
-    &.backHead{
-        z-index: 200;
-        right: auto;
-        .left{
-            margin-left: 0;
-        }
-    }
-    &.paddingTop{
-        padding-top: 25Px;
     }
 
     .baseBtn {
-        width: 85px;
-        height: 33px;
-        background: linear-gradient(180deg, #FEF0AF 0%, #F7D656 100%);
-        box-shadow: 0px 2px 1px 0px rgba(168, 121, 0, 0.24), inset 0px 1px 3px 0px rgba(255, 255, 255, 0.5), inset 0px -2px 1px 0px rgba(255, 255, 255, 0.5);
-        border-radius: 9px;
-        font-size: 13px;
-        font-weight: 600;
-        color: #A14927;
-        line-height: 33px;
+        width: 60px;
+        height: 45px;
+        background: rgba(255, 255, 255, .48);
+        border-radius: 10px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #616161;
+        line-height: 17px;
         text-align: center;
         cursor: pointer;
-    }
-
-    .rightBtn {
         display: flex;
-        align-items: center;
+        flex-direction: column;
         justify-content: space-evenly;
-        width: 100px;
-        height: 44px;
-        background: linear-gradient(180deg, #FEF0AF 0%, #F7D656 100%);
-        box-shadow: 0px 2px 1px 0px rgba(168, 121, 0, 0.24), inset 0px 1px 3px 0px rgba(255, 255, 255, 0.5), inset 0px -2px 1px 0px rgba(255, 255, 255, 0.5);
-        border-radius: 11px;
-        font-weight: 600;
-        color: #A14927;
+        align-items: center;
         pointer-events: auto;
 
-        .item {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            cursor: pointer;
+        img {
+            width: 18px;
+            height: 18px;
+        }
 
-            &:first-child {
-                border-right: 1Px solid #a149275e;
-            }
+        &:active {
+            opacity: .8;
+        }
+    }
 
-            img {
-                width: 13px;
-                height: 13px;
-            }
+    .rightBtn {
+        display: flex;
+
+        .baseBtn {
+            margin: 0 4px;
         }
     }
 }
@@ -179,14 +208,14 @@
     z-index: 11;
     flex-shrink: 0;
     transition: all .3s;
-    background: #EEFDFF;
-    box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.12);
-    padding: 0 7px 13px 7px;
+    background-color: rgba(190, 166, 140, 1);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
     overflow: hidden;
 
     .tipTitle {
         position: relative;
-        height: 45px;
+        height: 48px;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -195,27 +224,54 @@
 
     .tipTitleName {
         position: relative;
-        font-weight: 500;
-        font-size: 15px;
+        font-weight: 600;
         z-index: 1;
+        color: #fff;
+        font-size: 16px;
+        text-shadow: 0px 1px 2px #6D4825;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: -40px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 25px;
+            height: 2px;
+            background: #fff;
+            z-index: -1;
+        }
 
         &::after {
             content: '';
             position: absolute;
-            left: 0;
-            bottom: -2px;
-            width: 100%;
-            height: 8px;
-            background: #8AEDFA;
-            border-radius: 4px;
-            opacity: 0.5;
+            right: -40px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 25px;
+            height: 2px;
+            background: #fff;
             z-index: -1;
         }
     }
 
+    .tipImg {
+        position: absolute;
+        top: 53px;
+        left: 8px;
+        right: 8px;
+
+        img {
+            position: absolute;
+            width: 100%;
+            height: 30px;
+            display: block;
+        }
+    }
+
     .tipClose {
         position: absolute;
-        right: -7px;
+        right: 0;
         top: 0;
         height: 100%;
         border: none;
@@ -223,12 +279,43 @@
         border-radius: 0;
     }
 
-    .tipContent {
+    .iconBook {
+        position: absolute;
+        top: 48px;
+        left: 37px;
+        right: 37px;
+        pointer-events: none;
+        padding-bottom: 8%;
+        background: url('./image/icon_popup_book_h.png') no-repeat;
+        background-size: 100%;
+        z-index: 1;
+    }
+
+    .tipContentbox {
+        position: relative;
         flex: 1;
         background: #FFFFFF;
-        border-radius: 15px;
-        padding: 16px;
-        color: #415E6C;
+        display: flex;
+        overflow: hidden;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            padding-bottom: 45%;
+            background: url('./image/icon_popup_top.png') no-repeat;
+            background-size: 100%;
+            opacity: .4;
+            pointer-events: none;
+        }
+    }
+
+    .tipContent {
+        flex: 1;
+        border: 1.5px solid rgba(180, 165, 154, 1);
+        color: rgba(68, 59, 59, 1);
         font-size: 12px;
         overflow: hidden;
         overflow-y: auto;
@@ -239,6 +326,9 @@
     display: flex;
     line-height: 18px;
     margin-bottom: 8px;
+    background: linear-gradient(180deg, #FFFFFF 0%, #F3F4F7 100%);
+    border-radius: 5px;
+    padding: 10px;
 
     .iconWrap {
         display: flex;
@@ -250,11 +340,11 @@
     .tipItemIcon {
         width: 16px;
         height: 16px;
-        background: linear-gradient(180deg, #70C6FF 0%, #1898F9 100%);
+        background: linear-gradient(180deg, rgba(224, 180, 135, 1) 0%, rgba(195, 164, 134, 1) 100%);
         font-weight: 600;
         line-height: 16px;
         color: #FFFFFF;
-        text-shadow: 0px 1px 1px #319FF0;
+        text-shadow: 0px 1px 1px #C8946D;
         border-radius: 50%;
         text-align: center;
 
@@ -268,7 +358,8 @@
     align-items: flex-start;
     height: 65px;
     flex-shrink: 0;
-    &.paddingLeft{
+
+    &.paddingLeft {
         padding-left: 20Px;
     }
 
@@ -276,14 +367,10 @@
         position: relative;
         max-width: calc(100% - 92px);
         border-radius: 25px;
-        background: rgba(255, 255, 255, 0.53);
-        border: 1px solid rgba(255, 255, 255, 0.81);
+        background: rgba(255, 255, 255, 0.5);
+        border: 1px solid rgba(255, 255, 255, 0.6);
         overflow: hidden;
 
-        &.huaweiPad {
-            border-radius: 8px;
-        }
-
         &.noteContentWrap {
             &::before {
                 content: '';
@@ -291,8 +378,9 @@
                 left: 0;
                 top: 0;
                 height: 100%;
-                width: 20px;
-                background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(28, 172, 241, 0.45) 100%);
+                width: 23px;
+                background: url('./image/icon_shadow_left.png') no-repeat;
+                background-size: 100% 100%;
             }
 
             &::after {
@@ -301,8 +389,9 @@
                 right: 0;
                 top: 0;
                 height: 100%;
-                width: 20px;
-                background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(28, 172, 241, 0.45) 100%);
+                width: 23px;
+                background: url('./image/icon_shadow_r.png') no-repeat;
+                background-size: 100% 100%;
             }
         }
 
@@ -324,10 +413,11 @@
 
     .noteBtn {
         background: transparent;
-        color: rgba(69, 143, 177, .82);
+        color: rgba(112, 99, 88, .41);
         border: 0;
         padding: 0;
         font-size: 22px;
+        height: 46px;
 
         :global {
             .van-icon {
@@ -349,8 +439,8 @@
 .note {
     position: relative;
     margin: 0 2.5Px;
-    width: 42px;
-    height: 42px;
+    width: 46px;
+    height: 46px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -373,26 +463,29 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    justify-content: space-evenly;
+    justify-content: center;
     align-items: center;
     z-index: 1;
     font-size: 16px;
     font-family: 'jianzhu';
     font-weight: normal;
-    color: #FFFFFF;
-    text-shadow: 0px 1px 3px #1EADF1;
+    color: #616161;
     line-height: 1;
     height: 100%;
 
     &.keyActive {
-        text-shadow: 0px 1px 3px #F6A81B;
+        color: #FFF9EC;
     }
 
     .dot {
         width: 3px;
         height: 3px;
         border-radius: 50%;
-        background-color: #fff;
+        background-color: currentColor;
+    }
+
+    .dot+.dot {
+        margin: 2px 0;
     }
 
     .noteName {
@@ -498,7 +591,7 @@
 .tizhi {
     position: absolute;
     top: 20%;
-    left: 64%;
+    left: 10%;
     width: 30px;
     height: 30px;
     text-align: center;
@@ -535,13 +628,12 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    width: 33px;
-    height: 55px;
-    background: linear-gradient(180deg, #FEF0AF 0%, #F7D656 100%);
-    box-shadow: 0px 2px 1px 0px rgba(168, 121, 0, 0.24), inset 0px 1px 3px 0px rgba(255, 255, 255, 0.5), inset 0px -2px 1px 0px rgba(255, 255, 255, 0.5);
-    border-radius: 48px 0px 0px 48px;
-    font-size: 13px;
-    color: #A14927;
+    width: 34px;
+    height: 60px;
+    background: url('./image/icon_trans_bg.png') no-repeat;
+    background-size: 100%;
+    font-size: 14px;
+    color: #616161;
     line-height: 14px;
     font-weight: 600;
     padding-left: 10px;
@@ -554,7 +646,7 @@
     }
 
     img {
-        width: 8px;
+        width: 9px;
         height: 5px;
         margin-top: 3px;
     }
@@ -562,17 +654,9 @@
 
 .toggleBtnhulusi {
     height: auto;
-    padding: 10px 0 10px 10px;
-
-    .hulusiNoteKey {
-        color: #A14927;
-        text-shadow: none;
-
-        .dot {
-            background: #A14927;
-        }
-    }
-
+    padding: 14px 0 15px 12px;
+    background-image: url('./image/icon_trans_bg_hu.png');
+    background-size: 100% 100%;
 }
 
 .tones {
@@ -583,6 +667,9 @@
     z-index: 12;
     transition: all .3s;
     overflow: hidden;
+    background-color: rgba(190, 166, 140, 1);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
 
     .toneTitle {
         position: relative;
@@ -598,6 +685,33 @@
         font-weight: 500;
         font-size: 15px;
         z-index: 1;
+        color: #fff;
+        font-size: 16px;
+        text-shadow: 0px 1px 2px #6D4825;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: -40px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 25px;
+            height: 2px;
+            background: #fff;
+            z-index: -1;
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            right: -40px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 25px;
+            height: 2px;
+            background: #fff;
+            z-index: -1;
+        }
     }
 
     .tipClose {
@@ -610,41 +724,49 @@
         border-radius: 0;
     }
 
+    .tipContentbox {
+        position: relative;
+        flex: 1;
+        background: #FFFFFF;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            padding-bottom: 45%;
+            background: url('./image/icon_popup_top.png') no-repeat;
+            background-size: 100%;
+            opacity: .4;
+            pointer-events: none;
+        }
+    }
+
+    .tipContent {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        border: 1.5px solid rgba(180, 165, 154, 1);
+        color: rgba(68, 59, 59, 1);
+        font-size: 12px;
+        overflow: hidden;
+    }
+
     .toneAction {
-        height: 82px;
         border-top: 1px solid #EBEBEB;
         display: flex;
         justify-content: center;
         align-items: center;
-        padding: 0 7px;
-
-        :global {
-            .van-space-item {
-                width: calc(100% / 2);
-                padding: 0 7px;
-            }
-
-            .van-button {
-                font-size: 15px;
-                padding: 0;
-                width: 100%;
-                height: 0;
-                padding-bottom: 22%;
-
-                &::before {
-                    display: none;
-                }
-
-                .van-button__content {
-                    position: absolute;
-                    left: 0;
-                    top: 0;
-                    width: 100%;
-                }
-
-                &:active {
-                    opacity: .8;
-                }
+        padding: 16px 0;
+        img {
+            width: 128px;
+            margin: 0 8px;
+            &:active{
+                opacity: .85;
             }
         }
     }
@@ -652,8 +774,10 @@
     .toneContent {
         padding: 0 7px;
         display: flex;
-        ;
         flex-wrap: wrap;
+        flex: 1;
+        --van-button-primary-background: rgba(174, 137, 103, 1);
+        --van-button-primary-border-color: rgba(174, 137, 103, 1);
 
         :global {
             .van-space-item {
@@ -669,7 +793,7 @@
                 padding: 0;
                 padding-bottom: 40.5%;
                 flex-shrink: 0;
-                background-color: transparent;
+                
 
                 &::before {
                     display: none;
@@ -686,21 +810,20 @@
                     opacity: .8;
                 }
             }
+            .van-button--primary{
+                --van-button-plain-background: RGBA(255, 246, 231, 1);
+            }
         }
 
         :global(.van-button--primary) {
             .dot {
-                background: var(--van-primary-color) !important;
+                background: var(--van-button-primary-background) !important;
             }
         }
 
         .hulusiNoteKey {
             color: inherit;
             text-shadow: none;
-
-            .dot {
-                background: #323233;
-            }
         }
     }
 }
@@ -709,7 +832,21 @@
     width: 43%;
     height: 100%;
     border-radius: 18px 0px 0px 18px;
-    background: #EEFDFF;
+
+    .tones {
+        padding: 8px;
+        background-image: url('./image/icon_shuo_h.png');
+
+        .tipContentbox {
+            padding: 6px 8px 8px 8px;
+            border-radius: 16px;
+        }
+
+        .tipContent {
+            border-radius: 16px;
+            padding: 4px 8px;
+        }
+    }
 }
 
 :global(.van-popup--bottom.tonePopup) {
@@ -717,10 +854,22 @@
     flex-direction: column;
     min-height: 238px;
     border-radius: 18px 18px 0 0;
-    background: #EEFDFF;
 
     .tones {
         flex: 1;
+        padding: 8px 8px 0 8px;
+        background-image: url('./image/icon_shuo_v.png');
+
+        .tipContentbox {
+            padding: 6px 8px 0 8px;
+            border-radius: 16px 16px 0 0;
+        }
+
+        .tipContent {
+            border-radius: 16px 16px 0 0;
+            border-bottom: transparent;
+            padding: 4px;
+        }
     }
 
     .toneContent {
@@ -732,12 +881,4 @@
             }
         }
     }
-
-    .toneAction {
-        :global {
-            .van-space-item {
-                max-width: 200px;
-            }
-        }
-    }
 }

src/page-instrument/view-figner/index.tsx

@@ -21,7 +21,13 @@ import {
 } from "/src/view/fingering/fingering-config";
 import { Howl } from "howler";
 import { storeData } from "/src/store";
-import { api_back, api_cloudLoading, api_setRequestedOrientation, api_setStatusBarVisibility, isSpecialShapedScreen } from "/src/helpers/communication";
+import {
+	api_back,
+	api_cloudLoading,
+	api_setRequestedOrientation,
+	api_setStatusBarVisibility,
+	isSpecialShapedScreen,
+} from "/src/helpers/communication";
 import Hammer from "hammerjs";
 import { Button, Icon, Loading, Popup, Progress, Space } from "vant";
 import GuideIndex from "./guide/guide-index";
@@ -30,6 +36,7 @@ import { browser } from "/src/utils";
 import { usePageVisibility } from "@vant/use";
 import { watch } from "vue";
 import icon_loading_img from "./image/icon_loading_img.png";
+import icon_popup_top from "./image/icon_popup_top.png";
 import state from "/src/state";
 
 export default defineComponent({
@@ -65,6 +72,7 @@ export default defineComponent({
 			activeToneName: "",
 			soundFonts: {} as any,
 			viewIndex: 0,
+			viewTotal: 1,
 			noteAudio: null as unknown as Howl,
 			transform: {
 				scale: 1,
@@ -83,8 +91,8 @@ export default defineComponent({
 			loadingSoundProgress: 0,
 
 			huaweiPad: navigator?.userAgent?.includes("UAWEIVRD-W09") ? true : false,
-			paddingTop: '',
-			paddingLeft:'',
+			paddingTop: "",
+			paddingLeft: "",
 		});
 		const fingerData = reactive({
 			relationshipIndex: 0,
@@ -95,16 +103,16 @@ export default defineComponent({
 			state.fingeringInfo = fingerData.fingeringInfo;
 		}
 
-		const getAPPData = async (type: 'top' | 'left') => {
+		const getAPPData = async (type: "top" | "left") => {
 			const screenData = await isSpecialShapedScreen();
 			if (screenData?.content) {
 				// console.log("🚀 ~ screenData:", screenData.content);
 				const { isSpecialShapedScreen, notchHeight } = screenData.content;
 				if (isSpecialShapedScreen) {
-					if (type === 'top'){
+					if (type === "top") {
 						data.paddingTop = 25 + "px";
 					}
-					if(type === 'left'){
+					if (type === "left") {
 						data.paddingLeft = 25 + "px";
 					}
 				}
@@ -112,10 +120,10 @@ export default defineComponent({
 		};
 
 		if (!props.isComponent && !browsInfo.ios && fingerData.fingeringInfo.orientation === 1) {
-			getAPPData('top');
+			getAPPData("top");
 		}
 		if (!props.isComponent && !browsInfo.ios && fingerData.fingeringInfo.orientation === 0) {
-			getAPPData('left');
+			getAPPData("left");
 		}
 
 		const getNotes = () => {
@@ -175,9 +183,16 @@ export default defineComponent({
 		};
 		onBeforeMount(() => {
 			getNotes();
-			if (['pan-flute', 'ocarina'].includes(data.subject)){
+			if (["pan-flute", "ocarina"].includes(data.subject)) {
 				data.viewIndex = 1;
 			}
+			const o: any = {
+				"pan-flute": 2,
+				ocarina: 2,
+				piccolo: 2,
+				"hulusi-flute": 2,
+			};
+			data.viewTotal = o[data.subject] || 1;
 			getFingeringData();
 			getSounFonts();
 		});
@@ -341,38 +356,44 @@ export default defineComponent({
 							: styles.fingerRight,
 					]}
 				>
-					<div class={[styles.head, styles.backHead, data.paddingTop && styles.paddingTop]}>
+					<div
+						class={styles.head}
+						style={{
+							paddingTop: data.paddingTop ? data.paddingTop : "",
+							paddingLeft: data.paddingLeft ? data.paddingLeft : "",
+						}}
+					>
 						<div class={styles.left}>
 							<button class={[styles.backBtn]} onClick={() => handleBack()}>
 								<img src={icons.icon_back} />
 							</button>
-						</div>
-					</div>
-
-					<div class={[styles.head, data.paddingTop && styles.paddingTop]}>
-						<div class={styles.left}>
-							{data.subject === "pan-flute" && (
+							{data.subject !== "melodica" && (
 								<div
 									class={styles.baseBtn}
 									onClick={() => {
 										data.viewIndex++;
-										if (data.viewIndex > 4) {
-											data.viewIndex = 1;
+										if (data.viewIndex > data.viewTotal) {
+											if (["pan-flute", "ocarina"].includes(data.subject)) {
+												data.viewIndex = 1;
+											} else {
+												data.viewIndex = 0;
+											}
 										}
 										getFingeringData();
 									}}
 								>
-									切换视图
+									<img src={icons.icon_toggle} />
+									<span>切换视图</span>
 								</div>
 							)}
 						</div>
 						<div class={styles.rightBtn}>
-							<div class={[styles.item]} onClick={() => resetElement()}>
+							<div class={styles.baseBtn} onClick={() => resetElement()}>
 								<img src={icons.icon_2_0} />
 								<span>还原</span>
 							</div>
 							<div
-								class={[styles.item]}
+								class={styles.baseBtn}
 								onClick={() => {
 									resetElement();
 									data.tipShow = !data.tipShow;
@@ -412,7 +433,12 @@ export default defineComponent({
 									</div>
 								</div>
 							</div>
-							<div class={[styles.notes, data.paddingLeft && styles.paddingLeft]}>
+							<div
+								class={styles.notes}
+								style={{
+									paddingLeft: data.paddingLeft ? data.paddingLeft : "",
+								}}
+							>
 								<Button class={styles.noteBtn} onClick={() => scrollNoteBox("left")}>
 									<Icon name="arrow-left" />
 								</Button>
@@ -464,20 +490,23 @@ export default defineComponent({
 							<div class={styles.tipTitle}>
 								<div class={styles.tipTitleName}>{fingerData.fingeringInfo.code}使用说明</div>
 								<Button class={styles.tipClose} onClick={() => (data.tipShow = false)}>
-									<Icon name="cross" color="#999" />
+									<Icon name="cross" size={19} color="#fff" />
 								</Button>
 							</div>
-							<div class={styles.tipContent}>
-								{data.tips.map((tip, tipIndex) => (
-									<div class={styles.tipItem}>
-										<div class={styles.iconWrap}>
-											<div class={styles.tipItemIcon}>{tipIndex + 1}</div>
-										</div>
-										<div>
-											{tip.name}: {tip.realName}
+							<div class={styles.iconBook}></div>
+							<div class={styles.tipContentbox}>
+								<div class={styles.tipContent}>
+									{data.tips.map((tip, tipIndex) => (
+										<div class={styles.tipItem}>
+											<div class={styles.iconWrap}>
+												<div class={styles.tipItemIcon}>{tipIndex + 1}</div>
+											</div>
+											<div>
+												{tip.name}: {tip.realName}
+											</div>
 										</div>
-									</div>
-								))}
+									))}
+								</div>
 							</div>
 						</div>
 						{data.loadingSoundFonts && (
@@ -500,7 +529,7 @@ export default defineComponent({
 								>
 									<div>
 										全按作
-										<div class={[styles.noteKey, styles.hulusiNoteKey]}>
+										<div class={[styles.noteKey]}>
 											{data.activeTone.step > 0 ? <span class={styles.dot}></span> : null}
 
 											<div class={styles.noteName}>
@@ -516,7 +545,7 @@ export default defineComponent({
 								</div>
 							) : (
 								<div id="finger-note-1" class={styles.toggleBtn} onClick={() => (data.tnoteShow = true)}>
-									<div>
+									<div style={{ marginTop: "-4px" }}>
 										<sup>{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}</sup>
 										{data.activeTone.name}
 									</div>
@@ -538,66 +567,65 @@ export default defineComponent({
 							<div class={styles.toneTitle}>
 								<div class={styles.tipTitleName}>移调</div>
 								<Button class={styles.tipClose} onClick={() => (data.tnoteShow = false)}>
-									<Icon name="cross" color="#999" />
+									<Icon name="cross" size={19} color="#fff" />
 								</Button>
 							</div>
-							<div style={{ flex: 1, overflow: "hidden" }}>
-								<Space size={0} class={styles.toneContent}>
-									{data.tones.map((tone: IFIGNER_INSTRUMENT_Note) => {
-										const steps = new Array(Math.abs(tone.step)).fill(1);
-										return (
-											<Button
-												round
-												plain
-												type={data.popupActiveTone.realName === tone.realName ? "primary" : "default"}
-												onClick={() => {
-													data.popupActiveTone = tone;
-													setNotes();
-												}}
-											>
-												{fingerData.fingeringInfo.name == "hulusi-flute" ? (
-													<div style={{ display: "flex", alignItems: "center" }}>
-														全按作
-														<div class={[styles.noteKey, styles.hulusiNoteKey]}>
-															{tone.step > 0 ? <span class={styles.dot}></span> : null}
-															<div class={styles.noteName} style={{ fontSize: "0.25rem" }}>
-																<sup>{tone.mark && (tone.mark === "rise" ? "#" : "b")}</sup>
-																{tone.key}
+							<div class={styles.tipContentbox}>
+								<div class={styles.tipContent}>
+									<Space size={0} class={styles.toneContent}>
+										{data.tones.map((tone: IFIGNER_INSTRUMENT_Note) => {
+											const steps = new Array(Math.abs(tone.step)).fill(1);
+											return (
+												<Button
+													round
+													plain
+													type={data.popupActiveTone.realName === tone.realName ? "primary" : "default"}
+													onClick={() => {
+														data.popupActiveTone = tone;
+														setNotes();
+													}}
+												>
+													{fingerData.fingeringInfo.name == "hulusi-flute" ? (
+														<div style={{ display: "flex", alignItems: "center" }}>
+															全按作
+															<div class={[styles.noteKey, styles.hulusiNoteKey]}>
+																{tone.step > 0 ? <span class={styles.dot}></span> : null}
+																<div class={styles.noteName} style={{ fontSize: "0.25rem" }}>
+																	<sup>{tone.mark && (tone.mark === "rise" ? "#" : "b")}</sup>
+																	{tone.key}
+																</div>
+																{tone.step < 0 ? <span class={styles.dot}></span> : null}
 															</div>
-															{tone.step < 0 ? <span class={styles.dot}></span> : null}
 														</div>
-													</div>
-												) : (
-													<div class={styles.noteName}>
-														<sup>{tone.mark && (tone.mark === "rise" ? "#" : "b")}</sup>
-														{tone.name}
-													</div>
-												)}
-											</Button>
-										);
-									})}
-								</Space>
+													) : (
+														<div class={styles.noteName}>
+															<sup>{tone.mark && (tone.mark === "rise" ? "#" : "b")}</sup>
+															{tone.name}
+														</div>
+													)}
+												</Button>
+											);
+										})}
+									</Space>
+									<div class={styles.toneAction}>
+										<img onClick={() => (data.tnoteShow = false)} src={icons.icon_action_cancel} />
+										<img
+											onClick={() => {
+												data.activeTone = data.popupActiveTone;
+												setNotes();
+												data.tnoteShow = false;
+											}}
+											src={icons.icon_action_confirm}
+										/>
+									</div>
+								</div>
 							</div>
-							<Space size={0} class={styles.toneAction}>
-								<Button type="primary" round plain onClick={() => (data.tnoteShow = false)}>
-									取消
-								</Button>
-								<Button
-									type="primary"
-									round
-									onClick={() => {
-										data.activeTone = data.popupActiveTone;
-										setNotes();
-										data.tnoteShow = false;
-									}}
-								>
-									确定
-								</Button>
-							</Space>
 						</div>
 					</Popup>
 
-					{props.show && !data.loading && !data.loadingSoundFonts && <GuideIndex showGuide={false} list={["finger"]} />}
+					{props.show && !data.loading && !data.loadingSoundFonts && (
+						<GuideIndex showGuide={false} list={["finger"]} />
+					)}
 				</div>
 			);
 		};

src/view/fingering/fingering-config.ts

@@ -38,7 +38,11 @@ export type IVocals =
 	| "small-drum"
 	| "tuba"
 	| "piccolo"
+	| "piccolo1"
+	| "piccolo2"
 	| "hulusi-flute"
+	| "hulusi-flute1"
+	| "hulusi-flute2"
 	| "pan-flute"
 	| "pan-flute1"
 	| "pan-flute2"
@@ -46,6 +50,7 @@ export type IVocals =
 	| "pan-flute4"
 	| "ocarina"
 	| "ocarina1"
+	| "ocarina2"
 	| "melodica";
 
 /** 映射声部ID */
@@ -296,6 +301,18 @@ export const getFingeringConfig = async (type: IVocals | undefined): Promise<ITy
 				json: piccolo.default,
 				relationship: relationships.piccolo,
 			};
+		case "piccolo1":
+			const piccolo1 = await import(`./fingering-img/piccolo1/index.json`);
+			return {
+				json: piccolo1.default,
+				relationship: relationships.piccolo,
+			};
+		case "piccolo2":
+			const piccolo2 = await import(`./fingering-img/piccolo2/index.json`);
+			return {
+				json: piccolo2.default,
+				relationship: relationships.piccolo,
+			};
 		case "up-bass-horn":
 			const upBassHorn = await import(`./fingering-img/up-bass-horn/index.json`);
 			return {
@@ -336,6 +353,28 @@ export const getFingeringConfig = async (type: IVocals | undefined): Promise<ITy
 					marginRight: ".7rem",
 				},
 			};
+		case "hulusi-flute1":
+			const hulusi1 = await import(`./fingering-img/hulusi-flute1/index.json`);
+			return {
+				json: hulusi1.default,
+				relationship: relationships.hulusi,
+				// width: '180px',
+				styles: {
+					marginLeft: ".6rem",
+					marginRight: ".7rem",
+				},
+			};
+		case "hulusi-flute2":
+			const hulusi2 = await import(`./fingering-img/hulusi-flute2/index.json`);
+			return {
+				json: hulusi2.default,
+				relationship: relationships.hulusi,
+				// width: '180px',
+				styles: {
+					marginLeft: ".6rem",
+					marginRight: ".7rem",
+				},
+			};
 		case "pan-flute":
 			const pan = await import(`./fingering-img/pan-flute/index.json`);
 			return {
@@ -354,18 +393,6 @@ export const getFingeringConfig = async (type: IVocals | undefined): Promise<ITy
 				json: pan2.default,
 				relationship: relationships.pan,
 			};
-		case "pan-flute3":
-			const pan3 = await import(`./fingering-img/pan-flute3/index.json`);
-			return {
-				json: pan3.default,
-				relationship: relationships.pan,
-			};
-		case "pan-flute4":
-			const pan4 = await import(`./fingering-img/pan-flute4/index.json`);
-			return {
-				json: pan4.default,
-				relationship: relationships.pan,
-			};
 		case "ocarina":
 			const ocarina = await import(`./fingering-img/ocarina/index.json`);
 			return {
@@ -386,6 +413,16 @@ export const getFingeringConfig = async (type: IVocals | undefined): Promise<ITy
 					marginTop: "auto",
 				},
 			};
+		case "ocarina2":
+			const ocarina2 = await import(`./fingering-img/ocarina2/index.json`);
+			return {
+				json: ocarina2.default,
+				relationship: relationships.ocarina,
+				width: "180px",
+				styles: {
+					marginTop: "auto",
+				},
+			};
 		case "melodica":
 			const melodica = await import(`./fingering-img/melodica/index.json`);
 			return {