style: home page optimization

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

2 files changed, 48 insertions, 57 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;