summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views/home
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2019-09-17 16:49:24 +0800
committercyuamber <xuranyjy@chinamobile.com>2019-09-17 16:49:34 +0800
commitc176eb964eb4877adb35a502791a13434bd57c76 (patch)
tree562eadea4ad28d55a71b2bac5111604772839966 /usecaseui-portal/src/app/views/home
parente727e1a70079182eac2aec6dfe83a409e811ece9 (diff)
style: optimize the style of the home page
Change-Id: I963cdb61aebcb4d049cfc4cc19c5d5dc3b743986 Issue-ID: USECASEUI-307 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/views/home')
-rw-r--r--usecaseui-portal/src/app/views/home/home.component.html10
-rw-r--r--usecaseui-portal/src/app/views/home/home.component.less54
-rw-r--r--usecaseui-portal/src/app/views/home/home.component.ts41
3 files changed, 65 insertions, 40 deletions
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 @@
<div class="content">
<!-- left-content -->
<div class="left-content">
- <div class="services">
+ <div class="services" #services>
<h4>{{"i18nTextDefine_SERVICES" | translate}}</h4>
- <app-pie [initData]="serviceChartInit" [chartData]="serviceChartData"></app-pie>
+ <app-pie [initData]="serviceChartInit" [chartData]="serviceChartData" #seriverChart></app-pie>
<div>
<h5><span>{{"i18nTextDefine_Total" | translate}}:</span> {{serviceNumber}}
<span>{{"i18nTextDefine_cutomers_and" | translate}}</span> {{serviceNumber}}
@@ -34,7 +34,7 @@
<div class="details">
<li class="detailstoplinContent">
<div class="detailstoplin">
- <div><span></span> NS</div>
+ <div>NS</div>
<div>
<app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData"></app-bar>
</div>
@@ -43,7 +43,7 @@
</li>
<li class="detailstoplinContent">
<div class="detailstoplin">
- <div><span style="background-color:#BCECB8;"></span> VNF</div>
+ <div>VNF</div>
<div>
<app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData1"></app-bar>
</div>
@@ -52,7 +52,7 @@
</li>
<li class="detailstoplinContent">
<div class="detailstoplin">
- <div><span style="background-color:#ACCAF4;"></span> PNF</div>
+ <div>PNF</div>
<div>
<app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData2"></app-bar>
</div>
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: {