<template>
  <div class="app-container home">
    <div class="top">
      <div class="card">
        <div>pic</div>
        <div>
          <p>总用电量</p>
          <h2>1641kWh</h2>
        </div>
      </div>
      <div class="card">
        <div>pic</div>
        <div>
          <p>当前功率</p>
          <h2>11kW</h2>
        </div>
      </div>
      <div class="card">
        <div>pic</div>
        <div>
          <div>
            <p>当前温度</p>
            <h2>25℃</h2>
          </div>
        </div>
      </div>
      <div class="card">
        <div>pic</div>
        <div>
          <p>运行状态</p>
          <h2 style="color: #1ab394">开启</h2>
        </div>
      </div>
    </div>

    <div class="bottom">
      <div class="bottom1">
        <div class="bottom1-1">
          日用电量
        </div>
        <div>
          pic
        </div>
      </div>
      <div class="bottom1">
        <div class="bottom1-1">
          月用电量
        </div>
        <div>
          pic
        </div>
      </div>
      <div class="bottom1">
        <div class="bottom1-1">
          当前功率
        </div>
        <div>
          pic
        </div>
      </div>
      <div class="bottom1">
        <div class="bottom1-1">
          当前温度
        </div>
        <div>
          pic
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Index">



</script>

<style scoped lang="scss">
.top{
  width: 100%;
  height: 110px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
}
.card{
  width: 24%;
  height: 110px;
  background-color: #2F3D8A;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.bottom{
  width: 100%;
  height: 640px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.bottom1{
  width: 49.35%;
  height: 300px;
  background-color: #2F3D8A;
  margin-bottom: 20px;
}
p{
  margin-bottom: 10px;
}
.bottom1-1{
  width: 100%;
  height: 40px;
  background-color: #374590;
  padding-top: 10px;
  padding-left: 10px;
}
</style>

