maybe fixed sliders, trainings tab
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import { useState } from 'react';
|
||||
import { useEffect, useReducer, useState } from 'react';
|
||||
import { MiniTitle } from '../../ui/MiniTitle';
|
||||
import { Title } from '../../ui/Title';
|
||||
import { useWindowWidth } from '../../hooks/useWindowWidth';
|
||||
|
||||
export function Products() {
|
||||
const [curTab, setCurTab] = useState(0);
|
||||
@@ -124,7 +125,7 @@ function TrainingsTab() {
|
||||
<div className="flex desktop:flex-col tablet:max-desktop:mt-8 desktop:gap-y-6 mobile:max-tablet:flex-col mobile:max-tablet:gap-y-4 tablet:max-desktop:gap-x-3">
|
||||
<TeachingItem
|
||||
iconType="danger"
|
||||
text="Отработка проведения технологических операций: оказание первой помощи, работы на высоте, работа с доменной печью и т.п."
|
||||
text="Отработка проведения технологических операций: оказание первой помощи, работы на высоте, работа с доменной печью и т.п."
|
||||
title="обучение навыкам работы на опасных производствах"
|
||||
/>
|
||||
<TeachingItem
|
||||
@@ -144,6 +145,39 @@ function TrainingsTab() {
|
||||
}
|
||||
|
||||
function SimulatorsTab() {
|
||||
const width = useWindowWidth();
|
||||
const [slide, setSlide] = useState(0);
|
||||
const [touchStart, setTouchStart] = useState(0);
|
||||
const [sliderOffset, setSliderOffset] = useState(-width + 80);
|
||||
|
||||
const [order, dispatch] = useReducer(
|
||||
(state: string[], action: string) => {
|
||||
switch (action) {
|
||||
case 'prev':
|
||||
setSliderOffset(-(width - 80) * 2);
|
||||
return [state[state.length - 3], ...state.slice(0, -1)];
|
||||
case 'next':
|
||||
setSliderOffset(prev => prev + width - 80);
|
||||
return [...state.slice(1), state[2]];
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
},
|
||||
[
|
||||
'src/assets/rzhd2.png',
|
||||
'src/assets/train.png',
|
||||
'src/assets/dispatcher.png',
|
||||
'src/assets/winda.png',
|
||||
'src/assets/rzhd.png',
|
||||
'src/assets/rzhd2.png',
|
||||
'src/assets/train.png',
|
||||
],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setSliderOffset(-width + 80);
|
||||
}, [order, slide, width]);
|
||||
|
||||
return (
|
||||
<div className="bg-[#3D425C4D] rounded-xl desktop:p-10 tablet:max-desktop:p-7 mobile:max-tablet:p-5 desktop:max-h-[546px] overflow-hidden">
|
||||
<div className="tablet:flex justify-between gap-x-2">
|
||||
@@ -172,32 +206,67 @@ function SimulatorsTab() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="tablet:max-desktop:max-w-[234px]">
|
||||
<div className="flex desktop:justify-end mobile:max-tablet:relative xl:max-w-[clamp(552px,552px+(100vw-1280px)/320*160,712px)] desktop:max-xl:max-w-[300px] tablet:max-desktop:flex-col tablet:flex-wrap gap-2 tablet:max-desktop:mb-10">
|
||||
<img
|
||||
src="src/assets/train.png"
|
||||
className="rounded-lg xl:w-[clamp(178px,178px+(100vw-1280px)/320*54,232px)] tablet:max-xl:hidden"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="src/assets/dispatcher.png"
|
||||
className="xl:w-[clamp(178px,178px+(100vw-1280px)/320*54,232px)] tablet:max-xl:hidden"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="src/assets/winda.png"
|
||||
className="xl:w-[clamp(178px,178px+(100vw-1280px)/320*54,232px)] tablet:max-xl:hidden"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="src/assets/rzhd.png"
|
||||
className="xl:w-[clamp(272px,272px+(100vw-1280px)/320*80,352px)]"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="src/assets/rzhd2.png"
|
||||
className="xl:w-[clamp(272px,272px+(100vw-1280px)/320*80,352px)]"
|
||||
alt=""
|
||||
/>
|
||||
<div
|
||||
className="flex desktop:justify-end mobile:max-tablet:relative xl:max-w-[clamp(553px,553px+(100vw-1280px)/320*160,713px)] desktop:max-xl:max-w-[300px] tablet:max-desktop:flex-col tablet:flex-wrap gap-2 tablet:max-desktop:mb-10 duration-1000"
|
||||
style={
|
||||
width < 640
|
||||
? {
|
||||
transform: `translateX(${sliderOffset}px)`,
|
||||
transition: `${sliderOffset === 0 || sliderOffset === (-width + 80) * 2 ? 0 : 0.4}s`,
|
||||
}
|
||||
: {}
|
||||
}
|
||||
onTouchStart={e => setTouchStart(e.targetTouches[0].clientX)}
|
||||
onTouchEnd={e => {
|
||||
if (e.nativeEvent.changedTouches[0].clientX - touchStart > 100) {
|
||||
dispatch('prev');
|
||||
setSlide(prev => (prev === 0 ? order.length - 3 : prev - 1));
|
||||
} else if (
|
||||
e.nativeEvent.changedTouches[0].clientX - touchStart <
|
||||
-100
|
||||
) {
|
||||
dispatch('next');
|
||||
setSlide(prev => (prev === order.length - 3 ? 0 : prev + 1));
|
||||
}
|
||||
}}
|
||||
>
|
||||
{width < 640 ? (
|
||||
order.map(src => (
|
||||
<img
|
||||
src={src}
|
||||
className="rounded-lg mobile:max-tablet:min-w-[clamp(280px,100vw-80px,559px)] object-cover"
|
||||
alt=""
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<>
|
||||
<img
|
||||
src="src/assets/train.png"
|
||||
className="rounded-lg xl:w-[clamp(178px,178px+(100vw-1280px)/320*54,232px)] tablet:max-xl:hidden"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="src/assets/dispatcher.png"
|
||||
className="xl:w-[clamp(178px,178px+(100vw-1280px)/320*54,232px)] tablet:max-xl:hidden"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="src/assets/winda.png"
|
||||
className="xl:w-[clamp(178px,178px+(100vw-1280px)/320*54,232px)] tablet:max-xl:hidden"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="src/assets/rzhd.png"
|
||||
className="xl:w-[clamp(272px,272px+(100vw-1280px)/320*80,352px)]"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="src/assets/rzhd2.png"
|
||||
className="xl:w-[clamp(272px,272px+(100vw-1280px)/320*80,352px)]"
|
||||
alt=""
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<p className="desktop:hidden mobile:max-tablet:hidden text-[#ffffff] opacity-60 tablet-figma:text-[clamp(12px,12px+(100vw-768px)/832*2,14px)] tablet-figma:leading-[clamp(16.8px,16.8px+(100vw-768px)/832*2.8,19.6px)] mobile:max-tablet-figma:text-xs mobile:max-tablet-figma:leading-[16.8px]">
|
||||
модель позволяет производить расчеты характеристик работы,
|
||||
|
||||
@@ -115,9 +115,9 @@ function Slider({
|
||||
return (
|
||||
<div className="flex flex-col desktop:mt-4 tablet:mt-3 mobile:mt-2">
|
||||
<div
|
||||
className="flex gap-2 overflow-visible relative mb-[18px] -mr-10 duration-1000"
|
||||
className="flex gap-2 overflow-visible relative mb-[18px] -mr-10"
|
||||
style={{
|
||||
transition: `${+!(sliderOffset === 0 || sliderOffset === -baseOffset * 2)}s`,
|
||||
transition: `${sliderOffset === 0 || sliderOffset === -baseOffset * 2 ? 0 : 0.4}s`,
|
||||
transform: `translateX(${sliderOffset}px)`,
|
||||
}}
|
||||
onTouchStart={e => {
|
||||
@@ -142,7 +142,7 @@ function Slider({
|
||||
<Project key={index} {...project} />
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-4 w-[1264px] self-start ml-64">
|
||||
<div className="flex items-center gap-4 desktop:w-[clamp(720px,100vw-465px,1135px)] mobile:w-full self-start desktop:ml-64">
|
||||
<button
|
||||
onClick={() => {
|
||||
dispatch('prev');
|
||||
@@ -154,7 +154,7 @@ function Slider({
|
||||
</button>
|
||||
<div className="h-1 bg-[#3D425C] w-full">
|
||||
<div
|
||||
className="bg-[#ffffff] h-1 duration-1000"
|
||||
className="bg-[#ffffff] h-1 duration-400"
|
||||
style={{ width: `${((slide + 1) / 3) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user