<template>
  <div class="home">
    <div class="header"></div>

    <div class="qy">
      <div class="qrcode">
        <img src="../../assets/imgs/walfare-qrcode-02.png" />
      </div>
    </div>
    <div class="cj">
      <div class="sys-btn-02 btn-position" @click="toDraw">马上抽奖</div>
    </div>

    <div class="remain"></div>
    <bottom-tool v-model="activityIndex"></bottom-tool>
  </div>
</template>

<script>
import BottomTool from "@/components/bottom-tools/bottom-tools";

export default {
  name: "home",
  data() {
    return {
      activityIndex: 4
    };
  },
  methods: {
    toDraw() {
      this.$router.push("/draw");
    }
  },
  components: {
    BottomTool
  }
};
</script>

<style lang="scss" scoped>
.home {
  position: relative;
  text-align: center;
  background: url(../../assets/imgs/welfare-bg.jpg);
  background-size: 100% auto;
}
.header {
  width: 750px;
  height: 247px;
  background: url(../../assets/imgs/welfare-top.jpg);
  background-size: 100%;
}

.qy {
  width: 708px;
  height: 1136px;
  background: url(../../assets/imgs/welfare-qy.png);
  background-size: 100%;
  margin: auto;
  margin-top: -100px;
  position: relative;

  .qrcode {
    position: absolute;
    width: 171px;
    height: 171px;
    left: 269px;
    bottom: 140px;
    img {
      width: 100%;
    }
  }
}

.cj {
  width: 718px;
  height: 968px;
  background: url(../../assets/imgs/welfare-cj.png);
  background-size: 100%;
  margin: auto;
  margin-top: 50px;
  position: relative;
}

.btn-position {
  position: absolute;
  bottom: 80px;
  left: 188px;
}

.remain {
  height: 150px;
}
</style>