mikhail_lanskikh/graff.training
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

products tabs fixed

Browse Source
This commit is contained in:
Lanskikh
2024-09-16 14:07:14 +05:00
parent 9736425309
commit 521ed7a609
4 changed files with 183 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Main/Products/Products.tsx
+7 -5
View File
@@ -13,18 +13,18 @@ export function Products() {
function handleMouseMove(e: WheelEvent) {
setSticked1(
Math.round(ref2.current!.getBoundingClientRect().top) <=
ref2.current!.getBoundingClientRect().top <=
+window.getComputedStyle(ref2.current!).top.slice(0, -2),
);
setSticked2(
Math.round(ref3.current!.getBoundingClientRect().top) <=
ref3.current!.getBoundingClientRect().top <=
+window.getComputedStyle(ref3.current!).top.slice(0, -2),
);
if (e.deltaY > 0) {
if (
ref1.current!.getBoundingClientRect().top ===
+window.getComputedStyle(ref1.current!).top.slice(0, -2) &&
Math.round(ref2.current!.getBoundingClientRect().top) !==
ref2.current!.getBoundingClientRect().top !==
+window.getComputedStyle(ref2.current!).top.slice(0, -2)
) {
window.scrollBy({
@@ -36,8 +36,10 @@ export function Products() {
setSticked1(true);
}
if (
Math.round(ref2.current!.getBoundingClientRect().top) ===
+window.getComputedStyle(ref2.current!).top.slice(0, -2)
Math.round(
ref2.current!.getBoundingClientRect().top -
+window.getComputedStyle(ref2.current!).top.slice(0, -2),
) === 0
) {
window.scrollBy({
top:
src/components/Main/Products/Tabs/ForTeachingTab.tsx
+49 -51
View File
@@ -3,58 +3,56 @@ import { useHover } from 'usehooks-ts';
import { getIcon } from '../../../../utils/getIcon';
import { useInView } from 'framer-motion';
export const ForTeachingTab = forwardRef<HTMLDivElement>((_, ref) => {
return (
<div
itemProp="forEducation"
itemScope
itemType="https://schema.org/TrainingsForEducation"
ref={ref}
className="lg:ml-[129px] lg:min-h-[calc(100vh-276px)] lg:min-w-[calc(100vw-129px)] sm:min-h-[calc(100vh-176px)] min-h-[calc(100vh)] min-w-[100vw] sm:sticky -z-10 lg:top-[276px] sm:top-[176px] top-0 lg:px-10 lg:pt-10 sm:px-6 sm:pt-6 px-4 pt-4 lg:border-l bg-[#14161F] border-t border-[#3D425C]"
>
<div className="flex justify-between ">
<h2 className="font-medium h2">
Интерактивные тренажеры для учебных заведений
</h2>
<p className="h3 font-medium text-[#3D425C]">03</p>
</div>
<div className="flex justify-between max-sm:flex-col">
<div className="lg:space-y-14 sm:space-y-10 space-y-6 sm:max-w-[calc(413/768*100vw)] lg:mt-14 sm:mt-10 mt-6">
<div
itemProp="creating"
className="lg:space-y-7 space-y-4 xl:max-w-[calc(507/1600*100vw)] lg:max-w-[40vw] flex-1"
>
<ForTeachingOption
title="cоздание обучающих VR систем"
description="Проведение виртуальных практических работ, создание учебных мастерских и стендов"
type="teaching"
/>
<ForTeachingOption
title="cоздание VR лабораторий"
description="Тренажер для проведения лабораториных работ позволит избежать
поломки оборудования, а также экономить на расходных средствах"
type="labs"
/>
<p className="w-[85%] font-medium lg:text-2xl sm:text-xl">
Оснащение учебных классов и центров всем необходимым для
современного обучения под «ключ»
</p>
</div>
</div>
<img
src="src/assets/products/teaching/teaching.png"
className="max-sm:hidden w-[calc(685/1600*100vw)] sm:self-start self-stretch"
alt="обучение"
/>
<img
src="src/assets/products/teaching/teaching_mobile.png"
className="mt-5 -mx-6 sm:hidden"
alt="обучение"
/>
</div>
export const ForTeachingTab = forwardRef<HTMLDivElement>((_, ref) => (
<div
itemProp="forEducation"
itemScope
itemType="https://schema.org/TrainingsForEducation"
ref={ref}
className="overflow-hidden lg:ml-[129px] lg:h-[70dvh] sm:h-[80dvh] lg:min-w-[calc(100vw-129px)] h-[100dvh] min-w-[100vw] sm:sticky -z-10 lg:top-[30dvh] sm:top-[20dvh] top-0 lg:px-10 lg:pt-10 sm:px-6 sm:pt-6 px-4 pt-4 lg:border-l bg-[#14161F] border-t border-[#3D425C]"
>
<div className="flex justify-between ">
<h2 className="font-medium h2">
Интерактивные тренажеры для учебных заведений
</h2>
<p className="h3 font-medium text-[#3D425C]">03</p>
</div>
);
});
<div className="flex justify-between max-sm:flex-col">
<div className="lg:space-y-14 sm:space-y-10 space-y-6 sm:max-w-[calc(413/768*100vw)] lg:mt-14 sm:mt-10 mt-6">
<div
itemProp="creating"
className="lg:space-y-7 space-y-4 xl:max-w-[calc(507/1600*100vw)] lg:max-w-[40vw] flex-1"
>
<ForTeachingOption
title="cоздание обучающих VR систем"
description="Проведение виртуальных практических работ, создание учебных мастерских и стендов"
type="teaching"
/>
<ForTeachingOption
title="cоздание VR лабораторий"
description="Тренажер для проведения лабораториных работ позволит избежать
поломки оборудования, а также экономить на расходных средствах"
type="labs"
/>
<p className="font-medium lg:text-2xl sm:text-xl">
Оснащение учебных классов и центров всем необходимым для
современного обучения под «ключ»
</p>
</div>
</div>
<img
src="src/assets/products/teaching/teaching.png"
className="max-sm:hidden w-[calc(685/1600*100vw)] sm:self-start"
alt="обучение"
/>
<img
src="src/assets/products/teaching/teaching_mobile.png"
className="mt-5 -mx-6 sm:hidden"
alt="обучение"
/>
</div>
</div>
));
function ForTeachingOption({
title,
src/components/Main/Products/Tabs/IndustrialTab.tsx
+63 -65
View File
@@ -37,73 +37,71 @@ function TeachingItem({
}
export const IndustrialTab = forwardRef<HTMLDivElement, { sticked: boolean }>(
({ sticked }, ref) => {
return (
<div
itemProp="industrial"
itemScope
itemType="https://schema.org/IndustrialTrainings"
ref={ref}
className="sm:sticky top-0 min-h-[100svh] min-w-[100vw] overflow-hiddens lg:px-10 lg:pt-10 sm:px-6 sm:pt-6 px-4 pt-4 border-t border-[#3D425C] bg-[#14161F] -z-30 max-sm:flex flex-col items-center gap-y-4"
>
<div className="space-y-6 lg:space-y-14 sm:space-y-10">
<div
className={
'flex justify-between items-center' +
(sticked ? ' text-[#3D425C] transition-colors' : '')
}
>
<h2 className="w-full font-medium h2">Промышленные тренажеры</h2>
<p className="h3 font-medium text-[#3D425C]">01</p>
</div>
<div
itemProp="education"
itemScope
itemType="https://schema.org/IndustrialTrainingsEducation"
className={
'sm:space-y-7 space-y-4 xl:max-w-[max(450px,calc(507/1600*100vw))] lg:max-w-[440px] sm:max-w-[calc(379/768*100vw)]' +
(sticked ? ' transition-opacity opacity-0' : ' opacity-100')
}
>
<TeachingItem
iconType="danger"
text="отработка проведения технологических операций: оказание первой помощи, работы на высоте, работа с доменной печью и т.п."
title="обучение навыкам работы на опасных производствах"
/>
<TeachingItem
iconType="service"
text="отработка определения неисправностей оборудования и выполнения ремонтных работ на цифровом двойнике"
title="обучение обслуживанию и ремонту оборудования, систем, техники"
/>
<TeachingItem
iconType="safety"
text="отработка плана мероприятий по локализации и ликвидации последствий аварий. "
title="обучение правилам промышленной безопасности и охраны труда"
/>
</div>
({ sticked }, ref) => (
<div
itemProp="industrial"
itemScope
itemType="https://schema.org/IndustrialTrainings"
ref={ref}
className="sm:sticky top-0 min-h-[100dvh] min-w-[100vw] overflow-hiddens lg:px-10 lg:pt-10 sm:px-6 sm:pt-6 px-4 pt-4 border-t border-[#3D425C] bg-[#14161F] -z-30 max-sm:flex flex-col items-center gap-y-4"
>
<div className="space-y-6 lg:space-y-14 sm:space-y-10">
<div
className={
'flex justify-between items-center' +
(sticked ? ' text-[#3D425C] transition-colors' : '')
}
>
<h2 className="w-full font-medium h2">Промышленные тренажеры</h2>
<p className="h3 font-medium text-[#3D425C]">01</p>
</div>
<img
src="src/assets/products/trainings/trainings_desktop.png"
<div
itemProp="education"
itemScope
itemType="https://schema.org/IndustrialTrainingsEducation"
className={
'absolute right-0 top-[121px] object-cover lg:w-[calc(1000/1600*100vw)] xl:w-[calc(1152/1600*100vw)] max-lg:hidden ' +
(sticked ? 'transition-opacity opacity-0' : 'opacity-100')
'sm:space-y-7 space-y-4 xl:max-w-[max(450px,calc(507/1600*100vw))] lg:max-w-[440px] sm:max-w-[calc(379/768*100vw)]' +
(sticked ? ' transition-opacity opacity-0' : ' opacity-100')
}
alt="тренажеры"
/>
<img
src="src/assets/products/trainings/trainings_tablet.png"
className={
'absolute right-0 top-[120px] object-cover w-[calc(438/768*100vw)] hidden sm:max-lg:block ' +
(sticked ? 'transition-opacity opacity-0' : 'opacity-100')
}
alt="тренажеры"
/>
<img
src="src/assets/products/trainings/trainings_mobile.png"
className="object-cover object-center sm:hidden"
alt="тренажеры"
/>
>
<TeachingItem
iconType="danger"
text="отработка проведения технологических операций: оказание первой помощи, работы на высоте, работа с доменной печью и т.п."
title="обучение навыкам работы на опасных производствах"
/>
<TeachingItem
iconType="service"
text="отработка определения неисправностей оборудования и выполнения ремонтных работ на цифровом двойнике"
title="обучение обслуживанию и ремонту оборудования, систем, техники"
/>
<TeachingItem
iconType="safety"
text="отработка плана мероприятий по локализации и ликвидации последствий аварий. "
title="обучение правилам промышленной безопасности и охраны труда"
/>
</div>
</div>
);
},
<img
src="src/assets/products/trainings/trainings_desktop.png"
className={
'absolute right-0 top-[121px] object-cover lg:w-[calc(1000/1600*100vw)] xl:w-[calc(1152/1600*100vw)] max-lg:hidden ' +
(sticked ? 'transition-opacity opacity-0' : 'opacity-100')
}
alt="тренажеры"
/>
<img
src="src/assets/products/trainings/trainings_tablet.png"
className={
'absolute right-0 top-[120px] object-cover w-[calc(438/768*100vw)] hidden sm:max-lg:block ' +
(sticked ? 'transition-opacity opacity-0' : 'opacity-100')
}
alt="тренажеры"
/>
<img
src="src/assets/products/trainings/trainings_mobile.png"
className="object-cover object-center sm:hidden"
alt="тренажеры"
/>
</div>
),
);
src/components/Main/Products/Tabs/SimulatorsTab.tsx
+64 -66
View File
@@ -2,81 +2,79 @@ import { forwardRef } from 'react';
function SimulatorsItem({ text }: { text: string }) {
return (
<div className="lg:text-2xl sm:text-xl bg-[#3D425C4D] rounded-[44px] w-fit sm:px-5 sm:py-2 px-4 py-[6px]">
<div className="lg:text-2xl sm:text-xl bg-[#3D425C4D] rounded-[44px] w-fit sm:px-5 sm:py-2 px-4 py-1.5">
{text}
</div>
);
}
export const SimulatorsTab = forwardRef<HTMLDivElement, { sticked: boolean }>(
({ sticked }, ref) => {
return (
({ sticked }, ref) => (
<div
itemScope
itemProp="simulators"
itemType="http://schema.org/Simulators"
ref={ref}
className="lg:ml-[65px] lg:h-[85dvh] lg:min-w-[calc(100vw-65px)] sm:h-[90dvh] min-w-[100vw] h-[100dvh] sm:sticky -z-20 lg:top-[15dvh] sm:top-[10dvh] top-0 bg-[#14161F] lg:px-10 lg:pt-10 sm:px-6 sm:pt-6 px-4 pt-4 lg:space-y-12 sm:space-y-10 space-y-6 lg:border-l border-t border-[#3D425C]"
>
<div
itemScope
itemProp="simulators"
itemType="http://schema.org/Simulators"
ref={ref}
className="lg:ml-[65px] lg:min-h-[calc(100svh-138px)] lg:min-w-[calc(100vw-65px)] sm:min-h-[calc(100svh-88px)] min-w-[100vw] min-h-[calc(100svh)] sm:sticky -z-20 lg:top-[138px] sm:top-[88px] top-0 bg-[#14161F] lg:px-10 lg:pt-10 sm:px-6 sm:pt-6 px-4 pt-4 lg:space-y-12 sm:space-y-10 space-y-6 lg:border-l border-t border-[#3D425C]"
className={
'flex justify-between gap-x-2' +
(sticked ? ' text-[#3D425C] transition-colors' : '')
}
>
<div
className={
'flex justify-between gap-x-2' +
(sticked ? ' text-[#3D425C] transition-colors' : '')
}
>
<h2 className="font-medium h2">Симуляторы управления техникой</h2>
<p className="text-[#3D425C] h3 font-medium">02</p>
<h2 className="font-medium h2">Симуляторы управления техникой</h2>
<p className="text-[#3D425C] h3 font-medium">02</p>
</div>
<div
itemProp="simulatorsTypes"
itemScope
itemType="http://schema.org/SimulatorsTypes"
className={
'flex flex-wrap gap-2 lg:max-w-[1000px]' +
(sticked ? ' transition-opacity opacity-0' : ' opacity-100')
}
>
<SimulatorsItem text="авиационные симуляторы" />
<SimulatorsItem text="погрузчики – ричстракеры" />
<SimulatorsItem text="тяговые составы железной дороги" />
<SimulatorsItem text="грузовые краны" />
<SimulatorsItem text="вертолетная техника" />
<SimulatorsItem text="горные самосвалы и экскаваторы" />
</div>
<div
itemProp="simulatorsModel"
itemScope
itemType="http://schema.org/SimulatorsModel"
className={
'sm:flex max-sm:space-y-6 gap-x-2 lg:max-w-[calc(1417/1600*100vw)]' +
(sticked ? ' transition-opacity opacity-0' : ' opacity-100')
}
>
<div className="space-y-[10px] lg:w-[calc(498.5/1600*100vw)] sm:w-[calc(331/768*100vw)]">
<img
src="src/assets/products/simulators/rzhd2.jpg"
className="object-cover sm:max-lg:aspect-[331/292] max-sm:aspect-[328/172]"
alt="ржд"
/>
<p className="l-text opacity-60">
В основу симуляторов заложена математическая модель, полностью
соответствующая работе настоящего оборудования
</p>
</div>
<div
itemProp="simulatorsTypes"
itemScope
itemType="http://schema.org/SimulatorsTypes"
className={
'flex flex-wrap gap-2 lg:max-w-[1000px]' +
(sticked ? ' transition-opacity opacity-0' : ' opacity-100')
}
>
<SimulatorsItem text="авиационные симуляторы" />
<SimulatorsItem text="погрузчики – ричстракеры" />
<SimulatorsItem text="тяговые составы железной дороги" />
<SimulatorsItem text="грузовые краны" />
<SimulatorsItem text="вертолетная техника" />
<SimulatorsItem text="горные самосвалы и экскаваторы" />
</div>
<div
itemProp="simulatorsModel"
itemScope
itemType="http://schema.org/SimulatorsModel"
className={
'sm:flex max-sm:space-y-6 gap-x-2 lg:max-w-[calc(1417/1600*100vw)]' +
(sticked ? ' transition-opacity opacity-0' : ' opacity-100')
}
>
<div className="space-y-[10px] lg:w-[calc(498.5/1600*100vw)] sm:w-[calc(331/768*100vw)]">
<img
src="src/assets/products/simulators/rzhd2.jpg"
className="object-cover sm:max-lg:aspect-[331/292] max-sm:aspect-[328/172]"
alt="ржд"
/>
<p className="l-text opacity-60">
В основу симуляторов заложена математическая модель, полностью
соответствующая работе настоящего оборудования
</p>
</div>
<div className="space-y-[10px] lg:w-[calc(498.5/1600*100vw)] sm:w-[calc(331/768*100vw)]">
<img
src="src/assets/products/simulators/rzhd.jpg"
className="object-cover sm:max-lg:aspect-[331/292] max-sm:aspect-[328/172]"
alt="ржд"
/>
<p className="l-text opacity-60">
Модель позволяет производить расчеты характеристик работы,
отслеживать безопасность работы устройств и симулировать
внештатные ситуации.
</p>
</div>
<div className="space-y-[10px] lg:w-[calc(498.5/1600*100vw)] sm:w-[calc(331/768*100vw)]">
<img
src="src/assets/products/simulators/rzhd.jpg"
className="object-cover sm:max-lg:aspect-[331/292] max-sm:aspect-[328/172]"
alt="ржд"
/>
<p className="l-text opacity-60">
Модель позволяет производить расчеты характеристик работы,
отслеживать безопасность работы устройств и симулировать внештатные
ситуации.
</p>
</div>
</div>
);
},
</div>
),
);