diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.jsx b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.jsx index e5733e5b..63a708ec 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.jsx @@ -18,7 +18,7 @@ import CustomImage from "../../../../components/CustomImage/CustomImage"; import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList"; import useScrollTo from "../../../../hooks/useScrollTo"; import { panel_names } from "../../../../utils/Config"; -import { $L, scaleW } from "../../../../utils/helperMethods"; +import { $L, scaleH, scaleW } from "../../../../utils/helperMethods"; import css from "./ThemeIndicator.module.less"; import ThemeIndicatorArrow from "./ThemeIndicatorArrow"; @@ -28,7 +28,7 @@ const Container = SpotlightContainerDecorator( ); const SpottableComponent = Spottable("div"); -const IMAGE_WIDTH = scaleW(152); +const IMAGE_HEIGHT = scaleH(152); function ThemeIndicator({ selectedIndex, @@ -55,7 +55,7 @@ function ThemeIndicator({ const topPanel = panels[panels.length - 1]; const { getScrollTo, scrollTop } = useScrollTo(); - let imagePosition = IMAGE_WIDTH * selectedIndex - IMAGE_WIDTH; + let imagePosition = IMAGE_HEIGHT * selectedIndex - IMAGE_HEIGHT; const canPlayVideo = useMemo(() => { return themeProductInfo?.prdtMediaUrl && imageSelectedIndex === 0; @@ -176,7 +176,7 @@ function ThemeIndicator({ setSelectedIndex((prev) => prev - 1); setImageSelectedIndex(0); if (themeProductInfos.length - 1 !== selectedIndex) { - scrollTop({ y: imagePosition - IMAGE_WIDTH, animate: true }); + scrollTop({ y: imagePosition - IMAGE_HEIGHT, animate: true }); } }, [selectedIndex]); @@ -250,7 +250,7 @@ function ThemeIndicator({ return; } if (selectedIndex >= 3) { - scrollTop({ y: 144 * selectedIndex }); + scrollTop({ y: IMAGE_HEIGHT * selectedIndex }); } if ( themeProductInfos &&