95 lines
4.4 KiB
Vue
95 lines
4.4 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
const route = useRoute();
|
|
|
|
const steps = [
|
|
{ key: 'analysis', label: 'Анализ' },
|
|
{ key: 'strategy', label: 'Стратегия' },
|
|
{ key: 'creative', label: 'Креатив' },
|
|
{ key: 'launch', label: 'Запуск' }
|
|
];
|
|
|
|
const currentStepIndex = computed(() => {
|
|
if (route.name === 'targeting-input') return 0;
|
|
if (route.name === 'targeting-analysis') return 0;
|
|
if (route.name === 'targeting-strategy') return 1;
|
|
if (route.name === 'targeting-creative' && route.query.strategyId) {
|
|
return route.query.completed === '1' ? 3 : 3;
|
|
}
|
|
if (route.name === 'targeting-creative') {
|
|
return route.query.completed === '1' ? 3 : 2;
|
|
}
|
|
return 0;
|
|
});
|
|
|
|
function isCompleted(index) {
|
|
return index < currentStepIndex.value;
|
|
}
|
|
|
|
function isActive(index) {
|
|
return index === currentStepIndex.value;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-gradient-to-b from-gray-50 via-white to-gray-50">
|
|
<div class="max-w-6xl mx-auto px-4 py-6 lg:px-8 lg:py-8">
|
|
<div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden mb-6">
|
|
<div class="px-5 py-4 lg:px-6 border-b border-gray-100 bg-[linear-gradient(135deg,rgba(59,130,246,0.08),rgba(16,185,129,0.04))]">
|
|
<div class="flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-500 uppercase tracking-[0.18em]">AI Targeting System</p>
|
|
<p class="text-gray-600 mt-1">Единый поток: анализ, стратегия, креатив и запуск рекламы.</p>
|
|
</div>
|
|
<div class="rounded-full bg-gray-50 border border-gray-200 px-3 py-1 text-sm text-gray-500">
|
|
Шаг {{ currentStepIndex + 1 }} из 4
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-5 py-5 lg:px-6">
|
|
<div class="flex items-center gap-2 overflow-x-auto">
|
|
<template v-for="(step, index) in steps" :key="step.key">
|
|
<div class="flex items-center min-w-fit">
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="w-9 h-9 rounded-full border flex items-center justify-center text-sm font-semibold transition-colors"
|
|
:class="{
|
|
'bg-primary border-primary text-white shadow-sm': isActive(index),
|
|
'bg-green-500 border-green-500 text-white': isCompleted(index),
|
|
'bg-white border-gray-300 text-gray-400': !isActive(index) && !isCompleted(index)
|
|
}"
|
|
>
|
|
<span v-if="isCompleted(index)">✓</span>
|
|
<span v-else>{{ index + 1 }}</span>
|
|
</div>
|
|
<span
|
|
class="text-sm font-medium whitespace-nowrap transition-colors"
|
|
:class="{
|
|
'text-primary underline underline-offset-4': isActive(index),
|
|
'text-gray-500': isCompleted(index),
|
|
'text-gray-400': !isActive(index) && !isCompleted(index)
|
|
}"
|
|
>
|
|
{{ step.label }}
|
|
</span>
|
|
</div>
|
|
|
|
<div
|
|
v-if="index < steps.length - 1"
|
|
class="h-0.5 w-8 sm:w-14 mx-3 rounded-full"
|
|
:class="isCompleted(index + 1) || isActive(index + 1) ? 'bg-primary/50' : 'bg-gray-200'"
|
|
></div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<router-view />
|
|
</div>
|
|
</div>
|
|
</template>
|