修改样式优化

src/components/layout/imGroup.tsx

@@ -1,41 +1,41 @@
-import { defineComponent, ref } from 'vue';
-import { useUserStore } from '/src/store/modules/users';
-import styles from './index.module.less';
-import { NSpin } from 'naive-ui';
-import { iframeDislableKeyboard } from '/src/utils';
-
-export default defineComponent({
-  name: 'imGroup',
-  setup() {
-    const userStore = useUserStore();
-    const isLoading = ref(false);
-    const iframeRef = ref();
-    const isLoaded = ref(false);
-    // const renderError = ref(false);
-    // const renderSuccess = ref(false);
-    const origin = /(localhost|192)/.test(location.host)
-      ? 'https://test.kt.colexiu.com'
-      : /online.lexiaoya.cn/.test(location.href)
-      ? 'https://kt.colexiu.com'
-      : location.origin;
-    const src = `${origin}/classroom-im/?v=${+new Date()}&userID=${
-      userStore.getUserInfo.imUserId
-    }&Authorization=${userStore.getToken}&t=${+new Date()}`;
-
-    return () => (
-      <div class={styles.imGroupContainer}>
-        <NSpin show={!isLoaded.value}>
-          <iframe
-            ref={iframeRef}
-            onLoad={(val: any) => {
-              isLoaded.value = true;
-              iframeDislableKeyboard(val.target);
-            }}
-            class={[styles.container]}
-            frameborder="0"
-            src={src}></iframe>
-        </NSpin>
-      </div>
-    );
-  }
-});
+import { defineComponent, ref } from 'vue';
+import { useUserStore } from '/src/store/modules/users';
+import styles from './index.module.less';
+import { NSpin } from 'naive-ui';
+import { iframeDislableKeyboard } from '/src/utils';
+
+export default defineComponent({
+  name: 'imGroup',
+  setup() {
+    const userStore = useUserStore();
+    const isLoading = ref(false);
+    const iframeRef = ref();
+    const isLoaded = ref(false);
+    // const renderError = ref(false);
+    // const renderSuccess = ref(false);
+    const origin = /(localhost|192)/.test(location.host)
+      ? 'https://test.kt.colexiu.com'
+      : /online.lexiaoya.cn/.test(location.href)
+      ? 'https://kt.colexiu.com'
+      : location.origin;
+    const src = `${origin}/classroom-im/?v=${+new Date()}&userID=${
+      userStore.getUserInfo.imUserId
+    }&Authorization=${userStore.getToken}&t=${+new Date()}`;
+
+    return () => (
+      <div class={styles.imGroupContainer}>
+        <NSpin show={!isLoaded.value}>
+          <iframe
+            ref={iframeRef}
+            onLoad={(val: any) => {
+              isLoaded.value = true;
+              iframeDislableKeyboard(val.target);
+            }}
+            class={[styles.container]}
+            frameborder="0"
+            src={src}></iframe>
+        </NSpin>
+      </div>
+    );
+  }
+});

src/components/layout/index.module.less

