style: change the style of homepage layout

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

1 files changed, 89 insertions, 50 deletions

diff --git a/usecaseui-portal/src/app/views/home/home.component.less b/usecaseui-portal/src/app/views/home/home.component.less
index cb0d877e..68c1367e 100644
--- a/usecaseui-portal/src/app/views/home/home.component.less
+++ b/usecaseui-portal/src/app/views/home/home.component.less
@@ -18,26 +18,32 @@
     padding: 20px;
     min-height: 937px;
     height: 100vh;
-    .left-content{
+
+    .left-content {
         height: 100%;
         float: left;
-        width:30%;
-        .services,.PACKAGE{
-            display:flex;
+        width: 40%;
+
+        .services,
+        .PACKAGE {
+            display: flex;
             flex-direction: column;
             justify-content: space-between;
             width: 100%;
-            background:rgba(255,255,255,1);
-            box-shadow:0px 10px 10px 2px rgba(222,222,222,0.5);
-            border-radius:6px;
+            background: rgba(255, 255, 255, 1);
+            box-shadow: 0px 10px 10px 2px rgba(222, 222, 222, 0.5);
+            border-radius: 6px;
             padding: 28px 22px;
-            h4{
+
+            h4 {
                 font: 600 16px/16px "Arial Bold";
-                color: #0DA9E2; 
+                color: #0DA9E2;
             }
+
             p {
                 font: 400 14px/14px "Arial";
             }
+
             .tip {
                 align-self: flex-end;
                 width: 110px;
@@ -48,92 +54,108 @@
                 color: #3C4F8C;
                 text-align: center;
                 cursor: pointer;
-                span{
+
+                span {
                     color: #3C4F8C;
                 }
             }
         }
-        .services{
-            min-height:467px;
+
+        .services {
+            min-height: 467px;
             height: 49vh;
             flex-wrap: wrap;
+
             h5 {
                 position: relative;
                 z-index: 3;
                 font: 500 18px/18px "ArialMT";
-                color:#0DA9E2;
-                margin: -2em 0 1em 0 ;
+                color: #0DA9E2;
+                margin: -2em 0 1em 0;
                 display: -webkit-box;
                 -webkit-box-orient: vertical;
                 -webkit-line-clamp: 2;
                 overflow: hidden;
+
                 span {
                     font-size: 14px;
                     font-family: "Arial";
-                    color:#3C4F8C;
+                    color: #3C4F8C;
                 }
+
                 span:first-child {
                     font-size: 18px;
-                    padding: 0  4PX  0 4px;
+                    padding: 0 4PX 0 4px;
                 }
+
                 span:last-child {
                     padding-left: 4px;
                 }
-               
+
             }
         }
-        .PACKAGE{
-            min-height:410px;
+
+        .PACKAGE {
+            min-height: 410px;
             height: 43vh;
             margin-top: 20px;
+
             .details {
-                .detailstoplinContent{
-                    border-bottom:0.5px solid rgba(237,237,237,1);
-                    border-radius:4px;
+                .detailstoplinContent {
+                    border-bottom: 0.5px solid rgba(237, 237, 237, 1);
+                    border-radius: 4px;
                     line-height: 58px;
                     font-size: 14px;
                     color: #3C4F8C;
-                    font-family:"ArialMT";
+                    font-family: "ArialMT";
+
                     .detailstoplin {
                         width: 100%;
                         height: 58px;
                         border-radius: 4px;
-                        div:first-child{
+
+                        div:first-child {
                             width: 20%;
                             float: left;
                         }
-                        div:nth-child(2){
+
+                        div:nth-child(2) {
                             width: 65%;
                             float: left;
                         }
+
                         div:last-child {
                             width: 13%;
                             float: right;
-                            font-size:12px;
+                            font-size: 12px;
                             font-weight: 500;
-                            color:rgba(60,79,140,0.5);
+                            color: rgba(60, 79, 140, 0.5);
                         }
                     }
-                    &:first-child{
-                        border-top: 0.5px solid rgba(237,237,237,1);
-                    } 
+
+                    &:first-child {
+                        border-top: 0.5px solid rgba(237, 237, 237, 1);
+                    }
                 }
             }
-            
-        } 
+
+        }
     }
+
     .right-content {
         height: 100%;
         float: left;
-        width: 70%;
+        width: 60%;
         padding-left: 15px;
+
         .rt-content {
             min-height: 327px;
             height: 34vh;
             margin-bottom: 18px;
-            background:rgba(255,255,255,1);
-            box-shadow:0px 10px 10px 2px rgba(222,222,222,0.5);
-            border-radius:6px;
+            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;
@@ -142,12 +164,14 @@
                 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;
@@ -155,78 +179,90 @@
                 width: 50%;
                 border-radius: 5px;
                 padding: 28px 26px;
+
                 .pfVmPm {
                     h3 {
-                        color:#BD57E5;
+                        color: #BD57E5;
                     }
-                }      
+                }
+
                 div {
                     height: 57px;
                     position: relative;
                     margin-bottom: 10px;
+
                     h3 {
                         font: 600 25px/25px "Arial";
                         color: #2F6AEF;
                         margin-bottom: 10px;
                         padding-left: 50%;
                     }
+
                     p {
-                        font: 400 12px/12px "Arial"; 
-                        color:rgba(60,79,140,0.5);
+                        font: 400 12px/12px "Arial";
+                        color: rgba(60, 79, 140, 0.5);
                         padding-left: 50%;
-                        
+
                     }
+
                     img {
                         position: absolute;
                         top: 0;
                         left: 0;
                     }
                 }
-                .tip{
+
+                .tip {
                     width: 110px;
                     background-color: #eceff4;
                     color: #3C4F8C;
                     font-size: 16px;
                     float: right;
                     margin-top: 20px;
-                    margin-bottom: 0!important;
+                    margin-bottom: 0 !important;
                     line-height: 35px;
                     border-radius: 5px;
                     text-align: center;
-                    a{
-                        color:#3C4F8C;
+
+                    a {
+                        color: #3C4F8C;
                     }
                 }
             }
-            
-            .alarm-name{
+
+            .alarm-name {
                 text-align: center;
                 margin-top: 15px;
             }
-            
+
         }
+
         .rb-content {
             position: relative;
             min-height: 550px;
             height: 58vh;
             background-color: #fff;
             padding: 24px 30px;
-            box-shadow:0px 10px 15px 2px rgba(222,222,222,0.5);
-            border-radius:6px;
+            box-shadow: 0px 10px 15px 2px rgba(222, 222, 222, 0.5);
+            border-radius: 6px;
+
             h4 {
                 font: 600 16px/16px "Arial Bold";
                 color: #0DA9E2;
             }
+
             nz-dropdown {
                 position: absolute;
                 top: 24px;
                 right: 30px;
+
                 button {
                     width: 170px;
                     height: 35px;
                     background-color: #eceff4;
                     text-align: left;
                     border-color: #cad3df;
+
                     span {
                         display: inline-block;
                         width: 120px;
@@ -234,14 +270,17 @@
                         text-overflow: ellipsis;
                         font-size: 14px;
                     }
+
                     i {
                         position: absolute;
                         top: 12px;
                         right: 12px;
                     }
                 }
+
                 //The style in the drop-down box is in style.less, and the drop-down box is extra temporary generated in the body.
             }
+
             #pfVmChartLine {
                 width: 100%;
                 height: 318px;