<template>
  <div class="app-container home">
    <div class="top">
      <div class="card">
        <div>pic</div>
        <div>
          <p>温度传感器1</p>
          <h2>40℃</h2>
        </div>
      </div>
      <div class="card">
        <div>pic</div>
        <div>
          <p>温度传感器2</p>
          <h2>41℃</h2>
        </div>
      </div>
      <div class="card">
        <div>pic</div>
        <div>
          <p>温度传感器3</p>
          <h2>33℃</h2>
        </div>
      </div>
      <div class="card">
        <div>pic</div>
        <div>
          <p>温度传感器4</p>
          <h2>36℃</h2>
        </div>
      </div>
      <div class="card">
        <div>pic</div>
        <div>
          <p>温度传感器5</p>
          <h2>35℃</h2>
        </div>
      </div>
      <div class="card">
        <div>pic</div>
        <div>
          <p>温度传感器6</p>
          <h2>37℃</h2>
        </div>
      </div>
      <div class="card">
        <div>pic</div>
        <div>
          <p>温度传感器7</p>
          <h2>38℃</h2>
        </div>
      </div>
      <div class="card">
        <div>pic</div>
        <div>
          <p>温度传感器8</p>
          <h2>32℃</h2>
        </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: 260px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.card{
  width: 24%;
  height: 110px;
  background-color: #2F3D8A;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.bottom{
  width: 100%;
  height: 350px;
}
.bottom1{
  width: 100%;
  height: 350px;
  background-color: #2F3D8A;
}
.bottom1-1{
  width: 100%;
  height: 40px;
  background-color: #374590;
  padding-top: 10px;
  padding-left: 10px;
}
</style>

