summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2019-09-29 14:03:30 +0800
committercyuamber <xuranyjy@chinamobile.com>2019-09-29 14:03:36 +0800
commite564a3e86e3880269290c9712b097336ab6db28e (patch)
tree9e23a2eb08f5722080075527d3264d5a167dc861 /usecaseui-portal
parentf1a0ffa2e0323a61141453c56f12218e3e57a141 (diff)
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>
Diffstat (limited to 'usecaseui-portal')
-rw-r--r--usecaseui-portal/src/app/views/services/services-list/services-list.component.html30
-rw-r--r--usecaseui-portal/src/app/views/services/services-list/services-list.component.less64
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 {