[完善] 左侧功能栏 页面布局完成

src/app/ui/collection-tools/collection-tools.component.html

@@ -71,6 +71,8 @@
         <!-- 平面图 -->
         <div class="planarGraph">
           <div class="planarGraphHeader" (click)='togglePlanarGraph()'>
+            <mat-icon *ngIf="togglePlane">keyboard_arrow_up</mat-icon>
+            <mat-icon *ngIf="!togglePlane">keyboard_arrow_down</mat-icon>
             <label class="overflowText" style="font-weight: 550;">平面图</label>
             <label class="hover">
               <mat-icon (click)='foundPanel($event)' class="matIcons">add</mat-icon>
@@ -81,12 +83,24 @@
               [ngClass]="{'selectSitePlan': selectSitePlanIndex==key}" (click)='selectSitePlan(item,key)'>
               <mat-icon *ngIf="!item.imageUrl" class="matIcons">broken_image</mat-icon>
               <label class="overflowText">{{item.name}}</label>
-              <mat-icon title="替换底图" style="float: right; margin-top: 8px;" *ngIf="selectSitePlanIndex==key"
-                class="matIcons">photo_size_select_actual</mat-icon>
+              <mat-icon title="替换底图" class="matIcons replaceBaseMap" *ngIf="selectSitePlanIndex==key">photo_size_select_actual</mat-icon>
               <!-- 右边定位操作栏 -->
-              <!-- <div id="rightOperate">
-  
-              </div> -->
+              <div id="rightOperate" *ngIf="selectSitePlanIndex==key">
+                <p class="functionButton">
+                  <mat-icon class="functionIcon bigFunctionIcon" title="上移">keyboard_arrow_up</mat-icon>
+                </p>
+                <p class="functionButton">
+                  <mat-icon class="functionIcon" title="编辑属性">edit</mat-icon>
+                  <mat-icon class="functionIcon" title="删除">delete</mat-icon>
+                </p>
+                <p class="functionButton">
+                  <mat-icon class="functionIcon" title="旋转底图">cached</mat-icon>
+                  <mat-icon class="functionIcon" title="复制">library_books</mat-icon>
+                </p>
+                <p class="functionButton">
+                  <mat-icon class="functionIcon bigFunctionIcon" title="下移">keyboard_arrow_down</mat-icon>
+                </p>
+              </div>
               <!-- 右边定位操作栏 -->
             </div>
           </div>
@@ -95,6 +109,8 @@
         <!-- 素材库 -->
         <div id="materialBank">
           <div class="planarGraphHeader" (click)='toggleMaterial()'>
+            <mat-icon *ngIf="toggleMaterialBank">keyboard_arrow_up</mat-icon>
+            <mat-icon *ngIf="!toggleMaterialBank">keyboard_arrow_down</mat-icon>
             <label class="overflowText" style="font-weight: 550;">素材库</label>
           </div>
           <div style="flex: 1;overflow-y: auto;" [hidden]="!toggleMaterialBank">

src/app/ui/collection-tools/collection-tools.component.scss

@@ -2,7 +2,7 @@
 .content {
   width: 100%;
   height: 93%;
-  // overflow: hidden;
+  overflow: hidden;
   box-sizing: border-box;
   padding: 3px;
   display: flex;

src/app/ui/collection-tools/panel.scss

@@ -12,7 +12,7 @@
   flex-direction: row;
   align-items: center;
   padding: 0 24px;
-  border-radius: inherit;
+  border-radius: 5px;
   font-family: Roboto, "Helvetica Neue", sans-serif;
   font-size: 15px;
   font-weight: 400;
@@ -41,20 +41,44 @@
   line-height: 36px;
   box-sizing: border-box;
   padding: 0 10px 0 25px;
-  cursor:pointer;
   .mat-icon {
     font-size: 20px;
   }
 }
+.replaceBaseMap {
+  float: right;
+  margin-top: 8px;
+}
+.replaceBaseMap:hover {
+  color: #fff;
+}
+//hover时显示右边操作栏
+.sitePlanContent:hover {
+  #rightOperate {
+    display: block;
+  }
+}
 //右边操作栏
 #rightOperate{
-  width: 100px;
+  width: 50px;
   height: 100px;
   position: absolute;
-  top: -36px;
-  right: -100px;
-  z-index: 999;
-  background-color: #999;
+  top: -32px;
+  right: -51px;
+  border-radius: 0 100px 100px 0;
+  background-color: #cdced1;
+  // #F0F4F7
+  display: none;
+  .functionButton {
+    height: 25%;
+    line-height: 25px;
+  }
+  .bigFunctionIcon {
+    font-size: 24px;
+  }
+  .functionIcon:hover {
+    color: #4DA5FA;
+  }
 }
 
 //素材库溢出隐藏
@@ -63,6 +87,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  padding-bottom: 10px;
 }
 //素材库图片flex
 #panelLibrary .text{