YangZhouDaYunHe/src/views/Home.vue

<template>
  <div
    class="home"
  >
    <img
      src="@/assets/images/logo.png"
      alt=""
      class="logo"
    >
    <div
      class="worthless"
    >
      <img
        src="@/assets/images/home-title.jpg"
        alt=""
        class="title"
        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',
      })
    }
  },
}
</script>

<style lang="less" scoped>
.home{
  width: 100%;
  height: 100%;
  position: relative;
  >.logo{
    position: absolute;
    top: 35px;
    left: 38px;
    width: 364px;
    z-index: 3;
  }
  >.worthless{
    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;
    }
  }
}
</style>