Update Home.vue

Author: anjoy8

src/views/Home.vue

@@ -1,20 +1,18 @@
 <template>
     <div class="home">
-        <article class="newhome">
+        <article class="newhome" v-cloak >
             <!--lbox begin-->
-            <div class="lbox">
-
+            <div class="lbox" v-loading="pictLoading" element-loading-background="rgba(247, 245, 245, 0.7)" element-loading-text="Loading..." >
                 <div class="ad whitebg"></div>
-                <div v-if="isShow" >
+                <template v-if="isShow" >
                     <div class="whitebg bloglist">
                         <h2 class="htitle">最新博文
-
                             <router-link :to="'/Editor'" class="prev" style="float:right;" rel="prev">
                                 Add My Study
                             </router-link>
                         </h2>
                         <ul>
-                            <div v-for="i in 6" :key="i">
+                            <div v-for="i in 6" :key="i" v-cloak>
                                 <el-row :gutter="20">
                                     <el-col :span="7">
                                         <div class="grid-content bg-purple"></div>
@@ -26,29 +24,25 @@
                                         <div class="grid-content bg-purple"></div>
                                     </el-col>
                                 </el-row>
-
-                                <p class="bloginfo"><i class="avatar"></i><span>技术博文</span><span>2019-01-01</span><span>【<a
-                                        href="/">Author</a>】</span>
+                                <p class="bloginfo">
+                                    <i  class="avatar"></i>
+                                    <span>技术博文</span>
+                                    <span>2019-01-01</span>
+                                    <span>【<a  href="/">Author</a>】</span>
                                     <a href="/" class="viewmore-row">更多</a>
                                 </p>
                             </div>
                         </ul>
                         <nav id="page-nav">
-                            <router-link :to="'/?page=' + (page>1?page-1:1)" class="prev" rel="prev">
-                                {{(page>1? "pre": "")}}
-                            </router-link>
+                            <router-link :to="'/?page=' + (page>1?page-1:1)" class="prev" rel="prev">{{(page>1? "pre": "")}}</router-link>
                             <router-link :to="'/?page=' + (page>=TotalCount? TotalCount: page+1)" class="next" rel="next">
                                 {{(page>=TotalCount? "": "Next")}}
                             </router-link>
-
                         </nav>
                     </div>
-
-
-                </div>
-                <div v-else v-cloak class="whitebg bloglist">
+                </template>
+                <div v-else name="fade" mode="out-in"  class="whitebg bloglist">
                     <h2 class="htitle">最新博文
-
                         <router-link :to="'/Editor'" class="prev" style="float:right;" rel="prev">
                             Add My Study
                         </router-link>
@@ -78,7 +72,6 @@
                         <router-link :to="'/?page=' + (page>=TotalCount? TotalCount: page+1)" class="next" rel="next">
                             {{(page>=TotalCount? "": "Next")}}
                         </router-link>
-
                     </nav>
                 </div>
                 <!--bloglist end-->
@@ -91,14 +84,18 @@
                     <p>Add：Peking Haidian</p>
                     <p>Email：[email protected]</p>
                     <ul class="linkmore">
-                        <li><a href="http://laozhang-is-phi.cnblogs.com/" target="_blank" class="iconfont icon-zhuye"
-                               title="网站地址"></a></li>
-                        <li><a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;[email protected]"
-                               target="_blank" class="iconfont icon-youxiang" title="我的邮箱"></a></li>
-                        <li><a href="http://wpa.qq.com/msgrd?v=3&amp;uin=3143422472&amp;site=qq&amp;menu=yes"
-                               target="_blank" class="iconfont icon---" title="QQ联系我"></a></li>
-                        <li><a href="https://github.com/anjoy8" target="_blank" class="iconfont icon-weixin"
-                               title="github"></a></li>
+                        <li>
+                            <a href="http://laozhang-is-phi.cnblogs.com/" target="_blank" class="iconfont icon-zhuye" title="网站地址"></a>
+                        </li>
+                        <li>
+                            <a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;[email protected]" target="_blank" class="iconfont icon-youxiang" title="我的邮箱"></a>
+                        </li>
+                        <li>
+                            <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=3143422472&amp;site=qq&amp;menu=yes" target="_blank" class="iconfont icon---" title="QQ联系我"></a>
+                        </li>
+                        <li>
+                            <a href="https://github.com/anjoy8" target="_blank" class="iconfont icon-weixin" title="github"></a>
+                        </li>
                     </ul>
                 </div>
                 <div class="whitebg notice">
@@ -132,7 +129,6 @@
                 <div class="endnav">
                     <p><b>免职声明：</b></p>
                     <p>1、当前页设计样式模板来自网上资源，仅作学习参考，若商用请联系 [素材火]。</p>
-
                 </div>
             </div>
         </footer>
@@ -151,11 +147,13 @@ export default {
     return {
       page: 1,
       TotalCount: 1,
+      pictLoading: true,
       isShow: true,
       list: []
     };
   },
-  created() {
+  created() {},
+  mounted() {
     this.getData();
   },
   methods: {
@@ -175,6 +173,7 @@ export default {
         this.page = r.page;
         this.TotalCount = r.pageCount;
         this.isShow = false;
+        this.pictLoading = false;
       });
     }
   },
@@ -228,18 +227,23 @@ export default {
   padding: 0px 10px;
   height: 30px;
 }
-.bg-purple{
-    background: #eaeaea;
-    -webkit-animation: loading 1s ease-in-out infinite;
-    animation: loading 1s ease-in-out infinite;
+.bg-purple {
+  background: #eaeaea;
+  -webkit-animation: loading 1s ease-in-out infinite;
+  animation: loading 1s ease-in-out infinite;
 }
-@keyframes loading{
-    0%{width:90%}
-    50%{width:100%}
-    to{width:90%}
+@keyframes loading {
+  0% {
+    width: 90%;
+  }
+  50% {
+    width: 100%;
+  }
+  to {
+    width: 90%;
+  }
 }
 [v-cloak] {
-    display:none;
-
+  display: none !important;
 }
 </style>