管乐团引导

src/page-gym/custom-plugins/guide-page/steps/zero-step.tsx

@@ -40,7 +40,6 @@ export default defineComponent({
 		};
 	},
 	mounted() {
-    this.audio.muted = true
 		this.audio.addEventListener("play", this.play, false);
 		this.audio.addEventListener("pause", this.stop, false);
 		this.audio.addEventListener("ended", this.stop, false);
@@ -77,7 +76,7 @@ export default defineComponent({
 	render() {
 		return (
 			<div>
-        <audio src={mp3s[`../mp3/${IDSteps[this.step]}.mp3`].default} autoplay></audio>
+				<audio src={mp3s[`../mp3/${IDSteps[this.step]}.mp3`].default} autoplay></audio>
 				<div style={this.box} class={styles.box}></div>
 				<div class={styles.messagebox}>
 					{/* @ts-ignore */}

src/page-orchestra/custom-plugins/guide-page/images/index.ts

@@ -1,5 +1,6 @@
-const modules = (import.meta as any).globEager(`../images/**`)
-export const getImage = (name: string) => {
-    // console.log("🚀 ~ modules", modules[`../images/${name}`]?.default)
-    return modules[`../images/${name}`]?.default || ''
+const modules = import.meta.glob('../images/**',  { import: "default", eager: true })
+export const getImage = (name: string): string => {
+    // console.log("🚀 ~ modules", modules[`./${name}`])
+    const src: any = modules[`./${name}`] || ''
+    return src
 }

src/page-orchestra/custom-plugins/guide-page/index.module.less

@@ -1,75 +1,102 @@
+.guidePopup {
+  z-index: 5000 !important;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  transform: none;
+  width: 100vw;
+  height: 100vh;
+  max-width: 100vw;
+  margin: 0;
+  overflow: hidden;
+}
+
 .tipsContainer {
-  background: transparent;
+  position: relative;
   width: 100vw;
   height: 100vh;
-  margin-left: 0;
+  overflow: hidden;
 }
+
 .backBtn {
   position: absolute;
-  left: 24px;
-  top: 12px;
-  padding: 4px 10px;
+  left: 32px;
+  top: 17px;
+  font-size: 13px;
+  padding: 5px 12px;
   border-radius: 20px;
   border: 1px solid #ffffff;
-  font-size: 6px;
   color: #fff;
   text-align: center;
+  z-index: 1;
+
   &:active {
     opacity: 0.8;
   }
 }
+
 .content {
   position: relative;
   width: 100%;
   height: 100%;
 }
 
-.parent {
-  position: absolute;
-  padding: 4px;
-  background: rgba(248, 249, 237, 1);
-  border-radius: 20px;
-  animation: myscale 1.5s infinite;
-  img {
-    width: 100%;
-    height: 100%;
-  }
+.box {
+  position: fixed;
+  box-shadow: rgba(33, 33, 33, 0.8) 0px 0px 0px 5000px;
+  transition: all .25s;
+  transform: scale(1.3);
+  border-radius: 8px;
 }
+
 .item {
   position: absolute;
-  width: 128px;
+  width: 200px;
   z-index: 10;
+
   .img {
     position: absolute;
     width: 100%;
   }
+
   .iconHead {
     position: absolute;
-    left: 30px;
-    width: 15px;
-    height: 21px;
+    left: 45px;
+    width: 26px;
+    height: 35px;
+    &.head2{
+      left: 0.2rem;
+      top: 0.9rem;
+    }
   }
+
   .btns {
     position: absolute;
     display: flex;
     width: 100%;
     padding: 0 12px;
+
     .btn {
-      width: 51px;
-      height: 16px;
-      line-height: 16px;
+      width: 73px;
+      height: 23px;
+      line-height: 13px;
+      font-size: 9px;
       padding: 0;
     }
   }
 }
+
 @keyframes myscale {
   0% {
     transform: scale(0.9);
   }
+
   50% {
     transform: scale(1);
   }
+
   100% {
     transform: scale(0.9);
   }
-}
+}

src/page-orchestra/custom-plugins/guide-page/index.tsx

@@ -1,67 +1,78 @@
-import { Button, Popup } from 'vant'
-import {} from 'vant'
-import { defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue'
-import styles from './index.module.less'
-import Tip1 from './tip1'
-import Tip2 from './tip2'
-import { modelType } from '../buttons'
-import { useOriginSearch } from '../uses'
+import { Button, Popup } from "vant";
+import {} from "vant";
+import { defineComponent, nextTick, onMounted, reactive, ref, watch } from "vue";
+import styles from "./index.module.less";
+import Tip1 from "./tip1";
+import Tip2 from "./tip2";
+import state from "/src/state";
+import { getQuery } from "/src/utils/queryString";
+import { headData } from "../../header-top";
 
 export default defineComponent({
-  name: 'tips-step',
-  setup(props, ctx) {
-    const tipShow = ref(false)
-    const guide = reactive({
-      tipStep: 1,
-      tip1: false,
-      tip2: false,
-    })
-    watch(modelType, () => {
-      if (modelType.value !== 'practice') return
-      handleChange()
-    })
-    const setLocalData = (key: string) => {
-      localStorage.setItem(key, 'ok')
-    }
-    /** 触发器 */
-    const handleChange = () => {
-      const search = useOriginSearch()
-      // 如果为课后作业 和 单元测验 不引导
-      if (search.questionId || search.lessonTrainingId) {
-        return
-      }
-      const isFirstTip = localStorage.getItem('isFirstTip')
-      const isFirstModel = localStorage.getItem('isFirstModel')
-      if (modelType.value == 'init' && !isFirstTip) {
-        tipShow.value = true
-        guide.tipStep = 1
-      } else if (modelType.value == 'practice' && !isFirstModel) {
-        tipShow.value = true
-        guide.tipStep = 2
-      }
-    }
-    onMounted(() => {
-      handleChange()
-    })
-    return () => (
-      <Popup teleport="body" closeOnClickOverlay={false} class={styles.tipsContainer} v-model:show={tipShow.value}>
-        {guide.tipStep == 1 && (
-          <Tip1
-            onHanldeStop={() => {
-              tipShow.value = false
-              setLocalData('isFirstTip')
-            }}
-          />
-        )}
-        {guide.tipStep == 2 && (
-          <Tip2
-            onHanldeStop={() => {
-              tipShow.value = false
-              setLocalData('isFirstModel')
-            }}
-          />
-        )}
-      </Popup>
-    )
-  },
-})
+	name: "tips-step",
+	setup(props, ctx) {
+		const guideData = reactive({
+			tip1: false,
+			tip2: false,
+		});
+		const tipShow = ref(false);
+		watch(
+			() => headData.modeMode,
+			() => {
+				if (!headData.modeMode) {
+					handleChange();
+				}
+			}
+		);
+		const setLocalData = (key: string) => {
+			localStorage.setItem(key, "ok");
+		};
+		/** 触发器 */
+		const handleChange = () => {
+			const search = getQuery();
+			// 如果为课后作业 和 单元测验 不引导
+			if (search.questionId || search.lessonTrainingId) {
+				return;
+			}
+			guideData.tip1 = !localStorage.getItem("isFirstTip");
+			if (guideData.tip1) {
+				guideData.tip1 = true;
+				guideData.tip2 = false;
+				tipShow.value = true;
+				return;
+			}
+			guideData.tip2 = !localStorage.getItem("isFirstModel");
+			// console.log("🚀 ~ guideData.tip2:", guideData.tip2);
+			if (guideData.tip2 && !headData.modeMode) {
+				guideData.tip1 = false;
+				guideData.tip2 = true;
+				tipShow.value = true;
+			}
+		};
+		onMounted(() => {
+			handleChange();
+		});
+		return () => (
+			<Popup teleport="body" overlay={false} closeOnClickOverlay={false} class={["popup-custom", styles.guidePopup]} v-model:show={tipShow.value}>
+				{guideData.tip1 && (
+					<Tip1
+						key="tip1"
+						onClose={() => {
+							tipShow.value = false;
+							setLocalData("isFirstTip");
+						}}
+					/>
+				)}
+				{guideData.tip2 && (
+					<Tip2
+						key="tip2"
+						onClose={() => {
+							tipShow.value = false;
+							setLocalData("isFirstModel");
+						}}
+					/>
+				)}
+			</Popup>
+		);
+	},
+});

src/page-orchestra/custom-plugins/guide-page/tip1.tsx

@@ -1,152 +1,146 @@
-import { Button } from 'vant'
-import {} from 'vant'
-import { defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue'
-import styles from './index.module.less'
-import { getImage } from './images'
+import { Button } from "vant";
+import {} from "vant";
+import { defineComponent, nextTick, onMounted, reactive, ref, watch } from "vue";
+import styles from "./index.module.less";
+import { getImage } from "./images";
 
 export default defineComponent({
-  name: 'tips-tip1',
-  emits: ['hanldeStop'],
-  setup(props, { emit }) {
-    const contentRef = ref<HTMLElement>()
-    const data = reactive({
-      show: false,
-      steps: [
-        {
-          ele: '',
-          eleRect: {} as DOMRect,
-          img: getImage('step0.png'),
-          btnsStyle: {
-            top: '-2.13333rem',
-          },
-          handStyle: {
-            top: '-0.42667rem',
-          },
-          imgStyle: {
-            top: '-2.4rem',
-          },
-        },
-        {
-          ele: '',
-          img: getImage('step1.png'),
-          btnsStyle: {
-            top: '-2.2rem',
-          },
-          handStyle: {
-            top: '-0.42667rem',
-          },
-          imgStyle: {
-            top: '-2.4rem',
-          },
-        },
-        {
-          ele: '',
-          img: getImage('step2.png'),
-          btnsStyle: {
-            top: '-0.7rem',
-            left: '-2.5rem',
-            'justify-content': 'space-evenly',
-            padding: 0,
-          },
-          handStyle: {
-            top: '-0.42667rem',
-          },
-          imgStyle: {
-            top: '-2.7rem',
-            left: '-2.3rem',
-          },
-        },
-      ],
-      step: 0,
-    })
+	name: "tips-tip1",
+	emits: ["close"],
+	setup(props, { emit }) {
+		const data = reactive({
+			box: {},
+			show: false,
+			steps: [
+				{
+					ele: "",
+					eleRect: {} as DOMRect,
+					img: getImage("step0.png"),
+					handStyle: {
+						top: "-0.6rem",
+					},
+					imgStyle: {
+						top: "-3.6rem",
+					},
+					btnsStyle: {
+						top: "-3rem",
+					},
+				},
+				{
+					ele: "",
+					img: getImage("step1.png"),
+					handStyle: {
+						top: "-0.6rem",
+					},
+					imgStyle: {
+						top: "-3.6rem",
+					},
+					btnsStyle: {
+						top: "-3.3rem",
+					},
+				},
+				{
+					ele: "",
+					img: getImage("step2.png"),
+					handStyle: {
+						left: "2rem",
+						top: "-0.6rem",
+					},
+					imgStyle: {
+						top: "-4rem",
+						left: "-3rem",
+					},
+					btnsStyle: {
+						top: "-0.85rem",
+						left: "-3.2rem",
+						"justify-content": "space-evenly",
+						padding: 0,
+					},
+				},
+			],
+			step: 0,
+		});
+		console.log(data.steps);
 
-    const getStepELe = () => {
-      for (let i = 0; i < data.steps.length; i++) {
-        const ele: HTMLElement = document.querySelector(`[data-step='step${i}']`)!
-        if (ele) {
-          const eleNode: any = ele.cloneNode(true)
-          const eleRect = ele.getBoundingClientRect()
-          const parentElement = document.createElement('div')
-          parentElement.classList.add(styles.parent)
-          parentElement.style.left = eleRect?.left - 10 + 'px'
-          parentElement.style.top = eleRect?.top - 10 + 'px'
-          parentElement.style.width = eleRect?.width + 20 + 'px'
-          parentElement.style.height = eleRect?.height + 20 + 'px'
-          parentElement.appendChild(eleNode)
-          data.steps[i].ele = parentElement.outerHTML
-          data.steps[i].eleRect = eleRect
-        }
-      }
-      // console.log(data.steps)
-    }
-    onMounted(() => {
-      getStepELe()
-    })
+		const getStepELe = () => {
+			const ele: HTMLElement = document.getElementById(`modeType-${data.step}`)!;
+			if (ele) {
+				const eleRect = ele.getBoundingClientRect();
+				// console.log("🚀 ~ eleRect:", ele.offsetHeight, eleRect);
+				data.box = {
+					left: eleRect.x + "px",
+					top: eleRect.y + "px",
+					width: eleRect.width + "px",
+					height: eleRect.height + "px",
+				};
+			}
+		};
+		onMounted(() => {
+			getStepELe();
+		});
 
-    const handleNext = (step?: number) => {
-      if (step !== undefined) {
-        data.step = step
-      } else {
-        if (data.step + 1 >= data.steps.length) {
-          handleStop()
-          return
-        }
-        data.step += 1
-      }
-    }
-    const handleStop = () => {
-      emit('hanldeStop')
-    }
-    return () => (
-      <div class={styles.content} ref={contentRef} onClick={() => handleNext()}>
-        <div
-          class={styles.backBtn}
-          onClick={(e: Event) => {
-            e.stopPropagation()
-            handleStop()
-          }}
-        >
-          跳过引导
-        </div>
-        {data.steps.map((item: any, index) => (
-          <div style={{ display: index === data.step ? 'block' : 'none' }} onClick={(e: Event) => e.stopPropagation()}>
-            <div
-              class={styles.item}
-              style={{
-                left: `${item.eleRect?.left}px`,
-                top: `${item.eleRect?.top}px`,
-              }}
-            >
-              <img class={styles.img} style={item.imgStyle} src={item.img} />
-              <img class={styles.iconHead} style={item.handStyle} src={getImage('icon-header.png')} />
-              <div class={styles.btns} style={item.btnsStyle}>
-                {data.step + 1 == data.steps.length ? (
-                  <>
-                    <Button
-                      class={styles.btn}
-                      round
-                      color="transparent"
-                      style={{ 'border-color': '#fff' }}
-                      type="primary"
-                      onClick={() => handleNext(0)}
-                    >
-                      再看一遍
-                    </Button>
-                    <Button class={styles.btn} round type="primary" onClick={() => handleStop()}>
-                      完成
-                    </Button>
-                  </>
-                ) : (
-                  <Button class={styles.btn} round type="primary" onClick={() => handleNext()}>
-                    下一步 ({data.step + 1}/{data.steps.length})
-                  </Button>
-                )}
-              </div>
-            </div>
-            <div innerHTML={item.ele}></div>
-          </div>
-        ))}
-      </div>
-    )
-  },
-})
+		const handleNext = () => {
+			if (data.step >= 2) {
+				emit("close");
+				return;
+			}
+			data.step = data.step + 1;
+			getStepELe();
+		};
+		return () => (
+			<div class={styles.content} onClick={() => handleNext()}>
+				<div
+					class={styles.backBtn}
+					onClick={(e: Event) => {
+						e.stopPropagation();
+						emit("close");
+					}}
+				>
+					跳过引导
+				</div>
+				<div class={styles.box} style={data.box}>
+					{data.steps.map((item: any, index) => (
+						<div
+							onClick={(e: Event) => e.stopPropagation()}
+							class={styles.item}
+							style={{
+								display: index === data.step ? "" : "none",
+								left: `${item.eleRect?.left}px`,
+								top: `${item.eleRect?.top}px`,
+							}}
+						>
+							<img class={styles.img} style={item.imgStyle} src={item.img} />
+							<img class={styles.iconHead} style={item.handStyle} src={getImage("icon-header.png")} />
+							<div class={styles.btns} style={item.btnsStyle}>
+								{data.step + 1 == data.steps.length ? (
+									<>
+										<Button
+											class={styles.btn}
+											round
+											color="transparent"
+											style={{ "border-color": "#fff" }}
+											type="primary"
+											onClick={() => {
+												data.step = 0;
+												getStepELe();
+											}}
+										>
+											再看一遍
+										</Button>
+										<Button class={styles.btn} round type="primary" onClick={() => emit("close")}>
+											完成
+										</Button>
+									</>
+								) : (
+									<Button class={styles.btn} round type="primary" onClick={() => handleNext()}>
+										下一步 ({data.step + 1}/{data.steps.length})
+									</Button>
+								)}
+							</div>
+						</div>
+					))}
+				</div>
+			</div>
+		);
+	},
+});

src/page-orchestra/custom-plugins/guide-page/tip2.tsx

@@ -1,199 +1,159 @@
-import { Button, Popup } from 'vant'
-import {} from 'vant'
-import { defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue'
-import styles from './index.module.less'
-import { getImage } from './images'
+import { Button, Popup } from "vant";
+import {} from "vant";
+import { defineComponent, nextTick, onMounted, reactive, ref, watch } from "vue";
+import styles from "./index.module.less";
+import { getImage } from "./images";
 
 export default defineComponent({
-  name: 'tips-tip1',
-  emits: ['hanldeStop'],
-  setup(props, { emit }) {
-    const contentRef = ref<HTMLElement>()
-    const data = reactive({
-      show: false,
-      step: 0,
-      steps: [
-        {
-          ele: '',
-          eleRect: {} as DOMRect,
-          img: getImage('m1.png'),
-          btnsStyle: {
-            top: '2.4rem',
-            left: '-0.1rem'
-          },
-          handStyle: {
-            top: '0.6rem',
-            left: '0.1rem',
-          },
-          imgStyle: {
-            top: '0.6rem',
-            left: '-0.2rem',
-          },
-        },
-        {
-          ele: '',
-          eleRect: {} as DOMRect,
-          img: getImage('m2.png'),
-          btnsStyle: {
-            top: '2.2rem',
-          },
-          handStyle: {
-            top: '0.6rem',
-            left: '0.1rem',
-          },
-          imgStyle: {
-            width: '2.6rem',
-            top: '0.6rem',
-            left: '-0.2rem',
-          },
-        },
-        {
-          img: getImage('m3.png'),
-          btnsStyle: {
-            top: '2.6rem',
-          },
-          handStyle: {
-            top: '0.6rem',
-            left: '0.1rem',
-          },
-          imgStyle: {
-            width: '2.45333rem',
-            top: '0.6rem',
-            left: '-0.2rem',
-          },
-        },
-        {
-          ele: '',
-          eleRect: {} as DOMRect,
-          img: getImage('m4.png'),
-          btnsStyle: {
-            top: '2.5rem',
-            left: '-1.5rem',
-          },
-          handStyle: {
-            top: '0.6rem',
-            left: '0.1rem',
-          },
-          imgStyle: {
-            width: '2.45333rem',
-            top: '0.6rem',
-            left: '-1.7rem',
-          },
-        },
-        {
-          ele: '',
-          eleRect: {} as DOMRect,
-          img: getImage('m5.png'),
-          btnsStyle: {
-            top: '2.2rem',
-            left: '-2rem',
-            width: '2.93333rem',
-            'justify-content': 'space-evenly',
-            padding: 0,
-          },
-          handStyle: {
-            top: '0.6rem',
-            left: '0.1rem',
-          },
-          imgStyle: {
-            top: '0.4rem',
-            left: '-2rem',
-            width: '2.93333rem',
-          },
-        },
-      ],
-    })
-    const getStepELe = () => {
-      for (let i = 0; i < data.steps.length; i++) {
-        const ele: HTMLElement = document.querySelector(`[data-step='m${i}']`)!
-        if (ele) {
-          const eleNode: any = ele.cloneNode(true)
-          const eleRect = ele.getBoundingClientRect()
-          const parentElement = document.createElement('div')
-          parentElement.classList.add(styles.parent)
-          parentElement.style.left = eleRect?.left - 10 + 'px'
-          parentElement.style.top = '0'
-          parentElement.style.borderRadius = '0.1rem'
-          parentElement.appendChild(eleNode)
-          data.steps[i].ele = parentElement.outerHTML
-          data.steps[i].eleRect = eleRect
-        }
-      }
-    }
-    onMounted(() => {
-      getStepELe()
-    })
+	name: "tips-tip1",
+	emits: ["close"],
+	setup(props, { emit }) {
+		const data = reactive({
+			box: {},
+			show: false,
+			step: 0,
+			steps: [
+				{
+					img: getImage("m1.png"),
+					imgStyle: {
+						width: "3.2rem",
+						top: "0.9rem",
+						left: "-0.2rem",
+					},
+					btnsStyle: {
+						top: "3.6rem",
+						left: "0.1rem",
+					},
+				},
+				{
+					img: getImage("m2.png"),
+					imgStyle: {
+						width: "3.5rem",
+						top: "1rem",
+						left: "-0.2rem",
+					},
+					btnsStyle: {
+						top: "3.2rem",
+					},
+				},
+				{
+					img: getImage("m3.png"),
+					imgStyle: {
+						width: "4rem",
+						top: "0.9rem",
+						left: "-0.7rem",
+					},
+					btnsStyle: {
+						top: "4.1rem",
+					},
+				},
+				{
+					img: getImage("m4.png"),
+					imgStyle: {
+						width: "3.7rem",
+						top: "1rem",
+						left: "-2.4rem",
+					},
+					btnsStyle: {
+						top: "3.9rem",
+						left: "-1.8rem",
+					},
+				},
+				{
+					img: getImage("m5.png"),
+					imgStyle: {
+						width: "4rem",
+						top: "0.9rem",
+						left: "-2.5rem",
+					},
+					btnsStyle: {
+						top: "3.5rem",
+						left: "-2.7rem",
+						width: "4.5rem",
+						"justify-content": "space-evenly",
+						padding: 0,
+					},
+				},
+			],
+		});
+		const getStepELe = () => {
+			const ele: HTMLElement = document.getElementById(`tips-step-${data.step}`)!;
+			if (ele) {
+				const eleRect = ele.getBoundingClientRect();
+				// console.log("🚀 ~ eleRect:", ele, eleRect);
+				data.box = {
+					left: eleRect.x + "px",
+					top: eleRect.y + "px",
+					width: eleRect.width + "px",
+					height: eleRect.height + "px",
+				};
+			}
+		};
+		onMounted(() => {
+			getStepELe();
+		});
 
-    const handleNext = (step?: number) => {
-      if (step !== undefined) {
-        data.step = step
-      } else {
-        if (data.step + 1 >= data.steps.length) {
-          handleStop()
-          return
-        }
-        data.step += 1
-      }
-    }
-    const handleStop = () => {
-      emit('hanldeStop')
-    }
-    return () => {
-      return (
-        <div class={styles.content} ref={contentRef} onClick={() => handleNext()}>
-          <div
-            class={styles.backBtn}
-            onClick={(e: Event) => {
-              e.stopPropagation()
-              handleStop()
-            }}
-          >
-            跳过引导
-          </div>
-          {data.steps.map((item: any, index: number) => (
-            <div
-              style={{ display: index === data.step ? 'block' : 'none' }}
-              onClick={(e: Event) => e.stopPropagation()}
-            >
-              <div
-                onClick={(e: Event) => e.stopPropagation()}
-                class={styles.item}
-                style={{
-                  width: '2.18667rem',
-                  left: `${item.eleRect?.left}px`,
-                }}
-              >
-                <img class={styles.img} style={item.imgStyle} src={item.img} />
-                <img class={styles.iconHead} style={item.handStyle} src={getImage('icon-hand2.png')} />
-                <div class={styles.btns} style={item.btnsStyle}>
-                  {data.step + 1 == data.steps.length ? (
-                    <>
-                      <Button
-                        class={styles.btn}
-                        round
-                        color="transparent"
-                        style={{ 'border-color': '#fff' }}
-                        type="primary"
-                        onClick={() => handleNext(0)}
-                      >
-                        再看一遍
-                      </Button>
-                      <Button class={styles.btn} round type="primary" onClick={() => handleStop()}>
-                        完成
-                      </Button>
-                    </>
-                  ) : (
-                    <Button class={styles.btn} round type="primary" onClick={() => handleNext()}>
-                      下一步 ({data.step + 1}/{data.steps.length})
-                    </Button>
-                  )}
-                </div>
-              </div>
-              <div innerHTML={item.ele}></div>
-            </div>
-          ))}
-        </div>
-      )
-    }
-  },
-})
+		const handleNext = (step?: number) => {
+			if (data.step >= data.steps.length - 1) {
+				emit("close");
+				return;
+			}
+			data.step = data.step + 1;
+			getStepELe();
+		};
+		return () => (
+			<div class={styles.content} onClick={() => handleNext()}>
+				<div
+					class={styles.backBtn}
+					onClick={(e: Event) => {
+						e.stopPropagation();
+						emit("close");
+					}}
+				>
+					跳过引导
+				</div>
+				<div class={styles.box} style={data.box}>
+					{data.steps.map((item: any, index: number) => (
+						<div
+							onClick={(e: Event) => e.stopPropagation()}
+							class={styles.item}
+							style={{
+								display: index === data.step ? "" : "none",
+								left: `${item.eleRect?.left}px`,
+							}}
+						>
+							<img class={styles.img} style={item.imgStyle} src={item.img} />
+							<img class={[styles.iconHead, styles.head2]} style={item.handStyle} src={getImage("icon-hand2.png")} />
+							<div class={styles.btns} style={item.btnsStyle}>
+								{data.step + 1 == data.steps.length ? (
+									<>
+										<Button
+											class={styles.btn}
+											round
+											color="transparent"
+											style={{ "border-color": "#fff" }}
+											type="primary"
+											onClick={() => {
+												data.step = 0;
+												getStepELe();
+											}}
+										>
+											再看一遍
+										</Button>
+										<Button class={styles.btn} round type="primary" onClick={() => emit("close")}>
+											完成
+										</Button>
+									</>
+								) : (
+									<Button class={styles.btn} round type="primary" onClick={() => handleNext()}>
+										下一步 ({data.step + 1}/{data.steps.length})
+									</Button>
+								)}
+							</div>
+						</div>
+					))}
+				</div>
+			</div>
+		);
+	},
+});

src/page-orchestra/detail/index.tsx

@@ -25,6 +25,7 @@ import RecordingTime from "../custom-plugins/recording-time";
 import UnitTest from "../custom-plugins/unitTest";
 import CheckStudentVip from "../custom-plugins/check-student-vip";
 import AfterClassTraining from "../custom-plugins/after-class-training";
+import GuidePage from "../custom-plugins/guide-page";
 
 export default defineComponent({
 	name: "music-list",
@@ -278,6 +279,8 @@ export default defineComponent({
 							{storeData.platformType === "STUDENT" && <CheckStudentVip />}
 							{/* 后台课后训练小节选择 */}
 							{storeData.platformType === "WEB" && <AfterClassTraining />}
+							{/* 引导 */}
+							<GuidePage />
 						</>
 					)}
 				</div>

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

@@ -25,15 +25,15 @@ export const headData = reactive({
 
 /** 关闭模式选择 */
 export const handleCloseModeMode = (type = false) => {
-	headData.modeMode = type
-}
+	headData.modeMode = type;
+};
 
 export default defineComponent({
 	name: "header-top",
 	setup() {
 		const headerData = reactive({
 			settingMode: false,
-			fingeringDisplay: state.setting.displayFingering
+			fingeringDisplay: state.setting.displayFingering,
 		});
 		const headRef = ref();
 
@@ -73,21 +73,21 @@ export default defineComponent({
 
 		/** 返回 */
 		const handleBack = () => {
-			handleNoEndExit()
+			handleNoEndExit();
 			api_back();
 		};
 
 		onMounted(() => {
-			state.setting.displayFingering = false
-		})
+			state.setting.displayFingering = false;
+		});
 		onBeforeUnmount(() => {
-			state.setting.displayFingering = headerData.fingeringDisplay
-		})
+			state.setting.displayFingering = headerData.fingeringDisplay;
+		});
 
 		return () => (
 			<div ref={headRef} class={styles.headerTop}>
 				<div class={styles.back} onClick={handleBack}>
-					<img src={icons['icon-back']} />
+					<img src={icons["icon-back"]} />
 				</div>
 				<Title text={state.examSongName} rightView={false} />
 
@@ -105,8 +105,8 @@ export default defineComponent({
 					</div>
 
 					<div
+						id="tips-step-1"
 						class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]}
-						id="tips-step-6"
 						onClick={() => {
 							state.playSource = state.playSource === "music" ? "background" : "music";
 						}}
@@ -114,11 +114,12 @@ export default defineComponent({
 						<img class={styles.iconBtn} src={state.playSource === "music" ? icons.music : icons.accompaniment} />
 						<span>{state.playSource === "music" ? "原声" : "伴奏"}</span>
 					</div>
-					<div class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]} id="tips-step-3" onClick={() => handleChangeSection()}>
+					<div id="tips-step-2" class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]} onClick={() => handleChangeSection()}>
 						<img class={styles.iconBtn} src={state.section.length === 0 ? icons.section : state.section.length === 1 ? icons.section1 : icons.section2} />
 						<span>选段</span>
 					</div>
 					<div
+						id="tips-step-3"
 						style={{ display: fingeringDisplay.value ? "" : "none" }}
 						class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]}
 						onClick={() => {
@@ -154,7 +155,7 @@ export default defineComponent({
 						{{
 							reference: () => (
 								<div
-									id="tips-step-8"
+									id="tips-step-4"
 									class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]}
 									onClick={(e: Event) => {
 										e.stopPropagation();
@@ -180,7 +181,7 @@ export default defineComponent({
 										headData.musicTypeShow = !headData.musicTypeShow;
 									}}
 								>
-									<img class={styles.iconBtn} src={icons['icon-zhuanpu']} />
+									<img class={styles.iconBtn} src={icons["icon-zhuanpu"]} />
 									<span>转简谱</span>
 								</div>
 							),
@@ -202,7 +203,7 @@ export default defineComponent({
 						<div class={styles.btnWrap}>
 							<img class={styles.iconBtn} src={state.playState === "paused" ? icons.play : icons.pause} />
 							<Circle
-								style={{display: state.playState === "paused" ? 'none' : ''}}
+								style={{ display: state.playState === "paused" ? "none" : "" }}
 								class={styles.progress}
 								stroke-width={80}
 								currentRate={state.playProgress}
@@ -217,7 +218,7 @@ export default defineComponent({
 						id="tips-step-7"
 						onClick={() => handleResetPlay()}
 					>
-						<img class={styles.iconBtn} src={icons['reset']} />
+						<img class={styles.iconBtn} src={icons["reset"]} />
 					</div>
 				</div>
 

src/page-orchestra/header-top/mode-type-mode/index.module.less

@@ -7,5 +7,6 @@
   padding: 0 40px;
   img {
     width: 127px;
+    height: 50px;
   }
 }

src/page-orchestra/header-top/mode-type-mode/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, Teleport, Transition } from "vue";
+import { defineComponent, onMounted, Teleport, Transition } from "vue";
 import styles from "./index.module.less";
 import { model1, model2, model3 } from "../image/headerTop.json";
 
@@ -8,9 +8,9 @@ export default defineComponent({
 	setup(props, { emit }) {
 		return () => (
 			<div class={styles.wrap}>
-				<img onClick={() => emit("close", "practise")} src={model1} />
-				<img onClick={() => emit("close", "follow")} src={model3} />
-				<img onClick={() => emit("close", "evaluating")} src={model2} />
+				<img id="modeType-0" onClick={() => emit("close", "practise")} src={model1} />
+				<img id="modeType-1" onClick={() => emit("close", "follow")} src={model3} />
+				<img id="modeType-2" onClick={() => emit("close", "evaluating")} src={model2} />
 			</div>
 		);
 	},