<template>
  <div
    class="container"
    :style="backGround"
    @click="go"
    @mouseenter="mouseEnter"
    @mouseleave="mouseLeave"
  >
    <el-row>
      <img :src="imgUrl" />
    </el-row>
    <el-row>
      <p style="font-size: 13px; margin-block-start: 0em">
        {{ action.title }}
      </p>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'navigationButton',
  props: ['action'],
  data() {
    return {
      // 版本号
      version: '3.8.5',
      backGround: 'background : white'
    };
  },
  computed: {
    imgUrl() {
      return require('@/assets/images/navigation/' + this.action.imgName);
    }
  },
  methods: {
    go() {
      this.$router.push(this.action.path);
    },
    mouseEnter() {
      this.backGround = 'background : #1e87f0';
    },
    mouseLeave() {
      this.backGround = 'background : white';
    }
  }
};
</script>
<style scoped lang="scss">
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  border-radius: 10px;
  height: 100%;
  width: 100%;
  flex-direction: column;
  flex-wrap: nowrap;
}
</style>