style: services-list page style optimization

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

1 files changed, 24 insertions, 16 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 6f6d8f74..206ecd8f 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
@@ -15,39 +15,47 @@
 -->
 <div class="action ant-tabs-bar">
 
-    <span><i style="margin-right: 10px"><img src="assets/images/customer.png" alt=""></i>
-        {{"i18nTextDefine_Customer" | translate}} : </span>
+    <span>
+        <i class="icon">
+            <img src="assets/images/customer.png" alt="">
+        </i>
+         {{"i18nTextDefine_Customer" | translate}} : 
+    </span>
     <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
         <button nz-button nz-dropdown><span>{{customerSelected.name}}</span> <i class="anticon anticon-down"></i>
         </button>
-        <ul nz-menu style="min-height:40px;max-height: 200px; overflow: auto;">
+        <ul nz-menu>
             <li nz-menu-item (click)="choseCustomer(item)" *ngFor="let item of customerList">
-                <a title="{{item.name}}"
-                    style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a>
+                <a title="{{item.name}}">{{item.name}}</a>
             </li>
         </ul>
     </nz-dropdown>
 
-    <span style="margin-left:40px"><i style="margin-right: 10px"><img src="assets/images/service-type.png" alt=""></i>
-        {{"i18nTextDefine_ServiceType" | translate}} : </span>
+    <span>
+        <i class="icon">
+            <img src="assets/images/service-type.png"alt="">
+        </i> 
+        {{"i18nTextDefine_ServiceType" | translate}} : 
+    </span>
     <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
         <button nz-button nz-dropdown><span>{{serviceTypeSelected.name}}</span> <i class="anticon anticon-down"></i>
         </button>
-        <ul nz-menu style="min-height:40px;max-height: 200px; overflow: auto;">
+        <ul nz-menu>
             <li nz-menu-item (click)="choseServiceType(item)" *ngFor="let item of serviceTypeList">
-                <a title="{{item.name}}"
-                    style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a>
+                <a title="{{item.name}}">{{item.name}}</a>
             </li>
         </ul>
     </nz-dropdown>
 
-    <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"><i class="anticon anticon-plus"
-            style="transform: scale(1.5);line-height: 15px;margin-right: 5px;"></i><span>
-            {{"i18nTextDefine_Create" | translate}} </span>
+    <button class="create" nz-button [nzType]="'primary'" (click)="createModal()">
+        <i *ngIf="width>1200" class="anticon anticon-plus"></i>
+        <span> {{"i18nTextDefine_Create" | translate}} </span>
     </button>
     <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle=" {{'i18nTextDefine_ServiceCreation' | translate}} "
-        (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" nzClassName="serviceCreationModel"
-        nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+        (nzOnCancel)="handleCancel()"
+        (nzOnOk)="handleOk()" nzClassName="serviceCreationModel"
+        nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
+        nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
         <div class="select-list">
             <span style="display:inline-block;"> {{"i18nTextDefine_Customer" | translate}} : </span>
             <nz-select style="width: 176px;float: right;" [(ngModel)]="customerSelected2.name" nzAllowClear
@@ -118,8 +126,8 @@
                     <span>{{item.InProgress}}</span>
                     <span> {{"i18nTextDefine_InProgress" | translate}} </span>
                 </p>
+                <p class="service-description"> {{item.detailName | translate}} </p>
             </div>
-            <p class="service-description"> {{item.detailName | translate}} </p>
         </li>
     </ul>
     <div class="list" id="services-list" [ngClass]="{'listdisplay':listDisplay == true}">