|
@@ -92,6 +92,7 @@ export default defineComponent({
|
|
fingeringMode: query.type || ("scaleMode" as "fingeringMode" | "listenMode" | "scaleMode"), // 模式
|
|
fingeringMode: query.type || ("scaleMode" as "fingeringMode" | "listenMode" | "scaleMode"), // 模式
|
|
noteType: "all" as "#c" | "all", // 音调
|
|
noteType: "all" as "#c" | "all", // 音调
|
|
loadingDom: false, // 切换乐器时需要重置
|
|
loadingDom: false, // 切换乐器时需要重置
|
|
|
|
+ loadingImg: false, // 切换模式,加载图片
|
|
});
|
|
});
|
|
const fingerData = reactive({
|
|
const fingerData = reactive({
|
|
relationshipIndex: 0,
|
|
relationshipIndex: 0,
|
|
@@ -215,6 +216,7 @@ export default defineComponent({
|
|
//
|
|
//
|
|
if (playAction.listenLock) return;
|
|
if (playAction.listenLock) return;
|
|
if (playAction.showAnswerLoading) return;
|
|
if (playAction.showAnswerLoading) return;
|
|
|
|
+ data.loadingImg = true
|
|
if (data.fingeringMode === "scaleMode") {
|
|
if (data.fingeringMode === "scaleMode") {
|
|
if (["pan-flute", "ocarina"].includes(data.subject)) {
|
|
if (["pan-flute", "ocarina"].includes(data.subject)) {
|
|
data.viewIndex = 1;
|
|
data.viewIndex = 1;
|
|
@@ -277,6 +279,7 @@ export default defineComponent({
|
|
}
|
|
}
|
|
|
|
|
|
data.loadingDom = false;
|
|
data.loadingDom = false;
|
|
|
|
+ data.loadingImg = false;
|
|
};
|
|
};
|
|
|
|
|
|
// 获取声部
|
|
// 获取声部
|
|
@@ -385,12 +388,21 @@ export default defineComponent({
|
|
api_back();
|
|
api_back();
|
|
};
|
|
};
|
|
|
|
|
|
|
|
+ // 排箫,默认0.9显示
|
|
|
|
+ const setDefaultScale = () => {
|
|
|
|
+ if (data.subject === "pan-flute") {
|
|
|
|
+ data.transform.scale = 0.9
|
|
|
|
+ data.transform.startScale = 0.9
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
loadElement();
|
|
loadElement();
|
|
api_setStatusBarVisibility();
|
|
api_setStatusBarVisibility();
|
|
});
|
|
});
|
|
const loadElement = () => {
|
|
const loadElement = () => {
|
|
const fingeringContainer = document.getElementById("fingeringContainer");
|
|
const fingeringContainer = document.getElementById("fingeringContainer");
|
|
|
|
+ setDefaultScale()
|
|
// console.log("🚀 ~ fingeringContainer:", fingeringContainer);
|
|
// console.log("🚀 ~ fingeringContainer:", fingeringContainer);
|
|
const mc = new Hammer.Manager(fingeringContainer as HTMLElement);
|
|
const mc = new Hammer.Manager(fingeringContainer as HTMLElement);
|
|
mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
|
|
mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
|
|
@@ -425,10 +437,10 @@ export default defineComponent({
|
|
const resetElement = () => {
|
|
const resetElement = () => {
|
|
data.transform.transition = "all 0.3s";
|
|
data.transform.transition = "all 0.3s";
|
|
nextTick(() => {
|
|
nextTick(() => {
|
|
- data.transform.scale = 1;
|
|
|
|
|
|
+ data.transform.scale = data.subject === "pan-flute" ? 0.9 : 1;
|
|
data.transform.x = 0;
|
|
data.transform.x = 0;
|
|
data.transform.y = 0;
|
|
data.transform.y = 0;
|
|
- data.transform.startScale = 1;
|
|
|
|
|
|
+ data.transform.startScale = data.subject === "pan-flute" ? 0.9 : 1;
|
|
data.transform.startX = 0;
|
|
data.transform.startX = 0;
|
|
data.transform.startY = 0;
|
|
data.transform.startY = 0;
|
|
});
|
|
});
|
|
@@ -983,7 +995,9 @@ export default defineComponent({
|
|
class={[styles.fingeringContainer]}
|
|
class={[styles.fingeringContainer]}
|
|
>
|
|
>
|
|
<div class={styles.imgs}>
|
|
<div class={styles.imgs}>
|
|
- <img src={data.fingeringMode === "scaleMode" ? fingerData.subject?.json?.full : fingerData.subject?.json?.full1} />
|
|
|
|
|
|
+ {
|
|
|
|
+ !data.loadingImg && <img src={data.fingeringMode === "scaleMode" ? fingerData.subject?.json?.full : fingerData.subject?.json?.full1} />
|
|
|
|
+ }
|
|
{rs.map((key: number | string, index: number) => {
|
|
{rs.map((key: number | string, index: number) => {
|
|
const nk: string = typeof key === "string" ? key.replace("active-", "") : String(key);
|
|
const nk: string = typeof key === "string" ? key.replace("active-", "") : String(key);
|
|
return <img data-index={nk} src={fingerData.subject?.json?.[nk]} />;
|
|
return <img data-index={nk} src={fingerData.subject?.json?.[nk]} />;
|