front/static/homepages/homes/home/css/home.scss

.background {
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.home_text{
  position: absolute;
  top: 5%;
  height: 27%;
  width: 100%;
  left: -13%;
}
.swiper{
  position: absolute;
  top: 15%;
  height: 28%;
  width: 98%;
  left: 1%;
}
.swipe_dot{
  position: absolute;
  top: 41%;
  height: 5%;
  width: 44%;
  left: 28%;
}
.line{
  position: absolute;
  top: 48%;
  height: 0.3%;
  width: 70%;
  left: 15%;
}
.recipe_area_word{
  position: absolute;
  top: 53%;
  height: 3.7%;
  width: 30%;
  left: 6%;
}
.recipe_area {
  background-color: #E0E0BA;
  position: absolute;
  top: 58%;
  height: 85%;
  width: 90%;
  left: 5%;
  border-radius: 30px;
  .ai_recognize_recipe {
    position: absolute;
    top: -5%;
    width: 105%;
    height: 32%;
    left: -2.5%;

  }
  .ai_recognize_hot {
    position: absolute;
    top: 24%;
    width: 105%;
    height: 28%;
    left: -2.5%;

  }
  .ai_recognize_fruit {
    position: absolute;
    top: 46%;
    width: 105%;
    height: 30%;
    left: -2.5%;
  }
  .my_recipe_plan {
    position: absolute;
    top: 71%;
    width: 105%;
    height: 30%;
    left: -2.5%;
  }
}
.sport_text{
  position: absolute;
  top: 146%;
  height: 3.7%;
  width: 30%;
  left: 6%;
}
.sport_area{
  background-color: #A9D0AE;
  position: absolute;
  top: 151%;
  height: 50%;
  width: 90%;
  left: 5%;
  border-radius: 30px;
  .ai_recognize_plan{
    position: absolute;
    top: -1%;
    width: 105%;
    height: 50%;
    left: -2.5%;
  }
  .my_exercise_plan{
    position: absolute;
    top: 45%;
    width: 105%;
    height: 50%;
    left: -2.5%;
  }
}
.read_text{
  position: absolute;
  top: 203%;
  height: 3.7%;
  width: 30%;
  left: 6%;
}
.read_area{
  background-color: #E7ABAB;
  position: absolute;
  top: 208%;
  height: 40%;
  width: 90%;
  left: 5%;
  border-radius: 30px;
  .dictionary_background{
    position: absolute;
    top: 0;
    width: 50%;
    height: 90%;
    left: -2.5%;
  }
  .dictionary_button{
    position: absolute;
    top: 65%;
    width: 10%;
    height: 10%;
    left: 27%;
  }
  .read_background{
    position: absolute;
    top: 0;
    width: 50%;
    height: 90%;
    left: 52.5%;
  }
  .read_button{
    position: absolute;
    top: 65%;
    width: 10%;
    height: 10%;
    left: 83%;
  }
}
.block_area{
  position: absolute;
  top: 258%;
  height: 5%;
  width: 100%;
}
.bar_home {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #7bc0fe; /* 这可以帮助你确认元素是否正确显示 */
  height: 10vh;
  .bar{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1001;
  }
}