From b3756280cf4440f255f86a865f46ee67c0cc9b8e Mon Sep 17 00:00:00 2001
From: 670788339 <670788339@qq.com>
Date: Fri, 31 Oct 2025 16:58:56 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/portal/course/Index.vue | 80 ++++++++++++++++++-------------
 1 file changed, 48 insertions(+), 32 deletions(-)

diff --git a/src/views/portal/course/Index.vue b/src/views/portal/course/Index.vue
index b137ed3d..4a75dc06 100644
--- a/src/views/portal/course/Index.vue
+++ b/src/views/portal/course/Index.vue
@@ -310,55 +310,30 @@
                   </span>
                 </span>
               </a>
-              <!-- 热点标签 add by zhengsongbo on 2025-08-01 -->
-<!--              <div style="margin-top:10px;flex: 1;">
-                <div class="search-item-type" style="padding-top: 2px; float: left;">
-                  <span class="item-title" style="padding-right: 5px;">热点标签:</span>
-                </div>
-                <div class="hot-tags-container">
-                  <div
-                    class="option-item"        style="padding-top: 2px; display: inline-block;"
-                    @click="handleClearHotTags"
-                  >
-                    <a class="custom" :class="isAllHotTagsSelected ? '' : 'custom2'">全部</a>
-                  </div>
-                  <div
-                    class="option-item"
-                    style="padding-top: 2px; display: inline-block;"
-                    v-for="tag in hotTagsList"
-                    :key="tag.id"
-                    @click="handleTagClick(tag, hotTagsList)"
-                  >
-                    <a class="custom" :class="tag.checked ? 'custom2' : ''">{{tag.tagName}}</a>
-                  </div>
-                </div>
-              </div>-->
               <!-- 修改热点标签区域 -->
               <div style="margin-top:10px;flex: 1;">
                 <div class="search-item-type" style="padding-top: 2px; float: left;">
                   <span class="item-title" style="padding-right: 5px;">热点标签:</span>
                 </div>
-                <div class="hot-tags-container">
-                  <!-- "全部"选项，样式与上方选项一致 -->
+                <!-- 修改热点标签容器，支持换行 -->
+                <div class="hot-tags-wrapper">
                   <div
-                    class="option-item"
-                    style="font-weight: bold; padding-top: 2px; display: inline-block;"
+                    class="option-item"        style="font-weight: bold; padding-top: 2px;"
                     :class="{ 'option-active': isAllHotTagsSelected }"
                     @click="handleClearHotTags"
                   >
-                    <a>全部</a>
+                    <span>全部</span>
                     <span :class="isAllHotTagsSelected ? 'nav-bottbor' : ''"></span>
                   </div>
 
-                  <!-- 热点标签循环，样式与上方选项一致 -->
                   <div
-                    class="option-item"        style="font-weight: bold; padding-top: 2px; display: inline-block;"
+                    class="option-item"        style="font-weight: bold; padding-top: 2px;"
                     v-for="tag in hotTagsList"
                     :key="tag.id"
                     @click="handleTagClick(tag, hotTagsList)"
                     :class="{ 'option-active': tag.checked }"
                   >
-                    <a>{{tag.tagName}}</a>
+                    <span>{{tag.tagName}}</span>
                     <span :class="tag.checked ? 'nav-bottbor' : ''"></span>
                   </div>
                 </div>
@@ -882,7 +857,7 @@ export default {
 
       // 触发搜索
       this.searchData();
-    }
+    },
 
     // 改变分页
     currentChange(val) {
@@ -2711,5 +2686,46 @@ a.custom2 {
   background-color: #387DF7 !important;
   color: white !important;
 }
+
+* 添加热点标签容器样式，支持换行 */
+.hot-tags-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  align-items: center;
+  padding-top: 2px;
+  margin-left: 90px; /* 为"热点标签:"文本留出空间 */
+}
+
+/* 调整option-item样式以适应换行布局 */
+.option-item {
+  position: relative;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+/* 保持原有的导航底部横线样式 */
+.nav-bottbor {
+  position: absolute;
+  top: 130%;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background: #387DF7;
+  border-radius: 5px;
+}
+
+/* 响应式调整，当屏幕较小时减小标签间距 */
+@media (max-width: 1600px) {
+  .hot-tags-wrapper {
+    gap: 10px;
+  }
+}
+
+@media (max-width: 1400px) {
+  .hot-tags-wrapper {
+    gap: 5px;
+  }
+}
 /* ---end--- */
 </style>