.mainBox{ width: 100%; height:100%; background: url("../../assets/bjdc.png") no-repeat; background-size: 100% 100%; } .mainHeader{ width: 100%; height:65px; background: url("../../assets/headerdc.png") no-repeat; background-size: 100% 100%; min-width:1366px ; min-height:65px ; border-bottom: 1px dashed grey; display: flex; } .header-left{ width:25%; height:100%; display: flex; align-items: center; } /*.header-left .el-select{*/ /* padding-left: 20px !important;*/ /* border-radius: 10px !important;*/ /*}*/ /*.header-left .el-input__inner{*/ /* border: 1px solid #001C2E;*/ /* outline: none !important;*/ /* background: #001C2E;*/ /* box-shadow: 0px 0px 32px 0px rgba(131, 219, 255, 0.3);*/ /* border-radius: 16px;*/ /*}*/ /*.el-scrollbar{*/ /* background: #001C2E !important;*/ /*}*/ /*.el-select-dropdown {*/ /* border: 1px solid #004266 !important;*/ /*}*/ /*.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {*/ /* background-color: #002e4e !important;*/ /*}*/ /*.header-left .el-select .el-input.is-focus .el-input__inner {*/ /* border-color: #001C2E;*/ /*}*/ .header-middle{ width:50%; height:100%; font-size: 32px; font-family: Microsoft YaHei; font-weight: bold; color: #5D9AF5; line-height: 44px; background: linear-gradient(180deg, #EFF3F5 0%, #8AC5CF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 65px; text-align: center; } .header-right{ width:25%; height:100%; display: flex; align-items: center; justify-content: center; } .hourMs{ width: 100px; height:100%; line-height: 65px; font-size: 20px; font-family: Arial; font-weight: 400; color: #FFFFFF; } .timeContent{ height:100%; margin-left: 10px; display: flex; } .timeOrWeek{ height:100%; line-height:65px; } .times{ font-size: 20px; font-family: Microsoft YaHei; font-weight: bold; color: #5D9AF5; line-height: 65px; } .weeks{ font-size: 18px; font-family: Microsoft YaHei; font-weight: bold; color: #C1F051; line-height: 65px; margin-left: 10px; } /*.el-popper[x-placement^=bottom] .popper__arrow::after {*/ /* border-bottom-color: #01456a !important;*/ /*}*/ /*.el-popper[x-placement^=bottom] .popper__arrow {*/ /* border-bottom-color: #01456a !important;*/ /*}*/ .mainContent{ width: 100%; height:calc(100% - 64px); display: flex; } .mainContent-left{ width: calc(100% - 315px); height:100%; } .mainContent-right{ width: 315px; height:100%; } .mainContent-left-top{ width: 100%; height:60%; display: flex; } .mainContent-left-bottom{ width: 100%; height:40%; display: flex; } .mainContent-left-top-left{ width: 400px; height:100%; } .mainContent-left-top-right{ width: calc(100% - 400px); height:100%; } .summary-item { width: 100%; height: calc(33.33% - 20px); margin-top: 20px; display: flex; } .summary-item div.summary-item-col:first-child{ margin-left: 15px; } .summary-item div.summary-item-col:nth-child(2){ margin-left: 100px; } .summary-item-col{ width: 140px; height:100%; } .summary-title{ width: 140px; height:50px; display: flex; } .summary-title img:first-child{ width: 30px; height:30px; border:1px dashed #66FBF9 } .summary-text{ width: 80px; height:50px; text-align: center; display: grid; } .summary-title img:nth-child(3){ width: 20px; height:20px; border:1px dashed #66FBF9 } .summary-pointer{ font-size: 17px; font-family: Microsoft YaHei; font-weight: bold; color: #66FBF9; line-height: 20px; background: linear-gradient(180deg, #FFFFFF 0%, #ADE8FA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .summary-group{ font-size: 12px; font-family: Microsoft YaHei; font-weight: 400; color: #C1F053; line-height: 0px; } .summary-content{ font-size: 30px; font-family: Bahnschrift; font-weight: bold; color: #C2F151; /*line-height: 70px;*/ text-align: center; } .echarts-bottom:first-child{ width: calc(30% - 15px); height:100%; margin-left: 15px; } .echarts-bottom:nth-child(2){ width: calc(45% - 15px); height:100%; margin-left: 15px; } .echarts-bottom:nth-child(3){ width: calc(25% - 15px); height:100%; margin-left: 15px; } .echarts-bottom:nth-child(4){ width: calc(20% - 20px); height:100%; margin-left: 15px; } .echarts-bottom-title{ width: 100%; height:20px; border-bottom: 5px solid #003d5e; font-size: 18px; font-family: Microsoft YaHei; font-weight: bold; color: #FFFFFF; background: linear-gradient(180deg, #FFFFFF 0%, #ADE8FA 100%); -webkit-background-clip: text; /*-webkit-text-fill-color: transparent;*/ display: flex; align-items: center; background: url("../../assets/echart-title.png") no-repeat ; background-size: 70px 20px; } .echarts-bottom-title span{ font-size: 20px; font-family: Microsoft YaHei; font-weight: bold; color: #FFFFFF; background: linear-gradient(180deg, #FFFFFF 0%, #ADE8FA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-indent: 20px; } .echarts-bottom-title img{ width: 12px; height:20px; } .echarts-bottom-content{ width: 100%; height:calc(100% - 25px); } .echarts-bottom-content img{ border:5px solid #01456a; } .mainContent-right-top{ width: 100%; height:20%; } .mainContent-right-style1{ width: 100%; height:40%; } .mainContent-right-style2{ width: 100%; height:40%; } .cms-news{ width: 100%; list-style: none; margin: 0; padding: 0; } .cms-news li{ width: 100%; height:30px; line-height: 30px; margin-top: 10px; font-size: 14px; font-family: Microsoft YaHei; font-weight: 400; color: #AAE0FC; text-indent: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor:pointer; } .cms-news li:nth-child(odd){ background: #294658; } .cms-news li:nth-child(even){ background: #003c5e; } .turnBtn{ color:#64bfc1; width: 35px; height:35px; line-height: 35px; border-radius: 20px; background: #294658; position: absolute; z-index: 100; right:5px; font-size: 10px; box-shadow: 0 1px 10px 0 #5fb6e6; text-align: center; cursor: pointer; } .tzgg{ overflow:auto; } .tzgg::-webkit-scrollbar { /*滚动条整体样式*/ width : 3px; /*高宽分别对应横竖滚动条的尺寸*/ height: 10px; } .tzgg::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 10px; box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); background : #006397; } .tzgg::-webkit-scrollbar-track { /*滚动条里面轨道*/ box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 10px; background : #003c5e; } .el-carousel__button { display: block; opacity: .48; width: 10px !important; height: 10px !important; border-radius: 10px !important; } .mainContent-right-style a{ width: 100%; height:100%; display: block; } .mainContent-right-style img{ width: 100%; height:100%; } .titleCar{ width: 100%; top:0; position: absolute; z-index:100; height:30px; line-height: 30px; text-align: center; color:#fff; font-size: 12px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .date-down{ width: 202px; display: flex; background: #001C2E; box-shadow: 0px 0px 32px 0px rgba(131, 219, 255, 0.3); border-radius: 15px; margin-left: 20px; position: relative; cursor:pointer; } .date-down div:first-child{ width: 50px; height:30px; border-right: 1px solid #002d49; border-bottom-left-radius: 15px; border-top-left-radius: 15px; font-size:12px; color:#01c3dc; text-align: center; line-height: 30px; } .date-down div:nth-child(2){ width: 120px; height:30px; color:#01c3dc; text-align: center; line-height: 30px; font-size:12px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow:ellipsis; } .date-down div:nth-child(3){ width: 30px; height:30px; border-bottom-right-radius: 15px; border-top-right-radius: 15px; border-left: 1px solid #002d49; font-size:16px; text-align: center; line-height: 30px; color: #01c3dc; } .date-down ul{ width: 90%; overflow: auto; max-height: 300px; list-style: none; position: absolute; z-index:100; top:32px; left:5%; background: #001C2E; border:1px solid #07537b; scrollbar-color: #006397 #001C2E; } .date-down ul li{ width: 100%; height:30px; line-height: 30px; border-bottom:1px solid #073a5e; color: #01c3dc; font-size: 12px; text-align: center; cursor:pointer; } .date-down ul li:hover{ background: #07537b!important; color: #64b2ba !important; } .date-down ul::-webkit-scrollbar { /*滚动条整体样式*/ width : 3px; /*高宽分别对应横竖滚动条的尺寸*/ height: 10px; } .date-down ul::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 10px; box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); background : #006397; } .date-down ul::-webkit-scrollbar-track { /*滚动条里面轨道*/ box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 10px; background : #003c5e; } video { object-fit:fill; width:100%; height:100%; } .line-data{ overflow:hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow:ellipsis; }