feat:introducing top-card component and optimize code of service-list

Change-Id: Iaf8fddbab96c2c5117eba9a4bf9263265f9a613e
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

2 files changed, 12 insertions, 82 deletions

diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.html b/usecaseui-portal/src/app/views/services/services-list/services-list.component.html
index a995b485..59aeea2e 100644
--- a/usecaseui-portal/src/app/views/services/services-list/services-list.component.html
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.html
@@ -109,26 +109,16 @@
     </nz-modal>
 </div>
 <nz-layout style=" padding: 20px 32px; ">
-    <ul class="top-num">
-        <li *ngFor="let item of serviceMunber" class="top-list">
-            <span class="round">{{item.serviceDomain}}</span>
-            <div class="top-list-text">
-                <p>
-                    <span>{{item.failed}}</span>
-                    <span> {{"i18nTextDefine_Failed" | translate}} </span>
-                </p>
-                <p>
-                    <span>{{item.Success}}</span>
-                    <span> {{"i18nTextDefine_Success" | translate}} </span>
-                </p>
-                <p>
-                    <span>{{item.InProgress}}</span>
-                    <span> {{"i18nTextDefine_InProgress" | translate}} </span>
-                </p>
-                <p class="service-description"> {{item.detailName | translate}} </p>
-            </div>
-        </li>
-    </ul>
+    <div class="top-num">
+        <app-top-card
+            *ngFor="let item of serviceMunber"
+            [serviceDomain]="item.serviceDomain"
+            [successNum]="item.Success"
+            [failedNum]="item.failed"
+            [inProgressNum]="item.InProgress"
+            [serviceDetailName]="item.detailName">
+        </app-top-card>
+    </div>
     <div class="list" id="services-list" [ngClass]="{'listdisplay':listDisplay == true}">
         <nz-table *ngIf="1" #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="false"
             [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize"
diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.less b/usecaseui-portal/src/app/views/services/services-list/services-list.component.less
index aeddf257..f3dac6c9 100644
--- a/usecaseui-portal/src/app/views/services/services-list/services-list.component.less
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.less
@@ -207,69 +207,9 @@ nz-layout{
         width: 100%;
         display: flex;
         justify-content: space-around;
-        .top-list{
-            position: relative;
-            width:32%;
-            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-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;
-
-                }
-            }
+        app-top-card{
+            width: 32%;
         }
-        
     }
 }
 .list {