feat: try move menu to homepagge

phodal · Apr 4, 2020 · bf5bbab · bf5bbab
1 parent 3723d35
commit bf5bbab
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 0 deletions.
diff --git a/src/app/presentation/home/home.component.html b/src/app/presentation/home/home.component.html
@@ -6,6 +6,33 @@ <h3>Ledge（源自 know-ledge，意指承载物）知识平台是基于我们所
  <h4>它可以帮助您的企业在数字化时代更好地前进。</h4>
  </div>
 
+ <div class="cards">
+ <mat-card class="card">
+ <mat-card-header>
+ <mat-card-title>最佳实践</mat-card-title>
+ </mat-card-header>
+ <mat-card-content>
+ <p>我们从海量的 DevOps 内容中，提炼出了一系列的最佳实践，以更好地帮助企业进行 DevOps 实践。</p>
+ </mat-card-content>
+ </mat-card>
+ <mat-card class="card">
+ <mat-card-header>
+ <mat-card-title>模式与原则</mat-card-title>
+ </mat-card-header>
+ <mat-card-content>
+ <p>基于我们的实践，我们提炼了位于它背后的模式与原则，帮助个人和组织更好地了解 DevOps 文化。</p>
+ </mat-card-content>
+ </mat-card>
+ <mat-card class="card">
+ <mat-card-header>
+ <mat-card-title>操作手册</mat-card-title>
+ </mat-card-header>
+ <mat-card-content>
+ <p>只凭实践与原则，无法让中小型 IT 团队进行 DevOps 转型，所以我们准备了详实的操作手册，以帮助您一步步前进。</p>
+ </mat-card-content>
+ </mat-card>
+ </div>
+
  <div class="period-title markdown">
  <h2 class="title intro">DevOps 元素周期表 —— 选择您的 DevOps 工具</h2>
  </div>

diff --git a/src/app/presentation/home/home.component.scss b/src/app/presentation/home/home.component.scss
@@ -6,6 +6,20 @@
  text-align: center;
 }
 
+.cards {
+ width: 80%;
+ margin: 3em auto;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ .card {
+ color: #fff;
+ background: #424242;
+ width: 300px;
+ }
+}
+
 .period-title {
  margin: 0;
 

diff --git a/src/app/shared/custom-material.module.ts b/src/app/shared/custom-material.module.ts
@@ -11,6 +11,7 @@ import {
  MatDialogModule,
 } from '@angular/material/dialog';
 import { ScrollingModule } from '@angular/cdk/scrolling';
+import { MatCardModule } from '@angular/material/card';
 
 const modules = [
  MatToolbarModule,
@@ -21,6 +22,7 @@ const modules = [
  MatSidenavModule,
  MatIconModule,
  MatDialogModule,
+ MatCardModule,
 
  ScrollingModule,
 ];