修改样式

src/components/Metronome/MetronomeBox.vue

@@ -45,6 +45,8 @@
       <img class="close" @click="handleCloseMet" src="./imgs/close.png" />
     </div>
   </div>
+
+  <!-- @mask-click="handleCloseMet" -->
   <NModal
     :style="{
       ...dragStyle,
@@ -54,8 +56,7 @@
     v-model:show="metronomeShow"
     :class="[dragClass, windowMet ? 'transformOrigin' : '']"
     :display-directive="'show'"
-    :mask-closable="modalClickMask"
-    @mask-click="handleCloseMet"
+    :mask-closable="false"
     @esc="handleCloseMet"
     @after-enter="
       () => {

src/views/attend-class/index.module.less

@@ -1,879 +1,926 @@
-.playContent {
-  position: relative;
-  width: 100vw;
-  height: 100vh;
-  background-color: #000;
-  overflow: hidden;
-  --plyr-color-main: var(--van-primary);
-  --plyr-range-track-height: 3px;
-}
-
-.assignHomeworkClose {
-  position: absolute;
-  top: 40px;
-  left: 40px;
-  width: 60px;
-  height: 65px;
-  cursor: pointer;
-  transition: all 0.5s;
-
-  img {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.coursewarePlay {
-  position: relative;
-  height: 100vh;
-  margin: 0 auto;
-  overflow: hidden;
-}
-
-.playModel {
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  box-shadow: inset 0px 0px 164px 0px rgba(0, 0, 0, 1);
-  pointer-events: none;
-}
-
-.headerContainer {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 46px;
-  // background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
-  background-color: rgba(0, 0, 0, 0.5);
-  transition: transform 0.5s;
-  box-sizing: border-box;
-  font-size: max(16px, 14Px);
-  color: #fff;
-  pointer-events: none;
-
-  div {
-    box-sizing: border-box;
-  }
-}
-
-.backBtn {
-  color: #fff;
-  height: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  z-index: 10;
-  padding: 0 15px;
-
-  :global {
-    .van-icon {
-      margin-right: 8px;
-    }
-  }
-}
-
-.headRight {
-  position: relative;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-  height: 100%;
-  padding-right: 15px;
-
-  .rightBtn {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    padding: 0 10px;
-
-    img {
-      width: 22px;
-      height: 22px;
-      display: block;
-    }
-  }
-}
-
-.menu {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 17px;
-  font-weight: bold;
-  color: #fff;
-}
-
-.tabsContent {
-  width: 100vw;
-  height: 100vh;
-
-  :global {
-    .van-tabs__wrap {
-      display: none !important;
-    }
-
-    .van-tabs__content {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-
-.wraps {
-  width: 100%;
-  height: 100%;
-  // transform-style: preserve-3d;
-  perspective: (32rem);
-  transition-timing-function: initial;
-}
-
-.itemDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: #000;
-  transform-style: preserve-3d;
-  transition-property: transform, opacity, height;
-  backface-visibility: hidden;
-  overflow: hidden;
-  z-index: 1;
-
-  &.itemActive {
-    z-index: 10;
-  }
-
-  &.acitveAnimation {
-    transition-duration: 0.8s;
-  }
-
-  &.show {
-    display: block;
-  }
-
-  &.hide {
-    display: none;
-  }
-
-  video {
-    width: 100%;
-    height: 100%;
-  }
-
-  img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-}
-
-.rightFixedBtns {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  right: 16px;
-  z-index: 10;
-}
-
-.fullBtn {
-  width: 60px;
-  height: 60px;
-  overflow: hidden;
-
-  &.point {
-    margin: 20px 0 0;
-  }
-
-  img {
-    width: 100%;
-    height: 100%;
-  }
-
-  &:active {
-    opacity: 0.8;
-  }
-
-  &.iconUp,
-  &.iconDown {
-    margin-top: 20px;
-  }
-
-  &.btnsDisabled {
-    opacity: 0;
-    pointer-events: none;
-    display: none;
-  }
-}
-
-:global {
-  .top-enter-active,
-  .top-leave-active {
-    transition: transform 0.5s;
-  }
-
-  .top-enter-from,
-  .top-leave-to {
-    transform: translateY(-100%);
-  }
-
-  .right-enter-active,
-  .right-leave-active {
-    transition: all 0.5s;
-  }
-
-  .right-enter-from,
-  .right-leave-to {
-    right: -60px;
-    opacity: 0;
-  }
-
-  .bottom-enter-active,
-  .bottom-leave-active {
-    transition: transform 0.5s;
-  }
-
-  .bottom-enter-from,
-  .bottom-leave-to {
-    transform: translateY(100%);
-  }
-}
-
-.loadWrap {
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(45deg, #21232a, #111218);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.drawerContainer {
-  width: 860px;
-  :global{
-    .n-card-header{
-      background-color: #ffffff !important;
-    }
-    .n-card__content{
-      position: relative;
-      .bom_drag{
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        z-index: 1;
-      }
-    }
-  }
-}
-
-.sectionAnimate {
-  opacity: 0;
-  pointer-events: none;
-  transform: translateY(100%);
-  transition: all 0.5s;
-}
-
-.sectionAnimateUp {
-  opacity: 0;
-  pointer-events: none;
-  transform: translateY(-100%);
-  transition: all 0.3s;
-}
-
-.switchDisplaySection {
-  position: absolute;
-  right: 0px;
-  bottom: 0px;
-  z-index: 199;
-  transition: all 0.3s;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 0 40px;
-  height: 126px;
-  background-color: rgba(0, 0, 0, 0.7);
-  // pointer-events: none;
-
-  .switchSpace {
-    gap: 0 48px !important;
-  }
-
-  .btnItem {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    cursor: pointer;
-    pointer-events: auto;
-
-    &.btnsDisabled {
-      opacity: 0.7;
-      cursor: not-allowed;
-    }
-
-    img {
-      width: 56px;
-      height: 56px;
-    }
-
-    p {
-      padding-top: 6px;
-      font-size: 18px;
-      color: #ffffff;
-      line-height: 25px;
-      text-align: center;
-    }
-  }
-}
-
-.attendClassModal {
-  width: 442px;
-  border-radius: 16px;
-  overflow: hidden;
-
-  :global {
-    .n-card-header {
-      position: relative;
-      padding: 20px 18px;
-      text-align: center;
-      font-size: 22px;
-      font-weight: 600;
-      color: #131415;
-      line-height: 30px;
-    }
-
-    .n-card-header__close {
-      position: absolute;
-      right: 18px;
-    }
-
-    .n-card__content {
-      padding: 0;
-    }
-
-    .n-base-select-menu .n-base-select-option {
-      font-size: max(15px, 12Px) !important;
-    }
-  }
-
-  .modelAttendContent {
-    font-size: max(18px, 16px);
-    color: #777777;
-    line-height: 30px;
-    text-align: center;
-  }
-
-  .modelAttendBtnGroup {
-    padding: 40px 0;
-    justify-content: center !important;
-
-    :global {
-      .n-button {
-        height: 48px !important;
-        min-width: 156px;
-      }
-    }
-  }
-}
-
-.trainClassModal {
-  width: 728px;
-
-  :global {
-    .n-card-header {
-      background: #f5f6fa;
-    }
-  }
-}
-
-.workContainer {
-  // padding: 20px 40px 40px;
-
-  h2 {
-    font-size: 26px;
-    text-align: center;
-  }
-}
-
-.toolboxImg {
-  width: 83px;
-  height: 83px;
-  position: absolute;
-  right: 16px;
-  bottom: 164px;
-  cursor: pointer;
-  z-index: 1000;
-}
-
-.isDragIng {
-  width: 83px;
-  height: 83px;
-}
-
-.toolClassImg {
-  width: 83px;
-  height: 83px;
-  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: row;
-  align-items: center;
-  padding: 10px 8px;
-  justify-content: space-between;
-
-  .booxToolItem {
-    margin: 0 12px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    font-size: 12px;
-    cursor: pointer;
-    text-align: center;
-
-    &: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;
-}
-
-.showModalTone {
-  width: 500px;
-
-  .studentRemove {
-    padding: 32px 40px 46px;
-
-    p {
-      font-size: 18px;
-      color: #777777;
-      line-height: 30px;
-      text-align: center;
-
-      span {
-        color: #ea4132;
-      }
-    }
-  }
-}
-.removeVisiable {
-  width: 432px;
-  position: relative;
-
-  :global {
-    .bom_drag{
-      height: 36px;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      z-index: 1;
-    }
-    .n-card-header {
-      font-size: max(22px, 16Px);
-    }
-  }
-
-  .studentRemove {
-    padding: 20px 40px 0;
-
-    p {
-      font-size: max(18px, 14Px);
-      color: #777777;
-      line-height: 30px;
-      text-align: center;
-
-      span {
-        color: #ea4132;
-      }
-    }
-  }
-
-  .btnGroupModal {
-    padding: 32px 0;
-
-    :global {
-      .n-button {
-        height: 47px;
-        min-width: 156px;
-      }
-    }
-  }
-}
-
-.iframePpt {
-  width: 100%;
-  height: 100%;
-  position: relative;
-
-  .pptBox {
-    position: absolute;
-    width: 100%;
-    height: 80%;
-    left: 0;
-    top: 10%;
-    z-index: 9;
-    background: transparent;
-  }
-}
-
-.rightColumn,
-.leftColumn {
-  position: absolute;
-  right: 14px;
-  bottom: 130px;
-  background: rgba(0, 0, 0, 0.3);
-  border-radius: 10px;
-  width: 52px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 10px;
-  transition: all 0.3s;
-  .columnItemBox {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-    padding: 5px 0;
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-  .columnItem {
-    padding: 5px;
-    cursor: pointer;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 9;
-    &.active,
-    &:hover {
-      background: RGBA(255, 255, 255, 0.3);
-      border-radius: 8px;
-      z-index: 9;
-    }
-    img {
-      width: 28px;
-      height: 28px;
-      z-index: 9;
-    }
-  }
-
-  .itemDisabled {
-    opacity: 0.7;
-    cursor: not-allowed;
-  }
-}
-:global {
-  .columnItemTooltip.n-tooltip {
-    background: #ffffff !important;
-    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1) !important;
-    border-radius: 20px !important;
-    padding: 0 !important;
-    margin-left: 22px !important;
-    &.rightColumnItemTooltip {
-      margin-right: 22px !important;
-    }
-    .tools {
-      padding: 10px 20px;
-      display: flex;
-      > div {
-        display: flex;
-        flex-direction: column;
-        margin-right: 16px;
-        cursor: pointer;
-        &.active,
-        &:hover {
-          opacity: 0.8;
-        }
-        &:last-child {
-          margin-right: 0;
-        }
-        img {
-          width: 56px;
-          height: 56px;
-        }
-        .tit {
-          margin-top: 4px;
-          text-align: center;
-          font-weight: 400;
-          font-size: max(6px, 12Px);
-          color: #383a3d;
-        }
-      }
-    }
-  }
-}
-.leftColumn {
-  left: 14px;
-}
-.rightColumnHide {
-  transform: translate(80px);
-}
-.leftColumnHide {
-  transform: translate(-80px);
-}
-.rightHideIcon,
-.leftHideIcon {
-  width: 28px;
-  height: 60px;
-  position: absolute;
-  right: 0;
-  bottom: 300px;
-  transform: translate(60px);
-  z-index: 10;
-  cursor: pointer;
-  // transition: all 0.5s;
-}
-.leftHideIcon {
-  left: 0;
-  transform: translate(-60px);
-  background: url("./image/left_hide_icon.png") no-repeat;
-  background-size: 100% 100%;
-  &:hover{
-    background: url("./image/left_hide_icon_act.png") no-repeat;
-    background-size: 100% 100%;
-  }
-}
-.rightHideIcon{
-  background: url("./image/right_hide_icon.png") no-repeat;
-  background-size: 100% 100%;
-  &:hover{
-    background: url("./image/right_hide_icon_act.png") no-repeat;
-    background-size: 100% 100%;
-  }
-}
-.rightIconShow {
-  animation: rightIn 0.3s ease 0.3s;
-  animation-fill-mode: forwards;
-}
-.leftIconShow {
-  animation: leftIn 0.3s ease 0.3s;
-  animation-fill-mode: forwards;
-}
-@keyframes rightIn {
-  0% {
-    transform: translate(60px, -50%);
-  }
-
-  100% {
-    transform: translate(0, -50%);
-  }
-}
-@keyframes leftIn {
-  0% {
-    transform: translate(-60px, -50%);
-  }
-
-  100% {
-    transform: translate(0, -50%);
-  }
-}
-
-.instrumentContainer {
-  background: #ffffff;
-  padding: 68px;
-  height: 100%;
-}
-
-:global{
-  .selResourBoxClass_drag{
-    .select-resource{
-      padding-bottom: 0;
-      height: 50vh;
-      .spaceSectionBox{
-        width: calc(100% - 360px) !important;
-      }
-      .list_container{
-        --listContainerHeight:50vh;
-        .selresources_item_Wrap{
-          width: calc(100% / 3) !important;
-          padding-bottom: calc(100% / 3 * 0.73333) !important;
-        }
-      }
-    }
-  }
-}
-.selectMusicModal {
-  position: relative;
-  width: 1050px;
-  :global {
-    .n-card-header {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-
-      .n-card-header__main {
-        color: #fff;
-      }
-    }
-  }
-}
-
-.selectClassModal {
-  width: 1000px;
-}
-
-.workVisiable {
-  width: 1200px;
-  :global {
-    .bom_drag{
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      z-index: 1;
-    }
-  }
-}
-:global{
-  .metronomeConBoxClass_drag{
-    .bom_drag{
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      z-index: 1;
-    }
-  }
-}
-: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;
-}
-.workContainer {
-  display: flex;
-  align-items: center;
-
-  .workTrain {
-    flex: 1;
-    height: 55vh;
-
-    & > div {
-      padding-top: 15px;
-    }
-  }
-  :global {
-    .train-container {
-      // max-height: calc(var(--window-page-lesson-height) - 135px) !important;
-      max-height: calc(var(--window-page-lesson-height) - 100px) !important;
-
-      .train-listSection {
-        min-height: calc(var(--window-page-lesson-height) - 100px) !important;
-      }
-    }
-  }
-
-  .resourceMain {
-    flex: 0 0 360px;
-    height: 55vh;
-    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
-  }
-}
-:global{
-  .chapterConBoxClass_drag,.resourcesConBoxClass_drag{
-    .n-card-header .n-card-header__main{
-      text-align: left;
-      position: relative;
-      font-weight: 600;
-      font-size: 22px;
-      color: #131415;
-      padding-left: 30px;
-      &::before{
-        content: "";
-        position: absolute;
-        width: 5px;
-        height: 15px;
-        background: #198CFE;
-        left: 15px;
-        top: 50%;
-        transform: translateY(-50%);
-      }
-    }
-  }
-}
+.playContent {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  background-color: #000;
+  overflow: hidden;
+  --plyr-color-main: var(--van-primary);
+  --plyr-range-track-height: 3px;
+}
+
+.assignHomeworkClose {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  width: 60px;
+  height: 65px;
+  cursor: pointer;
+  transition: all 0.5s;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.coursewarePlay {
+  position: relative;
+  height: 100vh;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.playModel {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  box-shadow: inset 0px 0px 164px 0px rgba(0, 0, 0, 1);
+  pointer-events: none;
+}
+
+.headerContainer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 46px;
+  // background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: transform 0.5s;
+  box-sizing: border-box;
+  font-size: max(16px, 14Px);
+  color: #fff;
+  pointer-events: none;
+
+  div {
+    box-sizing: border-box;
+  }
+}
+
+.backBtn {
+  color: #fff;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 10;
+  padding: 0 15px;
+
+  :global {
+    .van-icon {
+      margin-right: 8px;
+    }
+  }
+}
+
+.headRight {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  height: 100%;
+  padding-right: 15px;
+
+  .rightBtn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    padding: 0 10px;
+
+    img {
+      width: 22px;
+      height: 22px;
+      display: block;
+    }
+  }
+}
+
+.menu {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 17px;
+  font-weight: bold;
+  color: #fff;
+}
+
+.tabsContent {
+  width: 100vw;
+  height: 100vh;
+
+  :global {
+    .van-tabs__wrap {
+      display: none !important;
+    }
+
+    .van-tabs__content {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.wraps {
+  width: 100%;
+  height: 100%;
+  // transform-style: preserve-3d;
+  perspective: (32rem);
+  transition-timing-function: initial;
+}
+
+.itemDiv {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  transform-style: preserve-3d;
+  transition-property: transform, opacity, height;
+  backface-visibility: hidden;
+  overflow: hidden;
+  z-index: 1;
+
+  &.itemActive {
+    z-index: 10;
+  }
+
+  &.acitveAnimation {
+    transition-duration: 0.8s;
+  }
+
+  &.show {
+    display: block;
+  }
+
+  &.hide {
+    display: none;
+  }
+
+  video {
+    width: 100%;
+    height: 100%;
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
+.rightFixedBtns {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 16px;
+  z-index: 10;
+}
+
+.fullBtn {
+  width: 60px;
+  height: 60px;
+  overflow: hidden;
+
+  &.point {
+    margin: 20px 0 0;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+
+  &:active {
+    opacity: 0.8;
+  }
+
+  &.iconUp,
+  &.iconDown {
+    margin-top: 20px;
+  }
+
+  &.btnsDisabled {
+    opacity: 0;
+    pointer-events: none;
+    display: none;
+  }
+}
+
+:global {
+
+  .top-enter-active,
+  .top-leave-active {
+    transition: transform 0.5s;
+  }
+
+  .top-enter-from,
+  .top-leave-to {
+    transform: translateY(-100%);
+  }
+
+  .right-enter-active,
+  .right-leave-active {
+    transition: all 0.5s;
+  }
+
+  .right-enter-from,
+  .right-leave-to {
+    right: -60px;
+    opacity: 0;
+  }
+
+  .bottom-enter-active,
+  .bottom-leave-active {
+    transition: transform 0.5s;
+  }
+
+  .bottom-enter-from,
+  .bottom-leave-to {
+    transform: translateY(100%);
+  }
+}
+
+.loadWrap {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(45deg, #21232a, #111218);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.drawerContainer {
+  width: 860px;
+
+  :global {
+    .n-card-header {
+      background-color: #ffffff !important;
+    }
+
+    .n-card__content {
+      position: relative;
+
+      .bom_drag {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: 1;
+      }
+    }
+  }
+}
+
+.sectionAnimate {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(100%);
+  transition: all 0.5s;
+}
+
+.sectionAnimateUp {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-100%);
+  transition: all 0.3s;
+}
+
+.switchDisplaySection {
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  z-index: 199;
+  transition: all 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 40px;
+  height: 126px;
+  background-color: rgba(0, 0, 0, 0.7);
+  // pointer-events: none;
+
+  .switchSpace {
+    gap: 0 48px !important;
+  }
+
+  .btnItem {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    cursor: pointer;
+    pointer-events: auto;
+
+    &.btnsDisabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+    }
+
+    img {
+      width: 56px;
+      height: 56px;
+    }
+
+    p {
+      padding-top: 6px;
+      font-size: 18px;
+      color: #ffffff;
+      line-height: 25px;
+      text-align: center;
+    }
+  }
+}
+
+.attendClassModal {
+  width: 442px;
+  border-radius: 16px;
+  overflow: hidden;
+
+  :global {
+    .n-card-header {
+      position: relative;
+      padding: 20px 18px;
+      text-align: center;
+      font-size: 22px;
+      font-weight: 600;
+      color: #131415;
+      line-height: 30px;
+    }
+
+    .n-card-header__close {
+      position: absolute;
+      right: 18px;
+    }
+
+    .n-card__content {
+      padding: 0;
+    }
+
+    .n-base-select-menu .n-base-select-option {
+      font-size: max(15px, 12Px) !important;
+    }
+  }
+
+  .modelAttendContent {
+    font-size: max(18px, 16px);
+    color: #777777;
+    line-height: 30px;
+    text-align: center;
+  }
+
+  .modelAttendBtnGroup {
+    padding: 40px 0;
+    justify-content: center !important;
+
+    :global {
+      .n-button {
+        height: 48px !important;
+        min-width: 156px;
+      }
+    }
+  }
+}
+
+.trainClassModal {
+  width: 728px;
+
+  :global {
+    .n-card-header {
+      background: #f5f6fa;
+    }
+  }
+}
+
+.workContainer {
+  // padding: 20px 40px 40px;
+
+  h2 {
+    font-size: 26px;
+    text-align: center;
+  }
+}
+
+.toolboxImg {
+  width: 83px;
+  height: 83px;
+  position: absolute;
+  right: 16px;
+  bottom: 164px;
+  cursor: pointer;
+  z-index: 1000;
+}
+
+.isDragIng {
+  width: 83px;
+  height: 83px;
+}
+
+.toolClassImg {
+  width: 83px;
+  height: 83px;
+  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: row;
+  align-items: center;
+  padding: 10px 8px;
+  justify-content: space-between;
+
+  .booxToolItem {
+    margin: 0 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: 12px;
+    cursor: pointer;
+    text-align: center;
+
+    &: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;
+}
+
+.showModalTone {
+  width: 500px;
+
+  .studentRemove {
+    padding: 32px 40px 46px;
+
+    p {
+      font-size: 18px;
+      color: #777777;
+      line-height: 30px;
+      text-align: center;
+
+      span {
+        color: #ea4132;
+      }
+    }
+  }
+}
+
+.removeVisiable {
+  width: 432px;
+  position: relative;
+
+  :global {
+    .bom_drag {
+      height: 36px;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+    }
+
+    .n-card-header {
+      font-size: max(22px, 16Px);
+    }
+  }
+
+  .studentRemove {
+    padding: 20px 40px 0;
+
+    p {
+      font-size: max(18px, 14Px);
+      color: #777777;
+      line-height: 30px;
+      text-align: center;
+
+      span {
+        color: #ea4132;
+      }
+    }
+  }
+
+  .btnGroupModal {
+    padding: 32px 0;
+
+    :global {
+      .n-button {
+        height: 47px;
+        min-width: 156px;
+      }
+    }
+  }
+}
+
+.iframePpt {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .pptBox {
+    position: absolute;
+    width: 100%;
+    height: 80%;
+    left: 0;
+    top: 10%;
+    z-index: 9;
+    background: transparent;
+  }
+}
+
+.rightColumn,
+.leftColumn {
+  position: absolute;
+  right: 14px;
+  bottom: 130px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+  width: 52px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px;
+  transition: all 0.3s;
+
+  .columnItemBox {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 5px 0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .columnItem {
+    padding: 5px;
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9;
+
+    &.active,
+    &:hover {
+      background: RGBA(255, 255, 255, 0.3);
+      border-radius: 8px;
+      z-index: 9;
+    }
+
+    img {
+      width: 28px;
+      height: 28px;
+      z-index: 9;
+    }
+  }
+
+  .itemDisabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+}
+
+:global {
+  .columnItemTooltip.n-tooltip {
+    background: #ffffff !important;
+    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1) !important;
+    border-radius: 20px !important;
+    padding: 0 !important;
+    margin-left: 22px !important;
+
+    &.rightColumnItemTooltip {
+      margin-right: 22px !important;
+    }
+
+    .tools {
+      padding: 10px 20px;
+      display: flex;
+
+      >div {
+        display: flex;
+        flex-direction: column;
+        margin-right: 16px;
+        cursor: pointer;
+
+        &.active,
+        &:hover {
+          opacity: 0.8;
+        }
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        img {
+          width: 56px;
+          height: 56px;
+        }
+
+        .tit {
+          margin-top: 4px;
+          text-align: center;
+          font-weight: 400;
+          font-size: max(6px, 12Px);
+          color: #383a3d;
+        }
+      }
+    }
+  }
+}
+
+.leftColumn {
+  left: 14px;
+}
+
+.rightColumnHide {
+  transform: translate(80px);
+}
+
+.leftColumnHide {
+  transform: translate(-80px);
+}
+
+.rightHideIcon,
+.leftHideIcon {
+  width: 28px;
+  height: 60px;
+  position: absolute;
+  right: 0;
+  bottom: 300px;
+  transform: translate(60px);
+  z-index: 10;
+  cursor: pointer;
+  // transition: all 0.5s;
+}
+
+.leftHideIcon {
+  left: 0;
+  transform: translate(-60px);
+  background: url("./image/left_hide_icon.png") no-repeat;
+  background-size: 100% 100%;
+
+  &:hover {
+    background: url("./image/left_hide_icon_act.png") no-repeat;
+    background-size: 100% 100%;
+  }
+}
+
+.rightHideIcon {
+  background: url("./image/right_hide_icon.png") no-repeat;
+  background-size: 100% 100%;
+
+  &:hover {
+    background: url("./image/right_hide_icon_act.png") no-repeat;
+    background-size: 100% 100%;
+  }
+}
+
+.rightIconShow {
+  animation: rightIn 0.3s ease 0.3s;
+  animation-fill-mode: forwards;
+}
+
+.leftIconShow {
+  animation: leftIn 0.3s ease 0.3s;
+  animation-fill-mode: forwards;
+}
+
+@keyframes rightIn {
+  0% {
+    transform: translate(60px, -50%);
+  }
+
+  100% {
+    transform: translate(0, -50%);
+  }
+}
+
+@keyframes leftIn {
+  0% {
+    transform: translate(-60px, -50%);
+  }
+
+  100% {
+    transform: translate(0, -50%);
+  }
+}
+
+.instrumentContainer {
+  background: #ffffff;
+  padding: 68px;
+  height: 100%;
+}
+
+:global {
+  .selResourBoxClass_drag {
+    .select-resource {
+      padding-bottom: 0;
+      height: 50vh;
+
+      .spaceSectionBox {
+        width: calc(100% - 360px) !important;
+      }
+
+      .list_container {
+        --listContainerHeight: 50vh;
+
+        .selresources_item_Wrap {
+          width: calc(100% / 3) !important;
+          padding-bottom: calc(100% / 3 * 0.73333) !important;
+        }
+      }
+    }
+  }
+}
+
+.selectMusicModal {
+  position: relative;
+  width: 1050px;
+
+  :global {
+    .n-card-header {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+
+      .n-card-header__main {
+        color: #fff;
+      }
+    }
+  }
+}
+
+.selectClassModal {
+  width: 1000px;
+}
+
+.workVisiable {
+  width: 1358px;
+
+  :global {
+    .bom_drag {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+    }
+  }
+}
+
+:global {
+  .metronomeConBoxClass_drag {
+    .bom_drag {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+    }
+  }
+}
+
+: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;
+}
+
+.workContainer {
+  display: flex;
+  align-items: center;
+
+  .workTrain {
+    flex: 1;
+    height: 55vh;
+
+    &>div {
+      padding-top: 15px;
+    }
+  }
+
+  :global {
+    .train-container {
+      // max-height: calc(var(--window-page-lesson-height) - 135px) !important;
+      max-height: calc(var(--window-page-lesson-height) - 100px) !important;
+
+      .train-listSection {
+        min-height: calc(var(--window-page-lesson-height) - 100px) !important;
+      }
+    }
+  }
+
+  .resourceMain {
+    flex: 0 0 360px;
+    height: 55vh;
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+  }
+}
+
+:global {
+
+  .chapterConBoxClass_drag,
+  .resourcesConBoxClass_drag {
+    .n-card-header .n-card-header__main {
+      text-align: left;
+      position: relative;
+      font-weight: 600;
+      font-size: 22px;
+      color: #131415;
+      padding-left: 30px;
+
+      &::before {
+        content: "";
+        position: absolute;
+        width: 5px;
+        height: 15px;
+        background: #198CFE;
+        left: 15px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+  }
+}

src/views/attend-class/model/train-type/index.module.less

@@ -423,6 +423,6 @@
 }
 
 .reportModel {
-  width: 1030px;
+  width: 1200px;
   overflow: hidden;
-}
+}

src/views/classList/work-item/index.module.less

@@ -173,6 +173,6 @@
 }
 
 .reportModel {
-  width: 1030px;
+  width: 1200px;
   overflow: hidden;
 }

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

@@ -349,7 +349,7 @@
 }
 
 .workVisiable {
-  width: 1258px;
+  width: 1358px;
 }
 
 .workContainer {

src/views/studentList/index.module.less

@@ -289,7 +289,7 @@
 }
 
 .reportModel {
-  width: 1030px;
+  width: 1200px;
   overflow: hidden;
 }