From d3e891e5cc1c85865f0840ab6a2bb0db29a1fee5 Mon Sep 17 00:00:00 2001
From: 670788339 <670788339@qq.com>
Date: Fri, 14 Nov 2025 08:45:27 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B2=BE=E5=93=81=E8=AF=BE=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/portal/course/qualityCourse.vue | 259 ++++++++++++++++------
 1 file changed, 191 insertions(+), 68 deletions(-)

diff --git a/src/views/portal/course/qualityCourse.vue b/src/views/portal/course/qualityCourse.vue
index e2f1e6f8..6ef8cc1a 100644
--- a/src/views/portal/course/qualityCourse.vue
+++ b/src/views/portal/course/qualityCourse.vue
@@ -56,23 +56,23 @@
           <div class="topNav" v-if="!newData" style="display: flex; flex-direction: row;background-color:#fff;">
             <!-- 修改后 -->
             <div class="search-div nav" style="flex: 1;height: auto;">
-              <div class="nav-primary" style="display: flex; justify-content: space-between; align-items: center;">
-                <div style="display: flex;">
+              <div class="nav-primary" style="display: flex; justify-content: space-between; align-items: center;margin-top: 15px;">
+                <div style="display: flex;margin-top: 20px;">
                   <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 }" style="padding-left: 15px;">
                     <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 }" style="padding-left: 15px;">
                     <a>外部精选</a>
-                    <span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span>
+                    <!--                    <span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span>-->
                   </div>
                 </div>
 
@@ -90,34 +90,80 @@
                 </div>
               </div>
 
-              <div style="margin-top:10px;flex: 1;">
-                <!-- 修改热点标签容器，支持换行 -->
-                <div class="hot-tags-wrapper" style="display: flex;">
-                  <div class="hot-tags-wrapper" style="display: flex; align-items: center;">
-                    <div
-                      class="option-item"
-                      style=" padding-top: 2px; margin-left: 15px;"
-                      :class="{ 'option-active': isAllHotTagsSelected }"
-                      @click="handleClearHotTags"
-                    >
-                      <span>全部</span>
-                      <span :class="isAllHotTagsSelected ? 'nav-bottbor' : ''"></span>
-                    </div>
+              <!--              <div style="margin-top:10px;flex: 1;">-->
+              <!--                &lt;!&ndash; 修改热点标签容器，支持换行 &ndash;&gt;-->
+              <!--                <div class="hot-tags-wrapper" style="display: flex;">-->
+              <!--                  <div class="hot-tags-wrapper" style="display: flex; align-items: center;">-->
+              <!--                    <div-->
+              <!--                      class="option-item"-->
+              <!--                      style=" padding-top: 2px; margin-left: 15px;"-->
+              <!--                      :class="{ 'option-active': isAllHotTagsSelected }"-->
+              <!--                      @click="handleClearHotTags"-->
+              <!--                    >-->
+              <!--                      <span>全部</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-->
+              <!--                      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 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;min-width: 33px;"
+                         :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>
 
 
@@ -444,6 +490,9 @@ export default {
       });
       return !flag;
     },
+    isAllHotTagsSelected() {
+      return !this.hotTagsList.some(tag => tag.checked);
+    }
   },
   data() {
     return {
@@ -711,15 +760,12 @@ export default {
     },
 
 
-    // isAllHotTagsSelected() {
-    //   return !this.hotTagsList.some(tag => tag.checked);
-    // },
+
     handleClearHotTags() {
       // 清除所有热点标签的选中状态
       this.hotTagsList.forEach(tag => {
         tag.checked = false;
       });
-      this.isAllHotTagsSelected = true;
       // 清空course.tags
       this.course.tags = '';
 
@@ -1607,29 +1653,29 @@ export default {
 }
 
 // 导航
-.topNav {
-  display: flex;
-  margin-bottom: 20px;
-
-  .nav {
-    display: flex;
-    align-items: center;
-
-    .option-item {
-      position: relative;
-
-      .nav-bottbor {
-        position: absolute;
-        top: 130%;
-        left: 0;
-        width: 100%;
-        height: 4px;
-        background: #387DF7;
-        border-radius: 5px;
-      }
-    }
-  }
-}
+//.topNav {
+//  display: flex;
+//  margin-bottom: 20px;
+//
+//  .nav {
+//    display: flex;
+//    align-items: center;
+//
+//    .option-item {
+//      position: relative;
+//
+//      .nav-bottbor {
+//        position: absolute;
+//        top: 130%;
+//        left: 0;
+//        width: 100%;
+//        height: 4px;
+//        background: #387DF7;
+//        border-radius: 5px;
+//      }
+//    }
+//  }
+//}
 
 .u-class {
   ::v-deep .el-dialog {
@@ -2313,11 +2359,11 @@ export default {
   align-items: center;
   padding-top: 2px;
 }
-.search-div.nav {
-  display: block;
-  width: 100%;
-  clear: both;
-}
+//.search-div.nav {
+//  display: block;
+//  width: 100%;
+//  clear: both;
+//}
 .search-item-type {
   line-height: 25px;
   padding-right: 10px;
@@ -2325,14 +2371,14 @@ export default {
   white-space: nowrap;
 }
 
-.option-item {
-  font-family: "Menlo", "苹方-简" !important;
-  color: #3d3d3d;
-  display: inline-block;
-  font-size: 14px;
-  margin: 0px 15px;
-  cursor: pointer
-}
+//.option-item {
+//  font-family: "Menlo", "苹方-简" !important;
+//  color: #3d3d3d;
+//  display: inline-block;
+//  font-size: 14px;
+//  margin: 0px 15px;
+//  cursor: pointer
+//}
 
 .option-border {
   width: 2px;
@@ -2342,6 +2388,63 @@ export default {
   background: #666;
 }
 
+.topNav {
+  display: flex;
+  margin-bottom: 20px;
+  height: auto;
+  min-height: 80px;
+  align-items: center;
+
+  .nav {
+    display: flex;
+    align-items: center;
+
+    .option-item {
+      position: relative;
+      margin: 0 15px;
+      cursor: pointer;
+
+      .nav-bottbor {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        width: 100%;
+        height: 4px;
+        background: #387DF7;
+        border-radius: 5px;
+      }
+    }
+  }
+}
+
+.search-div.nav {
+  display: block;
+  width: 100%;
+  clear: both;
+}
+
+.option-item {
+  margin: 0px 5px;
+}
+
+.fieldbox {
+  display: flex;
+  white-space: nowrap;
+  flex-wrap: wrap;
+
+  div {
+    margin: 0 15px;
+    display: inline-block;
+    font-size: 14px;
+    line-height: 25px;
+    font-weight: 500;
+  }
+
+  .fieldactive {
+    color: #387DF7;
+  }
+}
+
 .option-active {
   color: #387DF7;
 }
@@ -2380,4 +2483,24 @@ export default {
   font-weight: bold;
   background-color: transparent !important;
 }
+
+//.fieldbox {
+//
+// display: flex;
+// white-space: nowrap;
+// flex-wrap: wrap;
+//
+// div {
+//   margin: 0 15px;
+//   display: inline-block;
+//   font-size: 14px;
+//   line-height: 25px;
+//   //color: #3d3d3d;
+//   font-weight: 500;
+// }
+//
+// .fieldactive {
+//   color: #387DF7;
+// }
+//}
 </style>