.waring1 .waring1-top .page-box { height: 358px; } .waring2 { display: flex; } .waring2 .waring2-left { width: 49%; display: flex; flex-wrap: wrap; justify-content: space-between; top: 480px; height: 410px; } .waring2 .waring2-left .page-box:nth-child(-n + 2) { width: 100%; } .waring2 .waring2-left .page-box:nth-child(3) { width: 100%; } .waring2 .waring2-left .page-box:first-child .content { display: flex; flex-direction: column; padding: 10px; } .waring2 .waring2-left .page-box:first-child ul { display: flex; height: 40px; margin: 25px 0 30px; } .waring2 .waring2-left .page-box:first-child ul li { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; border-right: 1px solid #ddd; } .waring2 .waring2-left .page-box:first-child ul li:last-child { border-right: 0; } .waring2 .waring2-left .page-box:first-child ul li img { width: 20px; height: 20px; } .waring2 .waring2-left .page-box:first-child ul li span:first-of-type { font-size: 14px; color: #75798a; padding: 6px 0; } .waring2 .waring2-left .page-box:first-child ul li span:last-of-type { color: #fff; } .waring2 .waring2-left .page-box:first-child .img-box { flex: 1; } .waring2 .waring2-left .page-box:first-child .img-box img { width: 100%; height: 100%; } .waring2 .waring2-right { /* width: calc(40% - 30px); */ width: 49%; position: absolute; top: 480px; right: 10px; height: 410px; } .waring2 .waring2-right .content { display: flex; flex-direction: column; } .waring2 .waring2-right .content .header { display: flex; justify-content: space-between; margin: 20px; } .waring2 .waring2-right .content .header-right { display: flex; align-items: center; } .waring2 .waring2-right .content .header-right select { height: 32px; line-height: 32px; background: #fff; font-size: 14px; color: #6c6c6c; border: 0; margin-left: 10px; cursor: pointer; padding: 0 8px; } .waring2 .waring2-right .content .header-right button { width: 80px; height: 32px; border: 0; color: #fff; cursor: pointer; display: flex; justify-content: center; align-items: center; margin-left: 10px; } .waring2 .waring2-right .content .header-right .search { background: #5c89ff; } .waring2 .waring2-right .content .header-right .export { background: #fcb333; } .waring2 .waring2-right .content .header-right button img { width: 14px; height: 14px; margin-right: 10px; } .waring2 .list-table { flex: 1; overflow: auto; } .waring2 .list-table ul { width: 100%; overflow: hidden; } .waring2 .list-table li { width: 30%; height: 40px; line-height: 40px; float: left; text-align: center; display:block; overflow:hidden; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis; } .waring2 .list-table li + li { width: 15%; } .waring2 .list-table li + li + li { width: 35%; } .waring2 .list-table li + li + li + li { width: 20%; } .waring2 .list-table li.lv1 { background: url(../../assets/images/level1.png) no-repeat center center; } .waring2 .list-table li.lv2 { background: url(../../assets/images/level2.png) no-repeat center center; } .waring2 .list-table li.lv3 { background: url(../../assets/images/level3.png) no-repeat center center; } .waring2 .list-table li.gd { color: #39c160; } .waring2 .list-table li.rd { color: #fd4f54; } .waring2 .list-table .tb-hd { width: 100%; height: 40px; } .waring2 .list-table .tb-bd { width: 100%; height: calc(100% - 40px); overflow: hidden; overflow-y: auto; } .waring2 .list-table .tb-hd ul { color: #6c6c6c; } .waring2 .list-table .tb-bd ul:nth-child(odd) { background: #f9f9f9; } .warning1bottom { left: 0; top: 368px; right: 0; height: 500px; } .warning1bottom .page-box { height: 100%; } .warning1bottom .list-table { width: 100%; height: calc(100% - 86px); margin-top: 20px; } .warning1bottom .list-table ul { width: 100%; overflow: hidden; } .warning1bottom .list-table li { width: calc(100% / 6); height: 40px; line-height: 40px; float: left; text-align: center; } .warning1bottom .list-table li img { margin-top: 10px; } .warning1bottom .list-table li.rd { color: #fd4f54; } .warning1bottom .list-table li.gd { color: #39c160; } .warning1bottom .list-table .tb-hd { width: 100%; height: 40px; } .warning1bottom .list-table .tb-bd { width: 100%; height: calc(100% - 40px); overflow: hidden; overflow-y: auto; } .warning1bottom .list-table .tb-hd ul { color: #98b9d9; } .warning1bottom .list-table .tb-bd ul:nth-child(odd) { background: #f9f9f9; } .warning1bottom .page-box .content .header-right input { height: 32px; line-height: 32px; background: #fff; font-size: 14px; color: #97b8da; border: 1px #c4c6cf solid; margin-left: 10px; padding: 0 8px; } .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 6, 30, 0.7); display: none; } .warning-detail { width: 500px; height: 80%; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; background: #111029; display: none; } .warning-detail .title { height: 40px; line-height: 40px; padding: 0 10px; background: #191934; } .warning-detail .detail { flex: 1; padding: 20px 10px 10px; overflow: auto; } .warning-detail .detail .base-info { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 10px; } .warning-detail .detail .base-info label { line-height: 30px; color: #97b8da; } .warning-detail .detail .base-info img { width: 20px; height: 20px; } .warning-detail .detail .base-info p { padding: 5px 10px; line-height: 22px; background: #191934; } .warning-detail .detail .btns { display: flex; justify-content: flex-end; } .warning-detail .detail .btns button { width: 80px; height: 32px; line-height: 32px; background: #5c89ff; border: 0; font-size: 14px; color: #fff; margin-left: 10px; cursor: pointer; } .warning-detail .detail .base-info .pdf { flex: 1; display: flex; justify-content: space-between; } .warning-detail .detail .base-info .pdf .operate { color: #1890ff; cursor: pointer; } .waring2 .waring2-bottom { position: absolute; width: calc(100% - 20px); height: calc(100% - 440px); top: 10px; overflow: hidden; } .waring2 .waring2-bottom .page-box { height: 100% !important; } .waring2 .waring2-bottom .content { padding: 0 !important; } .waring2 .waring2-bottom .check-box { position: absolute; top: 40px; left: 0; height: calc(100% - 40px); padding: 10px 20px; line-height: 22px; color: #fff; } .waring2 .waring2-bottom img { width: 100%; height: 100%; } .waring2 .waring2-hide { position: absolute; /* top: 84px; */ top: 20px; left: 30%; background: #111029 !important; width: 42%; /* height: calc(100% - 205px); */ height: calc(100% - 36px); transition: right 0.3s linear 0s; } .waring2 .waring2-hide .page-box { width: 100%; height: 100%; } .waring2 .waring2-hide .page-box .title i { width: 30px; height: 30px; font-style: normal; line-height: 30px; text-align: center; position: absolute; right: 5px; top: 5px; display: block; cursor: pointer; } .waring2 .waring2-hide .page-box .content .top-box { width: 100%; height: 100px; padding: 10px 20px; } .waring2 .waring2-hide .page-box .content .top-box ul { width: 100%; height: 100%; } .waring2 .waring2-hide .page-box .content .top-box li { float: left; width: 20%; display: flex; height: 40px; line-height: 40px; } .waring2 .waring2-hide .page-box .content .top-box li:nth-child(3n - 2) { width: 58%; } .waring2 .waring2-hide .page-box .content .top-box li:nth-child(5) { width: 60%; } .waring2 .waring2-hide .page-box .content .top-box li label { display: block; width: 70px; color: #6c6c6c; } .waring2 .waring2-hide .page-box .content .top-box li span { flex: 1; display: block; text-overflow: ellipsis; overflow: hidden; } .waring2 .waring2-hide .page-box .content .top-box li span.gd { color: #39c160; } .waring2 .waring2-hide .page-box .content .top-box li span.rd { color: #fd4f54; } .waring2 .waring2-hide.show { /* right:10px; */ position: absolute; top: 84px; left: 50%; margin-left: -21%; background: #111029 !important; width: 42%; /* margin: 0 auto; */ height: calc(100% - 140px); transition: right 0.3s linear 0s; } .waring2 .waring2-hide .page-box .content .list-table { border: 1px #2f2f45 solid; width: calc(100% - 40px); margin: 0 auto; /* height: 120px; */ height:203px; } .waring2 .waring2-hide .page-box .content .list-table .tb-hd ul li { width: calc(100% / 7); } .waring2 .waring2-hide .page-box .content .list-table .tb-bd ul li { width: calc(100% / 7); } .waring2 .waring2-hide .page-box .content .chart-header { width: calc(100% - 40px) !important; margin: 0 auto; width: 100%; height: 40px; text-align: right; padding-top: 5px; } .waring2 .waring2-hide .page-box .content .chart-header select { height: 32px; line-height: 32px; background: #fff; font-size: 14px; color: #97b8da; border: 0; margin-left: 10px; cursor: pointer; padding: 0 8px; } .waring2 .waring2-hide .page-box .content .chart-wrap { width: calc(100% - 40px); margin: 0 auto; height: 160px; /* height: calc(100% - 440px); */ } .waring2 .waring2-hide .page-box .content .chart-wrap .chart { width: 100%; height: 100%; } .waring2 .waring2-hide .page-box .content .bt-button { border: 1px #5c89ff solid; width: calc(100% - 40px); margin: 0 auto; height: 32px; line-height: 32px; color: #5c89ff; text-align: center; cursor: pointer; } .waring2 .waring2-popup { display: none; position: absolute; top: 470px; right: 45%; width: 400px; height: 300px; transition: right 0.3s linear 0s; } .waring2 .waring2-popup.show { display: block; } .waring2 .waring2-popup .page-box { width: 100%; height: 100%; } .waring2 .waring2-popup .page-box .content img { width: 100%; height: auto; } .waring2 .waring2-popup .page-box .title i { width: 30px; height: 30px; font-style: normal; line-height: 30px; text-align: center; position: absolute; right: 5px; top: 5px; display: block; cursor: pointer; } .list-table .tb-bd > ul { cursor: pointer; } .list-table .tb-bd > ul.active { background: rgba(131, 130, 136, 0.6) !important; } .scorce { position: absolute; right: 0; top: 0; font-size: 30px; padding: 10px; } .page-box::-webkit-scrollbar { display: none; } .filterChart { height: 32px; line-height: 32px; background: #fff; font-size: 14px; color: #6c6c6c; /* border: 0; */ margin-left: 10px; cursor: pointer; padding: 0 8px; margin-top: 4px; } .timesDuring { width: 20%; } .time-bottom .page-box .content .chart-wrap #chart2, .time-bottom .page-box .content .chart-wrap #chart1 { /* width: 800px; */ height: 240px; margin: 0 auto; } .show { display: block; } .label { /* color: #97b8da; */ line-height: 26px; } .content .showInfo { /* width: 97%; margin: 0 auto; background: RGB(25,25,52); line-height: 24px; */ } .preDealtail { width: 100%; padding: 0 20px 10px 20px; margin-top: 15px; } .save { text-align: right; } .save button { background: RGB(92, 137, 255); width: 66px; height: 22px; color: #fff; border: 0; cursor: pointer; } /* .inputClass{ background: RGB(25,25,52); border: 0; color: #fff; } */ .showInfo textarea { width: 100%; height: 50px; } #time-selector2 { background: #fff !important; color: #6c6c6c !important; } .time-selector { height: 32px; line-height: 32px; background: #fff; font-size: 14px; color: #6c6c6c; border: 1px solid #c4c6cf; margin-left: 10px; cursor: pointer; padding: 0 8px; } .preOpara { color: black; cursor: pointer; } .preOpara:hover { color: rgb(24, 144, 255); } .preOparal { color: #55566a; }