gasInjection-project/src/views/vent/home/billboard/components/ArrowButton.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="arrow-button" :class="`point-to-${pointTo}`" @click="$emit('click')"></div>
</template>
<script lang="ts" setup>
  /** 箭头按钮，宽高固定 90 * 76 */
  withDefaults(
    defineProps<{
      pointTo: 'left' | 'right' | 'bottom' | 'top';
    }>(),
    {
      pointTo: 'left',
    }
  );

  defineEmits(['click']);
</script>
<style lang="less" scoped>
  .arrow-button {
    height: 90px;
    width: 76px;
    background-image: url('@/assets/images/company/arrow-button.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
  }

  .arrow-button:hover {
    background-image: url('@/assets/images/company/arrow-button-hover.png');
  }

  .point-to-left {
    transform: rotate(0deg);
  }
  .point-to-right {
    transform: rotate(180deg);
  }
  .point-to-top {
    transform: rotate(90deg);
  }
  .point-to-bottom {
    transform: rotate(270deg);
  }
</style>