jws-frontend/src/components/AllAroundBtn.vue

<script setup lang="ts">
defineProps<{
  label: string;
  color?: string;
}>();
</script>

<template>
  <div
    class="q-pl-md q-pr-sm row items-center justify-between rounded hover-item"
    :style="`border:1px solid ${color};color:${color}`"
    @click.stop="$emit('viewDetail')"
  >
    {{ $t(label) }}
    <q-icon name="mdi-arrow-right" class="q-ml-md" />
  </div>
</template>

<style scoped>
.hover-item:hover {
  background-color: var(--surface-3);
}
</style>