Skip to content

S
supervise-front
Commit bb8f6344 by 杨子
Options

update

parent 6b07da37
Showing with 225 additions and 208 deletions
src/app/qs-mark/qs-mark.component.html
...@@ -5,8 +5,7 @@ ...@@ -5,8 +5,7 @@
<div class="main"> <div class="main">
<div class="aside"> <div class="aside">
<button class="ie-fix-button" (click)="back()">返回</button> <button class="ie-fix-button" (click)="back()">返回</button>
<nz-tree [nzExpandedIcon]="expandedIconTpl" [nzTreeTemplate]="nzTreeTemplate" [nzData]="nodes" nzAsyncData <nz-tree [nzExpandedIcon]="expandedIconTpl" [nzData]="nodes" nzAsyncData (nzExpandChange)="nzEvent($event)">
(nzExpandChange)="nzEvent($event)">
<ng-template #expandedIconTpl let-node> <ng-template #expandedIconTpl let-node>
<i *ngIf="node.origin.level == 0" nz-icon [nzType]="node.isExpanded ? 'caret-down':'caret-right'" <i *ngIf="node.origin.level == 0" nz-icon [nzType]="node.isExpanded ? 'caret-down':'caret-right'"
[nzTheme]="outline" class="ant-tree-switcher-icon"></i> [nzTheme]="outline" class="ant-tree-switcher-icon"></i>
......
src/app/qs-mark/qs-mark.component.less
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
width: 301px; width: 301px;
position: absolute; position: absolute;
top: 15%; top: 15%;
z-index: 100;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
...@@ -42,3 +43,7 @@ ...@@ -42,3 +43,7 @@
width: 500px; width: 500px;
float: left; 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 { ...@@ -67,7 +67,7 @@ export class QsMarkComponent implements OnInit {
{ {
value: 335, value: 335,
name: "安全管理\n\n\n\n\n", name: "安全管理\n\n\n\n\n",
link: "http://tydeh.zhinengjianshe.com?username=dehzhb&password=a", link: "http://tydeh.zhinengjianshe.com",
label: { label: {
fontWeight: "bold", fontWeight: "bold",
fontSize: 20, fontSize: 20,
......
src/styles.less
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
// display: inline; // display: inline;
// cursor: inherit; // cursor: inherit;
// background-color: #2196f3c4 !important; // background-color: #2196f3c4 !important;
// padding: 1px; // padding: 1px;
// white-space: nowrap; // white-space: nowrap;
// font: 12px arial, sans-serif; // font: 12px arial, sans-serif;
...@@ -39,225 +39,233 @@ ...@@ -39,225 +39,233 @@
// border: 2px solid white !important; // border: 2px solid white !important;
// } // }
.BMapLabel{ .BMapLabel {
border:none!important; border: none !important;
background:transparent!important; background: transparent !important;
} }
.label-panel{
.label-panel {
padding: 4px; padding: 4px;
font-size: 16px; font-size: 16px;
background: #015293; background: #015293;
border-radius: 4px; border-radius: 4px;
border: 1px solid wheat; border: 1px solid wheat;
} }
.label-panel2{
.label-panel2 {
display: inline; display: inline;
font-size: 16px; font-size: 16px;
color:#fff; color: #fff;
background:#36873b; background: #36873b;
} }
//Tree //Tree
.tree-ngx { .tree-ngx {
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
flex-direction: column; flex-direction: column;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
.node { .node {
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
flex-direction: column; flex-direction: column;
} }
.node-children { .node-children {
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
} }
.node-name { .node-name {
display: inline-block; display: inline-block;
padding: 5px 0px 5px 7px; padding: 5px 0px 5px 7px;
&.markSelected {
padding: 5px 0px 5px 2px; &.markSelected {
border-left: 5px #226699 solid; padding: 5px 0px 5px 2px;
} border-left: 5px #226699 solid;
.active {
cursor: pointer;
}
}
.node-offset {
display: flex;
margin-left: 20px;
}
.node-icon-wrapper {
position: relative;
display: inline-block;
width: 20px;
height: 18px;
top: 1px;
left: 6px;
&.disabled {
cursor: default;
}
}
.collapsable {
cursor: pointer;
}
.node-container {
display: inline-block; //Empty container to align nodes with no collapse
} }
//Checkbox .active {
.node-checkbox {
display: inline-block;
position: relative;
top: 3px;
left: 5px;
width: 16px;
height: 16px;
cursor: pointer; cursor: pointer;
&:disabled {
cursor: auto
}
}
//Animation
.collapsible-wrapper {
display: flex;
overflow: hidden;
}
.collapsible-wrapper:after {
content: '';
height: 25px;
transition: height 0.3s linear, max-height 0s 0.3s linear;
max-height: 0px;
}
.collapsible {
transition: margin-bottom 0.3s cubic-bezier(0, 0, 0, 1);
margin-bottom: 0;
max-height: 1000000px;
} }
}
.collapsible-wrapper.collapsed>.collapsible {
margin-bottom: -20000px; .node-offset {
transition: margin-bottom 0.3s cubic-bezier(1, 0, 1, 1), visibility 0s 0.3s, max-height 0s 0.3s; display: flex;
visibility: hidden; margin-left: 20px;
max-height: 0; }
}
.node-icon-wrapper {
.collapsible-wrapper.collapsed:after { position: relative;
height: 0; display: inline-block;
transition: height 0.3s linear; width: 20px;
max-height: 25px; height: 18px;
top: 1px;
left: 6px;
&.disabled {
cursor: default;
} }
}
.arrow-down {
position: absolute; .collapsable {
width: 0; cursor: pointer;
height: 0; }
left: 3px;
top: 6px; .node-container {
border-left: 7px solid transparent; display: inline-block; //Empty container to align nodes with no collapse
border-right: 7px solid transparent; }
border-top:7px solid #85c6e2;
&.collapse-empty { //Checkbox
border-top: 7px solid #ccc;
} .node-checkbox {
display: inline-block;
position: relative;
top: 3px;
left: 5px;
width: 16px;
height: 16px;
cursor: pointer;
&:disabled {
cursor: auto
} }
}
.arrow-right {
position: absolute; //Animation
width: 0;
height: 0; .collapsible-wrapper {
left: 8px; display: flex;
top: 3px; overflow: hidden;
border-top: 7px solid transparent; }
border-bottom: 7px solid transparent;
border-left: 7px solid #455A64; .collapsible-wrapper:after {
content: '';
height: 25px;
transition: height 0.3s linear, max-height 0s 0.3s linear;
max-height: 0px;
}
.collapsible {
transition: margin-bottom 0.3s cubic-bezier(0, 0, 0, 1);
margin-bottom: 0;
max-height: 1000000px;
}
.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 {
height: 0;
transition: height 0.3s linear;
max-height: 25px;
}
.arrow-down {
position: absolute;
width: 0;
height: 0;
left: 3px;
top: 6px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #85c6e2;
&.collapse-empty {
border-top: 7px solid #ccc;
} }
}
.arrow-right {
position: absolute;
width: 0;
height: 0;
left: 8px;
top: 3px;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 7px solid #455A64;
}
jw-modal { jw-modal {
/* modals are hidden by default */ /* modals are hidden by default */
display: none; display: none;
.jw-modal { .jw-modal {
/* modal container fixed across whole screen */ /* modal container fixed across whole screen */
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
/* z-index must be higher than .jw-modal-background */
z-index: 1000;
/* enables scrolling for tall modals */
overflow: auto;
.jw-modal-body {
padding: 20px;
background: #fff;
color:black;
/* margin exposes part of the modal background */
margin: 400px;
}
}
.jw-modal-background { /* z-index must be higher than .jw-modal-background */
/* modal background fixed across whole screen */ z-index: 1000;
position: fixed;
top: 0; /* enables scrolling for tall modals */
right: 0; overflow: auto;
bottom: 0;
left: 0; .jw-modal-body {
padding: 20px;
/* semi-transparent black */ background: #fff;
background-color: #000; color: black;
opacity: 0.75; /* margin exposes part of the modal background */
margin: 400px;
/* z-index must be below .jw-modal and above everything else */
z-index: 900;
} }
}
.jw-modal-background {
/* modal background fixed across whole screen */
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* semi-transparent black */
background-color: #000;
opacity: 0.75;
/* z-index must be below .jw-modal and above everything else */
z-index: 900;
}
} }
body.jw-modal-open { body.jw-modal-open {
/* body overflow is hidden to hide main scrollbar when modal window is open */ /* body overflow is hidden to hide main scrollbar when modal window is open */
overflow: hidden; overflow: hidden;
} }
.label-panel{ .label-panel {
.header { .header {
color: #39ebff; color: #39ebff;
} }
p{
p {
padding: 0 10px; padding: 0 10px;
} }
} }
//video style //video style
.ant-tree li .ant-tree-node-content-wrapper{ .ant-tree li .ant-tree-node-content-wrapper {
color:white!important; color: white !important;
font-size: 17px;
} }
.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; background: transparent;
color: #de9d9d; color: #de9d9d;
font-size: 20px; font-size: 20px;
...@@ -269,24 +277,28 @@ body.jw-modal-open { ...@@ -269,24 +277,28 @@ body.jw-modal-open {
// margin-top:0.3em; // margin-top:0.3em;
} }
legend{
width:20%!important; legend {
width: 20% !important;
} }
.tooltiptextx{
color:#3170f8; .tooltiptextx {
font-size:15px; color: #3170f8;
font-size: 15px;
font-weight: 900; font-weight: 900;
} }
.ant-tree li { .ant-tree li {
font-size: 22px; font-size: 22px;
color:white; color: white;
} }
.BMapLib_Drawing{
.BMapLib_Drawing {
display: none; display: none;
} }
.gradient{ .gradient {
/* background: radial-gradient(#fff, #1184c2); */ /* background: radial-gradient(#fff, #1184c2); */
-webkit-background-clip: text; -webkit-background-clip: text;
...@@ -299,23 +311,25 @@ legend{ ...@@ -299,23 +311,25 @@ legend{
text-align: center; text-align: center;
} }
body{ body {
overflow: hidden; overflow: hidden;
} }
ul{
&.ant-tree{ ul {
&.ant-tree {
overflow: auto; overflow: auto;
max-height: 800px; 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 */ /* IE10+ CSS styles go here */
// body{ // body{
// background:red; // background:red;
// } // }
.ie-fix-button{ .ie-fix-button {
background:#2d9ac2; background: #2d9ac2;
} }
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment