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

[完善]根据设计图修改卸油全流程

dev
邵佳豪 3 years ago
parent
5dc9e3dee6
commit
dfbccd6619
3 changed files with 100 additions and 28 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. 29
      src/app/pages/oil-unloading-process/oil-unloading-process.component.html
  2. 99
      src/app/pages/oil-unloading-process/oil-unloading-process.component.scss
  3. BIN
      src/assets/images/left3.png

29
src/app/pages/oil-unloading-process/oil-unloading-process.component.html
Unescape View File

@ -10,7 +10,7 @@
<div class="content">
<div class="oilbox">
<div class="leftbox">
<div class="lefttop">
<div class="lefttop" >
<div class="title">
事前准备
</div>
@ -65,7 +65,7 @@
</div>
</div>
<img style="height: 42px;" src="../../../../assets/images/down.png" alt="">
<!-- <img style="height: 42px;" src="../../../../assets/images/down.png" alt=""> -->
<div class="leftbottom">
<div class="title">
事中操作
@ -79,7 +79,7 @@
</div>
<span class="name">卸油车取样</span>
</div>
<div class="imgbox" style="margin-top: 12px;">
<div class="imgbox">
<div class="img">
<img src="../../../../assets/images/bgImg.png" alt="">
</div>
@ -90,29 +90,29 @@
</div>
</div>
<img style="height: 42px;" src="../../../../assets/images/right3.png" alt="">
<img style="height: 42px;" src="../../../../assets/images/down.png" alt="">
<div class="imgbox">
<div class="img">
<img src="../../../../assets/images/bgImg.png" alt="">
</div>
<span class="name">1.第三方确认检查</span>
</div>
<img style="height: 42px;" src="../../../../assets/images/right3.png" alt="">
<img style="height: 42px;" src="../../../../assets/images/down.png" alt="">
<div class="imgbox">
<div class="img">
<img src="../../../../assets/images/bgImg.png" alt="">
</div>
<span class="name">2.拆除卸油管</span>
</div>
<img style="height: 42px;" src="../../../../assets/images/right3.png" alt="">
<img style="height: 42px;" src="../../../../assets/images/down.png" alt="">
<div class="imgbox">
<div class="img">
<img src="../../../../assets/images/bgImg.png" alt="">
</div>
<span class="name">3.作业现场清理</span>
</div>
<img style="height: 42px;" src="../../../../assets/images/right3.png" alt="">
<div class="imgbox">
<img class="goout1" style="height: 42px;" src="../../../../assets/images/right3.png" alt="">
<div class="imgbox goout2">
<div class="img">
<img src="../../../../assets/images/bgImg.png" alt="">
</div>
@ -130,7 +130,7 @@
<span class="name">车辆进场</span>
</div>
</div>
<img style="height: 42px;" src="../../../../assets/images/down.png" alt="">
<img style="height: 42px;margin: 18px 0;" src="../../../../assets/images/down.png" alt="">
<div class="rightbottom">
<div class="title" style="text-align: center;">
卸油过程全程监测
@ -165,9 +165,16 @@
</div>
</div>
</div>
<div class="topline">
</div>
<img class="toplinearrows" style="height: 42px;" src="../../../../assets/images/down.png" alt="">
<div class="bottomline">
</div>
<img class="bottomlinearrows" style="height: 42px;" src="../../../../assets/images/left3.png" alt="">
</div>
<img class="longleft1" src="../../../../assets/images/longleft.png" style="width: 82px;" alt="">
<img class="longleft2" src="../../../../assets/images/longleft.png" alt="">
</div>
<div id="viewerjs" style="display:none">

99
src/app/pages/oil-unloading-process/oil-unloading-process.component.scss
Unescape View File

@ -1,11 +1,17 @@
.box {
width: 100%;
height: 700px;
// height: 700px;
color: #fff;
display: flex;
flex-direction: column;
background-image: linear-gradient(#003B6E, #000D21);
position: relative;
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.titlebox {
@ -61,7 +67,10 @@
flex: 1;
box-sizing: border-box;
padding: 18px;
overflow: hidden;
max-height: 700px;
overflow-y: auto;
position: relative;
.oilbox {
display: flex;
width: 100%;
@ -92,12 +101,15 @@
.lefttop,
.leftbottom {
width: 840px;
height: 280px;
border: 1px solid rgba(54, 162, 255, 0.47);
display: flex;
flex-direction: column;
.title {
height: 100%;
width: 26px;
text-align: center;
padding: 0;
}
.content {
flex: 1;
@ -106,6 +118,7 @@
}
.lefttop {
margin-bottom: 16px;
.content {
display: flex;
@ -147,30 +160,49 @@
.leftbottom {
.content {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
.colimglist {
display: flex;
flex-direction: column;
align-items: center;
.colimglist1 {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
justify-content: center;
.img {
margin: 0 50px;
}
}
.colline {
height: 120px;
width: 6px;
height: 6px;
width: 200px;
border-right: 1px solid #91CCFF;
border-top: 1px solid #91CCFF;
border-left: 1px solid #91CCFF;
border-bottom: 1px solid #91CCFF;
margin-left: 8px;
}
}
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
.goout1 {
position: absolute;
bottom: 52px;
right: 280px;
}
.goout2 {
position: absolute;
bottom: 18px;
right: 160px;
}
}
}
@ -180,12 +212,11 @@
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
.rightbottom {
width: 160px;
height: 490px;
height: 538px;
display: flex;
flex-direction: column;
border: 1px solid rgba(54, 162, 255, 0.47);
@ -196,8 +227,13 @@
background: #001d3c;
display: flex;
flex-direction: column;
justify-content: center;
justify-content: space-around;
// align-items:;
.imgbox{
.name{
margin-bottom: 3px;
}
}
}
}
}
@ -259,6 +295,35 @@
}
}
.topline{
position: absolute;
top: 18px;
right: 136px;
width: 576px;
height:16px;
border-top: 1px solid #91CCFF;
border-right: 1px solid #91CCFF;
}
.toplinearrows{
position: absolute;
top: 5px;
right: 690px;
}
.bottomlinearrows{
position: absolute;
bottom: -88px;
right: 428px;
}
.bottomline{
position: absolute;
bottom: -68px;
right: 136px;
width: 300px;
height: 17px;
border-bottom: 1px solid #91CCFF;
border-right: 1px solid #91CCFF;
}
}

BIN
src/assets/images/left3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

Write Preview
Loading…
Cancel
Save