完成加载页、首页、选择页切图

src/components/Loading.vue

@@ -41,7 +41,6 @@ onMounted(() => {
           name: "内页资源",
           imgs: pageImg,
           callback: (progress) => {
-            // console.log('进度：', progress);
             gsap.set(".bar", { width: progress + "%" });
             loadNum.value = progress;
           },
@@ -66,11 +65,13 @@ 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>
-      <div class="load-num">{{ loadNum }}%</div>
+      <div class="load-num">
+        <span class="num">{{ loadNum }}%</span>
+      </div>
     </div>
   </div>
 </template>
@@ -85,7 +86,7 @@ onMounted(() => {
   .load-bg {
     @include pos(750px, 100%, 0px, 50%);
     transform: translateY(-50%);
-    @include bg_pos("load/bg.jpg");
+    @include bg_pos("index/bg.jpg");
   }
 
   .load-container {
@@ -93,40 +94,48 @@ onMounted(() => {
     @include box(750px, 1180px);
     // transform: translateY(-50%);
 
-    .load-icon{
-      @include pos(101px, 55px, 325px, 370px);
+    .load-icon {
+      @include pos(363px, 136px, 335px, 320px);
       @include bg_pos("load/icon.png");
     }
 
     .load-box {
-      @include pos(512px, 35px, 119px, 450px);
-      border-style: solid;
-      border-width: 2px;
-      border-color: #e17c4d;
-      border-radius: 20px;
-      padding: 2px;
+      @include pos(582px, 45px, 83px, 450px);
+      border-radius: 25px;
+      padding: 1px;
+      border: 1px solid rgb(243, 87, 4);
+
 
       .bar {
-        @include box(0%, 26px);
+        @include box(0%, 38px);
         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%);
+        border: 1px solid rgb(255, 255, 255);
+
+        background-image: -webkit-linear-gradient(0deg, #f7c86f 0%, #f25501 100%);
 
       }
     }
 
     .load-num {
-      @include pos(750px, 50px, 0px, 511px);
-      text-align: center;
-      font-size: 38px;
-      color: #ffaf5e;
-      line-height: 40px;
-      font-weight: 700;
-      background: linear-gradient(to right, #f2733a, #ffd667);
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      // letter-spacing: 2px;
+      @include pos(235px, 80px, 256px, 511px);
+      @include bg_pos("load/icon-2.png");
+
+      @include flexCen();
+
+
+      .num {
+        font-size: 40px;
+        color: #f25501;
+        font-weight: 700;
+
+        /* 文字填充色 */
+        text-shadow:
+          -1px -1px 0 #ffffff,
+          1px -1px 0 #ffffff,
+          -1px 1px 0 #ffffff,
+          1px 1px 0 #ffffff;
+        /* 四个方向阴影叠加 */
+      }
     }
 
     .btn {