<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <span class="button" @click="$emit('click')">
    <slot></slot>
  </span>
</template>

<script setup lang="ts">
  // @TODO 对组件的颜色、背景等样式进行修改，符合全局规范

  defineEmits(['click']);
</script>

<style lang="less" scoped>
  @import '@/design/vent/color.less';

  .button {
    background-image: url('@/assets/images/vent/gas/button.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    padding: 10px 50px;
    text-align: center;
    color: @white;
    cursor: pointer;
  }

  .button:hover {
    background-image: url('@/assets/images/vent/gas/button-hover.png');
  }
</style>
