样式修改完毕

1

src/views/resetTeaming/components/archicesComponents/trainTimer.vue

@@ -52,7 +52,7 @@
         </el-select>
       </el-form-item>
     </save-form>
-    <div v-if="dataList.length > 0">
+    <div v-if="dataList.length > 4">
       <!--  {{ item.name }}{{item.type | classType}}: -->
       <!-- <el-row class="row">
         <el-col
@@ -82,6 +82,26 @@
         </descriptions-item>
       </descriptions>
     </div>
+     <div
+      v-else-if="dataList.length > 0 && dataList.length < 4"
+      class="descriptions"
+    >
+      <div
+        class="descriptionItem"
+        :style="`width:${100 / 4}%`"
+        :key="index"
+        v-for="(item, index) in dataList"
+      >
+        <div class="descriptionItemLabel">
+          {{item.name}}
+        </div>
+        <div
+          class="descriptionItemConcat col-value"
+        >
+         {{ item.currentClassTimes }}/{{ item.totalClassTimes }}课时
+        </div>
+      </div>
+    </div>
     <div v-else>
       <empty desc="暂无数据" />
     </div>
@@ -128,13 +148,13 @@ export default {
           term: this.searchForm.term,
         });
         this.dataList = res.data;
-        if(this.dataList.length > 0&&this.dataList.length<4){
-          // 样式丑 至少对齐一排
-          for(let i=0;i<=4-this.dataList.length;i++){
-            this.dataList.push({name:null,totalClassTimes:null,currentClassTimes:null})
-          }
-        }
-        console.log(this.dataList )
+        // if(this.dataList.length > 0&&this.dataList.length<4){
+        //   // 样式丑 至少对齐一排
+        //   for(let i=0;i<=4-this.dataList.length;i++){
+        //     this.dataList.push({name:null,totalClassTimes:null,currentClassTimes:null})
+        //   }
+        // }
+        // console.log(this.dataList )
       } catch (e) {}
     },
   },
@@ -187,4 +207,51 @@ export default {
     z-index: 500;
   }
 }
+.descriptions {
+    margin-bottom: 30px;
+  display: flex;
+  flex-direction: row;
+    .col-value {
+    color: #14928a;
+    cursor: pointer;
+  }
+  .descriptionItem {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    height: 46px;
+    line-height: 46px;
+    border-top: 1px solid #e8e8e8;
+    border-bottom: 1px solid #e8e8e8;
+    &:first-child {
+      border-left: 1px solid #e8e8e8;
+    }
+    .descriptionItemLabel {
+      border-right: 1px solid #e8e8e8;
+      background-color: #fafafa;
+      color: rgba(0, 0, 0, 0.85);
+      font-weight: 400;
+      font-size: 14px;
+      width: 50%;
+      text-align: center;
+    }
+    .descriptionItemConcat {
+      .col-value {
+        color: #14928a;
+        cursor: pointer;
+      }
+      text-align: center;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      border-right: 1px solid #e8e8e8;
+      font-size: 14px;
+      line-height: 1.5;
+      padding: 12px 16px;
+      color: rgba(0, 0, 0, 0.65);
+      display: table-cell;
+      width: 50%;
+    }
+  }
+}
 </style>