优化问题

src/components/layout/modals/suggestion-option.module.less

@@ -1,434 +1,435 @@
-.pxToVW (@px, @attr: width) {
-  @vw: (@px / 1920) * 100;
-  @{attr}:~"@{vw}vw";
-}
-
-
-.isHidden {
-  background: url(../images/inBack.png) no-repeat,
-    url('../images/inFront.png') no-repeat,
-    url(../images/inBack2.png) no-repeat,
-    url(../images/inBack3.png) no-repeat,
-    url(../images/inBack4.png) no-repeat,
-    url(../images/inBack5.png) no-repeat,
-    url('../images/submitBtn.png') no-repeat,
-    url('../images/sealing.png') no-repeat,
-    url('../images/boxBg.png') no-repeat;
-  position: absolute;
-  left: -999999px;
-  top: -9999px;
-  background-size: 754px 672px;
-}
-
-.hiddenBox {
-  visibility: hidden;
-}
-
-.showBox {
-  visibility: visible;
-}
-
-.suggestOption {
-  .updateBtnGroup {
-    padding: 0;
-    justify-content: center !important;
-    position: relative;
-
-    :global {
-      .n-button {
-        height: 48px !important;
-        min-width: 156px;
-      }
-    }
-  }
-
-  .suggestSelect {
-    :global {
-      .n-base-selection__border {
-        border: 1px solid #AADCFF;
-      }
-
-
-    }
-  }
-
-
-  @keyframes forDown {
-    0% {
-      top: 0
-    }
-
-    100% {
-      top: 460px
-    }
-  }
-
-
-  @keyframes forUp {
-    0% {
-      top: 0
-    }
-
-    100% {
-      top: -180px
-    }
-  }
-
-  @keyframes endRoute {
-    0% {
-      // top: -150px;
-      // left: 200px;
-      // transform-origin: 291px 438px; rotate(180deg)
-      // transform: scale(1);
-      opacity: 1;
-    }
-
-    // 25% {
-    //   top: -180px;
-    //   left: 300px;
-    //   transform-origin: 291px 438px;
-    //   transform: rotate(-360deg) scale(.8);
-    // }
-
-    // 50% {
-    //   top: -210px;
-    //   left: 400px;
-    //   transform-origin: 291px 438px;
-    //   transform: rotate(-450deg) scale(.6);
-    // }
-
-    100% {
-      // top: -240px;
-      // left: 500px;
-      // transform-origin: 291px 438px;  rotate(360deg)
-      opacity: 0;
-      transform: scale(.4);
-    }
-  }
-
-  @keyframes reversal {
-    0% {
-      background: url(../images/inBack.png) no-repeat;
-      background-size: 754px 672px;
-
-    }
-
-    25% {
-      background: url(../images/inBack2.png) no-repeat;
-      background-size: 754px 672px;
-
-    }
-
-    // 50% {
-    //   background: url(../images/inBack3.png) no-repeat;
-    //   background-size: 754px 672px;
-    //   z-index: .1;
-    // }
-
-    50% {
-      background: url(../images/inBack3.png) no-repeat;
-      background-size: 754px 672px;
-      z-index: 0;
-    }
-
-    75% {
-      background: url(../images/inBack4.png) no-repeat;
-      background-size: 754px 672px;
-      // background-color: #005FA0;
-      z-index: 300;
-    }
-
-    100% {
-      background: url(../images/inBack5.png) no-repeat;
-      background-size: 754px 672px;
-      z-index: 300;
-    }
-
-  }
-
-  @keyframes stamp {
-    0% {
-      opacity: 1;
-      transform: scale(1.5);
-    }
-
-    100% {
-      transform: scale(1);
-      opacity: 1;
-    }
-  }
-
-  .inBack {
-    width: 754px;
-    height: 672px;
-    position: absolute;
-    bottom: 0;
-    background: url(../images/inBack.png) no-repeat;
-    // url(../images/inBack2.png) no-repeat,
-    // url(../images/inBack3.png) no-repeat,
-    // url(../images/inBack4.png) no-repeat,
-    // url(../images/inBack5.png) no-repeat;
-    background-size: 754px 672px;
-    z-index: 1;
-
-  }
-
-  .inBack.isAni {
-    animation: reversal .25s 1s forwards steps(1);
-  }
-
-  .inBackBottom {
-
-    width: 754px;
-    left: 12px;
-    width: 730px;
-    height: 393px;
-    // background: url(../images/boxBg.png) 754px 380px;
-    position: absolute;
-    bottom: 0;
-    border-radius: 35px 25px;
-  }
-
-  .inFront {
-    width: 754px;
-    height: 262px;
-    position: absolute;
-    bottom: -1px;
-    // left: 12px;
-    z-index: 200;
-
-  }
-
-  .submitBtn {
-    width: 272px;
-    height: 54px;
-    position: absolute;
-    z-index: 201;
-    bottom: 111px;
-    left: 50%;
-    margin-left: -136px;
-    cursor: pointer;
-    z-index: 400;
-  }
-
-
-  .updatePassword.isAni {
-    // endRoute linear .3s 2.3s forwards;
-    animation: forUp linear .3s forwards,
-  }
-
-  .updatePassword.isend {
-    top: -180px;
-
-    .inBack {
-      background: url(../images/inBack5.png) no-repeat;
-      background-size: 754px 672px;
-      z-index: 300;
-    }
-
-    .formWrap {
-      top: 460px;
-    }
-
-    .sealing {
-      opacity: 1;
-    }
-
-    .submitBtn {
-      opacity: 0;
-    }
-
-    .messageWrap {
-      opacity: 0;
-    }
-  }
-
-  .updatePassword {
-    // padding: 0 12px;
-
-    background-color: transparent;
-    margin: 0 auto 0;
-    position: relative;
-    overflow: hidden;
-    top: 0;
-
-
-    .formWrap.isAni {
-      animation: forDown linear 1s forwards;
-    }
-
-    .sealing {
-      position: absolute;
-      bottom: 58px;
-      z-index: 300;
-      width: 173px;
-      height: 175px;
-      left: 50%;
-      margin-left: -87px;
-      opacity: 0;
-    }
-
-    .sealing.isAni {
-      animation: stamp linear .3s 1.5s forwards;
-    }
-
-    // padding: 40px;
-    .formWrap {
-      background-color: #fff;
-      margin: 0 27px 10px;
-      width: 700px;
-      height: 836px;
-      border-radius: 20px;
-      padding: 15px 15px 5px;
-      position: relative;
-      z-index: 100;
-
-      .formTitle {
-        position: relative;
-        text-align: center;
-        margin-top: 31px;
-      }
-
-      .bgLine {
-        position: absolute;
-        width: 670px;
-        height: 779px;
-        left: 15px;
-        top: 15px;
-      }
-
-      h2 {
-        font-size: 28px;
-      }
-
-      .formWrapInfo {
-        padding: 24px 19px 0;
-      }
-
-      .closeBtn {
-        width: 60px;
-        height: 60px;
-        position: absolute;
-        right: -1px;
-        top: 0;
-        z-index: 100;
-        cursor: pointer;
-      }
-    }
-  }
-
-
-
-  .countInput {
-    border-radius: 8px;
-    min-height: 265px;
-
-    :global {
-      .n-input__textarea-el {
-        line-height: 51px !important;
-        font-size: 16px;
-        font-weight: 400;
-        color: #131415;
-        background: url('../images/textLIne.png') repeat;
-        background-size: 632px 51px;
-      }
-
-      .n-input__placeholder {
-        margin-top: 13px !important;
-      }
-
-      .n-input-wrapper {
-        padding: 0 !important;
-      }
-
-      .n-input-word-count {
-        bottom: -25px !important;
-        font-size: 14px;
-        font-weight: 400;
-        color: #AAAAAA;
-        line-height: 20px;
-      }
-    }
-
-
-
-  }
-
-  .addInput {
-    font-size: 16px;
-    font-weight: 400;
-    color: #777777;
-    line-height: 22px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    img {
-      width: 35px;
-      height: 35px;
-      margin-bottom: 5px;
-    }
-  }
-
-  :global {
-    .n-upload-trigger.n-upload-trigger--image-card {
-      width: 110px;
-      height: 110px;
-      background: #FDFDFD;
-      border-radius: 8px;
-    }
-
-    .n-upload-file-list .n-upload-file.n-upload-file--image-card-type {
-      width: 110px;
-      height: 110px;
-      background: #FDFDFD;
-      border-radius: 8px;
-
-    }
-
-
-    .n-upload-file-list.n-upload-file-list--grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, 110px);
-      grid-gap: 20px;
-      margin-top: 0;
-    }
-  }
-
-  .messageWrap {
-    // display: flex;
-    // flex-direction: row;
-    align-items: center;
-    position: absolute;
-    bottom: 35px;
-    z-index: 202;
-    width: 100%;
-    text-align: center;
-
-    p {
-      height: 25px;
-      font-size: 18px;
-      font-weight: 400;
-      color: #005FA0;
-      line-height: 25px;
-      // margin-right: 40px;
-    }
-  }
-}
-
-
-.suggestionBtnDot {
-  position: absolute;
-  right: 30px;
-}
-
-.suggestionBtn {
-
-  border: 1px solid #8BC5FF;
-  background: #E4F2FF !important;
-  height: 28Px;
-  font-size: 13Px;
-  font-weight: 600;
-  color: #1C81E5;
-  line-height: 18px;
-}
+.pxToVW (@px, @attr: width) {
+  @vw: (@px / 1920) * 100;
+  @{attr}:~"@{vw}vw";
+}
+
+
+.isHidden {
+  background: url(../images/inBack.png) no-repeat,
+    url('../images/inFront.png') no-repeat,
+    url(../images/inBack2.png) no-repeat,
+    url(../images/inBack3.png) no-repeat,
+    url(../images/inBack4.png) no-repeat,
+    url(../images/inBack5.png) no-repeat,
+    url('../images/submitBtn.png') no-repeat,
+    url('../images/sealing.png') no-repeat,
+    url('../images/boxBg.png') no-repeat;
+  position: absolute;
+  left: -999999px;
+  top: -9999px;
+  background-size: 754px 672px;
+}
+
+.hiddenBox {
+  visibility: hidden;
+}
+
+.showBox {
+  visibility: visible;
+}
+
+.suggestOption {
+  .updateBtnGroup {
+    padding: 0;
+    justify-content: center !important;
+    position: relative;
+
+    :global {
+      .n-button {
+        height: 48px !important;
+        min-width: 156px;
+      }
+    }
+  }
+
+  .suggestSelect {
+    :global {
+      .n-base-selection__border {
+        border: 1px solid #AADCFF;
+      }
+
+
+    }
+  }
+
+
+  @keyframes forDown {
+    0% {
+      top: 0
+    }
+
+    100% {
+      top: 460px
+    }
+  }
+
+
+  @keyframes forUp {
+    0% {
+      top: 0
+    }
+
+    100% {
+      top: -180px
+    }
+  }
+
+  @keyframes endRoute {
+    0% {
+      // top: -150px;
+      // left: 200px;
+      // transform-origin: 291px 438px; rotate(180deg)
+      // transform: scale(1);
+      opacity: 1;
+    }
+
+    // 25% {
+    //   top: -180px;
+    //   left: 300px;
+    //   transform-origin: 291px 438px;
+    //   transform: rotate(-360deg) scale(.8);
+    // }
+
+    // 50% {
+    //   top: -210px;
+    //   left: 400px;
+    //   transform-origin: 291px 438px;
+    //   transform: rotate(-450deg) scale(.6);
+    // }
+
+    100% {
+      // top: -240px;
+      // left: 500px;
+      // transform-origin: 291px 438px;  rotate(360deg)
+      opacity: 0;
+      transform: scale(.4);
+    }
+  }
+
+  @keyframes reversal {
+    0% {
+      background: url(../images/inBack.png) no-repeat;
+      background-size: 754px 672px;
+
+    }
+
+    25% {
+      background: url(../images/inBack2.png) no-repeat;
+      background-size: 754px 672px;
+
+    }
+
+    // 50% {
+    //   background: url(../images/inBack3.png) no-repeat;
+    //   background-size: 754px 672px;
+    //   z-index: .1;
+    // }
+
+    50% {
+      background: url(../images/inBack3.png) no-repeat;
+      background-size: 754px 672px;
+      z-index: 0;
+    }
+
+    75% {
+      background: url(../images/inBack4.png) no-repeat;
+      background-size: 754px 672px;
+      // background-color: #005FA0;
+      z-index: 300;
+    }
+
+    100% {
+      background: url(../images/inBack5.png) no-repeat;
+      background-size: 754px 672px;
+      z-index: 300;
+    }
+
+  }
+
+  @keyframes stamp {
+    0% {
+      opacity: 1;
+      transform: scale(1.5);
+    }
+
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  .inBack {
+    width: 754px;
+    height: 672px;
+    position: absolute;
+    bottom: 0;
+    background: url(../images/inBack.png) no-repeat;
+    // url(../images/inBack2.png) no-repeat,
+    // url(../images/inBack3.png) no-repeat,
+    // url(../images/inBack4.png) no-repeat,
+    // url(../images/inBack5.png) no-repeat;
+    background-size: 754px 672px;
+    z-index: 1;
+
+  }
+
+  .inBack.isAni {
+    animation: reversal .25s 1s forwards steps(1);
+  }
+
+  .inBackBottom {
+
+    width: 754px;
+    left: 12px;
+    width: 730px;
+    height: 393px;
+    // background: url(../images/boxBg.png) 754px 380px;
+    position: absolute;
+    bottom: 0;
+    border-radius: 35px 25px;
+  }
+
+  .inFront {
+    width: 754px;
+    height: 262px;
+    position: absolute;
+    bottom: -1px;
+    // left: 12px;
+    z-index: 200;
+
+  }
+
+  .submitBtn {
+    width: 272px;
+    height: 54px;
+    position: absolute;
+    z-index: 201;
+    bottom: 111px;
+    left: 50%;
+    margin-left: -136px;
+    cursor: pointer;
+    z-index: 400;
+  }
+
+
+  .updatePassword.isAni {
+    // endRoute linear .3s 2.3s forwards;
+    animation: forUp linear .3s forwards,
+  }
+
+  .updatePassword.isend {
+    top: -180px;
+
+    .inBack {
+      background: url(../images/inBack5.png) no-repeat;
+      background-size: 754px 672px;
+      z-index: 300;
+    }
+
+    .formWrap {
+      top: 460px;
+    }
+
+    .sealing {
+      opacity: 1;
+    }
+
+    .submitBtn {
+      opacity: 0;
+    }
+
+    .messageWrap {
+      opacity: 0;
+    }
+  }
+
+  .updatePassword {
+    // padding: 0 12px;
+
+    background-color: transparent;
+    margin: 0 auto 0;
+    position: relative;
+    overflow: hidden;
+    top: 0;
+
+
+    .formWrap.isAni {
+      animation: forDown linear 1s forwards;
+    }
+
+    .sealing {
+      position: absolute;
+      bottom: 58px;
+      z-index: 300;
+      width: 173px;
+      height: 175px;
+      left: 50%;
+      margin-left: -87px;
+      opacity: 0;
+    }
+
+    .sealing.isAni {
+      animation: stamp linear .3s 1.5s forwards;
+    }
+
+    // padding: 40px;
+    .formWrap {
+      background-color: #fff;
+      margin: 0 27px 10px;
+      width: 700px;
+      height: 836px;
+      border-radius: 20px;
+      padding: 15px 15px 5px;
+      position: relative;
+      z-index: 100;
+
+      .formTitle {
+        position: relative;
+        text-align: center;
+        margin-top: 31px;
+      }
+
+      .bgLine {
+        position: absolute;
+        width: 670px;
+        height: 779px;
+        left: 15px;
+        top: 15px;
+      }
+
+      h2 {
+        font-size: 28px;
+      }
+
+      .formWrapInfo {
+        padding: 24px 19px 0;
+      }
+
+      .closeBtn {
+        width: 60px;
+        height: 60px;
+        position: absolute;
+        right: -1px;
+        top: 0;
+        z-index: 100;
+        cursor: pointer;
+      }
+    }
+  }
+
+
+
+  .countInput {
+    border-radius: 8px;
+    min-height: 265px;
+
+    :global {
+      .n-input__textarea-el {
+        line-height: 51px !important;
+        font-size: 16px;
+        font-weight: 400;
+        color: #131415;
+        background: url('../images/textLIne.png') repeat;
+        background-size: 632px 51px;
+      }
+
+      .n-input__placeholder {
+        margin-top: 13px !important;
+      }
+
+      .n-input-wrapper {
+        padding: 0 !important;
+      }
+
+      .n-input-word-count {
+        bottom: -25px !important;
+        font-size: 14px;
+        font-weight: 400;
+        color: #AAAAAA;
+        line-height: 20px;
+      }
+    }
+
+
+
+  }
+
+  .addInput {
+    font-size: 16px;
+    font-weight: 400;
+    color: #777777;
+    line-height: 22px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    img {
+      width: 35px;
+      height: 35px;
+      margin-bottom: 5px;
+    }
+  }
+
+  :global {
+    .n-upload-trigger.n-upload-trigger--image-card {
+      width: 110px;
+      height: 110px;
+      background: #FDFDFD;
+      border-radius: 8px;
+    }
+
+    .n-upload-file-list .n-upload-file.n-upload-file--image-card-type {
+      width: 110px;
+      height: 110px;
+      background: #FDFDFD;
+      border-radius: 8px;
+
+    }
+
+
+    .n-upload-file-list.n-upload-file-list--grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, 110px);
+      grid-gap: 20px;
+      margin-top: 0;
+    }
+  }
+
+  .messageWrap {
+    // display: flex;
+    // flex-direction: row;
+    align-items: center;
+    position: absolute;
+    bottom: 35px;
+    z-index: 202;
+    width: 100%;
+    text-align: center;
+
+    p {
+      height: 25px;
+      font-size: 18px;
+      font-weight: 400;
+      color: #005FA0;
+      line-height: 25px;
+      // margin-right: 40px;
+    }
+  }
+}
+
+
+.suggestionBtnDot {
+  position: absolute;
+  right: 30px;
+  z-index: 101;
+}
+
+.suggestionBtn {
+
+  border: 1px solid #8BC5FF;
+  background: #E4F2FF !important;
+  height: 28Px;
+  font-size: 13Px;
+  font-weight: 600;
+  color: #1C81E5;
+  line-height: 18px;
+}

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

@@ -77,7 +77,7 @@
 
     img {
       width: 100%;
-      height: 100%;
+      height: fit-content;
     }
 
     &:hover {