更新

src/components/RouterError/index.tsx

@@ -1,172 +1,172 @@
-import { NButton, NModal, NSpace, useDialog } from 'naive-ui';
-import { defineComponent, onBeforeUnmount, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import downBg from './images/downBg.png';
-import rocketIcon from './images/rocketIcon.png';
-import styles from './index.module.less';
-import axios from 'axios';
-let refreshing = false;
-let isError = false;
-const reloadPage = async () => {
-  if ('serviceWorker' in navigator) {
-    // let refreshing = false
-    const flag = (await caches.keys()).length > 0;
-    // console.log(caches.keys(), `0904路由更新有缓存${flag}`);
-    caches.keys().then(function (cacheNames) {
-      cacheNames.forEach(function (cacheName) {
-        caches.delete(cacheName);
-      });
-    });
-    // 尝试监听install
-  }
-  console.log('route index');
-  window.location.reload();
-};
-
-const isChromeError = (error: any) => {
-  console.log(error, 'error===>isChromeError', refreshing);
-  isError = true;
-  const tagName = error.target.tagName;
-  const notIncoudle = ['IMG'];
-  setTimeout(() => {
-    if (!refreshing && !error.message && !notIncoudle.includes(tagName)) {
-      refreshing = true;
-      sessionStorage.setItem('isRouter', 'true');
-      reloadPage();
-    }
-  }, 500);
-};
-window.addEventListener('error', isChromeError, true);
-export default defineComponent({
-  name: 'router-error',
-  setup() {
-    const router = useRouter();
-    const dialog = useDialog();
-
-    const showModalMask = ref(false);
-    const route = useRoute();
-
-    // router.onError((error, to, form) => {
-    //   const str = error.message + '';
-    //   const isChunkLoadFailed = str.indexOf('imported');
-    //   console.log(error, to)
-    //   // const targetPath = router.history.pending.fullPath
-    //   if (isChunkLoadFailed != -1 && !refreshing) {
-    //     refreshing = true;
-    //     console.log('onError刷新');
-    //     sessionStorage.setItem('isRouter','true')
-    //       // showModalMask.value = true;
-    //       // router.push(to.path)
-    //   }
-    // });
-    router.beforeEach(async (to, from, next) => {
-      const flag = await versionCheck();
-      console.log('路由之前弹窗', `refreshing${refreshing},flag:${flag}`);
-      if (flag && !refreshing) {
-        refreshing = true;
-        // console.log('修改刷新',refreshing)
-        sessionStorage.setItem('isRouter', 'true');
-        reloadPage();
-        //   showModalMask.value = true
-        // setTimeout(()=>{
-        //   const dom = document.getElementById('updateModel')
-        //   if(isError&&!dom){
-        //     reloadPage()
-        //   }
-        // },1000)
-
-        //   setTimeout(()=>{
-        //    sessionStorage.removeItem('isRouter')
-        //  },60000)
-      }
-      next();
-    });
-    const checkNewVersion = async () => {
-      if ('serviceWorker' in navigator) {
-        // let refreshing = false
-        const flag = (await caches.keys()).length > 0;
-        // console.log(caches.keys(), `0904路由更新有缓存${flag}`);
-        caches.keys().then(function (cacheNames) {
-          cacheNames.forEach(function (cacheName) {
-            caches.delete(cacheName);
-          });
-          if (flag) {
-            // window.location.reload();
-            // dialog.warning({
-            //   title: '更新提示',
-            //   content: '网站有更新请点击确定刷新页面?',
-            //   positiveText: '确定',
-            //   negativeText: '取消',
-            //   onPositiveClick: () => {
-            //   }
-            // });
-          }
-        });
-
-        // 尝试监听install
-
-        navigator.serviceWorker.addEventListener(
-          'controllerchange',
-          async () => {
-            console.log('controllerchange刷新', route.path, 'path');
-            const flag = await versionCheck();
-            if (refreshing || route.path == '/attend-class' || !flag) {
-              return;
-            }
-            const isRouter = sessionStorage.getItem('isRouter');
-            if (!isRouter) {
-              // showModalMask.value = true
-              reloadPage();
-            }
-            refreshing = true;
-          }
-        );
-      }
-    };
-
-    console.log(route.path, 'route.path');
-    checkNewVersion();
-    onBeforeUnmount(() => {
-      sessionStorage.removeItem('isRouter');
-      window.removeEventListener('error', isChromeError);
-    });
-
-    // 版本监控
-    const versionCheck = async () => {
-      console.log(import.meta.env.MODE, 'import.meta.env');
-      if (import.meta.env.MODE === 'development') return;
-      const response = await axios.get('version.json');
-      // eslint-disable-next-line no-undef
-      // console.log(__APP_VERSION__,response.data.version,__APP_VERSION__ !== response.data.version)
-      if (__APP_VERSION__ !== response.data.version) {
-        // eslint-disable-next-line no-undef
-        return true;
-      } else {
-        return false;
-      }
-    };
-
-    return () => (
-      <div>
-        <NModal v-model:show={showModalMask.value} mask-closable={false}>
-          <div class={styles.downMove} id="updateModel">
-            <img src={rocketIcon} class={styles.dingPng} alt="" />
-            <img src={downBg} class={styles.downMoveBg} alt="" />
-            <h2>发现新版本</h2>
-            <p>为提升您的用户体验，请刷新页面后使用</p>
-            {/* <NButton>确定</NButton> */}
-            <NSpace style={{ padding: '25px 0 0 0' }} justify="center">
-              <NButton
-                class={styles.submitAppBtn}
-                round
-                type="primary"
-                onClick={reloadPage}>
-                立即刷新
-              </NButton>
-            </NSpace>
-          </div>
-        </NModal>
-      </div>
-    );
-  }
-});
+import { NButton, NModal, NSpace, useDialog } from 'naive-ui';
+import { defineComponent, onBeforeUnmount, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import downBg from './images/downBg.png';
+import rocketIcon from './images/rocketIcon.png';
+import styles from './index.module.less';
+import axios from 'axios';
+let refreshing = false;
+let isError = false;
+const reloadPage = async () => {
+  if ('serviceWorker' in navigator) {
+    // let refreshing = false
+    const flag = (await caches.keys()).length > 0;
+    // console.log(caches.keys(), `0904路由更新有缓存${flag}`);
+    caches.keys().then(function (cacheNames) {
+      cacheNames.forEach(function (cacheName) {
+        caches.delete(cacheName);
+      });
+    });
+    // 尝试监听install
+  }
+  console.log('route index');
+  window.location.reload();
+};
+
+const isChromeError = (error: any) => {
+  console.log(error, 'error===>isChromeError', refreshing);
+  isError = true;
+  const tagName = error.target.tagName;
+  const notIncoudle = ['IMG'];
+  setTimeout(() => {
+    if (!refreshing && !error.message && !notIncoudle.includes(tagName)) {
+      refreshing = true;
+      sessionStorage.setItem('isRouter', 'true');
+      reloadPage();
+    }
+  }, 500);
+};
+window.addEventListener('error', isChromeError, true);
+export default defineComponent({
+  name: 'router-error',
+  setup() {
+    const router = useRouter();
+    const dialog = useDialog();
+
+    const showModalMask = ref(false);
+    const route = useRoute();
+
+    // router.onError((error, to, form) => {
+    //   const str = error.message + '';
+    //   const isChunkLoadFailed = str.indexOf('imported');
+    //   console.log(error, to)
+    //   // const targetPath = router.history.pending.fullPath
+    //   if (isChunkLoadFailed != -1 && !refreshing) {
+    //     refreshing = true;
+    //     console.log('onError刷新');
+    //     sessionStorage.setItem('isRouter','true')
+    //       // showModalMask.value = true;
+    //       // router.push(to.path)
+    //   }
+    // });
+    router.beforeEach(async (to, from, next) => {
+      const flag = await versionCheck();
+      console.log('路由之前弹窗', `refreshing${refreshing},flag:${flag}`);
+      if (flag && !refreshing) {
+        refreshing = true;
+        // console.log('修改刷新',refreshing)
+        sessionStorage.setItem('isRouter', 'true');
+        // reloadPage();
+        //   showModalMask.value = true
+        // setTimeout(()=>{
+        //   const dom = document.getElementById('updateModel')
+        //   if(isError&&!dom){
+        //     reloadPage()
+        //   }
+        // },1000)
+
+        //   setTimeout(()=>{
+        //    sessionStorage.removeItem('isRouter')
+        //  },60000)
+      }
+      next();
+    });
+    const checkNewVersion = async () => {
+      if ('serviceWorker' in navigator) {
+        // let refreshing = false
+        const flag = (await caches.keys()).length > 0;
+        // console.log(caches.keys(), `0904路由更新有缓存${flag}`);
+        caches.keys().then(function (cacheNames) {
+          cacheNames.forEach(function (cacheName) {
+            caches.delete(cacheName);
+          });
+          if (flag) {
+            // window.location.reload();
+            // dialog.warning({
+            //   title: '更新提示',
+            //   content: '网站有更新请点击确定刷新页面?',
+            //   positiveText: '确定',
+            //   negativeText: '取消',
+            //   onPositiveClick: () => {
+            //   }
+            // });
+          }
+        });
+
+        // 尝试监听install
+
+        navigator.serviceWorker.addEventListener(
+          'controllerchange',
+          async () => {
+            console.log('controllerchange刷新', route.path, 'path');
+            const flag = await versionCheck();
+            if (refreshing || route.path == '/attend-class' || !flag) {
+              return;
+            }
+            const isRouter = sessionStorage.getItem('isRouter');
+            if (!isRouter) {
+              // showModalMask.value = true
+              reloadPage();
+            }
+            refreshing = true;
+          }
+        );
+      }
+    };
+
+    console.log(route.path, 'route.path');
+    checkNewVersion();
+    onBeforeUnmount(() => {
+      sessionStorage.removeItem('isRouter');
+      window.removeEventListener('error', isChromeError);
+    });
+
+    // 版本监控
+    const versionCheck = async () => {
+      console.log(import.meta.env.MODE, 'import.meta.env');
+      if (import.meta.env.MODE === 'development') return;
+      const response = await axios.get('version.json');
+      // eslint-disable-next-line no-undef
+      // console.log(__APP_VERSION__,response.data.version,__APP_VERSION__ !== response.data.version)
+      if (__APP_VERSION__ !== response.data.version) {
+        // eslint-disable-next-line no-undef
+        return true;
+      } else {
+        return false;
+      }
+    };
+
+    return () => (
+      <div>
+        <NModal v-model:show={showModalMask.value} mask-closable={false}>
+          <div class={styles.downMove} id="updateModel">
+            <img src={rocketIcon} class={styles.dingPng} alt="" />
+            <img src={downBg} class={styles.downMoveBg} alt="" />
+            <h2>发现新版本</h2>
+            <p>为提升您的用户体验，请刷新页面后使用</p>
+            {/* <NButton>确定</NButton> */}
+            <NSpace style={{ padding: '25px 0 0 0' }} justify="center">
+              <NButton
+                class={styles.submitAppBtn}
+                round
+                type="primary"
+                onClick={reloadPage}>
+                立即刷新
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal>
+      </div>
+    );
+  }
+});

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);
+    }
+  }
 }