From 9148587eca908c9e5e8c9fd7a5f356a2e84deebd Mon Sep 17 00:00:00 2001
From: 670788339 <670788339@qq.com>
Date: Thu, 13 Nov 2025 13:20:03 +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 | 242 ++++--------------------------
 1 file changed, 30 insertions(+), 212 deletions(-)

diff --git a/src/views/portal/course/Index.vue b/src/views/portal/course/Index.vue
index fcc6a424..7fd37f00 100644
--- a/src/views/portal/course/Index.vue
+++ b/src/views/portal/course/Index.vue
@@ -71,25 +71,25 @@
           <!-- 内容导航 -->
           <div class="topNav" v-if="!newData">
             <div class="search-div nav" style="flex: 1;height: auto;background: #fff;">
-              <div class="nav-primary" style="gap: 5px;display: flex;margin-top: 20px;">
+              <div class="nav-primary" style="gap: 15px;display: flex">
                 <div @click="handleTypeAllClick(1)" class="option-item" style="position: relative;" :class="{ 'option-active': ctypeTagAll }">
                   <a>全部</a>
-<!--                  <span :class="ctypeTagAll ? 'nav-bottbor' : ''"></span>-->
+                  <span :class="ctypeTagAll ? 'nav-bottbor' : ''"></span>
                 </div>
-                <div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item" style="padding-left: 10px;"
+                <div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item"
                      :class="{ 'option-active': ctypeList[0].checked }">
                   <a>录播课</a>
-<!--                  <span :class="ctypeList[0].checked ? 'nav-bottbor' : ''"></span>-->
+                  <span :class="ctypeList[0].checked ? 'nav-bottbor' : ''"></span>
                 </div>
                 <div @click="handleTypeClick(ctypeList[1], ctypeList)" class="option-item"
                      :class="{ 'option-active': ctypeList[1].checked }">
                   <a>线下课</a>
-<!--                  <span :class="ctypeList[1].checked ? 'nav-bottbor' : ''"></span>-->
+                  <span :class="ctypeList[1].checked ? 'nav-bottbor' : ''"></span>
                 </div>
                 <div @click="handleTypeClick(ctypeList[2], ctypeList)" class="option-item"
                      :class="{ 'option-active': ctypeList[2].checked }">
                   <a>学习项目</a>
-<!--                  <span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span>-->
+                  <span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span>
                 </div>
                 <a class="option-item">
                     <span @click="uClassClick" class="Uxtext" > U选小课堂
@@ -100,9 +100,10 @@
                 </a>
               </div>
               <!-- 修改热点标签区域 -->
-              <div style="margin: 10px 0;">
-<!--                <div class="hot-tags-wrapper">
-                  <div class="hot-tags-wrapper">
+              <div style="margin-top:10px;flex: 1;">
+                <!-- 修改热点标签容器，支持换行 -->
+                <div class="hot-tags-wrapper">
+                  <div class="hot-tags-wrapper" style="display: flex">
                     <div
                       class="option-item"        style=" padding-top: 2px;"
                       :class="{ 'option-active': isAllHotTagsSelected }"
@@ -112,59 +113,21 @@
                       <span :class="isAllHotTagsSelected ? 'nav-bottbor' : ''"></span>
                     </div>
 
-&lt;!&ndash;                    <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>&ndash;&gt;
-                    &lt;!&ndash; 第一行的热点标签 &ndash;&gt;
-                    <div v-for="(tag, index) in firstRowTags" :key="tag.id"
-                         class="option-item" style="padding-top: 2px;"
-                         @click="handleTagClick(tag, hotTagsList, 1)"
-                         :class="{ 'option-active': tag.checked }">
-                      <span>{{ tag.tagName }}</span>
-&lt;!&ndash;                      <span :class="tag.checked ? 'nav-bottbor' : ''"></span>&ndash;&gt;
-                    </div>
-                  </div>
-                  &lt;!&ndash; 第二行热点标签 &ndash;&gt;
-                  <div class="hot-tags-row" v-if="secondRowTags.length > 0">
-                    &lt;!&ndash; 第二行的热点标签 &ndash;&gt;
-                    <div v-for="(tag, index) in secondRowTags" :key="tag.id"
-                         class="option-item" style="padding-top: 2px;"
-                         @click="handleTagClick(tag, hotTagsList, 1)"
-                         :class="{ 'option-active': tag.checked }">
-                      <span>{{ tag.tagName }}</span>
-&lt;!&ndash;                      <span :class="tag.checked ? 'nav-bottbor' : ''"></span>&ndash;&gt;
-                    </div>
-                  </div>
-                </div>-->
-
-                <div style="flex:1;" id="searchBox">
-                  <div class="field" style="display: flex">
-                    <div
-                      class="option-item"        style=" padding-top: 2px;"
-                      :class="{ 'option-active': isAllHotTagsSelected }"
-                      @click="handleClearHotTags"
-                    >
-                      <span>全部</span>
-<!--                      <span :class="isAllHotTagsSelected ? 'nav-bottbor' : ''"></span>-->
-                    </div>
                     <div class="fieldbox">
