修改loading样式

src/views/home/learn/page-learn-content.vue

@@ -6,7 +6,9 @@
       left-arrow
       @click-left="onClickLeft"
     />
-    <van-loading v-if="loading" type="spinner" vertical >加载中...</van-loading>
+    <div class="loading" v-if="loading">
+      <van-loading  type="spinner" vertical >加载中...</van-loading>
+    </div>
     <div v-else>
       <div v-if="!isReadable" class="learn-content-rest-time">已学完</div>
       <div v-else class="learn-content-rest-time">
@@ -535,6 +537,12 @@ export default {
   font-size: 0.6rem;
   padding-bottom: 2rem;
   background-color: #fff;
+  .loading {
+    height: 85vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+   }
   .learn-content-rest-time {
     height: 1.5rem;
     display: flex;

src/views/home/learn/page-learn.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page-learn">
-    <van-loading v-if="loading" type="spinner" vertical >加载中...</van-loading>
+    <van-loading  class="loading" v-if="loading" type="spinner" vertical >加载中...</van-loading>
     <van-tabs v-else :active="active" @click="rootChange" line-width="10px">
       <!-- 根目录 -->
       <van-tab v-for="(item, index) in learnRootList" :key="index" :title="item.name">
@@ -49,6 +49,7 @@ export default {
           this.learnRootList = [...this.learnRootList, ...res.data];
           //   查询子目录
           if (this.choosedRootIndex === 0) {
+            this.loading = false;
             return;
           }
           this.getChildList();
@@ -77,4 +78,12 @@ export default {
 .contentBody {
   background-color: #fff;
 }
+.page-learn{
+    .loading{
+        height: 85vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
 </style>