From f1a0ffa2e0323a61141453c56f12218e3e57a141 Mon Sep 17 00:00:00 2001 From: cyuamber Date: Sun, 29 Sep 2019 13:15:41 +0800 Subject: feat:top card code split into new components of service-list page Change-Id: I1095c2c56aeb097d7d5318a4287afbf5f4adfcd8 Issue-ID: USECASEUI-307 Signed-off-by: cyuamber --- .../services-list/top-card/top-card.component.html | 18 ++++++ .../services-list/top-card/top-card.component.less | 65 ++++++++++++++++++++++ .../top-card/top-card.component.spec.ts | 25 +++++++++ .../services-list/top-card/top-card.component.ts | 19 +++++++ 4 files changed, 127 insertions(+) create mode 100644 usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.html create mode 100644 usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.less create mode 100644 usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.ts (limited to 'usecaseui-portal/src/app/views') diff --git a/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.html b/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.html new file mode 100644 index 00000000..98e42ae7 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.html @@ -0,0 +1,18 @@ +
+ {{serviceDomain}} +
+

+ {{failedNum}} + {{"i18nTextDefine_Failed" | translate}} +

+

+ {{successNum}} + {{"i18nTextDefine_Success" | translate}} +

+

+ {{inProgressNum}} + {{"i18nTextDefine_InProgress" | translate}} +

+

{{serviceDetailName | translate}}

+
+
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.less b/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.less new file mode 100644 index 00000000..a235b1e6 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.less @@ -0,0 +1,65 @@ +.top-list{ + position: relative; + width:100%; + max-width:400px; + height:170px; + background:url("/assets/images/servicelist-e2e.png") no-repeat; + background-size: 100% 100%; + border-radius:2px; + .round{ + position: absolute; + width: 60px; + height: 60px; + line-height: 60px; + text-align: center; + background:#E0EDFF; + border:2px solid rgba(224,237,255,1); + border-radius: 50%; + font-size:16px; + font-family:ArialMT; + color:#3C4F8C; + transition: .5s; + top: 42%; + margin-top: -30px; + left: 15%; + } + .top-list-text{ + position: absolute; + text-align: right; + line-height: 20px; + right: 12%; + color: #fff; + p{ + height: 28px; + margin-bottom: 0; + padding-left: 5px; + font-size: 14px; + clear: both; + span{ + display: inline-block; + float: right; + font-weight: 500; + text-align: right; + } + span:nth-child(1){ + font-size: 18px; + margin-left: 15px; + } + span:nth-child(2){ + width: 85px; + font-size: 16px; + } + } + p:nth-child(1){ + margin-top: 25px; + } + .service-description{ + + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: #3C4F8C; + + } + } +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.spec.ts b/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.spec.ts new file mode 100644 index 00000000..b2d2cbb4 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TopCardComponent } from './top-card.component'; + +describe('TopCardComponent', () => { + let component: TopCardComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TopCardComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TopCardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.ts b/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.ts new file mode 100644 index 00000000..6004fb8e --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.ts @@ -0,0 +1,19 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + selector: 'app-top-card', + templateUrl: './top-card.component.html', + styleUrls: ['./top-card.component.less'] +}) +export class TopCardComponent implements OnInit { + @Input() serviceDomain: string; + @Input() failedNum: number; + @Input() successNum: number; + @Input() inProgressNum: number; + @Input() serviceDetailName: string; + constructor() { } + + ngOnInit() { + } + +} -- cgit 1.2.3-korg