button.vue 745 B

12345678910111213141516171819202122232425262728293031
  1. <!-- eslint-disable vue/multi-word-component-names -->
  2. <template>
  3. <span class="button" @click="$emit('click')">
  4. <slot></slot>
  5. </span>
  6. </template>
  7. <script setup lang="ts">
  8. // @TODO 对组件的颜色、背景等样式进行修改,符合全局规范
  9. defineEmits(['click']);
  10. </script>
  11. <style lang="less" scoped>
  12. @import '@/design/vent/color.less';
  13. .button {
  14. background-image: url('@/assets/images/vent/gas/button.png');
  15. background-repeat: no-repeat;
  16. background-position: center center;
  17. background-size: 100% auto;
  18. padding: 10px 50px;
  19. text-align: center;
  20. color: @white;
  21. cursor: pointer;
  22. }
  23. .button:hover {
  24. background-image: url('@/assets/images/vent/gas/button-hover.png');
  25. }
  26. </style>