mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
455 lines
9.1 KiB
CSS
455 lines
9.1 KiB
CSS
/* 自定义滚动条样式 */
|
||
div::-webkit-scrollbar {
|
||
width: 12px;
|
||
}
|
||
|
||
div::-webkit-scrollbar-thumb {
|
||
background-color: #08536e60;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
div::-webkit-scrollbar-track {
|
||
background-color: #60606060;
|
||
}
|
||
|
||
/******************************************************************************************************/
|
||
.dt-container {
|
||
color: white;
|
||
font-size: 14px;
|
||
padding-left: 0px;
|
||
}
|
||
|
||
/* div.dt-container .dt-paging {
|
||
margin-top: 10px;
|
||
} */
|
||
|
||
.dt-paging {
|
||
color: white;
|
||
margin-left: 0px;
|
||
}
|
||
|
||
div.dt-container .dt-paging .dt-paging-button {
|
||
line-height: 28px;
|
||
/* width: 32px; */
|
||
padding: 0 0px 0 0;
|
||
border: 1px solid white;
|
||
margin-right: 5px;
|
||
padding: 0 10px 0 10px;
|
||
}
|
||
|
||
div.dt-container .dt-paging .dt-paging-button.disabled,
|
||
div.dt-container .dt-paging .dt-paging-button.disabled:hover,
|
||
div.dt-container .dt-paging .dt-paging-button.disabled:active {
|
||
color: white !important;
|
||
border: 1px solid gray;
|
||
}
|
||
|
||
div.dt-container .dt-paging .dt-paging-button.current {
|
||
background: linear-gradient(to bottom, #1c797a 0%, #1c797a 100%);
|
||
}
|
||
|
||
div.dt-container .dt-paging .dt-paging-button.current:hover {
|
||
background: linear-gradient(to bottom, #1c797a 0%, #1c797a 100%);
|
||
}
|
||
|
||
div.dt-container .dt-paging .dt-paging-button:hover {
|
||
color: white !important;
|
||
border: 1px solid #111;
|
||
background-color: #111;
|
||
|
||
/* Chrome,Safari4+ */
|
||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111));
|
||
/* Chrome10+,Safari5.1+ */
|
||
background: -webkit-linear-gradient(top, #585858 0%, #111 100%);
|
||
/* FF3.6+ */
|
||
background: -moz-linear-gradient(top, #585858 0%, #111 100%);
|
||
/* IE10+ */
|
||
background: -ms-linear-gradient(top, #585858 0%, #111 100%);
|
||
/* Opera 11.10+ */
|
||
background: -o-linear-gradient(top, #585858 0%, #111 100%);
|
||
/* W3C */
|
||
background: linear-gradient(to bottom, #1c797a 0%, #1c797a 100%);
|
||
}
|
||
|
||
.mydt-ext {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin-top: 10px;
|
||
/* justify-content: flex-start; */
|
||
}
|
||
|
||
.mydt-ext .item {
|
||
margin-right: 30px;
|
||
}
|
||
|
||
/******************************************************************************************************/
|
||
|
||
/* table {
|
||
border: solid 2px #1c797a;
|
||
font-weight: bold;
|
||
color: white;
|
||
width: 100%;
|
||
text-align: center;
|
||
border-collapse: separate;
|
||
border-spacing: 0;
|
||
}
|
||
|
||
tr,
|
||
th {
|
||
height: 60px;
|
||
border-right: solid 1px gray;
|
||
border-bottom: solid 1px gray;
|
||
}
|
||
|
||
table thead {
|
||
background-color: #125c70;
|
||
height: 20px;
|
||
}
|
||
|
||
table thead tr {
|
||
font-size: 14px;
|
||
height: 20px;
|
||
}
|
||
|
||
table thead tr th {
|
||
height: 20px;
|
||
border-right: solid 1px gray;
|
||
border-bottom: solid 1px gray;
|
||
}
|
||
|
||
table tbody tr {
|
||
height: 24px;
|
||
font-size: 13px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
table tbody tr td {
|
||
height: 24px;
|
||
border-right: solid 1px gray;
|
||
border-bottom: solid 1px gray;
|
||
} */
|
||
|
||
/*
|
||
td:last-child,
|
||
th:last-child {
|
||
border-right-color: transparent;
|
||
}
|
||
|
||
td.details-control {
|
||
background: url('../assets/details_open.png') no-repeat center center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
tr.shown td.details-control {
|
||
background: url('../assets/details_close.png') no-repeat center center;
|
||
}
|
||
*/
|
||
|
||
|
||
|
||
#flex-sample {
|
||
display: flex;
|
||
/* 排列方向 flex-direction: row | row-reverse | column | column-reverse */
|
||
flex-direction: column;
|
||
/* 换行方式 flex-wrap: nowrap(不换行) | wrap（换行，第一行在上面） | wrap-reverse（换行，第一行在下面） */
|
||
flex-wrap: nowrap;
|
||
/* 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap */
|
||
flex-flow: column nowrap;
|
||
/* 主轴上的对齐方式 justify-content: flex-start | flex-end | center | space-between | space-around */
|
||
justify-content: center;
|
||
align-items: stretch;
|
||
/* flex-start | flex-end | center | baseline | stretch */
|
||
align-content: flex-start;
|
||
/* flex-start | flex-end | center | space-between | space-around | stretch */
|
||
}
|
||
|
||
.mypanelstat {
|
||
/* width: 100%; */
|
||
height: calc(90vh - 130px);
|
||
background-color: #052f4d;
|
||
/* margin-top: 10px; */
|
||
/* padding: 10px 10px 10px 10px; */
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.mask {
|
||
position: fixed;
|
||
left: 0px;
|
||
top: 0px;
|
||
width: 100%;
|
||
height: 100%;
|
||
font-size: 16px;
|
||
/* IE9以下不支持rgba模式 */
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
/* 兼容IE8及以下 */
|
||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000);
|
||
/* 显示： block， 不显示：none overlay.style.display = 'block' */
|
||
display: none;
|
||
}
|
||
|
||
/* 弹出框主体 */
|
||
.pop {
|
||
background-color: #e0e0e0;
|
||
min-width: 200px;
|
||
max-width: 600px;
|
||
height: 300px;
|
||
border-radius: 10px;
|
||
margin: 200px auto;
|
||
text-align: center;
|
||
/* overflow: hidden; */
|
||
}
|
||
|
||
/* 弹出框的标题 */
|
||
.pop_title {
|
||
font-size: 28px;
|
||
font-weight: 1000;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
background-color: #909090;
|
||
border-radius: 10px 10px 0 0;
|
||
/* border-bottom: solid 2px #8080ff; */
|
||
}
|
||
|
||
/* 弹出框的内容 */
|
||
.pop_content {
|
||
height: 50px;
|
||
line-height: 50px;
|
||
padding: 15px 20px;
|
||
color: #198754;
|
||
}
|
||
|
||
/* 弹出框的按钮栏 */
|
||
.pop_btn {
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
/* 弹出框的按钮 */
|
||
.pop_btn button {
|
||
color: #778899;
|
||
width: 40%;
|
||
height: 40px;
|
||
cursor: pointer;
|
||
border: solid 1px #cccccc;
|
||
border-radius: 5px;
|
||
margin: 5px 10px;
|
||
color: #ffffff;
|
||
background-color: #337ab7;
|
||
}
|
||
|
||
.myrow {
|
||
color: white;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-content: flex-start;
|
||
}
|
||
|
||
.mycol {
|
||
color: white;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.myblock {
|
||
background-color: chocolate;
|
||
width: 50px;
|
||
height: 50px;
|
||
margin: 10px 0px 0px 10px;
|
||
}
|
||
|
||
.mycardbtn {
|
||
background-color: #07486f;
|
||
border-radius: 10px;
|
||
margin: 0 10px 10px 10px;
|
||
padding: 10px 10px 10px 10px;
|
||
}
|
||
|
||
.mycardbtn-active {
|
||
background-color: #1d6466;
|
||
border-radius: 10px;
|
||
margin: 0 10px 10px 10px;
|
||
padding: 10px 10px 10px 10px;
|
||
border: 2px solid #01b7d1;
|
||
}
|
||
|
||
.mycardbtn:hover {
|
||
background-color: #1d6466;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.mycard {
|
||
background-color: #08365b;
|
||
width: 220px;
|
||
height: 340px;
|
||
border-radius: 10px;
|
||
margin: 10px 0px 0px 10px;
|
||
padding: 10px;
|
||
position: relative;
|
||
}
|
||
|
||
.mycard-param {
|
||
display: flex;
|
||
margin-top: 3px;
|
||
font-size: 14px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.mycard-param-key {
|
||
font-weight: bold;
|
||
color: #a6b8dd;
|
||
width: 70px;
|
||
}
|
||
|
||
.mycard-param-text {
|
||
font-weight: bold;
|
||
color: white;
|
||
}
|
||
|
||
.status-ok {
|
||
background-color: green;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 7px;
|
||
}
|
||
|
||
.status-err {
|
||
background-color: red;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 7px;
|
||
}
|
||
|
||
.text-ok {
|
||
color: green;
|
||
}
|
||
|
||
.text-err {
|
||
color: red;
|
||
}
|
||
|
||
.mychart {
|
||
background-color: #30303030;
|
||
}
|
||
|
||
|
||
.mypanel {
|
||
width: 100%;
|
||
height: 200px;
|
||
background-color: #052f4d;
|
||
border-radius: 8px;
|
||
padding: 10px 10px 10px 10px;
|
||
margin: 0px 0px 10px 0px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.mypanel-title {
|
||
height: 30px;
|
||
font-size: 16px;
|
||
font-weight: 1000;
|
||
color: #63c4d8;
|
||
}
|
||
|
||
.myline-l {
|
||
/* 前 5px 红色, 5px 后剩余部分透明 */
|
||
background: linear-gradient(#21ffd2, #21ffd2) left 2px / 5px 100% no-repeat;
|
||
padding-left: 16px;
|
||
height: 20px;
|
||
}
|
||
|
||
.myline-b {
|
||
background: linear-gradient(to right, #09c8d3ff, transparent) bottom / 100% 3px no-repeat;
|
||
padding-bottom: 5px;
|
||
}
|
||
|
||
.myline-lb {
|
||
/* 左侧 5px + 底部 3px 渐变透明 */
|
||
background:
|
||
linear-gradient(#21ffd2, #21ffd2) left 3px / 5px calc(100% - 12px) no-repeat,
|
||
linear-gradient(to right, #09c8d3ff, transparent) bottom / 100% 3px no-repeat;
|
||
padding-bottom: 5px;
|
||
padding-left: 16px;
|
||
padding-top: 0px;
|
||
}
|
||
|
||
|
||
.label-bkg {
|
||
border-radius: 5px;
|
||
background-color: #a0a0a010;
|
||
float: left;
|
||
/* margin-right: 10px; */
|
||
}
|
||
|
||
.label-key {
|
||
/* border: solid 1px white; */
|
||
width: 100%;
|
||
height: 50%;
|
||
font-size: 16px;
|
||
font-weight: 1000;
|
||
color: white;
|
||
/* text-align: center; */
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.label-val-lg {
|
||
/* border: solid 1px white; */
|
||
width: 65%;
|
||
height: 50%;
|
||
font-size: 36px;
|
||
color: #4dd7f0;
|
||
float: left;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: flex-end;
|
||
text-align: right;
|
||
}
|
||
|
||
.label-val {
|
||
/* border: solid 1px green; */
|
||
width: 65%;
|
||
height: 45%;
|
||
font-size: 16px;
|
||
font-weight: 1000;
|
||
color: #4dd7f0;
|
||
float: left;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
/* align-items: flex-end; */
|
||
}
|
||
|
||
.label-tail {
|
||
/* border: solid 1px white; */
|
||
padding-left: 10px;
|
||
width: 35%;
|
||
height: 45%;
|
||
/* font-size: 10px; */
|
||
font-weight: 1000;
|
||
color: white;
|
||
display: flex;
|
||
justify-content: left;
|
||
/* align-items: flex-end; */
|
||
}
|
||
|
||
#maskTest {
|
||
position: absolute;
|
||
z-index: 1;
|
||
left: 0px;
|
||
top: 0px;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.page {
|
||
padding: 5px 8px 5px 8px;
|
||
}
|
||
|
||
|
||
|
||
.btn-default {
|
||
background-color: #a5a5a5;
|
||
}
|
||
|
||
.btn-default:hover {
|
||
background-color: #858585;
|
||
} |