<template>
  <div
    class="home"
  >
    <img
      src="@/assets/images/logo.png"
      alt=""
      class="logo"
    >
    <div
      v-if="$route.query.themeIdx === '0'"
      class="theme-0"
    >
      <img
        src="@/assets/images/home-title.jpg"
        alt=""
        class="title"
        draggable="false"
      >
      <button
        class="begin"
        @click="onClickBegin"
      />
    </div>
    <div
      v-if="$route.query.themeIdx === '1'"
      class="theme-1"
    >
      <img
        src="@/assets/images/home-title-1.png"
        alt=""
        class="title"
        draggable="false"
      >
      <img
        class="title-en"
        src="@/assets/images/home-title-en-1.png"
        alt=""
        draggable="false"
      >
      <button
        class="begin"
        @click="onClickBegin"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  inject: ['$uaInfo', '$env'],
  data() {
    return {
    }
  },
  computed: {
    ...mapState([
    ]),
  },
  mounted() {
  },
  unmounted() {
  },
  methods: {
    onClickBegin() {
      this.$router.push({
        name: 'UnitList',
        query: {
          themeIdx: this.$route.query.themeIdx,
        }
      })
    }
  },
}
</script>

<style lang="less" scoped>
.home{
  width: 100%;
  height: 100%;
  position: relative;
  >.logo{
    position: absolute;
    top: 35px;
    left: 38px;
    width: 364px;
    z-index: 3;
  }
  >.theme-0{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(@/assets/images/home-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    >img.title{
      position: absolute;
      top: 0;
      left: 50%;
      height: 100%;
      transform: translateX(-50%);
    }
    >button.begin{
      position: absolute;
      bottom: 58px;
      left: 50%;
      transform: translateX(-50%);
      width: 76px;
      height: 79px;
      background-image: url(@/assets/images/btn_start.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
    }
  }
  >.theme-1{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(@/assets/images/home-bg-1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    >.title{
      position: absolute;
      top: calc(106 / 1080 * 100vh);
      right: 122px;
      height: calc(814 / 1080 * 100vh);
    }
    >.title-en{
      position: absolute;
      left: 92px;
      bottom: 93px;
      height: calc(372 / 1080 * 100vh);
    }
    >button.begin{
      position: absolute;
      bottom: 39px;
      left: calc(837 / 1920 * 100vw);
      width: 129px;
      height: 129px;
      background-image: url(@/assets/images/btn_start-1.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    }
  }
}
</style>