调试

src/views/portal/course/Index.vue

@@ -2663,15 +2663,15 @@ a.custom2 {
   }
 }
 // 2025-11-07 10:00 修改
-.hot-tags-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 15px;
-  align-items: center;
-  padding-top: 2px;
-  margin-left: 0; // 重置默认margin
-  padding-left: 0; // 重置默认padding
-}
+//.hot-tags-wrapper {
+//  display: flex;
+//  flex-wrap: wrap;
+//  gap: 15px;
+//  align-items: center;
+//  padding-top: 2px;
+//  margin-left: 0; // 重置默认margin
+//  padding-left: 0; // 重置默认padding
+//}
 .nav-primary {
   // 确保导航项容器没有额外的padding影响对齐
   padding-left: 0;
@@ -2723,4 +2723,40 @@ a.custom2 {
   background-color: transparent !important;
 }
 
+
+
+
+
+
+/* 纯CSS方案：通过nth-child选择器控制布局 */
+.hot-tags-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  align-items: center;
+  margin-left: 85px; /* 整体向右偏移，与分类导航对齐 */
+}
+
+/* 前6个标签（全部+前5个热点）在第一行 */
+.hot-tags-wrapper .option-item:nth-child(-n+6) {
+  order: 1;
+}
+
+/* 第7个及以后的标签在第二行 */
+.hot-tags-wrapper .option-item:nth-child(n+7) {
+  order: 2;
+  margin-left: 0; /* 第二行从最左边开始 */
+}
+
+/* 创建伪元素来模拟第二行的缩进 */
+.hot-tags-wrapper::after {
+  content: '';
+  width: 100%;
+  order: 2;
+}
+
+/* 为第二行添加缩进 */
+.hot-tags-wrapper .option-item:nth-child(n+7):first-child {
+  margin-left: 85px; /* 第二行第一个标签与第一行第一个对齐 */
+}
 </style>