update

src/app/qs-mark/qs-mark.component.html

@@ -5,8 +5,7 @@
 <div class="main">
   <div class="aside">
     <button class="ie-fix-button" (click)="back()">返回</button>
-    <nz-tree [nzExpandedIcon]="expandedIconTpl" [nzTreeTemplate]="nzTreeTemplate" [nzData]="nodes" nzAsyncData
-      (nzExpandChange)="nzEvent($event)">
+    <nz-tree [nzExpandedIcon]="expandedIconTpl" [nzData]="nodes" nzAsyncData (nzExpandChange)="nzEvent($event)">
       <ng-template #expandedIconTpl let-node>
         <i *ngIf="node.origin.level == 0" nz-icon [nzType]="node.isExpanded ? 'caret-down':'caret-right'"
           [nzTheme]="outline" class="ant-tree-switcher-icon"></i>

src/app/qs-mark/qs-mark.component.less

@@ -17,6 +17,7 @@
   width: 301px;
   position: absolute;
   top: 15%;
+  z-index: 100;
   display: flex;
   flex-direction: column;
 }
@@ -42,3 +43,7 @@
   width: 500px;
   float: left;
 }
+
+.ant-tree .ant-tree-title {
+  font-size: 22px;
+}

src/app/qs-mark/qs-mark.component.ts

