new branch

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-player": "^2.14.1",
         "react-router-dom": "^6.20.1",
         "tdesign-react": "^1.4.0"
       },
@@ -1509,6 +1510,14 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/define-data-property": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/define-data-property/-/define-data-property-1.1.1.tgz",
@@ -2731,6 +2740,11 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/load-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/load-script/-/load-script-1.0.0.tgz",
+      "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA=="
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/locate-path/-/locate-path-6.0.0.tgz",
@@ -2774,6 +2788,11 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
@@ -3106,6 +3125,21 @@
       "resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-player": {
+      "version": "2.14.1",
+      "resolved": "https://registry.npmmirror.com/react-player/-/react-player-2.14.1.tgz",
+      "integrity": "sha512-jILj7F9o+6NHzrJ1GqZIxfJgskvGmKeJ05FNhPvgiCpvMZFmFneKEkukywHcULDO2lqITm+zcEkLSq42mX0FbA==",
+      "dependencies": {
+        "deepmerge": "^4.0.0",
+        "load-script": "^1.0.0",
+        "memoize-one": "^5.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0"
+      }
+    },
     "node_modules/react-popper": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/react-popper/-/react-popper-2.3.0.tgz",

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-player": "^2.14.1",
     "react-router-dom": "^6.20.1",
     "tdesign-react": "^1.4.0"
   },

src/App.jsx

@@ -5,6 +5,7 @@ import { useRoutes } from 'react-router-dom'
 import routes from './routes'
 import logo from './assets/logo.webp'
 import { useEffect } from 'react'
+import bg from './assets/bg.png'
 
 const { Header, Content, Footer, Aside } = Layout
 const { HeadMenu, MenuItem } = Menu
@@ -14,21 +15,21 @@ function App() {
   const element = useRoutes(routes)
 
   return (
-    <Layout style={{ height: '100vh' }}>
-      <Header>
+    <Layout style={{ height: '100vh', backgroundImage: `url("${bg}")`, backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat' }}>
+      {/* <Header>
         <Space>
           <HeadMenu logo={<Image src={logo} style={{ height: 56 }} />} />
           <h1 className='title'>李洪东积木动力修复技术</h1>
         </Space>
-      </Header>
+      </Header> */}
       <Content style={{ padding: 20, flex: 1, overflowY: 'hidden' }}>
-        <div style={{ background: '#fff', height: '100%', overflowY: 'auto' }}>
+        {/* <div style={{ height: '100%', overflowY: 'auto' }}>
           {
             element
           }
-        </div>
+        </div> */}
       </Content>
-      <Footer><p style={{ textAlign: 'center' }}>李洪东<sup>®</sup>积木动力修复技术</p></Footer>
+      {/* <Footer><p style={{ textAlign: 'center' }}>李洪东<sup>®</sup>积木动力修复技术</p></Footer> */}
     </Layout>
   )
 }