diff --git a/src/views/portal/course/Index.vue b/src/views/portal/course/Index.vue
index 165841de..bbc0f1bb 100644
--- a/src/views/portal/course/Index.vue
+++ b/src/views/portal/course/Index.vue
@@ -184,10 +184,10 @@
v-for="(tag, tagIndex) in cinfo.tagsList"
:key="tagIndex"
size="mini"
- type="info" style="margin: 2px 2px; border-radius: 2px;"
- :style="{ color: isTagMatched(tag) ? '#387DF7' : '#333333' }"
+ type="info"
+ style="margin: 2px 2px; border-radius: 2px;"
>
- {{ tag }}
+
@@ -634,6 +634,38 @@ export default {
// window.removeEventListener("scroll", this.handleScroll);
},
methods: {
+ highlightTagKeyword(tag) {
+ if (!this.stagList || this.stagList.length === 0) {
+ return tag; // 没有搜索条件时返回原标签
+ }
+
+ // 获取所有搜索关键字
+ const searchKeywords = this.stagList.map(searchTag =>
+ searchTag.tagName || searchTag.name
+ ).filter(keyword => keyword && keyword.trim());
+
+ if (searchKeywords.length === 0) {
+ return tag; // 没有有效关键字时返回原标签
+ }
+
+ let highlightedTag = tag;
+
+ // 对每个搜索关键字进行高亮处理
+ searchKeywords.forEach(keyword => {
+ if (tag.includes(keyword)) {
+ // 使用正则表达式进行全局不区分大小写的匹配
+ const regex = new RegExp(`(${this.escapeRegExp(keyword)})`, 'gi');
+ highlightedTag = highlightedTag.replace(regex, '$1');
+ }
+ });
+
+ return highlightedTag;
+ },
+ // 辅助方法:转义正则表达式特殊字符
+ escapeRegExp(string) {
+ return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+ },
+
isTagMatched(tag) {
// 检查stagList中是否有匹配的标签
@@ -2579,4 +2611,23 @@ a.custom2 {
.course-tag-item[style*="color: #387DF7"] {
color: #387DF7 !important;
}
+
+/* 添加关键字高亮样式 */
+.keyword-highlight {
+ color: #387DF7 !important;
+ font-weight: bold;
+}
+
+/* 确保标签内的样式正确 */
+.course-tags ::v-deep .el-tag {
+ color: #333333;
+}
+
+.course-tags ::v-deep .el-tag .keyword-highlight {
+ color: #387DF7 !important;
+ font-weight: bold;
+}
+
+
+