zxcdf

package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@ant-design/pro-layout": "^6.5.0",
     "ahooks": "^3.7.2",
+    "color-thief-react": "^2.1.0",
     "express": "^4.18.2",
     "express-http-proxy": "^1.6.3",
     "react": "17.x",

src/global.less

@@ -31,7 +31,11 @@ body,
   justify-content: center;
   align-items: center;
 }
-
+.spread {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 .bglight {
   background-image: linear-gradient(
     145deg,
@@ -44,16 +48,312 @@ body,
   background-size: 400% 400%;
   background-position: 0% 64%;
 }
+.bglights {
+  background-image: linear-gradient(
+    145deg,
+    #ffffff 0%,
+    #edf5ff 25%,
+    #edf5ff 50%,
+    #edf5ff 75%,
+    #ffffff 100%
+  );
+  background-size: 400% 400%;
+  animation: bgmove 20s linear 0s infinite alternate forwards;
+}
+
 @keyframes bgmove {
   0% {
     background-position: 0% 50%;
   }
 
   50% {
-    background-position: 200% 100%;
+    background-position: 100% 100%;
   }
 
   100% {
     background-position: 0% 50%;
   }
 }
+
+* {
+  margin: 0;
+  padding: 0;
+}
+#webFooter {
+  width: 100%;
+  /* height: 400px; */
+  background-color: black;
+}
+#webFooter > div:first-child {
+  height: calc(100% - 40px);
+  padding: 50px 50px 80px 80px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.footer-copyright {
+  color: rgba(194, 194, 194, 1);
+  border-top: 1px solid rgba(194, 194, 194, 1);
+  font-size: 14px;
+  font-family: 'HarmonyOS Sans SC';
+  text-align: center;
+  padding: 16px 0;
+}
+.footer-content h3 {
+  margin-bottom: 24px;
+  color: rgba(255, 255, 255, 1);
+  font-family: '黑体';
+}
+
+.footer-content a {
+  text-decoration: none;
+  font-size: 16px;
+  color: rgba(255, 255, 255, 1);
+}
+.footer-content a:hover {
+  color: rgb(97, 147, 255);
+}
+
+.footer-content li {
+  list-style-type: none;
+  margin-bottom: 16px;
+}
+.footer-content button {