Compare commits
1 Commits
| Author | SHA1 | Date |
|---|---|---|
 cwchen
|
e126c2d386 |
|
|
@ -0,0 +1,149 @@
|
|||
let aqEnnable = true // 参数加密开关
|
||||
//后端路径
|
||||
const commonUrl = "http://11.158.16.194:21624/zhgd/";
|
||||
const URL_IP="http://11.158.16.194:21624/zhgd-web"
|
||||
//前端
|
||||
// const URL_IP="http://127.0.0.1:63343/ah_jjzhgd_webscreen"
|
||||
// const commonUrl = "http://127.0.0.1:18080/zhgd/";
|
||||
// //前端路径
|
||||
// let isc_login="http://iscssotest.ah.sgcc.com.cn/isc_sso/login?service=";
|
||||
/* 登录相关 */
|
||||
const login_url = commonUrl + "auth/login"; // 登录url
|
||||
const login_out = commonUrl + "auth/logout"; // 登出url
|
||||
const page_jump = commonUrl + "auth/pageJump"; // 登出url
|
||||
let sm4=new SM4Util();
|
||||
|
||||
const login_sg_page = URL_IP+"/sg_login.html" // 施工大屏登录页面
|
||||
const login_sc_page = URL_IP+"/sc_login.html" // 省侧大屏登录页面
|
||||
const login_sg_index = URL_IP+"/pages/home/navigation.html" // 施工大屏首页
|
||||
const login_sc_index = URL_IP+"/pages/web/index.html" // 省侧大屏首页
|
||||
/**
|
||||
* 公钥
|
||||
* @type {string}
|
||||
*/
|
||||
const public_key="04211520e8dc6d2051e67e6e770bd5550268c98105cd3b5b58e9c65958e78e627442343c9f237e01b3f316b1b63d7ddd70a8e6c0690a84c620b2903cb44cdfbe64";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 修改响应数据的函数
|
||||
function modifyResponseData(responseData) {
|
||||
// 在这里对响应数据进行修改
|
||||
if(responseData.decrypt){
|
||||
responseData=sm4.decryptDefault_CBC(responseData.data);
|
||||
}else{
|
||||
responseData=responseData.data;
|
||||
}
|
||||
if(typeof(responseData)=='object'){
|
||||
return responseData;
|
||||
}
|
||||
if(typeof(responseData)=='string'){
|
||||
responseData=removePadding(responseData)
|
||||
var responseData = JSON.parse(responseData);
|
||||
var modifiedData = responseData;
|
||||
return modifiedData;
|
||||
}
|
||||
return responseData;
|
||||
}
|
||||
|
||||
|
||||
function removePadding(decrypted) {
|
||||
const lastByte = decrypted.charCodeAt(decrypted.length - 1);
|
||||
if (lastByte <= 16) {
|
||||
for (let i = decrypted.length - lastByte; i < decrypted.length; i++) {
|
||||
if (decrypted.charCodeAt(i) !== lastByte) {
|
||||
return decrypted; // 如果填充不正确，返回原始字符串
|
||||
}
|
||||
}
|
||||
return decrypted.slice(0, -lastByte);
|
||||
}
|
||||
return decrypted;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* POST 请求 */
|
||||
function ajaxRequest(url, type, data, async, beforeFn, successFn, errorFn, contentType, isAes) {
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: type,
|
||||
headers: {
|
||||
"authorization": sessionStorage.getItem("zhgd_token"),
|
||||
"decrypt": isAes ? '' : 'decrypt'
|
||||
},
|
||||
data: data,
|
||||
async: async,
|
||||
beforeSend: beforeFn,
|
||||
contentType: contentType || "application/x-www-form-urlencoded; charset=utf-8",
|
||||
success: function (event, xhr, settings, data){
|
||||
event=modifyResponseData(event);
|
||||
successFn(event, xhr, settings, data);
|
||||
},
|
||||
error:function (event, xhr, settings, error) {
|
||||
errorFn(event, xhr, settings, error)
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/* 施工大屏跳转 ajax请求封装 */
|
||||
function ajaxRequest2(url, type, token, successFn, errorFn) {
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: type,
|
||||
headers: {
|
||||
"authorization": token,
|
||||
"decrypt": 'decrypt'
|
||||
},
|
||||
success: function (event, xhr, settings, data){
|
||||
event=modifyResponseData(event);
|
||||
successFn(event, xhr, settings, data);
|
||||
},
|
||||
error:function (event, xhr, settings, error) {
|
||||
errorFn(event, xhr, settings, error)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* GET请求 */
|
||||
function ajaxRequestGet(url, type, async, beforeFn, successFn, errorFn, isAes) {
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: type,
|
||||
headers: {
|
||||
"authorization": sessionStorage.getItem("zhgd_token"),
|
||||
"decrypt": isAes ? '' : 'decrypt'
|
||||
},
|
||||
async: async,
|
||||
beforeSend: beforeFn,
|
||||
success: function (event, xhr, settings, data){
|
||||
event=modifyResponseData(event);
|
||||
successFn(event, xhr, settings, data);
|
||||
},
|
||||
error:function (event, xhr, settings, error) {
|
||||
errorFn(event, xhr, settings, error)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/* GET请求 */
|
||||
function ajaxRequestGetExport(url, type, async, beforeFn, successFn, errorFn, isAes) {
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: type,
|
||||
headers: {
|
||||
"encryption":"encryption",
|
||||
"authorization": sessionStorage.getItem("zhgd_token"),
|
||||
"decrypt": isAes ? '' : 'decrypt'
|
||||
},
|
||||
xhrFields: {
|
||||
responseType: 'blob' // 告诉 xhr 我们期望返回的数据类型是 blob
|
||||
},
|
||||
async: async,
|
||||
beforeSend: beforeFn,
|
||||
success: successFn,
|
||||
error:errorFn
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
font-family: 'Alibaba PuHuiTi R';
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.main-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: space-evenly;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.top-box {
|
||||
width: 100%;
|
||||
height: 47%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.bot-box {
|
||||
width: 100%;
|
||||
height: 47%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.top-box-left{
|
||||
margin-top: 2%;
|
||||
margin-left: 1%;
|
||||
width: 49%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.top-box-left-top{
|
||||
width: 100%;
|
||||
height: 48%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.top-box-left-top-left{
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.today-font{
|
||||
color: #01E8DB;
|
||||
letter-spacing:1px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
height: 5%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.direction{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 30%;
|
||||
width: 100%;
|
||||
margin-top: 6%;
|
||||
}
|
||||
|
||||
.imgs{
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
margin: 5% 5%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.today-img{
|
||||
padding: 5% 2% 2% 2%;
|
||||
background: url("../../img/accessMge/today.png") no-repeat 0 0 / 100% 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.font-style{
|
||||
font-family: 'zcoolqingkehuangyouti';
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.span-style{
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.top-box-left-top-center{
|
||||
margin-left: 5%;
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cumulative-font{
|
||||
color: #01E7BE;
|
||||
letter-spacing:1px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
height: 5%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cumulative-img{
|
||||
padding: 0.5% 0% 0% 0%;
|
||||
width: 12%;
|
||||
height: 100%;
|
||||
margin: 5.5% 3% 5% 3%;
|
||||
text-align: center;
|
||||
background: url("../../img/accessMge/cumulative.png") no-repeat 0 0 / 100% 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.top-box-left-top-bot{
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.abnormalAlarm{
|
||||
height: 90%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.abnormalAlarmImg{
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
margin-left: 1%;
|
||||
}
|
||||
|
||||
|
||||
.top-box-left-bot{
|
||||
margin-top: 2%;
|
||||
width: 100%;
|
||||
height: 48%;
|
||||
}
|
||||
|
||||
|
||||
.top-box-right{
|
||||
margin-top: 2%;
|
||||
margin-left: 1%;
|
||||
width: 49%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.bot-box-left{
|
||||
margin-left: 1%;
|
||||
width: 38.5%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bot-box-right{
|
||||
margin-right: 1%;
|
||||
width: 58.5%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.img-style{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
.vehicle {
|
||||
background: url("../../img/accessMge/vehicle.png") no-repeat 0 0 / 100% 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.personnel {
|
||||
background: url("../../img/accessMge/personnel.png") no-repeat 0 0 / 100% 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.layui-form-item .layui-inline{
|
||||
margin-right: 0px
|
||||
}
|
||||
|
||||
.layui-form-label{
|
||||
padding-left: 1px;
|
||||
padding-right: 1px
|
||||
}
|
||||
|
||||
.layui-form-item .layui-input-inline{
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.layui-table-cell {
|
||||
height: auto;
|
||||
white-space: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
font-family: 'Alibaba PuHuiTi R';
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.main-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.left-box {
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.right-box {
|
||||
width: 75%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.select {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 8% 2% 2% 2%;
|
||||
box-sizing: border-box;
|
||||
background: url("../../img/alarmMge/select.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.alarm{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 5% 2% 2% 2%;
|
||||
box-sizing: border-box;
|
||||
background: url("../../img/alarmMge/alarm.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
.dark{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 4.5%;
|
||||
box-sizing: border-box;
|
||||
background: url("../../img/alarmMge/dark.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 4%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bright{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 4.5%;
|
||||
box-sizing: border-box;
|
||||
background: url("../../img/alarmMge/bright.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 4%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.alarmDialog{
|
||||
/* color: #000; */
|
||||
padding: 15px;
|
||||
}
|
||||
#alarmContent{
|
||||
color: #000;
|
||||
}
|
||||
#alarmMask{
|
||||
color: #000;
|
||||
}
|
||||
.black{
|
||||
color: #000;
|
||||
}
|
||||
.layui-table-init {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.layui-table-click, .layui-table-hover, .layui-table[lay-even] tbody tr:nth-child(even) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
|
@ -0,0 +1,293 @@
|
|||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
font-family: 'Alibaba PuHuiTi R', serif;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track-piece
|
||||
{
|
||||
background-color: #0d2225;
|
||||
-webkit-border-radius: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:vertical
|
||||
{
|
||||
height: 5px;
|
||||
background-color: #0d2225;
|
||||
-webkit-border-radius: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:horizontal
|
||||
{
|
||||
width: 5px;
|
||||
background-color: #0d2225;
|
||||
-webkit-border-radius: 6px;
|
||||
}
|
||||
|
||||
.layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-mend, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.layui-table {
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
/* 表格头部背景色 */
|
||||
th {
|
||||
color: #fff;
|
||||
font-weight: bold
|
||||
}
|
||||
.layui-table-header table thead{
|
||||
background: linear-gradient( 90deg, rgba(62,217,197,0) 0%, #2D998B 50%, rgba(62,217,197,0) 100%);
|
||||
}
|
||||
/*鼠标指向表格时,奇数行背景颜色*/
|
||||
.layui-table tbody tr:hover, .layui-table-hover {
|
||||
/* background-color: #19b0b9; */
|
||||
background: linear-gradient( 90deg, rgba(62,217,197,0) 0%, #2D998B 50%, rgba(62,217,197,0) 100%);
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-curr .layui-laypage-em {
|
||||
background-color: #278178;
|
||||
}
|
||||
|
||||
.layui-laypage a:hover {
|
||||
color: #278178;
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-skip {
|
||||
color: #3ACAB8;
|
||||
}
|
||||
|
||||
.layui-laypage-count{
|
||||
color:#278178;
|
||||
}
|
||||
|
||||
.layui-laypage button, .layui-laypage input {
|
||||
background-color: transparent;
|
||||
border: #278178 1px solid;
|
||||
color: #278178;
|
||||
}
|
||||
|
||||
.layui-table-view select[lay-ignore] {
|
||||
background-color: transparent;
|
||||
border: #278178 1px solid;
|
||||
color: #278178;
|
||||
}
|
||||
|
||||
.layui-table-page .layui-laypage span {
|
||||
color: #278178;
|
||||
}
|
||||
|
||||
.layui-table-page .layui-laypage a, .layui-table-page .layui-laypage span.layui-laypage-curr {
|
||||
color: #278178;
|
||||
}
|
||||
|
||||
/**公共类**/
|
||||
.layout{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.layout-vertical{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.background-img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 9% 2% 2% 2%;
|
||||
box-sizing: border-box;
|
||||
background-position: center center !important;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.right .background-img:nth-child(1){
|
||||
padding: 2.5% 1% 1% 1%;
|
||||
}
|
||||
|
||||
.right .background-img:nth-child(2){
|
||||
padding: 3% 1% 1% 1%;
|
||||
}
|
||||
|
||||
.Weather-img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background-position: center center !important;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/**主体部分**/
|
||||
|
||||
.large-frame{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: space-evenly;
|
||||
|
||||
}
|
||||
|
||||
.left{
|
||||
width: 22%;
|
||||
height: 99%;
|
||||
}
|
||||
|
||||
.right{
|
||||
width: 75%;
|
||||
height: 99%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
.left-down{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.right-down{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.left-under{
|
||||
width: 100%;
|
||||
height: 48%;
|
||||
}
|
||||
|
||||
.button-style{
|
||||
color: #298B83;
|
||||
border: #278178 1px solid;
|
||||
padding: 4px 9px;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.left-under .layout:nth-child(1){
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.state-box{
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.state{
|
||||
display: flex;
|
||||
width: 4.5%;
|
||||
height: 25%;
|
||||
align-items: center;
|
||||
margin-left: 3%;
|
||||
background-position: center center !important;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
.state-box .state:nth-child(1) {
|
||||
background-image: url("../../img/consQuality/QualityInspection2.png");
|
||||
}
|
||||
.state-box .state:nth-child(3) {
|
||||
background-image: url("../../img/consQuality/QualityInspection1.png");
|
||||
}
|
||||
.state-box .state:nth-child(5) {
|
||||
background-image: url("../../img/consQuality/QualityInspection3.png");
|
||||
}
|
||||
|
||||
.state-box .state:nth-child(2) {
|
||||
border: #e24e3b 1px solid;
|
||||
color: #e24e3b;
|
||||
}
|
||||
|
||||
.monitor-data {
|
||||
width: 28%;
|
||||
height: 83%;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.monitor-icon {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
background: url("../../img/consQuality/QualityInspection-1.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.environment{
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
|
||||
}
|
||||
|
||||
#divDialog{
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
position: relative;
|
||||
}
|
||||
/*
|
||||
#divDialog.shuiYin {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border: 1px solid #000;
|
||||
overflow: hidden;
|
||||
} */
|
||||
|
||||
#divDialog::before {
|
||||
/* content: "大大的水印"; */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
color: rgba(0, 0, 0, 0.1);
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
line-height: 100vh;
|
||||
transform: rotate(-30deg);
|
||||
filter:brightness(0.1);
|
||||
}
|
||||
|
||||
|
||||
#deviceName{
|
||||
color: #000;
|
||||
}
|
||||
#ID-laydate-start-date-1{
|
||||
color: #000;
|
||||
}#ID-laydate-end-date-1{
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
.right-down-right{
|
||||
width: 100%;
|
||||
height: 92%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-mend, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.layui-table {
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* 表格头部背景色 */
|
||||
th {
|
||||
color: #fff;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.layui-table-header table thead{
|
||||
background: linear-gradient( 90deg, rgba(62,217,197,0) 0%, #2D998B 50%, rgba(62,217,197,0) 100%);
|
||||
}
|
||||
|
||||
/*鼠标指向表格时,奇数行背景颜色*/
|
||||
.layui-table tbody tr:hover, .layui-table-hover {
|
||||
/* background-color: #19b0b9; */
|
||||
background: linear-gradient( 90deg, rgba(62,217,197,0) 0%, #2D998B 50%, rgba(62,217,197,0) 100%);
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-curr .layui-laypage-em {
|
||||
background-color: #3ACAB8;
|
||||
}
|
||||
|
||||
.layui-laypage a:hover {
|
||||
color: #3ACAB8;
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-skip {
|
||||
color: #3ACAB8;
|
||||
}
|
||||
|
||||
.layui-laypage-count{
|
||||
color:#3ACAB8;
|
||||
}
|
||||
|
||||
.layui-laypage button, .layui-laypage input {
|
||||
background-color: transparent;
|
||||
border: #3ACAB8 1px solid;
|
||||
color: #3ACAB8;
|
||||
}
|
||||
|
||||
.layui-table-view select[lay-ignore] {
|
||||
background-color: transparent;
|
||||
border: #3ACAB8 1px solid;
|
||||
color: #3ACAB8;
|
||||
}
|
||||
|
||||
.layui-table-page .layui-laypage span {
|
||||
color: #3ACAB8;
|
||||
}
|
||||
|
||||
.layui-table-page .layui-laypage a, .layui-table-page .layui-laypage span.layui-laypage-curr {
|
||||
color: #3ACAB8;
|
||||
}
|
||||
|
||||
.layout-vertical{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.layui-laydate-content th{
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track-piece
|
||||
{
|
||||
background-color: #0d2225;
|
||||
-webkit-border-radius: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:vertical
|
||||
{
|
||||
height: 5px;
|
||||
background-color: #0d2225;
|
||||
-webkit-border-radius: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:horizontal
|
||||
{
|
||||
width: 5px;
|
||||
background-color: #0d2225;
|
||||
-webkit-border-radius: 6px;
|
||||
}
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
font-family: 'Alibaba PuHuiTi R';
|
||||
}
|
||||
|
||||
#main-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#left-box {
|
||||
width: 21.25%;
|
||||
background: url(../../img/alarmMge/select.png) no-repeat 0 0 / 100% 100%;
|
||||
height: 99%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#right-box {
|
||||
width: 75.85%;
|
||||
height: 99%;
|
||||
background: url(../../img/alarmMge/dataAnalysis.png) no-repeat 0 0 / 100% 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#echarts-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#report-box {
|
||||
width: 35%;
|
||||
height: 90%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#one-echarts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ul-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10% 0 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ul-box li {
|
||||
width: 96%;
|
||||
margin: 0 2%;
|
||||
height: 40px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.check {
|
||||
background: url(../../img/alarmMge/bright.png) no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
.nocheck {
|
||||
background: url(../../img/alarmMge/dark.png) no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
#report-box table {
|
||||
width: 96%;
|
||||
height: 100%;
|
||||
margin: 0 2%;
|
||||
table-layout: fixed;
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#report-box table tr td {
|
||||
width: 50%;
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
border: 1px solid #34b9aa;
|
||||
}
|
||||
#report-box table thead{
|
||||
height: 100px;
|
||||
}
|
||||
#report-box table tbody{
|
||||
height: calc(100% - 100px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track-piece
|
||||
{
|
||||
background-color: #0d2225;
|
||||
-webkit-border-radius: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:vertical
|
||||
{
|
||||
height: 5px;
|
||||
background-color: #0d2225;
|
||||
-webkit-border-radius: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:horizontal
|
||||
{
|
||||
width: 5px;
|
||||
background-color: #0d2225;
|
||||
-webkit-border-radius: 6px;
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
@font-face {
|
||||
font-family: 'zcoolqingkehuangyouti';
|
||||
src: url('../font/zcoolqingkehuangyouti-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: auto;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Alibaba PuHuiTi R';
|
||||
src: url('../font/Alibaba-PuHuiTi-R.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: auto;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'AlimamaShuHeiTi';
|
||||
src: url('../font/AlimamaShuHeiTi-Bold.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: auto;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #000;
|
||||
font-family: 'Alibaba PuHuiTi R';
|
||||
}
|
||||
|
||||
html {
|
||||
background: url("../../img/back.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
#nav-box {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#nav-left {
|
||||
width: 27%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#nav-left button {
|
||||
position: absolute;
|
||||
left: 22%;
|
||||
top: 1.5%;
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
background-position: center center !important;
|
||||
color: #00FFF4;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#nav-left form {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: self-end;
|
||||
}
|
||||
|
||||
.layui-form-select {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.layui-form-select .layui-input {
|
||||
background-color: transparent;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
background-image: linear-gradient(to bottom, #DAF8F4FF, #44DEC9FA);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-weight: bold;
|
||||
border-color: #2EA699;
|
||||
}
|
||||
|
||||
.layui-form-select .layui-edge {
|
||||
border-top-color: #2EA699;
|
||||
}
|
||||
|
||||
|
||||
.layui-input:hover,
|
||||
.layui-textarea:hover {
|
||||
border-color: #16b777 !important;
|
||||
}
|
||||
|
||||
#nav-icon {
|
||||
width: 120px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
left: 81%;
|
||||
top: 0.5%;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
#nav-icon img {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#nav-right {
|
||||
width: 73%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#nav-right ul {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
#nav-right ul li {
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.nocheck {
|
||||
background: url("../../img/navigation/no_check_nav.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
color: #009B94;
|
||||
}
|
||||
|
||||
.checked {
|
||||
background: url("../../img/navigation/check_nav.png") no-repeat 0 0 / 100% 100% !important;
|
||||
background-position: center center !important;
|
||||
color: #00FFF4;
|
||||
}
|
||||
|
||||
#nav-right ul li p {
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
#ifr-box {
|
||||
width: 100%;
|
||||
height: calc(100vh - 100px)
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.layui-form-select dl {
|
||||
background-color: #144e49;
|
||||
}
|
||||
|
|
@ -0,0 +1,199 @@
|
|||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
font-family: 'Alibaba PuHuiTi R';
|
||||
}
|
||||
|
||||
#main-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#left-box {
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
padding-top: 0.85%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#pro-introduct {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 5% 2% 2% 2%;
|
||||
box-sizing: border-box;
|
||||
background: url("../../img/index/pro_brief.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#img-carousel img {
|
||||
width: 900px;
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
#pro-desc {
|
||||
width: 100%;
|
||||
height: calc(100% - 380px);
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#pro-desc p {
|
||||
/*首行缩进*/
|
||||
text-indent: 36px;
|
||||
/*字体间距*/
|
||||
line-height: 36px;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
#right-box {
|
||||
width: 47%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding-top: 0.85%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#real-time-monitor {
|
||||
width: 100%;
|
||||
height: 22.7%;
|
||||
background: url("../../img/index/real_time_monitor.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.monitor-data {
|
||||
width: 16%;
|
||||
height: 60%;
|
||||
margin-top: 3%;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.monitor-data p:nth-child(1) span:nth-child(1) {
|
||||
font-size: 24px;
|
||||
color: #79FFFFFF;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.monitor-data p:nth-child(1) span:nth-child(2) {
|
||||
margin-left: 5px;
|
||||
color: #79FFFFFF;
|
||||
}
|
||||
|
||||
.monitor-icon {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.monitor-data:nth-child(1) .monitor-icon {
|
||||
background: url("../../img/index/wd.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.monitor-data:nth-child(2) .monitor-icon {
|
||||
background: url("../../img/index/sd.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.monitor-data:nth-child(3) .monitor-icon {
|
||||
background: url("../../img/index/zs.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.monitor-data:nth-child(4) .monitor-icon {
|
||||
background: url("../../img/index/gz.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.monitor-data:nth-child(5) .monitor-icon {
|
||||
background: url("../../img/index/pm2.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.monitor-data:nth-child(6) .monitor-icon {
|
||||
background: url("../../img/index/pm10.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
#logo{
|
||||
background: url("../../img/index/pm10.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
#pro-risk {
|
||||
width: 100%;
|
||||
height: 29.6%;
|
||||
background: url("../../img/index/pro_risk.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
#pro-progress {
|
||||
width: 100%;
|
||||
height: 14.2%;
|
||||
background: url("../../img/index/pro_progress.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
#pro-start,
|
||||
#pro-end {
|
||||
width: 15%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#pro-start p:nth-child(1),
|
||||
#pro-end p:nth-child(1) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#pro-start p:nth-child(2),
|
||||
#pro-end p:nth-child(2) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#pro-progress-echarts {
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#pro-cost {
|
||||
width: 100%;
|
||||
height: 28.2%;
|
||||
background: url("../../img/index/pro_cost.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
img {
|
||||
image-rendering: -moz-crisp-edges;
|
||||
/* Firefox */
|
||||
image-rendering: -o-crisp-edges;
|
||||
/* Opera */
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
/*Webkit (non-standard naming) */
|
||||
image-rendering: crisp-edges;
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
/* IE (non-standard property) */
|
||||
}
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
font-family: 'Alibaba PuHuiTi R';
|
||||
letter-spacing: 1px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
html {
|
||||
background: url("../img/login_back.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
#content {
|
||||
width: 34%;
|
||||
height: 48%;
|
||||
position: relative;
|
||||
left: 33%;
|
||||
top: 27%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#pro-title {
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
#login-form {
|
||||
width: 60%;
|
||||
height: calc(100% - 55px);
|
||||
}
|
||||
|
||||
.layui-form-item input {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
height: 40px;
|
||||
border-color: #2EA699;
|
||||
}
|
||||
|
||||
.layui-form-item img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.layui-form-item .layui-btn {
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.layui-layer-dialog .layui-layer-content {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.layui-input-affix .layui-icon {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.layui-input-affix .layui-icon:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.layui-input:hover, .layui-textarea:hover {
|
||||
border-color: #16b777 !important;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
color: rgb(153, 152, 152) !important;
|
||||
}
|
||||
|
||||
input::-moz-placeholder {
|
||||
/* Mozilla Firefox 19+ */
|
||||
color: rgb(191, 191, 191) !important;
|
||||
}
|
||||
|
||||
input:-moz-placeholder {
|
||||
/* Mozilla Firefox 4 to 18 */
|
||||
color: rgb(191, 191, 191) !important;
|
||||
}
|
||||
|
||||
input:-ms-input-placeholder {
|
||||
/* Internet Explorer 10-11 */
|
||||
color: rgb(191, 191, 191) !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,619 @@
|
|||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
font-family: 'Alibaba PuHuiTi R', serif;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background-color: #0d2225;
|
||||
-webkit-border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:vertical {
|
||||
height: 5px;
|
||||
background-color: #0d2225;
|
||||
-webkit-border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:horizontal {
|
||||
width: 5px;
|
||||
background-color: #0d2225;
|
||||
-webkit-border-radius: 6px;
|
||||
}
|
||||
|
||||
.layui-table td,
|
||||
.layui-table th,
|
||||
.layui-table-col-set,
|
||||
.layui-table-fixed-r,
|
||||
.layui-table-grid-down,
|
||||
.layui-table-header,
|
||||
.layui-table-mend,
|
||||
.layui-table-page,
|
||||
.layui-table-tips-main,
|
||||
.layui-table-tool,
|
||||
.layui-table-total,
|
||||
.layui-table-view,
|
||||
.layui-table[lay-skin=line],
|
||||
.layui-table[lay-skin=row] {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.layui-table {
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
/* 表格头部背景色 */
|
||||
th {
|
||||
color: #fff;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.layui-table-header table thead {
|
||||
background: linear-gradient(90deg, rgba(62, 217, 197, 0) 0%, #2D998B 50%, rgba(62, 217, 197, 0) 100%);
|
||||
}
|
||||
|
||||
/*鼠标指向表格时,奇数行背景颜色*/
|
||||
.layui-table tbody tr:hover,
|
||||
.layui-table-hover {
|
||||
/* background-color: #19b0b9; */
|
||||
background: linear-gradient(90deg, rgba(62, 217, 197, 0) 0%, #2D998B 50%, rgba(62, 217, 197, 0) 100%);
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-curr .layui-laypage-em {
|
||||
background-color: #3ACAB8;
|
||||
}
|
||||
|
||||
.layui-laypage a:hover {
|
||||
color: #3ACAB8;
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-skip {
|
||||
color: #3ACAB8;
|
||||
}
|
||||
|
||||
.layui-laypage-count {
|
||||
color: #3ACAB8;
|
||||
}
|
||||
|
||||
.layui-laypage button,
|
||||
.layui-laypage input {
|
||||
background-color: transparent;
|
||||
border: #3ACAB8 1px solid;
|
||||
color: #3ACAB8;
|
||||
}
|
||||
|
||||
.layui-table-view select[lay-ignore] {
|
||||
background-color: transparent;
|
||||
border: #3ACAB8 1px solid;
|
||||
color: #3ACAB8;
|
||||
}
|
||||
|
||||
.layui-table-page .layui-laypage span {
|
||||
color: #3ACAB8;
|
||||
}
|
||||
|
||||
.layui-table-page .layui-laypage a,
|
||||
.layui-table-page .layui-laypage span.layui-laypage-curr {
|
||||
color: #3ACAB8;
|
||||
}
|
||||
|
||||
/**公共类**/
|
||||
.layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.layout-vertical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.background-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 9% 2% 2% 2%;
|
||||
box-sizing: border-box;
|
||||
background-position: center center !important;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.right-under-left .background-img:nth-child(1) {
|
||||
padding: 0% 2% 2% 2%;
|
||||
}
|
||||
|
||||
.right-under-right .background-img:nth-child(1) {
|
||||
padding: 0% 2% 2% 2%;
|
||||
}
|
||||
|
||||
.right-down .background-img:nth-child(1) {
|
||||
/* padding: 0% 1% 1% 1%; */
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.Weather-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background-position: center center !important;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/**主体部分**/
|
||||
.large-frame {
|
||||
width: 100%;
|
||||
height: 99%;
|
||||
justify-content: space-evenly;
|
||||
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 23.9%;
|
||||
height: 99%;
|
||||
padding-top: 0.85% !important;
|
||||
padding-left: 0.85% !important;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 75%;
|
||||
height: 99%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding-top: 0.85% !important;
|
||||
padding-right: 0.85% !important;
|
||||
}
|
||||
|
||||
.left-down {
|
||||
width: 100%;
|
||||
height: 49.3%;
|
||||
}
|
||||
|
||||
.right-down {
|
||||
width: 100%;
|
||||
height: 49.3%;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.left-under {
|
||||
width: 100%;
|
||||
height: 49.3%;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.right-under-left {
|
||||
width: 49.5%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.right-under-right {
|
||||
width: 49.5%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.Weather-layout {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.Weather-down {
|
||||
width: 100%;
|
||||
height: 55%;
|
||||
display: flex;
|
||||
/*border: #0a84ff 1px solid;*/
|
||||
}
|
||||
|
||||
.weather-down-left {
|
||||
width: 55%;
|
||||
height: 100%;
|
||||
padding: 11% 0 0 15%;
|
||||
box-sizing: border-box;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
.substance {
|
||||
display: flex;
|
||||
width: 80%;
|
||||
height: 50%;
|
||||
padding-top: 8%;
|
||||
}
|
||||
|
||||
.substance1 {
|
||||
width: 33%;
|
||||
height: 50%;
|
||||
box-sizing: border-box;
|
||||
background-position: center center !important;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.substance2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 7%;
|
||||
}
|
||||
|
||||
.substance3 {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* padding-top: 8%; */
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.substance4 {
|
||||
width: 17%;
|
||||
height: 48%;
|
||||
box-sizing: border-box;
|
||||
background-position: center center !important;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.substance5 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 7%;
|
||||
}
|
||||
|
||||
|
||||
.weather-down-right {
|
||||
display: flex;
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.weather-box {
|
||||
width: 78%;
|
||||
height: 24%;
|
||||
border: #00FFF4 1px solid;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.state-box {
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.state {
|
||||
display: flex;
|
||||
width: 15%;
|
||||
height: 41%;
|
||||
margin-right: 5%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.state-box .state:nth-child(1) {
|
||||
border: #00FFF4 1px solid;
|
||||
color: #00FFF4;
|
||||
}
|
||||
|
||||
.state-box .state:nth-child(2) {
|
||||
border: #e24e3b 1px solid;
|
||||
color: #e24e3b;
|
||||
}
|
||||
|
||||
#flex-Box {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.monitor-item {
|
||||
width: 30%;
|
||||
height: 105px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.monitor-item p:nth-child(1) span:nth-child(1) {
|
||||
font-size: 24px;
|
||||
color: #79FFFFFF;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.monitor-item p:nth-child(1) span:nth-child(2) {
|
||||
margin-left: 5px;
|
||||
color: #79FFFFFF;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
background: url("../../img/index/pm10.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.redColor {
|
||||
color: red !important;
|
||||
}
|
||||
|
||||
.monitor-data {
|
||||
width: 28%;
|
||||
height: 83%;
|
||||
/* margin-top: 3%; */
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
|
||||
.monitor-data p:nth-child(1) span:nth-child(1) {
|
||||
font-size: 24px;
|
||||
color: #79FFFFFF;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.monitor-data p:nth-child(1) span:nth-child(2) {
|
||||
margin-left: 5px;
|
||||
color: #79FFFFFF;
|
||||
}
|
||||
|
||||
.monitor-icon {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.left-under .layout .monitor-data.wd .monitor-icon {
|
||||
background: url("../../img/index/wd.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.left-under .layout .monitor-data.sd .monitor-icon {
|
||||
background: url("../../img/index/sd.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
#logo {
|
||||
background: url("../../img/index/sd.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.left-under .layout .monitor-data.zs .monitor-icon {
|
||||
background: url("../../img/index/zs.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.left-under .layout .monitor-data.gz .monitor-icon {
|
||||
background: url("../../img/index/gz.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.left-under .layout .monitor-data.pm2 .monitor-icon {
|
||||
background: url("../../img/index/pm2.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.left-under .layout .monitor-data.pm10 .monitor-icon {
|
||||
background: url("../../img/index/pm10.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
|
||||
.left-under .layout .monitor-data.ryht .monitor-icon {
|
||||
background: url("../../img/operEnvironment/eyht.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.left-under .layout .monitor-data.krqt .monitor-icon {
|
||||
background: url("../../img/operEnvironment/krqt.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.left-under .layout .monitor-data.hyl .monitor-icon {
|
||||
background: url("../../img/operEnvironment/hyl.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.left-under .layout .monitor-data.lhq .monitor-icon {
|
||||
background: url("../../img/operEnvironment/lhq.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
|
||||
.environment {
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
/*display: flex;*/
|
||||
/*flex-direction: column;*/
|
||||
/*justify-content: space-between;*/
|
||||
/*align-items: center;*/
|
||||
|
||||
}
|
||||
|
||||
.layui-layer-dialog .layui-layer-content {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.environments {
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
/*display: flex;*/
|
||||
/*flex-direction: column;*/
|
||||
/*justify-content: space-between;*/
|
||||
/*align-items: center;*/
|
||||
|
||||
}
|
||||
|
||||
.environment-equipment {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.right-down-left .environment-equipment:nth-child(1) {
|
||||
background: url("../../img/operEnvironment/daylightDisplacement-abnormal.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.right-down-left .environment-equipment:nth-child(2) {
|
||||
background: url("../../img/operEnvironment/daylightDisplacement-abnormal.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.environment .environment-equipment:nth-child(1) {
|
||||
background: url("../../img/operEnvironment/LimitedMonitoring-abnormal.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.environment .environment-equipment:nth-child(2) {
|
||||
background: url("../../img/operEnvironment/LimitedMonitoring-abnormal.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.environment .environment-equipment:nth-child(3) {
|
||||
background: url("../../img/operEnvironment/LimitedMonitoring-abnormal.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.environment .environment-equipment:nth-child(4) {
|
||||
background: url("../../img/operEnvironment/LimitedMonitoring-abnormal.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.environments .environment-equipment:nth-child(1) {
|
||||
background: url("../../img/operEnvironment/LimitedMonitoring-abnormal.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.environments .environment-equipment:nth-child(2) {
|
||||
background: url("../../img/operEnvironment/LimitedMonitoring-abnormal.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.environments .environment-equipment:nth-child(3) {
|
||||
background: url("../../img/operEnvironment/LimitedMonitoring-abnormal.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.environments .environment-equipment:nth-child(4) {
|
||||
background: url("../../img/operEnvironment/LimitedMonitoring-abnormal.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
|
||||
.Weather-under {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
/*border: #591212 1px solid;*/
|
||||
}
|
||||
|
||||
.right-down-left {
|
||||
width: 35%;
|
||||
/*height: 35%;*/
|
||||
|
||||
}
|
||||
|
||||
.right-down-right {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
/* overflow: auto; */
|
||||
}
|
||||
|
||||
.right-down-left .item,
|
||||
.environment .item,
|
||||
.environments .item{
|
||||
width: 140px;
|
||||
height: 120px;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.right-down-left,
|
||||
.environment,
|
||||
.environments{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.backData {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#zhsh {
|
||||
width: 49.3%;
|
||||
height: 100%;
|
||||
background: url("../../img/operEnvironment/zhsh.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
#zhsh-table-box {
|
||||
width: 98%;
|
||||
height: 100%;
|
||||
padding: 8% 0 0 0;
|
||||
box-sizing: border-box;
|
||||
margin: 0 1%;
|
||||
}
|
||||
|
|
@ -0,0 +1,325 @@
|
|||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
font-family: 'Alibaba PuHuiTi R', serif;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track-piece
|
||||
{
|
||||
background-color: #0d2225;
|
||||
-webkit-border-radius: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:vertical
|
||||
{
|
||||
height: 5px;
|
||||
background-color: #0d2225;
|
||||
-webkit-border-radius: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:horizontal
|
||||
{
|
||||
width: 5px;
|
||||
background-color: #0d2225;
|
||||
-webkit-border-radius: 6px;
|
||||
}
|
||||
|
||||
.layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-mend, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.layui-table {
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
/* 表格头部背景色 */
|
||||
th {
|
||||
color: #fff;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.layui-table-header table thead{
|
||||
background: linear-gradient( 90deg, rgba(62,217,197,0) 0%, #2D998B 50%, rgba(62,217,197,0) 100%);
|
||||
}
|
||||
|
||||
/*鼠标指向表格时,奇数行背景颜色*/
|
||||
.layui-table tbody tr:hover, .layui-table-hover {
|
||||
/* background-color: #19b0b9; */
|
||||
background: linear-gradient( 90deg, rgba(62,217,197,0) 0%, #2D998B 50%, rgba(62,217,197,0) 100%);
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-curr .layui-laypage-em {
|
||||
background-color: #278178;
|
||||
}
|
||||
|
||||
.layui-laypage a:hover {
|
||||
color: #278178;
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-skip {
|
||||
color: #3ACAB8;
|
||||
}
|
||||
|
||||
.layui-laypage-count{
|
||||
color:#278178;
|
||||
}
|
||||
|
||||
.layui-laypage button, .layui-laypage input {
|
||||
background-color: transparent;
|
||||
border: #278178 1px solid;
|
||||
color: #278178;
|
||||
}
|
||||
|
||||
.layui-table-view select[lay-ignore] {
|
||||
background-color: transparent;
|
||||
border: #278178 1px solid;
|
||||
color: #278178;
|
||||
}
|
||||
|
||||
.layui-table-page .layui-laypage span {
|
||||
color: #278178;
|
||||
}
|
||||
|
||||
.layui-table-page .layui-laypage a, .layui-table-page .layui-laypage span.layui-laypage-curr {
|
||||
color: #278178;
|
||||
}
|
||||
|
||||
/**公共类**/
|
||||
.layout{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.layout-vertical{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.background-img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 9% 2% 2% 2%;
|
||||
box-sizing: border-box;
|
||||
background-position: center center !important;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.right .background-img:nth-child(1){
|
||||
padding: 8.5% 1% 1% 1%;
|
||||
}
|
||||
|
||||
/*.right .background-img:nth-child(2){*/
|
||||
/* padding: 3% 1% 1% 1%;*/
|
||||
/*}*/
|
||||
|
||||
.Weather-img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background-position: center center !important;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/**主体部分**/
|
||||
|
||||
.large-frame{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: space-evenly;
|
||||
|
||||
}
|
||||
|
||||
.left{
|
||||
width: 23%;
|
||||
height: 99%;
|
||||
}
|
||||
|
||||
.middle{
|
||||
width: 50%;
|
||||
height: 99%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
.right{
|
||||
width: 24%;
|
||||
height: 99%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
.left-down{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.right-down{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.left-under{
|
||||
width: 100%;
|
||||
height: 48%;
|
||||
}
|
||||
|
||||
.button-style{
|
||||
color: #298B83;
|
||||
border: #278178 1px solid;
|
||||
padding: 4px 9px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.left-under .layout:nth-child(1){
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.state-box{
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.state{
|
||||
display: flex;
|
||||
width: 4.5%;
|
||||
height: 25%;
|
||||
align-items: center;
|
||||
margin-left: 3%;
|
||||
background-position: center center !important;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
.state-box .state:nth-child(1) {
|
||||
background-image: url("../../img/consQuality/QualityInspection2.png");
|
||||
}
|
||||
.state-box .state:nth-child(3) {
|
||||
background-image: url("../../img/consQuality/QualityInspection1.png");
|
||||
}
|
||||
.state-box .state:nth-child(5) {
|
||||
background-image: url("../../img/consQuality/QualityInspection3.png");
|
||||
}
|
||||
|
||||
.state-box .state:nth-child(2) {
|
||||
border: #e24e3b 1px solid;
|
||||
color: #e24e3b;
|
||||
}
|
||||
|
||||
.monitor-data {
|
||||
width: 28%;
|
||||
height: 83%;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
|
||||
.environment{
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* 弹出框样式 */
|
||||
#popup {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
#popup {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.left-down-left{
|
||||
width: 100%;
|
||||
height: 15%;
|
||||
}
|
||||
|
||||
.left-down-down{
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.layui-layer-dialog .layui-layer-content {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
}
|
||||
.drawing-panel {
|
||||
position: fixed;
|
||||
bottom: 44.5rem;
|
||||
margin-left: -49rem;
|
||||
padding: 1rem 1rem;
|
||||
border-radius: .25rem;
|
||||
/*background-color: #fff;*/
|
||||
/*box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);*/
|
||||
}
|
||||
.btn {
|
||||
width: 105px;
|
||||
height: 30px;
|
||||
float: left;
|
||||
background-color: #fff;
|
||||
color: rgba(27, 142, 236, 1);
|
||||
font-size: 14px;
|
||||
border:1px solid rgba(27, 142, 236, 1);
|
||||
border-radius: 5px;
|
||||
margin: 0 5px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
}
|
||||
.btn:hover {
|
||||
background-color: rgba(27, 142, 236, 0.8);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#tree>.layui-tree>.layui-tree-txt{
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.layui-table-cell {
|
||||
height: auto;
|
||||
white-space: normal;
|
||||
}
|
||||
.layui-tree-entry:hover {
|
||||
background: linear-gradient( 90deg, rgba(62,217,197,0) 0%, #2D998B 50%, rgba(62,217,197,0) 100%);
|
||||
}
|
||||
|
|
@ -0,0 +1,315 @@
|
|||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
font-family: 'Alibaba PuHuiTi R', serif;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track-piece
|
||||
{
|
||||
background-color: #0d2225;
|
||||
-webkit-border-radius: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:vertical
|
||||
{
|
||||
height: 5px;
|
||||
background-color: #0d2225;
|
||||
-webkit-border-radius: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:horizontal
|
||||
{
|
||||
width: 5px;
|
||||
background-color: #0d2225;
|
||||
-webkit-border-radius: 6px;
|
||||
}
|
||||
|
||||
.layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-mend, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.layui-table {
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
.layui-table-click, .layui-table-hover, .layui-table[lay-even] tbody tr:nth-child(even) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
/* 表格头部背景色 */
|
||||
th {
|
||||
color: #fff;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.layui-table-header table thead{
|
||||
background: linear-gradient( 90deg, rgba(62,217,197,0) 0%, #2D998B 50%, rgba(62,217,197,0) 100%);
|
||||
}
|
||||
|
||||
/*鼠标指向表格时,奇数行背景颜色*/
|
||||
.layui-table tbody tr:hover, .layui-table-hover {
|
||||
/* background-color: #19b0b9; */
|
||||
background: linear-gradient( 90deg, rgba(62,217,197,0) 0%, #2D998B 50%, rgba(62,217,197,0) 100%);
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-curr .layui-laypage-em {
|
||||
background-color: #278178;
|
||||
}
|
||||
|
||||
.layui-laypage a:hover {
|
||||
color: #278178;
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-skip {
|
||||
color: #3ACAB8;
|
||||
}
|
||||
|
||||
.layui-laypage-count{
|
||||
color:#278178;
|
||||
}
|
||||
|
||||
.layui-laypage button, .layui-laypage input {
|
||||
background-color: transparent;
|
||||
border: #278178 1px solid;
|
||||
color: #278178;
|
||||
}
|
||||
|
||||
.layui-table-view select[lay-ignore] {
|
||||
background-color: transparent;
|
||||
border: #278178 1px solid;
|
||||
color: #278178;
|
||||
}
|
||||
|
||||
.layui-table-page .layui-laypage span {
|
||||
color: #278178;
|
||||
}
|
||||
|
||||
.layui-table-page .layui-laypage a, .layui-table-page .layui-laypage span.layui-laypage-curr {
|
||||
color: #278178;
|
||||
}
|
||||
|
||||
/**公共类**/
|
||||
.layout{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.layout-vertical{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.background-img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 5% 2% 2% 2%;
|
||||
box-sizing: border-box;
|
||||
background-position: center center !important;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.right-down .background-img:nth-child(1){
|
||||
padding: 4% 2% 2% 2%;
|
||||
}
|
||||
|
||||
/*.right .background-img:nth-child(2){*/
|
||||
/* padding: 3% 1% 1% 1%;*/
|
||||
/*}*/
|
||||
|
||||
.Weather-img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background-position: center center !important;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/**主体部分**/
|
||||
|
||||
.large-frame{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: space-evenly;
|
||||
|
||||
}
|
||||
|
||||
.left{
|
||||
width: 40%;
|
||||
height: 99%;
|
||||
}
|
||||
|
||||
.middle{
|
||||
width: 58%;
|
||||
height: 99%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
.right{
|
||||
width: 24%;
|
||||
height: 99%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
.left-down{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.right-down{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.left-under{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.button-style{
|
||||
color: #298B83;
|
||||
border: #278178 1px solid;
|
||||
padding: 4px 9px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.left-under .layout:nth-child(1){
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.state-box{
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.state{
|
||||
display: flex;
|
||||
width: 4.5%;
|
||||
height: 25%;
|
||||
align-items: center;
|
||||
margin-left: 3%;
|
||||
background-position: center center !important;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
.state-box .state:nth-child(1) {
|
||||
background-image: url("../../img/consQuality/QualityInspection2.png");
|
||||
}
|
||||
.state-box .state:nth-child(3) {
|
||||
background-image: url("../../img/consQuality/QualityInspection1.png");
|
||||
}
|
||||
.state-box .state:nth-child(5) {
|
||||
background-image: url("../../img/consQuality/QualityInspection3.png");
|
||||
}
|
||||
|
||||
.state-box .state:nth-child(2) {
|
||||
border: #e24e3b 1px solid;
|
||||
color: #e24e3b;
|
||||
}
|
||||
|
||||
.monitor-data {
|
||||
width: 28%;
|
||||
height: 83%;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
|
||||
.environment{
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* 弹出框样式 */
|
||||
#popup {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
#popup {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.left-down-left{
|
||||
width: 100%;
|
||||
height: 15%;
|
||||
}
|
||||
|
||||
.left-down-down{
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
}
|
||||
|
||||
.layui-layer-dialog .layui-layer-content {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
}
|
||||
.drawing-panel {
|
||||
position: fixed;
|
||||
bottom: 41.5rem;
|
||||
margin-left: -49rem;
|
||||
padding: 1rem 1rem;
|
||||
border-radius: .25rem;
|
||||
/*background-color: #fff;*/
|
||||
/*box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);*/
|
||||
}
|
||||
.btn {
|
||||
width: 105px;
|
||||
height: 30px;
|
||||
float: left;
|
||||
background-color: #fff;
|
||||
color: rgba(27, 142, 236, 1);
|
||||
font-size: 14px;
|
||||
border:1px solid rgba(27, 142, 236, 1);
|
||||
border-radius: 5px;
|
||||
margin: 0 5px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
}
|
||||
.btn:hover {
|
||||
background-color: rgba(27, 142, 236, 0.8);
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
.watermark {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
color: rgba(0, 0, 0, 0.5); /* 水印颜色和透明度 */
|
||||
font-size: 3rem; /* 根据需要调整字体大小 */
|
||||
text-align: center;
|
||||
line-height: 100vh;
|
||||
transform: rotate(-30deg); /* 旋转角度 */
|
||||
filter:brightness(1.5); /* 亮度 */
|
||||
}
|
||||
|
|
@ -0,0 +1,268 @@
|
|||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
font-family: 'Alibaba PuHuiTi R';
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.main-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: space-evenly;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.top-box {
|
||||
width: 100%;
|
||||
height: 47%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bot-box {
|
||||
width: 100%;
|
||||
height: 47%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.top-box-left{
|
||||
margin-left: 1%;
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.top-box-center{
|
||||
margin-left: 1%;
|
||||
width: 38%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.top-box-center-top{
|
||||
width: 100%;
|
||||
height: 48%;
|
||||
}
|
||||
|
||||
.top-box-center-bot{
|
||||
margin-top: 2%;
|
||||
width: 100%;
|
||||
height: 48%;
|
||||
}
|
||||
|
||||
.top-box-right{
|
||||
margin-left: 1%;
|
||||
width: 38%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bot-box-left{
|
||||
margin-left: 1%;
|
||||
width: 38.5%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bot-box-right{
|
||||
margin-right: 1%;
|
||||
width: 58.5%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.img-style{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
.tower-model {
|
||||
padding: 8% 2% 2% 2%;
|
||||
background: url("../../img/towerAssInspect/towerModel.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
.model {
|
||||
width: 98%;
|
||||
height: 90%;
|
||||
/* margin-top: 5%; */
|
||||
margin-left: 1%;
|
||||
padding: 3% 0% 2% 0%;
|
||||
/* background: url("../../img/towerAssInspect/model.png") no-repeat 0 0 / 100% 100%; */
|
||||
}
|
||||
|
||||
.device-list{
|
||||
padding: 5% 2% 2% 2%;
|
||||
background: url("../../img/towerAssInspect/deviceList.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
.device-list-top{
|
||||
height: 20%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
color: #BFC6C7;
|
||||
}
|
||||
|
||||
.alarm-title{
|
||||
width: 3%;
|
||||
height: 85%;
|
||||
box-sizing: border-box;
|
||||
background-position: center center !important;
|
||||
background: url("../../img/towerAssInspect/alarmTitle.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
.normal-title{
|
||||
margin-left: 2%;
|
||||
width: 3%;
|
||||
height: 85%;
|
||||
box-sizing: border-box;
|
||||
background-position: center center !important;
|
||||
background: url("../../img/towerAssInspect/normalTitle.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
.connection-title{
|
||||
margin-left: 2%;
|
||||
width: 3%;
|
||||
height: 85%;
|
||||
box-sizing: border-box;
|
||||
background-position: center center !important;
|
||||
background: url("../../img/towerAssInspect/connectionTitle.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
.device-list-bot{
|
||||
height: 80%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.device-list-device{
|
||||
width: 15%;
|
||||
height: 90%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.device-list-font{
|
||||
padding-top: 10%;
|
||||
color: #BFC6C7;
|
||||
}
|
||||
|
||||
.alarm{
|
||||
padding: 5% 2% 2% 2%;
|
||||
background: url("../../img/towerAssInspect/alarm.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
.connection{
|
||||
padding: 5% 2% 2% 2%;
|
||||
background: url("../../img/towerAssInspect/connection.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
.normal{
|
||||
padding: 5% 2% 2% 2%;
|
||||
background: url("../../img/towerAssInspect/normal.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
|
||||
.detection{
|
||||
padding: 5% 2% 2% 2%;
|
||||
background: url("../../img/towerAssInspect/detection.png") no-repeat 0 0 / 100% 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.detection-style{
|
||||
width: 15%;
|
||||
height: 8%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.detection-style-font{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: end;
|
||||
}
|
||||
.detection-style-font-top{
|
||||
margin-top: -20%;
|
||||
}
|
||||
|
||||
.detection-style-font-bot{
|
||||
margin-top: 10%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.detection-incline{
|
||||
padding: 5% 2% 2% 2%;
|
||||
background: url("../../img/towerAssInspect/incline.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
.detection-tension{
|
||||
padding: 5% 2% 2% 2%;
|
||||
background: url("../../img/towerAssInspect/tension.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
.detection-crash{
|
||||
padding: 5% 2% 2% 2%;
|
||||
background: url("../../img/towerAssInspect/crash.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
|
||||
.tendency{
|
||||
padding: 5% 2% 2% 2%;
|
||||
background: url("../../img/towerAssInspect/tendency.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
.real{
|
||||
padding: 5% 2% 2% 2%;
|
||||
background: url("../../img/towerAssInspect/real.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
.history{
|
||||
padding: 5% 2% 2% 2%;
|
||||
background: url("../../img/towerAssInspect/history.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
|
||||
.dark{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 4.5%;
|
||||
box-sizing: border-box;
|
||||
background: url("../../img/alarmMge/dark.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 4%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bright{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 4.5%;
|
||||
box-sizing: border-box;
|
||||
background: url("../../img/alarmMge/bright.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 4%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -0,0 +1,456 @@
|
|||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
font-family: 'Alibaba PuHuiTi R';
|
||||
letter-spacing: 1px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.layout::before {
|
||||
/* content: "大大的水印"; */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 9999999999999999;
|
||||
color: rgba(0, 0, 0, 0.1);
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
line-height: 100vh;
|
||||
transform: rotate(-30deg);
|
||||
filter:brightness(0.1);
|
||||
}
|
||||
|
||||
|
||||
#main-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
|
||||
/* 左侧样式 start */
|
||||
#left-box,
|
||||
#right-box {
|
||||
width: 21.3%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding-top: 0.85%;
|
||||
}
|
||||
|
||||
#left-top {
|
||||
width: 100%;
|
||||
height: 39%;
|
||||
background: url("../../img/video/ytkz.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
#left-top p {
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#left-top-one {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
#one-child,
|
||||
#three-child {
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#two-child {
|
||||
width: 52%;
|
||||
height: 100%;
|
||||
padding-top: 10%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#yclx,
|
||||
#bdlx,
|
||||
#yczp,
|
||||
#bdzp {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
flex-direction: column;
|
||||
padding-top: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 远程录像 */
|
||||
#yclx button {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: url("../../img/video/ptz_nocheck/yclx_nocheck.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
/* 本地录像 */
|
||||
#bdlx button {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: url("../../img/video/ptz_nocheck/bdlx_nocheck.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
/* 远程抓拍 */
|
||||
#yczp button {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: url("../../img/video/ptz_nocheck/bdzp_nocheck.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 本地抓拍 */
|
||||
#bdzp button {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: url("../../img/video/ptz_nocheck/bdzp_nocheck.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#yt {
|
||||
width: 204px;
|
||||
height: 204px;
|
||||
background: url("../../img/video/ptz_nocheck/yt_nocheck.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#yt-left,
|
||||
#yt-center,
|
||||
#yt-right {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#yt-center {
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
#yt button,
|
||||
#left-top-two button {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#yt-center button:nth-child(1) {
|
||||
margin-top: -31%;
|
||||
}
|
||||
|
||||
#yt-center button:nth-child(2) {
|
||||
margin-bottom: -31%;
|
||||
}
|
||||
|
||||
#left-top-two {
|
||||
width: 92%;
|
||||
height: 26%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#jj-box,
|
||||
#sf-box,
|
||||
#gq-box {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#jj {
|
||||
width: 98px;
|
||||
height: 48px;
|
||||
background: url("../../img/video/ptz_nocheck/jj_nocheck.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
#sf {
|
||||
width: 98px;
|
||||
height: 48px;
|
||||
background: url("../../img/video/ptz_nocheck/sf_nocheck.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
#gq {
|
||||
width: 98px;
|
||||
height: 48px;
|
||||
background: url("../../img/video/ptz_nocheck/gq_nocheck.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
#left-bottom {
|
||||
width: 100%;
|
||||
height: 57.8%;
|
||||
background: url("../../img/video/ball_list.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
#search-box {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
margin-top: 12%;
|
||||
}
|
||||
|
||||
.layui-form .layui-input {
|
||||
width: 80%;
|
||||
margin: 0 10% 0 10%;
|
||||
}
|
||||
|
||||
#search-img {
|
||||
position: relative;
|
||||
left: -17%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#device-online-box {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
#device-online-box .device-status {
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
#device-online-box .device-status:nth-child(1) {
|
||||
background: rgba(217, 217, 217, 0.01);
|
||||
box-shadow: inset 2px 2px 4px 0px rgba(121, 255, 255, 0.5);
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
border: 1px solid #79FFFF;
|
||||
color: #79FFFF;
|
||||
}
|
||||
|
||||
#device-online-box .device-status:nth-child(2) {
|
||||
background: rgba(217, 217, 217, 0.01);
|
||||
box-shadow: inset 2px 2px 4px 0px rgba(121, 255, 255, 0.5);
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
border: 1px solid #79FFFF;
|
||||
color: #79FFFF;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
#device-online-box .device-status:nth-child(3) {
|
||||
background: rgba(217, 217, 217, 0.01);
|
||||
box-shadow: inset 2px 2px 4px 0px rgba(255, 84, 61, 0.5);
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
border: 1px solid #FF543D;
|
||||
opacity: 0.6;
|
||||
color: #FF543DFF;
|
||||
}
|
||||
|
||||
#device-tree {
|
||||
width: 100%;
|
||||
height: calc(88% - 82px);
|
||||
}
|
||||
|
||||
/* 左侧样式 end */
|
||||
|
||||
/* 中侧样式 start */
|
||||
#center-box {
|
||||
/*width: (54 +21.3)%;*/
|
||||
width: 75.3%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-top: 0.85%;
|
||||
}
|
||||
|
||||
#video-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("../../img/video/spjk.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
/* 中侧样式 start */
|
||||
#balla {
|
||||
/* width: 98.5%;
|
||||
height: 98.5%;
|
||||
margin-left: 0.5%;
|
||||
margin-top: 0.5%;
|
||||
float: left; */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 2% 0.1% 0% 0.1%;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
/*球机视频框*/
|
||||
|
||||
.ballsplit {
|
||||
width: 96.9%;
|
||||
height: 99%;
|
||||
/* margin-left: 5%; */
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
/* margin: 0.3%; */
|
||||
}
|
||||
|
||||
/*视频框样式*/
|
||||
|
||||
.ball-content {
|
||||
width: 98%;
|
||||
height: 98%;
|
||||
margin: 1% 1% 0 1%;
|
||||
pointer-events: none;
|
||||
background-color: #000;
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
|
||||
/* 右侧样式 start */
|
||||
|
||||
#voi-photo-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("../../img/video/wzzp.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
#voi-null {
|
||||
width: 100%;
|
||||
height: 5%;
|
||||
}
|
||||
|
||||
#voi-photo {
|
||||
width: 100%;
|
||||
height: 95%;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.voi-item {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
margin-bottom: 10px;
|
||||
box-sizing: border-box;
|
||||
padding: 3%;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.voi-item>img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
|
||||
}
|
||||
|
||||
.voi-item .voi-info {
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
}
|
||||
|
||||
.voi-time,
|
||||
.voi-content {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.voi-content {
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
/* 右侧样式 start */
|
||||
|
||||
/* dtree 样式 start */
|
||||
.dtree-nav-item {
|
||||
background: linear-gradient(90deg, rgba(153, 255, 255, 0) 0%, rgba(35, 161, 161, 0.5) 49%, rgba(153, 255, 255, 0) 100%);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
margin: 10px 0 10px 0;
|
||||
}
|
||||
|
||||
.dtree-laySimple-item:hover {
|
||||
background: linear-gradient(90deg, rgba(153, 255, 255, 0) 0%, rgba(50, 251, 251, 0.6) 49%, rgba(153, 255, 255, 0) 100%) !important;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.dtree-laySimple-item-this {
|
||||
background: linear-gradient(90deg, rgba(153, 255, 255, 0) 0%, rgba(50, 251, 251, 0.6) 49%, rgba(153, 255, 255, 0) 100%) !important;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
color: rgba(50, 251, 251, 0.6) !important;
|
||||
}
|
||||
|
||||
.dtree-laySimple-item cite {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.dtree-laySimple-item:hover cite {
|
||||
color: rgba(50, 251, 251, 0.6) !important;
|
||||
}
|
||||
|
||||
.dtree-laySimple-ficon {
|
||||
font-size: 14px !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* dtree 样式 start */
|
||||
|
||||
.nocheckBtn {
|
||||
background-color: #d2d2d2;
|
||||
border: 1px solid #d2d2d2;
|
||||
}
|
||||
|
||||
.checkBtn {
|
||||
border: 1px solid #2eccbd;
|
||||
background-color: #2eccbd !important;
|
||||
}
|
||||
|
||||
.toggle-btn button {
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
color: #000;
|
||||
font-size: 15px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
#videoBox {
|
||||
width: 100%;
|
||||
height: 92%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 289 B |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 795 B |
Binary file not shown.
|
After Width: | Height: | Size: 798 B |
Binary file not shown.
|
After Width: | Height: | Size: 765 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 998 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 373 B |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 370 B |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 722 B |
Binary file not shown.
|
After Width: | Height: | Size: 735 B |
Binary file not shown.
|
After Width: | Height: | Size: 344 B |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 825 B |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 343 B |
Binary file not shown.
|
After Width: | Height: | Size: 922 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 972 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 365 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 755 B |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 623 B |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue