课程详情页标签样式

src/views/portal/course/Detail.vue

@@ -30,8 +30,13 @@
                 <!-- <div class="course-title-right"> -->
                 <!-- <interactBar :readonly="!stuStusts || stuStusts==0" :type="1" :data="courseInfo" :comments="false" :views="false"></interactBar> -->
               <!-- </div> -->
-              <div class="label-div">
+<!--              <div class="label-div">
                 <el-tag class="label-item" effect="plain" v-for="(item,tagIdx) in tagArray" :key="tagIdx">{{item}}</el-tag>
+              </div>-->
+              <div class="label-div">
+                <div v-for="(item, tagIdx) in tagArray" :key="tagIdx" class="keyword-tag">
+                  {{ item }}
+                </div>
               </div>
               <div>
                 <div class="study-count">{{courseInfo.studys}}人学习</div>
@@ -458,7 +463,7 @@ export default {
       color: #444444;
     }
 
-    .label-div {
+    /*.label-div {
       margin: 5px 0;
       min-height: 20px;
       .label-item {
@@ -474,6 +479,25 @@ export default {
         background: rgba(44, 104, 255, 0.06);
         border: none; // 或者使用 border-color: transparent;
       }
+    }*/
+    .label-div {
+      margin: 5px 0;
+      min-height: 20px;
+
+      .keyword-tag {
+        padding: 0px 8px;
+        margin-top: 5px;
+        float: left;
+        line-height: 24px;
+        font-size: 12px;
+        border-radius: 2px;
+        margin-right: 8px;
+        color: #2974D6;
+        height: 24px;
+        background: rgba(41, 116, 214, 0.1);
+        font-weight: 450;
+        display: inline-block;
+      }
     }
   ::v-deep .el-rate__icon {
     font-size: 20px;