修改路径

src/app/view/update/update.component.html

@@ -0,0 +1,55 @@
+<div id="app">
+    <!--页面主体-->
+    <div id="main">
+        <div class="container">
+            <div class="zh-update">
+                <div class="zh-update-log">
+                    <div class="zh-update-log-title" *ngIf="lastUpdate">
+                        <h1>更新日志</h1>
+                        <p>最后更新于:
+                            <nz-tag nzColor="red">{{lastUpdate.lastUpdateTime}}</nz-tag>
+                        </p>
+                        <p>最后更新内容:
+                            <nz-tag nzColor="volcano">{{lastUpdate.lastUpdateInfo}}</nz-tag>
+                        </p>
+                        <p>最后提交代码于:
+                            <nz-tag nzColor="purple">{{lastUpdate.committerDate}}</nz-tag>
+                        </p>
+                        <p>最后提交内容:
+                            <a [href]="lastUpdate.commitUrl" target="_blank">
+                                <nz-tag nzColor="#f50" class="pointer">{{lastUpdate.lastCommit}}</nz-tag>
+                            </a>
+                            By
+                            <a href="https://github.com/xiaohai2271" target="_blank">
+                                <nz-tag nzColor="cyan" class="pointer">{{lastUpdate.committerAuthor}}</nz-tag>
+                            </a>
+                        </p>
+                        <p>
+                            <span>最后构建状态&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                            <img alt="build Status"
+                                 src="https://img.shields.io/github/workflow/status/xiaohai2271/blog-frontEnd/Node.js CI">
+                        </p>
+                    </div>
+                    <div class="zh-update-log-content">
+
+
+                        <div class="update-log am-animation-slide-bottom" *ngFor="let update of webUpdate">
+                            <div class="update-log-date">
+                                <h2><span style="font-size: x-large"># </span> {{update.time}}</h2>
+                            </div>
+                            <div class="update-log-content">
+                                <blockquote>
+                                    <p *ngFor="let item of update.info.split('\n')">{{item}}</p>
+                                </blockquote>
+                            </div>
+                        </div>
+
+
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+</div>

src/app/view/update/update.component.less

@@ -0,0 +1,145 @@
+nz-tag {
+  text-indent: initial;
+}
+.pointer{
+  cursor: pointer;
+}
+@media screen and (min-width: 768px) {
+  .site-inner {
+    margin: 0 19%;
+  }
+
+  .word p {
+    text-indent: 7em;
+  }
+
+  .word {
+    padding: 20px 25px;
+  }
+
+  .zh-update {
+    margin: 0 30%;
+  }
+
+  .update-leave-message {
+    margin: 100px 10%;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .site-inner {
+    margin: 0 5%;
+  }
+
+  .word p {
+    text-indent: 2em;
+  }
+
+  .word {
+    padding: 20px 5px;
+  }
+
+  .zh-update {
+    margin: 0 3%;
+  }
+}
+
+.am-g {
+  margin: 50px 0 0;
+}
+
+.site-inner-img {
+  text-align: center;
+  margin-top: 50px;
+}
+
+.site-inner-img img {
+  width: 450px;
+  margin: 0 auto;
+  max-width: 100%;
+}
+
+.site-inner-mywords {
+  margin: 0 auto;
+  height: 100%;
+}
+
+.word {
+  margin-top: 10px;
+  margin-left: 25%;
+  font-size: 21px;
+  line-height: 20px;
+  color: blue;
+  font-family: 华文仿宋;
+}
+
+.zh-update-log-title {
+  margin: 50px 0;
+}
+
+.zh-update-log-title h1 {
+  font-size: 22px;
+  font-weight: bold;
+  color: #222;
+  text-indent: 1em;
+}
+
+.zh-update-log-title p {
+  text-indent: 1.5em;
+}
+
+.zh-update-log-content {
+  margin-top: 10px;
+}
+
+.update-log i {
+  color: #999999;
+  margin-right: 5px;
+}
+
+.update-log h2 {
+  display: inline-block;
+  font-size: 1.3em;
+  font-weight: 650;
+  color: #333;
+}
+
+.update-log-content {
+  margin: 15px 26px;
+}
+
+.update-log-content blockquote {
+  padding: 0 10px 0 20px;
+  border-left: 4px solid #ddd;
+}
+
+.update-log-content p {
+  font-size: 16px;
+  word-wrap: break-word;
+  font-family: 微软雅黑;
+}
+
+.container {
+  padding-left: 1.5rem;
+  padding-right: 1.5 r
+}
+
+#app {
+  width: 100%;
+}
+
+//.bg {
+//  background: url("https://oss.celess.cn/web/morning.jpg");
+//  background-position: center center;
+//  background-size: cover;
+//}
+
+//.bg:after {
+//  content: "";
+//  position: absolute;
+//  left: 0;
+//  top: 0;
+//  background: inherit;
+//  filter: blur(2px);
+//  z-index: 2;
+//}

src/app/view/update/update.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UpdateComponent } from './update.component';
+
+describe('UpdateComponent', () => {
+  let component: UpdateComponent;
+  let fixture: ComponentFixture<UpdateComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UpdateComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UpdateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/view/update/update.component.ts

@@ -0,0 +1,36 @@
+import {Component, OnInit} from '@angular/core';
+import {ApiService} from '../../api/api.service';
+import {Title} from '@angular/platform-browser';
+
+@Component({
+    selector: 'view-update',
+    templateUrl: './update.component.html',
+    styleUrls: ['./update.component.less']
+})
+export class UpdateComponent implements OnInit {
+
+    constructor(private titleService: Title,
+                private apiService: ApiService) {
+        titleService.setTitle('小海博客 | 网站更新记录');
+    }
+
+    lastUpdate: {
+        lastUpdateTime: string;
+        lastUpdateInfo: string;
+        lastCommit: string;
+        committerAuthor: string;
+        committerDate: string;
+        commitUrl:string
+    } ;
+    webUpdate: { id: number, info: string, time: string }[] = [];
+
+    ngOnInit() {
+        this.apiService.lastestUpdate().subscribe(data => {
+            this.lastUpdate = data.result;
+        });
+        this.apiService.webUpdate().subscribe(data => {
+            this.webUpdate = data.result.reverse();
+        });
+    }
+
+}

src/app/view/update/update.module.ts

@@ -0,0 +1,18 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {UpdateComponent} from './update.component';
+import {Route, RouterModule} from '@angular/router';
+import {NzTagModule} from 'ng-zorro-antd';
+
+const routes: Route[] = [{path: '**', component: UpdateComponent}];
+
+@NgModule({
+    declarations: [UpdateComponent],
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routes),
+        NzTagModule
+    ]
+})
+export class UpdateModule {
+}