style: change the style of homepage layout

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

4 files changed, 136 insertions, 95 deletions

diff --git a/usecaseui-portal/src/app/views/home/home.component.html b/usecaseui-portal/src/app/views/home/home.component.html
index faa5dcd4..13307927 100644
--- a/usecaseui-portal/src/app/views/home/home.component.html
+++ b/usecaseui-portal/src/app/views/home/home.component.html
@@ -26,7 +26,7 @@
           <span>{{"i18nTextDefine_service_instance" | translate}}</span></h5>
       </div>
       <p class="tip">
-        <span (click) = "goback_services()">{{"i18nTextDefine_ViewDetails" | translate}}</span>
+        <span (click)="goback_services()">{{"i18nTextDefine_ViewDetails" | translate}}</span>
       </p>
     </div>
     <div class="PACKAGE">
@@ -42,26 +42,26 @@
           </div>
         </li>
         <li class="detailstoplinContent">
-            <div class="detailstoplin">
-              <div>VNF</div>
-              <div>
-                <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData1"></app-bar>
-              </div>
-              <div>{{Vnfdata}}</div>
+          <div class="detailstoplin">
+            <div>VNF</div>
+            <div>
+              <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData1"></app-bar>
             </div>
-          </li>
-          <li class="detailstoplinContent">
-              <div class="detailstoplin">
-                <div>PNF</div>
-                <div>
-                  <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData2"></app-bar>
-                </div>
-                <div>{{PnfData}}</div>
-              </div>
-            </li>
+            <div>{{Vnfdata}}</div>
+          </div>
+        </li>
+        <li class="detailstoplinContent">
+          <div class="detailstoplin">
+            <div>PNF</div>
+            <div>
+              <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData2"></app-bar>
+            </div>
+            <div>{{PnfData}}</div>
+          </div>
+        </li>
       </div>
       <p class="tip">
-        <span (click) = "goback_onboard()">{{"i18nTextDefine_ViewDetails" | translate}}</span>
+        <span (click)="goback_onboard()">{{"i18nTextDefine_ViewDetails" | translate}}</span>
       </p>
     </div>
   </div>
@@ -76,9 +76,9 @@
       <div class="poerformance">
         <app-pie [initData]="VMAlarmChartInit" [chartData]="VMAlarmChartData"></app-pie>
         <p class="alarm-name"> {{"i18nTextDefine_VM_Alarm" | translate}} </p>
-        <p class="tip">
+        <!-- <p class="tip">
           <a href="#">{{"i18nTextDefine_ViewDetails" | translate}}</a>
-        </p>
+        </p> -->
       </div>
     </div>
     <div class="rb-content">
@@ -94,4 +94,4 @@
       <app-line [initData]="alarmLineChartInit" [chartData]="alarmLineChartData"></app-line>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
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;
diff --git a/usecaseui-portal/src/app/views/home/home.component.ts b/usecaseui-portal/src/app/views/home/home.component.ts
index a7f312e6..75ebb183 100644
--- a/usecaseui-portal/src/app/views/home/home.component.ts
+++ b/usecaseui-portal/src/app/views/home/home.component.ts
@@ -13,7 +13,7 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-import { Component, OnInit,  HostBinding, ViewChild, ElementRef } from '@angular/core';
+import { Component, OnInit, HostBinding, ViewChild, ElementRef } from '@angular/core';
 import { HomesService } from '../../core/services/homes.service';
 import { slideToRight } from '../../shared/utils/animates';
 import { Util } from '../../shared/utils/utils';
