YangZhouDaYunHe/src/views/Home.vue

<template>
  <div
    class="home"
  >
    <img
      src="@/assets/images/home-title.jpg"
      alt=""
      class="title"
      draggable="false"
    >
    <button
      class="begin"
      @click="onClickBegin"
    />
  </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;
  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>