From 815385a86feebc0f32817fbdcd3452bd392b530f Mon Sep 17 00:00:00 2001
From: Zyronon <zyronon@163.com>
Date: Thu, 25 Sep 2025 19:30:47 +0800
Subject: [PATCH] Update Space.vue

---
 src/pages/article/components/Space.vue | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/pages/article/components/Space.vue b/src/pages/article/components/Space.vue
index ee7acfc3..93e3b179 100644
--- a/src/pages/article/components/Space.vue
+++ b/src/pages/article/components/Space.vue
@@ -16,21 +16,11 @@ const isMoveBottom = $computed(() => {
 </script>
 
 <template>
-   <span class="word-space"
-         v-if="isWrong"
-         :class="[
-           isWrong && 'wrong',
-           isWait && 'wait',
-           isShake ? isMoveBottom ? 'shakeBottom' : 'shake' : '',
-           isMoveBottom && 'to-bottom'
-       ]"
-         v-bind="$attrs"
-   ></span>
+  <span class="word-space wrong" v-if="isWrong"></span>
   <span v-bind="$attrs" v-else>
-    <span class="word-space mx-0.5!"
+    <span class="word-space wait"
           :class="[
-           isWrong && 'wrong',
-           isWait && 'wait',
+           isWait ? 'opacity-100':' opacity-0',
            isShake ? isMoveBottom ? 'shakeBottom' : 'shake' : '',
            isMoveBottom && 'to-bottom'
        ]"
@@ -46,6 +36,7 @@ const isMoveBottom = $computed(() => {
   height: 1.5rem;
   box-sizing: border-box;
   margin: 0 1px;
+  border-bottom: 2px solid transparent;
 
   &.wrong {
     border-bottom: 2px solid red;
@@ -57,6 +48,8 @@ const isMoveBottom = $computed(() => {
 
   &.wait {
     border-bottom: 2px solid var(--color-article);
+    margin-left: 0.125rem;
+    margin-right: 0.125rem;
 
     &::after {
       content: ' ';