From 319d7310887b8e9f33be7d18c479085a607acf0e Mon Sep 17 00:00:00 2001
From: 670788339 <670788339@qq.com>
Date: Thu, 13 Nov 2025 19:18:16 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B2=BE=E5=93=81=E8=AF=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/portal/course/qualityCourse.vue | 121 ++++++++++++++++++----
 1 file changed, 99 insertions(+), 22 deletions(-)

diff --git a/src/views/portal/course/qualityCourse.vue b/src/views/portal/course/qualityCourse.vue
index 6d2d0a6e..a97d7e44 100644
--- a/src/views/portal/course/qualityCourse.vue
+++ b/src/views/portal/course/qualityCourse.vue
@@ -115,37 +115,49 @@
 <!--                    </div>-->
 <!--                  </div>-->
 <!--                </div>-->
+<!--              </div>-->
+
+<!--              <div style="margin:20px 0;flex: 1;">-->
+<!--                <div>-->
+<!--                  <div style="display: flex">-->
+<!--                    <div-->
+<!--                      class="option-item"        style=" padding-top: 2px;"-->
+<!--                      :class="{ 'option-active': isAllHotTagsSelected }"-->
+<!--                      @click="handleClearHotTags"-->
+<!--                    >-->
+<!--                      <span>全部</span>-->
+<!--                    </div>-->
+
+<!--                    <div class="fieldbox" style="padding-left: 15px;">-->
+<!--                      <div-->
+<!--                        class="option-item"        style=" padding-top: 2px;"-->
+<!--                        v-for="tag in hotTagsList"-->
+<!--                        :key="tag.id"-->
+<!--                        @click="handleTagClick(tag, hotTagsList,1)"-->
+<!--                        :class="{ 'option-active': tag.checked }"-->
+<!--                      >-->
+<!--                        <span>{{tag.tagName}} </span>-->
+<!--                      </div>-->
+<!--                    </div>-->
+<!--                  </div>-->
+<!--                </div>-->
 <!--              </div>-->
 
               <div style="margin:20px 0;flex: 1;">
-                <!-- 修改热点标签容器，支持换行 -->
-                <div>
-                  <div style="display: flex">
-                    <div
-                      class="option-item"        style=" padding-top: 2px;"
-                      :class="{ 'option-active': isAllHotTagsSelected }"
-                      @click="handleClearHotTags"
-                    >
-                      <span>全部</span>
-                    </div>
+                <div class="tags-navigation-container">
+                  <div class="option-item all-tag" :class="{ 'option-active': isAllHotTagsSelected }" @click="handleClearHotTags">
+                    <span>全部</span>
+                  </div>
 
-                    <div class="fieldbox" style="padding-left: 15px;">
-                      <div
-                        class="option-item"        style=" padding-top: 2px;"
-                        v-for="tag in hotTagsList"
-                        :key="tag.id"
-                        @click="handleTagClick(tag, hotTagsList,1)"
-                        :class="{ 'option-active': tag.checked }"
-                      >
-                        <span>{{tag.tagName}} </span>
-                        <!--                            <span :class="tag.checked ? 'nav-bottbor' : ''"></span>-->
-                      </div>
+                  <div class="hot-tags-wrapper">
+                    <div class="option-item tag-item" v-for="tag in hotTagsList" :key="tag.id" @click="handleTagClick(tag, hotTagsList,1)" :class="{ 'option-active': tag.checked }">
+                      <span>{{tag.tagName}}</span>
                     </div>
-
                   </div>
                 </div>
               </div>
 
+
             </div>
 
 
@@ -2428,4 +2440,69 @@ export default {
    color: #387DF7;
  }
 }
+
+
+/* 新增样式 */
+.tags-navigation-container {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 0;
+  width: 100%;
+}
+
+.all-tag {
+  flex-shrink: 0;
+  margin-right: 15px;
+  padding: 6px 12px;
+  border-radius: 4px;
+  background: #f5f7fa;
+  transition: all 0.3s ease;
+  border: 1px solid #e8e8e8;
+}
+
+.hot-tags-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+}
+
+.tag-item {
+  padding: 6px 12px;
+  border-radius: 4px;
+  background: #f5f7fa;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+  border: 1px solid #e8e8e8;
+}
+
+.option-active {
+  background: #387DF7 !important;
+  color: white !important;
+  border-color: #387DF7 !important;
+}
+
+.option-item {
+  cursor: pointer;
+  font-size: 14px;
+  color: #3d3d3d;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  height: 32px;
+}
+
+.option-item:hover {
+  background: #e8f4ff;
+  color: #387DF7;
+}
+
+/* 确保原有样式不受影响 */
+.search-div.nav {
+  display: block;
+  width: 100%;
+  clear: both;
+}
 </style>