From 26cc0835125c98f9d3a56ac2e2ac50f1345ce4fd Mon Sep 17 00:00:00 2001
From: "DESKTOP-RQ919RC\\Pc" <1300399510@qq.com>
Date: Thu, 16 Oct 2025 19:58:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=8A=A8=E7=94=BB=E5=8F=8A=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在页面中添加上传时的加载动画，包含旋转效果和半透明遮罩层，提升用户体验
---
 css/index.css   |  38 ++++++++++++++++++++++++++++++++++++++
 css/index.less  |  46 ++++++++++++++++++++++++++++++++++++++++++++++
 img/loading.png | Bin 0 -> 3343 bytes
 index.html      |   4 ++++
 4 files changed, 88 insertions(+)
 create mode 100644 img/loading.png

diff --git a/css/index.css b/css/index.css
index 7695f8e..1058265 100644
--- a/css/index.css
+++ b/css/index.css
@@ -339,3 +339,41 @@ editor {
   background-color: #ff0000;
   z-index: 999;
 }
+.loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+  align-items: center;
+  justify-content: center;
+  animation: show 0.5s;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+  font-size: 14px;
+}
+.loading .loading-img {
+  width: 1.2rem;
+  height: 1.2rem;
+  animation: loadingRotate 1s linear infinite;
+  margin-bottom: 10px;
+}
+@keyframes show {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes loadingRotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/css/index.less b/css/index.less
index 04b7a42..579b6d6 100644
--- a/css/index.less
+++ b/css/index.less
@@ -399,3 +399,49 @@ editor {
     background-color: #ff0000;
     z-index: 999;
 }
+
+.loading {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: show 0.5s;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+    font-size: 14px;
+
+    .loading-img {
+        width: 1.2rem;
+        height: 1.2rem;
+        // 动画
+        animation: loadingRotate 1s linear infinite;
+        margin-bottom: 10px;
+    }
+}
+
+@keyframes show {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes loadingRotate {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
diff --git a/img/loading.png b/img/loading.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c4effd1002183e9f235296db84896610d1aed7f
GIT binary patch
literal 3343
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
a`wTk_Q!y~mz0xQSX<$Tslgmt9NAN#f8vKv|

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 13963ce..413937f 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,10 @@
             <!-- <div class="btn-f">点击</div> -->
 
         <div class="container" id="appIndex">
+            <div class="loading">
+                <img class="loading-img" src="./img/loading.png" />
+                上传中
+            </div>
             <div class="title-box">
                 <textarea class="input" id="title" placeholder="输入标题（非必填）" :maxlength="titleLength" v-model="title" ref="titleTextarea" @input="adjustTextareaHeight"></textarea>
             </div>