summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2019-08-30 11:01:57 +0800
committercyuamber <xuranyjy@chinamobile.com>2019-08-30 11:02:10 +0800
commit72bb08d969f6d9f98f6dad89b3c4935d50dc09d8 (patch)
tree16553961a178eddcd9c7e7c0fd457cf96639916c /usecaseui-portal/src/app
parent44b2c522ad321e5a6b7c2d7737e7e9c60a343130 (diff)
style: services-list page style optimization
Change-Id: I6c8c46198ab74a18e82e42195fea7b89f8006a02 Issue-ID: USECASEUI-307 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app')
-rw-r--r--usecaseui-portal/src/app/app.component.less2
-rw-r--r--usecaseui-portal/src/app/views/services/services-list/services-list.component.html40
-rw-r--r--usecaseui-portal/src/app/views/services/services-list/services-list.component.less227
-rw-r--r--usecaseui-portal/src/app/views/services/services-list/services-list.component.ts7
4 files changed, 172 insertions, 104 deletions
diff --git a/usecaseui-portal/src/app/app.component.less b/usecaseui-portal/src/app/app.component.less
index ed7ad4f1..78cc4e44 100644
--- a/usecaseui-portal/src/app/app.component.less
+++ b/usecaseui-portal/src/app/app.component.less
@@ -46,7 +46,7 @@ nz-layout {
left: 0;
z-index: 100;
height: 100vh;
- background: #313449 url('assets/images/UUIMenuBar.png') no-repeat;
+ background: #313449 url('/assets/images/UUIMenuBar.png') no-repeat;
background-size: 100%;
.siderContent{
width: 100%;
diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.html b/usecaseui-portal/src/app/views/services/services-list/services-list.component.html
index 6f6d8f74..206ecd8f 100644
--- a/usecaseui-portal/src/app/views/services/services-list/services-list.component.html
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.html
@@ -15,39 +15,47 @@
-->
<div class="action ant-tabs-bar">
- <span><i style="margin-right: 10px"><img src="assets/images/customer.png" alt=""></i>
- {{"i18nTextDefine_Customer" | translate}} : </span>
+ <span>
+ <i class="icon">
+ <img src="assets/images/customer.png" alt="">
+ </i>
+ {{"i18nTextDefine_Customer" | translate}} :
+ </span>
<nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
<button nz-button nz-dropdown><span>{{customerSelected.name}}</span> <i class="anticon anticon-down"></i>
</button>
- <ul nz-menu style="min-height:40px;max-height: 200px; overflow: auto;">
+ <ul nz-menu>
<li nz-menu-item (click)="choseCustomer(item)" *ngFor="let item of customerList">
- <a title="{{item.name}}"
- style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a>
+ <a title="{{item.name}}">{{item.name}}</a>
</li>
</ul>
</nz-dropdown>
- <span style="margin-left:40px"><i style="margin-right: 10px"><img src="assets/images/service-type.png" alt=""></i>
- {{"i18nTextDefine_ServiceType" | translate}} : </span>
+ <span>
+ <i class="icon">
+ <img src="assets/images/service-type.png"alt="">
+ </i>
+ {{"i18nTextDefine_ServiceType" | translate}} :
+ </span>
<nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
<button nz-button nz-dropdown><span>{{serviceTypeSelected.name}}</span> <i class="anticon anticon-down"></i>
</button>
- <ul nz-menu style="min-height:40px;max-height: 200px; overflow: auto;">
+ <ul nz-menu>
<li nz-menu-item (click)="choseServiceType(item)" *ngFor="let item of serviceTypeList">
- <a title="{{item.name}}"
- style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a>
+ <a title="{{item.name}}">{{item.name}}</a>
</li>
</ul>
</nz-dropdown>
- <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"><i class="anticon anticon-plus"
- style="transform: scale(1.5);line-height: 15px;margin-right: 5px;"></i><span>
- {{"i18nTextDefine_Create" | translate}} </span>
+ <button class="create" nz-button [nzType]="'primary'" (click)="createModal()">
+ <i *ngIf="width>1200" class="anticon anticon-plus"></i>
+ <span> {{"i18nTextDefine_Create" | translate}} </span>
</button>
<nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle=" {{'i18nTextDefine_ServiceCreation' | translate}} "
- (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" nzClassName="serviceCreationModel"
- nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+ (nzOnCancel)="handleCancel()"
+ (nzOnOk)="handleOk()" nzClassName="serviceCreationModel"
+ nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
+ nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
<div class="select-list">
<span style="display:inline-block;"> {{"i18nTextDefine_Customer" | translate}} : </span>
<nz-select style="width: 176px;float: right;" [(ngModel)]="customerSelected2.name" nzAllowClear
@@ -118,8 +126,8 @@
<span>{{item.InProgress}}</span>
<span> {{"i18nTextDefine_InProgress" | translate}} </span>
</p>
+ <p class="service-description"> {{item.detailName | translate}} </p>
</div>
- <p class="service-description"> {{item.detailName | translate}} </p>
</li>
</ul>
<div class="list" id="services-list" [ngClass]="{'listdisplay':listDisplay == true}">
diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.less b/usecaseui-portal/src/app/views/services/services-list/services-list.component.less
index 392d1b3a..aeddf257 100644
--- a/usecaseui-portal/src/app/views/services/services-list/services-list.component.less
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.less
@@ -13,6 +13,52 @@
See the License for the specific language governing permissions and
limitations under the License.
*/
+@media screen and (min-width: 1050px){
+ .action{
+ span:nth-of-type(2){
+ margin-left: 40px;
+ }
+ }
+
+}
+@media screen and (max-width: 1050px){
+ .action{
+ span:nth-of-type(2){
+ margin-left: 20px;
+ }
+ }
+
+}
+@media screen and (max-width: 1300px){
+ .top-list-text{
+ p{
+ width: 200px;
+ }
+ }
+}
+@media screen and (min-width: 1200px){
+ .round{
+ top:45%;
+ left: 50px;
+ margin-top: -40px;
+ }
+
+}
+
+@media screen and (max-width: 1200px){
+ .round{
+ top:12%;
+ left: 12%;
+ }
+ .top-list-text{
+ p{
+ width: 170px;
+ }
+ }
+
+}
+
+
.title {
font: 700 18px/18px "思源黑体";
color: #4c5e70;
@@ -27,6 +73,18 @@ hr {
.ant-tabs-bar{
margin-bottom: 0!important;
}
+.ant-dropdown-menu{
+ min-height:40px;
+ max-height: 200px;
+ overflow: auto;
+}
+.ant-dropdown-menu-item{
+ a{
+ max-width: 165px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+}
.mask{
width: 100%;
height: 100%;
@@ -77,15 +135,20 @@ hr {
font: 700 14px "Arial";
color: #3C4F8C;
margin-right: 5px;
+ .icon{
+ margin-right: 10px;
+ }
}
nz-dropdown {
+ width: 20%;
vertical-align: middle;
background-color:#ffffff;
:hover{
border-color: #48C6EF;
}
button {
- width: 165px;
+ width: 100%;
+ max-width:165px;
height: 42px;
background-color:#ffffff;
text-align: left;
@@ -111,11 +174,15 @@ hr {
position: absolute;
right: 3%;
top:50%;
- width:116px;
height:42px;
background:#0DA9E2;
border-radius:6px;
margin-top: -15px;
+ i{
+ transform: scale(1.5);
+ line-height: 15px;
+ margin-right: 5px;
+ }
span {
color: #fff;
font-weight: 400;
@@ -133,90 +200,76 @@ hr {
}
}
-.top-num{
- overflow: auto;
- width: 100%;
-}
-.top-list{
- position: relative;
- width:29%;
- height:170px;
- margin: 10px 1%;
- float: left;
- background:url("../../../../assets/images/servicelist-e2e.png") no-repeat;
- background-size: 100% 100%;
- border-radius:2px;
-}
-.top-num .top-list:nth-child(2){
- background:url("../../../../assets/images/servicelist-e2e.png") no-repeat;
- background-size: 100% 100%;
-}
-.top-num .top-list:nth-child(3){
- background:url("../../../../assets/images/servicelist-e2e.png") no-repeat;
- background-size: 100% 100%;
-}
-.top-num .top-list:nth-child(4){
- background:url("../../../../assets/images/servicelist-sotn.png") no-repeat;
- background-size: 100% 100%;
-}
-.top-list .round{
- position: absolute;
- width: 60px;
- height: 60px;
- line-height: 60px;
- text-align: center;
- top:45%;
- left: 50px;
- margin-top: -30px;
- background:#E0EDFF;
- border:2px solid rgba(224,237,255,1);
- border-radius: 50%;
- font-size:16px;
- font-family:ArialMT;
- color:#3C4F8C;
-}
-.top-list {
- .top-list-text {
- position: absolute;
- text-align: right;
- height: 40px;
- line-height: 20px;
- right: 50px;
- color: #fff;
- p {
- font-size: 14px;
- width: 250px;
- margin: 15px 0 0 0;
- height: 13px;
- clear: both;
- span {
- display: inline-block;
- font-weight: 500;
- text-align: right;
- float: right;
- }
- span:nth-child(1) {
- font-size: 18px;
- width: 40px;
- min-width: 40px;
+nz-layout{
+ padding: 20px 32px;
+ .top-num{
+
+ width: 100%;
+ display: flex;
+ justify-content: space-around;
+ .top-list{
+ position: relative;
+ width:32%;
+ max-width:400px;
+ height:170px;
+ background:url("/assets/images/servicelist-e2e.png") no-repeat;
+ background-size: 100% 100%;
+ border-radius:2px;
+ .round{
+ position: absolute;
+ width: 60px;
+ height: 60px;
+ line-height: 60px;
+ text-align: center;
+ background:#E0EDFF;
+ border:2px solid rgba(224,237,255,1);
+ border-radius: 50%;
+ font-size:16px;
+ font-family:ArialMT;
+ color:#3C4F8C;
+ transition: .5s;
}
- span:nth-child(2) {
- width: 85px;
- font-size: 16px;
+ .top-list-text{
+ position: absolute;
+ text-align: right;
+ line-height: 20px;
+ right: 12%;
+ color: #fff;
+ p{
+ height: 28px;
+ margin-bottom: 0;
+ padding-left: 5px;
+ font-size: 14px;
+ clear: both;
+ span{
+ display: inline-block;
+ float: right;
+ font-weight: 500;
+ text-align: right;
+ }
+ span:nth-child(1){
+ font-size: 18px;
+ margin-left: 15px;
+ }
+ span:nth-child(2){
+ width: 85px;
+ font-size: 16px;
+ }
+ }
+ p:nth-child(1){
+ margin-top: 25px;
+ }
+ .service-description{
+
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: #3C4F8C;
+
+ }
}
}
- p:nth-child(1) {
- margin-top: 25px;
- }
- }
- .service-description{
- font-size: 14px;
- width: 250px;
- height: 13px;
- position: absolute;
- bottom: 30px;
- left: 50px;
- color: #3C4F8C;
+
}
}
.list {
@@ -290,10 +343,10 @@ hr {
.anticon{
width: 18px;
height: 18px;
- background: url("../../../../assets/images/scale.png") no-repeat;
+ background: url("/assets/images/scale.png") no-repeat;
}
.anticon.anticon-update{
- background: url("../../../../assets/images/update.png") no-repeat;
+ background: url("/assets/images/update.png") no-repeat;
}
span{
margin-left: 5px;
@@ -302,10 +355,10 @@ hr {
li:hover{
color: #0DA9E2;
.anticon{
- background: url("../../../../assets/images/scale-active.png") no-repeat;
+ background: url("/assets/images/scale-active.png") no-repeat;
}
.anticon.anticon-update{
- background: url("../../../../assets/images/update-active.png") no-repeat;
+ background: url("/assets/images/update-active.png") no-repeat;
}
}
}
diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts
index fb78aff5..d4f5c2b5 100644
--- a/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts
@@ -18,6 +18,7 @@ import { MyhttpService } from '../../../core/services/myhttp.service';
import { slideToRight } from '../../../shared/utils/animates';
import { NzModalService } from 'ng-zorro-antd';
import { NzNotificationService } from 'ng-zorro-antd';
+import { Observable } from 'rxjs/Rx';
@Component({
selector: 'app-services-list',
@@ -28,11 +29,17 @@ import { NzNotificationService } from 'ng-zorro-antd';
export class ServicesListComponent implements OnInit {
@HostBinding('@routerAnimate') routerAnimateState;
+ public width:number = document.documentElement.clientWidth;
+
constructor(private myhttp: MyhttpService, private modalService: NzModalService, private notification: NzNotificationService) {
}
ngOnInit() {
this.getallCustomers();
+
+ Observable.fromEvent(window, 'resize').subscribe((event) => {
+ this.width = document.documentElement.clientWidth
+ });
}
// customer servicetype