听音练习样式修改

src/page-instrument/view-figner/index.module.less

@@ -320,6 +320,7 @@
 
             :global {
                 .van-tabs__wrap {
+                    display: none !important;
                     width: 100%;
                     display: flex;
                     justify-content: center;
@@ -354,7 +355,6 @@
                 }
 
                 .van-tabs__content {
-                    padding-top: 16px;
                     height: 130px;
 
                     .van-tab__panel {
@@ -363,45 +363,136 @@
                 }
             }
 
-            .btnBox {
-                height: 100%;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                margin-top: -16px;
-
-                .btnCon {
-                    border-radius: 17px;
-                    display: flex;
-                    background: rgba(255, 255, 255, 0.5);
-                    padding: 6px 5px 3px 6px;
-
-                    .btnGr {
-                        background: url("./image/btnBg.png") no-repeat;
-                        background-size: 100% 100%;
-                        width: 93px;
-                        height: 56px;
+            // .btnBox {
+            //     height: 100%;
+            //     display: flex;
+            //     justify-content: center;
+            //     align-items: center;
+            //     margin-top: -16px;
+
+            //     .btnCon {
+            //         border-radius: 17px;
+            //         display: flex;
+            //         background: rgba(255, 255, 255, 0.5);
+            //         padding: 6px 5px 3px 6px;
+
+            //         .btnGr {
+            //             background: url("./image/btnBg.png") no-repeat;
+            //             background-size: 100% 100%;
+            //             width: 93px;
+            //             height: 56px;
+            //             display: flex;
+            //             flex-direction: column;
+            //             align-items: center;
+            //             justify-content: center;
+            //             cursor: pointer;
+            //             margin-left: 5px;
+
+            //             &:first-child {
+            //                 margin-left: 0;
+            //             }
+
+            //             >img {
+            //                 width: 19px;
+            //                 height: 19px;
+            //             }
+
+            //             >span {
+            //                 font-weight: 500;
+            //                 font-size: 14px;
+            //                 color: #616161;
+            //                 line-height: 20px;
+            //             }
+            //         }
+            //     }
+            // }
+            .restoreBox{
+                width: 0;
+                height: 0;
+                position: relative;
+                .restoreBtn{
+                    position: absolute;
+                    right: -51px;
+                    top: -74px;
+                    width: 72px;
+                    height: 31px;
+                    background: url("./image/restore.png") no-repeat;
+                    background-size: 100% 100%;
+                }
+            }
+            .moreFun{
+                margin-left: 6px;
+                position: relative;
+                width: 44px;
+                height: 54px;
+                background: url("./image/more.png") no-repeat;
+                background-size: 100% 100%;
+                &:hover{
+                    .btnBox{
+                        display: initial;
+                    } 
+                }
+                .btnBox {
+                    display: none;
+                    position: absolute;
+                    height: 88px;
+                    right: -20px;
+                    top: -86px;
+                    .btnCon {
+                        border-radius: 17px;
                         display: flex;
-                        flex-direction: column;
-                        align-items: center;
-                        justify-content: center;
-                        cursor: pointer;
-                        margin-left: 5px;
-
-                        &:first-child {
-                            margin-left: 0;
-                        }
-
-                        >img {
-                            width: 19px;
-                            height: 19px;
+                        background: #DFD7D3;
+                        padding: 6px 5px 3px 6px;
+                        border: 2px solid #FFFFFF;
+                        position: relative;
+                        .triangle{
+                            position: absolute;
+                            bottom: -12px;
+                            right: 29px;
+                            width: 0;
+                            height: 0;
+                            border-left: 12px solid transparent;
+                            border-right: 12px solid transparent;
+                            border-top: 12px solid #ffffff;
+                            &::after{
+                                content: "";
+                                position: absolute;
+                                bottom: 2px;
+                                left: -10px;
+                                border-left: 10px solid transparent;
+                                border-right: 10px solid transparent;
+                                border-top: 10px solid #DFD7D3;
+                                z-index: 1;
+                            }
                         }
-
-                        >span {
-                            font-weight: 500;
-                            font-size: 14px;
-                            color: #616161;
-                            line-height: 20px;
+    
+                        .btnGr {
+                            background: url("./image/btnBg.png") no-repeat;
+                            background-size: 100% 100%;
+                            width: 93px;
+                            height: 56px;
+                            display: flex;
+                            flex-direction: column;
+                            align-items: center;
+                            justify-content: center;
+                            cursor: pointer;
+                            margin-left: 5px;
+    
+                            &:first-child {
+                                margin-left: 0;
+                            }
+    
+                            >img {
+                                width: 19px;
+                                height: 19px;
+                            }
+    
+                            >span {
+                                font-weight: 500;
+                                font-size: 14px;
+                                color: #616161;
+                                line-height: 20px;
+                            }
                         }
                     }
                 }
@@ -685,7 +776,7 @@
     position: relative;
     display: flex;
     justify-content: center;
-    align-items: flex-start;
+    align-items: center;
     height: 65px;
     flex-shrink: 0;
     cursor: pointer;

src/page-instrument/view-figner/index.tsx

@@ -283,7 +283,12 @@ export default defineComponent({
           data.viewIndex = 1;
         }
       }
-
+      // 音阶模式 默认设置正反面
+      if(data.fingeringMode === "scaleMode"){
+        if(["hulusi-flute", "ocarina", "whistling", "piccolo", "baroque-recorder"].includes(data.subject)){
+          data.viewIndex = 2;
+        }
+      }
       const o: any = {
         "pan-flute": 2,
         ocarina: 2,
@@ -1632,6 +1637,72 @@ export default defineComponent({
                                     </Button>
                                   )}
                                 </div>
+                                <div class={styles.restoreBox}>
+                                  {instrumentTranstion.value && (
+                                            <div class={[styles.restoreBtn]} onClick={() => resetElement()}>
+                                            </div>
+                                    )}
+                                </div>
+                                <div class={styles.moreFun}>
+                                  <div class={styles.btnBox}>
+                                    <div class={styles.btnCon}>
+                                      <div
+                                        class={[styles.btnGr]}
+                                        onClick={(e) => {
+                                          e.stopPropagation();
+                                          //
+                                          // 播放音阶时不能切换
+                                          if (playStatus.gamut) {
+                                            return;
+                                          }
+                                          // 开始答题不能切换
+                                          if (playAction.listenLock) {
+                                            return;
+                                          }
+
+                                          data.changeSubjectShow = true;
+                                        }}
+                                      >
+                                        <img src={icons.icon_change_instrument} />
+                                        <span>切换乐器</span>
+                                      </div>
+                                      {data.subject !== "melodica" && data.fingeringMode === "scaleMode" && (
+                                        <div
+                                          class={styles.btnGr}
+                                          onClick={(e) => {
+                                            e.stopPropagation();
+                                            data.viewIndex++;
+                                            if (data.viewIndex > data.viewTotal) {
+                                              if (["pan-flute", "ocarina", "whistling"].includes(data.subject)) {
+                                                data.viewIndex = 1;
+                                              } else {
+                                                data.viewIndex = 0;
+                                              }
+                                            }
+
+                                            getFingeringData();
+                                          }}
+                                        >
+                                          <img src={icons.icon_toggle} />
+                                          <span>视图</span>
+                                        </div>
+                                      )}
+                                      <div
+                                        class={styles.btnGr}
+                                        onClick={(e) => {
+                                          e.stopPropagation();
+                                          resetElement();
+                                          data.tipShow = !data.tipShow;
+                                          onResize();
+                                        }}
+                                      >
+                                        <img src={icons.icon_2_1} />
+                                        <span>说明</span>
+                                      </div>
+                                      <div class={styles.triangle}></div>
+                                    </div>
+                                  </div>
+                                </div>
                               </div>
                               {data.fingeringMode !== "scaleMode" && (
                                 <div
@@ -1654,7 +1725,7 @@ export default defineComponent({
                             </>
                           ) : (
                             <>
-                              <div class={styles.btnBox}>
+                              {/* <div class={styles.btnBox}>
                                 <div class={styles.btnCon}>
                                   <div
                                     class={[styles.btnGr]}
@@ -1714,7 +1785,7 @@ export default defineComponent({
                                     </div>
                                   )}
                                 </div>
-                              </div>
+                              </div> */}
                             </>
                           )}
                         </Tab>