style: 样式修改

src/view/fingering/fingering-config.ts

@@ -447,7 +447,7 @@ export const subjectFingering = (subjectId: number | string): IFingering => {
       return {
         name: "tuba",
         direction: "vertical",
-        width: "4.34rem",
+        width: "3.8rem",
         hasTizhi: false,
         id: 16,
       };

src/view/fingering/index.module.less

@@ -69,6 +69,7 @@
 .speImgs {
   &>img {
     height: inherit;
+    top: 43%;
   }
 }
 
@@ -158,6 +159,8 @@
   top: -20px;
 }
 
+
+
 .canDisplay {
   opacity: 1;
   pointer-events: initial;

src/view/fingering/index.tsx

@@ -58,11 +58,24 @@ export default defineComponent({
           {state.fingeringInfo.direction === "transverse" ? (
             <div onClick={() => doubeClick()} class={[styles.fingeringContainer]}>
               <div class={[styles.imgs, state.fingeringInfo.name === 'trombone' && styles.speImgs]}>
-                <img class="driver-7" src={fingerData.subject?.json?.full} />
-                {rs.map((key: number | string, index: number) => {
-                  const nk: string = typeof key === "string" ? key.replace("active-", "") : String(key);
-                  return <img data-index={nk} src={fingerData.subject?.json?.[nk]} />;
-                })}
+                {
+                  state.fingeringInfo.name === 'trombone' ? 
+                  <>
+                    {!rs.length && <img class="driver-7" src={fingerData.subject?.json?.full} /> }
+                    {rs.map((key: number | string, index: number) => {
+                      const nk: string = typeof key === "string" ? key.replace("active-", "") : String(key);
+                      return <img data-index={nk} src={fingerData.subject?.json?.[nk]} />;
+                    })}                  
+                  </> : 
+                  <>
+                    <img class="driver-7" src={fingerData.subject?.json?.full} />
+                    {rs.map((key: number | string, index: number) => {
+                      const nk: string = typeof key === "string" ? key.replace("active-", "") : String(key);
+                      return <img data-index={nk} src={fingerData.subject?.json?.[nk]} />;
+                    })}                   
+                  </>
+                }
+
               </div>
 
               {state.fingeringInfo.hasTizhi && (
@@ -83,7 +96,7 @@ export default defineComponent({
 
               {state.fingeringInfo.hasTizhi && (
                 <div style={{ display: state.fingeringInfo.disabledFinger ? "none" : "" }} class={styles.rightContent}>
-                  <div class={[styles.tizhi, canTizhi && styles.canDisplay]} onClick={() => (fingerData.relationshipIndex = fingerData.relationshipIndex === 0 ? 1 : 0)}>
+                  <div class={[styles.tizhi, styles.transYTizhi, canTizhi && styles.canDisplay]} onClick={() => (fingerData.relationshipIndex = fingerData.relationshipIndex === 0 ? 1 : 0)}>
                     替指
                   </div>
                 </div>