Merge branch 'hqyDev' into jenkins

src/components/RouterError/index.tsx

@@ -66,7 +66,7 @@ export default defineComponent({
         refreshing = true;
         // console.log('修改刷新',refreshing)
         sessionStorage.setItem('isRouter', 'true');
-        reloadPage();
+        // reloadPage();
         //   showModalMask.value = true
         // setTimeout(()=>{
         //   const dom = document.getElementById('updateModel')

src/views/natural-resources/components/my-collect/index.module.less

@@ -1,241 +1,241 @@
-.list {
-  margin-top: 12px;
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: flex-start;
-  gap: 22px 0;
-  min-height: 220px;
-  margin-left: -12px;
-  margin-right: -12px;
-
-  .itemWrap {
-    width: calc(100% / 5);
-    padding-bottom: calc(100% / 5 * 0.73333);
-    position: relative;
-
-    .itemWrapBox {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      padding: 0 12px;
-    }
-  }
-
-  :global {
-    .card-section-container {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-
-.searchGroup {
-  position: relative;
-  padding: 0;
-
-
-  .btnType {
-    gap: 0px 24px !important;
-
-    :global {
-      .n-button {
-        height: 37px;
-        padding: 0 24px;
-        font-size: max(18px, 13Px);
-        color: rgba(0, 0, 0, .6);
-
-        &.n-button--primary-type {
-          font-weight: bold;
-          color: #fff;
-        }
-      }
-    }
-  }
-
-  :global {
-    .n-form {
-      position: relative;
-    }
-
-    .n-form-item {
-      .n-form-item-label {
-        font-size: max(17px, 13px);
-        font-weight: 600;
-        color: #131415;
-        line-height: 24px;
-      }
-
-      .n-button {
-        height: 32px;
-        font-size: max(17px, 12Px);
-        border-radius: 8px;
-        color: rgba(0, 0, 0, 0.6);
-      }
-
-      .n-button--primary-type {
-        color: #131415;
-        background-color: #D2ECFF !important;
-      }
-    }
-
-    .n-form-item-feedback-wrapper {
-      min-height: 14px;
-    }
-  }
-
-  .inputSearch {
-    position: absolute;
-    top: 4px;
-    right: 0px;
-    width: 360px;
-    height: 42px;
-    font-size: max(18px, 13Px);
-    --n-height: 42px !important;
-
-    img {
-      width: 18px;
-      height: 18px;
-    }
-
-    :global {
-      .n-input-wrapper {
-        padding-left: 12px;
-        padding-right: 4px;
-        height: 42px !important;
-      }
-
-      .n-button {
-        height: 34px;
-        font-size: max(16px, 12Px);
-        font-weight: 500;
-        width: auto;
-      }
-    }
-  }
-
-  .searchCatatory {
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 24px;
-    border-bottom: 1px solid #F2F2F2;
-    margin-bottom: 20px;
-
-    .addTrain {
-      height: 37px;
-      border-radius: 8px;
-      font-size: max(18px, 13Px);
-      background-color: #E8F4FF;
-      color: #0378EC;
-
-      img {
-        width: 16px;
-        height: 16px;
-        margin-right: 8px;
-      }
-    }
-  }
-}
-
-.spaceSection {
-  width: 76%;
-
-  &>div {
-    line-height: var(--n-blank-height);
-  }
-}
-
-.collapseWrap {
-  width: 98%;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-
-}
-
-.collaoseBtn {
-  width: 32px;
-  height: 32px;
-  cursor: pointer;
-}
-
-.collaoseBtn.isStart {
-  transform: rotate(-180deg);
-}
-
-.collapsSection {
-  padding-top: 10px;
-}
-
-.isHidden {
-  overflow: hidden;
-  transition: 1s all ease-in;
-}
-
-.hideButton {
-  visibility: hidden;
-  height: 0 !important;
-  line-height: 0 !important;
-}
-
-.popSelect {
-  font-size: 16px;
-  width: 200px;
-  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
-  border-radius: 11px;
-  --n-option-height: 34px;
-
-  :global {
-    .n-base-select-option__content {
-      width: 80% !important;
-    }
-  }
-
-}
-
-.spaceSection2 {
-  width: 75%;
-  transition: 1s all ease-in;
-
-  &>div {
-    height: 34Px !important;
-    display: flex;
-    align-items: center;
-  }
-}
-
-.textBtn {
-  background: #fff;
-  border-radius: 8Px;
-  padding: 4Px 20px;
-  font-size: max(17px, 12Px);
-  color: rgba(0, 0, 0, 0.6);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-weight: 500;
-  line-height: 24px;
-
-  .iconArrow {
-    display: inline-block;
-    margin-left: 8px;
-    width: 8px;
-    height: 5px;
-    background: url('../../../content-information/images/icon-arrow2.png') no-repeat center center / contain;
-    transform: rotate(180deg);
-  }
-
-  &:hover,
-  &.textBtnActive {
-    background: #D2ECFF;
-    font-weight: 500;
-    color: #131415;
-  }
-
-  &:hover {
-    .iconArrow {
-      transform: rotate(0deg);
-    }
-  }
+.list {
+  margin-top: 12px;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  gap: 22px 0;
+  min-height: 220px;
+  margin-left: -12px;
+  margin-right: -12px;
+
+  .itemWrap {
+    width: calc(100% / 5);
+    padding-bottom: calc(100% / 5 * 0.73333);
+    position: relative;
+
+    .itemWrapBox {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      padding: 0 12px;
+    }
+  }
+
+  :global {
+    .card-section-container {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.searchGroup {
+  position: relative;
+  padding: 0;
+
+
+  .btnType {
+    gap: 0px 24px !important;
+
+    :global {
+      .n-button {
+        height: 37px;
+        padding: 0 24px;
+        font-size: max(18px, 13Px);
+        color: rgba(0, 0, 0, .6);
+
+        &.n-button--primary-type {
+          font-weight: bold;
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  :global {
+    .n-form {
+      position: relative;
+    }
+
+    .n-form-item {
+      .n-form-item-label {
+        font-size: max(17px, 13px);
+        font-weight: 600;
+        color: #131415;
+        line-height: 24px;
+      }
+
+      .n-button {
+        height: 32px;
+        font-size: max(17px, 12Px);
+        border-radius: 8px;
+        color: rgba(0, 0, 0, 0.6);
+      }
+
+      .n-button--primary-type {
+        color: #131415;
+        background-color: #D2ECFF !important;
+      }
+    }
+
+    .n-form-item-feedback-wrapper {
+      min-height: 14px;
+    }
+  }
+
+  .inputSearch {
+    position: absolute;
+    top: 4px;
+    right: 0px;
+    width: 360px;
+    height: 42px;
+    font-size: max(18px, 13Px);
+    --n-height: 42px !important;
+
+    img {
+      width: 18px;
+      height: 18px;
+    }
+
+    :global {
+      .n-input-wrapper {
+        padding-left: 12px;
+        padding-right: 4px;
+        height: 42px !important;
+      }
+
+      .n-button {
+        height: 34px;
+        font-size: max(16px, 12Px);
+        font-weight: 500;
+        width: auto;
+      }
+    }
+  }
+
+  .searchCatatory {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 24px;
+    border-bottom: 1px solid #F2F2F2;
+    margin-bottom: 20px;
+
+    .addTrain {
+      height: 37px;
+      border-radius: 8px;
+      font-size: max(18px, 13Px);
+      background-color: #E8F4FF;
+      color: #0378EC;
+
+      img {
+        width: 16px;
+        height: 16px;
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
+.spaceSection {
+  width: 76%;
+
+  &>div {
+    line-height: var(--n-blank-height);
+  }
+}
+
+.collapseWrap {
+  width: 98%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+
+}
+
+.collaoseBtn {
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+}
+
+.collaoseBtn.isStart {
+  transform: rotate(-180deg);
+}
+
+.collapsSection {
+  padding-top: 10px;
+}
+
+.isHidden {
+  overflow: hidden;
+  transition: 1s all ease-in;
+}
+
+.hideButton {
+  visibility: hidden;
+  height: 0 !important;
+  line-height: 0 !important;
+}
+
+.popSelect {
+  font-size: 16px;
+  width: 200px;
+  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 11px;
+  --n-option-height: 34px;
+
+  :global {
+    .n-base-select-option__content {
+      width: 80% !important;
+    }
+  }
+
+}
+
+.spaceSection2 {
+  width: 78%;
+  transition: 1s all ease-in;
+
+  &>div {
+    height: 34Px !important;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.textBtn {
+  background: #fff;
+  border-radius: 8Px;
+  padding: 4Px 20px;
+  font-size: max(17px, 12Px);
+  color: rgba(0, 0, 0, 0.6);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  line-height: 24px;
+
+  .iconArrow {
+    display: inline-block;
+    margin-left: 8px;
+    width: 8px;
+    height: 5px;
+    background: url('../../../content-information/images/icon-arrow2.png') no-repeat center center / contain;
+    transform: rotate(180deg);
+  }
+
+  &:hover,
+  &.textBtnActive {
+    background: #D2ECFF;
+    font-weight: 500;
+    color: #131415;
+  }
+
+  &:hover {
+    .iconArrow {
+      transform: rotate(0deg);
+    }
+  }
 }

src/views/natural-resources/components/my-resources/index.module.less

@@ -1,333 +1,333 @@
-.list {
-  margin-top: 12px;
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: flex-start;
-  gap: 22px 0;
-  margin-left: -12px;
-  margin-right: -12px;
-}
-
-.searchGroup {
-  position: relative;
-  padding: 0;
-
-
-  .btnType {
-    gap: 0px 24px !important;
-
-    :global {
-      .n-button {
-        --n-height: 37px !important;
-        height: 37px;
-        padding: 0 24px;
-        font-size: max(18px, 13Px);
-        color: rgba(0, 0, 0, .6);
-
-        &.n-button--primary-type {
-          font-weight: bold !important;
-          color: #fff;
-        }
-      }
-    }
-  }
-
-  :global {
-    .n-form {
-      position: relative;
-    }
-
-    .n-form-item {
-      .n-form-item-label {
-        font-size: max(17px, 13px);
-        font-weight: 600;
-        color: #131415;
-        line-height: 24px;
-      }
-
-      .n-button {
-        height: 32px;
-        font-size: max(17px, 12Px);
-        border-radius: 8px;
-        color: rgba(0, 0, 0, 0.6);
-      }
-
-      .n-button--primary-type {
-        font-weight: 400 !important;
-      }
-
-      .n-button--primary-type {
-        color: #131415;
-        font-weight: bold !important;
-        background-color: #D2ECFF !important;
-      }
-    }
-
-    .n-form-item-feedback-wrapper {
-      min-height: 14px;
-    }
-  }
-
-  .inputSearch {
-    position: absolute;
-    top: 4px;
-    right: 0px;
-    width: 360px;
-    height: 42px;
-    font-size: max(18px, 13Px);
-    --n-height: 42px !important;
-
-    img {
-      width: 18px;
-      height: 18px;
-    }
-
-    :global {
-      .n-input-wrapper {
-        padding-left: 12px;
-        padding-right: 4px;
-        height: 42px !important;
-      }
-
-      .n-button {
-        height: 34px;
-        font-size: max(16px, 12Px);
-        font-weight: 500;
-        width: auto;
-      }
-    }
-  }
-
-  .searchCatatory {
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 24px;
-    border-bottom: 1px solid #F2F2F2;
-    margin-bottom: 20px;
-
-    .btnGroup {
-      height: 37px;
-    }
-
-    .addTrain {
-      --n-height: 37px !important;
-      height: 37px;
-      border-radius: 8px;
-      font-size: max(18px, 13Px);
-      background-color: #E8F4FF;
-      color: #0378EC;
-
-      &.error {
-        color: #EC3A4E;
-        background-color: #FDEBED;
-      }
-
-      img {
-        margin-right: 8px;
-      }
-
-      .iconUpload {
-        width: 23px;
-        height: 19px;
-      }
-
-      .iconEdit {
-        width: 24px;
-        height: 25px;
-      }
-
-      .iconSelectAll {
-        width: 20px;
-        height: 20px;
-      }
-
-      .iconDelete {
-        width: 18px;
-        height: 18px;
-      }
-
-      .iconPen {
-        width: 20px;
-        height: 19px;
-      }
-    }
-  }
-}
-
-
-
-.itemWrap {
-  width: calc(100% / 5);
-  padding-bottom: calc(100% / 5 * 0.73333);
-  position: relative;
-
-  .itemWrapBox {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    padding: 0 12px;
-  }
-
-
-  :global {
-    .card-section-container {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-
-  .itemBg {
-    position: absolute;
-    left: 12px;
-    top: 0;
-    width: calc(100% - 24px);
-    height: 100%;
-    z-index: 99;
-    border-radius: 14px;
-
-    &.itemBgChecked {
-      background-color: rgba(0, 0, 0, .5);
-    }
-
-    .resourceDefault {
-      position: absolute;
-      top: 16px;
-      right: 16px;
-      width: 30px;
-      height: 30px;
-
-    }
-  }
-
-}
-
-.spaceSection {
-  width: 76%;
-
-  &>div {
-    line-height: var(--n-blank-height);
-  }
-}
-
-.attendClassModal {
-  width: 1100px;
-
-  :global {
-    .n-select-menu {
-      --n-height: calc(var(--n-option-height) * 5.6) !important;
-    }
-  }
-}
-
-.attendClassSaveModal {
-  width: 600px;
-
-  :global {
-    .n-select-menu {
-      --n-height: calc(var(--n-option-height) * 5.6) !important;
-    }
-  }
-}
-
-
-.removeVisiable {
-  width: 432px;
-
-  :global {
-    .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;
-      }
-    }
-  }
-}
-
-.popSelect {
-  font-size: 16px;
-  width: 200px;
-  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
-  border-radius: 11px;
-  --n-option-height: 34px;
-
-  :global {
-    .n-base-select-option__content {
-      width: 80% !important;
-    }
-  }
-
-}
-
-.spaceSection2 {
-  width: 75%;
-  transition: 1s all ease-in;
-
-  &>div {
-    height: 34Px !important;
-    display: flex;
-    align-items: center;
-  }
-}
-
-.textBtn {
-  background: #fff;
-  border-radius: 8Px;
-  padding: 4Px 20px;
-  font-size: max(17px, 12Px);
-  color: rgba(0, 0, 0, 0.6);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-weight: 500;
-  line-height: 24px;
-
-  .iconArrow {
-    display: inline-block;
-    margin-left: 8px;
-    width: 8px;
-    height: 5px;
-    background: url('../../../content-information/images/icon-arrow2.png') no-repeat center center / contain;
-    transform: rotate(180deg);
-
-  }
-
-  &:hover,
-  &.textBtnActive {
-    background: #D2ECFF;
-    font-weight: 500;
-    color: #131415;
-  }
-
-  &:hover {
-    .iconArrow {
-
-      transform: rotate(0deg);
-    }
-  }
+.list {
+  margin-top: 12px;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  gap: 22px 0;
+  margin-left: -12px;
+  margin-right: -12px;
+}
+
+.searchGroup {
+  position: relative;
+  padding: 0;
+
+
+  .btnType {
+    gap: 0px 24px !important;
+
+    :global {
+      .n-button {
+        --n-height: 37px !important;
+        height: 37px;
+        padding: 0 24px;
+        font-size: max(18px, 13Px);
+        color: rgba(0, 0, 0, .6);
+
+        &.n-button--primary-type {
+          font-weight: bold !important;
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  :global {
+    .n-form {
+      position: relative;
+    }
+
+    .n-form-item {
+      .n-form-item-label {
+        font-size: max(17px, 13px);
+        font-weight: 600;
+        color: #131415;
+        line-height: 24px;
+      }
+
+      .n-button {
+        height: 32px;
+        font-size: max(17px, 12Px);
+        border-radius: 8px;
+        color: rgba(0, 0, 0, 0.6);
+      }
+
+      .n-button--primary-type {
+        font-weight: 400 !important;
+      }
+
+      .n-button--primary-type {
+        color: #131415;
+        font-weight: bold !important;
+        background-color: #D2ECFF !important;
+      }
+    }
+
+    .n-form-item-feedback-wrapper {
+      min-height: 14px;
+    }
+  }
+
+  .inputSearch {
+    position: absolute;
+    top: 4px;
+    right: 0px;
+    width: 360px;
+    height: 42px;
+    font-size: max(18px, 13Px);
+    --n-height: 42px !important;
+
+    img {
+      width: 18px;
+      height: 18px;
+    }
+
+    :global {
+      .n-input-wrapper {
+        padding-left: 12px;
+        padding-right: 4px;
+        height: 42px !important;
+      }
+
+      .n-button {
+        height: 34px;
+        font-size: max(16px, 12Px);
+        font-weight: 500;
+        width: auto;
+      }
+    }
+  }
+
+  .searchCatatory {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 24px;
+    border-bottom: 1px solid #F2F2F2;
+    margin-bottom: 20px;
+
+    .btnGroup {
+      height: 37px;
+    }
+
+    .addTrain {
+      --n-height: 37px !important;
+      height: 37px;
+      border-radius: 8px;
+      font-size: max(18px, 13Px);
+      background-color: #E8F4FF;
+      color: #0378EC;
+
+      &.error {
+        color: #EC3A4E;
+        background-color: #FDEBED;
+      }
+
+      img {
+        margin-right: 8px;
+      }
+
+      .iconUpload {
+        width: 23px;
+        height: 19px;
+      }
+
+      .iconEdit {
+        width: 24px;
+        height: 25px;
+      }
+
+      .iconSelectAll {
+        width: 20px;
+        height: 20px;
+      }
+
+      .iconDelete {
+        width: 18px;
+        height: 18px;
+      }
+
+      .iconPen {
+        width: 20px;
+        height: 19px;
+      }
+    }
+  }
+}
+
+
+
+.itemWrap {
+  width: calc(100% / 5);
+  padding-bottom: calc(100% / 5 * 0.73333);
+  position: relative;
+
+  .itemWrapBox {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0 12px;
+  }
+
+
+  :global {
+    .card-section-container {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+
+  .itemBg {
+    position: absolute;
+    left: 12px;
+    top: 0;
+    width: calc(100% - 24px);
+    height: 100%;
+    z-index: 99;
+    border-radius: 14px;
+
+    &.itemBgChecked {
+      background-color: rgba(0, 0, 0, .5);
+    }
+
+    .resourceDefault {
+      position: absolute;
+      top: 16px;
+      right: 16px;
+      width: 30px;
+      height: 30px;
+
+    }
+  }
+
+}
+
+.spaceSection {
+  width: 76%;
+
+  &>div {
+    line-height: var(--n-blank-height);
+  }
+}
+
+.attendClassModal {
+  width: 1100px;
+
+  :global {
+    .n-select-menu {
+      --n-height: calc(var(--n-option-height) * 5.6) !important;
+    }
+  }
+}
+
+.attendClassSaveModal {
+  width: 600px;
+
+  :global {
+    .n-select-menu {
+      --n-height: calc(var(--n-option-height) * 5.6) !important;
+    }
+  }
+}
+
+
+.removeVisiable {
+  width: 432px;
+
+  :global {
+    .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;
+      }
+    }
+  }
+}
+
+.popSelect {
+  font-size: 16px;
+  width: 200px;
+  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 11px;
+  --n-option-height: 34px;
+
+  :global {
+    .n-base-select-option__content {
+      width: 80% !important;
+    }
+  }
+
+}
+
+.spaceSection2 {
+  width: 78%;
+  transition: 1s all ease-in;
+
+  &>div {
+    height: 34Px !important;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.textBtn {
+  background: #fff;
+  border-radius: 8Px;
+  padding: 4Px 20px;
+  font-size: max(17px, 12Px);
+  color: rgba(0, 0, 0, 0.6);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  line-height: 24px;
+
+  .iconArrow {
+    display: inline-block;
+    margin-left: 8px;
+    width: 8px;
+    height: 5px;
+    background: url('../../../content-information/images/icon-arrow2.png') no-repeat center center / contain;
+    transform: rotate(180deg);
+
+  }
+
+  &:hover,
+  &.textBtnActive {
+    background: #D2ECFF;
+    font-weight: 500;
+    color: #131415;
+  }
+
+  &:hover {
+    .iconArrow {
+
+      transform: rotate(0deg);
+    }
+  }
 }

src/views/natural-resources/components/share-resources/index.module.less

@@ -1,251 +1,251 @@
-.list {
-  margin-top: 12px;
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: flex-start;
-  gap: 22px 0;
-  min-height: 220px;
-  margin-left: -12px;
-  margin-right: -12px;
-
-  .itemWrap {
-    width: calc(100% / 5);
-    padding-bottom: calc(100% / 5 * 0.73333);
-    position: relative;
-
-    .itemWrapBox {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      padding: 0 12px;
-    }
-  }
-
-  :global {
-    .card-section-container {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-
-.searchGroup {
-  position: relative;
-  padding: 0;
-
-
-  .btnType {
-    gap: 0px 24px !important;
-
-    :global {
-      .n-button {
-        height: 37px;
-        padding: 0 24px;
-        font-size: max(18px, 13Px);
-        color: rgba(0, 0, 0, .6);
-
-        &.n-button--primary-type {
-          font-weight: bold;
-          color: #fff;
-        }
-      }
-    }
-  }
-
-  :global {
-    .n-form {
-      position: relative;
-    }
-
-    .n-form-item {
-      .n-form-item-label {
-        font-size: max(17px, 13Px);
-        font-weight: 600;
-        color: #131415;
-        line-height: 24px;
-      }
-
-      .n-button {
-        height: 32px;
-        font-size: max(17px, 12Px);
-        border-radius: 8px;
-        color: rgba(0, 0, 0, 0.6);
-      }
-
-      .n-button--primary-type {
-        color: #131415;
-        background-color: #D2ECFF !important;
-      }
-    }
-
-    .n-form-item-feedback-wrapper {
-      min-height: 14px;
-    }
-  }
-
-  .inputSearch {
-    position: absolute;
-    top: 4px;
-    right: 0px;
-    width: 360px;
-    height: 42px;
-    font-size: max(18px, 13Px);
-    --n-height: 42px !important;
-
-    img {
-      width: 18px;
-      height: 18px;
-    }
-
-    :global {
-      .n-input-wrapper {
-        padding-left: 12px;
-        padding-right: 4px;
-        height: 42px !important;
-      }
-
-      .n-button {
-        height: 34px;
-        font-size: max(16px, 12Px);
-        font-weight: 500;
-        width: auto;
-      }
-    }
-  }
-
-  .searchCatatory {
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 24px;
-    border-bottom: 1px solid #F2F2F2;
-    margin-bottom: 20px;
-
-    .addTrain {
-      height: 37px;
-      border-radius: 8px;
-      font-size: max(18px, 13Px);
-      background-color: #E8F4FF;
-      color: #0378EC;
-
-      img {
-        width: 16px;
-        height: 16px;
-        margin-right: 8px;
-      }
-    }
-  }
-}
-
-.teachingModal {
-  width: 1100px;
-}
-
-.spaceSection {
-  width: 75%;
-  transition: 1s all ease-in;
-
-  &>div {
-    height: 34Px !important;
-    display: flex !important;
-    align-items: center;
-    line-height: var(--n-blank-height);
-  }
-}
-
-
-.collapseWrap {
-  width: 98%;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-}
-
-.collaoseBtn {
-  width: 32px;
-  height: 32px;
-  cursor: pointer;
-}
-
-.collaoseBtn.isStart {
-  transform: rotate(-180deg);
-}
-
-.collapsSection {
-  // padding-top: 10px;
-}
-
-.isHidden {
-  overflow: hidden;
-  transition: 1s all ease-in;
-}
-
-.hideButton {
-  visibility: hidden;
-  height: 0 !important;
-  line-height: 0 !important;
-}
-
-.popSelect {
-  font-size: 16px;
-  width: 200px;
-  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
-  border-radius: 11px;
-  --n-option-height: 34px;
-
-  :global {
-    .n-base-select-option__content {
-      width: 80% !important;
-    }
-  }
-}
-
-.spaceSection2 {
-  width: 75%;
-  transition: 1s all ease-in;
-
-  &>div {
-    // height: 34Px !important;
-    // display: flex !important;
-    // align-items: center;
-
-  }
-}
-
-.textBtn {
-  background: #fff;
-  border-radius: 8Px;
-  padding: 4Px 20px;
-  font-size: max(17px, 12Px);
-  color: rgba(0, 0, 0, 0.6);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-weight: 500;
-  line-height: 24px;
-
-  .iconArrow {
-    display: inline-block;
-    margin-left: 8px;
-    width: 8px;
-    height: 5px;
-    background: url('../../../content-information/images/icon-arrow2.png') no-repeat center center / contain;
-    transform: rotate(180deg);
-
-  }
-
-  &:hover,
-  &.textBtnActive {
-    background: #D2ECFF;
-    font-weight: 500;
-    color: #131415;
-  }
-
-  &:hover {
-    .iconArrow {
-
-      transform: rotate(0deg);
-    }
-  }
+.list {
+  margin-top: 12px;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  gap: 22px 0;
+  min-height: 220px;
+  margin-left: -12px;
+  margin-right: -12px;
+
+  .itemWrap {
+    width: calc(100% / 5);
+    padding-bottom: calc(100% / 5 * 0.73333);
+    position: relative;
+
+    .itemWrapBox {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      padding: 0 12px;
+    }
+  }
+
+  :global {
+    .card-section-container {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.searchGroup {
+  position: relative;
+  padding: 0;
+
+
+  .btnType {
+    gap: 0px 24px !important;
+
+    :global {
+      .n-button {
+        height: 37px;
+        padding: 0 24px;
+        font-size: max(18px, 13Px);
+        color: rgba(0, 0, 0, .6);
+
+        &.n-button--primary-type {
+          font-weight: bold;
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  :global {
+    .n-form {
+      position: relative;
+    }
+
+    .n-form-item {
+      .n-form-item-label {
+        font-size: max(17px, 13Px);
+        font-weight: 600;
+        color: #131415;
+        line-height: 24px;
+      }
+
+      .n-button {
+        height: 32px;
+        font-size: max(17px, 12Px);
+        border-radius: 8px;
+        color: rgba(0, 0, 0, 0.6);
+      }
+
+      .n-button--primary-type {
+        color: #131415;
+        background-color: #D2ECFF !important;
+      }
+    }
+
+    .n-form-item-feedback-wrapper {
+      min-height: 14px;
+    }
+  }
+
+  .inputSearch {
+    position: absolute;
+    top: 4px;
+    right: 0px;
+    width: 360px;
+    height: 42px;
+    font-size: max(18px, 13Px);
+    --n-height: 42px !important;
+
+    img {
+      width: 18px;
+      height: 18px;
+    }
+
+    :global {
+      .n-input-wrapper {
+        padding-left: 12px;
+        padding-right: 4px;
+        height: 42px !important;
+      }
+
+      .n-button {
+        height: 34px;
+        font-size: max(16px, 12Px);
+        font-weight: 500;
+        width: auto;
+      }
+    }
+  }
+
+  .searchCatatory {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 24px;
+    border-bottom: 1px solid #F2F2F2;
+    margin-bottom: 20px;
+
+    .addTrain {
+      height: 37px;
+      border-radius: 8px;
+      font-size: max(18px, 13Px);
+      background-color: #E8F4FF;
+      color: #0378EC;
+
+      img {
+        width: 16px;
+        height: 16px;
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
+.teachingModal {
+  width: 1100px;
+}
+
+.spaceSection {
+  width: 75%;
+  transition: 1s all ease-in;
+
+  &>div {
+    height: 34Px !important;
+    display: flex !important;
+    align-items: center;
+    line-height: var(--n-blank-height);
+  }
+}
+
+
+.collapseWrap {
+  width: 98%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+}
+
+.collaoseBtn {
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+}
+
+.collaoseBtn.isStart {
+  transform: rotate(-180deg);
+}
+
+.collapsSection {
+  // padding-top: 10px;
+}
+
+.isHidden {
+  overflow: hidden;
+  transition: 1s all ease-in;
+}
+
+.hideButton {
+  visibility: hidden;
+  height: 0 !important;
+  line-height: 0 !important;
+}
+
+.popSelect {
+  font-size: 16px;
+  width: 200px;
+  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 11px;
+  --n-option-height: 34px;
+
+  :global {
+    .n-base-select-option__content {
+      width: 80% !important;
+    }
+  }
+}
+
+.spaceSection2 {
+  width: 78%;
+  transition: 1s all ease-in;
+
+  &>div {
+    // height: 34Px !important;
+    // display: flex !important;
+    // align-items: center;
+
+  }
+}
+
+.textBtn {
+  background: #fff;
+  border-radius: 8Px;
+  padding: 4Px 20px;
+  font-size: max(17px, 12Px);
+  color: rgba(0, 0, 0, 0.6);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  line-height: 24px;
+
+  .iconArrow {
+    display: inline-block;
+    margin-left: 8px;
+    width: 8px;
+    height: 5px;
+    background: url('../../../content-information/images/icon-arrow2.png') no-repeat center center / contain;
+    transform: rotate(180deg);
+
+  }
+
+  &:hover,
+  &.textBtnActive {
+    background: #D2ECFF;
+    font-weight: 500;
+    color: #131415;
+  }
+
+  &:hover {
+    .iconArrow {
+
+      transform: rotate(0deg);
+    }
+  }
 }