feat: Home page style optimization

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

5 files changed, 160 insertions, 97 deletions

diff --git a/usecaseui-portal/src/app/app.component.html b/usecaseui-portal/src/app/app.component.html
index 1b201c08..2bd60670 100644
--- a/usecaseui-portal/src/app/app.component.html
+++ b/usecaseui-portal/src/app/app.component.html
@@ -14,11 +14,11 @@
     limitations under the License.
 -->
 <nz-layout>
-  <nz-sider nzWidth='330' style="overflow: auto; height: 100vh; position: fixed; left: 0;background: url('assets/images/UUIMenuBar.png')">
-    <div style="width: 330px;height:240px;text-align: center">
-      <img src="assets/images/uui-logo130.png" alt="" style="margin-top: 40px">
+  <nz-sider nzWidth='330' nzBreakpoint='xl' nzCollapsedWidth=260>
+    <div class="siderContent">
+      <img src="../assets/images/uui-logo130.png" alt="">
     </div>
-    <ul nz-menu [nzTheme]="'dark'" [nzMode]="'inline'" style="width: 330px">
+    <ul nz-menu [nzTheme]="'dark'" [nzMode]="'inline'">
       <li nz-menu-item [ngClass]="{'activeMenuBar':activeMenuBar[0] == true}" (click)="thisActive(0)">
         <a routerLink="home">
           <span title>
@@ -91,7 +91,7 @@
       </li>
     </ul>
   </nz-sider>
-  <nz-layout style="margin-left: 330px;  height:100vh; position:relative;">
+  <nz-layout class="main">
       <router-outlet></router-outlet>
   </nz-layout>
 </nz-layout>
