修改

src/views/portal/course/CourseSeries.vue

@@ -38,11 +38,22 @@
                 <div class="xindex-course-image">
                   <CourseImage :course="course"></CourseImage>
                   <span v-if="course.type == 20 || course.type == 10" class="course-type">录播课</span>
-                  <span class="course-type">面授课</span>
+                  <span v-if="course.type == 30" class="course-type">面授课</span>
                   <span v-if="course.type == 40" class="course-type">学习项目</span>
                 </div>
                 <div style="width: 80%" :title="course.name" v-html="course.name"
                   class="course-title portal-title-tow two-line-ellipsis"></div>
+                <!-- 关键字 -->
+                <div class="keywordInfo-every">
+                  <div class="keywordInfo" v-for="(keyword, index) in course.keywordsActive" :key="index">
+                    <el-tooltip popper-class="keywordInfo-class" :visible-arrow="false" :disabled="!keyword.showTitle">
+                      <template #content>
+                        <span v-html="keyword.title"></span>
+                      </template>
+                      <div class="keyword-content" v-html="keyword.name"></div>
+                    </el-tooltip>
+                  </div>
+                </div>
                 <div class="course-author">
                   <div class="course-author-left">
                     {{ course.teacher }}
@@ -113,12 +124,34 @@ export default {
           title: "项目管理系列课程",
           sysCreateTime: '2023-09-22',
           name: "哈哈哈",
+          keywordsActive: [{
+            showTitle: false,
+            name: '<span>哈哈哈</span>',
+            title:"<span>哈哈哈</span>"
+          },{
+            showTitle: false,
+            name: '<span>哈哈哈</span>',
+            title:"<span>哈哈哈</span>"
+          },{
+            showTitle: false,
+            name: '<span>哈哈哈</span>',
+            title:"<span>哈哈哈</span>"
+          },{
+            showTitle: false,
+            name: '<span>哈哈哈</span>',
+            title:"<span>哈哈哈</span>"
+          },{
+            showTitle: false,
+            name: '<span>哈哈哈</span>',
+            title:"<span>哈哈哈</span>"
+          }],
           summary: "哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊红i哈好哈啊哈好哈啊哈哈好哈哈啊哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊哈哈好哈哈啊"
         }, {
           id: 2,
           title: "项目管理系列课程",
           sysCreateTime: '2023-09-22',
-          ame: "哈哈哈",
+          name: "哈哈哈",
+          keywordsActive:[],
           summary: "哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊红i哈好哈啊哈好哈啊哈哈好哈哈啊哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊哈哈好哈哈啊"
         }],
         showPagCount: 0,
@@ -197,6 +230,31 @@ export default {
   transform: scale(1.25) translateY(-15px);
   transition: all 0.6s;
 }
+// 关键字卡片的样式
+.keywordInfo-every {
+  display: grid;
+  grid-template-columns: repeat(5,1fr);
+  gap: 5px;
+
+  .keywordInfo {
+    width: 100%;
+    font-size: 12px;
+    line-height: 26px;
+    background: #F2F5F7;
+    border-radius: 4px;
+    border: 1px solid #387DF7;
+
+    .keyword-content {
+      color: #387DF7;
+      text-align: center;
+    }
+  }
+
+  & .keywordInfo:last-child {
+    margin-right: 0 !important;
+  }
+
+}
 
 
 .courseTime {