From c53a9ddc45287f167d8d6638dbe84729d635b2cf Mon Sep 17 00:00:00 2001 From: Kseninia Mikhaylova Date: Tue, 24 Sep 2024 10:43:26 +0300 Subject: [PATCH] css --- assets/main.scss | 16 ++++-- components/calcValues.vue | 110 +++++++++++++++++-------------------- components/colorPicker.vue | 22 ++++---- components/model/line.vue | 54 ------------------ 4 files changed, 71 insertions(+), 131 deletions(-) diff --git a/assets/main.scss b/assets/main.scss index be0a032..695e581 100644 --- a/assets/main.scss +++ b/assets/main.scss @@ -181,7 +181,7 @@ a[href^="#"] { @apply py-0 relative; >.container:first-child { - @apply relative h-[50vh] min-h-[600px] justify-between; + @apply relative min-h-[650px] justify-between; >* { @apply z-10 @@ -281,7 +281,7 @@ label { } input { - @apply bg-white border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 focus-visible:border-blue-500 text-lg p-2.5 disabled:cursor-not-allowed disabled:text-black; + @apply bg-white border border-gray-300 text-gray-900 text-lg p-2.5 rounded focus:ring-blue-500 focus:border-blue-500 focus-visible:border-blue-500 disabled:cursor-not-allowed disabled:text-black disabled:bg-neutral-300; } input[type=checkbox] { @@ -343,7 +343,13 @@ button { } &_checkbox { - @apply w-full xl:w-auto flex-row xl:flex-initial flex-nowrap gap-4 + @apply w-full xl:w-auto flex-row xl:flex-initial flex-nowrap gap-4; + } + &_color { + @apply w-full; + .color_picker { + @apply ml-4; + } } input[type=range] { @@ -364,7 +370,7 @@ button { } &-changer { - @apply absolute w-80 z-10 p-4 border rounded bg-white flex gap-0 right-0 lg:right-auto; + @apply absolute w-80 z-20 p-4 border rounded bg-white flex gap-0 right-0; } } @@ -397,7 +403,7 @@ button { } .calc_table { - @apply flex flex-col gap-2 mb-4; + @apply flex flex-col gap-2 self-end; >.grid { @apply gap-2 items-center; diff --git a/components/calcValues.vue b/components/calcValues.vue index 7df9ec0..390a84f 100644 --- a/components/calcValues.vue +++ b/components/calcValues.vue @@ -155,13 +155,14 @@ const goal = (target: string, params: object) => {
- +
- +
@@ -169,9 +170,18 @@ const goal = (target: string, params: object) => {
+ v-model="form_state.total_length" :ref="form_refs.total_length" class="w-full" /> +
+
+

+ Выбранный размер забора слишком мал для расчета стоимости. Пожалуйста, выберите больший + размер, чтобы продолжить. +

+

+ Внимание! Дополнительная секция приводит к увеличению стоимости. + Рекомендуем вам изменить длину забора или длину секции! +

-
@@ -183,68 +193,48 @@ const goal = (target: string, params: object) => {
-
- - - -
-
- - - +
+
+ + + +
+
+ + + +
diff --git a/components/colorPicker.vue b/components/colorPicker.vue index 5c084f4..ded7759 100644 --- a/components/colorPicker.vue +++ b/components/colorPicker.vue @@ -28,18 +28,16 @@ onUnmounted(() => { }) diff --git a/components/model/line.vue b/components/model/line.vue index 951de31..425766f 100644 --- a/components/model/line.vue +++ b/components/model/line.vue @@ -29,22 +29,6 @@ const lamelle_height = use_lamelle_height() const total = ref((section_count.value + ~~(!!extra_section.value))) const position = ref(new Vector3()) -const clickable_positions = reactive({ - 'top': [position.value.x, (lamelle_count.value + 1) * lamelle_height.value, 0], - 'lam': [position.value.x, position.value.y * 0.5, 0] -}) -const clickable_pointers = ref([]) -const clickable_refs = ref([]) - -Object.entries(clickable_positions).map(el => { - const p = props.models.pointer.clone() - p.position.set(...el[1]) - p.updateMatrixWorld() - p.name = `clickable_${props.number}_${el[0]}` - clickable_pointers.value.push(p) - clickable_refs.value.push(ref(p.name)) -}) - const count_pos = () => { total.value = (section_count.value + ~~(!!extra_section.value)) @@ -81,22 +65,7 @@ const count_pos = () => { break; } line?.updateMatrixWorld() - - clickable_positions.top = [position.value.x, (lamelle_count.value + 1) * lamelle_height.value, 0]; - clickable_positions.lam = [position.value.x, position.value.y * 0.5, 0]; } -watch(clickable_positions, () => { - clickable_refs.value.map((el: Ref) => { - const name = el.value[0].name.replace(`clickable_${props.number}_`, '') - if (name in clickable_positions) { - const p = clickable_positions[name as keyof typeof clickable_positions]; - console.log(props.number, p, el.value[0].name) - el.value[0].position.set(p[0], p[1], p[2]) - el.value[0].children[0].position.set(p[0], p[1], p[2]) - el.value[0].updateMatrixWorld() - } - }) -}, { deep: true }) onMounted(() => { count_pos() @@ -105,24 +74,6 @@ watch(() => [props.count, fence_section.value, section_count.value, extra_sectio count_pos, { flush: 'post' } ) - -const { onBeforeRender } = useLoop() -onBeforeRender(() => { - clickable_refs.value.map((el: any) => { - if (el.value[0] && el.value[0].children) { - el.value[0].children[0].lookAt(camera.value?.position); - el.value[0].children[0].rotateX(degToRad(90)); - el.value[0].children[0].rotateZ(degToRad(15)); - - const dis_to_cam = camera.value?.position.distanceTo(el.value[0].position); - if (dis_to_cam) { - const scaling = (0.66 * dis_to_cam) / 100 - el.value[0].children[0].scale.set(scaling, scaling, scaling); - el.value[0].updateMatrixWorld() - } - } - }) -}) - - - \ No newline at end of file