init

src/pages/LoadingDemo/LoadingDemo.less

@@ -3,52 +3,39 @@
 .loading {
   position: absolute;
   left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
+  top: 50%;
+  width: 750px;
+  height: 1624px;
+  transform: translateY(-50%);
 
-  .webpBg("LoadingPage/loadingBg.jpg");
-
-  .loading-ip {
+  .bg {
     position: absolute;
-    left: 198px;
-    top: 572-153px;
-    width: 570px;
-    height: 508px;
-    .webpBg("LoadingPage/loadingIp.png");
+    left: 0;
+    top: 0;
+    width: 750px;
+    height: 1624px;
+    .webpBg("LoadingPage/bg.jpg");
   }
 
+
   .progressBarBg {
+    border-radius: 10px;
+    background-color: rgb(255, 255, 255);
     position: absolute;
-    left: 82px;
-    top: 898-153px;
-    width: 590px;
-    height: 30px;
-    border-radius: 118px;
-
-    background: #FCE4D4;
-
-    border: 2px solid #FFFFFF;
+    left: 138px;
+    top: 899px;
+    width: 475px;
+    height: 21px;
   }
 
-  .progressBar {
+  .progressBarFill {
+    background-color: rgb(254, 53, 74);
     position: absolute;
-    left: 84px;
-    top: 900-153px;
-    width: 590px;
-    height: 30px;
-    overflow: hidden;
-    border-radius: 118px;
-
-    .progressBarFill {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 590px;
-      height: 30px;
-      .webpBg("LoadingPage/loadingFill.png")
-    }
-
+    left: 140px;
+    top: 902px;
+    width: 470px;
+    height: 15px;
+    border-radius: 15px;
   }
 
   .progressTxt {
@@ -66,5 +53,15 @@
     color: #999999;
 
   }
+
+}
+
+.title {
+  position: fixed;
+  left: 67px;
+  top: 49px;
+  width: 613px;
+  height: 208px;
+  .webpBg("LoadingPage/title.png");
 }
 

src/pages/LoadingDemo/LoadingDemo.tsx

@@ -8,80 +8,81 @@ import HomePage from "@/pages/HomePage/HomePage.tsx";
 @observer
 class LoadingDemo extends React.Component {
 
-    state = {
-        curPercentage: 0
-    }
-
-    curPercentage = 0;
-    intervalId: number = 0;
-
-    componentDidMount() {
-        this.preloadAssetInit();
-
-        // this.jump();
-    }
-
-    /**
-     * 资源预加载
-     */
-    preloadAssetInit = async () => {
-
-        const files = import.meta.glob("../../assets/**/*", {
-            import: "default",
-            eager: true,
-        });
-
-        const urls = Object.values(files) as string[];
-
-        await preload(urls, (progress, loaded, total) => {
-            const percentage = Math.floor(progress * 100);
-            this.setEvenProgress(percentage);
-        });
-    };
-
-    jump = () => {
-        setTimeout(() => {
-            PageCtrl.changePage(HomePage); // 跳转页面
-        }, 100);
-    };
-
-
-    /**
-     * 以1%匀速加载进度
-     * @param {*} percentage
-     */
-    setEvenProgress = (percentage) => {
-        this.intervalId && clearInterval(this.intervalId);
-        let curPercentage = this.curPercentage;
-        this.intervalId = window.setInterval(() => {
-            if (curPercentage >= percentage) {
-                clearInterval(this.intervalId);
-                this.jump();
-                return;
-            }
-            curPercentage += 1;
-            this.curPercentage = curPercentage;
-            this.setState({
-                curPercentage,
-            });
-        }, 10);
-    };
-
-    render() {
-
-        const { curPercentage } = this.state;
-
-        return <div className="loading">
-            <div className="loading-ip" />
-            <div className="progressBarBg" />
-            <div className="progressBar">
-                <div className="progressBarFill" style={{
-                    transform: `translateX(${curPercentage - 100}%)`
-                }} />
-            </div>
-            <span className="progressTxt">金豆正在路上...... {curPercentage}%</span>
-        </div>;
-    }
+  state = {
+    curPercentage: 0
+  }
+
+  curPercentage = 0;
+  intervalId: number = 0;
+
+  componentDidMount() {
+    this.preloadAssetInit();
+
+    // this.jump();
+  }
+
+  /**
+   * 资源预加载
+   */
+  preloadAssetInit = async () => {
+
+    const files = import.meta.glob("../../assets/**/*", {
+      import: "default",
+      eager: true,
+    });
+
+    const urls = Object.values(files) as string[];
+
+    await preload(urls, (progress, loaded, total) => {
+      const percentage = Math.floor(progress * 100);
+      this.setEvenProgress(percentage);
+    });
+  };
+
+  jump = () => {
+    setTimeout(() => {
+      PageCtrl.changePage(HomePage); // 跳转页面
+    }, 100);
+  };
+
+
+  /**
+   * 以1%匀速加载进度
+   * @param {*} percentage
+   */
+  setEvenProgress = (percentage) => {
+    this.intervalId && clearInterval(this.intervalId);
+    let curPercentage = this.curPercentage;
+    this.intervalId = window.setInterval(() => {
+      if (curPercentage >= percentage) {
+        clearInterval(this.intervalId);
+        this.jump();
+        return;
+      }
+      curPercentage += 1;
+      this.curPercentage = curPercentage;
+      this.setState({
+        curPercentage,
+      });
+    }, 10);
+  };
+
+  render() {
+
+    const { curPercentage } = this.state;
+
+    return <>
+      <div className="loading">
+        <div className="bg"/>
+        <div className="progressBarBg"/>
+        <div className="progressBarFill" style={{
+          width: `${curPercentage / 100 * 4.7}rem`
+        }}/>
+        {/*<span className="progressTxt">金豆正在路上...... {curPercentage}%</span>*/}
+      </div>
+      <div className="title"/>
+    </>;
+  }
 }
 
 export default LoadingDemo;