calc test
This commit is contained in:
parent
f130267c70
commit
5df63f88a3
10
app.vue
10
app.vue
|
|
@ -47,7 +47,7 @@ const toggleModal = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="siteblock bg-white" :id="about?.slug">
|
||||
<div class="siteblock bg-white" :id="about?.slug" v-if="about">
|
||||
<div class="container">
|
||||
<div class="siteblock-content">
|
||||
<h2 class="siteblock-title">{{ about?.title }}</h2>
|
||||
|
|
@ -64,10 +64,10 @@ const toggleModal = () => {
|
|||
</div>
|
||||
</div>
|
||||
<div class="siteblock siteblock_imgbg bg-slate-500"
|
||||
:style="[{ backgroundImage: `url(${[apiBase, reviews?.image].join('/')})` }]" :id="reviews?.slug">
|
||||
:style="[{ backgroundImage: `url(${[apiBase, reviews?.image].join('/')})` }]" :id="reviews?.slug" v-if="reviews">
|
||||
<NuxtImg :src="[apiBase, reviews?.image].join('/')" class="invisible" />
|
||||
</div>
|
||||
<div class="siteblock bg-white" :id="reviews?.slug">
|
||||
<div class="siteblock bg-white" :id="reviews?.slug" v-if="reviews">
|
||||
<div class="container">
|
||||
<template v-for="item in reviewsData?.slice(0, 3)">
|
||||
<div class="review">
|
||||
|
|
@ -89,7 +89,7 @@ const toggleModal = () => {
|
|||
</div>
|
||||
<div class="siteblock siteblock_imgbg bg-slate-500"
|
||||
:style="[{ backgroundImage: `url(${[apiBase, delivery?.image].join('/')})` }]">
|
||||
<NuxtImg :src="[apiBase, delivery?.image].join('/')" class="invisible" />
|
||||
<NuxtImg :src="[apiBase, delivery?.image].join('/')" class="invisible" v-if="delivery" />
|
||||
</div>
|
||||
<div class="siteblock siteblock_calc bg-white">
|
||||
<CalcValues />
|
||||
|
|
@ -103,7 +103,7 @@ const toggleModal = () => {
|
|||
<template v-for="item in footerData">
|
||||
<div class="footer-text" :class="[{ 'footer-text-small': item.small_text }]">{{ item.text }}</div>
|
||||
</template>
|
||||
<div class="footer-text footer-text-social">
|
||||
<div class="footer-text footer-text-social" v-if="social_networkData">
|
||||
<template v-for="item in social_networkData">
|
||||
<a :href="item.link" target="_blank">
|
||||
<Icon :name="item.icon" /> {{ item.name }}
|
||||
|
|
|
|||
|
|
@ -66,6 +66,7 @@ a[href^="#"] {
|
|||
max-height: 50vh;
|
||||
}
|
||||
}
|
||||
|
||||
&_calc {
|
||||
@apply py-0;
|
||||
}
|
||||
|
|
@ -117,13 +118,17 @@ a[href^="#"] {
|
|||
}
|
||||
|
||||
label {
|
||||
@apply inline-block text-sm font-medium text-gray-900 dark:text-white;
|
||||
@apply inline-block text-sm font-medium text-gray-900 dark:text-white min-w-36;
|
||||
}
|
||||
|
||||
input {
|
||||
@apply bg-gray-50 border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 text-lg p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 disabled:bg-neutral disabled:cursor-not-allowed;
|
||||
}
|
||||
|
||||
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 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500
|
||||
}
|
||||
|
||||
button {
|
||||
@apply rounded-full bg-primary hover:bg-primary-400 transition-colors px-10 py-3 inline-block text-lg font-bold shadow-lg cursor-pointer disabled:opacity-50 disabled:hover:bg-primary;
|
||||
|
||||
|
|
@ -134,26 +139,35 @@ button {
|
|||
|
||||
.form {
|
||||
@apply col-span-full flex flex-col gap-4;
|
||||
|
||||
&-row {
|
||||
@apply flex flex-row gap-4;
|
||||
@apply flex flex-row flex-wrap gap-4;
|
||||
}
|
||||
|
||||
&-item {
|
||||
@apply flex flex-row gap-4 items-center justify-center;
|
||||
|
||||
.icon {
|
||||
@apply hover:text-primary cursor-pointer transition-colors text-2xl;
|
||||
|
||||
&.disabled {
|
||||
@apply text-neutral pointer-events-none cursor-not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color_picker {
|
||||
@apply leading-none;
|
||||
|
||||
&-selected {
|
||||
@apply size-10 rounded border-gray-300 shadow inline-block leading-none;
|
||||
|
||||
&__active {
|
||||
@apply outline outline-2 outline-offset-2 outline-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&-changer {
|
||||
@apply absolute w-80 z-10 bg-white flex gap-0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,10 @@ const parametric = {
|
|||
max: 2400,
|
||||
step: 10,
|
||||
},
|
||||
total_length: {
|
||||
min: 0.1,
|
||||
step: 0.1,
|
||||
},
|
||||
height: {
|
||||
min: 220,
|
||||
max: 2400,
|
||||
|
|
@ -18,8 +22,13 @@ const parametric = {
|
|||
}
|
||||
const form_state = reactive({
|
||||
length: fence_section.value * 1000,
|
||||
height: lamelles_count.value * parametric.height.step
|
||||
height: lamelles_count.value * parametric.height.step,
|
||||
total_length: fence_section.value,
|
||||
total_length_mm: fence_section.value * 1000,
|
||||
full_sections: 1,
|
||||
extra_section: 0
|
||||
})
|
||||
const auto_section_width = ref<boolean>(false)
|
||||
|
||||
const changeParametres = () => {
|
||||
const lamelles = Math.floor(form_state.height / parametric.height.step)
|
||||
|
|
@ -37,6 +46,27 @@ const changeParametres = () => {
|
|||
}
|
||||
}
|
||||
}
|
||||
form_state.total_length_mm = form_state.total_length * 1000
|
||||
if (auto_section_width.value) {
|
||||
// form_state.length
|
||||
if (form_state.total_length_mm % form_state.length) {
|
||||
let w = parametric.length.max
|
||||
while ((form_state.total_length_mm % form_state.length > 0) && w > parametric.length.min) {
|
||||
w -= parametric.length.step
|
||||
}
|
||||
form_state.length = w
|
||||
}
|
||||
|
||||
}
|
||||
if (form_state.total_length_mm < form_state.length) {
|
||||
form_state.length = form_state.total_length_mm
|
||||
}
|
||||
form_state.full_sections = Math.ceil(form_state.total_length_mm / form_state.length)
|
||||
form_state.extra_section = form_state.total_length_mm % form_state.length
|
||||
|
||||
if (form_state.extra_section < parametric.length.min) {
|
||||
console.log('eh')
|
||||
}
|
||||
}
|
||||
|
||||
const setLamelleColor = (color: string) => {
|
||||
|
|
@ -59,11 +89,22 @@ const increment = (field: keyof typeof form_state, value: number) => {
|
|||
form_state[field] = v
|
||||
}
|
||||
}
|
||||
const autoSectionWidth = () => {
|
||||
auto_section_width.value = !auto_section_width.value
|
||||
}
|
||||
|
||||
const predefLamelleColors = ['#474B4E', '#705335', '#FDF4E3', '#2F4538']
|
||||
const predefPillarColors = ['#474B4E', '#6A5D4D', '#F4F4F4', '#2F4538']
|
||||
|
||||
watch(form_state, changeParametres, { deep: true })
|
||||
|
||||
const calc_text = computed(() => {
|
||||
let txt = `Всего секций: ${form_state.full_sections} по ${form_state.length}мм`
|
||||
if (form_state.extra_section) {
|
||||
txt += `, 1 по ${form_state.extra_section}мм`
|
||||
}
|
||||
return txt
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="container py-4">
|
||||
|
|
@ -71,9 +112,13 @@ watch(form_state, changeParametres, { deep: true })
|
|||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label for="length">Длина секции, мм</label>
|
||||
<Icon type="button" @click="increment('length', -1)" name="mdi:minus-circle-outline" />
|
||||
<input id="length" type="number" v-bind="parametric.length" v-model="form_state.length" />
|
||||
<Icon type="button" @click="increment('length', 1)" name="mdi:plus-circle-outline" />
|
||||
<Icon type="button" @click="increment('length', -1)" name="mdi:minus-circle-outline"
|
||||
:class="auto_section_width ? `disabled` : ''" />
|
||||
<input id="length" type="number" v-bind="parametric.length" v-model="form_state.length"
|
||||
:disabled="auto_section_width" />
|
||||
<Icon type="button" @click="increment('length', 1)" name="mdi:plus-circle-outline"
|
||||
:class="auto_section_width ? `disabled` : ''" />
|
||||
<Icon name="mdi:calculator-variant" @click="autoSectionWidth" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label for="height">Высота забора, мм</label>
|
||||
|
|
@ -101,6 +146,17 @@ watch(form_state, changeParametres, { deep: true })
|
|||
<ColorPicker :cb="setPillarColor" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label for="total_length">Общая длина забора, м</label>
|
||||
<input type="number" id="total_length" v-bind="parametric.total_length"
|
||||
v-model="form_state.total_length" />
|
||||
</div>
|
||||
<div class="form-item grow">
|
||||
<label for="calculation">Приблизительный расчет забора</label>
|
||||
<textarea id="calculation" disabled class="w-full">{{ calc_text }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -5,6 +5,7 @@ const apiBase = config.public.apiBase
|
|||
const isModalOpen = useState('modal_open', () => false)
|
||||
const toggleModal = () => {
|
||||
modal_phone.value = ''
|
||||
modal_name.value = ''
|
||||
isModalOpen.value = !isModalOpen.value
|
||||
}
|
||||
const modal_phone = ref()
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const pbrTexture = await useTexture({
|
|||
</Suspense>
|
||||
<Suspense>
|
||||
<TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25">
|
||||
<TresMesh receive-shadow>
|
||||
<TresMesh receive-shadow cast-shadow :translate-y="-0.25">
|
||||
<TresCircleGeometry :args="[8, 8, 8]" :rotate-x="-Math.PI * 0.5" />
|
||||
<TresMeshStandardMaterial v-bind="pbrTexture" />
|
||||
</TresMesh>
|
||||
|
|
|
|||
Loading…
Reference in New Issue