物联网平台 +Web 组态
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

821 lines
13 KiB

2 years ago
body{
margin: 0;
}
.el-header, .el-footer {
background-color: #1376bf;
color: #fff;
line-height: 60px;
}
.layui-logo img{
width: 30px;
margin-top: -2px;
vertical-align: middle;
margin-right: 3px;
}
.el-aside {
text-align: center;
}
.el-main {
color: #333;
padding: 10px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
.func-list.active{
background: #3499da;
color:#fff;
}
.func-list:hover{
color:#fff;
}
.func-list{
background: #4a5053;
padding: 15px 0;
cursor: pointer;
}
.func-list {
color: #ccc;
}
.font-icon{
font-size: 26px;
padding-bottom: 10px;
}
.ele-node-info{
width:80px;
float: left;
cursor: pointer;
}
.imglibrary .ele-node-info{
width:40px;
}
.ele-sub-c{
padding: 4px;
border: 1px solid #fff;
text-align: center;
}
.imglibrary .ele-node-info .ele-sub-c{
padding: 0px;
}
.ele-sub-c img{
width: 72px;
height: 72px;
}
.imglibrary .ele-sub-c img{
width: 36px;
height: 36px;
vertical-align: middle;
padding: 2px;
}
.ele-sub-c:hover{
border: 1px solid #1376bf;
}
.element-container{
padding: 10px 10px;
box-shadow: 1px 1px 8px rgba(0,0,0,.15);
overflow: hidden;
position: relative;
}
.tool-container{
position: fixed;
right: 0;
top: 60px;
z-index: 999;
height: 100%;
background: #333;
overflow: auto;
}
.edit-container{
min-height: 600px;
position: relative;
z-index: 1;
/* background: #fff; */
overflow: hidden;
margin: 0 auto ;
}
.ele-content{
display: none;
}
.tool-title{
font-size: 14px;
}
.base_textarea {
position: relative;
width: 209px;
height: 60px;
line-height: 20px;
padding: 0 5px;
float: left;
overflow-x: hidden;
resize: none;
}
.padding{
padding: 0 10px;
}
.functionDetails {
position: relative;
width: 100%;
height: 20px;
line-height: 20px;
font-size: 14px;
color: #f5f6fa;
text-align: center;
}
.functionDetails span {
position: absolute;
top: 0;
left: 50%;
margin-left: -40px;
width: 80px;
height: 20px;
background-color: #666;
z-index: 9;
}
.functionDetails:after {
content: "";
position: absolute;
top: 9px;
left: 0;
width: 100%;
height: 1px;
background-color: #4c84ff;
z-index: 1;
}
.el-input__inner{
height: 30px;
line-height: 30px;
}
.nodeConfig .el-form-item__label{
text-align: center;
}
.nodeConfig .el-form-item{
margin-bottom: 0 !important;
}
.functionList {
position: relative;
width: 100%;
overflow: hidden;
margin-top: 10px;
}
.basic_text {
position: relative;
width: 100%;
overflow: hidden;
border-right: 1px solid #d7d7d7;
border-bottom: 1px solid #d7d7d7;
font-size: 12px;
}
.basic_text_select {
position: relative;
float: left;
width: 25%;
height: 24px;
text-align: center;
line-height: 24px;
background-color: #fff;
border-left: 1px solid #d7d7d7;
border-top: 1px solid #d7d7d7;
border-right: 0;
border-bottom: 0;
}
.textStyleBtn{
font-weight: 700;
}
.slide_node{
position: relative;
float: left;
width: 100%;
height: 30px;
}
.slide_line{
position: absolute;
top: 13px;
left: 10px;
width: 130px;
height: 4px;
}
.slide_node .ui-slider-handle {
border-radius: 50%;
background-color: #fff;
box-shadow: 0px 1px 9px 0px #828282;
width: 16px !important;
height: 16px !important;
top: -7px !important;
}
.slide_size {
position: absolute;
right: 9px;
width: 50px;
height: 24px;
line-height: 24px;
border: 1px solid #d9d9d9;
text-align: center;
font-size: 14px;
}
.input-style {
position: relative;
width: 50px;
height: 25px;
line-height: 25px;
border: 1px solid #d9d9d9;
text-align: center;
font-size: 14px;
color: #333;
}
.w-e-toolbar{
flex-wrap: wrap !important;
padding: 0 !important;
}
.text_toolbar{
background: #fff;
}
.w-e-text {
overflow-y: auto ;
}
.auxiliary {
width: 30px;
height: 30px;
float: left;
background-color: #fff;
border: 1px solid #d9d9d9;
cursor: pointer;
}
.auxiliaryB {
background-image: url(../image/choice.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 16px 16px;
}
.guide {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 0;
background-image: url(../image/guide.png);
}
.canvas_droppable {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 99000;
cursor: move;
display: none;
}
.show{
display: block;
}
.hide{
display: none;
}
.activeBorder{
border: 1px solid #3499da;
}
.opration{
position: fixed;
width: 150px;
z-index: 9999;
overflow: hidden;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .1);
padding: 5px 0;
}
.opration_item{
position: relative;
width: 100%;
height: 30px;
line-height: 30px;
font-size: 14px;
padding: 0 10px;
color: #4a5053;
cursor: pointer;
}
.opration_item:hover {
background-color: #41474a;
color: #fff;
}
.item_disabled {
color: #bfc5d1 !important;
cursor: no-drop;
}
/* 拖动选择 */
.selectBox{
position:absolute;
width:0px;
height:0px;
padding:0px;
margin:0px;
font-size:0px;
z-index:999999;
background-color:rgba(76, 132, 255, 0.2);
border:1px dashed #4c84ff;
}
.tempGroup{
background-color:#dee8ff;border:1px solid #4c84ff;
}
.canvas-con{
position:relative;
width:100%;
height:100%;
overflow:hidden;
}
.canvas-con img{
width:100%;
height:100%;
}
.canvas-con svg{
width:100%;
height:100%;
}
.lpro-thead td{
width: 20%;
padding: 5px 10px;
}
.has-gutter td{
width: 20%;
padding: 5px 10px;
}
.el-dialog__header {
padding: 15px 20px 15px;
border-bottom: 1px solid #d9d9d9;
}
.self-upload{
padding-right: 0;
overflow: auto;
}
.self-upload::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.self-upload::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
background: #aaa;
}
.self-upload::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
border-radius: 10px;
background: #EDEDED;
}
.upload-img-icon{
width:40px;
height:40px;
padding: 2px;
}
.el-collapse-item__header{
padding-left: 10px;
}
.canvas {
position: absolute;
cursor: pointer;
}
.ui-droppable{
border: 0 !important;
}
.ui-resizable-n {
border-top: 1px dashed #383e41 ;
width: auto;
height: 10px;
left: -9px;
top: -10px;
right: -9px;
}
.ui-resizable-n:before {
content: "";
left: 50%;
top: -5px;
margin-left: -5px;
position: absolute;
width: 10px;
height: 10px;
border: solid 1px #383e41;
background-color: #fff;
}
.ui-resizable-e {
border-right: 1px dashed #383e41;
width: 10px;
bottom: -9px;
right: -10px;
top: -9px;
height: auto;
}
.ui-resizable-e:before {
content: "";
width: 10px;
height: 10px;
border: solid 1px #383e41;
top: 50%;
right: -5px;
margin-top: -5px;
position: absolute;
background-color: #fff;
}
.ui-resizable-s {
border-bottom: 1px dashed #383e41;
width: auto;
height: 10px;
left: -9px;
bottom: -10px;
right: -9px;
}
.ui-resizable-s:before {
content: "";
width: 10px;
height: 10px;
border: solid 1px #383e41;
left: 50%;
bottom: -5px;
margin-left: -5px;
position: absolute;
background-color: #fff;
}
.ui-resizable-w {
border-left: 1px dashed #383e41;
width: 10px;
height: auto;
left: -10px;
top: -9px;
bottom: -9px;
}
.ui-resizable-w:before {
content: "";
width: 10px;
height: 10px;
border: solid 1px #383e41;
left: -5px;
top: 50%;
margin-top: -5px;
position: absolute;
background-color: #fff;
}
.ui-resizable-ne {
width: 12px;
height: 12px;
background-color: #ffffff;
border: solid 1px #383e41;
border-radius: 50%;
right: -15px;
top: -15px;
}
.ui-resizable-se {
width: 12px;
height: 12px;
background-color: #ffffff;
border: solid 1px #383e41;
border-radius: 50%;
right: -15px;
bottom: -15px;
}
.ui-resizable-sw {
width: 12px;
height: 12px;
background-color: #ffffff;
border: solid 1px #383e41;
border-radius: 50%;
left: -15px;
bottom: -15px;
}
.ui-resizable-nw {
width: 12px;
height: 12px;
background-color: #ffffff;
border: solid 1px #383e41;
border-radius: 50%;
left: -15px;
top: -15px;
}
.transformable-handle-rotate {
position: absolute;
left: 50%;
top: -45px !important;
margin-left: -12px;
width: 24px;
height: 24px;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
cursor: pointer;
z-index: 2000;
}
.video_content,.node_video{
width: 100%;
height: 100%;
}
.uploadBtns {
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
z-index: 99;
padding: 10px 0;
text-align: center;
}
.ele-sub-c:HOVER img{
display: inline ;
}
.deleteUploadImg {
position: absolute;
display: none;
right: 5px;
top: 5px;
height: 10px;
width: 10px;
cursor: pointer;
}
.webuploader-element-invisible {
display: none !important;
}
.icon-upload:before {
font-family: "FontAwesome" !important;
}
[class*='icon-']:before {
font-family: inherit;
}
.chartStyle{
width: 100%;
height: 100%;
}
.mapNode{
}
.anchorBL {
display: none;
}
.item_label{
margin-bottom: 10px;
}
.upload_img{
/* width: 100%!important; */
}
.head_btns{
position: fixed;
right: 20px;
top: 0;
}
.head_btn{
cursor: pointer;
margin-left: 10px;
display: inline-block;
}
.form-group {
margin-bottom: 10px;
margin-top: 10px;
}
#edit-content-area{
background: #f5f5f5;
}
#edit-content-area::-webkit-scrollbar {
width: 10px;
height: 10px;
}
#edit-content-area::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
background: #7cabd6;
}
#edit-content-area::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
border-radius: 10px;
background: #EDEDED;
}
.w-e-text::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.w-e-text::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
background: #aaa;
}
.w-e-text::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
border-radius: 10px;
background: #EDEDED;
}
.tool-container::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.tool-container::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
background: #aaa;
}
.tool-container::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
border-radius: 10px;
background: #EDEDED;
}
.intro-ico{
font-size: 36px;
color: #444;
}
.intro-txt{
font-size: 14px;
}
.canvas_img , .mapStyle{
width: 100%;
height: 100%;
}
.canvas_img.normal{
height: auto;
}
.canvas_img img ,.mapStyle img{
width: 100%;
height: 100%;
}
.stateNode img , .controlNode img , .deviceStateNode img {
width: 100%;
height: 100%;
}
.deviceStateNode img.normal {
height: auto;
}
.stateNode img.normal{
height: auto;
}
.controlNode img.normal{
height: auto;
}
.imageDiv{
max-height:400px;
overflow: auto;
}
.imageDiv::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.imageDiv::-webkit-scrollbar-thumb {
border-radius: 2px;
-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
background: #aaa;
}
.imageDiv::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
border-radius: 2px;
background: #EDEDED;
}
.base-form-group{
margin-top: 10px;
padding-right: 10px;
}
.pipeLineNode{
}
.element-container{
background: #f5f5f5 ;
}
.tool-title{
font-weight: 700;
}
.guide{
display: none;
}
.edit-container{
min-height: 0px;
}
.operateColumn{
position: fixed;
bottom: 10px;
z-index: 10000;
background: #000;
padding: 8px 20px;
border-radius: 10px;
transform: translate(-50%, 0px);
left: 50%;
opacity: 0.1;
}
.operateColumn img{
margin: 0 5px;
}
.operateColumn:HOVER {
opacity: 0.5;
}
.operateColumn img:HOVER {
cursor: pointer;
}
body::-webkit-scrollbar {
width: 3px;
height: 3px;
}
body::-webkit-scrollbar-thumb {
border-radius: 0px;
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.5);
background: #aaa;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.5);
border-radius: 0px;
background: #EDEDED;
}