更新

src/views/cloudPractice/cloudPractice.tsx

@@ -4,7 +4,7 @@ import NavContainer from "@/businessComponents/navContainer"
 import { ElEmpty, ElScrollbar } from "element-plus"
 import Dictionary from "@/components/dictionary"
 import MyInput from "@/components/myInput"
-import { NImage, NPopselect, NSpin } from "naive-ui"
+import { NImage, NPopselect, NSpin, NTooltip } from "naive-ui"
 // import PlayLoading from "./component/play-loading"
 import PlayItem from "./component/play-item"
 import icon_default from "../../img/cloudPractice/icon_default.png"
@@ -159,8 +159,7 @@ export default defineComponent({
 
       const handleGetSubject_gym = async () => {
          loading.value = true
-         // , { categoriesId: state.categoryId || state.firstTreeId }
-         await httpAjaxErrMsg(querySubjectIds_gym, { categoriesId: state.firstTreeId }).then(res => {
+         await httpAjaxErrMsg(querySubjectIds_gym, { categoriesId: state.categoryId || state.firstTreeId }).then(res => {
             loading.value = false
             if (res.code === 200) {
                const result = res.data || []
@@ -1058,6 +1057,7 @@ export default defineComponent({
                   >
                      <NPopselect
                         options={partColumns.value}
+                        placement="bottom-end"
                         trigger="click"
                         v-model:value={state.selectedPartIndex}
                         scrollable
@@ -1071,9 +1071,11 @@ export default defineComponent({
                               resetRender()
                            })
                         }}
-                        class={"PopSelect"}
+                        class={["PopSelect", "PopSelectPart"]}
                      >
-                        <img class={styles.transBtn} src={iconTransfer as any} />
+                        <NTooltip showArrow={false}>
+                           {{ trigger: () => <img class={styles.transBtn} src={iconTransfer as any} />, default: "切换声轨" }}
+                        </NTooltip>
                      </NPopselect>
                   </div>
                </div>

src/views/cloudPractice/index.module.scss

@@ -16,7 +16,7 @@
 }
 
 :global {
-   .PopSelect {
+   .PopSelect, .PopSelectPart {
       width: 184px;
       background: #ffffff;
       box-shadow: 0px 2px 17px 0px rgba(0, 0, 0, 0.08);
@@ -50,6 +50,10 @@
          display: none;
       }
    }
+
+   .PopSelectPart {
+      width: 260px
+   }
 }
 .leftContainer {
    flex-shrink: 0;
@@ -298,18 +302,18 @@
 
          cursor: pointer;
 
-         // &:hover {
-         //    background: #fff3d7;
-         // }
-
-         &.active {
+         &:hover {
             background: #fff3d7;
-
-            .arrow {
-               opacity: 1;
-            }
          }
 
+         // &.active {
+         //    background: #fff3d7;
+
+         //    .arrow {
+         //       opacity: 1;
+         //    }
+         // }
+
          .img {
             position: relative;
             width: 60px;
@@ -486,7 +490,7 @@
    .rightBtns {
       position: absolute;
       top: 30px;
-      right: 40px;
+      right: 30px;
       display: flex;
       align-items: center;
       .transBtn {
@@ -500,21 +504,21 @@
       }
    }
 
-   .popSelect {
-      font-size: 16px;
-      max-width: 400px;
-      max-height: 500px;
-      overflow-y: scroll;
-      box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
-      border-radius: 11px;
-      --n-option-height: 34px;
-
-      :global {
-         .n-base-select-option__content {
-            width: 80% !important;
-         }
-      }
-   }
+   // .popSelect {
+   //    font-size: 16px;
+   //    max-width: 600px;
+   //    max-height: 500px;
+   //    overflow-y: scroll;
+   //    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
+   //    border-radius: 11px;
+   //    --n-option-height: 34px;
+
+   //    :global {
+   //       .n-base-select-option__content {
+   //          width: 80% !important;
+   //       }
+   //    }
+   // }
 
    :global {
       .n-spin-container {