92 lines
2.1 KiB
Vue
92 lines
2.1 KiB
Vue
 
|
<script setup lang="ts">
|
||
|
|
defineProps<{
|
||
|
|
label: string
|
||
|
|
icon: string
|
||
|
|
color: string
|
||
|
|
selected?: boolean
|
||
|
|
disabled?: boolean
|
||
|
|
variant?: 'gold' | 'purple' | 'blue' | 'orange'
|
||
|
|
}>()
|
||
|
|
|
||
|
|
defineEmits<{ select: [] }>()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<button
|
||
|
|
class="answer-option"
|
||
|
|
:class="[
|
||
|
|
variant ? `answer-option--${variant}` : '',
|
||
|
|
{ 'answer-option--selected': selected, 'answer-option--disabled': disabled },
|
||
|
|
]"
|
||
|
|
:disabled="disabled"
|
||
|
|
@click="$emit('select')"
|
||
|
|
>
|
||
|
|
<span class="answer-option__icon" aria-hidden="true">{{ icon }}</span>
|
||
|
|
<span class="answer-option__label">{{ label }}</span>
|
||
|
|
</button>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.answer-option {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 14px;
|
||
|
|
width: 100%;
|
||
|
|
padding: 16px 18px;
|
||
|
|
border-radius: var(--radius-lg);
|
||
|
|
font-size: 1.0625rem;
|
||
|
|
font-weight: 800;
|
||
|
|
color: var(--text-main);
|
||
|
|
min-height: 68px;
|
||
|
|
transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
|
||
|
|
border: 2px solid rgba(255, 255, 255, 0.08);
|
||
|
|
background: var(--card-bg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.answer-option:active:not(:disabled) {
|
||
|
|
transform: scale(0.98);
|
||
|
|
}
|
||
|
|
|
||
|
|
.answer-option--gold {
|
||
|
|
background: linear-gradient(135deg, rgba(40, 60, 20, 0.9), rgba(20, 35, 12, 0.95));
|
||
|
|
border-color: rgba(34, 181, 75, 0.35);
|
||
|
|
}
|
||
|
|
|
||
|
|
.answer-option--purple {
|
||
|
|
background: linear-gradient(135deg, rgba(50, 25, 80, 0.9), rgba(25, 12, 50, 0.95));
|
||
|
|
border-color: rgba(118, 55, 201, 0.4);
|
||
|
|
}
|
||
|
|
|
||
|
|
.answer-option--blue {
|
||
|
|
background: linear-gradient(135deg, rgba(15, 45, 75, 0.9), rgba(8, 25, 50, 0.95));
|
||
|
|
border-color: rgba(22, 130, 203, 0.4);
|
||
|
|
}
|
||
|
|
|
||
|
|
.answer-option--orange {
|
||
|
|
background: linear-gradient(135deg, rgba(70, 40, 10, 0.9), rgba(40, 22, 6, 0.95));
|
||
|
|
border-color: rgba(241, 140, 22, 0.4);
|
||
|
|
}
|
||
|
|
|
||
|
|
.answer-option--selected {
|
||
|
|
border-color: var(--gold) !important;
|
||
|
|
box-shadow: 0 0 20px rgba(244, 174, 33, 0.25), inset 0 0 20px rgba(244, 174, 33, 0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
.answer-option--disabled {
|
||
|
|
opacity: 0.55;
|
||
|
|
cursor: default;
|
||
|
|
}
|
||
|
|
|
||
|
|
.answer-option__icon {
|
||
|
|
font-size: 1.875rem;
|
||
|
|
width: 44px;
|
||
|
|
text-align: center;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.answer-option__label {
|
||
|
|
flex: 1;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
</style>
|