style(SPA): 修改动态详情没有内容时的占位图

issue #512
slimkit · Dec 13, 2018 · c503432 · c503432
1 parent a856fc7
commit c503432
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 12 deletions.
diff --git a/resources/spa/src/images/[email protected] b/resources/spa/src/images/[email protected]
diff --git a/resources/spa/src/page/feed/FeedDetail.vue b/resources/spa/src/page/feed/FeedDetail.vue
@@ -77,7 +77,12 @@
       </main>
 
       <!-- 评论列表 -->
-      <div id="comment_list" class="m-box-model m-art-comments">
+      <div v-if="!pinnedCom.length && !comments.length" class="m-no-content" />
+      <div
+        v-else
+        id="comment_list"
+        class="m-box-model m-art-comments"
+      >
         <ul class="m-box m-aln-center m-art-comments-tabs">
           <li>{{ commentCount | formatNum }}条评论</li>
         </ul>
@@ -95,8 +100,7 @@
           @click="replyComment(comment)"
         />
         <div class="m-box m-aln-center m-justify-center load-more-box">
-          <div v-if="!pinnedCom.length && !comments.length" class="m-no-find" />
-          <span v-else-if="noMoreCom" class="load-more-ph">---没有更多---</span>
+          <span v-if="noMoreCom" class="load-more-ph">---没有更多---</span>
           <span
             v-else
             class="load-more-btn"
@@ -681,9 +685,9 @@ export default {
     line-height: 100px;
   }
 
-  .m-no-find {
-    height: 600px;
-    width: 100%;
-  }
+}
+.m-no-content {
+  height: 600px;
+  width: 100%;
 }
 </style>
diff --git a/resources/spa/src/page/news/NewsDetail.vue b/resources/spa/src/page/news/NewsDetail.vue
@@ -60,7 +60,8 @@
         />
       </div>
 
-      <div class="m-box-model m-art-comments">
+      <div v-if="!pinnedCom.length && !comments.length" class="m-no-content" />
+      <div v-else class="m-box-model m-art-comments">
         <ul class="m-box m-aln-center m-art-comments-tabs">
           <li>{{ commentCount | formatNum }}条评论</li>
         </ul>
@@ -540,4 +541,9 @@ export default {
 .m-main {
   padding-bottom: 36px;
 }
+
+.m-no-content {
+  height: 600px;
+  width: 100%;
+}
 </style>
diff --git a/resources/spa/src/style/common.less b/resources/spa/src/style/common.less
@@ -635,10 +635,10 @@
 
 /* 占位图 */
 .m-no-find {
-  background-size: 400px;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-image: url("../images/img_default_search@2x.png");
+  background: url("../images/[email protected]") center / 400px no-repeat;
+}
+.m-no-content {
+  background: @gray-bg url('../images/img_default_nothing@2x.png') center / 400px no-repeat;
 }
 .c_59b6d7 {
   color: @primary;