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>

5 files changed, 130 insertions, 1 deletions

diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
index e2f56f97..b87aaf76 100644
--- a/usecaseui-portal/src/app/app.module.ts
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -73,6 +73,7 @@ import { ManagemencsService } from './core/services/managemencs.service';
 import { FcapsComponent } from './views/fcaps/fcaps.component';
 import { TestComponent } from './test/test.component';
 import { TextService } from './core/services/text.service';
+import { TopCardComponent } from './views/services/services-list/top-card/top-card.component';
 
 @NgModule({
   providers: [
@@ -112,7 +113,8 @@ import { TextService } from './core/services/text.service';
     CustomerComponent,
     PerformanceDetailsComponent,
     FcapsComponent,
-    TestComponent
+    TestComponent,
+    TopCardComponent
   ],
   imports: [
     BrowserModule,
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() {
+  }
+
+}