diff options
author | 2019-08-23 12:48:21 +0800 | |
---|---|---|
committer | 2019-08-23 12:48:47 +0800 | |
commit | 37e0cb2fb03743feb5342eab6bf35d8e5b11155d (patch) | |
tree | 11a466175de890e7a4054eda8d8299739fec168c /usecaseui-portal/src/app/shared/components | |
parent | 5d9b41e5bf84926b2896231f17d3408fee0bf918 (diff) |
style: customer page style optimization
Change-Id: I43b6df7d3e7e03e5f608344aea76231aeb39ad97
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/shared/components')
-rw-r--r-- | usecaseui-portal/src/app/shared/components/customer/customer.component.html | 19 | ||||
-rw-r--r-- | usecaseui-portal/src/app/shared/components/customer/customer.component.less | 112 |
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 |