1

src/views/courseDetail/components/courseMessage.vue

@@ -20,8 +20,8 @@
           <div class="jd">{{ rwLength }}任务</div>
         </div>
         <div class="cSecond">
-          <div class="cType" v-if="cType.length">
-            <div v-for="(item, index) in cType" :key="index">
+          <div class="cTypeBox" v-if="cType.length">
+            <div v-for="(item, index) in cType" :key="index" class="cType">
               <span>{{ item + '：' }}</span>
               <span v-for="(item2, index2) in cJson[item]" :key="index2">{{ item2 }}</span>
             </div>
@@ -92,6 +92,7 @@ export default {
   align-items: center;
 }
 $pad: 0 0 10px 0;
+$font: 14px;
 .courseBox {
   margin-top: 50px;
   height: 100%;
@@ -135,12 +136,27 @@ $pad: 0 0 10px 0;
       .cSecond {
         @include display();
         padding: $pad;
-        .cType {
+        font-size: $font;
+        .cTypeBox {
           margin-right: 10px;
+          .cType {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-items: center;
+            > span:nth-child(2) {
+              max-width: 200px;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              word-break: break-word;
+            }
+          }
         }
       }
       .Tname {
         padding: $pad;
+        font-size: $font;
         > span {
           margin: 0px 5px;
         }
@@ -157,7 +173,7 @@ $pad: 0 0 10px 0;
           }
         }
         .person {
-          font-size: 14px;
+          font-size: $font;
           margin-left: 10px;
         }
       }