mns/mns-mini-zabor
mns
/
mns-mini-zabor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

colors

This commit is contained in:
Kseninia Mikhaylova 2024-06-13 13:52:58 +03:00
parent c587af3f90
commit 3a3b8deaa3
2 changed files with 11 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/calcValues.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { getColorHexFromRal, getColorNameFromRal } from '@/components/ral' import { getColorNameFromRal } from '@/components/ral'
import type { ralTypes } from '@/components/ral' import type { ralTypes } from '@/components/ral'
const lamelles_count = useState('lamelles_count', () => 8) const lamelles_count = useState('lamelles_count', () => 8)
@ -107,15 +107,6 @@ const predefLamelleColors = ['3009', '9003', '6027', '5024', '9001', '1012', '30
const predefPillarColors = ['3004', '7043', '6028', '5013', '8016', '1020', '3005', '4009'] const predefPillarColors = ['3004', '7043', '6028', '5013', '8016', '1020', '3005', '4009']
watch(form_state, changeParametres, { deep: true }) watch(form_state, changeParametres, { deep: true })
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
})
const isModalOpen = useState('modal_open', () => false) const isModalOpen = useState('modal_open', () => false)
const toggleModal = () => { const toggleModal = () => {
@ -130,8 +121,8 @@ const toggleModal = () => {
<div class="form-item w-full"> <div class="form-item w-full">
<label for="length">Длина секции, мм</label> <label for="length">Длина секции, мм</label>
<input disabled :value="`${form_state.length} мм`" class="w-28" /> <input disabled :value="`${form_state.length} мм`" class="w-28" />
<input id="length" type="range" class="w-full" v-bind="parametric.length" v-model="form_state.length" <input id="length" type="range" class="w-full" v-bind="parametric.length"
:disabled="auto_section_width" :ref="form_refs.length" /> v-model="form_state.length" :disabled="auto_section_width" :ref="form_refs.length" />
<Icon name="mdi:calculator-variant" @click="autoSectionWidth" /> <Icon name="mdi:calculator-variant" @click="autoSectionWidth" />
</div> </div>
</div> </div>
@ -139,8 +130,8 @@ const toggleModal = () => {
<div class="form-item w-full"> <div class="form-item w-full">
<label for="height">Высота забора, мм</label> <label for="height">Высота забора, мм</label>
<input disabled :value="`${form_state.height} мм`" class="w-28" /> <input disabled :value="`${form_state.height} мм`" class="w-28" />
<input id="height" type="range" class="w-full" v-bind="parametric.height" v-model="form_state.height" <input id="height" type="range" class="w-full" v-bind="parametric.height"
:ref="form_refs.height" /> v-model="form_state.height" :ref="form_refs.height" />
</div> </div>
</div> </div>
<div class="form-row"> <div class="form-row">
@ -193,9 +184,8 @@ const toggleModal = () => {
столбы: {{ getColorNameFromRal(pillar_color)?.toLowerCase() }}. столбы: {{ getColorNameFromRal(pillar_color)?.toLowerCase() }}.
</p> </p>
<p v-if="form_state.extra_section" class="text-ioprim"> <p v-if="form_state.extra_section" class="text-ioprim">
Внимание! Дополнительная секция приводит к увеличению стоимости. Рекомендуем вам изменить длину Внимание! Дополнительная секция приводит к увеличению стоимости.
забора или длину Рекомендуем вам изменить длину забора или длину секции!
секции!
</p> </p>
</div> </div>
<div class="form-row justify-center"> <div class="form-row justify-center">

11
components/modal.vue
View File

@ -7,8 +7,8 @@ const isModalOpen = useState('modal_open', () => false)
const lamelles_count = useState<number>('lamelles_count') const lamelles_count = useState<number>('lamelles_count')
const fence_section = useState<number>('fence_section') const fence_section = useState<number>('fence_section')
const pillar_color = useState('pillar_color') const pillar_color = useState<ralTypes>('pillar_color')
const lamelle_color = useState('lamelle_color') const lamelle_color = useState<ralTypes>('lamelle_color')
const section_count = useState('section_count') const section_count = useState('section_count')
const toggleModal = () => { const toggleModal = () => {
@ -103,13 +103,10 @@ const submit = (e: any) => {
Секций: {{ section_count }} Секций: {{ section_count }}
</div> </div>
<div> <div>
Цвет столба: Цвет столба: {{ getColorNameFromRal(pillar_color) }}
<input id="pillar_color" :value="getColorNameFromRal(pillar_color)" />
</div> </div>
<div> <div>
Цвет ламелей: Цвет ламелей: {{getColorNameFromRal(lamelle_color) }}
<input id="lamelle_color" :value="getColorNameFromRal(lamelle_color)" />
</div> </div>
</div> </div>
<div class="flex gap-4"> <div class="flex gap-4">