Merge changes I7aec6473,Ifc03d49f

* changes:
  style: management page style optimization
  style: home page optimization

4 files changed, 60 insertions, 64 deletions

diff --git a/usecaseui-portal/src/app/views/home/home.component.html b/usecaseui-portal/src/app/views/home/home.component.html
index 5f956827..0946b587 100644
--- a/usecaseui-portal/src/app/views/home/home.component.html
+++ b/usecaseui-portal/src/app/views/home/home.component.html
@@ -15,6 +15,7 @@
 -->
 
 <div class="content">
+  <!-- left-content -->
   <div class="left-content">
     <div class="services">
       <h4>{{"i18nTextDefine_SERVICES" | translate}}</h4>
@@ -25,7 +26,7 @@
           <span>{{"i18nTextDefine_service_instance" | translate}}</span></h5>
       </div>
       <p class="tip">
-        <span  style="color:#3C4F8C"  (click) = "goback_services()">{{"i18nTextDefine_ViewDetails" | translate}}</span>
+        <span (click) = "goback_services()">{{"i18nTextDefine_ViewDetails" | translate}}</span>
       </p>
     </div>
     <div class="PACKAGE">
@@ -60,11 +61,12 @@
             </li>
       </div>
       <p class="tip">
-        <span style="color:#3C4F8C" (click) = "goback_onboard()">{{"i18nTextDefine_ViewDetails" | translate}}</span>
+        <span (click) = "goback_onboard()">{{"i18nTextDefine_ViewDetails" | translate}}</span>
       </p>
     </div>
   </div>
-  <div class="rightcontent" style="height: 96vh">
+  <!-- right-contnet -->
+  <div class="right-content">
     <div class="rt-content">
       <div class="alarm">
         <h4>{{"i18nTextDefine_ALARM" | translate}}</h4>
@@ -75,7 +77,7 @@
         <app-pie [initData]="VMAlarmChartInit" [chartData]="VMAlarmChartData"></app-pie>
         <p class="alarm-name"> {{"i18nTextDefine_VM_Alarm" | translate}} </p>
         <p class="tip">
-          <a href="#" style="color:#3C4F8C">{{"i18nTextDefine_ViewDetails" | translate}}</a>
+          <a href="#">{{"i18nTextDefine_ViewDetails" | translate}}</a>
         </p>
       </div>
     </div>
diff --git a/usecaseui-portal/src/app/views/home/home.component.less b/usecaseui-portal/src/app/views/home/home.component.less
index affe4765..dc736f18 100644
--- a/usecaseui-portal/src/app/views/home/home.component.less
+++ b/usecaseui-portal/src/app/views/home/home.component.less
@@ -20,7 +20,6 @@
     .left-content{
         float: left;
         width:30%;
-        // height:96vh;
         .services,.PACKAGE{
             width: 100%;
             background:rgba(255,255,255,1);
@@ -31,6 +30,9 @@
                 font: 600 16px/16px "Arial Bold";
                 color: #0DA9E2; 
             }
+            p {
+                font: 400 14px/14px "Arial";
+            }
             .tip {
                 float: right;
                 width: 110px;
@@ -40,7 +42,11 @@
                 font-size: 16px;
                 color: #3C4F8C;
                 margin-top: 20px;
-                margin-bottom: 0!important;
+                margin-bottom: 0;
+                text-align: center;
+                span{
+                    color: #3C4F8C;
+                }
             }
         }
         .services{
@@ -111,33 +117,31 @@
             
         } 
     }
