From 21a4d71fe6d0de26da85e909682b866f8ad9695b Mon Sep 17 00:00:00 2001 From: Kseninia Mikhaylova Date: Mon, 23 Sep 2024 17:02:46 +0300 Subject: [PATCH 1/3] test css --- assets/main.scss | 28 +++++++++++++++++++++++----- components/calcValues.vue | 8 ++++---- 2 files changed, 27 insertions(+), 9 deletions(-) diff --git a/assets/main.scss b/assets/main.scss index 4a0a29c..f9c8282 100644 --- a/assets/main.scss +++ b/assets/main.scss @@ -180,10 +180,11 @@ a[href^="#"] { &_calc { @apply py-0 relative; - > .container:first-child { + >.container:first-child { @apply relative h-[50vh] min-h-[600px] justify-between; - > * { - @apply z-10 + + >* { + @apply z-10 } } @@ -280,13 +281,30 @@ 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 disabled:text-black; + @apply bg-white 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 disabled:text-black; } input[type=checkbox] { @apply w-4 h-4; } +input[type=range] { + @apply bg-neutral-300 appearance-none h-1 ; + // [&::-webkit-slider-runnable-track]:h-1 + // [&::-moz-range-track]:h-1 + // [&::-webkit-slider-thumb]:bg-[#61C4FF] [&::-webkit-slider-thumb]:w-8 + // [&::-moz-range-thumb]:bg-[#61C4FF] + // ; + &::-moz-range-track, + &::-webkit-slider-runnable-track { + @apply h-1 bg-red-500; + } + &::-moz-range-thumb, + &::-webkit-slider-thumb { + @apply bg-[#61C4FF] shadow-red-700; + } +} + 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; } @@ -327,7 +345,7 @@ button { } input[type=range] { - @apply min-w-[calc(100%-8rem)] xl:min-w-min; + @apply min-w-[calc(100%-8rem)] xl:min-w-min py-0 -translate-y-1/2; } } } diff --git a/components/calcValues.vue b/components/calcValues.vue index 80a0ec1..051abc2 100644 --- a/components/calcValues.vue +++ b/components/calcValues.vue @@ -155,21 +155,21 @@ const goal = (target: string, params: object) => {
- +
- +
- +
-- 2.40.1 From d30ac35ce48c6920197cd7ee48b0dd29c22a3f73 Mon Sep 17 00:00:00 2001 From: Kseninia Mikhaylova Date: Tue, 24 Sep 2024 09:53:09 +0300 Subject: [PATCH 2/3] fence section distance --- assets/main.scss | 6 ++++-- components/calcModels.vue | 8 ++++---- components/calcValues.vue | 2 +- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/assets/main.scss b/assets/main.scss index f9c8282..be0a032 100644 --- a/assets/main.scss +++ b/assets/main.scss @@ -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 text-lg p-2.5 disabled:cursor-not-allowed disabled:text-black; + @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; } input[type=checkbox] { @@ -289,7 +289,8 @@ input[type=checkbox] { } input[type=range] { - @apply bg-neutral-300 appearance-none h-1 ; + @apply bg-neutral-300 appearance-none h-1; + // [&::-webkit-slider-runnable-track]:h-1 // [&::-moz-range-track]:h-1 // [&::-webkit-slider-thumb]:bg-[#61C4FF] [&::-webkit-slider-thumb]:w-8 @@ -299,6 +300,7 @@ input[type=range] { &::-webkit-slider-runnable-track { @apply h-1 bg-red-500; } + &::-moz-range-thumb, &::-webkit-slider-thumb { @apply bg-[#61C4FF] shadow-red-700; diff --git a/components/calcModels.vue b/components/calcModels.vue index 8e9b45d..a929ec9 100644 --- a/components/calcModels.vue +++ b/components/calcModels.vue @@ -5,8 +5,8 @@ import { degToRad } from 'three/src/math/MathUtils.js'; const section_count = use_section_count() const extra_section = use_extra_section() -const lamelles_count = use_lamelles_count() -const lamelle_height = use_lamelle_height() +const fence_section = use_fence_section() + const defDistance = 3 const controlsState = reactive({ distance: section_count.value, @@ -26,8 +26,8 @@ const cameraStat = reactive({ const camera = ref("camera") -watch([section_count, extra_section], () => { - let v = (section_count.value + ~~(!!extra_section.value)); +watch(fence_section, ()=>{ + let v = fence_section.value * 2; if (v <= defDistance) v = defDistance controlsState.minDistance = v; controlsState.maxDistance = v; diff --git a/components/calcValues.vue b/components/calcValues.vue index 051abc2..7df9ec0 100644 --- a/components/calcValues.vue +++ b/components/calcValues.vue @@ -155,7 +155,7 @@ const goal = (target: string, params: object) => {
- +
-- 2.40.1 From c53a9ddc45287f167d8d6638dbe84729d635b2cf Mon Sep 17 00:00:00 2001 From: Kseninia Mikhaylova Date: Tue, 24 Sep 2024 10:43:26 +0300 Subject: [PATCH 3/3] 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 -- 2.40.1