diff options
author | 2019-09-29 13:15:41 +0800 | |
---|---|---|
committer | 2019-09-29 13:15:52 +0800 | |
commit | f1a0ffa2e0323a61141453c56f12218e3e57a141 (patch) | |
tree | 98eeeaf3bea1a27ea3386d356a801db199d35f18 /usecaseui-portal/src/app/views/services/services-list | |
parent | 831a305ed9f1bf0027f3450dd41e901eafcb7dc4 (diff) |
feat:top card code split into new components of service-list page
Change-Id: I1095c2c56aeb097d7d5318a4287afbf5f4adfcd8
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/views/services/services-list')
4 files changed, 127 insertions, 0 deletions
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 @@ +<div class="top-list"> + <span class="round">{{serviceDomain}}</span> + <div class="top-list-text"> + <p> + <span>{{failedNum}}</span> + <span> {{"i18nTextDefine_Failed" | translate}} </span> + </p> + <p> + <span>{{successNum}}</span> + <span> {{"i18nTextDefine_Success" | translate}} </span> + </p> + <p> + <span>{{inProgressNum}}</span> + <span> {{"i18nTextDefine_InProgress" | translate}} </span> + </p> + <p class="service-description"> {{serviceDetailName | translate}} </p> + </div> +</div>
\ 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<TopCardComponent>; + + 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() { + } + +} |