Merge pull request #64 from HuJinNan1/master

modify homePage
phodal · Apr 6, 2020 · 2da7363 · 2da7363
2 parents 5be577b + 9b95ca6
commit 2da7363
Show file tree

Hide file tree

Showing 9 changed files with 141 additions and 74 deletions.
diff --git a/projects/ledge-render/src/lib/components/ledge-step-line/ledge-step-line.component.html b/projects/ledge-render/src/lib/components/ledge-step-line/ledge-step-line.component.html
@@ -1,25 +1,34 @@
-<ng-container *ngIf="data.length>6">
+<ng-container *ngIf="data.length > 6">
  <div class="step-line">
- <div *ngFor="let dataOne of data.slice(0,5);let index = index"
- [class.step-line-wrap]="index===data.slice(0,5).length-1">
- <span class="step-item">{{dataOne.name}}</span>
- <span [class]="index===data.slice(0,5).length-1?'arrow-down':'arrow-right'"></span>
+ <div
+ *ngFor="let dataOne of data.slice(0, 5); let index = index"
+ [class.step-line-wrap]="index === data.slice(0, 5).length - 1"
+ >
+ <span class="step-item">{{ dataOne.name }}</span>
+ <span
+ [class]="
+ index === data.slice(0, 5).length - 1 ? 'arrow-down' : 'arrow-right'
+ "
+ ></span>
  </div>
  </div>
 
  <div class="step-line step-line-reverse">
- <div *ngFor="let dataTwo of data.slice(5,data.length);let index = index">
- <span class="arrow-left" *ngIf="index !== data.slice(5,data.length).length-1"></span>
- <span class="step-item">{{dataTwo.name}}</span>
+ <div *ngFor="let dataTwo of data.slice(5, data.length); let index = index">
+ <span
+ class="arrow-left"
+ *ngIf="index !== data.slice(5, data.length).length - 1"
+ ></span>
+ <span class="step-item">{{ dataTwo.name }}</span>
  </div>
  </div>
 </ng-container>
 
-<ng-container *ngIf="data.length<=6">
+<ng-container *ngIf="data.length <= 6">
  <div class="step-line">
- <div *ngFor="let item of data;let index = index">
- <span class="step-item">{{item.name}}</span>
- <span class="arrow-right" *ngIf="index !== data.length-1"></span>
+ <div *ngFor="let item of data; let index = index">
+ <span class="step-item">{{ item.name }}</span>
+ <span class="arrow-right" *ngIf="index !== data.length - 1"></span>
  </div>
  </div>
 </ng-container>
diff --git a/projects/ledge-render/src/lib/components/ledge-step-line/ledge-step-line.component.scss b/projects/ledge-render/src/lib/components/ledge-step-line/ledge-step-line.component.scss
@@ -1,9 +1,17 @@
+$black: #111;
+$white: #fff;
+
 @mixin arrow {
  width: 0;
  height: 0;
  border: 12px solid;
 }
-
+:host {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+}
 .step-line {
  display: flex;
  align-items: flex-start;
@@ -17,7 +25,7 @@
  justify-content: center;
  }
 
- >div {
+ > div {
  display: flex;
  align-items: center;
  }
@@ -26,32 +34,33 @@
  display: flex;
  align-items: center;
  justify-content: center;
- width: 154px;
+ min-width: 154px;
+ width: max-content;
  height: 60px;
  border-radius: 30px;
- background-color: #111111;
+ background-color: $black;
  font-size: 18px;
- color: #ffffff;
+ color: $white;
  line-height: 34px;
  }
 
  .arrow {
  &-right {
  @include arrow;
  margin: 0 2px 0 14px;
- border-color: transparent transparent transparent #111111;
+ border-color: transparent transparent transparent $black;
  }
 
  &-left {
  @include arrow;
  margin: 0 14px 0 2px;
- border-color: transparent #111111 transparent transparent;
+ border-color: transparent $black transparent transparent;
  }
 
  &-down {
  @include arrow;
  margin: 14px 0 2px 0;
- border-color: #111111 transparent transparent transparent;
+ border-color: $black transparent transparent transparent;
  }
  }
 }
diff --git a/projects/ledge-render/src/lib/components/ledge-step-line/ledge-step-line.component.ts b/projects/ledge-render/src/lib/components/ledge-step-line/ledge-step-line.component.ts
@@ -3,21 +3,12 @@ import { Component, OnInit, Input } from '@angular/core';
 @Component({
  selector: 'ledge-step-line',
  templateUrl: './ledge-step-line.component.html',
- styleUrls: ['./ledge-step-line.component.scss']
+ styleUrls: ['./ledge-step-line.component.scss'],
 })
 export class LedgeStepLineComponent implements OnInit {
-
  @Input() data = [];
 
- stepLineData = [];
-
- constructor() { }
-
- ngOnInit(): void {
-
- }
-
+ constructor() {}
 
+ ngOnInit(): void {}
 }
