切图完成

src/components/Loading.vue

@@ -13,7 +13,6 @@ const userStore = useMainStore();
 const loadNum = ref(0);
 
 onMounted(() => {
-
   Preloader({
     name: "加载页资源",
     imgs: loadImg,
@@ -25,6 +24,7 @@ onMounted(() => {
       duration: 0.2,
       autoAlpha: 1,
       onComplete: () => {
+        // 非本地环境
         if (import.meta.env.VITE_MODE != "dev") {
           getMyPrize({}, userStore.token).then((res) => {
             if (res.code == 0) {
@@ -36,7 +36,6 @@ onMounted(() => {
             }
           });
         }
-
         Preloader({
           name: "内页资源",
           imgs: pageImg,
@@ -47,7 +46,6 @@ onMounted(() => {
           },
         }).then((res) => {
           console.log("加载完成");
-
           gsap.to(".LoadPage", {
             duration: 1,
             autoAlpha: 0,
@@ -66,9 +64,11 @@ onMounted(() => {
   <div class="LoadPage" @touchmove.prevent>
     <div class="load-bg"></div>
     <div class="load-container">
-    <div class="load-icon"></div>
+      <div class="load-icon"></div>
       <div class="load-box">
-        <div class="bar"></div>
+        <div class="bar">
+          <div class="bar-icon"></div>
+        </div>
       </div>
       <div class="load-num">{{ loadNum }}%</div>
     </div>
@@ -93,40 +93,45 @@ onMounted(() => {
     @include box(750px, 1180px);
     // transform: translateY(-50%);
 
-    .load-icon{
-      @include pos(101px, 55px, 325px, 370px);
+    .load-icon {
+      @include pos(83px, 101px, 325px, 370px);
       @include bg_pos("load/icon.png");
     }
 
     .load-box {
-      @include pos(512px, 35px, 119px, 450px);
-      border-style: solid;
-      border-width: 2px;
-      border-color: #e17c4d;
+      @include pos(576px, 36px, 87px, 500px);
       border-radius: 20px;
-      padding: 2px;
+      overflow: hidden;
+      padding: 4.5px;
+      @include bg_pos("load/bar-box.png");
 
       .bar {
-        @include box(0%, 26px);
-        border-radius: 20px;
-        background: linear-gradient( -178deg, rgb(255,184,127) 0%, rgb(255,238,186) 100%);
-        background-image: -webkit-linear-gradient( -178deg, rgb(255,184,127) 0%, rgb(255,238,186) 100%);
-
+        @include box(0%, 27px);
+        position: relative;
+        @include bg_pos("load/bar.png");
+        background-size: 551px 27px;
+        .bar-icon {
+          @include box(35px, 36px);
+          position: absolute;
+          top: -4.5px;
+          left: 95%;
+          @include bg_pos("load/bar-icon.png");
+        }
       }
     }
 
     .load-num {
-      @include pos(750px, 50px, 0px, 511px);
+      @include pos(750px, 50px, 0px, 570px);
       text-align: center;
       font-size: 38px;
-      color: #ffaf5e;
+      color: rgb(255, 255, 255);
       line-height: 40px;
       font-weight: 700;
-      background: linear-gradient(to right, #f2733a, #ffd667);
+      background: linear-gradient(to right, #dadada, #ffffff);
       background-clip: text;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
-      // letter-spacing: 2px;
+      text-shadow: 0.9px 3.897px 0px rgba(44, 182, 255, 0.004);
     }
 
     .btn {