<template>
<div id="homepageroot">
  <div id="hpbanner" class="banner">

  </div>
</div>
</template>

<script>
export default {
  name: "Homepage"
}
</script>

<style scoped lang="scss">
@import "node_modules/bootstrap/scss/_functions.scss";
@import "node_modules/bootstrap/scss/_variables.scss";
@import "node_modules/bootstrap/scss/_mixins.scss";

#homepageroot{
  display: flex;
  flex-direction: column;
  width: 100%;
  @include media-breakpoint-between(xs, md) {
  }

  @include media-breakpoint-between(md, xl) {
  }
}

#hpbanner{
  width: 100%;
  background-size:100% 100%;
  background-attachment: scroll;
  background-size: 100% 100%;      /* 图片宽高100%填充div */
  background-repeat: no-repeat;
  background-position: center center;
  @include media-breakpoint-between(xs, md) {
    padding-bottom: 192%;
    background-image: url('/Homepage/banner_wep.png');
  }

  @include media-breakpoint-up(md) {
    padding-bottom: 52.6673640167364%;
    background-image: url('/Homepage/banner.png');
  }
}
</style>
