[完善] 预案辅助页面布局

src/app/ui/plan-assistance/plan-assistance.component.html

@@ -1,11 +1,30 @@
 <div class="content">
     <div class="left">
-
+        <div class="header leftHeader">到场力量</div>
+        <div class="list">
+            <div class="tableDiv">
+                <div class="tableRows" *ngFor="let item of demoData">
+                    <div style="flex: 60%;display: flex;flex-direction: column;justify-content: center;align-items: center;overflow: hidden;">
+                        <p style="flex: 60%;font-size: 16px;" class="contentText">{{item.Name}}</p>
+                        <p style="flex: 40%" class="contentText">{{item.Name}}</p>
+                    </div>
+                    <div style="flex: 40%; line-height: 40px;text-align: center;">
+                        已到场
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 
     <!-- canvas -->
     <div class="center">
-        <app-working-area #workingArea></app-working-area>
+        <div class="header">
+            <div class="title">总平面图</div>
+        </div>
+        <div class="canvas">
+            <app-working-area #workingArea></app-working-area>
+        </div>
+
     </div>
     <!-- canvas -->
 </div>

src/app/ui/plan-assistance/plan-assistance.component.scss

@@ -11,10 +11,73 @@
 .left {
     width: 300px;
     height: 100%;
-    background-color: #000;
+    box-sizing: border-box;
+    padding: 1px;
+    display: flex;
+    flex-direction: column;
+    .list {
+        flex: 1;
+        overflow: hidden;
+        .tableDiv {
+            height: 100%;
+            overflow-y: auto;
+            border-left: 1px solid #30bbec;
+            border-top: 1px solid #30bbec;
+        }
+    }
+    //每一行
+    .tableRows {
+        height: 40px;
+        overflow: hidden;
+        display: flex;
+        margin: 5px 0;
+        .contentText {
+            font-size: 12px;
+            color: #fff;
+            cursor: pointer;
+        }
+    }
+}
+
+//选中状态
+.selectIcon {
+    background-color: rgba(7,89,155,0.7);
 }
 
 //右侧工作区
 .center {
     flex: 1;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    .canvas {
+        flex: 1;
+    }
+}
+
+//header
+.header {
+    width: 100%;
+    height: 40px;
+    min-height: 40px;
+    cursor: pointer;
+}
+.leftHeader {
+    line-height: 40px;
+    text-align: center;
+    font-size: 20px;
+    font-weight: 550;
+    color: #F7bA2A;
+}
+.title {
+    margin: 1px 0;
+    width: 120px;
+    height: 38px;
+    line-height: 38px;
+    background: url('../../../assets/images/标签正常.png');
+    -moz-background-size:100% 100%;  
+    background-size:100% 100%;
+    font-size: 20px;
+    color: #fff;
+    padding-left: 25px;
 }