<template>
  <div class="home">
    <div class="top">
      <div class="logobox">
        <img class="logo" src="@/assets/img/logo_font.png" />
      </div>
      <img class="logoinfo" src="@/assets/img/logo_info.png" />
      <img class="img" src="@/assets/img/u49.png" />
    </div>
    <div
      class="infobox"
      v-for="(item, index) in 5"
      :key="index"
      :class="index == 0 ? 'first' : ''"
    ></div>
    <div class="goshopping" @click="$router.push('/shopping')">
      <span>查看</span>
      <span>商品</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {};
  },
  components: {}
};
</script>

<style lang="scss" scoped>
@import "@/assets/style/mixin.scss";
.top {
  position: fixed;
  width: 100vw;
  height: 80vw;
  top: 0;
  background-color: rgba(26, 188, 156, 1);
  border: none;
  z-index: 2020;
  .logobox {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0px;
    width: 40vw;
    height: 30vw;
    background-color: #fff;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    z-index: 2;
    .logo{
      width: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  }
  .logoinfo{
    width: 100vw;
    position: relative;
    top: 23vw;
  }
  .img {
    position: absolute;
    left: 0px;
    bottom: -1px;
    width: 100vw;
    height: 10.6666vw;
  }
}
.first {
  margin-top: 85vw !important;
}
.infobox {
  border-width: 0px;
  position: relative;
  width: 92.5333vw;
  margin: 5vw auto;
  height: 165px;
  background-color: rgba(245, 245, 245, 1);
  border-radius: 20px;
}

</style>