@@ -31,13 +31,13 @@ export class HomeComponent implements OnInit {
   @HostBinding('@routerAnimate') routerAnimateState;
   @ViewChild('seriverChart') seriverChart;
   @ViewChild('services') services: ElementRef;
-  resizeMark  
+  resizeMark
 
   constructor(
     private myhttp: HomesService,
     private router: Router,
     private Util: Util
-  ) { 
+  ) {
   }
 
   ngOnInit() {
@@ -49,17 +49,17 @@ export class HomeComponent implements OnInit {
     this.getHomeServiceBarNsData();
     this.getHomeServiceBarVnfData();
     this.getHomeServiceBarPnfData();
-    this.resizeMark = Observable.fromEvent(window,'resize')
+    this.resizeMark = Observable.fromEvent(window, 'resize')
       .subscribe((event) => {
-        this.seriverChart.resize(this.services.nativeElement.offsetHeight,250)
+        this.seriverChart.resize(this.services.nativeElement.offsetHeight, 250)
       })
   }
-  
-  ngAfterViewInit(){
-    this.seriverChart.resize(this.services.nativeElement.offsetHeight,250)
+
+  ngAfterViewInit() {
+    this.seriverChart.resize(this.services.nativeElement.offsetHeight, 250)
   }
 
-  ngOnDestroy(){
+  ngOnDestroy() {
     this.resizeMark.unsubscribe()
   }
 
@@ -540,7 +540,7 @@ export class HomeComponent implements OnInit {
     this.router.navigateByUrl('/services/services-list');
   }
   goback_onboard() {
-    this.router.navigateByUrl('/services/onboard-vnf-vm');
+    this.router.navigateByUrl('/onboard-vnf-vm');
   }
 
 }
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html
index 23548aad..5e6914ab 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html
@@ -48,19 +48,17 @@
         </div>
       </nz-list-item>
     </ng-template>
-  </nz-list> 
+  </nz-list>
 
   <div>
     <nz-list class="taskmodel_list" nzBordered [nzHeader]="'匹配共享切片实例：'" [nzFooter]="null">
       <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
         <div nz-col nzSpan="12">
           切片实例 ID：
-          <nz-select nzShowSearch 
-            [(ngModel)]="selectedServiceId" 
-            (ngModelChange)="slicingInstanceChange()" 
-            (nzOpenChange)="getSlicingData($event)" 
-          >
-            <nz-option *ngFor="let item of slicingInstances" [nzValue]="item.service_instance_id" [nzLabel]="item.service_instance_id"></nz-option>
+          <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="slicingInstanceChange()"
+            (nzOpenChange)="getSlicingData($event)">
+            <nz-option *ngFor="let item of slicingInstances" [nzValue]="item.service_instance_id"
+              [nzLabel]="item.service_instance_id"></nz-option>
           </nz-select>
         </div>
         <div nz-col nzSpan="8">
@@ -68,7 +66,7 @@
         </div>
         <div nz-col nzSpan="4">
           <button nz-button nzType="primary" (click)="resetSlicingInstance()">
-            <i nz-icon class="anticon anticon-plus"></i>
+            <i nz-icon class="anticon anticon-delete"></i>
           </button>
         </div>
       </nz-list-item>
@@ -78,18 +76,21 @@
           <div nz-row [nzGutter]="8">
             <div nz-col nzSpan="12">
               切片子网实例 ID：
-              <nz-select nzShowSearch [(ngModel)]="item.slicingId" (ngModelChange)="slicingSubnetChange(item)" (nzOpenChange)="getSubnetInstances($event, item)" [nzDisabled]="isDisabled">
-                <nz-option *ngFor="let item of item.instances" [nzValue]="item.service_instance_id" [nzLabel]="item.service_instance_id"></nz-option>
+              <nz-select nzShowSearch [(ngModel)]="item.slicingId" (ngModelChange)="slicingSubnetChange(item)"
+                (nzOpenChange)="getSubnetInstances($event, item)" [nzDisabled]="isDisabled">
+                <nz-option *ngFor="let item of item.instances" [nzValue]="item.service_instance_id"
+                  [nzLabel]="item.service_instance_id"></nz-option>
               </nz-select>
             </div>
             <div nz-col nzSpan="8">
               切片子网实例名称：{{item.slicingName}}
             </div>
             <div nz-col nzSpan="4">
-              <button nz-button nzType="primary" (click)="restSubnetInstance(item)" [disabled]='isDisabled' [attr.disabled] ='isDisabled?true:undefined'> 
-                <i nz-icon class="anticon anticon-plus"></i>
+              <button nz-button nzType="primary" (click)="restSubnetInstance(item)" [disabled]='isDisabled'
+                [attr.disabled]='isDisabled?true:undefined'>
+                <i nz-icon class="anticon anticon-delete"></i>
               </button>
-              <button nz-button nzType="primary" (click)="showParamsModel(item)"> 
+              <button nz-button nzType="primary" (click)="showParamsModel(item)">
                 <i nz-icon class="anticon anticon-setting" nzTheme="outline"></i>
               </button>
             </div>
@@ -98,6 +99,7 @@
       </nz-list-item>
     </nz-list>
   </div>
-  <app-subnet-params-model [showModel]="isShowParams" [detailData]="params" [title]="paramsTitle" (cancel)="isShowParams=$event"></app-subnet-params-model>
+  <app-subnet-params-model [showModel]="isShowParams" [detailData]="params" [title]="paramsTitle"
+    (cancel)="isShowParams=$event"></app-subnet-params-model>
 
 </nz-modal>
\ No newline at end of file