summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2019-08-21 18:28:53 +0800
committercyuamber <xuranyjy@chinamobile.com>2019-08-22 09:41:56 +0800
commit56923755c761897cc86ca2457667fcc3e6a0e43f (patch)
tree0960d4586e3631b41760a4d40b1bc4fdcd48873d
parent0568ef38b7c3b90ceaea6f2ae43309132a322b1e (diff)
style:services-list page style optimization
Change-Id: Ic5f3078b03a2b1dee4d5c0458815c716a1945c86 Issue-ID: USECASEUI-307 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.html27
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.less219
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.ts63
3 files changed, 163 insertions, 146 deletions
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html
index 127d9ad9..d47b342c 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.html
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.html
@@ -15,30 +15,41 @@
-->
<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()"
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.less b/usecaseui-portal/src/app/services/services-list/services-list.component.less
index fcb70b82..2a19e5bb 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.less
+++ b/usecaseui-portal/src/app/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 {
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
index 3c22b7d8..3a07c1fe 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.ts
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
@@ -18,6 +18,7 @@ import { MyhttpService } from '../../myhttp.service';
import { slideToRight } from '../../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,16 @@ 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
@@ -1273,19 +1279,6 @@ export class ServicesListComponent implements OnInit {
queryProgress(obj, callback) {
let mypromise = new Promise((res, rej) => {
- // let data = {
- // operationStatus:{
- // "operationId": "XXXXXX",
- // "operation": "create|delete|update|scale",
- // "result": "finished|error|processing",
- // "reason": "",
- // "userId": "",
- // "operationContent": "Be creating pop.",
- // "progress": 0,
- // "operateAt": "",
- // "finishedAt": ""
- // }
- // }
let errorNums = 180;
let requery = () => {
this.myhttp.getProgress(obj)
@@ -1319,17 +1312,6 @@ export class ServicesListComponent implements OnInit {
res(data.operationStatus);
}
})
- // setTimeout(()=>{
- // console.log(data.operationStatus.progress)
- // data.operationStatus.progress++;
- // if(data.operationStatus.progress<100){
- // callback(data.operationStatus);
- // requery()
- // }else{
- // callback(data.operationStatus);
- // res(data.operationStatus)
- // }
- // },100)
}
requery();
})
@@ -1338,25 +1320,7 @@ export class ServicesListComponent implements OnInit {
queryNsProgress(jobid, id, callback, operationType) {
let mypromise = new Promise((res, rej) => {
- // let data = {
- // "jobId": "string",
- // "responseDescriptor": {
- // "status": "string",
- // "progress": 0,
- // "statusDescription": "string",
- // "errorCode": "string",
- // "responseId": "string",
- // "responseHistoryList": [
- // {
- // "status": "string",
- // "progress": "string",
- // "statusDescription": "string",
- // "errorCode": "string",
- // "responseId": "string"
- // }
- // ]
- // }
- // }
+
let errorNums = 180;
let requery = () => {
this.myhttp.getNsProgress(jobid, id, operationType)
@@ -1366,7 +1330,6 @@ export class ServicesListComponent implements OnInit {
return false;
}
if (data.responseDescriptor == null || data.responseDescriptor.progress == undefined) {
- // console.log(data);
errorNums--;
if (errorNums == 0) {
callback({ progress: 255, status: "time over" });
@@ -1390,17 +1353,7 @@ export class ServicesListComponent implements OnInit {
res(data);
}
})
- // setTimeout(()=>{
- // console.log(data.responseDescriptor.progress)
- // data.responseDescriptor.progress++;
- // if(data.responseDescriptor.progress<100){
- // callback(data.responseDescriptor);
- // requery()
- // }else{
- // callback(data);
- // res(data)
- // }
- // },100)
+
};
requery();
});