-
-
diff --git a/projects/ledge-render/src/lib/ledge-render.component.html b/projects/ledge-render/src/lib/ledge-render.component.html
@@ -36,14 +36,14 @@
  <div *ngSwitchCase="'table'">
  <table>
  <thead>
- <tr>
- <th *ngFor="let h of item.header">{{h}}</th>
- </tr>
+  <tr>
+  <th *ngFor="let h of item.header">{{h}}</th>
+  </tr>
  </thead>
  <tbody>
- <tr *ngFor="let row of item.cells">
- <td *ngFor="let cell of row">{{cell}}</td>
- </tr>
+  <tr *ngFor="let row of item.cells">
+  <td *ngFor="let cell of row">{{cell}}</td>
+  </tr>
  </tbody>
  </table>
  </div>
@@ -83,14 +83,9 @@
  </div>
 
  <div *ngSwitchCase="'process-card'" class="flex-table row">
- <ng-container
- *ngFor="let header of item.data.header; let index = index"
- >
- <ledge-card
- class="column card-column"
- [headerStyle]="item.config.colors && item.config.colors[index]"
- [data]="{ header: header, cells: item.data.cells[index], index:index }"
- ></ledge-card>
+ <ng-container *ngFor="let header of item.data.header; let index = index">
+ <ledge-card class="column card-column" [headerStyle]="item.config.colors && item.config.colors[index]"
+ [data]="{ header: header, cells: item.data.cells[index], index:index }"></ledge-card>
  </ng-container>
  </div>
 
@@ -122,7 +117,7 @@ <h6 *ngIf="item.depth === 6" [innerHTML]="item.text" class="ledge-heading" id="{
  </div>
 
  <div *ngSwitchCase="'code'">
- <pre class="language-{{item.lang}}">
+  <pre class="language-{{item.lang}}">
  <code class="language-{{item.lang}}">{{item.text}}</code>
  </pre>
  </div>
@@ -149,10 +144,14 @@ <h6 *ngIf="item.depth === 6" [innerHTML]="item.text" class="ledge-heading" id="{
  </li>
  </ng-template>
 
- <ul *ngIf="!item.ordered"><ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.data }"></ng-container></ul>
- <ol *ngIf="item.ordered"><ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.data }"></ng-container></ol>
+ <ul *ngIf="!item.ordered">
+ <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.data }"></ng-container>
+ </ul>
+ <ol *ngIf="item.ordered">
+ <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.data }"></ng-container>
+ </ol>
  </div>
- 
+
  <div class="step-line" *ngSwitchCase="'step-line'">
  <ledge-step-line [data]="item.data"></ledge-step-line>
  </div>

diff --git a/projects/ledge-render/src/lib/ledge-render.component.scss b/projects/ledge-render/src/lib/ledge-render.component.scss
@@ -19,10 +19,13 @@ ul {
  &.task-list-item {
  list-style: none;
 
- input[type="checkbox"] {
- margin: 0 .2em .25em -1.6em;
+ input[type='checkbox'] {
+ margin: 0 0.2em 0.25em -1.6em;
  vertical-align: middle;
  }
  }
  }
 }
