精品课

src/views/portal/course/qualityCourse.vue

@@ -144,20 +144,26 @@
 <!--              </div>-->
 
               <div style="margin:20px 0;flex: 1;">
-                <div class="tags-navigation-container">
-                  <div class="option-item all-tag" :class="{ 'option-active': isAllHotTagsSelected }" @click="handleClearHotTags">
-                    <span>全部</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 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>
 
 
@@ -1647,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 {
@@ -2353,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;
@@ -2365,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;
@@ -2382,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;
 }
@@ -2421,88 +2484,23 @@ export default {
   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;
- }
-}
-
-
-/* 新增样式 */
-.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;
-}
+//.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>