118 lines
3.0 KiB
Vue
118 lines
3.0 KiB
Vue
<template>
|
||
<UModal
|
||
v-model:open="open"
|
||
:ui="modalUi"
|
||
title="Авто из Кыргызстана - под ключ !"
|
||
scrollable
|
||
>
|
||
<template #body>
|
||
<div class="promotion-modal">
|
||
<div class="grid gap-4 sm:grid-cols-2">
|
||
<UCard
|
||
v-for="car in cars"
|
||
:key="car.mark"
|
||
class="backdrop-blur-md bg-white/10 border border-white/20"
|
||
>
|
||
<template #header>
|
||
<div class="flex items-center gap-3">
|
||
<UIcon name="i-lucide-car" class="text-xl" />
|
||
<h3 class="text-lg font-semibold">
|
||
{{ car.mark }}
|
||
</h3>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="flex flex-wrap gap-2">
|
||
<span
|
||
v-for="model in car.models"
|
||
:key="model"
|
||
class="
|
||
px-3 py-1 text-sm
|
||
rounded-full
|
||
bg-white/15
|
||
hover:bg-white/25
|
||
cursor-pointer
|
||
transition
|
||
"
|
||
>
|
||
{{ model }}
|
||
</span>
|
||
</div>
|
||
</UCard>
|
||
</div>
|
||
|
||
<UAccordion v-model="active" :items="items" />
|
||
|
||
<UButton size="xl" href="#contacts" @click="openContacts()">
|
||
Подробнее
|
||
</UButton>
|
||
</div>
|
||
</template>
|
||
</UModal>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import type { AccordionItem } from '@nuxt/ui'
|
||
import { useSessionStorage } from '@vueuse/core'
|
||
|
||
const open = defineModel('modelValue', { type: Boolean, default: true })
|
||
const active = ref()
|
||
|
||
const modalUi = {
|
||
content:
|
||
'bg-[linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(\'/changan.jpg\')] bg-cover bg-center bg-no-repeat',
|
||
}
|
||
|
||
const items: AccordionItem[] = [
|
||
{
|
||
label: 'Подбор автомобиля',
|
||
icon: 'i-lucide-car',
|
||
content: 'Помощь в выборе автомобиля, консультация независимого эксперта.',
|
||
},
|
||
{
|
||
label: 'Юридическое оформление',
|
||
icon: 'i-lucide-file-text',
|
||
content: 'Оформление покупки с учетом требований действующего законодательства.',
|
||
},
|
||
{
|
||
label: 'Доставка и страхование',
|
||
icon: 'i-lucide-truck',
|
||
content: 'Организация доставки автомобиля и страхового сопровождения.',
|
||
},
|
||
]
|
||
|
||
const cars = [
|
||
{
|
||
mark: 'Changan',
|
||
models: ['CS55PLUS', 'UNI-K', 'X5 PLUS', 'UNI-Z', 'Deepel', 'Другие'],
|
||
},
|
||
{
|
||
mark: 'Geely',
|
||
models: ['Monharo', 'Emgrand', 'Galaxy Starship 7', 'Atlsa', 'Другие'],
|
||
},
|
||
]
|
||
|
||
const state = useSessionStorage('contacts', {
|
||
contacts:
|
||
{
|
||
name: '',
|
||
phone: '',
|
||
service: '',
|
||
comment: '',
|
||
},
|
||
})
|
||
|
||
function openContacts() {
|
||
open.value = false
|
||
state.value.contacts.service = 'покупка авто'
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.promotion-modal {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
</style>
|