diff --git a/src/views/portal/course/qualityCourse.vue b/src/views/portal/course/qualityCourse.vue index 6d2d0a6e..a97d7e44 100644 --- a/src/views/portal/course/qualityCourse.vue +++ b/src/views/portal/course/qualityCourse.vue @@ -115,37 +115,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + +
- -
-
-
- 全部 -
+
+
+ 全部 +
-
-
- {{tag.tagName}} - -
+
+
+ {{tag.tagName}}
-
+
@@ -2428,4 +2440,69 @@ export default { 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; +}