加油机UI完善

src/app/pages/left-domain/left-domain.component.html

@@ -2,7 +2,7 @@
 
   <div class="childCenter">
     <!-- 基本信息 -->
-    <div class="baseInfo" *ngIf="beforeFence === 0">
+    <div class="publicBox baseInfo" *ngIf="beforeFence === 0">
       <div class="interval">
         <p class="title">北京市第十九加油站<button class="titleBotton">自营</button></p>
         <p class="text"><img src="../../../assets/images/baseInfo/position.png" class="textIcon">北京市朝阳区朝外大街关东店33号</p>
@@ -16,6 +16,29 @@
       </div>
     </div>
     <!-- 基本信息 -->
+    <!-- 加油机 -->
+    <div class="publicBox refueller" *ngIf="beforeFence === 1">
+      <div class="interval">
+        <p class="title">一类加油机</p>
+        <div class="table">
+          <div class="tableHeader">
+            <p>品牌</p>
+            <p>超大牌</p>
+            <p>油枪数量</p>
+            <p>油品品号</p>
+            <p>油泵类型</p>
+          </div>
+          <div class="tableContent">
+            <p>超大牌</p>
+            <p>2</p>
+            <p>4</p>
+            <p>92#</p>
+            <p>自吸泵</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 加油机 -->
   </div>
 
   <div class="childBottom" *ngIf="beforeFence === 0">

src/app/pages/left-domain/left-domain.component.scss

@@ -33,16 +33,34 @@
   }
 }
 
-.interval{ margin-top: 10px; border-bottom: 1px solid rgb(197, 226, 245); }
-.baseInfo{
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-  padding: 0 10px;
-  p{ height: 20px; line-height: 20px; padding-left: 10px; }
-  .title{ font-size: 16px; margin-bottom: 20px; }
+.title{ font-size: 16px; height: 20px; line-height: 20px; margin-bottom: 20px; } //头部header
+.publicBox{ width: 100%; height: 100%; overflow-y: auto; padding: 0 20px; }
+.baseInfo{ //基本信息
+  .interval{ margin-top: 10px; border-bottom: 1px solid rgb(197, 226, 245); } //分隔div
+  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; }
   .text{ font-size: 14px; margin-bottom: 15px; }
   .textIcon{ width: 20px; height: 20px; vertical-align: top; margin-right: 5px; }
   .textImage{ margin-bottom: 15px; height: auto; line-height: normal; img{ width: auto; height: 130px; } }
+}
+.refueller{ //加油机
+  .interval{ margin-top: 10px; } //分隔div
+  .table{
+    width: 100%;
+    border: 1px solid #91CCFF;
+    border-bottom: none;
+    display: flex;
+    p{ height: 32px; line-height: 32px; margin: 0px; }
+    .tableHeader{
+      flex: 4;
+      text-align: right;
+      color: #23D9FF;
+      p{ padding-right: 15px; border-right: 1px solid #91CCFF; border-bottom: 1px solid #91CCFF; background: rgba(145, 204, 255, 0.2); }
+    }
+    .tableContent{
+      flex: 6;
+      text-align: left;
+      p{ padding-left: 20px; border-bottom: 1px solid #91CCFF; }
+    }
+  }
 }

src/styles.scss

@@ -102,5 +102,15 @@ h1 {
   font-size: 16px;
 }
 
+//滚动条样式	
+::-webkit-scrollbar {
+  width: 5px;	
+}
+::-webkit-scrollbar-thumb {
+  background-image: linear-gradient(#2495f8,#1c73c2,#02233f,);	
+}
+::-webkit-scrollbar-track {
+  background-color: #0d4070;	
+}