* {
  margin: 0;
  padding: 0;
  list-style: none;
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
}
.img {
  display: block;
}
body,
html {
  font-family: '微软雅黑', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
  width: 100%;
  overflow-x: hidden;
}
body {
  background: url("../img/page-bg.png") no-repeat top;
  background-color: #F5F5F5;
  background-size: 100%;
}
body .slider-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
body .slide-button {
  text-align: center;
  padding: 10px 0;
  transition: all 0.3s ease;
}
body #weekly-button.active,
body #monthly-button.active {
  background-color: white;
  color: green;
}
body .flex-column {
  display: flex;
  flex-direction: column;
}
body .canvas {
  flex: 1;
}
body .canvas#change-14-canvas {
  height: 13vw;
  margin-top: 10px;
}
body .canvas#electricity-bill-statistics {
  margin-top: 10px;
}
body .header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 0 2%;
}
body .header .title-img {
  height: 3.25rem;
  background: url("../img/title-bg.png") no-repeat top;
  background-size: cover;
  font-size: 1.5rem;
  font-weight: 700;
  color: #43cf7c;
  text-align: center;
  width: fit-content;
  padding: 0.75rem 4.25rem;
  line-height: 1.625rem;
  margin: -0.3125rem auto 0;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0px);
}
body .header .title {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  padding-top: 0.7rem;
}
body .main {
  padding: 1rem 2%;
}
body .main .grid-card-box {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr 2fr;
  /* 第一行的列宽比例 */
  grid-template-rows: auto auto;
  /* 两行 */
  width: 1920px;
  height: 1080px;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body .main .grid-card-box .row-2 {
  grid-gap: 1rem;
  grid-column: 1 / -1;
  /* 使.row2跨越整个网格宽度 */
  display: grid;
  grid-template-columns: 2fr 1fr;
  /* 第二行的列宽比例 */
}
body .main .grid-card-box .white-card {
  border-radius: 1rem;
  background: #ffffff;
  padding: 1.5rem;
}
body .main .grid-card-box .white-card .card-header {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
body .main .grid-card-box .white-card .card-header .card-title {
  color: #43CF7C;
  font-size: 1.5rem;
  font-weight: 700;
}
body .main .grid-card-box .white-card .card-header .right-text .date {
  color: rgba(0, 15, 6, 0.4);
  font-size: 1.125rem;
}
body .main .grid-card-box .white-card .card-header .right-text .total-money {
  color: #000f06;
  font-size: 1.5rem;
  font-weight: 700;
}
body .main .grid-card-box .white-card .card-main .compare-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
body .main .grid-card-box .white-card .card-main .compare-box .type-text {
  color: #000f06;
  font-size: 18px;
}
body .main .grid-card-box .white-card .card-main .compare-box .num {
  color: #43CF7C;
  font-size: 18px;
}
body .main .grid-card-box .white-card .card-main .compare-box .num.down {
  color: #f78f65;
}
body .main .grid-card-box .white-card.today-order-card {
  background-image: url("../img/today-order-card-bg.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: right;
}
body .main .grid-card-box .white-card.today-order-card .card-main .money {
  font-size: 3rem;
  font-weight: 700;
  margin: 49px 0 24px;
}
body .main .grid-card-box .white-card.today-order-card .card-main .money:before {
  content: "¥";
  font-size: 1.5rem;
}
body .main .grid-card-box .white-card.charging-capacity,
body .main .grid-card-box .white-card.electricity-bill {
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: calc(100% + 20%);
  background-position-y: center;
}
body .main .grid-card-box .white-card.charging-capacity.green,
body .main .grid-card-box .white-card.electricity-bill.green {
  background-image: url("../img/circle-green.png");
}
body .main .grid-card-box .white-card.charging-capacity.orange,
body .main .grid-card-box .white-card.electricity-bill.orange {
  background-image: url("../img/circle-orange.png");
}
body .main .grid-card-box .white-card.charging-capacity .card-main,
body .main .grid-card-box .white-card.electricity-bill .card-main {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}
body .main .grid-card-box .white-card.charging-capacity .card-main .right,
body .main .grid-card-box .white-card.electricity-bill .card-main .right {
  position: relative;
}
body .main .grid-card-box .white-card.charging-capacity .card-main .right .charging-capacity-three-days,
body .main .grid-card-box .white-card.electricity-bill .card-main .right .charging-capacity-three-days {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-110%, -50%);
  height: 50%;
  display: flex;
  align-items: flex-end;
}
body .main .grid-card-box .white-card.charging-capacity .card-main .right .charging-capacity-three-days .today,
body .main .grid-card-box .white-card.electricity-bill .card-main .right .charging-capacity-three-days .today {
  position: absolute;
  right: 0;
  top: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
body .main .grid-card-box .white-card.charging-capacity .card-main .right .charging-capacity-three-days .today.green,
body .main .grid-card-box .white-card.electricity-bill .card-main .right .charging-capacity-three-days .today.green {
  background: #43cf7c;
}
body .main .grid-card-box .white-card.charging-capacity .card-main .right .charging-capacity-three-days .today.orange,
body .main .grid-card-box .white-card.electricity-bill .card-main .right .charging-capacity-three-days .today.orange {
  background: #f78f65;
}
body .main .grid-card-box .white-card.charging-capacity .card-main .right .charging-capacity-three-days .today.today-50,
body .main .grid-card-box .white-card.electricity-bill .card-main .right .charging-capacity-three-days .today.today-50 {
  opacity: 0.5;
}
body .main .grid-card-box .white-card.charging-capacity .card-main .right .charging-capacity-three-days .today.today-20,
body .main .grid-card-box .white-card.electricity-bill .card-main .right .charging-capacity-three-days .today.today-20 {
  opacity: 0.2;
}
body .main .grid-card-box .white-card.charging-capacity .card-main .right .charging-capacity-three-days .day,
body .main .grid-card-box .white-card.electricity-bill .card-main .right .charging-capacity-three-days .day {
  width: 25px;
  max-height: 100%;
}
body .main .grid-card-box .white-card.charging-capacity .card-main .right .charging-capacity-three-days .day.green,
body .main .grid-card-box .white-card.electricity-bill .card-main .right .charging-capacity-three-days .day.green {
  background: linear-gradient(180deg, #43cf7c 0%, #aeebc7 100%);
}
body .main .grid-card-box .white-card.charging-capacity .card-main .right .charging-capacity-three-days .day.orange,
body .main .grid-card-box .white-card.electricity-bill .card-main .right .charging-capacity-three-days .day.orange {
  background: linear-gradient(180deg, #f78f65 0%, #fccdba 100%);
}
body .main .grid-card-box .white-card.charging-capacity .card-main .right .charging-capacity-three-days .day.day-20,
body .main .grid-card-box .white-card.electricity-bill .card-main .right .charging-capacity-three-days .day.day-20 {
  opacity: 0.2;
}
body .main .grid-card-box .white-card.charging-capacity .card-main .right .charging-capacity-three-days .day.day-50,
body .main .grid-card-box .white-card.electricity-bill .card-main .right .charging-capacity-three-days .day.day-50 {
  opacity: 0.5;
}
body .main .grid-card-box .white-card.charging-capacity .card-main .right .charging-capacity-three-days .day:nth-last-child(1),
body .main .grid-card-box .white-card.electricity-bill .card-main .right .charging-capacity-three-days .day:nth-last-child(1) {
  position: relative;
}
body .main .grid-card-box .white-card.charging-capacity .card-main .right .charging-capacity-three-days .day:nth-last-child(1):before,
body .main .grid-card-box .white-card.electricity-bill .card-main .right .charging-capacity-three-days .day:nth-last-child(1):before {
  content: "";
  position: absolute;
  left: calc(50% - 4.5px);
  top: -12px;
  width: 9px;
  height: 9px;
  background: inherit;
  border-radius: 50%;
}
body .main .grid-card-box .white-card.charging-capacity .card-main .number-list,
body .main .grid-card-box .white-card.electricity-bill .card-main .number-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 60px;
}
body .main .grid-card-box .white-card.charging-capacity .card-main .number-list .large-electricity-number,
body .main .grid-card-box .white-card.electricity-bill .card-main .number-list .large-electricity-number {
  color: #000f06;
  padding: 1rem 0;
  font-size: 3rem;
  font-weight: 700;
}
body .main .grid-card-box .white-card.charging-capacity .card-main .number-list .large-electricity-number:after,
body .main .grid-card-box .white-card.electricity-bill .card-main .number-list .large-electricity-number:after {
  content: "度";
  font-size: 1.25rem;
  display: inline-block;
  padding-left: 8px;
}
body .main .grid-card-box .white-card.charging-capacity .card-main .number-list .electricity-number .subtitle,
body .main .grid-card-box .white-card.electricity-bill .card-main .number-list .electricity-number .subtitle {
  color: #000f06;
  font-size: 14px;
}
body .main .grid-card-box .white-card.charging-capacity .card-main .number-list .electricity-number .number,
body .main .grid-card-box .white-card.electricity-bill .card-main .number-list .electricity-number .number {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 10px;
}
body .main .grid-card-box .white-card.charging-capacity .card-main .number-list .electricity-number .number:after,
body .main .grid-card-box .white-card.electricity-bill .card-main .number-list .electricity-number .number:after {
  content: "度";
  font-size: 18px;
  display: inline-block;
  padding-left: 8px;
}
body .main .grid-card-box .white-card.charging-capacity .card-main .number-list .electricity-number.electricity-number-orange .number,
body .main .grid-card-box .white-card.electricity-bill .card-main .number-list .electricity-number.electricity-number-orange .number {
  color: #f78f65;
}
body .main .grid-card-box .white-card.charging-capacity .card-main .number-list .electricity-number.electricity-number-blue .number,
body .main .grid-card-box .white-card.electricity-bill .card-main .number-list .electricity-number.electricity-number-blue .number {
  color: #749fe8;
}
body .main .grid-card-box .white-card.charging-capacity .card-main .number-list .electricity-number.electricity-number-purple .number,
body .main .grid-card-box .white-card.electricity-bill .card-main .number-list .electricity-number.electricity-number-purple .number {
  color: #b469f5;
}
body .main .grid-card-box .white-card.electricity-bill {
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: center!important;
  background-position-y: -25% !important;
}
body .main .grid-card-box .white-card.electricity-bill.green {
  background-image: url("../img/circle-green.png");
}
body .main .grid-card-box .white-card.electricity-bill.orange {
  background-image: url("../img/circle-orange.png");
}
body .main .grid-card-box .white-card.electricity-bill .card-main .number-list .large-electricity-number:after {
  content: "元";
}
body .main .grid-card-box .white-card.income-statistics {
  background-image: url("../img/income-statistics-bg.png");
  background-size: contain;
  background-position: top;
  background-repeat: no-repeat;
}
body .main .grid-card-box .white-card.income-statistics .card-header .card-title {
  font-size: 2rem;
}
body .main .grid-card-box .white-card.income-statistics .card-main {
  margin-top: 42px;
}
body .main .grid-card-box .white-card.income-statistics .card-main .small-card .title {
  color: #000;
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 20px;
}
body .main .grid-card-box .white-card.income-statistics .card-main .small-card .flex-box {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
body .main .grid-card-box .white-card.income-statistics .card-main .small-card .flex-box .card {
  padding: 1rem;
  border-radius: 8px;
  background: #ffffff;
  border: 2px solid #42cf7a;
}
body .main .grid-card-box .white-card.income-statistics .card-main .small-card .flex-box .card .sub-title {
  color: rgba(0, 15, 6, 0.6);
  font-size: 18px;
  text-align: center;
}
body .main .grid-card-box .white-card.income-statistics .card-main .small-card .flex-box .card .money {
  color: #000f06;
  font-size: 2rem;
  text-align: center;
  margin-top: 14px;
}
/*# sourceMappingURL=styles.css.map */