shaojiahao
/
Sinopec-Anxin
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

样式完善

dev
陈鹏飞 3 years ago
parent
7ca1973a3c
commit
52a6a1e655
5 changed files with 39 additions and 42 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 24
      src/app/pages/left-domain/left-domain.component.html
  2. 11
      src/app/pages/left-domain/left-domain.component.scss
  3. 22
      src/app/pages/plan/plan.component.html
  4. 16
      src/app/pages/plan/plan.component.scss
  5. 8
      src/app/pages/plan/plan.component.ts

24
src/app/pages/left-domain/left-domain.component.html
Unescape View File

@ -47,11 +47,7 @@
<!-- 基本信息 -->
<!-- 加油机 -->
<div class="publicBox refueller" *ngIf="beforeFence === 1">
<div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility($event, item)">
<!-- 选中样式 -->
<div class="positionLeftTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionLeftBottom" *ngIf="selectFacilityId === item.getID()"></div>
<div class="positionRightTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionRightBottom" *ngIf="selectFacilityId === item.getID()"></div>
<!-- 选中样式 -->
<div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility($event, item)" [ngClass]="{'selectFacility': selectFacilityId === item.getID()}">
<p class="title"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().name"></p>
<div class="table">
<div class="tableHeader">
@ -77,11 +73,7 @@
<!-- 加油机 -->
<!-- 油罐设备 -->
<div class="publicBox refueller" *ngIf="beforeFence === 2">
<div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility($event, item)">
<!-- 选中样式 -->
<div class="positionLeftTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionLeftBottom" *ngIf="selectFacilityId === item.getID()"></div>
<div class="positionRightTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionRightBottom" *ngIf="selectFacilityId === item.getID()"></div>
<!-- 选中样式 -->
<div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility($event, item)" [ngClass]="{'selectFacility': selectFacilityId === item.getID()}">
<p class="title"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().name"></p>
<div class="table">
<div class="tableHeader">
@ -119,11 +111,7 @@
<!-- 消防设施 -->
<!-- 输油管线 -->
<div class="publicBox refueller" *ngIf="beforeFence === 5">
<div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility($event, item)">
<!-- 选中样式 -->
<div class="positionLeftTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionLeftBottom" *ngIf="selectFacilityId === item.getID()"></div>
<div class="positionRightTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionRightBottom" *ngIf="selectFacilityId === item.getID()"></div>
<!-- 选中样式 -->
<div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility($event, item)" [ngClass]="{'selectFacility': selectFacilityId === item.getID()}">
<p class="title"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().name"></p>
<div class="table">
<div class="tableHeader" style="flex: 50%;">
@ -149,11 +137,7 @@
<!-- 输油管线 -->
<!-- 油气回收 -->
<div class="publicBox refueller" *ngIf="beforeFence === 6">
<div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility($event, item)">
<!-- 选中样式 -->
<div class="positionLeftTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionLeftBottom" *ngIf="selectFacilityId === item.getID()"></div>
<div class="positionRightTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionRightBottom" *ngIf="selectFacilityId === item.getID()"></div>
<!-- 选中样式 -->
<div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility($event, item)" [ngClass]="{'selectFacility': selectFacilityId === item.getID()}">
<p class="title"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().name"></p>
<div class="table">
<div class="tableHeader" style="flex: 55%;">

11
src/app/pages/left-domain/left-domain.component.scss
Unescape View File

