<template>
  <div class="home-page">
    <img class="star-gif" src="@/assets/img/homePage/bg-shrink2.gif" alt="" />
    <img src="@/assets/img/homePage/title.png" alt="" class="img-title" />
    <img
      src="@/assets/img/homePage/sub-title.png"
      alt=""
      class="img-subTitle"
    />
    <img src="@/assets/img/homePage/year-bg.png" alt="" class="year" />
    <div class="year-num">
      {{ year }}
    </div>
    <!-- <div class="year">
    
    </div> -->
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      year: new Date().getFullYear(),
    }
  },
  created() {},
  methods: {},
}
</script>

<style scoped lang="scss">
.home-page {
  width: 100%;
  height: 100%;
  position: relative;
  background: url('~@/assets/img/homePage/bg-shrink1.gif') no-repeat 0 0;
  background-size: 100% 100%;
  position: relative;
  filter: brightness(0.9);

  .star-gif {
    width: 100%;
    height: 100%;
  }
  .img-title {
    position: absolute;
    width: 80%;
    top: 35%;
    left: 10%;
  }
  .img-subTitle {
    width: 60%;
    height: 70px;
    position: absolute;
    top: 66%;
    left: 21%;
  }
  .year-num {
    position: absolute;
    left: 61%;
    top: 18%;
    color: #1969be;
    font-family: 'YouSheBiaoTiHei';
    font-size: 50px;
    font-weight: bold;
    transform: rotate(6deg);
    line-height: 60px;
    height: 100px;
  }
  .year {
    position: absolute;
    left: 60%;
    height: 90px;
    width: 164px;
    top: 17%;
    font-family: 'YouSheBiaoTiHei';
    font-size: 32px;
    font-weight: bold;
    // width: 80px;
    // height: 40px;
    // background: url('~@/assets/img/homePage/year-bg.png') no-repeat 0 0;
  }
}
</style>
