:root { --hRate:1; } body{ padding: 0; margin: 0; overflow: hidden; background-color: #00556699; /*background-image: url('image/bg.jpeg');*/ user-select: none; /* 标准属性 */ -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE/Edge */ } thead tr{ background-image: url('../assets/image/thead_bg.png'); background: transparent; border: 0px solid #7DA2CD; height: 32px; font-weight: bold; color: #decdcd; } tbody>tr{ border: 0px solid #7DA2CD; height: 32px; font-size: 12px; } table:not(.el-date-table) tbody>tr:hover{ background-color:rgb(75, 112, 163) !important; } table thead>tr { background-color:#016a7c; /* 奇数行 */ } table:not(.el-date-table) tbody>tr:nth-child(odd) { background-color:transparent; /* 奇数行 */ } table:not(.el-date-table) tbody>tr:nth-child(even) { background-color: #016a7c; /* 偶数行 */ } td{ border-bottom: 0px solid #7DA2CD; } /* ---- Chrome ----*/ ::-webkit-scrollbar { width: 8px; /*滚动条粗细*/ height: 12px } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, .3); background: #f2f6f3; /*滑道颜色*/ border-radius: 5px; /*滑道的圆滑度*/ } .scroll::-webkit-scrollbar-thumb { background: #94b0eb; /*滑块颜色*/ border-radius: 5px /*滑块圆滑度*/ } .scroll::-webkit-scrollbar-thumb:hover { background: #a8a8a8; /*滑块上浮*/ } /*--- FirFox ---*/ .scroll { scrollbar-width: thin; scrollbar-color: #94b0eb #f2f6f3; } /* --- IE ---*/ body { scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/ scrollbar-face-color: #333; /*立体滚动条的颜色*/ scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜色*/ scrollbar-highlight-color: #666; /*滚动条空白部分的颜色*/ scrollbar-shadow-color: #999; /*立体滚动条阴影的颜色*/ scrollbar-darkshadow-color: #666; /*立体滚动条强阴影的颜色*/ scrollbar-track-color: #666; /*立体滚动条背景颜色*/ scrollbar-base-color: #f8f8f8; /*滚动条的基本颜色*/ /*Cursor: url(mouse.cur); *//*自定义个性鼠标*/ color: #Fff; } .abs{ position: absolute; left: 0; top:0; z-index: 10; } .leftPanel{ left:2%; top:8.4%; height: 1px; } .fac_progress{ width: 100%;height: 5px;background-color: #154360;z-index: 0;border-radius: 3px; } .fac_progress_value{ width: 0%;height: 5px;background-color: #05abc0;z-index: 1;border-radius: 3px; } .rightPanel{ right:50px; width: 490px; left: auto; top:8.4%; height: 87%; z-index: 100001 !important; } .fac_btn{ width: 56px; height: 30px; text-align: center; line-height: 30px; background-color: #034859; color: #009dad; margin: 0 2px; display: inline-block; cursor: pointer; } .fac_btn:hover{ background-color: #008899 !important; color: #e9f5f6 !important; } .fac_btn.active{ background-color: #008899 !important; color: #e9f5f6 !important; } .reconnect{ position: absolute; top:50%; left: 50%; height: 40px; width: 400px; background-color: #09374c91; color: #fff; font-size: 20px; line-height: 38px; z-index: 1000001; text-align: center; margin-top: -20px; margin-left: -200px; border: 1px solid #2ea9b8; border-radius: 5px; } .reconnect .loadProgress{ width: 1px; background-color: #008899; height: 40px; border-radius: 3px; position: absolute; z-index: 0; transition: width 0.5s ease-in-out; } .reconnect .loadText{ position: absolute; z-index: 1; width: 100%; text-align: center; } #iframeWin .content,#iframeWin iframe{ height: 724px; width: 100%; border: 0; } .iframeLoading{ position: absolute; z-index: 10; width: 200px; text-align: center; font-size: 16px; height: 32px; line-height: 32px; margin-left: -100px; left: 50%; margin-top: -16px; top: 50%; color: #f4f4f4; } .impWin .content,.impWin iframe{ height: 160px !important; width: 100%; border: 0; } .bpbWin{ width: 1366px !important; height: 764px !important; left: 50%; top:50%; margin-top: -382px !important; margin-left:-683px !important; } .in03Win{ width: 1600px !important; height: 480px !important; left: 50%; top:50%; margin-top: -240px !important; margin-left:-800px !important; } .in03Win .content,.in03Win iframe{ height: 480px !important; width: 100%; border: 0; } .in03AiCompWin{ width: 800px !important; height: 600px !important; left: 50%; top:50%; margin-top: -300px !important; margin-left:-400px !important; } .in03AiCompWin .content,.in03AiCompWin iframe{ height: 600px !important; width: 100%; border: 0; } .deviceInfoWin{ width: 1200px !important; height: 380px !important; left: 50%; top:50%; margin-top: -190px !important; margin-left:-600px !important; } .deviceInfoWin .content,.deviceInfoWin iframe{ height: 380px !important; width: 100%; border: 0; } .impWin{ width: 800px !important; height: 160px !important; left: 50%; top:50%; margin-top: -80px !important; margin-left:-400px !important; } .impDiv{ padding:15px; position:absolute; z-index:100; top:0; left:0; width:780px; background: #396da9; border: 1px solid #314f85; min-height: 25px; } .impDiv .triangle{ width: 0; height: 0; position: absolute; top: 20px; right: -12px; border-width: 6px; border-style: solid; border-color:transparent transparent transparent #396da9 ; border-radius: 4rpx; } #loading{ position: absolute; top: 50%; left: 50%; font-size: 18px; color: blue; z-index: 1; margin-left: -120px; width: 100%; color: #B0E1FF; letter-spacing: 7px; font-weight: bold; } #loading_a1{ position: absolute; z-index: 1; left: 50%; top: 40%; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; } #search{ position: absolute;width: 320px;top: 12%;left: 50%;margin-left: -160px; z-index: 1; background: #013e51; border-radius: 2px 2px 2px 2px; border: 1px solid #808a8c; } #search input{ width: 315px;height: 38px;background: #013e51;border-radius: 2px;border: 1px solid #808a8c;color: #26e6f9;font-size: 14px; letter-spacing: 3px; } #search_result{ position: absolute;width: 310px;max-height: 256px;min-height: 32px; top: 17%;left: 50%;margin-left: -160px;opacity: 0.7;background-color: #132F5F; padding: 8px;color: #Ffffff;font-size: 14px; background: #013e51; box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2); border-radius: 2px 2px 2px 2px; z-index: 1; overflow-y: auto; } #search_result .item{ border-radius: 2px 2px 2px 2px;height: 30px;line-height: 30px;padding-left: 5px;cursor: pointer; } #search_result .item:hover{ background: #3B6096; } #func_menulist{ position: absolute; width: 160px; height: 100px; background: rgba(19, 47, 95, 0.8); box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.2); border-radius: 2px 2px 2px 2px; z-index: 4; top: 60px; right: 9%; padding: 5px; } #imp_item{ position: absolute; width: 160px; height: auto; background: rgba(19, 47, 95, 0.8); box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.2); border-radius: 2px 2px 2px 2px; z-index: 4; top: 60px; right: 71px; padding: 5px; } #imp_item>div,#func_menulist>div{ width: 144px; height: 30px; border-radius: 2px 2px 2px 2px; cursor: pointer; color: #ffffff; line-height: 30px; padding:0 5px; } #imp_item>div:hover,#func_menulist>div:hover{ background: #3B6096; } #imp_item .active,#func_menulist .active{ background: #3B6096; } #top{ position: fixed; top:0; left: 0; width: 1920px; height: calc(90px*var(--hRate)); z-index: 10000; background-repeat: no-repeat; } .bottom{ position: fixed; bottom:calc(2%*var(--hRate)); margin-left: 19px; left: 0; width: 42%; height: calc(100px*var(--hRate)); z-index: 1; background-repeat: no-repeat; background-size: contain; background-image: url('../assets/image/nav_bg.png') } .bottom .btn,.tools .btn{ cursor: pointer; display: flex; flex-flow: column; height: 100%; width: 11%; background-size: contain; background-repeat: no-repeat; background-position: center; color: #1eabb7; font-size: 18px; text-align: center; justify-content: center; align-items: center; } .bottom .btn:hover,.tools .btn:hover{ color: #fff !important; font-size: 18px !important; font-weight: bold; } .bottom .btn.active,.tools .btn.active{ color: #fff !important; font-size: 18px !important; font-weight: bold; } .bottom img{ cursor: pointer; vertical-align: middle; width: 30px; height: 30px; } .top02{ background-image: url('../assets/image/top.png') !important; } .top03{ background-image: url('../assets/image/top_03.png') !important; } .topfac{ background-image: url('../assets/image/fac_top.png') !important; } .title_row{ display: flex; font-size: 16px; font-weight: bold; height: 24px; line-height: 24px; margin-bottom: 0px; } .title_left_line{ background-image: url('../assets/image/title_left_line.png'); width: 6px; height: 18px; vertical-align: middle; margin-right: 10px; margin-top: 3px; } .littleFont{ font-size: 12px; letter-spacing: 2px; } .data_row{ display: flex; font-size: 16px; font-weight: bold; min-height: 60px; margin-top: calc(20px*var(--hRate)); } .fac_pie{ width: calc(150px*var(--hRate)); height: calc(150px*var(--hRate)); } .table_caption{ height: 30px; line-height: 30px; font-size: 16px; color: #fff; font-weight: bold; width: 100%; padding: 0 10px; } #dev_state{ position: absolute; z-index: 1; top:100px; left: 10px; } #dev_state .title{ background-image: url('../assets/image/dev_state_title.png'); background-repeat: no-repeat; background-size: auto; height: 32px; width: 416px; } #dev_state .content{ display:flex;width:100%;height:calc(134px*var(--hRate));font-weight:normal;font-size: 24px; } #dev_state .content>div{ width:13%; height: 100%; } .label{ color:#27e6ff; } .unitname{ font-size: 12px; } #dev_alarm{ position: absolute; z-index: 1; top:7%; left: 3%; } #dev_alarm .title{ background-image: url('../assets/image/dev_alarm_title.png'); background-repeat: no-repeat; background-size: auto; height: 32px; width: 416px; text-align: center; color: #f0f377; line-height: 32px; } #dev_alarm .content{ margin-top:20px; padding: 10px; width: 400px; height: auto; background: #033c519c; border: 1px solid #008899; } #dev_stop{ position: absolute; z-index: 1; top:780px; left: 3%; } #dev_stop .title{ background-image: url('../assets/image/stop_title.png'); background-repeat: no-repeat; background-size: auto; height: 32px; width: 416px; text-align: center; color: #f0f377; line-height: 32px; } #dev_stop .content{ margin-top:10px; padding: 10px; width: 400px; height: auto; background: #054d5b9c; border: 1px solid #008899; } #dev_xiaolv{ position: absolute; z-index: 1; top:7%; right: 3%; } #dev_xiaolv .content{ margin-top:20px; padding: 20px; width: 416px; height: auto; background: #054d5b9c; border: 1px solid #008899; } #dev_jiadonglv{ position: absolute; z-index: 1; top:28%; right: 3%; } #dev_jiadonglv .content{ margin-top:10px; padding: 10px; width: 436px; height: auto; background: #054d5b9c; border: 1px solid #008899; } #dev_sc_qushi{ position: absolute; z-index: 1; top:51%; right: 3%; } #dev_sc_qushi .content{ margin-top:10px; padding: 10px; width: 436px; height: auto; background: #054d5b9c; border: 1px solid #008899; } #dev_used_qushi{ position: absolute; z-index: 1; top:74%; right: 3%; } #dev_used_qushi .content{ margin-top:10px; padding: 10px; width: 436px; height: auto; background: #054d5b9c; border: 1px solid #008899; } .showinfo{ position: absolute; width: 800px; height: 444px; left: 50%; top:50%; margin-top: -222px; margin-left:-400px; z-index: 2; background-color: rgba(9,28,67,0.9); border: 2px solid #445985; color: #7E96D9; } .newwin .title,.showinfo .title{ width: 100%; height: 40px; /*background: linear-gradient( 90deg, #2E5097 0%, #071433 100%);*/ background-color: #00687d; } .newwin{ position: absolute; width: 1330px; height: 576px; left: 50%; top:50%; margin-top: -278px; margin-left:-665px; z-index: 999999; background-color: #00556699; border: 2px solid #008899; color: #7E96D9; } .newwin .title .text,.showinfo .title .text{ font-weight: 400; font-size: 18px; line-height: 38px; text-align: left; color: #ffffff; float: left; margin: 0 20px; } .newwin .btn{ display: inline-block; width: 136px; height: 32px; background: linear-gradient(#2056c605, #3765c3 0%, rgba(0, 39, 118, 0) 100%); border: 1px solid; border-image: linear-gradient(360deg, rgba(168, 196, 255, 1), rgba(164, 193, 255, 0)) 1 1; margin:10px; line-height: 32px; font-size: 18px; cursor: pointer; } .newwin .btn_active{ background-color: #a09ef5; font-weight: bold; color: #fff; } .newwin table{ width: 100%; text-align: center; border-top: 1px solid #8194BC; border-bottom: 1px solid #8194BC; color: #97BCFF; } .newwin table tr{ height: 50px } .newwin .value{ color: #fff; } .showinfo td,.newwin td{ border: 0px !important; } .td_splitLine{ border: 1px solid; border-image: linear-gradient(90deg, rgba(126, 150, 217, 0), rgba(126, 150, 217, 1), rgba(126, 150, 217, 0)) 1 1; } .hideDiv{ display: none; } #date_select{ position: absolute; display: none; z-index: 1000; color: #ffffff; background: #396da9; padding: 5px; border: 1px solid #314f85; } #date_select .triangle,#day_select .triangle{ width: 0; height: 0; position: absolute; top: 20px; right: -12px; border-width: 6px; border-style: solid; border-color:transparent transparent transparent #396da9 ; border-radius: 4rpx; } #day_select{ position: absolute; display: none; z-index: 1000; color: #ffffff; background: #396da9; padding: 5px; border: 1px solid #314f85; } .ui-datepicker-trigger{ color: #fff; background: #27486f; border: 1px solid #7d8aa3; font-size: 11px; cursor: pointer; padding: 0 3px; border-radius: 3px; } .ui-datepicker-calendar tbody tr{ font-size: 14px !important } .hasDatepicker{ background: #ccc; border: 1px solid #fff; border-radius: 3px; margin: 0 5px; color: #3d3ad7; font-weight: bold; } .dateSelected_ok,.daySelected_ok{ text-align: center; } .dateSelected_ok button,.daySelected_ok button{ color: #fff; background: #27486f; border: 1px solid #7d8aa3; font-size: 14px; cursor: pointer; margin-top: 10px; padding: 0 9px; border-radius: 3px; }