mh_jy_safe_web/src/components/CustomPages/EM/index.css

.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=== **/