.leftSection { display : flex; justify-content: flex-start; align-items : center; } .leftSection_right { flex: 1; } /** PeakValley page ===start=== **/ .peakPage_scrollWrap { overflow : auto hidden; margin-bottom: 0.15rem; height : 280px; } .peakPage_scrollWrap .peakPage_wrap { min-width : 1480px; display : flex; justify-content: flex-start; align-items : center; } .peakPage_wrap .peakPage_section { padding : 0 0.2rem; display : flex; flex : 1; justify-content: space-between; align-items : flex-start; border-right : 1px solid #f6f6f6; } .peakPage_wrap .peakPage_section:last-child { border: none; } .peakPage_section .peakPage_data { width: 38%; } .peakPage_section .peakPage_charge { width: 60%; } .peakPage_data .peakPage_title { height : 36px; margin-bottom: 20px; } .peakPage_data .peakPage_title span { margin-left : 8px; font-size : 16px; color : #35cdef; font-weight : bolder; vertical-align: bottom; } .peakPage_data .peakPage_detail { overflow : hidden; text-align : left; line-height : 1; margin-bottom: 12px; } .peakPage_data .peakPage_detail:last-child { margin-bottom: 0; } .peakPage_data .peakPage_detail span:first-child { font-size: 18px; color : #6d6d6d; } .peakPage_data .peakPage_detail span:last-child { float : right; font-size: 22px; color : #333333; } /** PeakValley page ===end=== **/ /** UsePage && RealTimePage ===start=== **/ .usePage_usageWrap, .realTimePage_measureWrap { width: 100%; } .usePage_usageWrap { height: calc(332px + 0.6rem); } .realTimePage_measureWrap { height: 100%; } .usePage_usageHead, .realTimePage_measureHead { height : 0.62rem; line-height : 0.62rem; text-align : left; padding-left: 0.2rem; color : #ffffff; font-size : 16px; font-weight : bold; background : linear-gradient(99deg, rgba(115, 202, 250, 1) 0%, rgba(110, 154, 222, 1) 100%); } .usePage_usageBody, .realTimePage_measureBody { padding : 10px 16px; overflow-y : auto; background-color: #ffffff; } .usePage_usageBody { height: calc(332px + 0.6rem - 0.62rem); } .realTimePage_measureBody { height: calc(100% - 0.62rem); } /** UsePage && RealTimePage ===end=== **/ /** StructurePage ===start=== **/ .structure_area2 { display : flex; justify-content: space-between; align-items : center; padding : 0 4px; } .structure_area2Card { width: 24%; } .structure_area3 { display : flex; flex-direction : row; justify-content: space-between; align-items : center; flex-wrap : wrap; padding : 0 4px; } .structure_area3Card { width : 24%; margin-top: 16px; } .structure_area3Card :global(.ant-input.ant-input-disabled) { height: 0.4rem; } .structure_area3Card p { line-height: 1; margin : 0 0 0.1rem 0; } .structure_alarm { height : 300px; padding-top: 16px; } .structure_alarm>p { margin : 0 0 10px 0; display : -webkit-box; box-orient : vertical; line-clamp : 2; overflow : hidden; color : #f9517d; /* autoprefixer : off */ -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* autoprefixer : on */ } .structure_table { text-align: right; padding : 16px 0; } /** StructurePage ===end=== **/ /** realtime page ===start=== **/ .realTimePage_horizontalBoxWrap { width : 100%; white-space : nowrap; background-color: #ffffff; } .realTimePage_horizontalBoxWrap .meter_box { display : inline-block; margin-bottom: 0; } .realTimePage_boxWrap { display : flex; flex-direction : column; justify-content: center; align-items : center; } .realTimePage_boxWrap .meter_box { margin-right: 0; } .meter_box { text-align : center; margin-right: 25px; cursor : pointer; } .meter_title, .meter_detail { line-height: 1; margin : 0; color : #a4abb6; } .meter_title { font-size: 12px; margin : 10px 0; } .meter_detail { font-size: 14px; } .electric_bg, .water_bg, .gas_bg, .hot_bg, .coal_bg { position : relative; width : 160px; height : 160px; background-size: auto 100% !important; overflow : hidden; } .electric_bg { height : 204px; background: url('../../../assets/EM/electric.png') center no-repeat; } .water_bg { background: url('../../../assets/EM/water.png') center no-repeat; } .gas_bg { background: url('../../../assets/EM/gas.png') center no-repeat; } .hot_bg { background: url('../../../assets/EM/hot.png') center no-repeat; } .coal_bg { background: url('../../../assets/EM/coal.png') center no-repeat; } .electric_bg:hover .box_close, .water_bg:hover .box_close, .gas_bg:hover .box_close, .hot_bg:hover .box_close, .coal_bg:hover .box_close { display: inline-block; } .box_close { position : absolute; bottom : 0; right : 50%; transform: translateX(12px); font-size: 24px !important; color : #ff6c6c; display : none; } .electric_status, .water_status, .gas_status, .hot_status, .coal_status { width : 10px; height : 10px; border-radius: 50%; position : absolute; } .electric_status { left : 75px; bottom: 26px; } .water_status { left : 75px; bottom: 37px; } .gas_status { left : 75px; bottom: 23px; } .hot_status { top : 30px; left: 75px; } .coal_status { left : 75px; bottom: 37px; } .electric_curr, .electric_sum, .water_curr, .water_sum, .gas_curr, .gas_sum, .hot_curr, .hot_sum, .coal_curr, .coal_sum { width : 100%; line-height : 22px; color : #3d5066; display : flex; flex-direction : column; justify-content: center; align-items : center; } .electric_curr span:first-child, .water_curr span:first-child, .gas_curr span:first-child, .hot_curr span:first-child, .coal_curr span:first-child { font-size: 12px; } .electric_curr span:last-child, .water_curr span:last-child, .gas_curr span:last-child, .hot_curr span:last-child, .coal_curr span:last-child { display: inline-block; width : 46%; border : 1px solid #c8c8c8; } .electric_curr { margin-top: 22px; } .electric_curr span:last-child { width : 100%; border: none; } .water_curr { margin-top: 34px; } .gas_curr { margin-top: 26px; } .hot_curr { color : #ffffff; margin-top: 40px; } .coal_curr { color : #ffffff; margin-top: 30px; } .electric_sum { height : 73px; margin-top: 24px; } .water_sum { height: 32px; } .gas_sum { height: 48px; } .hot_sum { height: 20px; color : #ffffff; } .sum_text { margin : 0; font-size : 12px; line-height: 18px; } /** realtime page ===end=== **/ /** EMEquipmentRealTimePage ===start=== **/ .equipmentPic { width : auto; height: 3rem; } .equipmentStatusPic { width : 30px; height : 30px; margin-right: 6px; } .equipmentFont { font-size : 16px; font-weight: bolder; } /** EMEquipmentRealTimePage ===end=== **/