@ -33,7 +33,7 @@
}
}
.publicBox{ width: 100%; height: 100%; overflow-y: auto; padding: 0 20px; }
.publicBox{ width: 100%; height: 100%; overflow-y: auto; padding: 0 10px; }
.title{ font-size: 16px; height: 20px; line-height: 20px; margin-bottom: 20px; .anticon{ margin-left: 5px; font-size: 16px; } } //头部header
.tableInput{ border: none; outline: none; background-color: transparent; width: 100%; height: 100%; }
.tableSelect{ width: 100%; height: 100%; color: #fff; }
@ -43,9 +43,14 @@
img{ width: 120px; height: auto; max-height: 100px; display: block; margin-bottom: 10px; }
.uploadImgBox{ margin: 0; width: 50px; height: 50px; line-height: 50px; text-align: center; }
}
//选中弹窗样式
.selectFacility{
border: 1px solid rgba(114, 183, 255, 0.47843137254901963);
background: linear-gradient(180deg, rgba(35, 153, 255, 0.56) 0%, rgba(0, 13, 33, 0) 100%);
}
.baseInfo{ //基本信息
.interval{ margin-top: 10px; border-bottom: 1px solid rgb(107, 117, 122); } //分隔div
.interval{ margin-top: 10px; border-bottom: 1px solid rgb(107, 117, 122); padding: 0 10px; } //分隔div
.baseInfoImg{ border: none; }
p{ height: 20px; line-height: 20px; }
.titleBotton{ background: #2399FF; border-radius: 3px; height: 20px; line-height: 20px; font-size: 12px; margin-left: 5px; padding: 0 5px; border: none; outline: none; }
@ -54,7 +59,7 @@
.textImage{ margin-bottom: 15px; height: auto; line-height: normal; img{ width: auto; height: 130px; } }
}
.refueller{ //加油机
.interval{ margin-top: 10px; position: relative; cursor: pointer; } //分隔div
.interval{ margin-top: 10px; position: relative; cursor: pointer; padding: 10px; box-sizing: content-box; } //分隔div
.positionLeftTop { position: absolute; width: 10px; height: 10px; left: -5px; top: -5px; border-left: 1px solid #fff; border-top: 1px solid #fff; } //左上角
.positionLeftBottom { position: absolute; width: 10px; height: 10px; left: -5px; bottom: -5px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; } //左下角
.positionRightTop { position: absolute; width: 10px; height: 10px; right: -5px; top: -5px; border-right: 1px solid #fff; border-top: 1px solid #fff; } //右上角

22
src/app/pages/plan/plan.component.html
Unescape View File

@ -78,8 +78,9 @@
</div>
</div>
<div class="nature natureLook" *ngIf="isShowNature && (selectFence === 1 || selectFence === 2) && beforeOnePropertyData" [ngStyle]="{'top': naturePosition.top,'left': naturePosition.left}">
<div *ngIf="selectFence === 1">
<div class="natureTitle">{{beforeOnePropertyData.getPropertyData().name}}</div>
<div *ngIf="selectFence === 1" class="naturePosition">
<div class="positionLeftTop"></div><div class="positionLeftBottom"></div><div class="positionRightTop"></div><div class="positionRightBottom"></div>
<div class="natureTitle"><input type="text" [(ngModel)]="beforeOnePropertyData.getPropertyData().name" [disabled]="!editMode"></div>
<div class="flowPower">
<div>
<img src="../../../assets/images/flow.png">
@ -90,15 +91,16 @@
<label><p>功率</p><p><input type="text" [(ngModel)]="beforeOnePropertyData.getPropertyData().power" [disabled]="!editMode"></p></label>
</div>
</div>
<div class="everyNature"><span>品牌 :</span><label>{{beforeOnePropertyData.getPropertyData().brand}}</label></div>
<div class="everyNature"><span>油枪数量 :</span><label>{{beforeOnePropertyData.getPropertyData().oilGunNum}}</label></div>
<div class="everyNature"><span>油品品号 :</span><label>{{beforeOnePropertyData.getPropertyData().oilProductNo}}</label></div>
<div class="everyNature"><span>品牌 :</span><label><input type="text" [(ngModel)]="beforeOnePropertyData.getPropertyData().brand" [disabled]="!editMode"></label></div>
<div class="everyNature"><span>油枪数量 :</span><label><input type="text" [(ngModel)]="beforeOnePropertyData.getPropertyData().oilGunNum" [disabled]="!editMode"></label></div>
<div class="everyNature"><span>油品品号 :</span><label><input type="text" [(ngModel)]="beforeOnePropertyData.getPropertyData().oilProductNo" [disabled]="!editMode"></label></div>
</div>
<div *ngIf="selectFence === 2">
<div class="natureTitle">{{beforeOnePropertyData.getPropertyData().name}}</div>
<div class="everyNature"><span>油品品号 :</span><label>{{beforeOnePropertyData.getPropertyData().oilProductNo}}</label></div>
<div class="everyNature"><span>油罐容积 :</span><label>{{beforeOnePropertyData.getPropertyData().oilTankVolume}}</label></div>
<div class="everyNature"><span>安全容积 :</span><label>{{beforeOnePropertyData.getPropertyData().safeVolume}}</label></div>
<div *ngIf="selectFence === 2" class="naturePosition">
<div class="positionLeftTop"></div><div class="positionLeftBottom"></div><div class="positionRightTop"></div><div class="positionRightBottom"></div>
<div class="natureTitle"><input type="text" [(ngModel)]="beforeOnePropertyData.getPropertyData().name" [disabled]="!editMode"></div>
<div class="everyNature"><span>油品品号 :</span><label><input type="text" [(ngModel)]="beforeOnePropertyData.getPropertyData().oilProductNo" [disabled]="!editMode"></label></div>
<div class="everyNature"><span>油罐容积 :</span><label><input type="text" [(ngModel)]="beforeOnePropertyData.getPropertyData().oilTankVolume" [disabled]="!editMode"></label></div>
<div class="everyNature"><span>安全容积 :</span><label><input type="text" [(ngModel)]="beforeOnePropertyData.getPropertyData().safeVolume" [disabled]="!editMode"></label></div>
</div>
</div>
<!-- 右侧属性栏 -->

16
src/app/pages/plan/plan.component.scss
Unescape View File

@ -187,6 +187,7 @@
right: 1%;
color: #C4E2FC;
font-size: 14px;
border: 1px solid rgba(54, 162, 255, 0.47843137254901963);
background: linear-gradient(360deg, #000D21 0%, rgba(0, 59, 110, 0.8) 100%);
.natureHeader{ text-align: right; height: 10px; .anticon{ font-size: 18px; margin: 5px 5px 0 0; } }
.natureContent{
@ -201,8 +202,16 @@
}
}
.natureLook{
padding: 20px;
color: #fff;
.naturePosition{
padding: 20px;
position: relative;
.positionLeftTop { position: absolute; width: 10px; height: 10px; left: -1px; top: -1px; border-left: 2px solid #2399FF; border-top: 2px solid #2399FF; } //左上角
.positionLeftBottom { position: absolute; width: 10px; height: 10px; left: -1px; bottom: -1px; border-left: 2px solid #2399FF; border-bottom: 2px solid #2399FF; } //左下角
.positionRightTop { position: absolute; width: 10px; height: 10px; right: -1px; top: -1px; border-right: 2px solid #2399FF; border-top: 2px solid #2399FF; } //右上角
.positionRightBottom { position: absolute; width: 10px; height: 10px; right: -1px; bottom: -1px; border-right: 2px solid #2399FF; border-bottom: 2px solid #2399FF; } //右下角
}
input{ border: none; outline: none; background-color: transparent; width: 100%; height: 100%; }
.flowPower{
width: 200px;
height: 50px;
@ -213,12 +222,13 @@
img { width: 40%; height: auto; vertical-align: top; }
label { display: inline-block; width: 60%; height: 100%; overflow: hidden; }
p{ width: 100%; height: 25px; line-height: 25px; margin: 0; }
input{ border: none; outline: none; background-color: transparent; width: 100%; height: 100%; }
}
.everyNature{
margin-bottom: 8px;
font-size: 12px;
span{ margin-right: 10px; }
display: flex;
label{ display: block; flex: 1; }
span{ display: block; width: 60px; height: 100%; }
}
}

8
src/app/pages/plan/plan.component.ts
Unescape View File

@ -418,12 +418,8 @@ export class PlanComponent implements OnInit {
//刷新设备属性 弹窗位置
renovateDialogPosition() {
// window.setTimeout(() => {
this.naturePosition.left = `${this.beforeOnePropertyData.getHeadUIPos().x - 150}px`
this.naturePosition.top = `${this.beforeOnePropertyData.getHeadUIPos().y + 100}px`
// }, 0)
this.naturePosition.left = `${this.beforeOnePropertyData.getHeadUIPos().x - 75}px`
this.naturePosition.top = `${this.beforeOnePropertyData.getHeadUIPos().y - 150}px`
}
//上传设备 图片

Write Preview
Loading…
Cancel
Save