style (search): 搜索部分ui 更改

src/views/HomeSearch/components/Recommend/Index.vue

@@ -26,10 +26,9 @@ function formatStr(str: string, limit = 6) {
       <template #title>
         <el-text class="title">热门搜索</el-text>
       </template>
-      <el-space>
+      <section class="tags">
         <el-tag
           @click="updateKeyword(tag.key_word)"
-          style="color: black"
           color="white"
           :hit="false"
           round
@@ -37,7 +36,7 @@ function formatStr(str: string, limit = 6) {
         >
           {{ formatStr(tag.key_word) }}
         </el-tag>
-      </el-space>
+      </section>
     </layout>
 
     <layout>
@@ -49,15 +48,8 @@ function formatStr(str: string, limit = 6) {
           </div>
         </section>
       </template>
-      <section style="display: flex; flex-wrap: wrap">
-        <el-tag
-          style="color: black; margin: 3px"
-          color="white"
-          :hit="false"
-          round
-          @click="updateKeyword(tag)"
-          v-for="tag in history"
-        >
+      <section class="tags">
+        <el-tag color="white" :hit="false" round @click="updateKeyword(tag)" v-for="tag in history">
           {{ formatStr(tag) }}
         </el-tag>
       </section>
@@ -86,4 +78,14 @@ function formatStr(str: string, limit = 6) {
   justify-content: space-between;
   align-items: center;
 }
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+
+  .el-tag {
+    color: black;
+  }
+}
 </style>