style: customer page style optimization

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

2 files changed, 75 insertions, 56 deletions

diff --git a/usecaseui-portal/src/app/shared/components/customer/customer.component.html b/usecaseui-portal/src/app/shared/components/customer/customer.component.html
index 08a23935..646431b2 100644
--- a/usecaseui-portal/src/app/shared/components/customer/customer.component.html
+++ b/usecaseui-portal/src/app/shared/components/customer/customer.component.html
@@ -26,10 +26,9 @@
     <div class="type">
       <p> {{"i18nTextDefine_Instance_Count_of_ServiceType" | translate}} </p>
       <app-bar [initData]="serviceInit" [chartData]="serviceData"></app-bar>
-      <div class="footname" style="width: 100%;height: 40px;line-height: 40px;text-align: center;color: #3C4F8C;">
-        <img src="../../../../assets/images/customerBarUser.png" alt="customerName"
-          style="margin-right: 5px;margin-bottom: 3px;">
-        {{this.serviceInit["customer"]}}
+      <div class="footname">
+        <img src="assets/images/customerBarUser.png" alt="customerName">
+        {{this.serviceInit["customer"]}}     
       </div>
     </div>
   </div>
@@ -37,8 +36,7 @@
     <div class="customer_title">
       <div class="customers">
         <span> {{"i18nTextDefine_Customer" | translate}} </span>
-        <img src="../../../../assets/images/customer04.png" alt="" (click)="this.customeradd  = !this.customeradd"
-          style="cursor: pointer">
+        <img  src="assets/images/customer04.png" alt="" (click)="this.customeradd  = !this.customeradd">
       </div>
     </div>
     <div class="customer_detail">
@@ -52,7 +50,7 @@
         <ul>
           <li *ngFor="let item of AllCustomersdata,let i = index" [ngClass]="{active: chose ==i}"
             (click)="choseCustomer(i,item)">
-            <img src="../../../../assets/images/customer05.png" alt="">
+            <img src="assets/images/customer05.png" alt="">
             <span>{{item.name}}</span>
             <i class="anticon anticon-delete" nzType="info" (click)="deleteCustomerModel(item)"></i>
           </li>
@@ -64,8 +62,7 @@
     <div class="services_type_title">
       <div class="servicess">
         <span> {{"i18nTextDefine_ServiceType" | translate}} </span>
-        <img src="../../../../assets/images/customer03.png" alt="" (click)="this.servicesadd  = !this.servicesadd "
-          style="cursor: pointer">
+        <img src="assets/images/customer03.png" alt="" (click)="this.servicesadd  = !this.servicesadd ">
       </div>
     </div>
     <div class="services_type_detail">
@@ -75,9 +72,9 @@
         <button nz-button nzType="primary" class="services_addbut"
           (click)="createNewServiceType(notificationModel)">{{"i18nTextDefine_Add" | translate}}</button>
       </div>
-      <div class="services_list">
+      <div class="services_list_content">
         <div class="border_size"></div>
-        <div style="padding:0 20px;">
+        <div class="services_list">
           <ul>
             <li *ngFor="let item of AllServiceTypes">
               <span>{{item.type}}</span>
diff --git a/usecaseui-portal/src/app/shared/components/customer/customer.component.less b/usecaseui-portal/src/app/shared/components/customer/customer.component.less
index 7d329230..83307dd7 100644
--- a/usecaseui-portal/src/app/shared/components/customer/customer.component.less
+++ b/usecaseui-portal/src/app/shared/components/customer/customer.component.less
@@ -34,6 +34,65 @@
             background-color: #e6f7ff;
         }
     }
+    .chearts {
+        display: inline-block;
+        width: 32%;
+        margin-right: 1.5%;  
+        vertical-align: top;
+        height: 100%;
+        >div{
+            padding: 20px 20px;
+        }
+        .Cu {
+            height: 48%;
+            width: 100%;
+            margin-bottom: 7%;
+            margin-right: 2.5%;
+            border-radius: 5px;
+            background-color: #fff;
+            box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
+            p {
+                color :#0DA9E2;
+                font-family:"ArialMT";
+            }
+            .legend {
+                height: 10px;
+                width: 10px;
+                display: inline-block;
+                background: linear-gradient(to right,#7DCEFB, #0DA9E2);
+                border-radius: 50%;
+                margin: 15px 4px 0 43%;
+            }
+        }
+        .type {
+            height: 48%;
+            width: 100%;
+            margin-right: 2.5%;
+            border-radius: 5px;
+            background-color: #fff;
+            box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
+            p {
+                color :#0DA9E2;
+                font-family:"ArialMT";    
+            }
+            app-bar{
+                width: 100%;
+            }
+            .footname{
+                width: 100%;
+                height: 40px;
+                line-height: 40px;
+                text-align: center;
+                color: #3C4F8C;
+                margin-top: 20px;
+                img{
+                    margin-right: 5px;
+                    margin-bottom: 3px;
+                }
+            }
+
+        }
+    }
     .customer {
         height: 100%;
         overflow: hidden;
@@ -60,6 +119,7 @@
                     height: 30px;
                     float: right;
                     margin-top: 7px;
+                    cursor: pointer;
                 }
             }
         }
@@ -142,6 +202,7 @@
                     float: right;
                     margin-right: -10px;
                     margin-top: 5px;
+                    cursor: pointer;
                 }
             }
         }
@@ -172,7 +233,7 @@
                 }
             }
 
-            .services_list {
+            .services_list_content {
                 background:linear-gradient(to right, #E5F6FF, #CFEEFA);
                 height: 100%;
                 .border_size{
@@ -184,6 +245,8 @@
                     border-bottom: 24px solid transparent;
                     border-right: 10px solid #E5F6FF;
                 }
+                .services_list{ 
+                    padding:0 20px;
                     li {
                         height: 50px;
                         line-height: 50px;
@@ -204,51 +267,10 @@
                         }
                     }
                 }
-            
-        }
-    }
-    .chearts {
-        display: inline-block;
-        width: 32%;
-        margin-right: 1.5%;  
-        vertical-align: top;
-        height: 100%;
-        >div{
-            padding: 20px 20px;
-        }
-        .Cu {
-            height: 48%;
-            width: 100%;
-            margin-bottom: 7%;
-            margin-right: 2.5%;
-            border-radius: 5px;
-            background-color: #fff;
-            box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
-            p {
-                color :#0DA9E2;
-                font-family:"ArialMT";
-            }
-            .legend {
-                height: 10px;
-                width: 10px;
-                display: inline-block;
-                background: linear-gradient(to right,#7DCEFB, #0DA9E2);
-                border-radius: 50%;
-                margin: 15px 4px 0 43%;
-            }
-        }
-        .type {
-            height: 48%;
-            width: 100%;
-            margin-right: 2.5%;
-            border-radius: 5px;
-            background-color: #fff;
-            box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
-            p {
-                color :#0DA9E2;
-                font-family:"ArialMT";
-                
+                    
             }
+            
         }
     }
+    
 }
\ No newline at end of file