* { box-sizing: border-box; } html, body { height: 100%; width: 100%; margin: 0; padding: 0; } body { /*background-color: rgb(23, 68, 122);*/ background-color: #000231; /* background:url(../images/form.png)no-repeat; */ width: 100%; height: 100%; background-size: cover; /* background-size:100% 100%; */ position: absolute; /* filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/form.png',sizingMethod='scale'); */ } .wrap { width: 100%; color: rgba(0,162,233, 1); padding-bottom: 10px; } .up-wrap { width: 100%; /*height: 60px;*/ display: flex; display: -webkit-flex; display: -ms-flexbox; overflow: hidden; text-align: center; align-items: center; justify-content: center; padding: 15px 15px 20px; box-sizing: border-box; } .logowrap { position: absolute; left: 0; top: -24px; } .logowrap .logo{ height: 35px; width: 252px; background: url(../images/logo.png) center center no-repeat; background-size: 100% 100%; } .item-big { display: block !important; font-size: 18px; text-align: center; flex: 1; position: relative; background: url(../images/bigtitle4.png) center center no-repeat; background-size: 100% 100%; height: 40px; width: 1450px; margin-bottom: 55px; } .logocenter { height: 35px; width: 35px; background: url(../images/logocenter.png) center center no-repeat; background-size: 100% 100%; } .item-obig { display: block !important; font-size: 18px; text-align: center; flex: 1; position: relative; background: url(../images/bigtitle4.png) center center no-repeat; background-size: 100% 100%; height: 40px; width: 1450px; /*margin-left:45px;*/ } .item-pbig { min-width: 245px; font-size: 18px; text-align: center; flex: 1; position: relative; } .item-s { display: flex; display: -webkit-flex; display: -ms-flexbox; overflow: hidden; } .item-s li { display: block !important; color: rgb(0,162,233); cursor: pointer; font-size: 14px; float: left; width: 80px; flex: 1; margin: 0 2px; /*height: 36px; line-height: 36px;*/ text-align: left; /*background: url(../images/Button-2.png) center center no-repeat; background-size: 100% 100%;*/ /*/*border-radius: 5px;*/ /*box-shadow: #00aeff 0px 0px 20px inset;*/ /*border: 1px solid #00aeff;*/ /*border-radius: 5px*/ } .bottom-wrap { width: 100%; padding: 0 15px; /* min-height: 840px; */ display: flex; display: -webkit-flex; display: -ms-flexbox; overflow: hidden; box-sizing: border-box; } .bw-s { min-width: 20%; /* height: 800px; */ /* background-color: red; */ } .bw-b { box-sizing: border-box; /*width:calc(100% - 600px);*/ margin: 0 10px; min-width: 50%; /* width: 100%; */ /* height: 800px; */ /* background-color: black; */ } .bw-item { width: 100%; height: 220px; position: relative; z-index: 1; margin-bottom: 5px; box-shadow: 0 0 10px rgb(0,162,233); border: 1px solid rgb(0,162,233); border-radius: 15px; margin: 20px 0px; } .bw-item-h { height: 280px; } .bw-item .bw-img { width: 100% !important; } .bw-img { width: 300px; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; } .bw-img-h { height: 280px; } .bw-item-content { width: 100%; height: 100%; padding: 20px; position: relative; z-index: 2; box-sizing: border-box; } .ptop6 { padding-top: 6px; } .bw-b-bottom { } .spline { width: 20px; } .bw-b-bottom-up { position: relative; width: 100%; height: 480px; border: 2px solid rgb(0,162,233); border-radius: 16px; margin-bottom: 10px; box-shadow: 0 0 10px rgb(0,162,233); } .tab-wrap-tit{ } .tab-wrap-tit .tab { font-size: 12px; display: flex; display: -webkit-flex; } .tab-wrap-tit .tab .t-item { cursor: pointer; width: 48px; text-align: center; /*color: #fff;*/ } .tab-wrap-tit .tab .t-item:first-child { /*border-top-left-radius: 4px; border-bottom-left-radius: 4px;*/ } .tab-wrap .tab .t-item:last-child { /*border-top-right-radius: 4px; border-bottom-right-radius: 4px;*/ } .tab-wrap-tit .tab .spline { width: 0; border-left: 1px solid rgba(0,162,233,1); } .tab-wrap-tit .tab .active { color: #fff; background-color: rgba(0,162,233, 1); } .tab-wrap { position: absolute; top: 10px; left: 20px; z-index: 99; } .tab-wrap .tab { font-size: 10px; border-radius: 4px; border: 1px solid rgba(0,162,233,1); box-shadow: 0 0 10px rgba(0,162,233, 0.8); display: flex; display: -webkit-flex; } .tab-wrap .tab .t-item { cursor: pointer; width: auto; text-align: center; color: #fff; padding: 5px; } .tab-wrap .tab .t-item:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .tab-wrap .tab .t-item:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .tab-wrap .tab .spline { width: 0; border-left: 1px solid rgba(0,162,233,1); } .tab-wrap .tab .active { /*color: #333;*/ background-color: rgba(0,162,233, 1); } .content-ul { color: #fff; box-sizing: border-box; padding: 10px 0; } .content-ul .c-item { cursor:pointer; display: flex; overflow: hidden; max-width: 100%; font-size:12px; /* margin-bottom: 8px; */ } .content-ul .c-item:last-child { margin-bottom: 0; } .content-ul .c-item .tit { flex: 1; min-width: 0; float: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: keep-all; display:flex; align-items:center; } .content-ul .c-item .time { width: 90px; float: right; } .text-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: keep-all; } .headerwrap { /*background-color: rgb(23, 68, 122);*/ } .header { width: 100%; overflow: hidden; /*padding: 8px 15px 0;*/ box-sizing: border-box; } .header .baseInfo { float: right; margin-right: 5px; } .header .layui-nav { background: none; color: #37a6ff; display: flex; overflow: hidden; font-size: 14px; } .layui-nav .layui-nav-item { position: relative; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; } .header .layui-nav .layui-nav-item, .header .layui-nav .layui-nav-item a { color: #37a6ff; padding-left: 7px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .bg-icon { display: inline-block; width: 17px; height: 16px; background: url("../images/icon.png") no-repeat; /* margin-top: 3px; */ } .bg-txt { margin-left: 5px; } .i-user { background-position: -5px -8px; } .i-version { background-position: -27px -8px; } .i-help { background-position: -50px -8px; } .i-msg { background-position: -73px -8px; } .i-pwd { background-position: -95px -8px; } .i-system { background-position: -117px -8px; } .i-exit { background-position: -139px -8px; } @media screen and (max-width:1600px) { } @media screen and (max-width:1366px) { header.homeNav { position: relative; height: 60px; } header.homeNav .sysManage .timeSys { line-height: 28px; font-size: 12px; } header.homeNav .sysManage .rtManage .layui-nav .layui-nav-item a { font-size: 12px; } header.homeNav .layui-nav * { font-size: 12px; line-height: 28px; } header.homeNav .headHome .homeTit img { max-width: 19%; } header.homeNav .headHome .indexNav { bottom: 19%; } header.homeNav .headHome .indexNav ul li a { font-size: 12px; } } .up-wrap-ul { padding: 0 15px; align-items: center; justify-content: space-between; } .up-wrap-ul li { display: block !important; color: rgb(0,162,233); cursor: pointer; font-size: 14px; float: left; width: 80px; margin: 0 5px; /*height: 36px; line-height: 36px;*/ /*text-align: center;*/ /*background: url(../images/Button-2.png) center center no-repeat; background-size: 100% 100%;*/ /*border-radius: 5px;*/ /*box-shadow: #00aeff 0px 0px 20px inset;*/ /*border: 1px solid #00aeff; border-radius: 5px*/ } ::-webkit-scrollbar { display: none !important; } .flex { display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */ /*display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本语法: IE 10 */ } .flex1 { -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ /*-webkit-box-flex: 1;/* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ } .flex2 { -webkit-flex: 2; /* Chrome */ -ms-flex: 2; /* IE 10 */ flex: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */ /*-webkit-box-flex: 2; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 2; /* OLD - Firefox 19- */ } .flex3 { -webkit-flex: 3; /* Chrome */ -ms-flex: 3; /* IE 10 */ flex: 3; /* NEW, Spec - Opera 12.1, Firefox 20+ */ /*-webkit-box-flex: 3; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 3; /* OLD - Firefox 19- */ } .flexV { -webkit-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .bottom-wrap-new { width: 100%; padding: 0 15px; overflow: hidden; box-sizing: border-box; } .tit-new { color: #fff; padding: 0 10px; background-color: rgba(27,122,164,1); /*background-image: linear-gradient(to right, rgb(25,95,145), rgb(12,53,115));*/ background-image: linear-gradient(to right, rgb(36, 112, 167), rgb(23, 68, 122)); border-top-left-radius: 10px; border-top-right-radius: 10px; /*height: 24px;*/ line-height: 24px; font-size: 12px; } .pd0 { padding: 0 !important; } .pdlrb { padding: 0 10px 10px !important; } /* 圆角背景框 */ .bg-item { position: relative; width: 100%; border: 2px solid rgb(0,162,233); margin-bottom: 10px; box-shadow: rgb(0,162,233) 0px 0px 50px inset; border-radius:10px; } .bg-item:last-child { margin-bottom: 0; } /* 背景色进度条 */ .tab-content { color: #fff; margin-top: 10px; font-size:12px; } .tab-content .tab-i { margin-top: 10px; } .tab-content .txt { width: 90px; text-align: center; font-size: 12px; } .tab-content .line-wrap { align-items: center; } .tab-content .line-item { flex: 1; position: relative; background-color: #242b57; z-index: 90; border-radius: 10px; height: 20px; } .tab-content .line-item > div { border-radius: 10px; content: ''; height: 100%; position: absolute; left: 0; top: 0; z-index: 91; background-color: #1BCD34; width: 10%; } .tab-content .per { margin-left: 10px; width: 40px; } .line-item .normal { background-color: #1BCD34 !important; } .line-item .warn { background-color: #C71D26 !important; } .row1 { font-size: 12px; color: #fff; border-radius: 4px; height: 36px; line-height: 36px; margin-top: 5px; padding: 0 5px; } .row1 span.num { font-size: 20px; margin-right: 10px; } .row2 { color: #fff; font-size: 12px; align-items: center; } .row2 .txt { } .row2 .item-txt-list { width: 100%; } .row2 .item-txt-list .txt-tit { width: 70px; } .row2 .item-txt-list .fixtt { letter-spacing: 4px; } .row2 .item-txt-list:last-child { margin-bottom: 0; } @font-face { font-family: 'digifacewide'; src: url('font/digifacewide.ttf'); } .specialNum { font-family: digifacewide; } .content-wrap-1 { width: 100%; height: 100%; padding: 10px; } .content-wrap-1 .item { } .content-wrap-1 .item .tit { color: #fff; position: relative; font-size: 10px; padding-left: 6px; margin-bottom: 5px; } .content-wrap-1 .item .tit:before { content: ''; position: absolute; top: 50%; left: 0; display: inline-block; width: 0; height: 0; border: 1px solid #fff; } .content-wrap-1 .item .content-1 { width: 100%; height: 100%; margin-bottom: 5px; align-items: flex-end; padding-left:10px; } .content-wrap-1 .item .content-1 .cc-num-wrap { height: 100%; justify-content: space-around; } .content-wrap-1 .item .content-1 .cc-num-wrap .cc-num { color: #fdc006; /*background-color: #4967AD;*/ font-size: 32px; padding: 0 2px; display: flex; align-items: center; justify-content: center; } .content-wrap-1 .item .content-1 .unit { font-size: 10px; color: #fff; } .content-wrap-1 .item .content { justify-content: space-between; padding: 0 10px; align-items:center; } .content-wrap-1 .item .content .t-item { color: #fff; } .content-wrap-1 .item .content .t-item .c-num { color: #abd373; font-size: 24px; } .content-wrap-1 .item .content .t-item .c-txt { color: #fff; font-size: 10px; }