修改导航区域结构

src/views/portal/course/Index.vue

@@ -283,58 +283,59 @@
           </div> -->
           <!-- 内容导航 -->
           <div class="topNav" v-if="!newData">
-            <div class="search-div nav" style="height: 100px;flex: 1;">
-              <div @click="handleTypeAllClick(1)" class="option-item" style="font-weight: bold;position: relative;margin-right: 20px;" :class="{ 'option-active': ctypeTagAll }">
-                <a>全部</a>
-                <span :class="ctypeTagAll ? 'nav-bottbor' : ''"></span>
+            <div class="search-div nav" style="flex: 1;height: auto;">
+              <div class="nav-primary">
+                <div @click="handleTypeAllClick(1)" class="option-item" style="font-weight: bold;position: relative;margin-right: 20px;" :class="{ 'option-active': ctypeTagAll }">
+                  <a>全部</a>
+                  <span :class="ctypeTagAll ? 'nav-bottbor' : ''"></span>
+                </div>
+                <div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item" style="font-weight: bold"
+                     :class="{ 'option-active': ctypeList[0].checked }">
+                  <a>录播课</a>
+                  <span :class="ctypeList[0].checked ? 'nav-bottbor' : ''"></span>
+                </div>
+                <div @click="handleTypeClick(ctypeList[1], ctypeList)" class="option-item" style="font-weight: bold"
+                     :class="{ 'option-active': ctypeList[1].checked }">
+                  <a>线下课</a>
+                  <span :class="ctypeList[1].checked ? 'nav-bottbor' : ''"></span>
+                </div>
+                <div @click="handleTypeClick(ctypeList[2], ctypeList)" class="option-item" style="font-weight: bold"
+                     :class="{ 'option-active': ctypeList[2].checked }">
+                  <a>学习项目</a>
+                  <span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span>
+                </div>
+                <a class="option-item">
+                    <span @click="uClassClick" class="Uxtext" style="font-weight: bold"> U选小课堂
+                      <span class="uxicon">
+                        <svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
+                      </span>
+                    </span>
+                </a>
               </div>
-              <div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item" style="font-weight: bold"
-                :class="{ 'option-active': ctypeList[0].checked }">
-                <a>录播课</a>
-                <span :class="ctypeList[0].checked ? 'nav-bottbor' : ''"></span>
-              </div>
-              <div @click="handleTypeClick(ctypeList[1], ctypeList)" class="option-item" style="font-weight: bold"
-                :class="{ 'option-active': ctypeList[1].checked }">
-                <a>线下课</a>
-                <span :class="ctypeList[1].checked ? 'nav-bottbor' : ''"></span>
-              </div>
-              <div @click="handleTypeClick(ctypeList[2], ctypeList)" class="option-item" style="font-weight: bold"
-                :class="{ 'option-active': ctypeList[2].checked }">
-                <a>学习项目</a>
-                <span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span>
-              </div>
-              <a class="option-item">
-                <span @click="uClassClick" class="Uxtext" style="font-weight: bold"> U选小课堂
-                  <span class="uxicon">
-                    <svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
-                  </span>
-                </span>
-              </a>
               <!-- 修改热点标签区域 -->
               <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-wrapper">
-                  <div
-                    class="option-item"        style="font-weight: bold; padding-top: 2px;"
-                    :class="{ 'option-active': isAllHotTagsSelected }"
-                    @click="handleClearHotTags"
-                  >
-                    <span>全部</span>
-                    <span :class="isAllHotTagsSelected ? 'nav-bottbor' : ''"></span>
-                  </div>
+                  <div class="hot-tags-wrapper">
+                    <div
+                      class="option-item"        style="font-weight: bold; padding-top: 2px;"
+                      :class="{ 'option-active': isAllHotTagsSelected }"
+                      @click="handleClearHotTags"
+                    >
+                      <span>全部</span>
+                      <span :class="isAllHotTagsSelected ? 'nav-bottbor' : ''"></span>
+                    </div>
 
-                  <div
-                    class="option-item"        style="font-weight: bold; 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
+                      class="option-item"        style="font-weight: bold; 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>
@@ -1036,33 +1037,33 @@ export default {
       this.searchData(1);
     },
     // 清除
