no message

src/pages/stuMan/components/cancelClassList.vue

@@ -17,10 +17,10 @@
                     <div class="content-title teacherName">老师名字</div>
                     <div class="content-title traineesName activeOne">学员名字</div>
                     <div class="right-content" v-for="item in 3">
-                        <div class="content-single">语音1语音1语音1语音1</div>
-                        <div class="content-multiple">
-                            <div class="content-tetx">理解1语音1语音1语音1</div>
-                            <div class="content-tetx">活动2</div>
+                        <!-- <div class="content-single activeOne">语音1语音1语音1语音1</div> -->
+                        <div class="content-multiple fit row">
+                            <div class="content-tetx activeOne">理解</div>
+                            <div class="content-tetx activeTwo">活动2</div>
                         </div>
                         <div class="content-show">
                             <div></div>
@@ -162,9 +162,9 @@
         border-right: 1px solid #DDDEE0;
     }
     .right-content{
-        display: flex;
-        flex-direction: column;
-        width: 80px;
+        /* display: flex;
+        flex-direction: column; */
+        width: 90px;
         height: 40px;
         border-bottom: 1px solid #DDDEE0;
         border-right: 1px solid #DDDEE0;
@@ -177,19 +177,26 @@
     .content-single,.content-tetx{
         flex: 1;
         flex-shrink: 0;
-        line-height: 40px;
         text-align: center;
-        overflow: hidden;
-        white-space: nowrap;
+        word-break: break-all;
         text-overflow: ellipsis;
+        display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
+        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
+        -webkit-line-clamp: 2; /** 显示的行数 **/
+        overflow: hidden;
         padding: 0 5px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
-    .right-content.activeOne{
+    .content-single.activeOne,.content-tetx.activeOne{
         background: #6FE053;
     }
-    .right-content.activeTwo{
+    .content-tetx.activeTwo,.content-tetx.activeTwo{
         background: #FA716A;
-        color: white;
+    }
+    .content-tetx.activeThree,.content-tetx.activeThree{
+        background: #BDD7EE;
     }
     .content-tetx{
         border-right: 1px solid #DDDEE0;