diff options
Diffstat (limited to 'usecaseui-portal/src/app/views')
3 files changed, 171 insertions, 103 deletions
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 |