style: ui修改

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

@@ -274,6 +274,7 @@
     .driver-popover-navigation-btns {
       position: absolute;
       right: 15px;
+      bottom: -35px;
       justify-content: end;
     }
 
@@ -292,6 +293,7 @@
     .driver-popover-navigation-btns {
       position: absolute;
       right: 15px;
+      bottom: -35px;
       justify-content: end;
     }
 
@@ -396,6 +398,7 @@
     .driver-popover-navigation-btns {
       position: absolute;
       right: 15px;
+      bottom: -35px;
       justify-content: end;
     }
 
@@ -498,6 +501,7 @@
 
 .popoverClassER4 {
   width: 327px;
+  min-width: 327px;
   height: 181px;
   background: url("./images/evaluating/r4.png") no-repeat center;
   background-size: contain;

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

@@ -96,6 +96,9 @@ export const PractiseDriver = defineComponent({
           length -= 1;
         }
       }
+      if (!props.statusAll.showSwitchList) {
+        length -= 1;
+      }
       console.log(props.statusAll, "statusAll", length, state.setting.displayFingering);
 
       let options: Config = {
@@ -266,8 +269,6 @@ export const PractiseDriver = defineComponent({
             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";
             },
             onPrevClick: () => {
               driverObj.drive(0);

src/view/fingering/index.module.less

@@ -73,6 +73,10 @@
   }
 }
 
+.speFluteImgs {
+  transform: scale(0.8);
+}
+
 .rightContent {
   display: flex;
   flex-direction: column;
@@ -159,7 +163,10 @@
   top: -20px;
 }
 
-
+.transYTizhi {
+  position: absolute;
+  bottom: 25%;
+}
 
 .canDisplay {
   opacity: 1;

src/view/fingering/index.tsx

@@ -57,7 +57,7 @@ export default defineComponent({
         <>
           {state.fingeringInfo.direction === "transverse" ? (
             <div onClick={() => doubeClick()} class={[styles.fingeringContainer]}>
-              <div class={[styles.imgs, state.fingeringInfo.name === 'trombone' && styles.speImgs]}>
+              <div class={[styles.imgs, state.fingeringInfo.name === 'trombone' && styles.speImgs, state.fingeringInfo.name === 'flute' && styles.speFluteImgs]}>
                 {
                   state.fingeringInfo.name === 'trombone' ? 
                   <>