scmy/psdc-ui/src/views/emonitor/db/index.vue

<template>
  <div class="app-container home">
    <div class="top">
      <div class="card">
        <div>pic</div>
        <div>
          <p>当前功率</p>
          <h2>0kW</h2>
        </div>
      </div>
      <div class="card">
        <div>pic</div>
        <div>
          <p>日用电量</p>
          <h2>11kWh</h2>
        </div>
      </div>
      <div class="card">
        <div>pic</div>
        <div>
          <p>月用电量</p>
          <h2>141kWh</h2>
        </div>
      </div>
      <div class="card">
        <div>pic</div>
        <div>
          <p>累计用电量</p>
          <h2>1641kWh</h2>
        </div>
      </div>
    </div>
    <div class="mid">
      <div class="mid1">
        <div class="mid1-1">
          当前功率
        </div>
        <div>
          pic
        </div>
      </div>
      <div class="mid2">
        <div class="mid2-1">
          当前功率总览
        </div>
        <div>
          pic
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom1">
        <div class="bottom1-1">
          今日用电量总览
        </div>
        <div>
          pic
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Index">



</script>

<style scoped lang="scss">
p{
  margin-bottom: 10px;
}
.top{
  width: 100%;
  height: 110px;
  display: flex;
  justify-content: space-between;
}
.card{
  width: 24%;
  height: 100%;
  background-color: #2F3D8A;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.mid{
  width: 100%;
  height: 350px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.mid1{
  width: 24%;
  height: 100%;
  background-color: #2F3D8A;
}
.mid1-1{
  width: 100%;
  height: 40px;
  background-color: #374590;
  padding-top: 10px;
  padding-left: 10px;
}
.mid2{
  width: 74.67%;
  height: 100%;
  background-color: #2F3D8A;
}
.mid2-1{
  width: 100%;
  height: 40px;
  background-color: #374590;
  padding-top: 10px;
  padding-left: 10px;
}
.bottom{
  width: 100%;
  height: 350px;
}
.bottom1{
  width: 100%;
  height: 100%;
  background-color: #2F3D8A;
}
.bottom1-1{
  width: 100%;
  height: 40px;
  background-color: #374590;
  padding-top: 10px;
  padding-left: 10px;
}
</style>