Browse Source

完善加载loding逻辑

shaogen1995 1 month ago
parent
commit
9a42df8b4b

+ 1 - 1
后台管理/package.json

@@ -69,4 +69,4 @@
     "react-app-rewired": "^2.2.1"
   },
   "homepage": "."
-}
+}

+ 1 - 2
后台管理/src/components/SpinLoding/index.module.scss

@@ -3,8 +3,7 @@
   z-index: 9999;
   width: 100%;
   height: 100%;
-  background-color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
-}
+}

+ 21 - 0
后台管理/src/components/SpinLodingSon/index.module.scss

@@ -0,0 +1,21 @@
+.SpinLodingSon {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  :global {
+    .SpinLodingSon2 {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}

+ 15 - 0
后台管理/src/components/SpinLodingSon/index.tsx

@@ -0,0 +1,15 @@
+import { Spin } from 'antd'
+import styles from './index.module.scss'
+import React from 'react'
+function SpinLodingSon() {
+  return (
+    <div className={styles.SpinLodingSon}>
+      <div className='SpinLodingSon2'>
+        <Spin size='large' />
+      </div>
+    </div>
+  )
+}
+const MemoSpinLodingSon = React.memo(SpinLodingSon)
+
+export default MemoSpinLodingSon

+ 1 - 2
后台管理/src/pages/D3role/index.module.scss

@@ -10,8 +10,7 @@
       border-radius: 10px;
       overflow: hidden;
       margin-top: 15px;
-      height: calc(100% - 24px);
-      background-color: #fff;
+      height: calc(100% - 28px);
     }
   }
 }

+ 2 - 2
后台管理/src/pages/Layout/index.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { CaretRightOutlined } from '@ant-design/icons'
 import styles from './index.module.scss'
-import SpinLoding from '@/components/SpinLoding'
 import { Route, Switch, useLocation } from 'react-router-dom'
 import AuthRoute from '@/components/AuthRoute'
 import history from '@/utils/history'
@@ -20,6 +19,7 @@ import { useDispatch } from 'react-redux'
 import { D1_APIgetlist } from '@/store/action/D1dict'
 import { D3_APIgetInfo } from '@/store/action/D3role'
 import store from '@/store'
+import SpinLodingSon from '@/components/SpinLodingSon'
 
 function Layout() {
   const [loding, setLoding] = useState(false)
@@ -256,7 +256,7 @@ function Layout() {
           {/* 二级路由页面 */}
           {loding ? (
             <div className='mainBoxR'>
-              <React.Suspense fallback={<SpinLoding />}>
+              <React.Suspense fallback={<SpinLodingSon />}>
                 <Switch>
                   {RouterCom.map(v => (
                     <AuthRoute key={v.id} exact path={v.path} component={v.Com} />