|
@@ -1,4 +1,4 @@
|
|
|
-import { Transition, computed, defineComponent, onMounted, onUnmounted, reactive, ref, watch, toRef, ComputedRef } from "vue";
|
|
|
+import { Transition, computed, defineComponent, onMounted, onUnmounted, reactive, ref, watch, toRef, ComputedRef, nextTick } from "vue";
|
|
|
import styles from "./index.module.less";
|
|
|
|
|
|
import iconBack from "./image/icon-back.png";
|
|
@@ -494,7 +494,10 @@ export default defineComponent({
|
|
|
/** 作业模式 end */
|
|
|
if (state.defaultModeType == 1) {
|
|
|
headTopData.handleChangeModeType("practise");
|
|
|
- if (state.platform === IPlatform.PC || state.isPreView) {
|
|
|
+ // if (state.platform === IPlatform.PC || state.isPreView) {
|
|
|
+ // headTopData.showBack = false;
|
|
|
+ // }
|
|
|
+ if (state.isPreView) {
|
|
|
headTopData.showBack = false;
|
|
|
}
|
|
|
} else {
|
|
@@ -555,7 +558,16 @@ export default defineComponent({
|
|
|
onUnmounted(() => {
|
|
|
window.removeEventListener("message", changePlay);
|
|
|
});
|
|
|
-
|
|
|
+ const noticeBarWidth = ref<number>()
|
|
|
+ watch(()=>smoothAnimationState.isShow.value, ()=>{
|
|
|
+ // NoticeBar能不能滚动
|
|
|
+ if(smoothAnimationState.isShow.value && isMusicList.value){
|
|
|
+ nextTick(()=>{
|
|
|
+ const widthCon = (document.querySelector("#noticeBarRollDom .van-notice-bar__content") as any)?.offsetWidth || undefined
|
|
|
+ noticeBarWidth.value = widthCon
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },{ immediate: true })
|
|
|
// 设置改变触发
|
|
|
watch(state.setting, () => {
|
|
|
console.log(state.setting, "state.setting");
|
|
@@ -607,10 +619,17 @@ export default defineComponent({
|
|
|
>
|
|
|
{/* 返回和标题 */}
|
|
|
{!(state.playState == "play" || followData.start || evaluatingData.startBegin) && (
|
|
|
- <div class={styles.headTopLeftBox}>
|
|
|
+ <div id="noticeBarRollDom" class={styles.headTopLeftBox}>
|
|
|
<img src={iconBack} class={["headTopBackBtn", styles.img, !headTopData.showBack && styles.hidenBack]} onClick={handleBack} />
|
|
|
{smoothAnimationState.isShow.value ? (
|
|
|
<div
|
|
|
+ style={
|
|
|
+ noticeBarWidth.value
|
|
|
+ ? {
|
|
|
+ "--noticeBarWidth": noticeBarWidth.value + "px",
|
|
|
+ }
|
|
|
+ : {}
|
|
|
+ }
|
|
|
class={[styles.title, isMusicList.value && styles.isMusicList, "driver-8"]}
|
|
|
onClick={() => {
|
|
|
isMusicList.value && (musicListShow.value = true);
|
|
@@ -631,8 +650,8 @@ export default defineComponent({
|
|
|
)}
|
|
|
</div>
|
|
|
)}
|
|
|
- {/* 模式切换 */}
|
|
|
|
|
|
+ {/* 模式切换 */}
|
|
|
<div
|
|
|
id={state.platform === IPlatform.PC ? "teacherTop-0" : "studnetT-0"}
|
|
|
style={{ display: toggleBtn.value.display ? "" : "none" }}
|
|
@@ -689,7 +708,7 @@ export default defineComponent({
|
|
|
) : null} */}
|
|
|
<div
|
|
|
style={{ display: playTypeBtn.value.display ? "" : "none" }}
|
|
|
- class={["driver-2", styles.btn, playTypeBtn.value.disabled && styles.disabled]}
|
|
|
+ class={["driver-2", styles.btn, playTypeBtn.value.disabled && styles.disabled, styles.playType]}
|
|
|
onClick={() => {
|
|
|
const oldPlayType = state.playType;
|
|
|
const oldPlaySource = state.playSource;
|
|
@@ -735,7 +754,7 @@ export default defineComponent({
|
|
|
<div
|
|
|
id={state.platform === IPlatform.PC ? "teacherTop-1" : "studnetT-1"}
|
|
|
style={{ display: originBtn.value.display ? "" : "none" }}
|
|
|
- class={["driver-3", styles.btn, originBtn.value.disabled && styles.disabled]}
|
|
|
+ class={["driver-3", styles.btn, originBtn.value.disabled && styles.disabled, state.playType === "play" ? styles.playSource : styles.songSource]}
|
|
|
onClick={() => {
|
|
|
const oldPlayType = state.playType;
|
|
|
const oldPlaySource = state.playSource;
|
|
@@ -763,7 +782,12 @@ export default defineComponent({
|
|
|
<img style={{ display: state.playSource === "mingSong" ? "" : "none" }} class={styles.iconBtn} src={headImg(`mingsong.png`)} />
|
|
|
<span>{state.playSource === "music" ? (state.playType === "play" ? "原声" : "范唱") : state.playSource === "background" ? (state.playType === "play" ? "伴奏" : "伴唱") : "唱名"}</span>
|
|
|
</div>
|
|
|
- <div id={state.platform === IPlatform.PC ? "teacherTop-2" : "studnetT-2"} style={{ display: selectBtn.value.display ? "" : "none" }} class={["driver-4", styles.btn, selectBtn.value.disabled && styles.disabled]} onClick={() => handleChangeSection()}>
|
|
|
+ <div
|
|
|
+ id={state.platform === IPlatform.PC ? "teacherTop-2" : "studnetT-2"}
|
|
|
+ style={{ display: selectBtn.value.display ? "" : "none" }}
|
|
|
+ class={["driver-4", styles.btn, selectBtn.value.disabled && styles.disabled, styles.section, state.sectionStatus && styles.isSection]}
|
|
|
+ onClick={() => handleChangeSection()}
|
|
|
+ >
|
|
|
<img style={{ display: state.section.length === 0 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section0.png`)} />
|
|
|
<img style={{ display: state.section.length === 1 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section1.png`)} />
|
|
|
<img style={{ display: state.section.length === 2 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section2.png`)} />
|
|
@@ -773,7 +797,7 @@ export default defineComponent({
|
|
|
<>
|
|
|
<div
|
|
|
style={{ display: metronomeBtn.value.display ? "" : "none" }}
|
|
|
- class={["driver-5", styles.btn, styles.metronomeBtn, metronomeBtn.value.disabled && styles.disabled]}
|
|
|
+ class={["driver-5", styles.btn, styles.metronomeBtn, metronomeBtn.value.disabled && styles.disabled, headData.speedShow && styles.isSpeed, styles.speed]}
|
|
|
onClick={async () => {
|
|
|
headData.speedShow = !headData.speedShow;
|
|
|
}}
|
|
@@ -817,7 +841,7 @@ export default defineComponent({
|
|
|
) : null} */}
|
|
|
{state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert && (
|
|
|
<div
|
|
|
- class={[styles.btn, state.playState === "play" && fingeringBtn.value.disabled && styles.disabled, "driver-10"]}
|
|
|
+ class={[styles.btn, state.playState === "play" && fingeringBtn.value.disabled && styles.disabled, toggleMusicSheet.show && styles.isMusicSheet, styles.musicSheet, "driver-10"]}
|
|
|
onClick={() => {
|
|
|
toggleMusicSheet.toggle(true);
|
|
|
}}
|
|
@@ -826,7 +850,12 @@ export default defineComponent({
|
|
|
<span>声部</span>
|
|
|
</div>
|
|
|
)}
|
|
|
- <div id={state.platform === IPlatform.PC ? "teacherTop-6" : "studnetT-6"} style={{ display: settingBtn.value.display ? "" : "none" }} class={["driver-6", styles.btn, settingBtn.value.disabled && styles.disabled]} onClick={() => (headTopData.settingMode = true)}>
|
|
|
+ <div
|
|
|
+ id={state.platform === IPlatform.PC ? "teacherTop-6" : "studnetT-6"}
|
|
|
+ style={{ display: settingBtn.value.display ? "" : "none" }}
|
|
|
+ class={["driver-6", styles.btn, settingBtn.value.disabled && styles.disabled, headTopData.settingMode && styles.isSettingMode, styles.settingMode]}
|
|
|
+ onClick={() => (headTopData.settingMode = true)}
|
|
|
+ >
|
|
|
<img class={styles.iconBtn} src={headImg("icon_menu.png")} />
|
|
|
<span>设置</span>
|
|
|
</div>
|
|
@@ -883,9 +912,9 @@ export default defineComponent({
|
|
|
subjectStatus: state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert,
|
|
|
modelTypeStatus: toggleBtn.value.display,
|
|
|
playType: playTypeBtn.value.display,
|
|
|
- originPlayType: state.playType === 'play' ? true : false,
|
|
|
+ originPlayType: state.playType === "play" ? true : false,
|
|
|
backTitle: !(state.playState == "play" || followData.start || evaluatingData.startBegin),
|
|
|
- titleType: smoothAnimationState.isShow.value ? "TEXT" : isMusicList.value ? 'IMG' : 'NONE'
|
|
|
+ titleType: smoothAnimationState.isShow.value ? "TEXT" : isMusicList.value ? "IMG" : "NONE",
|
|
|
}}
|
|
|
/>
|
|
|
)}
|