feat: 引导页修改

src/page-instrument/component/the-music-list/index.module.less

@@ -147,6 +147,14 @@
         overflow: hidden;
         position: relative;
         flex-shrink: 0;
+        .vipIcon {
+            position: absolute;
+            right: 0;
+            top: 0;
+            height: 14px;
+            width: auto;
+            z-index: 9;
+        }
         .lock{
             position: absolute;
             width: 100%;

src/page-instrument/component/the-music-list/list.tsx

@@ -10,6 +10,9 @@ import huoimg from "./imgs/huo.png"
 import emptyImg from "./imgs/empty.png"
 import { getQuery } from "/src/utils/queryString";
 import { vipData } from "../vip"
+import vipIcon from "./imgs/icon-music-vip.png"
+import vip1Icon from "./imgs/icon-music-vip1.png"
+import sbuyIcon from "./imgs/icon-music-sbuy.png"
 
 export default defineComponent({
   name: "TheMusicList-list",
@@ -52,6 +55,7 @@ export default defineComponent({
           ...forms
         });
         if (res?.code === 200 && Array.isArray(res.data?.rows)) {
+          res.data.rows.forEach((item: any) => item.useStatus = 'LOCK')
           data.list = [...data.list, ...res.data.rows];
         }
         data.finished = res.data?.rows?.length < forms.rows;
@@ -142,8 +146,15 @@ export default defineComponent({
             return (
               <div class={[styles.item, state.examSongId == item.id && styles.itemActive]} onClick={() => openAccomapina(item)}>
                 <div class={styles.titleImg}>
-                  {
+                  {/* {
                     item.useStatus==='LOCK'&&vipVerify.value && <div class={styles.lock}></div>
+                  } */}
+                  {
+                    (item.paymentType.includes('VIP') || item.paymentType.includes('CHARGE')) && 
+                    <img 
+                      class={styles.vipIcon}
+                      src={item.paymentType === 'VIP' ? vipIcon : item.paymentType === 'CHARGE' ? sbuyIcon : item.paymentType === 'VIP,CHARGE' || item.paymentType === 'CHARGE,VIP' ? vip1Icon : ''} 
+                    />                    
                   }
                   <Image src={item.titleImg} class={styles.img} />
                 </div>
@@ -153,12 +164,12 @@ export default defineComponent({
                     ((["FREE","LOCK"].includes(item.useStatus)&&vipVerify.value) || item.composer) &&
                     <div class={styles.detail}>
                       {/* {item.usedNum && <div class={styles.usedNum}><img src={huoimg}/><div>{formatNumber(item.usedNum)}</div></div>} */}
-                      {
+                      {/* {
                         item.useStatus==='FREE'&&vipVerify.value && <div class={[styles.freeIcon]}>试用</div>
                       }
                       {
                         item.useStatus==='LOCK'&&vipVerify.value && <div class={[styles.lockIcon]}>未解锁</div>
-                      }
+                      } */}
                       {
                         item.composer && <div class={styles.author}>{item.composer}</div>
                       }

src/page-instrument/component/vip/demand.tsx

@@ -0,0 +1,62 @@
+import { Button, Dialog } from 'vant'
+import { defineComponent, ref, Ref } from 'vue'
+import iconDemand from './icons/demand.svg'
+import styles from './index.module.less'
+import classNames from 'classnames'
+import detailState from '/src/pages/detail/state'
+import qs from 'query-string'
+import { permissionPopup } from './permission'
+import * as RuntimeUtils from '/src/pages/detail/runtime'
+import { postMessage } from '/src/helpers/native-message'
+import { useClientType, useOriginSearch, useUpdateMember } from '../../uses'
+export const confirmShow: Ref<boolean> = ref(false)
+const search = useOriginSearch()
+
+export default defineComponent({
+  name: 'ColexiuDemand',
+  setup() {
+    const client = useClientType()
+    const buy = async () => {
+      delete search.Authorization
+      let params: any = { orderType: 'MUSIC', ...search }
+      if (permissionPopup.musicId) {
+        params.id = permissionPopup.musicId
+      }
+      postMessage({
+        api: 'openWebView',
+        content: {
+          url: location.origin + '/' + client + '/#/orderDetail?' + qs.stringify(params),
+          orientation: 1,
+        },
+      })
+    }
+
+    const close = () => {
+      permissionPopup.show = false
+      RuntimeUtils.setCurrentTime(0)
+      RuntimeUtils.refreshIndex(0)
+    }
+
+    return () => (
+      <div style={{ position: 'relative' }}>
+        <img class={styles.image} src={iconDemand} />
+        <div class={styles.wrap}>
+          <div class={styles.des}>
+            <div class={styles.title}>该曲目为点播曲目</div>
+            <div class={styles.sub}>
+              点播价格{' '}
+              <span style={{ color: '#FF4E19' }}>
+                ¥{permissionPopup.musicPrice || detailState.activeDetail?.musicPrice}
+              </span>
+              ，点播后可永久使用
+            </div>
+          </div>
+          <div class={styles.btnWrap}>
+            <Button class={classNames(styles.btn, styles.tryoutBtn)} onClick={close}></Button>
+            <Button class={classNames(styles.btn, styles.demandBtn)} onClick={buy}></Button>
+          </div>
+        </div>
+      </div>
+    )
+  },
+})

src/page-instrument/component/vip/member.tsx

@@ -0,0 +1,57 @@
+import { Button } from 'vant'
+import { defineComponent } from 'vue'
+import iconMembership from './icons/membership.png'
+import styles from './index.module.less'
+import classNames from 'classnames'
+import qs from 'query-string'
+import { permissionPopup } from './permission'
+import * as RuntimeUtils from '/src/pages/detail/runtime'
+import { postMessage } from '/src/helpers/native-message'
+import { useClientType, useOriginSearch } from '../../uses'
+
+const search = useOriginSearch()
+
+export default defineComponent({
+  name: 'ColexiuMember',
+  setup() {
+    const client = useClientType()
+    const buy = () => {
+      delete search.Authorization
+      postMessage({
+        api: 'openWebView',
+        content: {
+          url: location.origin + '/' + client + '/#/memberCenter?' + qs.stringify({ ...search }),
+          orientation: 1,
+        },
+      })
+    }
+
+    const close = () => {
+      permissionPopup.show = false
+      RuntimeUtils.setCurrentTime(0)
+      RuntimeUtils.refreshIndex(0)
+    }
+    return () => (
+      <div>
+        <img class={styles.image} src={iconMembership} />
+        <div class={styles.wrap}>
+          <div class={styles.des}>
+            <div class={styles.title}>请开通会员</div>
+            <div class={styles.sub}>开通会员后可完整使用该曲目</div>
+          </div>
+          <div class={styles.btnWrap}>
+            <Button class={classNames(styles.btn, styles.tryoutBtn)} onClick={close}></Button>
+            <Button
+              class={classNames([
+                styles.btn,
+                styles.membershipBtn,
+                { [styles.discounts]: (search.discounts as unknown) == 1 },
+              ])}
+              onClick={buy}
+            ></Button>
+          </div>
+        </div>
+      </div>
+    )
+  },
+})

src/page-instrument/component/vip/memberAndDemand.tsx

@@ -0,0 +1,78 @@
+import { Button } from 'vant'
+import { defineComponent, ref, Ref } from 'vue'
+import iconDemand from './icons/demand.svg'
+import iconColse from '../close.svg'
+import styles from './index.module.less'
+import classNames from 'classnames'
+import detailState from '/src/pages/detail/state'
+import qs from 'query-string'
+import { permissionPopup } from './permission'
+import * as RuntimeUtils from '/src/pages/detail/runtime'
+import { postMessage } from '/src/helpers/native-message'
+import { useClientType, useOriginSearch } from '../../uses'
+export const confirmShow: Ref<boolean> = ref(false)
+const search = useOriginSearch()
+
+export default defineComponent({
+  name: 'memberAndDemand',
+  setup() {
+    const client = useClientType()
+    const buy = async () => {
+      delete search.Authorization
+      let params: any = { orderType: 'MUSIC', ...search }
+      if (permissionPopup.musicId) {
+        params.id = permissionPopup.musicId
+      }
+      postMessage({
+        api: 'openWebView',
+        content: {
+          url: location.origin + '/' + client + '/#/orderDetail?' + qs.stringify(params),
+          orientation: 1,
+        },
+      })
+    }
+
+    // 去购买会员
+    const buyMenber = () => {
+      delete search.Authorization
+      postMessage({
+        api: 'openWebView',
+        content: {
+          url: location.origin + '/' + client + '/#/memberCenter',
+          orientation: 1,
+        },
+      })
+    }
+
+    const close = () => {
+      permissionPopup.show = false
+      RuntimeUtils.setCurrentTime(0)
+      RuntimeUtils.refreshIndex(0)
+    }
+
+    return () => (
+      <div style={{ position: 'relative' }}>
+        <img class={styles.closeBtn} src={iconColse} onClick={close} />
+        <img class={styles.image} src={iconDemand} />
+        <div class={styles.wrap}>
+          <div class={styles.des}>
+            <div class={[styles.title, styles.andTitle]}>该曲目为会员曲目，可以单曲购买哦</div>
+            <div class={[styles.sub, styles.andSub]}>
+              开通酷乐秀会员海量曲目尽情练习
+              <br />
+              单曲点播仅需{' '}
+              <span style={{ color: '#FF4E19' }}>
+                ¥{permissionPopup.musicPrice || detailState.activeDetail?.musicPrice}
+              </span>
+              ，点播后可永久使用
+            </div>
+          </div>
+          <div class={styles.btnWrap}>
+            <Button class={classNames(styles.btn, styles.membershipBtn)} onClick={buyMenber}></Button>
+            <Button class={classNames(styles.btn, styles.demandBtn)} onClick={buy}></Button>
+          </div>
+        </div>
+      </div>
+    )
+  },
+})

src/page-instrument/custom-plugins/guide-driver/index.less

@@ -66,7 +66,7 @@
 
 .popoverClass1 {
   width: 257px;
-  height: 182px;
+  height: 247px;
   background: url("./images/practise/d1.png") no-repeat center;
   background-size: contain;
 
@@ -89,30 +89,18 @@
 }
 
 .popoverClass3 {
-  width: 257px;
-  height: 165px;
-  background: url("./images/practise/d3.png") no-repeat center;
-  background-size: contain;
-
-  .driver-popover-next-btn {
-    right: 16px;
-    bottom: -32px;
-  }
-}
-
-.popoverClass11 {
   width: 264px;
   height: 245px;
-  background: url("./images/practise/d11.png") no-repeat center;
+  background: url("./images/practise/d3.png") no-repeat center;
   background-size: contain;
 
   .driver-popover-next-btn {
-    right: 16px;
-    bottom: -32px;
+    right: 24px;
+    bottom: 23px;
   }
 }
 
-.popoverClass1-1 {
+.popoverClass11 {
   width: 264px;
   height: 245px;
   background: url("./images/practise/d11.png") no-repeat center;
@@ -125,50 +113,50 @@
 }
 
 .popoverClass4 {
-  width: 257px;
-  height: 165px;
+  width: 265px;
+  height: 245px;
   background: url("./images/practise/d4.png") no-repeat center;
   background-size: contain;
 
   .driver-popover-next-btn {
-    right: 16px;
-    bottom: -32px;
+    right: 25px;
+    bottom: 23px;
   }
 }
 
 .popoverClass5 {
-  width: 257px;
-  height: 165px;
+  width: 264px;
+  height: 245px;
   background: url("./images/practise/d5.png") no-repeat center;
   background-size: contain;
 
   .driver-popover-next-btn {
-    right: 16px;
-    bottom: -32px;
+    right: 24px;
+    bottom: 23px;
   }
 }
 
 .popoverClass5-1 {
   width: 257px;
-  height: 145px;
+  height: 215px;
   background: url("./images/practise/d5-1.png") no-repeat center;
   background-size: contain;
 
   .driver-popover-next-btn {
-    right: 16px;
-    bottom: -32px;
+    right: 24px;
+    bottom: 23px;
   }
 }
 
 .popoverClass6 {
-  width: 257px;
-  height: 165px;
+  width: 264px;
+  height: 245px;
   background: url("./images/practise/d6.png") no-repeat center;
   background-size: contain;
 
   .driver-popover-next-btn {
-    right: 16px;
-    bottom: -32px;
+    right: 24px;
+    bottom: 23px;
   }
 
   &.popoverClose {
@@ -265,64 +253,41 @@
   }
 }
 
-.popoverClass6-end {
-  width: 257px;
-  height: 165px;
-  background: url("./images/practise/d6.png") no-repeat center;
+.popoverClass8 {
+  width: 277px;
+  height: 152px;
+  background: url("./images/practise/d8.png") no-repeat center;
   background-size: contain;
-  &.popoverClose {
-    .driver-popover-navigation-btns {
-      position: absolute;
-      right: 15px;
-      bottom: -35px;
-      justify-content: end;
-    }
 
-    .driver-popover-prev-btn {
-      margin-left: 14px;
-    }
+  .driver-popover-next-btn {
+    right: 24px;
+    bottom: -48px;
   }
-}
 
-.popoverClass8 {
-  width: 270px;
-  height: 145px;
-  background: url("./images/practise/d8.png") no-repeat center;
-  background-size: contain;
   &.popoverClose {
-    .driver-popover-navigation-btns {
-      position: absolute;
-      right: 15px;
-      bottom: -35px;
-      justify-content: end;
-    }
-
-    .driver-popover-prev-btn {
-      margin-left: 14px;
+    .driver-popover-next-btn {
+      bottom: 0;
+      right: 0;
     }
   }
 }
 
 .popoverClass9 {
   width: 270px;
-  height: 186px;
+  height: 192px;
   background: url("./images/practise/d9.png") no-repeat center;
   background-size: contain;
-  .driver-popover-next-btn {
-    right: 16px;
-    bottom: -32px;
-  }
 }
 
 .popoverClass10 {
   width: 257px;
-  height: 145px;
+  height: 213px;
   background: url("./images/practise/d10.png") no-repeat center;
   background-size: contain;
 
   .driver-popover-next-btn {
-    right: 16px;
-    bottom: -32px;
+    right: 24px;
+    bottom: 23px;
   }
 }
 
@@ -349,24 +314,23 @@
   }
 
   .driver-popover-prev-btn {
-    position: relative;
     border: 1px solid #fff;
     border-radius: 100px;
     color: #fff !important;
     background-color: transparent;
     font-weight: 400;
+    text-shadow: none;
     width: 82px;
-    height: 32px;
+    height: 33px;
     text-align: center;
     margin-left: 14px;
-    text-shadow: none;
   }
 }
 
 
 .popoverClassF1 {
   width: 257px;
-  height: 182px;
+  height: 247px;
   background: url("./images/follow/f1.png") no-repeat center;
   background-size: contain;
 
@@ -377,29 +341,44 @@
 }
 
 .popoverClassF2 {
-  width: 257px;
-  height: 165px;
+  width: 264px;
+  height: 245px;
   background: url("./images/follow/f2.png") no-repeat center;
   background-size: contain;
 
   .driver-popover-next-btn {
-    right: 16px;
-    bottom: -32px;
+    right: 24px;
+    bottom: 23px;
   }
 }
 
 .popoverClassF3 {
   width: 264px;
-  height: 165px;
+  height: 245px;
   background: url("./images/follow/f3.png") no-repeat center;
   background-size: contain;
 
+  .driver-popover-next-btn {
+    right: 24px;
+    bottom: 23px;
+  }
+
   &.popoverClose {
+
     .driver-popover-navigation-btns {
       position: absolute;
+      bottom: 23px;
+      left: 0;
       right: 15px;
-      bottom: -35px;
-      justify-content: end;
+      justify-content: flex-start;
+    }
+
+    .driver-popover-next-btn {
+      // right: 14px;
+      // bottom: 18px;
+      position: relative;
+      top: 0;
+      right: 0;
     }
 
     .driver-popover-prev-btn {
@@ -410,7 +389,7 @@
 
 .popoverClassE1 {
   width: 257px;
-  height: 182px;
+  height: 247px;
   background: url("./images/evaluating/e1.png") no-repeat center;
   background-size: contain;
 
@@ -422,39 +401,55 @@
 
 .popoverClassE2 {
   width: 257px;
-  height: 165px;
+  height: 235px;
   background: url("./images/evaluating/e4.png") no-repeat center;
   background-size: contain;
 
   .driver-popover-next-btn {
-    right: 16px;
-    bottom: -32px;
+    right: 17px;
+    bottom: 22px;
   }
 }
 
 .popoverClassE3 {
   width: 264px;
-  height: 165px;
+  height: 245px;
   background: url("./images/evaluating/e2.png") no-repeat center;
   background-size: contain;
 
   .driver-popover-next-btn {
-    right: 16px;
-    bottom: -32px;
+    right: 24px;
+    bottom: 23px;
   }
 }
 
 .popoverClassE4 {
   width: 264px;
-  height: 165px;
+  height: 245px;
   background: url("./images/evaluating/e3.png") no-repeat center;
   background-size: contain;
 
+  .driver-popover-next-btn {
+    right: 24px;
+    bottom: 23px;
+  }
+
   &.popoverClose {
+
     .driver-popover-navigation-btns {
       position: absolute;
+      bottom: 23px;
+      left: 0;
       right: 15px;
-      justify-content: end;
+      justify-content: flex-start;
+    }
+
+    .driver-popover-next-btn {
+      // right: 14px;
+      // bottom: 18px;
+      position: relative;
+      top: 0;
+      right: 0;
     }
 
     .driver-popover-prev-btn {
@@ -476,8 +471,8 @@
 }
 
 .popoverClassER2 {
-  width: 260px;
-  height: 160px;
+  width: 261px;
+  height: 226px;
   background: url("./images/evaluating/r2.png") no-repeat center;
   background-size: contain;
 
@@ -489,7 +484,7 @@
 
 .popoverClassER3 {
   width: 261px;
-  height: 181px;
+  height: 249px;
   background: url("./images/evaluating/r3.png") no-repeat center;
   background-size: contain;
 
@@ -501,8 +496,7 @@
 
 .popoverClassER4 {
   width: 327px;
-  min-width: 327px;
-  height: 181px;
+  height: 246px;
   background: url("./images/evaluating/r4.png") no-repeat center;
   background-size: contain;
 
@@ -528,37 +522,33 @@
 }
 
 .popoverClassReport1 {
-  //transform: translateY(10px);
   width: 270px;
-  height: 145px;
+  height: 142px;
   background: url("./images/report/r1.png") no-repeat center;
   background-size: contain;
 
   .driver-popover-next-btn {
-    bottom: -36px;
+    bottom: -51px;
     right: 17px;
   }
 }
 
 .popoverClassReport2 {
-  //transform: translateY(10px);
   width: 270px;
-  height: 145px;
+  height: 142px;
   background: url("./images/report/r2.png") no-repeat center;
   background-size: contain;
 
   .driver-popover-next-btn {
-    bottom: -36px;
+    bottom: -51px;
     right: 17px;
   }
 
   &.popoverClose {
     .driver-popover-navigation-btns {
       position: absolute;
-      bottom: -36px;
+      bottom: -51px;
       left: 0;
-      right: 15px;
-      justify-content: flex-start;
     }
 
     .driver-popover-next-btn {
@@ -575,24 +565,21 @@
 }
 
 .popoverClassReport3 {
-  //transform: translateY(10px);
   width: 270px;
-  height: 145px;
+  height: 142px;
   background: url("./images/report/r3.png") no-repeat center;
   background-size: contain;
 
   .driver-popover-next-btn {
-    bottom: -36px;
+    bottom: -51px;
     right: 17px;
   }
 
   &.popoverClose {
     .driver-popover-navigation-btns {
       position: absolute;
-      bottom: -36px;
+      bottom: -51px;
       left: 0;
-      right: 15px;
-      justify-content: flex-start;
     }
 
     .driver-popover-next-btn {
@@ -609,9 +596,8 @@
 }
 
 .popoverClassReport4 {
-  //transform: translateY(10px);
   width: 270px;
-  height: 145px;
+  height: 142px;
   background: url("./images/report/r5.png") no-repeat center;
   background-size: contain;
 
@@ -622,10 +608,8 @@
   &.popoverClose {
     .driver-popover-navigation-btns {
       position: absolute;
-      bottom: -36px;
+      bottom: -51px;
       left: 0;
-      right: 15px;
-      justify-content: flex-start;
     }
 
     .driver-popover-next-btn {

src/page-instrument/custom-plugins/guide-driver/index.tsx

@@ -52,10 +52,10 @@ export const PractiseDriver = defineComponent({
     // 初始化部分引导位置
     const driverInitialPosition = (popover: PopoverDOM, options: { config: Config; state: State }) => {
       options.config.stageRadius = 5;
-      options.config.stagePadding = 4;
+      options.config.stagePadding = 8;
       try {
         const rect = options.state.activeElement?.getBoundingClientRect();
-        popover.wrapper.style.marginLeft = -(rect?.width || 0) / 2 + 4 + "px";
+        popover.wrapper.style.marginLeft = (rect?.width || 0) / 2 + 4 + "px";
       } catch {}
     };
 
@@ -71,9 +71,9 @@ export const PractiseDriver = defineComponent({
       }
 
       // 显示指法
-      // if (!state.setting.displayFingering) {
-      //   length -= 1;
-      // }
+      if (!state.setting.displayFingering) {
+        length -= 1;
+      }
 
       // 声部
       if (!props.statusAll.subjectStatus) {
@@ -85,7 +85,7 @@ export const PractiseDriver = defineComponent({
 
       // pc端不显示标题和模式切换引导
       if (state.platform === IPlatform.PC) {
-        // length -= 2;
+        length -= 2;
       } else {
         // 判断是否有标题
         if (!props.statusAll.backTitle || props.statusAll.titleType === "NONE") {
@@ -96,9 +96,6 @@ export const PractiseDriver = defineComponent({
           length -= 1;
         }
       }
-      if (!props.statusAll.showSwitchList) {
-        length -= 1;
-      }
       console.log(props.statusAll, "statusAll", length, state.setting.displayFingering);
 
       let options: Config = {
@@ -137,24 +134,6 @@ export const PractiseDriver = defineComponent({
         });
       }
 
-      if (props.statusAll.modelTypeStatus) {
-        options.steps?.push({
-          element: ".driver-9",
-          popover: {
-            title: "",
-            description: "",
-            popoverClass: "popoverClass popoverClass9",
-            align: "end",
-            side: "bottom",
-            nextBtnText: `下一步 (2/${length})`,
-            showButtons: ["next"],
-            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
-              driverInitialPosition(popover, options);
-            },
-          },
-        });
-      }
-
       if (props.statusAll.playType) {
         options.steps?.push({
           element: ".driver-2",
@@ -180,8 +159,8 @@ export const PractiseDriver = defineComponent({
             title: "",
             description: "",
             popoverClass: props.statusAll.originPlayType ? "popoverClass popoverClass3" : "popoverClass popoverClass11",
-            align: "end",
-            side: "bottom",
+            align: "start",
+            side: "top",
             nextBtnText: `下一步 (${options.steps.length + 1}/${length})`,
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
@@ -197,8 +176,8 @@ export const PractiseDriver = defineComponent({
             title: "",
             description: "",
             popoverClass: "popoverClass popoverClass4",
-            align: "end",
-            side: "bottom",
+            align: "start",
+            side: "top",
             nextBtnText: `下一步 (${options.steps.length + 1}/${length})`,
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
@@ -212,8 +191,8 @@ export const PractiseDriver = defineComponent({
             title: "",
             description: "",
             popoverClass: "popoverClass popoverClass5",
-            align: "end",
-            side: "bottom",
+            align: "start",
+            side: "top",
             nextBtnText: `下一步 (${options.steps.length + 2}/${length})`,
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
@@ -222,6 +201,7 @@ export const PractiseDriver = defineComponent({
           },
         }
       );
+
       if (props.statusAll.subjectStatus) {
         options.steps?.push({
           element: ".driver-10",
@@ -229,8 +209,8 @@ export const PractiseDriver = defineComponent({
             title: "",
             description: "",
             popoverClass: "popoverClass popoverClass10",
-            align: "end",
-            side: "bottom",
+            align: "start",
+            side: "top",
             nextBtnText: `下一步 (${options.steps.length + 1}/${length})`,
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
@@ -238,15 +218,16 @@ export const PractiseDriver = defineComponent({
             },
           },
         });
-      }      
+      }
+
       options.steps?.push({
         element: ".driver-5-1",
         popover: {
           title: "",
           description: "",
           popoverClass: "popoverClass popoverClass5-1",
-          align: "end",
-          side: "bottom",
+          align: "start",
+          side: "top",
           nextBtnText: `下一步 (${options.steps.length + 1}/${length})`,
           showButtons: ["next"],
           onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
@@ -261,9 +242,9 @@ export const PractiseDriver = defineComponent({
           popover: {
             title: "",
             description: "",
-            popoverClass: "popoverClass popoverClass6-end popoverClose",
-            align: "end",
-            side: "bottom",
+            popoverClass: "popoverClass popoverClass6 popoverClose",
+            align: "start",
+            side: "top",
             prevBtnText: "再看一遍",
             doneBtnText: "完成",
             showButtons: ["next", "previous"],
@@ -310,8 +291,8 @@ export const PractiseDriver = defineComponent({
               title: "",
               description: "",
               popoverClass: "popoverClass popoverClass6",
-              align: "end",
-              side: "bottom",
+              align: "start",
+              side: "top",
               nextBtnText: `下一步 (${options.steps.length + 1}/${length})`, //"下一步6/" + length,
               showButtons: ["next"],
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
@@ -326,8 +307,8 @@ export const PractiseDriver = defineComponent({
               title: "",
               description: "",
               popoverClass: "popoverClass popoverClass6",
-              align: "end",
-              side: "bottom",
+              align: "start",
+              side: "top",
               nextBtnText: `下一步 (${options.steps.length + 1}/${length})`, //"下一步6/" + length,
               showButtons: ["next"],
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
@@ -348,34 +329,17 @@ export const PractiseDriver = defineComponent({
               doneBtnText: "完成",
               showButtons: ["next", "previous"],
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
-                driverInitialPosition(popover, options);
-                const rect = options.state.activeElement?.getBoundingClientRect();
-                popover.wrapper.style.marginLeft = (rect?.width || 0) / 2 + "px";
-              },
-              onPrevClick: () => {
-                driverObj.drive(0);
-              },
-              onNextClick: () => {
-                onDriverClose();
-              },
-            },
-          });
-        } else if (!props.statusAll.showSwitchList) {
-          options.steps?.push({
-            element: ".driver-6",
-            popover: {
-              title: "",
-              description: "",
-              popoverClass: "popoverClass popoverClass6-end popoverClose",
-              align: "end",
-              side: "bottom",
-              prevBtnText: "再看一遍",
-              doneBtnText: "完成",
-              showButtons: ["next", "previous"],
-              onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
-                driverInitialPosition(popover, options);
-                // const rect = options.state.activeElement?.getBoundingClientRect();
-                // popover.wrapper.style.marginLeft = -(rect?.width || 0) / 2 + 4 + "px";
+                if (props.statusAll.titleType === "TEXT") {
+                  options.config.stageRadius = 5;
+                  options.config.stagePadding = 5;
+                } else {
+                  options.config.stageRadius = 1000;
+                  options.config.stagePadding = 0;
+                }
+                try {
+                  const rect = options.state.activeElement?.getBoundingClientRect();
+                  popover.wrapper.style.marginLeft = (rect?.width || 0) / 2 - 4 + "px";
+                } catch {}
               },
               onPrevClick: () => {
                 driverObj.drive(0);
@@ -392,8 +356,8 @@ export const PractiseDriver = defineComponent({
               title: "",
               description: "",
               popoverClass: "popoverClass popoverClass6",
-              align: "end",
-              side: "bottom",
+              align: "start",
+              side: "top",
               nextBtnText: `下一步 (${options.steps.length + 1}/${length})`, //"下一步6/" + length,
               showButtons: ["next"],
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
@@ -411,27 +375,55 @@ export const PractiseDriver = defineComponent({
               popover: {
                 title: "",
                 description: "",
-                popoverClass: "popoverClass popoverClass8 popoverClose",
+                popoverClass: "popoverClass popoverClass8",
                 align: "start",
                 side: "bottom",
-                prevBtnText: "再看一遍",
-                doneBtnText: "完成",
-                showButtons: ["next", "previous"],
+                nextBtnText: `下一步 (${options.steps.length + 1}/${length})`,
+                showButtons: ["next"],
                 onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
-                  driverInitialPosition(popover, options);
-                  const rect = options.state.activeElement?.getBoundingClientRect();
-                  popover.wrapper.style.marginLeft = (rect?.width || 0) / 2 + "px";
-                },
-                onPrevClick: () => {
-                  driverObj.drive(0);
-                },
-                onNextClick: () => {
-                  onDriverClose();
+                  if (props.statusAll.titleType === "TEXT") {
+                    options.config.stageRadius = 5;
+                    options.config.stagePadding = 5;
+                  } else {
+                    options.config.stageRadius = 1000;
+                    options.config.stagePadding = 0;
+                  }
+                  try {
+                    const rect = options.state.activeElement?.getBoundingClientRect();
+                    popover.wrapper.style.marginLeft = (rect?.width || 0) / 2 - 4 + "px";
+                  } catch {}
                 },
               },
             });
           }
 
+          options.steps?.push({
+            element: ".driver-9",
+            popover: {
+              title: "",
+              description: "",
+              popoverClass: "popoverClass popoverClass9 popoverClose",
+              align: "end",
+              side: "bottom",
+              prevBtnText: "再看一遍",
+              doneBtnText: "完成",
+              showButtons: ["next", "previous"],
+              onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
+                options.config.stageRadius = 1000;
+                options.config.stagePadding = 0;
+                try {
+                  const rect = options.state.activeElement?.getBoundingClientRect();
+                  popover.wrapper.style.marginLeft = -((rect?.width || 0) / 2 - 8) + "px";
+                } catch {}
+              },
+              onPrevClick: () => {
+                driverObj.drive(0);
+              },
+              onNextClick: () => {
+                onDriverClose();
+              },
+            },
+          });
         }
       }
 
@@ -528,15 +520,15 @@ export const FollowDriver = defineComponent({
     // 初始化部分引导位置
     const driverInitialPosition = (popover: PopoverDOM, options: { config: Config; state: State }) => {
       options.config.stageRadius = 5;
-      options.config.stagePadding = 4;
+      options.config.stagePadding = 8;
       try {
         const rect = options.state.activeElement?.getBoundingClientRect();
-        popover.wrapper.style.marginLeft = -(rect?.width || 0) / 2 + 4 + "px";
+        popover.wrapper.style.marginLeft = (rect?.width || 0) / 2 + 4 + "px";
       } catch {}
     };
 
     // 声部
-    let length = props.statusAll.subjectStatus ? 5 : 4;
+    let length = props.statusAll.subjectStatus ? 4 : 3;
     const driverOptions: Config = {
       showProgress: false,
       allowClose: false,
@@ -574,8 +566,8 @@ export const FollowDriver = defineComponent({
             title: "",
             description: "",
             popoverClass: "popoverClass popoverClassF2",
-            align: "end",
-            side: "bottom",
+            align: "start",
+            side: "top",
             nextBtnText: `下一步 (2/${length})`,
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
@@ -593,8 +585,8 @@ export const FollowDriver = defineComponent({
           title: "",
           description: "",
           popoverClass: "popoverClass popoverClass10",
-          align: "end",
-          side: "bottom",
+          align: "start",
+          side: "top",
           nextBtnText: `下一步 (${driverOptions.steps.length + 1}/${length})`,
           showButtons: ["next"],
           onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
@@ -610,8 +602,8 @@ export const FollowDriver = defineComponent({
         title: "",
         description: "",
         popoverClass: "popoverClass popoverClass5-1",
-        align: "end",
-        side: "bottom",
+        align: "start",
+        side: "top",
         nextBtnText: `下一步 (${driverOptions.steps.length + 1}/${length})`,
         showButtons: ["next"],
         onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
@@ -626,8 +618,8 @@ export const FollowDriver = defineComponent({
         title: "",
         description: "",
         popoverClass: "popoverClass popoverClassF3 popoverClose",
-        align: "end",
-        side: "bottom",
+        align: "start",
+        side: "top",
         prevBtnText: "再看一遍",
         doneBtnText: "完成",
         showButtons: ["next", "previous"],
@@ -733,15 +725,15 @@ export const EvaluatingDriver = defineComponent({
     // 初始化部分引导位置
     const driverInitialPosition = (popover: PopoverDOM, options: { config: Config; state: State }) => {
       options.config.stageRadius = 5;
-      options.config.stagePadding = 4;
+      options.config.stagePadding = 8;
       try {
         const rect = options.state.activeElement?.getBoundingClientRect();
-        popover.wrapper.style.marginLeft = -(rect?.width || 0) / 2 + 4 + "px";
+        popover.wrapper.style.marginLeft = (rect?.width || 0) / 2 + 4 + "px";
       } catch {}
     };
 
     // 声部
-    let length = props.statusAll.subjectStatus ? 6 : 5;
+    let length = props.statusAll.subjectStatus ? 5 : 4;
 
     const driverOptions: Config = {
       showProgress: false,
@@ -780,8 +772,8 @@ export const EvaluatingDriver = defineComponent({
             title: "",
             description: "",
             popoverClass: "popoverClass popoverClassE2",
-            align: "end",
-            side: "bottom",
+            align: "start",
+            side: "top",
             nextBtnText: `下一步 (2/${length})`,
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
@@ -795,8 +787,8 @@ export const EvaluatingDriver = defineComponent({
             title: "",
             description: "",
             popoverClass: "popoverClass popoverClassE3",
-            align: "end",
-            side: "bottom",
+            align: "start",
+            side: "top",
             nextBtnText: `下一步 (3/${length})`,
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
@@ -814,8 +806,8 @@ export const EvaluatingDriver = defineComponent({
           title: "",
           description: "",
           popoverClass: "popoverClass popoverClass10",
-          align: "end",
-          side: "bottom",
+          align: "start",
+          side: "top",
           nextBtnText: `下一步 (${driverOptions.steps.length + 1}/${length})`,
           showButtons: ["next"],
           onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
@@ -831,8 +823,8 @@ export const EvaluatingDriver = defineComponent({
         title: "",
         description: "",
         popoverClass: "popoverClass popoverClass5-1",
-        align: "end",
-        side: "bottom",
+        align: "start",
+        side: "top",
         nextBtnText: `下一步 (${driverOptions.steps.length + 1}/${length})`,
         showButtons: ["next"],
         onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
@@ -847,8 +839,8 @@ export const EvaluatingDriver = defineComponent({
         title: "",
         description: "",
         popoverClass: "popoverClass popoverClassE4 popoverClose",
-        align: "end",
-        side: "bottom",
+        align: "start",
+        side: "top",
         prevBtnText: "再看一遍",
         doneBtnText: "完成",
         showButtons: ["next", "previous"],