summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2019-08-23 12:48:21 +0800
committercyuamber <xuranyjy@chinamobile.com>2019-08-23 12:48:47 +0800
commit37e0cb2fb03743feb5342eab6bf35d8e5b11155d (patch)
tree11a466175de890e7a4054eda8d8299739fec168c
parent5d9b41e5bf84926b2896231f17d3408fee0bf918 (diff)
style: customer page style optimization
Change-Id: I43b6df7d3e7e03e5f608344aea76231aeb39ad97 Issue-ID: USECASEUI-307 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
-rw-r--r--usecaseui-portal/src/app/shared/components/customer/customer.component.html19
-rw-r--r--usecaseui-portal/src/app/shared/components/customer/customer.component.less112
2 files changed, 75 insertions, 56 deletions
diff --git a/usecaseui-portal/src/app/shared/components/customer/customer.component.html b/usecaseui-portal/src/app/shared/components/customer/customer.component.html
index 08a23935..646431b2 100644
--- a/usecaseui-portal/src/app/shared/components/customer/customer.component.html
+++ b/usecaseui-portal/src/app/shared/components/customer/customer.component.html
@@ -26,10 +26,9 @@
<div class="type">
<p> {{"i18nTextDefine_Instance_Count_of_ServiceType" | translate}} </p>
<app-bar [initData]="serviceInit" [chartData]="serviceData"></app-bar>
- <div class="footname" style="width: 100%;height: 40px;line-height: 40px;text-align: center;color: #3C4F8C;">
- <img src="../../../../assets/images/customerBarUser.png" alt="customerName"
- style="margin-right: 5px;margin-bottom: 3px;">
- {{this.serviceInit["customer"]}}
+ <div class="footname">
+ <img src="assets/images/customerBarUser.png" alt="customerName">
+ {{this.serviceInit["customer"]}}
</div>
</div>
</div>
@@ -37,8 +36,7 @@
<div class="customer_title">
<div class="customers">
<span> {{"i18nTextDefine_Customer" | translate}} </span>
- <img src="../../../../assets/images/customer04.png" alt="" (click)="this.customeradd = !this.customeradd"
- style="cursor: pointer">
+ <img src="assets/images/customer04.png" alt="" (click)="this.customeradd = !this.customeradd">
</div>
</div>
<div class="customer_detail">
@@ -52,7 +50,7 @@
<ul>
<li *ngFor="let item of AllCustomersdata,let i = index" [ngClass]="{active: chose ==i}"
(click)="choseCustomer(i,item)">
- <img src="../../../../assets/images/customer05.png" alt="">
+ <img src="assets/images/customer05.png" alt="">
<span>{{item.name}}</span>
<i class="anticon anticon-delete" nzType="info" (click)="deleteCustomerModel(item)"></i>
</li>
@@ -64,8 +62,7 @@
<div class="services_type_title">
<div class="servicess">
<span> {{"i18nTextDefine_ServiceType" | translate}} </span>
- <img src="../../../../assets/images/customer03.png" alt="" (click)="this.servicesadd = !this.servicesadd "
- style="cursor: pointer">
+ <img src="assets/images/customer03.png" alt="" (click)="this.servicesadd = !this.servicesadd ">
</div>
</div>
<div class="services_type_detail">
@@ -75,9 +72,9 @@
<button nz-button nzType="primary" class="services_addbut"
(click)="createNewServiceType(notificationModel)">{{"i18nTextDefine_Add" | translate}}</button>
</div>
- <div class="services_list">
+ <div class="services_list_content">
<div class="border_size"></div>
- <div style="padding:0 20px;">
+ <div class="services_list">
<ul>
<li *ngFor="let item of AllServiceTypes">
<span>{{item.type}}</span>
diff --git a/usecaseui-portal/src/app/shared/components/customer/customer.component.less b/usecaseui-portal/src/app/shared/components/customer/customer.component.less
index 7d329230..83307dd7 100644
--- a/usecaseui-portal/src/app/shared/components/customer/customer.component.less
+++ b/usecaseui-portal/src/app/shared/components/customer/customer.component.less
@@ -34,6 +34,65 @@
background-color: #e6f7ff;
}
}
+ .chearts {
+ display: inline-block;
+ width: 32%;
+ margin-right: 1.5%;
+ vertical-align: top;
+ height: 100%;
+ >div{
+ padding: 20px 20px;
+ }
+ .Cu {
+ height: 48%;
+ width: 100%;
+ margin-bottom: 7%;
+ margin-right: 2.5%;
+ border-radius: 5px;
+ background-color: #fff;
+ box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
+ p {
+ color :#0DA9E2;
+ font-family:"ArialMT";
+ }
+ .legend {
+ height: 10px;
+ width: 10px;
+ display: inline-block;
+ background: linear-gradient(to right,#7DCEFB, #0DA9E2);
+ border-radius: 50%;
+ margin: 15px 4px 0 43%;
+ }
+ }
+ .type {
+ height: 48%;
+ width: 100%;
+ margin-right: 2.5%;
+ border-radius: 5px;
+ background-color: #fff;
+ box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
+ p {
+ color :#0DA9E2;
+ font-family:"ArialMT";
+ }
+ app-bar{
+ width: 100%;
+ }
+ .footname{
+ width: 100%;
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+ color: #3C4F8C;
+ margin-top: 20px;
+ img{
+ margin-right: 5px;
+ margin-bottom: 3px;
+ }
+ }
+
+ }
+ }
.customer {
height: 100%;
overflow: hidden;
@@ -60,6 +119,7 @@
height: 30px;
float: right;
margin-top: 7px;
+ cursor: pointer;
}
}
}
@@ -142,6 +202,7 @@
float: right;
margin-right: -10px;
margin-top: 5px;
+ cursor: pointer;
}
}
}
@@ -172,7 +233,7 @@
}
}
- .services_list {
+ .services_list_content {
background:linear-gradient(to right, #E5F6FF, #CFEEFA);
height: 100%;
.border_size{
@@ -184,6 +245,8 @@
border-bottom: 24px solid transparent;
border-right: 10px solid #E5F6FF;
}
+ .services_list{
+ padding:0 20px;
li {
height: 50px;
line-height: 50px;
@@ -204,51 +267,10 @@
}
}
}
-
- }
- }
- .chearts {
- display: inline-block;
- width: 32%;
- margin-right: 1.5%;
- vertical-align: top;
- height: 100%;
- >div{
- padding: 20px 20px;
- }
- .Cu {
- height: 48%;
- width: 100%;
- margin-bottom: 7%;
- margin-right: 2.5%;
- border-radius: 5px;
- background-color: #fff;
- box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
- p {
- color :#0DA9E2;
- font-family:"ArialMT";
- }
- .legend {
- height: 10px;
- width: 10px;
- display: inline-block;
- background: linear-gradient(to right,#7DCEFB, #0DA9E2);
- border-radius: 50%;
- margin: 15px 4px 0 43%;
- }
- }
- .type {
- height: 48%;
- width: 100%;
- margin-right: 2.5%;
- border-radius: 5px;
- background-color: #fff;
- box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
- p {
- color :#0DA9E2;
- font-family:"ArialMT";
-
+
}
+
}
}
+
} \ No newline at end of file