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 index 9ffd169a..0dc56e95 100644 --- 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 @@ - +
-
- {{dataOne.name}} - +
+ {{ dataOne.name }} +
-
- - {{dataTwo.name}} +
+ + {{ dataTwo.name }}
- +
-
- {{item.name}} - +
+ {{ item.name }} +
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 index 9d5a9737..cb5cac54 100644 --- 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,12 +34,13 @@ 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; } @@ -39,19 +48,19 @@ &-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 index a26ba671..4b3feb44 100644 --- 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 index 965e78ab..6cf74d5b 100644 --- a/projects/ledge-render/src/lib/ledge-render.component.html +++ b/projects/ledge-render/src/lib/ledge-render.component.html @@ -36,14 +36,14 @@
- - - + + + - - - + + +
{{h}}
{{h}}
{{cell}}
{{cell}}
@@ -83,14 +83,9 @@
- - + +
@@ -122,7 +117,7 @@
- 
+        
         {{item.text}}
@@ -149,10 +144,14 @@
-
+
    + +
+
    + +
- +
diff --git a/projects/ledge-render/src/lib/ledge-render.component.scss b/projects/ledge-render/src/lib/ledge-render.component.scss index a0f9ee99..704ff65b 100644 --- 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 index 3662c360..b2acfe21 100644 --- 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 index a6d1b9c5..7714599b 100644 --- a/src/app/presentation/home/home.component.html +++ b/src/app/presentation/home/home.component.html @@ -1,7 +1,10 @@
-

- LEDGE -

-

Ledge（源自 know-ledge，意指承载物）知识平台是基于我们所进行的一系列 DevOps 实践、敏捷实践、精益实践提炼出来的知识体系。

+

- LEDGE -

+

+ Ledge（源自 know-ledge，意指承载物）知识平台是基于我们所进行的一系列 + DevOps 实践、敏捷实践、精益实践提炼出来的知识体系。 +

@@ -10,19 +13,33 @@

DevOps 元素周期表 —— 选择您的 DevOps 工具

+ (currentAtomCategory)="setCurrentAtomCategory($event)" + > + -
-

它可以帮助您设计数字化时代的 DevOps 流程

-
DevOps 运动的主要特点是强烈倡导对构建软件的所有环节 (从集成、测试、发布到部署和基础架构管理) 进行全面的自动化和监控。
+
+
「它可以」
+
- 帮助您设计数字化时代的 DevOps 流程 -
+
+ DevOps 运动的主要特点是强烈倡导对构建软件的所有环节 + (从集成、测试、发布到部署和基础架构管理) 进行全面的自动化和监控。 +
+
+ +
-

从而根据不同的企业情况，搭建出专属的 DevOps 流水线

- +
@@ -30,29 +47,39 @@

从而根据不同的企业情况，搭建出专属的 DevOps 流水线

- 帮助您寻找最适合的软件工程技术实践 -
示例：质量内建
- +

这就是 Ledge 知识平台

-

沉淀我们的各种实践，向您提供全程的数据化变革策略、规划与咨询

+

+ 沉淀我们的各种实践，向您提供全程的数据化变革策略、规划与咨询 +

- ESP Modeling + ESP Modeling
Core Contributors
-
-
{{user.name}}
-
/{{user.title}}/
-
{{user.work}}
+
+ +
+
+ {{ user.name }} +
+
/{{ user.title }}/
+
{{ user.work }}
-
-
+
diff --git a/src/app/presentation/home/home.component.scss b/src/app/presentation/home/home.component.scss index 9c9351f5..08efde62 100644 --- 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 index 8d2af8da..df3c347e 100644 --- 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[] = [ {