为空时显示无数据样式

components/bussiness/course-times-list.vue

@@ -6,17 +6,22 @@
       <li>课程时长</li>
       <li>人均学习时长</li>
     </ul>
-    <ul class="list">
+    <ul v-if="dataList.length" class="list">
       <li v-for="(item, index) in dataList" :key="index">
         <span>{{item.courseName | shortName}}</span>
         <span>{{item.courseTime | convert}}</span>
         <span>{{item.averageTime | convert}}</span>
       </li>
     </ul>
+    <NoContent v-show="!dataList.length"></NoContent>
   </div>
 </template>
 <script>
+import NoContent from "@/components/bussiness/no-content";
 export default {
+  components: {
+    NoContent
+  },
   props: {
     dataList: {
       type: Array,

components/bussiness/exam-list.vue

@@ -5,16 +5,21 @@
       <li>考试名</li>
       <li>参与通过率</li>
     </ul>
-    <ul class="list">
+    <ul v-if="dataList.length" class="list">
       <li v-for="(item, index) in dataList" :key="index">
         <span>{{item.examName | shortName}}</span>
         <span>{{(item.joinRate * 100).toFixed(1)}}%</span>
       </li>
     </ul>
+    <NoContent v-show="!dataList.length"></NoContent>
   </div>
 </template>
 <script>
+import NoContent from "@/components/bussiness/no-content";
 export default {
+  components: {
+    NoContent
+  },
   props: {
     dataList: {
       type: Array,

components/bussiness/exam-score-list.vue

@@ -6,19 +6,22 @@
       <li>考试分数(分)</li>
       <li>考试人数(个)</li>
     </ul>
-    <ul class="list">
+    <ul v-if="dataList.length" class="list">
       <li v-for="(item, index) in dataList" :key="index">
         <span>{{item.timesStr}}</span>
         <span>{{item.count}}</span>
       </li>
     </ul>
+    <NoContent v-show="!dataList.length"></NoContent>
   </div>
 </template>
 <script>
 import TipsInfo from '@/components/bussiness/tips-info'
+import NoContent from "@/components/bussiness/no-content";
 export default {
   components: {
-    TipsInfo
+    TipsInfo,
+    NoContent
   },
   props: {
     dataList: {

components/bussiness/exam-times-list.vue

@@ -6,19 +6,22 @@
       <li>考试次数(次)</li>
       <li>考试人数(个)</li>
     </ul>
-    <ul class="list">
+    <ul v-if="dataList.length" class="list">
       <li v-for="(item, index) in dataList" :key="index">
         <span>{{item.times}}</span>
         <span>{{item.count}}</span>
       </li>
     </ul>
+    <NoContent v-show="!dataList.length"></NoContent>
   </div>
 </template>
 <script>
 import TipsInfo from '@/components/bussiness/tips-info'
+import NoContent from "@/components/bussiness/no-content";
 export default {
   components: {
-    TipsInfo
+    TipsInfo,
+    NoContent
   },
   props: {
     dataList: {

components/bussiness/ranking-item-days.vue

 <!-- 完成天数排名组件 -->
 <template>
-  <ul class="rank-item-days">
+  <ul v-if="rankList.length" class="rank-item-days">
     <li v-for="(item, index) in rankList" :key="index">
       <div class="order">
         <img v-if="index === 0 || index === 1 || index === 2" :src="getRankImgUrl(index)" alt="">
@@ -15,10 +15,15 @@
         <p class="desc-2">完成天数</p>
       </div>
     </li>
+    <NoContent v-show="!rankList.length"></NoContent>
   </ul>
 </template>
 <script>
+import NoContent from "@/components/bussiness/no-content";
 export default {
+  components: {
+    NoContent
+  },
   props: {
     rankList: {
       type: Array,

components/bussiness/ranking-item.vue

 <!-- 培训情况排名组件 -->
 <template>
   <div>
-    <ul class="rank-item">
+    <ul v-if="rankList.length" class="rank-item">
       <li v-for="(item, index) in rankList" :key="index">
         <div class="order">
           <img v-if="index === 0 || index === 1 || index === 2" :src="getRankImgUrl(index)" alt />
@@ -17,10 +17,15 @@
         </div>
       </li>
     </ul>
+    <NoContent v-if="!rankList.length"></NoContent>
   </div>
 </template>
 <script>
+import NoContent from "@/components/bussiness/no-content";
 export default {
+  components: {
+    NoContent
+  },
   props: {
     rankList: {
       type: Array,