-                      <div v-for="(tag, index) in firstRowTags" :key="tag.id"
-                           class="option-item" style="padding-top: 2px;"
-                           @click="handleTagClick(tag, hotTagsList, 1)"
-                           :class="{ 'option-active': tag.checked }">
-                        <span>{{ tag.tagName }}</span>
-                      </div>
+                          <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>
+
                   </div>
                 </div>
-
               </div>
             </div>
             <!--            <div id="fixd-box" class="upload" style="margin-left: 26px;">
@@ -293,10 +256,6 @@
             </template>
             <!--  暂无数据 -->
             <div class="pagination-div">
-              <!-- <span class="pag-text" @click="loadMore()"
-                v-if="moreState == 1 && courseList.length >= course.pageSize">加载更多</span> -->
-              <!-- <span class="pag-text-msg" v-if="moreState == 2">数据加载中</span> -->
-              <!-- <span class="pag-text-msg" v-else-if="moreState == 3 && courseList.length > 0">没有更多数据了</span> -->
               <span class="notcoures" v-if="moreState == 3 && courseList.length == 0">
                 <img :src="`${webBaseUrl}/images/nocouresimg.png`" alt="">
                 <h5>暂无课程，请优先学习其它课程吧～</h5>
@@ -501,16 +460,7 @@ export default {
     // 添加计算是否所有热点标签都未选中（即"全部"选中状态）
     isAllHotTagsSelected() {
       return !this.hotTagsList.some(tag => tag.checked);
-    },
-    // 计算第一行显示的标签（前5个）
-    firstRowTags() {
-      return this.hotTagsList.slice(0, 8);
-    },
-
-    // 计算第二行显示的标签（剩余标签）
-    secondRowTags() {
-      return this.hotTagsList.slice(8);
-    },
+    }
   },
   data() {
     return {
@@ -2061,13 +2011,6 @@ export default {
   color: #999;
 }
 
-.couderbox {
-  // width: 5px;
-  // padding: 0;
-  // display: inline-block;
-  // text-align: center;
-}
-
 .coures-border {
   width: 2px;
   height: 15px;
@@ -2311,16 +2254,6 @@ export default {
   left: 98%;
 }
 
-// .el-radio-button{
-//   margin-right: 10px;
-//   margin-bottom: 10px;
-
-//   .el-radio-button__inner{
-//     background: #fff;
-//     border: none;
-//     height: 20px;
-//   }
-// }
 ::v-deep .el-radio-button__inner,
 .el-radio-group {
   vertical-align: top;
@@ -2374,13 +2307,6 @@ export default {
   }
 }
 
-.searchbar {
-  //background-color: #ffffff;
-  // border: 1px solid #f3f3f3;
-  // width: 900px;
-  // padding: 5px 20px;
-}
-
 .fixed {
   position: fixed;
   top: 0px;
@@ -2472,14 +2398,6 @@ export default {
       }
     }
 
-    // .tip{
-    //   color:#999999;
-    //   font-size: 12px;
-    //   >span{
-    //     margin-right: 8px;
-    //     cursor: pointer;
-    //   }
-    // }
     .search-item {
       // padding: 10px 0;
     }
@@ -2522,30 +2440,6 @@ export default {
     }
   }
 }
-
-// .course-form {
-//   width: 100%;
-//   margin: 10px 0;
-//   ::v-deep.el-button {
-//     width: 100%;
-//     color: #fff;
-//   }
-// }
-
-// .right-box {
-//   .add-btn {
-//     width: 100%;
-//     padding: 15px 0;
-//   }
-//   .ranking-card {
-//     margin-top: 0px;
-//   }
-
-//   .ranking-data {
-//     margin: 10px 0;
-//     color: #999999;
-//   }
-// }]
 .search-item-type {
   line-height: 25px;
   padding-right: 10px;
@@ -2599,19 +2493,15 @@ export default {
   padding: 0 !important;
 }
 /* ---end--- */
-// 2025-11-07 10:00 修改
 .search-div.nav {
   display: block;
   width: 100%;
   clear: both;
 }
 
+
 .option-item {
-  position: relative;
-  cursor: pointer;
-  white-space: nowrap;
-  // 确保所有option-item的左边距一致
-  margin: 0 5px; // 保持左右间距一致
+  margin: 0px 5px;
 }
 /* 热点标签：自定义按钮样式 */
 a.custom {
@@ -2657,22 +2547,6 @@ a.custom2 {
   display: none;
 }
 
-/* 添加标签样式 */
-//.course-tags {
-//  margin: 5px 0;
-//  min-height: 20px;
-//}
-//.course-tags ::v-deep .el-tag {
-//  color: #387DF7 !important;
-//  border-color: #387DF7 !important;
-//}
-//.course-tags ::v-deep .el-tag .el-tag__close {
-//  color: #387DF7 !important;
-//}
-//.course-tags ::v-deep .el-tag .el-tag__close:hover {
-//  background-color: #387DF7 !important;
-//  color: white !important;
-//}
 
 .course-tag-item {
   color: #333333; // 默认深灰色
@@ -2699,76 +2573,25 @@ a.custom2 {
   border-radius: 5px;
 }
 
+/* 响应式调整，当屏幕较小时减小标签间距 */
 @media (max-width: 1600px) {
-  .hot-tags-row:first-child,
-  .hot-tags-row:nth-child(2) {
-    margin-left: 80px;
-    gap: 12px;
-  }
-}
-
-@media (max-width: 1400px) {
-  .hot-tags-row:first-child,
-  .hot-tags-row:nth-child(2) {
-    margin-left: 75px;
+  .hot-tags-wrapper {
     gap: 10px;
   }
 }
 
-@media (max-width: 1200px) {
-  .hot-tags-row:first-child,
-  .hot-tags-row:nth-child(2) {
-    margin-left: 70px;
-    gap: 8px;
+@media (max-width: 1400px) {
+  .hot-tags-wrapper {
+    gap: 5px;
   }
 }
 
 .hot-tags-wrapper {
   display: flex;
   flex-wrap: wrap;
-  gap: 5px;
+  gap: 15px;
   align-items: center;
   padding-top: 2px;
-  margin-left: 0;
-  padding-left: 0;
-  width: 100%;
-}
-.nav-primary {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
-  align-items: center;
-  margin-top: 20px;
-  width: 100%;
-}
-.hot-tags-row {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  width: 100%;
-  margin-bottom: 8px; /* 行间距 */
-}
-/* 第一行热点标签：与分类导航对齐 */
-.hot-tags-row:first-child {
-  margin-left: 85px; /* 与"全部"标签对齐的偏移量 */
-  padding-left: 0;
-}
-
-/* 第二行热点标签：与第一行第一个标签对齐 */
-.hot-tags-row:nth-child(2) {
-  margin-left: 64px; /* 与第一行第一个标签对齐 */
-  padding-left: 0;
-}
-
-/* 分类导航项样式调整 */
-.nav-primary > .option-item:not(.hot-tags-wrapper) {
-  margin: 0 15px;
-}
-
-/* 热点标签项样式 */
-.hot-tags-wrapper .option-item {
-  margin: 0;
-  flex-shrink: 0; /* 防止标签被压缩 */
 }
 
 .course-tags {
@@ -2817,8 +2640,6 @@ a.custom2 {
   background-color: transparent !important;
 }
 
-
-
 .fieldbox {
 
   display: flex;
@@ -2838,7 +2659,4 @@ a.custom2 {
     color: #387DF7;
   }
 }
-
-
-
 </style>