valitovgaziz
2941b14b38
- Moved contents of main_dc/yalarba/easySite/easySite/ up to easySite/ - Updated docker-compose.yml build context path - Deleted empty nested easySite/ directory
124 lines
3.1 KiB
Vue
124 lines
3.1 KiB
Vue
<!-- components/PlanBadge.vue -->
|
|
<template>
|
|
<div class="plan-badge-wrapper relative inline-flex">
|
|
<NuxtLink
|
|
:to="'/rules'"
|
|
class="plan-badge group"
|
|
:class="badgeClass"
|
|
@click.prevent="navigateToRules"
|
|
>
|
|
<span class="text-sm font-semibold">{{ planLabel }}</span>
|
|
|
|
<!-- CSS Tooltip -->
|
|
<div class="tooltip">
|
|
{{ tooltipText }}
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
plan: {
|
|
type: String,
|
|
default: 'start',
|
|
validator: (value) => ['start', 'pro', 'vip'].includes(value)
|
|
},
|
|
isCurrentPlan: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
const planLabels = {
|
|
start: 'Старт',
|
|
pro: 'Профи',
|
|
vip: 'VIP'
|
|
}
|
|
|
|
const planDescriptions = {
|
|
start: 'Базовый план для начала работы',
|
|
pro: 'Расширенные возможности для профессионалов',
|
|
vip: 'Премиум решение для максимального роста'
|
|
}
|
|
|
|
const planColors = {
|
|
start: 'bg-green-100 text-green-800 border-green-200 hover:bg-green-200',
|
|
pro: 'bg-blue-100 text-blue-800 border-blue-200 hover:bg-blue-200',
|
|
vip: 'bg-purple-100 text-purple-800 border-purple-200 hover:bg-purple-200'
|
|
}
|
|
|
|
const planLabel = computed(() => planLabels[props.plan])
|
|
const badgeClass = computed(() => `inline-flex items-center px-3 py-1 rounded-full border cursor-pointer transition-colors duration-200 ${planColors[props.plan]}`)
|
|
|
|
// Текст подсказки
|
|
const tooltipText = computed(() => {
|
|
if (props.isCurrentPlan) {
|
|
return `Это ваш тарифный план: ${planDescriptions[props.plan]}`
|
|
}
|
|
return planDescriptions[props.plan]
|
|
})
|
|
|
|
// Навигация на страницу правил
|
|
const navigateToRules = () => {
|
|
navigateTo('/rules')
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.plan-badge-wrapper {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.plan-badge {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Стили для CSS tooltip (всплывает вниз) */
|
|
.tooltip {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(8px);
|
|
background: #1f2937; /* gray-800 */
|
|
color: white;
|
|
padding: 8px 12px;
|
|
border-radius: 6px;
|
|
font-size: 0.75rem;
|
|
white-space: nowrap;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.2s ease-in-out;
|
|
pointer-events: none;
|
|
z-index: 50;
|
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
min-width: 180px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Стрелка для tooltip (теперь сверху) */
|
|
.tooltip::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border: 4px solid transparent;
|
|
border-bottom-color: #1f2937; /* gray-800 */
|
|
}
|
|
|
|
/* Показываем tooltip при наведении */
|
|
.plan-badge:hover .tooltip {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateX(-50%) translateY(4px);
|
|
}
|
|
|
|
/* Альтернативный вариант - подсказка появляется сразу без задержки */
|
|
.plan-badge .tooltip {
|
|
transition-delay: 0s;
|
|
}
|
|
</style> |