编辑器-基础-封面设置弹窗 调整无数据提示样式

src/components/tableSelect2.vue

@@ -24,12 +24,13 @@
       <i v-if="searchKey" @click="searchKey=''" class="iconfont icontoast_red clear-icon"></i>
     </div>
 
-    <div class="table" v-show="currentMaterialType === 'image'">
+    <div class="table table-image" v-show="currentMaterialType === 'image'">
       <div class="table-head-row">
         <span class="table-head">1</span>
         <span class="table-head" v-for="(item,i) in tableHeadersForImage" :key="i">{{item.name}}</span>
       </div>
       <div
+        v-if="imageList.length !== 0 || hasMoreImageData"
         class="table-body"
         v-infinite-scroll="requestMoreImageData"
         :infinite-scroll-disabled="!hasMoreImageData || isRequestingMoreImageData"
@@ -57,25 +58,25 @@
         </div>
       </div>
       <!-- 无数据时的提示 -->
-      <tbody v-if="imageList.length === 0 && !hasMoreImageData">
-        <tr>
-          <td colspan="10">
-            <div class="nodata">
-              <img :src="$noresult" alt="">
-              <span v-if="lastestUsedSearchKey">{{'未搜索到结果~'}}</span>
-              <span v-if="!lastestUsedSearchKey">{{'暂无素材，快去上传吧'}}</span>
-            </div>
-          </td>
-        </tr>
-      </tbody>
+      <div v-if="imageList.length === 0 && !hasMoreImageData" class="no-data">
+        <div v-if="lastestUsedSearchKey">
+          <img :src="require('@/assets/images/default/empty_04_search.png')" alt="">
+          <span>{{'未搜索到结果~'}}</span>
+        </div>
+        <div v-if="!lastestUsedSearchKey">
+          <img :src="require('@/assets/images/default/empty_04.png')" alt="">
+          <span>{{'暂无素材~'}}</span>
+        </div>
+      </div>
     </div>
 
-    <div class="table" v-show="currentMaterialType === 'pano'">
+    <div class="table table-pano" v-show="currentMaterialType === 'pano'">
       <div class="table-head-row">
         <span class="table-head">1</span>
         <span class="table-head" v-for="(item,i) in tableHeadersForPano" :key="i">{{item.name}}</span>
       </div>
       <div
+        v-if="panoList.length !== 0 || hasMorePanoData"
         class="table-body"
         v-infinite-scroll="requestMorePanoData"
         :infinite-scroll-disabled="!hasMorePanoData || isRequestingMorePanoData"
@@ -103,17 +104,16 @@
         </div>
       </div>
       <!-- 无数据时的提示 -->
-      <tbody v-if="panoList.length === 0 && !hasMorePanoData">
-        <tr>
-          <td colspan="10">
-            <div class="nodata">
-              <img :src="$noresult" alt="">
-              <span v-if="lastestUsedSearchKey">{{'未搜索到结果~'}}</span>
-              <span v-if="!lastestUsedSearchKey">{{'暂无素材，快去上传吧'}}</span>
-            </div>
-          </td>
-        </tr>
-      </tbody>
+      <div v-if="panoList.length === 0 && !hasMorePanoData" class="no-data">
+        <div v-if="lastestUsedSearchKey">
+          <img :src="require('@/assets/images/default/empty_04_search.png')" alt="">
+          <span>{{'未搜索到结果~'}}</span>
+        </div>
+        <div v-if="!lastestUsedSearchKey">
+          <img :src="require('@/assets/images/default/empty_04.png')" alt="">
+          <span>{{'暂无素材~'}}</span>
+        </div>
+      </div>
     </div>
 
     <div class="btns">
@@ -124,7 +124,6 @@
 </template>
 
 <script>
-import vAudio from '@/components/audio'
 import { getMaterialList} from "@/api";
 import { changeByteUnit } from '@/utils/file'
 import config from "@/config";
@@ -141,7 +140,6 @@ export default {
     },
   },
   components:{
-    vAudio
   },
   watch:{
     searchKey: {
@@ -411,22 +409,6 @@ export default {
       line-height: @table-head-row-height;
       height: 100%;
       display: inline-block;
-      &:nth-of-type(1) {
-        width: 50px;
-        color: transparent;
-      }
-      &:nth-of-type(2) {
-        width: calc(116px - 50px);
-      }
-      &:nth-of-type(3) {
-        width: calc(316px - 116px);
-      }
-      &:nth-of-type(4) {
-        width: calc(416px - 316px);
-      }
-      &:nth-of-type(5) {
-        width: calc(100% - 416px);
-      }
     }
   }
   > .table-body {
@@ -447,22 +429,6 @@ export default {
         line-height:50px;
         height: 100%;
         color: #fff;
-        &:nth-of-type(1) {
-          width: 50px;
-        }
-        &:nth-of-type(2) {
-          width: calc(116px - 50px);
-        }
-        &:nth-of-type(3) {
-          width: calc(316px - 116px);
-          padding-right: 50px;
-        }
-        &:nth-of-type(4) {
-          width: calc(416px - 316px);
-        }
-        &:nth-of-type(5) {
-          width: calc(100% - 416px);
-        }
         > .list-img {
           position: relative;
           height: 100%;
@@ -480,6 +446,66 @@ export default {
       }
     }
   }
+  > .no-data {
+    height: calc(@table-height - @table-head-row-height - @table-border-size - @table-border-size);
+    width: 100%;
+    position: relative;
+    > div {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      text-align: center;
+      > img {
+        width: 116px;
+      }
+      > span {
+        margin-top: 20px;
+        display: block;
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.6);
+      }
+    }
+  }
+}
+
+.table-image .table-head,
+.table-image .table-data {
+  &:nth-of-type(1) {
+    width: 50px;
+    color: transparent;
+  }
+  &:nth-of-type(2) {
+    width: calc(116px - 50px);
+  }
+  &:nth-of-type(3) {
+    width: calc(316px - 116px);
+    padding-right: 30px;
+  }
+  &:nth-of-type(4) {
+    width: calc(416px - 316px);
+  }
+  &:nth-of-type(5) {
+    width: calc(100% - 416px);
+  }
+}
+
+.table-pano .table-head,
+.table-pano .table-data {
+  &:nth-of-type(1) {
+    width: 50px;
+    color: transparent;
+  }
+  &:nth-of-type(2) {
+    width: calc(116px - 50px);
+  }
+  &:nth-of-type(3) {
+    width: calc(416px - 116px);
+    padding-right: 30px;
+  }
+  &:nth-of-type(4) {
+    width: calc(100% - 416px);
+  }
 }
 
 .checkbox {