+.step-line {
+ display: flex;
+}
diff --git a/projects/ledge-render/src/lib/ledge-render.component.ts b/projects/ledge-render/src/lib/ledge-render.component.ts
@@ -18,7 +18,7 @@ import LedgeMarkdownConverter from './components/model/ledge-markdown-converter'
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LedgeRenderComponent implements OnInit, AfterViewInit, OnChanges {
- constructor() {}
+ constructor() { }
 
  @Input()
  content: string;
@@ -34,7 +34,7 @@ export class LedgeRenderComponent implements OnInit, AfterViewInit, OnChanges {
  // this.renderContent(this.content);
  }
 
- ngAfterViewInit(): void {}
+ ngAfterViewInit(): void { }
 
  ngOnChanges(changes: SimpleChanges): void {
  const { content } = changes;
@@ -278,7 +278,7 @@ export class LedgeRenderComponent implements OnInit, AfterViewInit, OnChanges {
  config: listData.config,
  });
  break;
-  case 'step-line':
+ case 'step-line':
  const stepLineData = LedgeMarkdownConverter.toJson(codeBlock.text);
  this.markdownData.push({
  type: 'step-line',

diff --git a/src/app/presentation/home/home.component.html b/src/app/presentation/home/home.component.html
@@ -1,7 +1,10 @@
 <div class="container">
  <div class="title-desc">
- <h1> - LEDGE - </h1>
- <p>Ledge（源自 know-ledge，意指承载物）知识平台是基于我们所进行的一系列 DevOps 实践、敏捷实践、精益实践提炼出来的知识体系。</p>
+ <h1>- LEDGE -</h1>
+ <p>
+ Ledge（源自 know-ledge，意指承载物）知识平台是基于我们所进行的一系列
+ DevOps 实践、敏捷实践、精益实践提炼出来的知识体系。
+ </p>
  </div>
 
  <div class="period-title markdown">
@@ -10,49 +13,73 @@ <h2 class="title intro">DevOps 元素周期表 —— 选择您的 DevOps 工具
  </div>
  <app-periodic-table
  [selectedMetal]="highlightState"
- (currentAtomCategory)="setCurrentAtomCategory($event)"></app-periodic-table>
+ (currentAtomCategory)="setCurrentAtomCategory($event)"
+ >
+ </app-periodic-table>
 
- <div class="intro markdown second-header">
- <h4>它可以帮助您设计数字化时代的 DevOps 流程</h4>
- <h5>DevOps 运动的主要特点是强烈倡导对构建软件的所有环节 (从集成、测试、发布到部署和基础架构管理) 进行全面的自动化和监控。</h5>
+ <div class="home-section">
+ <div class="section-title">「它可以」</div>
+ <div class="section-sub-title">- 帮助您设计数字化时代的 DevOps 流程 -</div>
+ <div class="process-title">
+ DevOps 运动的主要特点是强烈倡导对构建软件的所有环节
+ (从集成、测试、发布到部署和基础架构管理) 进行全面的自动化和监控。
+ </div>
+ <div class="process-content">
+ <component-markdown-render
+ [data]="processTemplate"
+ [showScroll]="false"
+ ></component-markdown-render>
+ </div>
  </div>
- <component-process-table class="process-bar" [tableValue]="processTemplate"></component-process-table>
 
  <div class="process-bar">
  <div class="markdown center">
  <h3>从而根据不同的企业情况，搭建出专属的 DevOps 流水线</h3>
  </div>
- <component-process-table class="process-bar" [tableValue]="devOpsExample"></component-process-table>
+ <component-process-table
+ class="process-bar"
+ [tableValue]="devOpsExample"
+ ></component-process-table>
  </div>
 
  <div class="home-section">
  <div class="section-title">「它可以」</div>
  <div class="section-sub-title">- 帮助您寻找最适合的软件工程技术实践 -</div>
  <div class="sample-title">示例：质量内建</div>
  <div class="section-content">
- <component-markdown-render [data]="homemd" [showScroll]="false"></component-markdown-render>
+ <component-markdown-render
+ [data]="homemd"
+ [showScroll]="false"
+ ></component-markdown-render>
  </div>
  </div>
 
  <div class="esp-insight">
  <div class="markdown">
  <h2 class="center">这就是 Ledge 知识平台</h2>
- <h3 class="center">沉淀我们的各种实践，向您提供全程的数据化变革策略、规划与咨询</h3>
+ <h3 class="center">
+ 沉淀我们的各种实践，向您提供全程的数据化变革策略、规划与咨询
+ </h3>
  </div>
- <img src="/assets/images/esp.svg" alt="ESP Modeling">
+ <img src="/assets/images/esp.svg" alt="ESP Modeling" />
  </div>
 
  <div class="home-section box-shadow">
  <div class="section-title">Core Contributors</div>
  <div class="contributors">
  <div class="contributor" *ngFor="let user of contributors">
- <div class="avatar"><a href="{{user.link}}" target="_blank"><img src="{{user.avatar}}" alt=""></a></div>
- <div class="username"><a href="{{user.link}}" target="_blank">{{user.name}}</a></div>
- <div class="title">/{{user.title}}/</div>
- <div class="work">{{user.work}}</div>
+ <div class="avatar">
+ <a href="{{ user.link }}" target="_blank"
+ ><img src="{{ user.avatar }}" alt=""
+ /></a>
+ </div>
+ <div class="username">
+ <a href="{{ user.link }}" target="_blank">{{ user.name }}</a>
+ </div>
+ <div class="title">/{{ user.title }}/</div>
+ <div class="work">{{ user.work }}</div>
  </div>
  </div>
  </div>
 </div>
-<div class="footer">
-</div>
+<div class="footer"></div>
diff --git a/src/app/presentation/home/home.component.scss b/src/app/presentation/home/home.component.scss
@@ -117,6 +117,24 @@
  padding-bottom: 60px;
  margin-top: 35px;
  }
+
+ .process-title {
+ font-size: 16px;
+ line-height: 1.5;
+ letter-spacing: 1px;
+ text-align: center;
+ margin: 0px auto;
+ margin-top: 16px;
+ width: 800px;
+ }
+
+ .process-content {
+ margin: 40px auto;
+ width: 1080px;
+ height: 310px;
+ background-color: #f3f4f5;
+ padding: 61px 0;
+ }
 }
 
 .box-shadow {

diff --git a/src/app/presentation/home/home.component.ts b/src/app/presentation/home/home.component.ts
@@ -32,8 +32,19 @@ export class HomeComponent implements OnInit {
  `;
 
  processTemplate = `
-|源码管理|制品管理|配置管理|数据库自动化|测试|持续集成|监控|分析|智能运维| 协作|
-|---|---|---|---|---|---|---|---|---|---|
+ \`\`\`step-line
+ - 源码管理
+ - 制品管理
+ - 配置管理
+ - 数据库自动化
+ - 测试
+ - 持续集成
+ - 监控
+ - 分析
+ - 智能运维
+ - 协作
+ \`\`\`
+ 
  `;
  contributors: Contributor[] = [
  {