样式修改 提交一下

1

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

@@ -14,7 +14,7 @@
     <p class="title">声部分布</p>
     <!-- <el-divider class="divider"></el-divider> -->
 
-    <descriptions :column="4" class="descriptions" v-if="subject.length > 0">
+    <descriptions :column="4" class="descriptions" v-if="subject.length >= 4">
       <descriptions-item
         :label="item.key"
         :key="index"
@@ -29,12 +29,33 @@
         </div>
       </descriptions-item>
     </descriptions>
+    <div
+      v-else-if="subject.length > 0 && subject.length < 4"
+      class="descriptions"
+    >
+      <div
+        class="descriptionItem"
+        :style="`width:${100 / 4}%`"
+        :key="index"
+        v-for="(item, index) in subject"
+      >
+        <div class="descriptionItemLabel">
+          <overflow-text :text="item.key || ''"></overflow-text>
+        </div>
+        <div
+          class="descriptionItemConcat col-value"
+          @click="getSoundInfo(item.courseScheduleId)"
+        >
+          <overflow-text :text="item.value + '人' || ''"></overflow-text>
+        </div>
+      </div>
+    </div>
     <div v-else>
       <empty desc="暂无声部" />
     </div>
     <p class="title">年级分布</p>
     <!-- <el-divider class="divider"></el-divider> -->
-    <descriptions :column="6" class="descriptions" v-if="grade.length > 0">
+    <descriptions :column="6" class="descriptions" v-if="grade.length >= 6">
       <descriptions-item
         :label="gradeMap[item.key]"
         :key="index"
@@ -49,8 +70,26 @@
         </div>
       </descriptions-item>
     </descriptions>
+    <div v-else-if="grade.length > 0 && grade.length < 6" class="descriptions">
+      <div
+        class="descriptionItem"
+        :style="`width:${100 / 6}%`"
+        :key="index"
+        v-for="(item, index) in grade"
+      >
+        <div class="descriptionItemLabel">
+          <overflow-text :text="gradeMap[item.key] || ''"></overflow-text>
+        </div>
+        <div
+          class="descriptionItemConcat col-value"
+          @click="getGradeInfo(String(item.key))"
+        >
+          <overflow-text :text="item.value + '人' || ''"></overflow-text>
+        </div>
+      </div>
+    </div>
     <div v-else>
-      <empty desc="暂无年级" style="margin-bottom: 20px" />
+      <empty desc="暂无年纪" />
     </div>
     <el-alert :closable="false" class="alert marginBtm22" type="info">
       <template slot="title">
@@ -67,7 +106,7 @@
         </div>
       </template>
     </el-alert>
-    <descriptions :column="4" class="descriptions" v-if="teacher.length > 0">
+    <descriptions :column="4" class="descriptions" v-if="teacher.length >= 4">
       <descriptions-item
         :label="item.key"
         :key="index"
@@ -78,6 +117,24 @@
         </div>
       </descriptions-item>
     </descriptions>
+    <div
+      v-else-if="teacher.length > 0 && teacher.length < 4"
+      class="descriptions"
+    >
+      <div
+        class="descriptionItem"
+        :style="`width:${100 / 4}%`"
+        :key="index"
+        v-for="(item, index) in teacher"
+      >
+        <div class="descriptionItemLabel">
+          <overflow-text :text="item.key || ''"></overflow-text>
+        </div>
+        <div class="descriptionItemConcat">
+          <overflow-text :text="item.value || ''"></overflow-text>
+        </div>
+      </div>
+    </div>
     <div v-else>
       <empty desc="暂无师资安排" />
     </div>
@@ -162,19 +219,19 @@ export default {
       }
       this.subject = res.data.subject;
 
-      if (this.subject.length > 0 && this.subject.length < 4) {
-        // 样式丑 至少对齐一排
-        for (let i = 0; i <= 4 - this.subject.length; i++) {
-          this.subject.push({ key: null, value: null });
-        }
-      }
+      // if (this.subject.length > 0 && this.subject.length < 4) {
+      //   // 样式丑 至少对齐一排
+      //   for (let i = 0; i <= 4 - this.subject.length; i++) {
+      //     this.subject.push({ key: null, value: null });
+      //   }
+      // }
       this.teacher = res.data.teacher;
-      if (this.teacher.length > 0 && this.teacher.length < 4) {
-        // 样式丑 至少对齐一排
-        for (let i = 0; i <= 4 - this.subject.length; i++) {
-          this.teacher.push({ key: null, value: null });
-        }
-      }
+      // if (this.teacher.length > 0 && this.teacher.length < 4) {
+      //   // 样式丑 至少对齐一排
+      //   for (let i = 0; i <= 4 - this.subject.length; i++) {
+      //     this.teacher.push({ key: null, value: null });
+      //   }
+      // }
     } catch (e) {
       console.log(e);
     }
@@ -268,4 +325,46 @@ export default {
     z-index: 500;
   }
 }
+.descriptions {
+  display: flex;
+  flex-direction: row;
+  .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>