[修改]页面布局调整

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

@@ -10,7 +10,8 @@
     </div>
 
     <div class="bigTalkBox" style="position: absolute;right: 26px;">
-      <mat-icon class="titleIcon" (click)="openTalkDiv()">volume_up</mat-icon>
+      <!-- <mat-icon class="titleIcon" (click)="openTalkDiv()">keyboard_voice</mat-icon> -->
+      <img style="height: 30px;" src="../../../assets/images/voice.png" class="titleIcon" (click)="openTalkDiv()">
       <div class="talkBox" *ngIf="isOpenTalk">
         <div class="btndiv"> 
           <div>泵房</div>
@@ -44,7 +45,7 @@
            <img src="../../../assets/images/处置预案.png">
           </div>
           <div >
-              <div class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index" [ngClass]="{'isRefugeStorey':item.isRefugeStorey==true,'selectSitePlan': selectSitePlanIndex==key}" (click)='selectSitePlan(item,key)'>  
+              <div style="background-color: #2399f1;" class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index" [ngClass]="{'isRefugeStorey':item.isRefugeStorey==true,'selectSitePlan': selectSitePlanIndex==key}" (click)='selectSitePlan(item,key)'>  
                 <label class="overflowText" style="font-size: 18px;">{{item.name}}</label>
               </div>
           </div>
@@ -230,7 +231,7 @@
                 
                 <mat-tree-node cdkDrag cdkDragDisabled="false" [ngClass]="{'isLookPattern': !node.isLookPattern}" *matTreeNodeDef="let node;" matTreeNodePadding cdkTreeNodePaddingIndent='26' (click)="clickTreeNode(node,$event)" class="treeNode">
                   <button mat-icon-button disabled></button>
-                  <span style="font-size: 15px;" title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
+                  <span style="font-size: 16px; " title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
                     {{node.name}}      
                   </span> 
                   <span  *ngIf="node.isTemplate">({{node.children.length}})</span>
@@ -250,7 +251,7 @@
                       {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                     </mat-icon>
                   </button>
-                  <span style="font-size: 15px;" title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
+                  <span style="font-size: 16px;" title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
                     {{node.name}}      
                   </span>   
                   <span  *ngIf="node.isTemplate && node.isNewElement">({{node.children.length}})</span>

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

@@ -34,7 +34,7 @@
   flex: 2%;
   display: flex;
   align-items:center;
-  min-height: 45px;
+  min-height: 55px;
   box-sizing: border-box;
   margin: 0 0;
   
@@ -52,6 +52,7 @@
     span{
       padding: 0 13px;
       padding-right: 18px;
+      font-size: 20px;
     }
   }
   .bigeditdeletebtn:hover{
@@ -136,6 +137,7 @@
   top: 0;
 }
 .functionalDomain {
+  background-color: #0A264B;
   flex: 98%;
   overflow: hidden;
   .functionalDomainContent {
@@ -147,8 +149,11 @@
   }
   .canvas{
     flex: 5;
+    margin: 10px 10px;
+    height: 97%;
   }
   .functionalDomainLeft {
+    margin: 10px 10px;
     background: url("../../../assets/images/left\ list\ .png");
     background-size: 100% 100%;
     display: flex;
@@ -171,18 +176,14 @@
     flex: 1;
   }
   .functionalDomainRight {
-    background-image:url("../../../assets/images/right\ list\ .png") ;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    -moz-background-size: 100% 100%;
+    overflow-x: hidden;
     color: white;
-    z-index: 1001;
-    margin-right: 0px;
+    margin: 10px;
     transition:  margin-right 0.5s;
-    //border: 1px solid #30bbec;
-    width: 235px;
-    right: 0;
     flex: 1;
+    background: url('../../../assets/images/rightlist.png');
+    background-size: 100% 100%;
+    min-width: 200px;
   }
     //右边导航栏显示隐藏
   .togglePanel2 {
@@ -197,21 +198,46 @@
 
 }
 
+//右边操作栏
 //右边操作栏
 .title{
   width: 100%;
-  height: 40px;
-  line-height: 40px;
-  border-bottom:2px solid #accbf2;
+  height: 48px;
+  line-height: 48px;
   display: flex;
   align-content: center;
-  span{
-    //padding: 8px 8px;
+  position: relative;
+  .segmentation{
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0 auto;
+    color: #84B9FF;
     font-size: 18px;
+    font-weight: 100;
+    width: 0px;
+  }
+  span{
     display: inline-block;
     flex: 1;
     text-align: center;
-    font-family:"MicrosoftYaHei-Bold";
+    font-size: 18px;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    color: #FFFFFF;
+    opacity: 0.6;
+  }
+  .selectedTitle{
+    font-size: 18px;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    background: linear-gradient(0deg, #82B0E0 0%, #FFFFFF 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    opacity: 1;
   }
   span:hover{
     cursor: pointer;
@@ -222,22 +248,22 @@
   color: #82B0E0;
 }
 
-//右侧属性
 .property{
   display: flex;
   flex-flow: column;
   .siteproperty{
+    margin-top: 10px;
     height: 100%;
     overflow-y: auto;
     p{
-      color: #d0e0f4;
-      padding-left: 7px;
+      color: #fff;
+      text-indent:20px;
       letter-spacing:3px;
-      margin: 5px 0;
+      margin:8px 0;
     }
     .siteproperty_size{
       border-bottom:1px solid #d0e0f4;
-      width: 93%;
+      width: 85%;
       margin: 0 auto;
       min-height: 21px;
       color: #2399f1;
@@ -258,16 +284,15 @@
   .assetsproperty{
     overflow-y: auto;
     height: 100%;
+    margin-top: 10px;
     p{
-
-      color: #d0e0f4;
-      padding-left: 7px;
+      color: #fff;
+      text-indent:20px;
       letter-spacing:3px;
-      margin: 5px 0;
+      margin: 8px 0;
     }
     .siteproperty_size{
-      border-bottom:1px solid #d0e0f4;
-      width: 93%;
+      width:85%;
       margin: 0 auto;
       min-height: 21px;
       color: #2399f1;
@@ -374,9 +399,13 @@
     }
     .isLookCss{
       position: absolute;
-      right: 6px;
+      right: 9px;
+      top: 3px;
       z-index: 1000;
-
+      img{
+        width: 18px;
+        height: 14px;
+      }
     }
   }
   .mat-tree{
@@ -386,7 +415,6 @@
     }
   }
 }
-
 // 解决轮播图蓝框问题
 div:focus {
   outline: none;
@@ -415,7 +443,7 @@ div:focus {
   cursor: pointer;
 }
 .treeNode:hover{
-  background-color: #105a8f
+  background-color: #4FB5FF
 }
 .isLookPattern{
   display: none;
@@ -425,7 +453,7 @@ div:focus {
   white-space: nowrap;
   text-overflow: ellipsis;
   display: inline-block;
-  width: 65px;
+  width: 85px;
 }
 
 .bigBox{