.time-top { left: 10px; top: 10px; right: 10px; height: calc(100% - 396px); } .time-top .content { padding: 0px; display: flex; } .time-top .content .check-box { position: absolute; top: 0px; left: 0; height: 40px; padding: 10px 20px; line-height: 22px; z-index:100; color: #fff; width: 100%; /* font-size: 16px; */ } .time-top .content .check-box p{ display: inline-block; } .time-top .content .check-box p + p{ margin-left: 10px; } .time-top .content .check-box img{ width: 12px; height: auto; margin-left: 5px } .time-top .content ul { width: 300px; } .time-top .content ul li { float: left; width: 140px; height: calc((100% - 50px) / 6); display: flex; justify-content: center; align-items: center; text-align: center; margin: 0 10px 10px 0; background: #f9f9f9; border-radius: 4px; cursor: pointer; } .time-top .content ul li:hover, .time-top .content ul li.active { background: #5c89ff; color:white; } .time-top .content .imgbox { flex: 1; } .time-top .content .imgbox img { width: 100%; height: 100%; } .time-bottom { position: absolute; left: 10px; right: 10px; bottom: 0; height: 320px; } .time-bottom .page-box { position: static !important; height: 370px; margin-bottom: 10px; } .time-bottom .page-box .content { padding: 20px 20px 10px; display: flex; flex-direction: column; } .time-bottom .page-box .content .header { display: flex; justify-content: space-between; } .time-bottom .page-box .content .header-left { display: flex; } .time-bottom .page-box .content .header-left li { height: 32px; line-height: 30px; padding: 0 2px; border: 1px solid #c4c6cf; color: #6c6c6c; cursor: pointer; } .time-bottom .page-box .content .header-left li.active, .time-bottom .page-box .content .header-left li:hover { border-color: #5C89FF; color: #5C89FF; } .time-bottom .page-box .content .header-left li:first-child { border-radius: 4px 0 0 4px; } .time-bottom .page-box .content .header-left li:last-child { border-radius: 0 4px 4px 0; } .time-bottom .page-box .content .header-right { display: flex; align-items: center; } .time-bottom .page-box .content .header-right .update { display: flex; align-items: center; } .time-bottom .page-box .content .header-right .update span { color: #3698FD; } .time-bottom .page-box .content .header-right select, .time-bottom .page-box .content .header-right input { height: 32px; line-height: 32px; background: #fff; font-size: 14px; color: #6c6c6c; border: 1px solid #c4c6cf; margin-left: 10px; cursor: pointer; padding: 0 8px; } .time-bottom .page-box .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; } .time-bottom .page-box .content .header-right .search { background: #5C89FF; } .time-bottom .page-box .content .header-right .export { background: #FCB333; } .time-bottom .page-box .content .header-right button img { width: 14px; height: 14px; margin-right: 10px; } .time-bottom .page-box .content .chart-wrap { flex: 1; display: flex; } .time-bottom .page-box .content .chart-wrap .chart { width: calc(100% - 43px); } .time-bottom .page-box .content .chart-wrap .imgbox { flex: 1; display: flex; flex-direction: column; align-items: center; margin-top: 20px; /* padding-top: 20px; */ } .time-bottom .page-box .content .chart-wrap .imgbox img { width: 100%; height: 240px; margin-bottom: 10px; } .time-bottom .page-box .content .chart-wrap .imgbox span { color: #ACB3BE; } .time3top{ left:15px; top:10px; right:15px; height: 348px; } .time3top .imgbox { width: 33.3%; height: 100%; float: left; padding: 10px; padding-right: 5px; } .time3top .imgbox + .imgbox + .imgbox{ float: right; padding-right: 10px; padding-left: 10px; } .time3top .imgbox img{ width: 100%; height: 100%; } .time3bottom{ left:15px; top:368px; right:15px; bottom: 10px; height: auto; } .time3bottom .page-box{ height: 100%; } .time3bottom .list-table{ width: 100%; height: calc(100% - 84px); margin-top: 20px; } .time3bottom .list-table ul{ width: 100%; overflow: hidden; } .time3bottom .list-table li{ width: calc(100% / 14); height: 40px; line-height: 40px; float: left; font-size:12px; text-align: center; } .time3bottom .list-table li.rd{ color:#fc0000; } .time3bottom .list-table li.gd{ color:#39c160; } .time3bottom .list-table .tb-hd{ width: 100%; height: 40px; } .time3bottom .list-table .tb-bd{ width: 100%; height: calc(100% - 40px); overflow: hidden; overflow-y: auto; } .time3bottom .list-table .tb-hd ul{ color:#000; } .time3bottom .list-table .tb-bd ul:nth-child(odd){ background: #f9f9f9; } /* 统计数据-1,echarts两个合成一行 */ .time-bottom_1 { position: absolute; left: 10px; right: 10px; bottom: 0; height: 320px; } .time-bottom_1 .page-box { position: static !important; height: 370px; margin-bottom: 10px; } .time-bottom_1 .page-box .content { padding: 20px 20px 10px; display: flex; flex-direction: column; } .time-bottom_1 .page-box .content .header { display: flex; justify-content: space-between; } .time-bottom_1 .page-box .content .header-left { display: flex; } .time-bottom_1 .page-box .content .header-left li { height: 32px; line-height: 30px; padding: 0 8px; border: 1px solid #c4c6cf; color: #6c6c6c; cursor: pointer; } .time-bottom_1 .page-box .content .header-left li.active, .time-bottom_1 .page-box .content .header-left li:hover { border-color: #5C89FF; color: #5C89FF; } .time-bottom_1 .page-box .content .header-left li:first-child { border-radius: 4px 0 0 4px; } .time-bottom_1 .page-box .content .header-left li:last-child { border-radius: 0 4px 4px 0; } .time-bottom_1 .page-box .content .header-right { display: flex; align-items: center; } .time-bottom_1 .page-box .content .header-right .update { display: flex; align-items: center; } .time-bottom_1 .page-box .content .header-right .update span { color: #3698FD; } .time-bottom_1 .page-box .content .header-right select, .time-bottom_1 .page-box .content .header-right input { height: 32px; line-height: 32px; background: #fff; font-size: 14px; color: #6c6c6c; border: 1px solid #c4c6cf; margin-left: 10px; cursor: pointer; padding: 0 8px; } .time-bottom_1 .page-box .content .header-right button { width: 65px; height: 32px; border: 0; color: #fff; cursor: pointer; display: flex; justify-content: center; align-items: center; margin-left: 10px; } .time-bottom_1 .page-box .content .header-right .search { background: #5C89FF; } .time-bottom_1 .page-box .content .header-right .export { background: #FCB333; } .time-bottom_1 .page-box .content .header-right button img { width: 14px; height: 14px; margin-right: 10px; } .time-bottom_1 .page-box .content .chart-wrap { flex: 1; display: flex; } .time-bottom_1 .page-box .content .chart-wrap .chart { width: 1380px; } .time-bottom_1 .page-box .content .chart-wrap .imgbox { flex: 1; display: flex; flex-direction: column; align-items: center; margin-top: 20px; /* padding-top: 20px; */ } .time-bottom_1 .page-box .content .chart-wrap .imgbox img { width: 100%; height: 240px; margin-bottom: 10px; } .time-bottom_1 .page-box .content .chart-wrap .imgbox span { color: #ACB3BE; } /* 时程数据-1,样式单独修改 */ .time-bottom_2 { position: absolute; left: 10px; right: 10px; bottom: 0; height: 320px; } .time-bottom_2 .page-box { position: static !important; height: 370px; margin-bottom: 10px; } .time-bottom_2 .page-box .content { padding: 20px 20px 10px; display: flex; flex-direction: column; } .time-bottom_2 .page-box .content .header { display: flex; justify-content: space-between; } .time-bottom_2 .page-box .content .header-left { display: flex; } .time-bottom_2 .page-box .content .header-left li { height: 32px; line-height: 30px; padding: 0 8px; border: 1px solid #c4c6cf; color: #6c6c6c; cursor: pointer; } .time-bottom_2 .page-box .content .header-left li.active, .time-bottom_2 .page-box .content .header-left li:hover { border-color: #5C89FF; color: #5C89FF; } .time-bottom_2 .page-box .content .header-left li:first-child { border-radius: 4px 0 0 4px; } .time-bottom_2 .page-box .content .header-left li:last-child { border-radius: 0 4px 4px 0; } .time-bottom_2 .page-box .content .header-right { display: flex; align-items: center; } .time-bottom_2 .page-box .content .header-right .update { display: flex; align-items: center; } .time-bottom_2 .page-box .content .header-right .update span { color: #3698FD; } .time-bottom_2 .page-box .content .header-right select, .time-bottom_2 .page-box .content .header-right input { height: 32px; line-height: 32px; background: #fff; font-size: 14px; color: #6c6c6c; border: 1px solid #c4c6cf; margin-left: 10px; cursor: pointer; padding: 0 8px; } .time-bottom_2 .page-box .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; } .time-bottom_2 .page-box .content .header-right .search { background: #5C89FF; } .time-bottom_2 .page-box .content .header-right .export { background: #FCB333; } .time-bottom_2 .page-box .content .header-right .del { background: #d43939; } .time-bottom_2 .page-box .content .header-right .upload { background: #66f572; } .time-bottom_2 .page-box .content .header-right button img { width: 14px; height: 14px; margin-right: 10px; } .time-bottom_2 .page-box .content .chart-wrap { flex: 1; display: flex; } .time-bottom_2 .page-box .content .chart-wrap .chart { width: 1380px; } .time-bottom_2 .page-box .content .chart-wrap .imgbox { flex: 1; display: flex; flex-direction: column; align-items: center; margin-top: 20px; /* padding-top: 20px; */ } .time-bottom_2 .page-box .content .chart-wrap .imgbox img { width: 100%; height: 240px; margin-bottom: 10px; } .time-bottom_2 .page-box .content .chart-wrap .imgbox span { color: #fff; z-index: 99999; position: absolute; left: 22%; top: 217px; } .chart-wrap .chartTips{ right: 83px !important; bottom: -126px !important; width: 184px !important; height: 90px !important; position: relative !important; border: 1px solid; flex-direction: column; justify-content: space-around; display: flex; } .time-bottom .page-box .content .chart-wrap .legendView .legendLabel { width: 10px; height: 10px; border-width: 1px; border-style: solid; margin: 0 8px !important; } .chartTips li{ display: flex; align-items: center; } .el-tag.el-tag--info { background: white; border-color: #e9e9eb; color: #909399; } /* 修改element下拉选框样式 */