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 @@
<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
......@@ -7,7 +7,7 @@
// display: inline;
// cursor: inherit;
// background-color: #2196f3c4 !important;
// padding: 1px;
// white-space: nowrap;
// font: 12px arial, sans-serif;
......@@ -39,225 +39,233 @@
// 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;
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 {
display: flex;
flex: 1 1 auto;
flex-direction: column;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.node {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.node-children {
display: flex;
flex: 1 1 auto;
}
.node-name {
display: inline-block;
padding: 5px 0px 5px 7px;
&.markSelected {
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
display: flex;
flex: 1 1 auto;
flex-direction: column;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.node {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.node-children {
display: flex;
flex: 1 1 auto;
}
.node-name {
display: inline-block;
padding: 5px 0px 5px 7px;
&.markSelected {
padding: 5px 0px 5px 2px;
border-left: 5px #226699 solid;
}
//Checkbox
.node-checkbox {
display: inline-block;
position: relative;
top: 3px;
left: 5px;
width: 16px;
height: 16px;
.active {
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;
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;
}
.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;
}
.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;
}
}
.collapsable {
cursor: pointer;
}
.node-container {
display: inline-block; //Empty container to align nodes with no collapse
}
//Checkbox
.node-checkbox {
display: inline-block;
position: relative;
top: 3px;
left: 5px;
width: 16px;
height: 16px;
cursor: pointer;
&:disabled {
cursor: auto
}
.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;
}
//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;
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 {
/* modals are hidden by default */
display: none;
.jw-modal {
/* modal container fixed across whole screen */
position: fixed;
top: 0;
right: 0;
bottom: 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;
}
}
/* modals are hidden by default */
display: none;
.jw-modal {
/* modal container fixed across whole screen */
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
.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;
/* 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 {
/* 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 overflow is hidden to hide main scrollbar when modal window is open */
overflow: hidden;
/* body overflow is hidden to hide main scrollbar when modal window is 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;
// }
// body{
// background:red;
// }
.ie-fix-button{
background:#2d9ac2;
}
}
\ No newline at end of file
.ie-fix-button {
background: #2d9ac2;
}
}
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