From dfbccd66192c8f9f0661098722756cf314adf587 Mon Sep 17 00:00:00 2001
From: SHAOJIAHAO <55341701@qq.com>
Date: Fri, 26 Nov 2021 17:29:01 +0800
Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E6=A0=B9=E6=8D=AE=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E5=9B=BE=E4=BF=AE=E6=94=B9=E5=8D=B8=E6=B2=B9=E5=85=A8?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../oil-unloading-process.component.html      |  29 +++--
 .../oil-unloading-process.component.scss      |  99 +++++++++++++++---
 src/assets/images/left3.png                   | Bin 0 -> 1482 bytes
 3 files changed, 100 insertions(+), 28 deletions(-)
 create mode 100644 src/assets/images/left3.png

diff --git a/src/app/pages/oil-unloading-process/oil-unloading-process.component.html b/src/app/pages/oil-unloading-process/oil-unloading-process.component.html
index 43f1d3a..fa9eb0d 100644
--- a/src/app/pages/oil-unloading-process/oil-unloading-process.component.html
+++ b/src/app/pages/oil-unloading-process/oil-unloading-process.component.html
@@ -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">
diff --git a/src/app/pages/oil-unloading-process/oil-unloading-process.component.scss b/src/app/pages/oil-unloading-process/oil-unloading-process.component.scss
index 42402a5..bfa4b73 100644
--- a/src/app/pages/oil-unloading-process/oil-unloading-process.component.scss
+++ b/src/app/pages/oil-unloading-process/oil-unloading-process.component.scss
@@ -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;
+  }
 }
 
 
diff --git a/src/assets/images/left3.png b/src/assets/images/left3.png
new file mode 100644
index 0000000000000000000000000000000000000000..94bc6794a417f4a683660db60d21f2864fccc710
GIT binary patch
literal 1482
zcmV;*1vUDKP)<h;3K|Lk000e1NJLTq001Ze001Tk1^@s6w)EK@000G%Nkl<ZSV!fU
zTWB0r7{`C-GPAR@*(ALrsitU&QL*Za#S6X|jN%P#rEU>K5Z^=ug?dA=ST8T4;^oB~
zA_xjmC_eN}h`y=hQGF4$qGFQP=F**=ojG%k%wCeU#&p|QSa9LMvh11t?f?IM-}%lb
z=<%26aX$V}fNqUHE8IpMI&%fxT0p13Y5dyhL7yg|6SOsX7QulQ&=i8o8gNrUrM2T(
z;K0gm5Z!@x57<_06--P_BbLj}IIb1{8PCO?IA)-{jGLaou?oCu{V71Z0PIkW285UZ
zG4~xZ@exKhmsN;t9x(#U0%`~+Gn_Wf<tMme4cCC3$F-Dgg05rzDF9n=xoSHR6GMo(
z;U-udAUAu+`T{cbkX9n{)izpMT)w;%t1{d|4eM{gh7mRgo!Ny29G%v$q2|8>t|ozC
z3bAVpncKLuh}t}cjFwS}j|yT`nxL#g1|5KL4wzv*pDZ$1zeW}m$(H)bf*3onh@Dx+
zF@aryTtmtA0h{qAcFiCc2awSss@#XFC1}5h_B?cA(AuC)hH?Ty0jPuYutt-qjLc6k
zsfS5?jGvH2C5&IkZrMRLGu?vB)oj@P_vBd{Fjuc_YX$M^52&bw3abqmFSd9ReCgv!
zi)SpJQVl@q3_@s}a9ArbT9R5rY9(n_Ck-TNQpHp~Oz}^$EoHJ5yVrnR18^lN1k=c!
z!^oxnhLv6pS9AD6P$&or2^8}8BL7UGU547fm7Dq$=RPyfJ4%o`LE=)9Tvu11Zex;S
zKZ&W4=1PWDvhCw!)6IBvjZ)O1;y(e~u{VXx<L=lNR2ZR`z}F!@F@Y}$tfc4!MIdk)
zfpmDUkMhu{X7Z<$&-TyqE;PY_*d)XSMXm0r6A+g)iK&uSOPKy8vhU`wjd;vKy8z5<
zoXj(Jp@t4N;fWIzoF;IJqEdv`Qj(I;S;A`rc04-F{!NNeC19q;;YWVwBNTNEv6V#9
z5=lv9EHx~#C=h4MBsED|4lzHBlQGpOKXx6!ReL8u{ydEihnwn^6hWpaW*H@=C}Ai&
zkJ1yH*>in~%7CKiwMtqpL*n4A1zx_T#BKrO`+i~asbM~U;SVmCx&a&uM?DXLdVw@g
zm@%+Z%{W|9@g$2|fGvAx6Ljf9wEL4n4yPrdvGfT?`69`=4-WD0#RabHmk>(O`O_Q?
zpA7KIJa69F&n=$hg4>U9>vO{#e&#4wSV>hlYGR3)GW9qh&27GPC)xUdt@x`<A%CnO
zXMaTpA)Y(lj5$@K4?(#y$hB97JhshaWLU$$0lqZP+j|GN!556(@iTi4j&SJdIj&NI
z6GjtJB^DuZTqGSl2Qxg4ojxfJ|E^#M;J25e+VSTi0_zcKP3gWekNb*!TP6Oeh7k>$
z6qNG1BbujH+u~P`@!sw-lb&El<p_J99^uo2N4Z7|PH0Uvj))0~lLE<q26%5DPezW)
zpu!vVU_`-I4TCDLIglrbaZtDL?gH=M*vDjMIq!kr*!$2{K7H-@e+0Om#di#FUBBiD
zEg0OUVMxJd4W$minu9}2ynl6(8<#EHUz}slz5xz>ytEOE={`xuVf)ns9LOx=L%OMA
zp9D`p>L9Z4O~iZSKDW&pwtcwBtrH~<e^J{=lC%MvEmc=#=I%c3M{sihx~!Ujxy4lr
zbB4DEC3hY%41IZm$x8x0|32DKnaRsUqm@6cLVZ=hMPmU^RW1Dr7?gbd!ExR=3x#?G
z5YFJJyK9i=e@wXS0-vv@mU-dq9CaNwpGmWD*8uleIRBGn4xXK6A@9k0yWMIv?QO`O
zY*^bWHd%YL<!`X{@}+6z9^TW}&W>q8?_S(HM;g66`Z#&?(woDh^`=+7Hh$aa;IGU5
kT?~)9e9~F^TF(Ri1=?)wRET~5?f?J)07*qoM6N<$g5DFrQ2+n{

literal 0
HcmV?d00001