commit
77a4ac2baf
|
|
@ -12,6 +12,9 @@ html {
|
|||
|
||||
body {
|
||||
@apply select-none min-w-80 font-sans;
|
||||
&.modal-opened {
|
||||
@apply overflow-hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -31,7 +34,7 @@ body {
|
|||
}
|
||||
|
||||
.logo {
|
||||
@apply w-full py-4 col-span-4 xl:col-span-2;
|
||||
@apply w-full py-4 col-span-8 xl:col-span-2;
|
||||
|
||||
a {
|
||||
@apply flex items-center gap-2;
|
||||
|
|
@ -42,7 +45,7 @@ body {
|
|||
}
|
||||
|
||||
svg {
|
||||
@apply text-ioprim inline-block m-0 w-10 h-10;
|
||||
@apply text-ioprim inline-block m-0 w-10 h-10 min-w-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -72,7 +75,7 @@ body {
|
|||
}
|
||||
|
||||
&.toggle_visible {
|
||||
@apply max-xl:flex max-xl:flex-col max-xl:text-center;
|
||||
@apply max-xl:flex max-xl:flex-col max-xl:text-left;
|
||||
|
||||
a {
|
||||
@apply max-xl:mb-2;
|
||||
|
|
@ -86,7 +89,7 @@ body {
|
|||
}
|
||||
|
||||
&-toggle {
|
||||
@apply flex xl:hidden col-span-8 justify-end;
|
||||
@apply flex xl:hidden col-span-4 justify-end;
|
||||
|
||||
>span {
|
||||
@apply cursor-pointer text-zinc-600 hover:text-ioprim-900 transition-colors;
|
||||
|
|
@ -196,7 +199,7 @@ a[href^="#"] {
|
|||
}
|
||||
|
||||
&-title {
|
||||
@apply col-span-full text-4xl xl:text-6xl font-black font-h1 leading-[0.85] tracking-tight mb-[3.15rem]
|
||||
@apply col-span-full text-4xl xl:text-6xl font-black font-h1 xl:leading-[0.85] tracking-tight mb-[3.15rem]
|
||||
}
|
||||
|
||||
&-image {
|
||||
|
|
@ -208,15 +211,19 @@ a[href^="#"] {
|
|||
@apply col-span-12 md:col-span-6 xl:col-span-4 grid grid-cols-4 items-center px-4;
|
||||
|
||||
&-image {
|
||||
@apply rounded-full size-20 bg-slate-300 overflow-hidden col-span-1;
|
||||
@apply max-w-full max-h-full aspect-square overflow-hidden col-span-1 pr-4;
|
||||
|
||||
img {
|
||||
@apply rounded-full bg-slate-300
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
@apply col-span-3 text-end italic;
|
||||
@apply col-span-3 text-end italic text-sm lg:text-base;
|
||||
}
|
||||
|
||||
&-title {
|
||||
@apply col-span-4 font-bold text-lg text-end mt-4;
|
||||
@apply col-span-4 font-bold text-lg text-end xl:mt-4 mb-4 xl:mb-0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -228,7 +235,7 @@ a[href^="#"] {
|
|||
}
|
||||
|
||||
&-close {
|
||||
@apply absolute right-4 top-4 text-4xl opacity-50;
|
||||
@apply absolute right-3 top-3 text-4xl opacity-50;
|
||||
}
|
||||
|
||||
&-status {
|
||||
|
|
@ -243,8 +250,12 @@ a[href^="#"] {
|
|||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
@apply max-h-[66vh] overflow-auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply px-4;
|
||||
@apply px-6 text-2xl text-center;
|
||||
}
|
||||
|
||||
form {
|
||||
|
|
@ -285,7 +296,7 @@ button {
|
|||
}
|
||||
|
||||
&-item {
|
||||
@apply flex flex-row gap-4 items-center justify-center flex-wrap xl:flex-nowrap;
|
||||
@apply flex flex-row gap-4 items-center justify-start xl:justify-center flex-wrap xl:flex-nowrap;
|
||||
|
||||
label {
|
||||
@apply w-full xl:w-auto;
|
||||
|
|
@ -302,6 +313,10 @@ button {
|
|||
&_checkbox {
|
||||
@apply w-full xl:w-auto flex-row xl:flex-initial flex-nowrap
|
||||
}
|
||||
|
||||
input[type=range] {
|
||||
@apply min-w-[calc(100%-8rem)] xl:min-w-min;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ const cameraStat = reactive({
|
|||
})
|
||||
|
||||
const pointLight = ref()
|
||||
const pointLight2 = ref()
|
||||
const loadAll = async () => {
|
||||
const { scene: light } = await useGLTF('/models_light/zabor_so_svetom.glb')
|
||||
pointLight.value = light.children[2]
|
||||
|
|
@ -35,7 +34,7 @@ const loadAll = async () => {
|
|||
pointLight.value.shadow.mapSize.x = 512 * j
|
||||
pointLight.value.shadow.mapSize.y = 512 * j
|
||||
|
||||
const k = 5
|
||||
const k = 3
|
||||
pointLight.value.position.x = pointLight.value.position.x * k
|
||||
pointLight.value.position.y = pointLight.value.position.y * k
|
||||
pointLight.value.position.z = pointLight.value.position.z * k
|
||||
|
|
@ -62,7 +61,7 @@ watch([section_count, extra_section], () => {
|
|||
</div>
|
||||
</template>
|
||||
<Loader />
|
||||
<TresCanvas shadows>
|
||||
<TresCanvas>
|
||||
<TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
|
||||
<OrbitControls v-bind="controlsState" make-default />
|
||||
<TresGroup :position-x="Math.min(section_count, max_size) * fence_section * -1" :position-y="-3">
|
||||
|
|
|
|||
|
|
@ -15,6 +15,12 @@ const extra_section = use_extra_section()
|
|||
const total_length = use_total_length()
|
||||
const min_length = use_min_length()
|
||||
|
||||
if (!pillar_color.value) {
|
||||
const r = Math.floor(Math.random() * predefPillarColors.length)
|
||||
pillar_color.value = predefPillarColors[r] as ralTypes
|
||||
lamelle_color.value = predefLamelleColors[r] as ralTypes
|
||||
}
|
||||
|
||||
const parametric = reactive({
|
||||
length: {
|
||||
min: min_length.value,
|
||||
|
|
@ -43,6 +49,7 @@ const form_state = reactive({
|
|||
auto_length: true,
|
||||
remove_pillar: false
|
||||
})
|
||||
let copy_form_state = Object.assign({}, form_state)
|
||||
const form_refs = {
|
||||
length: ref(),
|
||||
height: ref(),
|
||||
|
|
@ -50,9 +57,8 @@ const form_refs = {
|
|||
}
|
||||
|
||||
const changeParametres = () => {
|
||||
if (form_state.total_length * 1000 < parametric.length.min) {
|
||||
return
|
||||
}
|
||||
// console.log('form', form_state.total_length * 1000, 'copy', copy_form_state.total_length * 1000)
|
||||
|
||||
const lamelles = Math.floor(form_state.height / parametric.height.step)
|
||||
|
||||
for (const key in form_state) {
|
||||
|
|
@ -67,18 +73,16 @@ const changeParametres = () => {
|
|||
}
|
||||
}
|
||||
|
||||
if (form_state.total_length_mm < form_state.length) {
|
||||
form_state.length = form_state.total_length_mm
|
||||
}
|
||||
form_state.total_length_mm = form_state.total_length * 1000
|
||||
|
||||
let { fence_length, total_length_mm, auto_length, length, full_sections } = form_state
|
||||
length = parseFloat(length.toString())
|
||||
if (total_length_mm < parametric.length.min) total_length_mm = parametric.length.min
|
||||
|
||||
if (auto_length) {
|
||||
let w = parametric.length.min
|
||||
const max_sections = Math.floor((total_length_mm - fence_length) / (parametric.length.min + fence_length))
|
||||
const min_sections = Math.floor((total_length_mm - fence_length) / (parametric.length.max + fence_length))
|
||||
const min_sections = Math.floor((total_length_mm - fence_length) / (parametric.length.max + fence_length)) || 1
|
||||
|
||||
for (let index = min_sections; index <= max_sections; index++) {
|
||||
full_sections = index
|
||||
|
|
@ -106,8 +110,10 @@ const changeParametres = () => {
|
|||
}
|
||||
|
||||
form_state.full_sections = full_sections
|
||||
form_state.length = length
|
||||
form_state.fence_length = fence_length
|
||||
form_state.length = typeof length == 'string' ? parseFloat(length) : length
|
||||
form_state.fence_length = typeof fence_length == 'string' ? parseFloat(fence_length) : fence_length
|
||||
|
||||
copy_form_state = Object.assign({}, form_state)
|
||||
|
||||
total_length.value = form_state.total_length
|
||||
lamelles_count.value = lamelles
|
||||
|
|
@ -125,17 +131,12 @@ const setLamelleColor = (color: ralTypes) => {
|
|||
const setPillarColor = (color: ralTypes) => {
|
||||
pillar_color.value = color
|
||||
}
|
||||
watch(form_state, changeParametres, { deep: true })
|
||||
watch(() => form_state, changeParametres, { deep: true })
|
||||
|
||||
const isModalOpen = useState('modal_open', () => false)
|
||||
const toggleModal = () => {
|
||||
isModalOpen.value = !isModalOpen.value
|
||||
}
|
||||
const plurals = {
|
||||
lamelle: { one: 'ламель', few: 'ламели', many: 'ламелей' },
|
||||
fence: { one: 'cтолб', few: 'столба', many: 'столбов' },
|
||||
section: { one: 'секция', few: 'секции', many: 'секций' },
|
||||
}
|
||||
const goal = (target: string, params: object) => {
|
||||
const nuxtApp = useNuxtApp()
|
||||
if (nuxtApp.$metrika) {
|
||||
|
|
@ -146,23 +147,23 @@ const goal = (target: string, params: object) => {
|
|||
<template>
|
||||
<div class="container relative py-4">
|
||||
<form class="form">
|
||||
<div class="col-span-12 lg:col-span-6">
|
||||
<div class="col-span-12 sm:col-span-6">
|
||||
<div class="form-row">
|
||||
<div class="form-item w-full">
|
||||
<label for="length">Длина ламельного блока, мм</label>
|
||||
<input disabled :value="`${form_state.length} мм`" class="w-28" />
|
||||
<input id="length" type="range" class="w-full" v-bind="parametric.length"
|
||||
<input disabled :value.input="`${form_state.length.toFixed(0)} мм`" class="w-28" />
|
||||
<input id="length" type="range" class="xl:w-full" v-bind="parametric.length"
|
||||
v-model="form_state.length" :disabled="form_state.auto_length" :ref="form_refs.length" />
|
||||
</div>
|
||||
<div class="form-item w-full">
|
||||
<label for="height">Высота забора, мм</label>
|
||||
<input disabled :value="`${form_state.height} мм`" class="w-28" />
|
||||
<input id="height" type="range" class="w-full" v-bind="parametric.height"
|
||||
<input id="height" type="range" class="xl:w-full" v-bind="parametric.height"
|
||||
v-model="form_state.height" :ref="form_refs.height" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 lg:col-span-6">
|
||||
<div class="col-span-12 sm:col-span-6">
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label for="lamelle_color">Цвет ламелей</label>
|
||||
|
|
@ -182,17 +183,21 @@ const goal = (target: string, params: object) => {
|
|||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label for="total_length">Общая длина забора, м</label>
|
||||
<input type="number" id="total_length" v-bind="parametric.total_length"
|
||||
<input type="number" id="total_length" v-bind="parametric.total_length" min=0
|
||||
v-model="form_state.total_length" :ref="form_refs.total_length" />
|
||||
</div>
|
||||
<div class="form-item w-full lg:w-2/4">
|
||||
<div class="form-item xl:w-2/4 text-sm xl:text-base">
|
||||
<p v-if="form_state.total_length_mm < parametric.length.min" class="text-ioprim">
|
||||
Выбранный размер забора слишком мал для расчета стоимости. Пожалуйста, выберите больший
|
||||
размер, чтобы продолжить.
|
||||
</p>
|
||||
<p v-if="form_state.extra_section" class="text-ioprim">
|
||||
Внимание! Дополнительная секция приводит к увеличению стоимости.
|
||||
Рекомендуем вам изменить длину забора или длину секции!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row min-h-12">
|
||||
<div class="form-row min-h-12 mt-2 xl:mt-0">
|
||||
<div class="form-item form-item_checkbox">
|
||||
<input id="auto_length" type="checkbox" v-model="form_state.auto_length" />
|
||||
<label for="auto_length">Автоматический подбор секции</label>
|
||||
|
|
@ -208,30 +213,30 @@ const goal = (target: string, params: object) => {
|
|||
<div class="grid grid-cols-6">
|
||||
<div class="col-span-4 calc_table-maincell">Секции</div>
|
||||
<div class="col-span-2 calc_table-maincell">{{ section_count }}</div>
|
||||
<div class="col-span-4">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
Ламели, RAL {{ lamelle_color }}, {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }}
|
||||
</div>
|
||||
<div class="col-span-1">{{ section_count * lamelles_count }}</div>
|
||||
<div class="col-span-1">
|
||||
<div class="col-span-3 sm:col-span-1">{{ section_count * lamelles_count }}</div>
|
||||
<div class="col-span-3 sm:col-span-1">
|
||||
{{ `${parseFloat(form_state.length.toString()).toFixed(2)}\xa0мм` }}</div>
|
||||
<template v-if="!form_state.remove_pillar">
|
||||
<div class="col-span-4">Столбы, RAL {{ pillar_color }}, {{
|
||||
<div class="col-span-6 sm:col-span-4">Столбы, RAL {{ pillar_color }}, {{
|
||||
getColorNameFromRal(pillar_color)?.toLowerCase() }}</div>
|
||||
<div class="col-span-1">
|
||||
<div class="col-span-3 sm:col-span-1">
|
||||
{{ section_count + ~~(!!form_state.extra_section) + 1 }}
|
||||
</div>
|
||||
<div class="col-span-1">
|
||||
<div class="col-span-3 sm:col-span-1">
|
||||
{{ `${parseFloat(form_state.fence_length.toString()).toFixed(2)}\xa0мм` }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="form_state.extra_section">
|
||||
<div class="col-span-4 calc_table-maincell">Секции</div>
|
||||
<div class="col-span-2 calc_table-maincell">1</div>
|
||||
<div class="col-span-4">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
Ламели, RAL {{ lamelle_color }}, {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }}
|
||||
</div>
|
||||
<div class="col-span-1">{{ 1 * lamelles_count }}</div>
|
||||
<div class="col-span-1">{{
|
||||
<div class="col-span-3 sm:col-span-1">{{ 1 * lamelles_count }}</div>
|
||||
<div class="col-span-3 sm:col-span-1">{{
|
||||
`${parseFloat(form_state.extra_section.toString()).toFixed(2)}\xa0мм` }}</div>
|
||||
</template>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ onMounted(() => {
|
|||
Загрузка 3D модели
|
||||
</div>
|
||||
</template>
|
||||
<TresCanvas height="600">
|
||||
<TresCanvas height="600" preset="realistic">
|
||||
<TresPerspectiveCamera :position="[-7, 2, 4]" ref="camera" />
|
||||
<OrbitControls v-bind="controlsState" ref="controls" make-default />
|
||||
<Suspense>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ const modal_data = reactive<modalDataType>({
|
|||
email: undefined,
|
||||
phone: undefined,
|
||||
name: undefined,
|
||||
policy: true
|
||||
policy: false
|
||||
})
|
||||
|
||||
const modal_form = reactive({
|
||||
|
|
@ -75,6 +75,13 @@ const validate = () => {
|
|||
}
|
||||
}
|
||||
watch(modal_data, validate)
|
||||
watch(isModalOpen, () => {
|
||||
if (isModalOpen.value == true) {
|
||||
document.body.classList.add('modal-opened')
|
||||
} else {
|
||||
document.body.classList.remove('modal-opened')
|
||||
}
|
||||
})
|
||||
|
||||
const submit = async (e: any) => {
|
||||
goal('submit_form', modal_data)
|
||||
|
|
@ -208,7 +215,7 @@ const policy = () => {
|
|||
</div>
|
||||
<template v-else-if="modal_state.show_form">
|
||||
<h2>Оставьте контакты для связи </h2>
|
||||
<form @submit.prevent="submit" ref="form">
|
||||
<form @submit.prevent="submit" ref="form" class="modal-content">
|
||||
<input type="text" placeholder="Ваше имя" v-model="modal_data.name" />
|
||||
<input type="phone" placeholder="Ваш номер телефона" v-model="modal_data.phone"
|
||||
@keypress="validateInput" />
|
||||
|
|
@ -216,7 +223,8 @@ const policy = () => {
|
|||
@keypress="validateInput" />
|
||||
<div class="flex gap-4 justify-between items-center">
|
||||
<input type="checkbox" id="policy" v-model="modal_data.policy" />
|
||||
<label for="policy">Нажимая кнопку "Отправить" Вы также даете согласие на <NuxtLink to="policy" @click="policy">обработку персональных
|
||||
<label for="policy">Нажимая кнопку "Отправить" Вы также даете согласие на <NuxtLink to="policy"
|
||||
@click="policy">обработку персональных
|
||||
данных</NuxtLink>.
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -229,7 +237,7 @@ const policy = () => {
|
|||
</template>
|
||||
<template v-else>
|
||||
<h2>данные расчета</h2>
|
||||
<div class="flex gap-4 flex-col mb-4">
|
||||
<div class="flex gap-4 flex-col mb-4 modal-content">
|
||||
<p>Общая длина: {{ total_length }}<br />
|
||||
Ламелей: {{ lamelles_count }}<br />
|
||||
Длина секции: {{ (fence_section * 1000).toFixed(0) }}<br />
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@ const instanced_lamelle_material = props.models.lamelle.children[0].material
|
|||
const instanced_lamelle_count = 24
|
||||
const instanced_v = [instanced_lamelle_geometry, instanced_lamelle_material, instanced_lamelle_count]
|
||||
watch([instanced_lamelle, fence_section, extra_section, lamelles_count, extra], () => {
|
||||
// console.log(props.index, instanced_v, instanced_lamelle.value)
|
||||
for (let i = 0; i < instanced_lamelle_count; i++) {
|
||||
if (instanced_lamelle.value) {
|
||||
const scale_x = (((extra.value as number) || fence_section.value) * 10)
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const section_count = use_section_count()
|
|||
const extra_section = use_extra_section()
|
||||
const max_size = use_max_size()
|
||||
|
||||
const { scene, renderer } = useTresContext()
|
||||
const { scene, renderer, camera } = useTresContext()
|
||||
renderer.value.toneMapping = CineonToneMapping
|
||||
renderer.value.toneMappingExposure = 0.5
|
||||
// renderer.value.gammaOutput = true
|
||||
|
|
@ -72,6 +72,7 @@ onMounted(async () => {
|
|||
'hdrmaps/hdr-gainmap.webp',
|
||||
'hdrmaps/hdr.json',
|
||||
])
|
||||
renderer.value.render(scene.value, camera.value)
|
||||
scene.value.environment = result.renderTarget.texture
|
||||
scene.value.background = result.renderTarget.texture
|
||||
scene.value.background.mapping = EquirectangularReflectionMapping
|
||||
|
|
|
|||
|
|
@ -5,15 +5,16 @@ export const predefLamelleColors = ['3009', '9003', '6027', '5024', '9001', '101
|
|||
|
||||
const n = 2
|
||||
const min = 1300
|
||||
|
||||
export const use_lamelle_height = () => useState<number>('lamelle_height', () => 0.115)
|
||||
export const use_lamelles_count = () => useState('lamelles_count', () => 14)
|
||||
export const use_fence_section = () => useState<number>('fence_section', () => min * 0.001)
|
||||
export const use_remove_pillar = () => useState<boolean>('remove_pillar', () => false)
|
||||
export const use_pillar_color = () => useState<ralTypes>('pillar_color', () => predefPillarColors[Math.floor(Math.random() * predefPillarColors.length)] as ralTypes)
|
||||
export const use_lamelle_color = () => useState<ralTypes>('lamelle_color', () => predefLamelleColors[Math.floor(Math.random() * predefLamelleColors.length)] as ralTypes)
|
||||
export const use_pillar_color = () => useState<ralTypes>('pillar_color')
|
||||
export const use_lamelle_color = () => useState<ralTypes>('lamelle_color')
|
||||
export const use_section_count = () => useState('section_count', () => n)
|
||||
export const use_extra_section = () => useState('extra_section', () => 0)
|
||||
export const use_total_length = () => useState('total_length', () => (((min + 104) * n) + 104) * 0.001)
|
||||
export const use_min_length = () => useState('min_length', () => 700)
|
||||
export const use_max_size = () => useState<number>('max_size', () => 13)
|
||||
export const use_max_size = () => useState<number>('max_size', () => 20)
|
||||
export const use_explosion_state = () => useState<boolean>('explosion_state', () => false)
|
||||
Loading…
Reference in New Issue