From c176eb964eb4877adb35a502791a13434bd57c76 Mon Sep 17 00:00:00 2001 From: cyuamber Date: Tue, 17 Sep 2019 16:49:24 +0800 Subject: style: optimize the style of the home page Change-Id: I963cdb61aebcb4d049cfc4cc19c5d5dc3b743986 Issue-ID: USECASEUI-307 Signed-off-by: cyuamber --- .../src/app/views/home/home.component.html | 10 ++-- .../src/app/views/home/home.component.less | 54 ++++++++++++++-------- .../src/app/views/home/home.component.ts | 41 +++++++++------- 3 files changed, 65 insertions(+), 40 deletions(-) (limited to 'usecaseui-portal/src/app/views') diff --git a/usecaseui-portal/src/app/views/home/home.component.html b/usecaseui-portal/src/app/views/home/home.component.html index 0946b587..faa5dcd4 100644 --- a/usecaseui-portal/src/app/views/home/home.component.html +++ b/usecaseui-portal/src/app/views/home/home.component.html @@ -17,9 +17,9 @@
-
+

{{"i18nTextDefine_SERVICES" | translate}}

- +
{{"i18nTextDefine_Total" | translate}}: {{serviceNumber}} {{"i18nTextDefine_cutomers_and" | translate}} {{serviceNumber}} @@ -34,7 +34,7 @@
  • -
    NS
    +
    NS
    @@ -43,7 +43,7 @@
  • -
    VNF
    +
    VNF
    @@ -52,7 +52,7 @@
  • -
    PNF
    +
    PNF
    diff --git a/usecaseui-portal/src/app/views/home/home.component.less b/usecaseui-portal/src/app/views/home/home.component.less index dc736f18..193e0748 100644 --- a/usecaseui-portal/src/app/views/home/home.component.less +++ b/usecaseui-portal/src/app/views/home/home.component.less @@ -15,12 +15,18 @@ */ .content { - padding: 20px 20px; + padding: 20px; + min-height: 918px; + height: 100vh; overflow: hidden; .left-content{ + height: 100%; float: left; width:30%; .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); @@ -34,27 +40,31 @@ font: 400 14px/14px "Arial"; } .tip { - float: right; + align-self: flex-end; width: 110px; line-height: 35px; border-radius: 5px; background-color: #eceff4; font-size: 16px; color: #3C4F8C; - margin-top: 20px; - margin-bottom: 0; text-align: center; + cursor: pointer; span{ color: #3C4F8C; } } } .services{ - height:466px; - h4{ - margin-bottom: 20px; - } + min-height:466px; + height: 50vh; + flex-wrap: wrap; + + // h4{ + // // margin-bottom: 20px; + // } h5 { + position: relative; + z-index: 3; font: 500 18px/18px "ArialMT"; color:#0DA9E2; margin: -2em 0 1em 0 ; @@ -78,23 +88,24 @@ } } .PACKAGE{ - height:422px; + min-height:422px; + height: 45vh; margin-top: 20px; - h4{ - margin-bottom: 50px; - } + // justify-content: space-around; + // h4{ + // margin-bottom: 50px; + // } .details { .detailstoplinContent{ border-bottom:0.5px solid rgba(237,237,237,1); border-radius:4px; - line-height: 45px; + line-height: 58px; font-size: 14px; color: #3C4F8C; font-family:"ArialMT"; .detailstoplin { width: 100%; - height: 50px; - border-top: 0.5px solid #ededed; + height: 58px; border-radius: 4px; div:first-child{ width: 20%; @@ -112,18 +123,22 @@ color:rgba(60,79,140,0.5); } } - } + &:first-child{ + border-top: 0.5px solid rgba(237,237,237,1); + } + } } } } .right-content { + height: 100%; float: left; width: 70%; - height: 96vh; padding-left: 15px; .rt-content { - height: 40%; + min-height: 350px; + height: 40vh; margin-bottom: 18px; background:rgba(255,255,255,1); box-shadow:0px 10px 10px 2px rgba(222,222,222,0.5); @@ -201,7 +216,8 @@ } .rb-content { position: relative; - height: 58%; + min-height: 538px; + height: 55vh; background-color: #fff; padding: 24px 30px; box-shadow:0px 10px 15px 2px rgba(222,222,222,0.5); diff --git a/usecaseui-portal/src/app/views/home/home.component.ts b/usecaseui-portal/src/app/views/home/home.component.ts index 153e2219..92e7e881 100644 --- a/usecaseui-portal/src/app/views/home/home.component.ts +++ b/usecaseui-portal/src/app/views/home/home.component.ts @@ -13,12 +13,13 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { Component, OnInit, Input, Output, EventEmitter, HostBinding } 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'; import { TranslateService } from "@ngx-translate/core"; import { Router } from '@angular/router'; +import { Observable } from 'rxjs' @Component({ selector: 'app-home', @@ -28,12 +29,16 @@ import { Router } from '@angular/router'; }) export class HomeComponent implements OnInit { @HostBinding('@routerAnimate') routerAnimateState; + @ViewChild('seriverChart') seriverChart; + @ViewChild('services') services: ElementRef; + constructor( - private myhttp: HomesService, - private router: Router, - private Util: Util - ) { } + private myhttp: HomesService, + private router: Router, + private Util: Util + ) { + } ngOnInit() { this.getListSortMasters(); @@ -44,6 +49,16 @@ export class HomeComponent implements OnInit { this.getHomeServiceBarNsData(); this.getHomeServiceBarVnfData(); this.getHomeServiceBarPnfData(); + Observable.fromEvent(window,'resize') + .subscribe((event) => { + this.seriverChart.resize(this.services.nativeElement.offsetHeight) + }) + } + + ngAfterViewInit(){ + this.seriverChart.resize(this.services.nativeElement.offsetHeight) + + } @@ -51,9 +66,9 @@ export class HomeComponent implements OnInit { serviceNumber: number = 0; serviceChartData: Object; serviceChartInit: Object = { - backgroundColor: '#fff', - height: 200, + height: 280, option: { + backgroundColor: '#fff', legend: { orient: 'vertical', left: '0px', @@ -100,17 +115,11 @@ export class HomeComponent implements OnInit { } }; // gethomeServiceData - serviceChart = true; getHomeServiceData() { this.myhttp.getHomeServiceData() .subscribe( (data) => { this.serviceNumber = data.serviceTotalNum; - if (this.serviceNumber > 0) { - this.serviceChart = true; - } else { - this.serviceChart = false; - } this.serviceChartData = { series: [{ data: data.customerServiceList }] }; @@ -165,7 +174,7 @@ export class HomeComponent implements OnInit { show: false, }, emphasis: { - show: true, + show: false, formatter: '{b}\n{c},{d}%', color: "#3C4F8C" } @@ -230,7 +239,7 @@ export class HomeComponent implements OnInit { show: false, }, emphasis: { - show: true, + show: false, formatter: '{b}\n{c},{d}%', color: "#3C4F8C" } @@ -301,7 +310,7 @@ export class HomeComponent implements OnInit { servicesBarChartData1: Object; servicesBarChartData2: Object; serviceBarChartInit: Object = { - height: 40, + height: 58, width: 160, option: { tooltip: { -- cgit 1.2.3-korg