调整为响应式页面

src/app/services/global-user.service.ts

@@ -115,7 +115,7 @@ export class GlobalUserService {
                 }
                 this.localStorageService.removeToken();
                 this.userObserverArray.forEach(ob => ob.next(new Response<User>(null)));
-                this.userObserverArray.forEach(ob => ob.error(err));
+                this.userObserverArray.forEach(ob => ob.error && ob.error(err));
             }
         });
     }

src/app/view/admin/admin-dashboard/admin-dashboard.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="userInfo&&userInfo.role==='admin'">
     <div nz-row>
-        <nz-card nzTitle="统计" nz-col nzSpan="12" nzSize="small">
+        <nz-card nzTitle="统计" nz-col nzXs="24" nzSm="12" nzSize="small">
             <nz-row [nzGutter]="24">
                 <nz-col [nzSpan]="6">
                     <nz-statistic [nzValue]="(counts.articleCount | number)!" nzTitle="文章数量"></nz-statistic>
@@ -16,7 +16,7 @@
                 </nz-col>
             </nz-row>
         </nz-card>
-        <nz-card nzTitle="信息" nz-col nzSpan="11" nzOffset="1" nzSize="small">
+        <nz-card nzTitle="信息" nz-col nzXs="24" [nzSm]="{span:11,offset:1}" nzSize="small">
             <nz-row [nzGutter]="24">
                 <nz-col [nzSpan]="8">
                     <nz-statistic [nzValue]="(counts.visitorCount | number)!" nzTitle="总访问量"></nz-statistic>
@@ -31,8 +31,8 @@
             </nz-row>
         </nz-card>
     </div>
-    <div nz-row style="margin-top: 30px">
+    <div nz-row>
-        <nz-card style="width:100%;" nzSize="small" nzTitle="日志" [nzExtra]="reload">
+        <nz-card style="width: 100%" nzSize="small" nzTitle="日志" [nzExtra]="reload">
             <ng-template #reload>
                 <a (click)="getLog()" title="刷新"><i nz-icon nzType="reload" nzTheme="outline"></i></a>
             </ng-template>
@@ -44,11 +44,11 @@
 </div>
 <div *ngIf="userInfo&&userInfo.role==='user'">
     <div nz-row>
-        <nz-card nzTitle="信息" nz-col nzSpan="6" nzOffset="1" nzSize="small">
+        <nz-card nzTitle="信息" nz-col nzXs="24" [nzMd]="{span:11}" [nzXl]="{span:6,offset:1}" nzSize="small">
             <nz-statistic [nzValue]="userInfo.recentlyLandedDate?userInfo.recentlyLandedDate:''"
                           nzTitle="上次登录"></nz-statistic>
         </nz-card>
-        <nz-card nzTitle="关于此博客" nzSize="small" nz-col nzSpan="6" nzOffset="2">
+        <nz-card nzTitle="关于此博客" nzSize="small" nz-col nzXs="24" [nzMd]="{span:11,offset:2}" [nzXl]="{span:6,offset:2}">
             <p>此博客由 <a href="https://github.com/xiaohai2271" target="_blank">禾几海(郑海)</a> 设计并实现的</p>
             <p>博客自2019年3月开始开发编写 5月开始正式运行至今</p>
             <p>博客所有代码都是开源的，你可以随意修改，运行和发布</p>
@@ -59,7 +59,7 @@
             </p>
             <p>如果觉得博客还不错，请前往Github支持我，给我点一个star吧</p>
         </nz-card>
-        <nz-card nz-col nzSpan="6" nzOffset="2">
+        <nz-card nz-col nzXs="24" [nzMd]="{span:12,offset:6}" [nzXl]="{span:6,offset:2}">
             <p style="font-style: italic">坚强的信心，能使平凡的人做出惊人的事业。</p>
             <p style="text-align: right"> ——马尔顿</p>
         </nz-card>

src/app/view/admin/admin-dashboard/admin-dashboard.component.less

@@ -0,0 +1,3 @@
+nz-card {
+  margin-bottom: 30px
+}