-handleClearTags() {
-  //清空所有的条件
-  this.keyword = '';
-  this.ctypeList.forEach(item => {
-    item.checked = false;
-  });
-  this.hotTagsList.forEach(item => {
-    item.checked = false;
-  });
-  this.course.tags = ''; // 清空标签ID
-
-  // 添加清除三级分类的逻辑
-  this.oneList.forEach(one => {
-    one.checked = false;
-    one.children.forEach(two => {
-      two.checked = false;
-      two.children.forEach(three => {
-        three.checked = false;
+    handleClearTags() {
+      //清空所有的条件
+      this.keyword = '';
+      this.ctypeList.forEach(item => {
+        item.checked = false;
       });
-    });
-  });
+      this.hotTagsList.forEach(item => {
+        item.checked = false;
+      });
+      this.course.tags = ''; // 清空标签ID
 
-  // 清空导航标题
-  this.navTitle = [];
+      // 添加清除三级分类的逻辑
+      this.oneList.forEach(one => {
+        one.checked = false;
+        one.children.forEach(two => {
+          two.checked = false;
+          two.children.forEach(three => {
+            three.checked = false;
+          });
+        });
+      });
 
-  this.searchData();
-},
+      // 清空导航标题
+      this.navTitle = [];
+
+      this.searchData();
+    },
     // 导航切换(录播课，线下课，学习项目)
     handleTypeClick(item, list) {
       item.checked = !item.checked;
@@ -1580,7 +1581,7 @@ handleClearTags() {
             if (item.teacher) {
               item.teacher = item.teacher.split(',').filter(itemValue => itemValue !== 'BOE教师').join(',');
               // if (dotIdx > 0) {
-                // item.teacher = item.teacher.substring(0, dotIdx);
+              // item.teacher = item.teacher.substring(0, dotIdx);
               // }
             }
             if (item.teacher && item.teacher == 'BOE教师') {
@@ -1856,6 +1857,9 @@ handleClearTags() {
 .topNav {
   display: flex;
   margin-bottom: 20px;
+  height: auto;
+  min-height: 80px;
+  align-items: center;
 
   .nav {
     display: flex;
@@ -2333,8 +2337,8 @@ handleClearTags() {
   margin-left: 15px;
   font-size: 14px;
   color: #3d3d3d;
-  cursor: pointer;
-  position: relative;
+  //cursor: pointer;
+  //position: relative;
 }
 
 .uxicon {
@@ -2465,6 +2469,8 @@ handleClearTags() {
     background: #fff;
     padding: 10px 25px;
     border-radius: 8px;
+    height: auto;
+    min-height: 60px;
 
     ::v-deep .el-input {
       width: 420px;
@@ -2588,7 +2594,8 @@ handleClearTags() {
   color: #3d3d3d;
   display: inline-block;
   font-size: 14px;
-  margin: 0px 15px;
+  //margin: 0px 15px;
+  font-weight: normal;
 }
 
 .option-border {
@@ -2602,7 +2609,7 @@ handleClearTags() {
 .option-active {
   color: #387DF7;
 }
-  /* 项目简介 方法一：外部 CSS 类 */
+/* 项目简介 方法一：外部 CSS 类 */
 ::v-deep.el-dialog {
   border-radius: 3% 3% 1% 1%;
   padding: 0;
@@ -2628,12 +2635,23 @@ handleClearTags() {
   padding: 0 !important;
 }
 /* ---end--- */
-/* ---标签管理 added by zhengsongbo on 2025-08-01--- */
+// 2025-11-07 10:00 修改
 .search-div.nav {
   display: block;
   width: 100%;
   clear: both;
 }
+//.search-div.nav {
+//  display: flex;
+//  flex-direction: column;
+//  height: auto;
+//  min-height: 100px;
+//}
+//.hot-tags-area {
+//  width: 100%;
+//  margin-top: 15px;
+//}
+
 .option-item {
   margin: 0px 5px;
 }
@@ -2672,7 +2690,7 @@ a.custom2 {
 
 .hot-tags-container {
   display: inline-block;
-  white-space: nowrap;
+  //white-space: nowrap;
   overflow-x: auto;
   vertical-align: top;
 }
@@ -2705,16 +2723,6 @@ a.custom2 {
   color: #387DF7 !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;
@@ -2745,5 +2753,39 @@ a.custom2 {
     gap: 5px;
   }
 }
-/* ---end--- */
+// 2025-11-07 10:00 修改
+.hot-tags-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  align-items: center;
+  padding-top: 2px;
+}
+//.hot-tags-wrapper {
+//  display: grid;
+//  grid-template-columns: repeat(auto-fill, minmax(120px, max-content));
+//  gap: 15px 20px;
+//  align-items: center;
+//  justify-items: start;
+//  width: 100%;
+//  padding: 10px 0;
+//}
+//.hot-tags-wrapper .option-item {
+//  position: relative;
+//  cursor: pointer;
+//  white-space: nowrap;
+//  padding: 5px 10px;
+//  text-align: center;
+//}
+.course-tags {
+  margin: 5px 0;
+  min-height: 20px;
+}
+
+.course-tag-item {
+  color: #333333;
+}
+.course-tag-item[style*="color: #387DF7"] {
+  color: #387DF7 !important;
+}
 </style>