assets/main.scss

@@ -174,6 +174,9 @@ label {
 input {
     @apply bg-neutral-200 border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 text-lg p-2.5 disabled:cursor-not-allowed;
 }
+input[type=checkbox] {
+    @apply w-4 h-4;
+}
 
 textarea {
     @apply block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 max-w-full min-h-10 max-h-40;

components/modal.vue

@@ -178,6 +178,14 @@ const modalStatus = {
     'success': ["mdi:check-circle-outline", 'Данные отправлены'],
     'error': ["mdi:close-circle-outline", 'Ошибка отправки'],
 }
+
+const policy = () => {
+    navigateTo('/policy', {
+        open: {
+            target: "_blank",
+        },
+    });
+}
 </script>
 <template>
     <div v-if="isModalOpen" class="modal-backdrop" @click.self="toggleModal">
@@ -199,6 +207,11 @@ const modalStatus = {
                         @keypress="validateInput" @keyup="validate" />
                     <input type="e-mail" placeholder="Ваш e-mail" v-model="modal_data.email" @keypress="validateInput"
                         @keyup="validate" />
+                    <div class="flex gap-4 justify-between items-center">
+                        <input type="checkbox" id="policy" />
+                        <label for="policy">Соглашение... <NuxtLink to="policy" @click="policy">cсылка</NuxtLink>
+                            </label>
+                    </div>
                     {{ total_txt && total_txt.total[0] }}
                     <div class="flex gap-4">
                         <button class="not-prose" :disabled="modal_form.disabled" type="submit">Отправить</button>

pages/policy.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const config = useRuntimeConfig()
+const imgBase = config.public.imgBase
+
+import { apiFetch } from '~/utils/apiFetch';
+import { marked } from 'marked';
+
+import og_img from '/og_img.png'
+
+const { data: seoData } = await apiFetch<ApiKpType>(`kp/1`)
+useSeoMeta({
+    title: seoData.value?.title,
+    ogTitle: seoData.value?.title,
+    description: seoData.value?.content,
+    ogDescription: seoData.value?.content,
+    ogImage: config.public.baseUrl + og_img,
+    // twitterCard: 'summary_large_image',
+})
+
+const { data: policyData } = await apiFetch<ApiPagesType[]>(`pages/1`)
+const policyText = computed(() => {
+    let c = policyData?.value.content || ''
+    return marked.parse(c)
+})
+
+</script>
+<template>
+    <div>
+        <div class="siteblock bg-white">
+            <div class="container">
+                <h1 class="siteblock-title">{{ policyData.title }}</h1>
+                <div class="col-span-full prose max-w-full" v-html="policyText" />
+            </div>
+        </div>
+        <div class="siteblock siteblock_calc bg-white">
+            <Suspense>
+                <CalcModels />
+            </Suspense>
+        </div>
+    </div>
+</template>