基本信息下拉菜单完善

src/app/pages/plan/plan.component.html

@@ -2,7 +2,17 @@
 <div class="content" id="threeDimensional">
 
   <div class="header">
-    <button *ngFor="let item of allFence; let key = index;" [ngClass]="{'selectFence': selectFence === key}" (click)="toggleHeaderFence(key)">{{item}}</button>
+    <button *ngFor="let item of allFence; let key = index;" [ngClass]="{'selectFence': selectFence === key}" (click)="toggleHeaderFence(key)">
+      <label nz-dropdown [nzDropdownMenu]="menu" [nzDisabled]="item != '基本信息'">{{item}}<i nz-icon nzType="caret-up" nzTheme="outline" *ngIf="key === 0"></i></label>
+    </button>
+    <nz-dropdown-menu #menu="nzDropdownMenu">
+      <ul nz-menu class="dropDown">
+        <li nz-menu-item><label nz-checkbox>毗邻</label></li>
+        <li nz-menu-item><label nz-checkbox>区域</label></li>
+        <li nz-menu-item><label nz-checkbox>图片</label></li>
+        <li nz-menu-item><label nz-checkbox>点位</label></li>
+      </ul>
+    </nz-dropdown-menu>
     <div class="rightFence">
       <img src="../../../assets/images/awningShow.png" [hidden]="!isOpenAwning" (click)="toggleHeaderAwning(false)">
       <img src="../../../assets/images/awningHide.png" [hidden]="isOpenAwning" (click)="toggleHeaderAwning(true)">
@@ -47,6 +57,10 @@
     </div>
     <!-- 左侧建筑栏 -->
 
+    <!-- 右侧属性栏 -->
+    <div class="nature"></div>
+    <!-- 右侧属性栏 -->
+
     <!-- 右侧图标栏 -->
     <div class="rightIcons" *ngIf="editMode && (selectFence === 0 || selectFence === 7)" [ngClass]="{'publicMoveUp': selectFence === 7}" [ngStyle]="{'width': selectFence === 0? '60px' : null}">
       <div class="bottomCenter" id="bottomCenter">

src/app/pages/plan/plan.component.scss

@@ -48,6 +48,7 @@
     cursor: pointer;
     margin: 7px 10px 0px;
     padding: 0;
+    label{ display: block; width: 100%; height: 100%; cursor: pointer; .anticon{ font-size: 14px; margin-left: 1px; } }
   }
   .selectFence { background: linear-gradient(180deg, #000D21 0%, #00404D 49%, #23D9FF 100%); } //选种样式
   .rightFence{

src/styles.scss

@@ -103,6 +103,13 @@ h1 {
 }
 
 //三维场景
+.dropDown{
+  border: 1px solid #23D9FF;
+  background: linear-gradient(180deg, #000D21 0%, #006E85 100%);
+  li:hover { background-color: transparent; }
+  li { text-align: center; }
+  .ant-checkbox-wrapper { color: #fff; }
+}
 #threeDimensional {
   .ant-tree{ color: #C4E2FC; } //tree
   .ant-tree,.ant-tree-node-content-wrapper:hover,.ant-tree-node-content-wrapper.ant-tree-node-selected { background-color: transparent; } //tree
@@ -114,7 +121,7 @@ h1 {
   .ant-collapse,.ant-collapse-item,.ant-collapse-header,.ant-collapse-content{ border-radius: 0px; border: none; } //可展开面板
   .ant-collapse-content{ background: rgba(0, 59, 110, 0.9); color: #fff; } //可展开面板
   .ant-collapse-content-box{ padding: 0; } //可展开面板
-  .ant-collapse-header{
+  .ant-collapse-header{ //可展开面板
     padding: 0 0 0 25px;
     height: 30px;
     line-height: 28px;
@@ -123,6 +130,7 @@ h1 {
     color: #23D9FF;
     .ant-collapse-arrow{ left: 5px; } //可展开面板
   }
+
   //滚动条样式	
   ::-webkit-scrollbar {
     width: 5px;