diff --git a/usecaseui-portal/src/app/app.component.less b/usecaseui-portal/src/app/app.component.less
index 685a2167..42889ef2 100644
--- a/usecaseui-portal/src/app/app.component.less
+++ b/usecaseui-portal/src/app/app.component.less
@@ -1,7 +1,46 @@
+@media screen and (min-width: 1200px){
+    .siderContent{
+        height:240px;
+        img{
+            margin-top: 40px;
+        }
+    }
+    .main{
+        margin-left: 330px
+    }
+}
+@media screen and (max-width: 1200px){
+    .siderContent{
+        height:180px;
+        img{
+            transform: scale(0.8);
+            margin-top: 26px;
+        } 
+    }
+    .main{
+        margin-left: 260px
+    }  
+}
+
 nz-layout {
     nz-sider {
+        position: fixed;
+        left: 0;
+        z-index: 100;
+        // overflow: auto; 
+        height: 100vh; 
+        background: #313449 url('../assets/images/UUIMenuBar.png') no-repeat;
+        background-size: 100%;
+        .siderContent{
+            width: 100%;
+            text-align: center;
+            img{
+                transition: .5s;
+            }
+        }
         ul {
             background: transparent;
+            width: 100%;
             li {
                 margin: 0;
                 font-size: 16px;
@@ -55,4 +94,8 @@ nz-layout {
             }
         }
     }
+    .main{
+        height:100vh;
+        position:relative; 
+    }
 }
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/home/home.component.css b/usecaseui-portal/src/app/home/home.component.css
index 03cc8f94..41b3f5fe 100644
--- a/usecaseui-portal/src/app/home/home.component.css
+++ b/usecaseui-portal/src/app/home/home.component.css
@@ -71,6 +71,7 @@ hr {
 }
 .content .rightcontent .rt-content .poerformance {
   float: left;
+  margin-left: 2%;
   background-color: #fff;
   height: 100%;
   width: 50%;
diff --git a/usecaseui-portal/src/app/home/home.component.html b/usecaseui-portal/src/app/home/home.component.html
index d429bf8f..4126f241 100644
--- a/usecaseui-portal/src/app/home/home.component.html
+++ b/usecaseui-portal/src/app/home/home.component.html
@@ -16,8 +16,8 @@
 
 <!--<h3 class="title"> {{"Overall trend" | translate}}</h3>
 <hr> -->
-<div class="content" style="padding: 20px 20px;">
-  <div style="float: left;width:30%;height:96vh">
+<div class="content">
+  <div class="left-content">
     <div class="services">
       <h4>{{"i18nTextDefine_SERVICES" | translate}}</h4>
       <!-- <h3>{{serviceNumber}} <span>{{"services" | translate}}</span> </h3>
@@ -35,10 +35,10 @@
         <span  style="color:#3C4F8C"  (click) = "goback_services()">{{"i18nTextDefine_ViewDetails" | translate}}</span>
       </p>
     </div>
-    <div class="PACKAGE" style="height: 43%;margin-top: 3%">
+    <div class="PACKAGE">
       <h4>{{"i18nTextDefine_PACKAGE" | translate}}</h4>
       <div class="details">
-        <li>
+        <li class="detailstoplinContent">
           <div class="detailstoplin">
             <div><span></span> NS</div>
             <div>
@@ -47,7 +47,7 @@
             <div>{{NSdata}}</div>
           </div>
         </li>
-        <li>
+        <li class="detailstoplinContent">
             <div class="detailstoplin">
               <div><span style="background-color:#BCECB8;"></span> VNF</div>
               <div>
@@ -56,7 +56,7 @@
               <div>{{Vnfdata}}</div>
             </div>
           </li>
-          <li>
+          <li class="detailstoplinContent">
               <div class="detailstoplin">
                 <div><span style="background-color:#ACCAF4;"></span> PNF</div>
                 <div>
@@ -66,7 +66,7 @@
               </div>
             </li>
       </div>
-      <p class="tip" style="margin-top: 20px;">
+      <p class="tip">
         <span style="color:#3C4F8C" (click) = "goback_onboard()">{{"i18nTextDefine_ViewDetails" | translate}}</span>
       </p>
     </div>
diff --git a/usecaseui-portal/src/app/home/home.component.less b/usecaseui-portal/src/app/home/home.component.less
index 4297f5bb..9e768cf7 100644
--- a/usecaseui-portal/src/app/home/home.component.less
+++ b/usecaseui-portal/src/app/home/home.component.less
@@ -25,18 +25,103 @@
 //     margin-bottom: 20px;
 // }
 .content {
-    .services,.PACKAGE{
-        background-color: #fff;
-        width: 100%;
-        height: 57%;
-        border-radius: 5px;
-        padding: 28px 22px;
-        clear: both;
-        h4 {
-            font: 600 16px/16px "Arial Bold";
-            color: #0DA9E2;
-            margin-bottom: 20px;
+    padding: 20px 20px;
+    overflow: hidden;
+    .left-content{
+        float: left;
+        width:30%;
+        // height:96vh;
+        .services,.PACKAGE{
+            width: 100%;
+            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{
+                font: 600 16px/16px "Arial Bold";
+                color: #0DA9E2; 
+            }
+            .tip {
+                float: right;
+                width: 110px;
+                line-height: 35px;
+                border-radius: 5px;
+                background-color: #eceff4;
+                font-size: 16px;
+                color: #3C4F8C;
+                margin-top: 20px;
+                margin-bottom: 0!important;
+            }
+        }
+        .services{
+            height:466px;
+            h4{
+                margin-bottom: 20px;
+            }
+            h5 {
+                font: 500 18px/18px "ArialMT";
+                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;
+                }
+                span:first-child {
+                    font-size: 18px;
+                    padding: 0  4PX  0 4px;
+                }
+                span:last-child {
+                    padding-left: 4px;
+                }
+               
+            }
         }
+        .PACKAGE{
+            height:422px;
+            margin-top: 20px;
+            h4{
+                margin-bottom: 50px;
+            }
+            .details {
+                .detailstoplinContent{
+                    border-bottom:0.5px solid rgba(237,237,237,1);
+                    border-radius:4px;
+                    line-height: 45px;
+                    font-size: 14px;
+                    color: #3C4F8C;
+                    font-family:"ArialMT";
+                    .detailstoplin {
+                        width: 100%;
+                        height: 50px;
+                        border-top: 0.5px solid #ededed;
+                        border-radius: 4px;
+                        div:first-child{
+                            width: 20%;
+                            float: left;
+                        }
+                        div:nth-child(2){
+                            width: 65%;
+                            float: left;
+                        }
+                        div:last-child {
+                            width: 13%;
+                            float: right;
+                            font-size:12px;
+                            font-weight: 500;
+                            color:rgba(60,79,140,0.5);
+                        }
+                    }
+                } 
+            }
+            
+        } 
+    }
+    .services,.PACKAGE{
         h3 {
             font: 400 48px/48px "Arial";
             color: #3fa8eb;
@@ -45,83 +130,13 @@
                 font-size: 14px;
             }
         }
-        h5 {
-            font: 500 18px/18px "ArialMT";
-            color: #0DA9E2;
-            margin: -1em 0 0em 0;
-            span {
-                font-size: 14px;
-                font-family: "Arial";
-                color:#3C4F8C;
-            }
-            span:first-child {
-                font-size: 18px;
-                padding: 0  4PX  0 4px;
-            }
-            span:last-child {
-                padding-left: 4px;
-            }
-           
-        }
+        
         p {
             font: 400 14px/14px "Arial";
             color: #54657e;
             text-align: center;
             margin-bottom: 48px;
         }
-        .details {
-            li:first-child{
-                border-top: 0.5px solid #ededed; 
-            }
-            li {
-                border-bottom: 0.5px solid #ededed;
-                border-radius: 4px;
-                line-height: 40px;
-                font-size: 14px;
-                color: #3C4F8C;
-                font-family:"ArialMT";
-                .detailstoplin {
-                    width: 100%;
-                    height: 40px;
-                    /* border-top: 0.5px solid #ededed; */
-                    border-radius: 4px;
-                    div:first-child{
-                        width: 20%;
-                        float: left;
-                        span{
-                            height: 12px;
-                            width: 12px;
-                            margin-left: 2px;
-                            border-radius: 6px;
-                            background-color: #FECE72;
-                            display: inline-block;
-                        }
-                    }
-                    div:nth-child(2){
-                        width: 65%;
-                        float: left;
-                    }
-                    div:last-child {
-                        width: 13%;
-                        float: right;
-                        font-size:12px;
-                        font-weight: 500;
-                        color:rgba(60,79,140,0.5);
-                    }
-                }
-            } 
-        }
-        .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;
-        }
     }
     .rightcontent {
         float: left;
@@ -130,6 +145,9 @@
         .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;
             .poerformance {
                 float: left;
                 background-color: #fff;
@@ -187,7 +205,7 @@
             }
             .alarm-name{
                 text-align: center;
-                // margin-top: 15px;
+                margin-top: 15px;
             }
             .tip{
                 width: 110px;
@@ -203,11 +221,12 @@
             }
         }
         .rb-content {
+            position: relative;
             height: 58%;
             background-color: #fff;
-            border-radius: 5px;
             padding: 24px 30px;
-            position: relative;
+            box-shadow:0px 10px 15px 2px rgba(222,222,222,0.5);
+            border-radius:6px;
             h4 {
                 font: 600 16px/16px "Arial Bold";
                 color: #0DA9E2;