@@ -67,7 +67,7 @@ export class QsMarkComponent implements OnInit {
           {
             value: 335,
             name: "安全管理\n\n\n\n\n",
-            link: "http://tydeh.zhinengjianshe.com?username=dehzhb&password=a",
+            link: "http://tydeh.zhinengjianshe.com",
             label: {
               fontWeight: "bold",
               fontSize: 20,

src/styles.less

@@ -39,24 +39,27 @@
 //   border: 2px solid white !important;
 
 // }
-.BMapLabel{
-  border:none!important;
-  background:transparent!important;
+.BMapLabel {
+  border: none !important;
+  background: transparent !important;
 }
-.label-panel{
+
+.label-panel {
   padding: 4px;
   font-size: 16px;
   background: #015293;
   border-radius: 4px;
   border: 1px solid wheat;
 }
-.label-panel2{
+
+.label-panel2 {
   display: inline;
 
   font-size: 16px;
-  color:#fff;
-  background:#36873b;
+  color: #fff;
+  background: #36873b;
 }
+
 //Tree
 
 .tree-ngx {
@@ -64,22 +67,23 @@
   flex: 1 1 auto;
   flex-direction: column;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  }
+}
 
-  .node {
+.node {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
-  }
+}
 
-  .node-children {
+.node-children {
   display: flex;
   flex: 1 1 auto;
-  }
+}
 
-  .node-name {
+.node-name {
   display: inline-block;
   padding: 5px 0px 5px 7px;
+
   &.markSelected {
     padding: 5px 0px 5px 2px;
     border-left: 5px #226699 solid;
@@ -88,14 +92,14 @@
   .active {
     cursor: pointer;
   }
-  }
+}
 
-  .node-offset {
+.node-offset {
   display: flex;
   margin-left: 20px;
-  }
+}
 
-  .node-icon-wrapper {
+.node-icon-wrapper {
   position: relative;
   display: inline-block;
   width: 20px;
@@ -106,19 +110,19 @@
   &.disabled {
     cursor: default;
   }
-  }
+}
 
-  .collapsable {
+.collapsable {
   cursor: pointer;
-  }
+}
 
-  .node-container {
+.node-container {
   display: inline-block; //Empty container to align nodes with no collapse
-  }
+}
 
-  //Checkbox
+//Checkbox
 
-  .node-checkbox {
+.node-checkbox {
   display: inline-block;
   position: relative;
   top: 3px;
@@ -130,42 +134,42 @@
   &:disabled {
     cursor: auto
   }
-  }
+}
 
-  //Animation
+//Animation
 
-  .collapsible-wrapper {
+.collapsible-wrapper {
   display: flex;
   overflow: hidden;
-  }
+}
 
-  .collapsible-wrapper:after {
+.collapsible-wrapper:after {
   content: '';
   height: 25px;
   transition: height 0.3s linear, max-height 0s 0.3s linear;
   max-height: 0px;
-  }
+}
 
-  .collapsible {
+.collapsible {
   transition: margin-bottom 0.3s cubic-bezier(0, 0, 0, 1);
   margin-bottom: 0;
   max-height: 1000000px;
-  }
+}
 
-  .collapsible-wrapper.collapsed>.collapsible {
+.collapsible-wrapper.collapsed>.collapsible {
   margin-bottom: -20000px;
   transition: margin-bottom 0.3s cubic-bezier(1, 0, 1, 1), visibility 0s 0.3s, max-height 0s 0.3s;
   visibility: hidden;
   max-height: 0;
-  }
+}
 
-  .collapsible-wrapper.collapsed:after {
+.collapsible-wrapper.collapsed:after {
   height: 0;
   transition: height 0.3s linear;
   max-height: 25px;
-  }
+}
 
-  .arrow-down {
+.arrow-down {
   position: absolute;
   width: 0;
   height: 0;
@@ -173,13 +177,14 @@
   top: 6px;
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
-    border-top:7px solid #85c6e2;
+  border-top: 7px solid #85c6e2;
+
   &.collapse-empty {
     border-top: 7px solid #ccc;
   }
-  }
+}
 
-  .arrow-right {
+.arrow-right {
   position: absolute;
   width: 0;
   height: 0;
@@ -188,7 +193,7 @@
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
   border-left: 7px solid #455A64;
-  }
+}
 
 jw-modal {
   /* modals are hidden by default */
@@ -211,7 +216,7 @@ jw-modal {
     .jw-modal-body {
       padding: 20px;
       background: #fff;
-            color:black;
+      color: black;
       /* margin exposes part of the modal background */
       margin: 400px;
     }
@@ -239,25 +244,28 @@ body.jw-modal-open {
   overflow: hidden;
 }
 
-.label-panel{
+.label-panel {
   .header {
     color: #39ebff;
   }
-  p{
+
+  p {
     padding: 0 10px;
   }
 }
 
 
 //video style
-.ant-tree li .ant-tree-node-content-wrapper{
-  color:white!important;
-  font-size: 17px;
+.ant-tree li .ant-tree-node-content-wrapper {
+  color: white !important;
 }
-.ant-tree li span.ant-tree-iconEle, .ant-tree li span.ant-tree-switcher{
-  color:white!important;
+
+.ant-tree li span.ant-tree-iconEle,
+.ant-tree li span.ant-tree-switcher {
+  color: white !important;
 }
-.mark{
+
+.mark {
   background: transparent;
   color: #de9d9d;
   font-size: 20px;
@@ -269,24 +277,28 @@ body.jw-modal-open {
   // margin-top:0.3em;
 
 }
-legend{
-  width:20%!important;
+
+legend {
+  width: 20% !important;
 }
-.tooltiptextx{
-  color:#3170f8;
-  font-size:15px;
+
+.tooltiptextx {
+  color: #3170f8;
+  font-size: 15px;
   font-weight: 900;
 
 }
+
 .ant-tree li {
   font-size: 22px;
-  color:white;
+  color: white;
 }
-.BMapLib_Drawing{
+
+.BMapLib_Drawing {
   display: none;
 }
 
-.gradient{
+.gradient {
 
   /* background: radial-gradient(#fff, #1184c2); */
   -webkit-background-clip: text;
@@ -299,23 +311,25 @@ legend{
   text-align: center;
 }
 
-body{
+body {
   overflow: hidden;
 }
-ul{
-  &.ant-tree{
+
+ul {
+  &.ant-tree {
     overflow: auto;
     max-height: 800px;
   }
 }
 
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+@media all and (-ms-high-contrast: none),
+(-ms-high-contrast: active) {
   /* IE10+ CSS styles go here */
   // body{
   //   background:red;
   // }
 
-    .ie-fix-button{
-      background:#2d9ac2;
-    }
+  .ie-fix-button {
+    background: #2d9ac2;
   }
+}