fix: 🧩 相关优化

src/components/SearchKeyboard/SearchKeyboard.vue

@@ -10,91 +10,86 @@
       :list="list"
       @click="change"
     ></switchTab> -->
-    <transition
-      enter-active-class="animate__animated animate__zoomIn animate__faster"
-      leave-active-class="animate__animated animate__zoomOut  animate__faster"
-    >
-      <ul v-if="mode === 'keyboard'" key="keyboard" class="keyboard">
-        <li v-for="(item, index) in letterNum" :key="index" class="item" :data-key="item" @click="handleKeyLetter(item)">
-          {{ item }}
-        </li>
+    <ul v-if="mode === 'keyboard'" key="keyboard" class="keyboard">
+      <li v-for="(item, index) in letterNum" :key="index" class="item" :data-key="item" @click="handleKeyLetter(item)">
+        {{ item }}
+      </li>
 
-        <li class="empty item" @click="handleKeyLetter(' ')">空格</li>
-        <li class="keyboard-del item" @click="delLetter">
-          <img src="@/assets/images/search/key-del.svg" alt="" />
-        </li>
-        <li class="switch-mode item" @click="handleChangeKeyboardMode('hand')">
-          <img src="@/assets/images/search/icon_hand.svg" alt="" />
-          <p class="switchhand-txt">{{ $t('search.switchHand') }}</p>
-        </li>
-      </ul>
+      <li class="empty item" @click="handleKeyLetter(' ')">空格</li>
+      <li class="keyboard-del item" @click="delLetter">
+        <img src="@/assets/images/search/key-del.svg" alt="" />
+      </li>
+      <li class="switch-mode item" @click="handleChangeKeyboardMode('hand')">
+        <img src="@/assets/images/search/icon_hand.svg" alt="" />
+        <p class="switchhand-txt">{{ $t('search.switchHand') }}</p>
+      </li>
+    </ul>
 
-      <div v-else class="hand">
-        <div class="change-keyboard" @click="handleChangeKeyboardMode('keyboard')">
-          <img src="@/assets/images/search/icon_keyboard.svg" alt="" />
-          <p class="switchhand-txt">{{ $t('search.switchKeyboard') }}</p>
-        </div>
-        <li class="keyboard-del" @click="delLetter">
-          <img src="@/assets/images/search/key-del.svg" alt="" />
-        </li>
-        <scroll-view
-          ref="wordsScrollRef"
-          :class="{ active: wordsList && wordsList.length }"
-          class="words-scroll"
-          :scroll-x="true"
-          :refresh-delay="100"
-          :list="wordsList"
-        >
-          <ul class="words-list" :style="{ width: getWidth }">
-            <li
-              v-for="(item, index) of wordsList"
-              :key="item"
-              class="word"
-              :class="{ active: isPress === index }"
-              @mousedown="() => (isPress = index)"
-              @mouseup="() => (isPress = -1)"
-              @touchstart="() => (isPress = index)"
-              @touchend="() => (isPress = -1)"
-              @click="handleWord(item)"
-            >
-              {{ item }}
-            </li>
-          </ul>
-        </scroll-view>
-        <div class="hand-wrapper">
-          <handWriting
-            v-if="is4K"
-            ref="handWritingRef"
-            lang="CN"
-            :style="styles"
-            fill-text="手写输入区域"
-            fill-font-size="96px"
-            background-color="rgba(0, 0, 0, 0.03)"
-            border-radius="48px"
-            stroke-style="#534F46"
-            fill-style="rgba(0, 0, 0, 0.03)"
-            :width="1088"
-            :height="700"
-            @result="result"
-          />
-          <handWriting
-            v-else
-            ref="handWritingRef"
-            lang="CN"
-            :style="styles"
-            fill-text="手写输入区域"
-            fill-font-size="24px"
-            background-color="rgba(0, 0, 0, 0.03)"
-            border-radius="24px"
-            stroke-style="#534F46"
-            fill-style="rgba(0, 0, 0, 0.03)"
-            :width="544"
-            :height="350"
-            @result="result"
-          />
-        </div>
+    <div v-else class="hand">
+      <div class="change-keyboard" @click="handleChangeKeyboardMode('keyboard')">
+        <img src="@/assets/images/search/icon_keyboard.svg" alt="" />
+        <p class="switchhand-txt">{{ $t('search.switchKeyboard') }}</p>
       </div>
-    </transition>
+      <li class="keyboard-del" @click="delLetter">
+        <img src="@/assets/images/search/key-del.svg" alt="" />
+      </li>
+      <scroll-view
+        ref="wordsScrollRef"
+        :class="{ active: wordsList && wordsList.length }"
+        class="words-scroll"
+        :scroll-x="true"
+        :refresh-delay="100"
+        :list="wordsList"
+      >
+        <ul class="words-list" :style="{ width: getWidth }">
+          <li
+            v-for="(item, index) of wordsList"
+            :key="item"
+            class="word"
+            :class="{ active: isPress === index }"
+            @mousedown="() => (isPress = index)"
+            @mouseup="() => (isPress = -1)"
+            @touchstart="() => (isPress = index)"
+            @touchend="() => (isPress = -1)"
+            @click="handleWord(item)"
+          >
+            {{ item }}
+          </li>
+        </ul>
+      </scroll-view>
+      <div class="hand-wrapper">
+        <handWriting
+          v-if="is4K"
+          ref="handWritingRef"
+          lang="CN"
+          :style="styles"
+          fill-text="手写输入区域"
+          fill-font-size="96px"
+          background-color="rgba(0, 0, 0, 0.03)"
+          border-radius="48px"
+          stroke-style="#534F46"
+          fill-style="rgba(0, 0, 0, 0.03)"
+          :width="1088"
+          :height="700"
+          @result="result"
+        />
+        <handWriting
+          v-else
+          ref="handWritingRef"
+          lang="CN"
+          :style="styles"
+          fill-text="手写输入区域"
+          fill-font-size="24px"
+          background-color="rgba(0, 0, 0, 0.03)"
+          border-radius="24px"
+          stroke-style="#534F46"
+          fill-style="rgba(0, 0, 0, 0.03)"
+          :width="544"
+          :height="350"
+          @result="result"
+        />
+      </div>
+    </div>
   </div>
 </template>
 

src/views/Search/Search.vue

@@ -418,10 +418,10 @@ function handleHotSearch(item: Shop) {
     }
     .fac-scroll {
       overflow: hidden;
-      width: 856px;
+      width: 917px;
       height: 90px;
       margin-top: 0;
-      margin-left: -64px;
+      margin-left: -48px;
       // text-align: center;
       // &.center {
       //   display: flex;