@@ -1,611 +1,616 @@
-.wrap {
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  flex-direction: row;
-  background: #f1f5ff;
-  overflow: hidden;
-
-  .WrapcoreView {
-    // .WrapcoreViewInfo {
-    // border-radius: 20px;
-    // background-color: #fff;
-
-    // }
-
-    padding: 20px 32px 32px;
-    height: calc(100vh - 64px);
-    overflow-y: auto;
-    // overflow: hidden;
-  }
-}
-
-.silder {
-  width: 100px;
-  background: #3044ca;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex: 1;
-
-  .logoWrap {
-    margin-top: 22px;
-
-    .logo {
-      img {
-        width: 62px;
-        height: 60px;
-      }
-    }
-  }
-
-  .sliderList {
-    margin-top: 10px;
-    max-height: calc(100vh - 92px);
-    --n-scrollbar-width: 0 !important;
-
-    :global {
-      .n-scrollbar-content {
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-      }
-    }
-  }
-}
-
-.silderItem {
-  position: relative;
-  width: 84px;
-  height: 80px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-bottom: 18px;
-  justify-content: center;
-  border-radius: 20px;
-  cursor: pointer;
-
-  .radiusIcon {
-    img {
-      width: 26px;
-      height: 137px;
-    }
-
-    position: absolute;
-    right: -10px;
-    top: -29px;
-  }
-
-  p {
-    margin-top: 4px;
-    font-size: max(14px, 10Px);
-    font-weight: 600;
-    color: #ffffff;
-    line-height: 20px;
-  }
-
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-}
-
-.silderItem.isActiveItem {
-  background-color: #f1f5ff;
-  border-radius: 20px 0px 0px 20px;
-
-  p {
-    color: #21225d;
-  }
-}
-
-.Wrapcore {
-  height: 100%;
-  flex: 1;
-
-  .layoutTop {
-    height: 64px;
-    background-color: #fff;
-    line-height: 64px;
-    padding: 0 50px 0 32px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-
-    .layoutLeft {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-      .schoolIcon {
-        margin-right: 8px;
-
-        img {
-          width: 32px;
-          height: 32px;
-        }
-      }
-
-      p {
-        font-size: max(18px, 14Px);
-        font-weight: 600;
-        color: #131415;
-      }
-    }
-
-    .layoutRight {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-
-
-      .messageBadge {
-        margin-right: 24px;
-
-
-        .messageIcon {
-          width: 32px;
-          height: 32px;
-          cursor: pointer;
-
-          &.animation {
-            -webkit-animation: Tada 1s 2s both infinite;
-            -moz-animation: Tada 1s 2s both infinite;
-            -ms-animation: Tada 1s 2s both infinite;
-            animation: Tada 1s 2s both infinite;
-          }
-        }
-      }
-
-      .messageBadgeNo,
-      .messageBadgeHide {
-        :global {
-          .n-badge-sup {
-            visibility: hidden;
-          }
-        }
-      }
-
-      @keyframes Tada {
-        0% {
-          transform: scale(1);
-          transform: scale(1);
-        }
-
-        10%,
-        20% {
-          transform: scale(0.9) rotate(-3deg);
-          transform: scale(0.9) rotate(-3deg);
-        }
-
-        30%,
-        50%,
-        70%,
-        90% {
-          transform: scale(1.1) rotate(3deg);
-          transform: scale(1.1) rotate(3deg);
-        }
-
-        40%,
-        60%,
-        80% {
-          transform: scale(1.1) rotate(-3deg);
-          transform: scale(1.1) rotate(-3deg);
-        }
-
-        100% {
-          transform: scale(1) rotate(0);
-          transform: scale(1) rotate(0);
-        }
-      }
-
-      .line {
-        width: 1px;
-        height: 18px;
-        background-color: #dfdfdf;
-        margin-right: 24px;
-      }
-
-      .mesgWrap {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        .teacherIcon {
-          width: 32px;
-          height: 32px;
-          border-radius: 50%;
-          overflow: hidden;
-
-        }
-
-        flex: 1;
-
-        .rotueLeft {
-          transform: rotate(-90deg);
-          transition: 0.2s;
-          margin-left: 10px;
-        }
-
-        .rotueRight {
-          transform: rotate(90deg);
-          margin-left: 10px;
-          transition: 0.2s;
-        }
-      }
-
-      .optons {
-        margin-top: 18px;
-        margin-bottom: 14px;
-        width: 32px;
-        height: 32px;
-        margin-right: 24px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        cursor: pointer;
-        &.booxToolDisabled {
-          opacity: 0.5;
-          cursor: not-allowed;
-        }
-        img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-  }
-}
-
-:global {
-  .nameTool.n-popover {
-
-    background-color: #000 !important;
-    color: #fff;
-
-  }
-
-}
-
-:global {
-  .n-popover {
-    // overflow: hidden;
-    border-radius: 16px;
-
-  }
-}
-
-:global{
-  .timerMeterConBoxClass_drag{
-    box-shadow:initial;
-    width: 651px;
-    .topDragDom{
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: calc(100% - 31px);
-      height: 40px;
-    }
-  }
-}
-.timerMeterClose{
-  position: absolute;
-  width: 31px;
-  height: 32px;
-  top: 16px;
-  right: 0;
-  cursor: pointer;
-}
-.propWrap {
-  background-color: var(--n-color);
-  border-radius: 16px;
-  width: 300px;
-  overflow-y: auto;
-  background: #ffffff;
-  box-shadow: 0px 2px 17px 0px rgba(0, 0, 0, 0.08);
-  padding: 20px !important;
-
-  .teacherInfo {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    border-bottom: 1px solid #f2f2f2;
-    padding-bottom: 20px;
-
-    .teacherIcon {
-      width: 48px;
-      height: 48px;
-      border-radius: 50%;
-      border: 1px solid #ffffff;
-      overflow: hidden;
-
-    }
-
-    .teacherName {
-      flex: 1;
-      font-size: 22px;
-      font-weight: 600;
-      color: #333333;
-      margin-left: 16px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  .propWrapList {
-    padding-bottom: 17px;
-    border-bottom: 1px solid #f2f2f2;
-    margin-top: 16px;
-  }
-
-  .propWrapItem {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    height: 50px;
-    line-height: 50px;
-    cursor: pointer;
-
-    &:hover {
-      background: #f5f6fa;
-      border-radius: 10px;
-    }
-  }
-
-  .smallIcon {
-    width: 22px;
-    height: 23px;
-    margin-right: 21px;
-    margin-left: 10px;
-  }
-
-  .smallTitle {
-    font-size: 18px;
-    font-weight: 600;
-    color: #333333;
-  }
-
-  .logoutInfo {
-    margin-top: 16px;
-  }
-}
-
-:global {
-
-  .fade-slide-leave-active,
-  .fade-slide-enter-active {
-    transition: all 0.3s;
-  }
-
-  .fade-slide-enter-from {
-    opacity: 0;
-    transform: translateX(-30px);
-  }
-
-  .fade-slide-leave-to {
-    opacity: 0;
-    transform: translateX(30px);
-  }
-}
-
-.toolboxImg {
-  width: 83px;
-  height: 83px;
-  position: absolute;
-  right: 32px;
-  bottom: 84px;
-  cursor: pointer;
-  z-index: 1000;
-}
-
-.isDragIng {
-  width: 83px;
-  height: 83px;
-}
-
-// .toolClassImg {
-//   width: 100px;
-//   height: 100px;
-//   // position: absolute;
-//   // right: 32px;
-//   // bottom: 160px;
-//   // cursor: pointer;
-//   // z-index: 1000;
-// }
-
-:global {
-  .moveable-control-box {
-    --moveable-color: transparent !important;
-  }
-
-  .n-popover {
-    background-color: transparent;
-  }
-}
-
-.booxToolWrap {
-  // width: 286px;
-  // height: 95px;
-  background: #ffffff;
-  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
-  border-radius: 20px;
-  display: flex;
-  //flex-direction: column;
-  // flex-direction: row;
-  align-items: center;
-  padding: 16px 20px;
-  justify-content: space-between;
-
-  &>div {
-    display: flex;
-
-    &:last-child {
-      // margin-top: 16px;
-    }
-  }
-
-  .booxToolItem {
-    margin: 0 12px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    font-size: max(12px, 11Px);
-    cursor: pointer;
-    text-align: center;
-
-    &.booxToolDisabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-
-      &:hover {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-    }
-
-
-    &:hover {
-      opacity: 0.8;
-    }
-
-    img {
-      width: 56px;
-      height: 56px;
-      margin-bottom: 4px;
-    }
-  }
-}
-
-.setTimeImage {
-  cursor: pointer;
-
-  img {
-    width: 792px;
-  }
-}
-
-.beatImage {
-  cursor: pointer;
-
-  img {
-    width: 698px;
-  }
-}
-
-.changePwdModal {
-  border-radius: 16px;
-}
-
-.imChatModal {
-  border-radius: 20px;
-}
-
-.modeWrap {
-  overflow: hidden;
-  border-radius: 16px;
-  background-color: #fff;
-}
-
-.imGroupContainer,
-.container {
-  background-color: #fff;
-  width: 968Px;
-  height: 640Px;
-  border-radius: 15px;
-}
-
-.hideModal {
-  visibility: hidden;
-}
-
-
-.showClass {
-  width: 800px;
-  border-radius: 16px;
-  overflow: hidden;
-}
-
-
-.showModalTone {
-  width: 500px;
-
-  .studentRemove {
-    padding: 32px 40px 46px;
-
-    p {
-      font-size: 18px;
-      color: #777777;
-      line-height: 30px;
-      text-align: center;
-
-      span {
-        color: #EA4132;
-      }
-    }
-  }
-
-}
-
-.suggestWrap {
-  // :global {
-  //   .n-card-header {
-  //     display: none;
-  //   }
-
-  //   .n-card__content {
-  //     background-color: transparent;
-  //   }
-  // }
-
-  width: 754px;
-  background-color: transparent !important;
-  box-shadow: none !important;
-
-
-
-  :global {
-    .n-card-header {
-      display: none;
-    }
-
-    .n-card__content {
-      background-color: transparent;
-    }
-
-    .n-input__border {
-      display: none;
-    }
-
-    .n-input__state-border {
-      display: none;
-    }
-
-    // .n-card.n-modal {
-    //   background-color: transparent !important;
-    //   box-shadow: none !important;
-
-    //   .n-input__border {
-    //     display: none;
-    //   }
-
-    //   .n-input__state-border {
-    //     display: none;
-    //   }
-    // }
-  }
-
-}
-
-.popoverClassModel {
-  width: 500px !important;
-  border-radius: 19px !important;
-  // border-radius: ;
-}
-
-.popBox {
-  z-index: 9999;
-}
+.wrap {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+  background: #f1f5ff;
+  overflow: hidden;
+
+  .WrapcoreView {
+    // .WrapcoreViewInfo {
+    // border-radius: 20px;
+    // background-color: #fff;
+
+    // }
+
+    padding: 20px 32px 32px;
+    height: calc(100vh - 64px);
+    overflow-y: auto;
+    // overflow: hidden;
+  }
+}
+
+.silder {
+  width: 100px;
+  background: #3044ca;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+
+  .logoWrap {
+    margin-top: 22px;
+
+    .logo {
+      img {
+        width: 62px;
+        height: 60px;
+      }
+    }
+  }
+
+  .sliderList {
+    margin-top: 10px;
+    max-height: calc(100vh - 92px);
+    --n-scrollbar-width: 0 !important;
+
+    :global {
+      .n-scrollbar-content {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+      }
+    }
+  }
+}
+
+.silderItem {
+  position: relative;
+  width: 84px;
+  height: 80px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 18px;
+  justify-content: center;
+  border-radius: 20px;
+  cursor: pointer;
+
+  .radiusIcon {
+    img {
+      width: 26px;
+      height: 137px;
+    }
+
+    position: absolute;
+    right: -10px;
+    top: -29px;
+  }
+
+  p {
+    margin-top: 4px;
+    font-size: max(14px, 10Px);
+    font-weight: 600;
+    color: #ffffff;
+    line-height: 20px;
+  }
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+}
+
+.silderItem.isActiveItem {
+  background-color: #f1f5ff;
+  border-radius: 20px 0px 0px 20px;
+
+  p {
+    color: #21225d;
+  }
+}
+
+.Wrapcore {
+  height: 100%;
+  flex: 1;
+
+  .layoutTop {
+    height: 64px;
+    background-color: #fff;
+    line-height: 64px;
+    padding: 0 50px 0 32px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    .layoutLeft {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .schoolIcon {
+        margin-right: 8px;
+
+        img {
+          width: 32px;
+          height: 32px;
+        }
+      }
+
+      p {
+        font-size: max(18px, 14Px);
+        font-weight: 600;
+        color: #131415;
+      }
+    }
+
+    .layoutRight {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+
+
+      .messageBadge {
+        margin-right: 24px;
+
+
+        .messageIcon {
+          width: 32px;
+          height: 32px;
+          cursor: pointer;
+
+          &.animation {
+            -webkit-animation: Tada 1s 2s both infinite;
+            -moz-animation: Tada 1s 2s both infinite;
+            -ms-animation: Tada 1s 2s both infinite;
+            animation: Tada 1s 2s both infinite;
+          }
+        }
+      }
+
+      .messageBadgeNo,
+      .messageBadgeHide {
+        :global {
+          .n-badge-sup {
+            visibility: hidden;
+          }
+        }
+      }
+
+      @keyframes Tada {
+        0% {
+          transform: scale(1);
+          transform: scale(1);
+        }
+
+        10%,
+        20% {
+          transform: scale(0.9) rotate(-3deg);
+          transform: scale(0.9) rotate(-3deg);
+        }
+
+        30%,
+        50%,
+        70%,
+        90% {
+          transform: scale(1.1) rotate(3deg);
+          transform: scale(1.1) rotate(3deg);
+        }
+
+        40%,
+        60%,
+        80% {
+          transform: scale(1.1) rotate(-3deg);
+          transform: scale(1.1) rotate(-3deg);
+        }
+
+        100% {
+          transform: scale(1) rotate(0);
+          transform: scale(1) rotate(0);
+        }
+      }
+
+      .line {
+        width: 1px;
+        height: 18px;
+        background-color: #dfdfdf;
+        margin-right: 24px;
+      }
+
+      .mesgWrap {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .teacherIcon {
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          overflow: hidden;
+
+        }
+
+        flex: 1;
+
+        .rotueLeft {
+          transform: rotate(-90deg);
+          transition: 0.2s;
+          margin-left: 10px;
+        }
+
+        .rotueRight {
+          transform: rotate(90deg);
+          margin-left: 10px;
+          transition: 0.2s;
+        }
+      }
+
+      .optons {
+        margin-top: 18px;
+        margin-bottom: 14px;
+        width: 32px;
+        height: 32px;
+        margin-right: 24px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        cursor: pointer;
+
+        &.booxToolDisabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+
+:global {
+  .nameTool.n-popover {
+
+    background-color: #000 !important;
+    color: #fff;
+
+  }
+
+}
+
+:global {
+  .n-popover {
+    // overflow: hidden;
+    border-radius: 16px;
+
+  }
+}
+
+:global {
+  .timerMeterConBoxClass_drag {
+    box-shadow: initial;
+    width: 651px;
+
+    .topDragDom {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: calc(100% - 31px);
+      height: 40px;
+    }
+  }
+}
+
+.timerMeterClose {
+  position: absolute;
+  width: 31px;
+  height: 32px;
+  top: 16px;
+  right: 0;
+  cursor: pointer;
+}
+
+.propWrap {
+  background-color: var(--n-color);
+  border-radius: 16px;
+  width: 300px;
+  overflow-y: auto;
+  background: #ffffff;
+  box-shadow: 0px 2px 17px 0px rgba(0, 0, 0, 0.08);
+  padding: 20px !important;
+
+  .teacherInfo {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-bottom: 1px solid #f2f2f2;
+    padding-bottom: 20px;
+
+    .teacherIcon {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      border: 1px solid #ffffff;
+      overflow: hidden;
+
+    }
+
+    .teacherName {
+      flex: 1;
+      font-size: 22px;
+      font-weight: 600;
+      color: #333333;
+      margin-left: 16px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .propWrapList {
+    padding-bottom: 17px;
+    border-bottom: 1px solid #f2f2f2;
+    margin-top: 16px;
+  }
+
+  .propWrapItem {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 50px;
+    line-height: 50px;
+    cursor: pointer;
+
+    &:hover {
+      background: #f5f6fa;
+      border-radius: 10px;
+    }
+  }
+
+  .smallIcon {
+    width: 22px;
+    height: 23px;
+    margin-right: 21px;
+    margin-left: 10px;
+  }
+
+  .smallTitle {
+    font-size: 18px;
+    font-weight: 600;
+    color: #333333;
+  }
+
+  .logoutInfo {
+    margin-top: 16px;
+  }
+}
+
+:global {
+
+  .fade-slide-leave-active,
+  .fade-slide-enter-active {
+    transition: all 0.3s;
+  }
+
+  .fade-slide-enter-from {
+    opacity: 0;
+    transform: translateX(-30px);
+  }
+
+  .fade-slide-leave-to {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+}
+
+.toolboxImg {
+  width: 83px;
+  height: 83px;
+  position: absolute;
+  right: 32px;
+  bottom: 84px;
+  cursor: pointer;
+  z-index: 1000;
+}
+
+.isDragIng {
+  width: 83px;
+  height: 83px;
+}
+
+// .toolClassImg {
+//   width: 100px;
+//   height: 100px;
+//   // position: absolute;
+//   // right: 32px;
+//   // bottom: 160px;
+//   // cursor: pointer;
+//   // z-index: 1000;
+// }
+
+:global {
+  .moveable-control-box {
+    --moveable-color: transparent !important;
+  }
+
+  .n-popover {
+    background-color: transparent;
+  }
+}
+
+.booxToolWrap {
+  // width: 286px;
+  // height: 95px;
+  background: #ffffff;
+  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
+  border-radius: 20px;
+  display: flex;
+  //flex-direction: column;
+  // flex-direction: row;
+  align-items: center;
+  padding: 16px 20px;
+  justify-content: space-between;
+
+  &>div {
+    display: flex;
+
+    &:last-child {
+      // margin-top: 16px;
+    }
+  }
+
+  .booxToolItem {
+    margin: 0 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: max(12px, 11Px);
+    cursor: pointer;
+    text-align: center;
+
+    &.booxToolDisabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+
+      &:hover {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+
+
+    &:hover {
+      opacity: 0.8;
+    }
+
+    img {
+      width: 56px;
+      height: 56px;
+      margin-bottom: 4px;
+    }
+  }
+}
+
+.setTimeImage {
+  cursor: pointer;
+
+  img {
+    width: 792px;
+  }
+}
+
+.beatImage {
+  cursor: pointer;
+
+  img {
+    width: 698px;
+  }
+}
+
+.changePwdModal {
+  border-radius: 16px;
+}
+
+.imChatModal {
+  border-radius: 20px;
+}
+
+.modeWrap {
+  overflow: hidden;
+  border-radius: 16px;
+  background-color: #fff;
+}
+
+.imGroupContainer,
+.container {
+  background-color: #fff;
+  width: 868Px;
+  height: 540Px;
+  border-radius: 15px;
+}
+
+.hideModal {
+  visibility: hidden;
+}
+
+
+.showClass {
+  width: 800px;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+
+.showModalTone {
+  width: 500px;
+
+  .studentRemove {
+    padding: 32px 40px 46px;
+
+    p {
+      font-size: 18px;
+      color: #777777;
+      line-height: 30px;
+      text-align: center;
+
+      span {
+        color: #EA4132;
+      }
+    }
+  }
+
+}
+
+.suggestWrap {
+  // :global {
+  //   .n-card-header {
+  //     display: none;
+  //   }
+
+  //   .n-card__content {
+  //     background-color: transparent;
+  //   }
+  // }
+
+  width: 754px;
+  background-color: transparent !important;
+  box-shadow: none !important;
+
+
+
+  :global {
+    .n-card-header {
+      display: none;
+    }
+
+    .n-card__content {
+      background-color: transparent;
+    }
+
+    .n-input__border {
+      display: none;
+    }
+
+    .n-input__state-border {
+      display: none;
+    }
+
+    // .n-card.n-modal {
+    //   background-color: transparent !important;
+    //   box-shadow: none !important;
+
+    //   .n-input__border {
+    //     display: none;
+    //   }
+
+    //   .n-input__state-border {
+    //     display: none;
+    //   }
+    // }
+  }
+
+}
+
+.popoverClassModel {
+  width: 500px !important;
+  border-radius: 19px !important;
+  // border-radius: ;
+}
+
+.popBox {
+  z-index: 9999;
+}

src/views/prepare-lessons/components/lesson-main/courseware-presets/related.tsx

@@ -1,51 +1,51 @@
-import { defineComponent } from 'vue';
-import styles from './related.module.less';
-import { NTabPane, NTabs } from 'naive-ui';
-import SelectRelated from './select-related';
-
-export default defineComponent({
-  name: 'related-modal',
-  emits: ['more', 'add', 'look'],
-  setup(props, { emit }) {
-    return () => (
-      <div class={styles.related}>
-        <NTabs
-          animated
-          paneClass={styles.paneTitle}
-          paneWrapperClass={styles.paneWrapperContainer}
-          justifyContent="center">
-          {{
-            suffix: () => (
-              <div
-                class={styles.iconScreen}
-                onClick={() => {
-                  // forms.selectMusicStatus = true;
-                  // prepareStore.setSelectMusicStatus(true);
-                  emit('more');
-                }}>
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                  <g fill="none">
-                    <path
-                      d="M5 6a1 1 0 0 1 1-1h2a1 1 0 0 0 0-2H6a3 3 0 0 0-3 3v2a1 1 0 0 0 2 0V6zm0 12a1 1 0 0 0 1 1h2a1 1 0 1 1 0 2H6a3 3 0 0 1-3-3v-2a1 1 0 1 1 2 0v2zM18 5a1 1 0 0 1 1 1v2a1 1 0 1 0 2 0V6a3 3 0 0 0-3-3h-2a1 1 0 1 0 0 2h2zm1 13a1 1 0 0 1-1 1h-2a1 1 0 1 0 0 2h2a3 3 0 0 0 3-3v-2a1 1 0 1 0-2 0v2z"
-                      fill="#198CFE"></path>
-                  </g>
-                </svg>
-              </div>
-            ),
-            default: () => (
-              <>
-                <NTabPane name="myMusic" tab="相关课件">
-                  {/* <SelectMusic cardType={props.cardType} type="myMusic" /> */}
-                  <SelectRelated
-                    onAdd={(item: any) => emit('add', item)}
-                    onLook={(item: any) => emit('look', item)}
-                  />
-                </NTabPane>
-              </>
-            )
-          }}
-        </NTabs>
-      </div>
-    );
-  }
-});
+import { defineComponent } from 'vue';
+import styles from './related.module.less';
+import { NTabPane, NTabs } from 'naive-ui';
+import SelectRelated from './select-related';
+
+export default defineComponent({
+  name: 'related-modal',
+  emits: ['more', 'add', 'look'],
+  setup(props, { emit }) {
+    return () => (
+      <div class={styles.related}>
+        <NTabs
+          animated
+          paneClass={styles.paneTitle}
+          paneWrapperClass={styles.paneWrapperContainer}
+          justifyContent="center">
+          {{
+            suffix: () => (
+              <div
+                class={styles.iconScreen}
+                onClick={() => {
+                  // forms.selectMusicStatus = true;
+                  // prepareStore.setSelectMusicStatus(true);
+                  emit('more');
+                }}>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                  <g fill="none">
+                    <path
+                      d="M5 6a1 1 0 0 1 1-1h2a1 1 0 0 0 0-2H6a3 3 0 0 0-3 3v2a1 1 0 0 0 2 0V6zm0 12a1 1 0 0 0 1 1h2a1 1 0 1 1 0 2H6a3 3 0 0 1-3-3v-2a1 1 0 1 1 2 0v2zM18 5a1 1 0 0 1 1 1v2a1 1 0 1 0 2 0V6a3 3 0 0 0-3-3h-2a1 1 0 1 0 0 2h2zm1 13a1 1 0 0 1-1 1h-2a1 1 0 1 0 0 2h2a3 3 0 0 0 3-3v-2a1 1 0 1 0-2 0v2z"
+                      fill="#198CFE"></path>
+                  </g>
+                </svg>
+              </div>
+            ),
+            default: () => (
+              <>
+                <NTabPane name="myMusic" tab="相关课件">
+                  {/* <SelectMusic cardType={props.cardType} type="myMusic" /> */}
+                  <SelectRelated
+                    onAdd={(item: any) => emit('add', item)}
+                    onLook={(item: any) => emit('look', item)}
+                  />
+                </NTabPane>
+              </>
+            )
+          }}
+        </NTabs>
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/components/lesson-main/courseware-presets/select-related/index.module.less

@@ -147,5 +147,17 @@
       color: #777777;
       line-height: 15px;
     }
+
+    .addCourseBtn {
+      margin-top: 8px;
+      display: inline-block;
+      padding: 2px 6px;
+      background: #E8F4FF;
+      border-radius: 2px;
+      font-weight: 500;
+      font-size: max(10px, 10Px);
+      color: #0378EC;
+      cursor: pointer;
+    }
   }
 }

src/views/prepare-lessons/components/lesson-main/courseware-presets/select-related/item.tsx

@@ -1,51 +1,55 @@
-import { defineComponent } from 'vue';
-import styles from './index.module.less';
-import { NImage, NTooltip } from 'naive-ui';
-import TheNoticeBar from '/src/components/TheNoticeBar';
-
-export default defineComponent({
-  name: 'item-modal',
-  props: {
-    item: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  emits: ['look', 'add'],
-  setup(props, { emit }) {
-    return () => (
-      <div class={styles.itemModal}>
-        <div class={styles.itemCover}>
-          <NImage src={props.item.coverImg} objectFit="cover" previewDisabled />
-
-          <div class={styles.function}>
-            <NTooltip showArrow={false}>
-              {{
-                trigger: () => (
-                  <i class={styles.iconLook} onClick={() => emit('look')}></i>
-                ),
-                default: () => '预览课件'
-              }}
-            </NTooltip>
-            <NTooltip showArrow={false}>
-              {{
-                trigger: () => (
-                  <i class={styles.iconAdd} onClick={() => emit('add')}></i>
-                ),
-                default: () => '添加到我的课件'
-              }}
-            </NTooltip>
-          </div>
-        </div>
-
-        <div class={styles.itemContent}>
-          <p class={styles.itemTitle} onClick={() => emit('look')}>
-            <TheNoticeBar text={props.item.name} />
-          </p>
-
-          <div class={styles.itemSubject}>{props.item.instrumentNames}</div>
-        </div>
-      </div>
-    );
-  }
-});
+import { defineComponent } from 'vue';
+import styles from './index.module.less';
+import { NButton, NImage, NTooltip } from 'naive-ui';
+import TheNoticeBar from '/src/components/TheNoticeBar';
+
+export default defineComponent({
+  name: 'item-modal',
+  props: {
+    item: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ['look', 'add'],
+  setup(props, { emit }) {
+    return () => (
+      <div class={styles.itemModal}>
+        <div class={styles.itemCover}>
+          <NImage src={props.item.coverImg} objectFit="cover" previewDisabled />
+
+          <div class={styles.function}>
+            <NTooltip showArrow={false}>
+              {{
+                trigger: () => (
+                  <i class={styles.iconLook} onClick={() => emit('look')}></i>
+                ),
+                default: () => '预览课件'
+              }}
+            </NTooltip>
+            {/* <NTooltip showArrow={false}>
+              {{
+                trigger: () => (
+                  <i class={styles.iconAdd} onClick={() => emit('add')}></i>
+                ),
+                default: () => '添加到我的课件'
+              }}
+            </NTooltip> */}
+          </div>
+        </div>
+
+        <div class={styles.itemContent}>
+          <p class={styles.itemTitle} onClick={() => emit('look')}>
+            <TheNoticeBar text={props.item.name} />
+          </p>
+
+          {/* <div class={styles.itemSubject}>{props.item.instrumentNames}</div> */}
+
+          <div class={styles.addCourseBtn} onClick={() => emit('add')}>
+            添加课件
+          </div>
+        </div>
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/model/courseware-type/index.module.less

@@ -3,18 +3,19 @@
   border-radius: 13px;
   padding: 10px 10px 0;
   transition: all .2s ease;
+  background: #F4F7FD;
 
   &:hover {
-    background: #FFFFFF;
+    // background: #FFFFFF;
     box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
     border-radius: 15px;
     transition: all .2s ease;
 
-    &:hover .footer {
-      opacity: 1;
-      visibility: visible;
-      transition: all .2s ease;
-    }
+    // &:hover .footer {
+    //   opacity: 1;
+    //   visibility: visible;
+    //   transition: all .2s ease;
+    // }
   }
 
   &.coursewareTypeHover:hover {
@@ -268,27 +269,38 @@
       line-height: 16Px;
     }
   }
+
+  .addCourseBtn {
+    display: inline-block;
+    padding: 3px 8px;
+    background: #E8F4FF;
+    border-radius: 2px;
+    font-weight: 500;
+    font-size: max(10px, 10Px);
+    color: #0378EC;
+    cursor: pointer;
+  }
 }
 
 .operationBottom {
-  padding-bottom: 16px;
+  padding-bottom: 10px;
 
 
 }
 
 
 .footer {
-  opacity: 0;
-  visibility: hidden;
+  // opacity: 0;
+  // visibility: hidden;
   display: flex;
   align-items: center;
   padding-top: 10px;
-  padding-bottom: 8px;
-  position: absolute;
-  left: 10px;
-  right: 10px;
-  bottom: 12px;
-  background-color: #fff;
+  // padding-bottom: 8px;
+  // position: absolute;
+  // left: 10px;
+  // right: 10px;
+  // bottom: 12px;
+  // background-color: #fff;
   transition: all .2s ease;
 
   :global {
@@ -302,30 +314,32 @@
     flex: 1;
     height: 30Px !important;
     line-height: 30Px;
-    background: #198CFE;
+    background: #fff;
+    // background: #198CFE;
     border-radius: 7px;
     text-align: center;
     margin-right: 10px;
     font-size: max(14px, 13Px);
-    color: #fff;
+    // color: #fff;
+    color: #484F59;
     font-weight: 600;
     transition: all .2s ease;
 
     &:hover {
       background-color: rgba(25, 140, 254, 0.8);
       transition: all .2s ease;
-      // color: #fff;
+      color: #fff;
     }
 
     &.actionWork {
       margin-right: 0;
-      background: rgba(245, 246, 250, 1);
+      background: #fff;
       color: #484F59;
       padding: 0 13px;
 
       &:hover {
-        background-color: rgba(245, 246, 250, 1);
-        color: rgba(25, 140, 254, 1);
+        background-color: rgba(25, 140, 254, 0.8);
+        color: #fff;
       }
     }
   }
@@ -334,7 +348,7 @@
     height: 30Px !important;
     line-height: 30Px;
     width: 30Px !important;
-    background: rgba(245, 246, 250, 1);
+    background: #fff;
     border-radius: 7px;
     display: flex;
     align-items: center;

src/views/prepare-lessons/model/courseware-type/index.tsx

@@ -40,6 +40,10 @@ export default defineComponent({
     isShowOpenFlag: {
       type: Boolean,
       default: true
+    },
+    background: {
+      type: String,
+      default: '#F4F7FD'
     }
   },
   /** add */
@@ -61,7 +65,8 @@ export default defineComponent({
           props.isHoverShowAdd
             ? styles.coursewareTypeHover
             : styles.coursewareTypeHocoursewareTypeShow
-        ]}>
+        ]}
+        style={{ background: props.background }}>
         <div
           class={[
             styles.cover,
@@ -102,14 +107,14 @@ export default defineComponent({
                   default: () => '预览课件'
                 }}
               </NTooltip>
-              <NTooltip showArrow={false} duration={30} animated={false}>
+              {/* <NTooltip showArrow={false} duration={30} animated={false}>
                 {{
                   trigger: () => (
                     <i class={styles.iconAdd} onClick={() => emit('add')}></i>
                   ),
                   default: () => '添加到我的课件'
                 }}
-              </NTooltip>
+              </NTooltip> */}
             </div>
           )}
         </div>
@@ -122,6 +127,12 @@ export default defineComponent({
                 onClick={() => emit('editName')}></i> */}
             </div>
             <div class={styles.subjectName}>{props.item.instrumentNames}</div>
+
+            {props.isShowAdd && (
+              <div class={styles.addCourseBtn} onClick={() => emit('add')}>
+                添加课件
+              </div>
+            )}
           </div>
 
           {props.operate && (

src/views/prepare-lessons/model/related-class/index.tsx

@@ -1,213 +1,214 @@
-import { defineComponent, onMounted, onUnmounted, reactive, watch } from 'vue';
-import styles from './index.module.less';
-import { NCascader, NInput, NScrollbar, NSelect, NSpin } from 'naive-ui';
-import { useThrottleFn } from '@vueuse/core';
-import CoursewareType from '../courseware-type';
-import TheEmpty from '/src/components/TheEmpty';
-import { api_queryOpenCoursewareByPage } from '../../api';
-import { eventGlobal } from '/src/utils';
-
-export default defineComponent({
-  name: 'related-class',
-  props: {
-    tableList: {
-      type: Array,
-      default: () => []
-    },
-    instrumentList: {
-      type: Array,
-      default: () => []
-    },
-    instrumentId: {
-      type: [String, Number],
-      default: ''
-    },
-    coursewareDetailKnowledgeId: {
-      type: [String, Number],
-      default: ''
-    }
-  },
-  emits: ['close', 'add', 'click'],
-  setup(props, { emit }) {
-    const forms = reactive({
-      loading: false,
-      finshed: false, // 是否加载完
-      pagination: {
-        page: 1,
-        rows: 20
-      },
-      tableList: [] as any,
-      searchGroup: {
-        instrumentId: props.instrumentId ? props.instrumentId : '',
-        keyword: null
-      }
-    });
-    const getList = async () => {
-      try {
-        if (forms.pagination.page === 1) {
-          forms.loading = true;
-        }
-        // 查询公开课件列表
-        const { data } = await api_queryOpenCoursewareByPage({
-          coursewareDetailKnowledgeId: props.coursewareDetailKnowledgeId,
-          ...forms.searchGroup,
-          ...forms.pagination
-        });
-        const result = data.rows || [];
-        const tempList: any = [];
-        result.forEach((item: any) => {
-          // const index = forms.tableList.findIndex(
-          //   (i: any) => i.fromChapterLessonCoursewareId === item.id
-          // );
-          const firstItem: any =
-            item.chapterKnowledgeList[0]?.chapterKnowledgeMaterialList[0];
-          tempList.push({
-            id: item.id,
-            openFlag: item.openFlag,
-            openFlagEnable: item.openFlagEnable,
-            instrumentNames: item.instrumentNames,
-            fromChapterLessonCoursewareId: item.fromChapterLessonCoursewareId,
-            name: item.name,
-            coverImg: firstItem?.bizInfo.coverImg,
-            type: firstItem?.bizInfo.type,
-            isAdd: item.addFlag,
-            isNotWork: item.lessonPreTrainingNum <= 0 ? true : false // 是否布置作业
-          });
-        });
-
-        forms.loading = false;
-        forms.tableList.push(...tempList);
-
-        forms.finshed = data.pages <= data.current ? true : false;
-      } catch {
-        forms.loading = false;
-      }
-    };
-
-    // 检测数据是否存在
-    // watch(
-    //   () => props.tableList,
-    //   () => {
-    //     // fromChapterLessonCoursewareId;
-    //     forms.tableList.forEach((item: any) => {
-    //       const index = props.tableList.findIndex(
-    //         (i: any) => i.fromChapterLessonCoursewareId === item.id
-    //       );
-    //       item.isAdd = index !== -1 ? true : false;
-    //     });
-    //   }
-    // );
-
-    const throttleFn = useThrottleFn(() => {
-      forms.pagination.page = 1;
-      forms.tableList = [];
-      getList();
-    }, 500);
-
-    onMounted(() => {
-      getList();
-      eventGlobal.on('openCoursewareChanged', throttleFn);
-    });
-
-    onUnmounted(() => {
-      eventGlobal.off('openCoursewareChanged', throttleFn);
-    });
-    return () => (
-      <div class={styles.relatedClass}>
-        <div class={styles.attendClassSearch}>
-          <NCascader
-            placeholder="全部乐器"
-            clearable
-            options={[
-              { name: '全部乐器', id: '' },
-              ...(props.instrumentList as any)
-            ]}
-            v-model:value={forms.searchGroup.instrumentId}
-            onUpdate:value={() => throttleFn()}
-            checkStrategy="child"
-            showPath={false}
-            childrenField="instruments"
-            expandTrigger="hover"
-            labelField="name"
-            valueField="id"
-            filterable
-            style={{ width: '200px' }}
-          />
-          <NInput
-            placeholder="请输入课件标题关键词"
-            clearable
-            v-model:value={forms.searchGroup.keyword}
-            onKeyup={(e: KeyboardEvent) => {
-              if (e.code === 'Enter') {
-                throttleFn();
-              }
-            }}
-            onClear={() => throttleFn()}>
-            {{
-              prefix: () => (
-                <span
-                  class="icon-search-input"
-                  style={{ cursor: 'pointer' }}
-                  onClick={() => throttleFn()}></span>
-              )
-            }}
-          </NInput>
-        </div>
-
-        <NSpin show={forms.loading} size={'small'}>
-          <NScrollbar
-            class={styles.classList}
-            style={{
-              'max-height': `60vh`
-            }}
-            onScroll={(e: any) => {
-              const clientHeight = e.target?.clientHeight;
-              const scrollTop = e.target?.scrollTop;
-              const scrollHeight = e.target?.scrollHeight;
-              // 是否到底，是否加载完
-              if (
-                clientHeight + scrollTop + 20 >= scrollHeight &&
-                !forms.finshed &&
-                !forms.loading
-              ) {
-                throttleFn();
-              }
-            }}>
-            <div
-              style={{
-                'min-height': `60vh)`
-              }}
-              class={[
-                styles.listSection,
-                !forms.loading && forms.tableList.length <= 0
-                  ? styles.emptySection
-                  : ''
-              ]}>
-              {forms.tableList.length > 0 && (
-                <div class={[styles.list]}>
-                  {forms.tableList.map((item: any) => (
-                    <div class={[styles.itemWrap, styles.itemBlock, 'row-nav']}>
-                      <div class={styles.itemWrapBox}>
-                        <CoursewareType
-                          isHoverShowAdd={false}
-                          isShowOpenFlag={false}
-                          isShowAdd
-                          item={item}
-                          onAdd={() => {
-                            emit('add', item);
-                          }}
-                          onLook={() => emit('click', item)}
-                        />
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-              {!forms.loading && forms.tableList.length <= 0 && <TheEmpty />}
-            </div>
-          </NScrollbar>
-        </NSpin>
-      </div>
-    );
-  }
-});
+import { defineComponent, onMounted, onUnmounted, reactive, watch } from 'vue';
+import styles from './index.module.less';
+import { NCascader, NInput, NScrollbar, NSelect, NSpin } from 'naive-ui';
+import { useThrottleFn } from '@vueuse/core';
+import CoursewareType from '../courseware-type';
+import TheEmpty from '/src/components/TheEmpty';
+import { api_queryOpenCoursewareByPage } from '../../api';
+import { eventGlobal } from '/src/utils';
+
+export default defineComponent({
+  name: 'related-class',
+  props: {
+    tableList: {
+      type: Array,
+      default: () => []
+    },
+    instrumentList: {
+      type: Array,
+      default: () => []
+    },
+    instrumentId: {
+      type: [String, Number],
+      default: ''
+    },
+    coursewareDetailKnowledgeId: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  emits: ['close', 'add', 'click'],
+  setup(props, { emit }) {
+    const forms = reactive({
+      loading: false,
+      finshed: false, // 是否加载完
+      pagination: {
+        page: 1,
+        rows: 20
+      },
+      tableList: [] as any,
+      searchGroup: {
+        instrumentId: props.instrumentId ? props.instrumentId : '',
+        keyword: null
+      }
+    });
+    const getList = async () => {
+      try {
+        if (forms.pagination.page === 1) {
+          forms.loading = true;
+        }
+        // 查询公开课件列表
+        const { data } = await api_queryOpenCoursewareByPage({
+          coursewareDetailKnowledgeId: props.coursewareDetailKnowledgeId,
+          ...forms.searchGroup,
+          ...forms.pagination
+        });
+        const result = data.rows || [];
+        const tempList: any = [];
+        result.forEach((item: any) => {
+          // const index = forms.tableList.findIndex(
+          //   (i: any) => i.fromChapterLessonCoursewareId === item.id
+          // );
+          const firstItem: any =
+            item.chapterKnowledgeList[0]?.chapterKnowledgeMaterialList[0];
+          tempList.push({
+            id: item.id,
+            openFlag: item.openFlag,
+            openFlagEnable: item.openFlagEnable,
+            instrumentNames: item.instrumentNames,
+            fromChapterLessonCoursewareId: item.fromChapterLessonCoursewareId,
+            name: item.name,
+            coverImg: firstItem?.bizInfo.coverImg,
+            type: firstItem?.bizInfo.type,
+            isAdd: item.addFlag,
+            isNotWork: item.lessonPreTrainingNum <= 0 ? true : false // 是否布置作业
+          });
+        });
+
+        forms.loading = false;
+        forms.tableList.push(...tempList);
+
+        forms.finshed = data.pages <= data.current ? true : false;
+      } catch {
+        forms.loading = false;
+      }
+    };
+
+    // 检测数据是否存在
+    // watch(
+    //   () => props.tableList,
+    //   () => {
+    //     // fromChapterLessonCoursewareId;
+    //     forms.tableList.forEach((item: any) => {
+    //       const index = props.tableList.findIndex(
+    //         (i: any) => i.fromChapterLessonCoursewareId === item.id
+    //       );
+    //       item.isAdd = index !== -1 ? true : false;
+    //     });
+    //   }
+    // );
+
+    const throttleFn = useThrottleFn(() => {
+      forms.pagination.page = 1;
+      forms.tableList = [];
+      getList();
+    }, 500);
+
+    onMounted(() => {
+      getList();
+      eventGlobal.on('openCoursewareChanged', throttleFn);
+    });
+
+    onUnmounted(() => {
+      eventGlobal.off('openCoursewareChanged', throttleFn);
+    });
+    return () => (
+      <div class={styles.relatedClass}>
+        <div class={styles.attendClassSearch}>
+          <NCascader
+            placeholder="全部乐器"
+            clearable
+            options={[
+              { name: '全部乐器', id: '' },
+              ...(props.instrumentList as any)
+            ]}
+            v-model:value={forms.searchGroup.instrumentId}
+            onUpdate:value={() => throttleFn()}
+            checkStrategy="child"
+            showPath={false}
+            childrenField="instruments"
+            expandTrigger="hover"
+            labelField="name"
+            valueField="id"
+            filterable
+            style={{ width: '200px' }}
+          />
+          <NInput
+            placeholder="请输入课件标题关键词"
+            clearable
+            v-model:value={forms.searchGroup.keyword}
+            onKeyup={(e: KeyboardEvent) => {
+              if (e.code === 'Enter') {
+                throttleFn();
+              }
+            }}
+            onClear={() => throttleFn()}>
+            {{
+              prefix: () => (
+                <span
+                  class="icon-search-input"
+                  style={{ cursor: 'pointer' }}
+                  onClick={() => throttleFn()}></span>
+              )
+            }}
+          </NInput>
+        </div>
+
+        <NSpin show={forms.loading} size={'small'}>
+          <NScrollbar
+            class={styles.classList}
+            style={{
+              'max-height': `60vh`
+            }}
+            onScroll={(e: any) => {
+              const clientHeight = e.target?.clientHeight;
+              const scrollTop = e.target?.scrollTop;
+              const scrollHeight = e.target?.scrollHeight;
+              // 是否到底，是否加载完
+              if (
+                clientHeight + scrollTop + 20 >= scrollHeight &&
+                !forms.finshed &&
+                !forms.loading
+              ) {
+                throttleFn();
+              }
+            }}>
+            <div
+              style={{
+                'min-height': `60vh)`
+              }}
+              class={[
+                styles.listSection,
+                !forms.loading && forms.tableList.length <= 0
+                  ? styles.emptySection
+                  : ''
+              ]}>
+              {forms.tableList.length > 0 && (
+                <div class={[styles.list]}>
+                  {forms.tableList.map((item: any) => (
+                    <div class={[styles.itemWrap, styles.itemBlock, 'row-nav']}>
+                      <div class={styles.itemWrapBox}>
+                        <CoursewareType
+                          isHoverShowAdd={false}
+                          isShowOpenFlag={false}
+                          isShowAdd
+                          item={item}
+                          background={'#fff'}
+                          onAdd={() => {
+                            emit('add', item);
+                          }}
+                          onLook={() => emit('click', item)}
+                        />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+              {!forms.loading && forms.tableList.length <= 0 && <TheEmpty />}
+            </div>
+          </NScrollbar>
+        </NSpin>
+      </div>
+    );
+  }
+});