<template lang="html">
  <div class="homepageVue">

    <div class="center bg">
      <img src="static/img/zhiweidata.png" alt="">
    </div>

    <div class="center btns" :class="`btn${i + 1}`" v-for="(n, i) in 6" :key="i" @click="showPage(i + 1)">
      <img :src="`static/img/btns/0${i + 1}-02.png`" alt="">
      <img :src="`static/img/btns/0${i + 1}.png`" alt="">
      <span class="name">{{ pageTitle[i] }}</span>
    </div>

    <img class="img2019" src="static/img/2019.png" alt="" @click="backIndex()">

  </div>
</template>

<script>
export default {
  props: {
    globalData: {},
    homeData: {},
    pageTitle: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    backIndex () {
      this.$set(this.globalData, 'step', 1)
    },
    showPage (page) {
      this.$set(this.homeData, 'page', page)
    }
  }
}
</script>

<style lang="scss" scoped>
.homepageVue{
  .center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  .bg:after{
    display: block;
    content: "同心同行 共创未来";
    margin-top: 75px;
    font-size: 35px;
  }
  .btns{
    cursor: pointer;
    color: #3ECDFD;
    img{
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      transform: translate(-50%, calc(-50% - 55px));
      &+img{
        display: block;
      }
    }
    .name{
      position: absolute;
      white-space: nowrap;
      font-size: 26px;
    }
    &.btn1{
      margin-left: -499px;
      margin-top: 22px;
      .name{
        transform: translate(-99px, -146px);
      }
    }
    &.btn2{
      margin-left: -305px;
      margin-top: 22px;
      .name{
        transform: translate(-50%, 12px);
      }
    }
    &.btn3{
      margin-left: -39px;
      margin-top: 22px;
      .name{
        transform: translate(-50%, 12px);
      }
    }
    &.btn4{
      margin-left: 46px;
      margin-top: -64px;
      .name{
        transform: translate(-50%, -110px);
      }
    }
    &.btn5{
      margin-left: 273px;
      margin-top: 22px;
      .name{
        transform: translate(-50%, -146px);
      }
    }
    &.btn6{
      margin-left: 489px;
      margin-top: 22px;
      .name{
        transform: translate(-50%, 12px);
      }
    }
    &:hover{
      color: #FDCC01;
      img{
        display: block;
        &+img{
          display: none;
        }
      }
    }
  }
  .img2019{
    width: 130px;
    height: 46px;
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 25px;
    cursor: pointer;
  }
}
</style>