-    .services,.PACKAGE{
-        h3 {
-            font: 400 48px/48px "Arial";
-            color: #3fa8eb;
-            text-align: center;
-            span {
-                font-size: 14px;
-            }
-        }
-        
-        p {
-            font: 400 14px/14px "Arial";
-            color: #54657e;
-            text-align: center;
-            margin-bottom: 48px;
-        }
-    }
-    .rightcontent {
+    .right-content {
         float: left;
-        padding-left: 15px;
         width: 70%;
+        height: 96vh;
+        padding-left: 15px;
         .rt-content {
             height: 40%;
             margin-bottom: 18px;
             background:rgba(255,255,255,1);
             box-shadow:0px 10px 10px 2px rgba(222,222,222,0.5);
             border-radius:6px;
+            .alarm {
+                float: left;
+                background-color: #fff;
+                height: 100%;
+                width: 48%;
+                border-radius: 5px;
+                position: relative;
+                padding: 28px 26px;
+                h4 {
+                    position: absolute;
+                    font: 600 16px/16px "Arial Bold";
+                    color: #0DA9E2;
+                }
+            }
             .poerformance {
                 float: left;
                 background-color: #fff;
@@ -149,13 +153,7 @@
                     h3 {
                         color:#BD57E5;
                     }
-                }
-                h4 {
-                    font: 600 16px/16px "Arial Bold";
-                    color: #0DA9E2;
-                    margin-bottom: 34px;  
-                }
-                
+                }      
                 div {
                     height: 57px;
                     position: relative;
@@ -178,37 +176,28 @@
                         left: 0;
                     }
                 }
-            }
-            .alarm {
-                float: left;
-                background-color: #fff;
-                height: 100%;
-                width: 48%;
-                border-radius: 5px;
-                position: relative;
-                padding: 28px 26px;
-                h4 {
-                    position: absolute;
-                    font: 600 16px/16px "Arial Bold";
-                    color: #0DA9E2;
+                .tip{
+                    width: 110px;
+                    background-color: #eceff4;
+                    color: #3C4F8C;
+                    font-size: 16px;
+                    float: right;
+                    margin-top: 20px;
+                    margin-bottom: 0!important;
+                    line-height: 35px;
+                    border-radius: 5px;
+                    text-align: center;
+                    a{
+                        color:#3C4F8C;
+                    }
                 }
             }
+            
             .alarm-name{
                 text-align: center;
                 margin-top: 15px;
             }
-            .tip{
-                width: 110px;
-                background-color: #eceff4;
-                color: #3C4F8C;
-                font-size: 16px;
-                float: right;
-                margin-top: 20px;
-                margin-bottom: 0!important;
-                line-height: 35px;
-                border-radius: 5px;
-                text-align: center;
-            }
+            
         }
         .rb-content {
             position: relative;
diff --git a/usecaseui-portal/src/app/views/management/management.component.html b/usecaseui-portal/src/app/views/management/management.component.html
index c96f0253..4e0ac36f 100644
--- a/usecaseui-portal/src/app/views/management/management.component.html
+++ b/usecaseui-portal/src/app/views/management/management.component.html
@@ -13,15 +13,14 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 -->
-<div class="content" style="padding: 20px 20px;height: 100vh">
+<div class="content">
   <div class="management" *ngIf="nocuster">
     <div class="title">
       <p> {{"i18nTextDefine_Create_initial_customer" | translate}} </p>
       <span> {{"i18nTextDefine_Customer_not_in_ONAP" | translate}} </span>
       <span> {{"i18nTextDefine_CreateCustomer" | translate}} </span>
-      <img src="../../../assets/images/customer01.png" alt="">
-      <input nz-input placeholder=" {{'i18nTextDefine_Input_customerName' | translate}} " nzSize="large"
-        style="height: 50px" [(ngModel)]="firstCustomer">
+      <img src="assets/images/customer01.png" alt="">
+      <input nz-input placeholder=" {{'i18nTextDefine_Input_customerName' | translate}} " nzSize="large" [(ngModel)]="firstCustomer">
       <div class="action">
         <button nz-button nzType="primary" class="cancel" (click)="clearCustomerInput()">
           {{"i18nTextDefine_Cancel" | translate}} </button>
@@ -30,10 +29,10 @@
       </div>
     </div>
     <div class="image">
-      <img src="../../../assets/images/customer02.png" alt="">
+      <img src="assets/images/customer02.png" alt="">
     </div>
   </div>
-  <div *ngIf="!nocuster" style="height: 100%">
+  <div *ngIf="!nocuster">
     <app-customer></app-customer>
   </div>
 </div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/management/management.component.less b/usecaseui-portal/src/app/views/management/management.component.less
index 5a3a0f42..1044c4d2 100644
--- a/usecaseui-portal/src/app/views/management/management.component.less
+++ b/usecaseui-portal/src/app/views/management/management.component.less
@@ -14,6 +14,8 @@
     limitations under the License.
 */
 .content {
+    padding: 20px 20px;
+    height: 100vh;
     .management {
         width: 100%;
         .title {
@@ -38,10 +40,11 @@
                 margin-bottom: 5%;
             }
             input {
+                display: block;
                 width: 50%;
+                height: 50px;
                 margin: 0 auto;
                 margin-bottom: 5%;
-                display: block;
 
             }
             .action{
@@ -75,5 +78,8 @@
             }
         }
     }
+    div:last-child{
+        height: 100%;
+    }
    
 }
\ No newline at end of file