optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[HomePanel] HomeOnSale VirtualGridList 변경

Browse Source 
- 스타일및 TVirtualGridList 변경건.
This commit is contained in:
junghoon86.park
2024-02-29 11:20:24 +09:00
parent 1486e97a53
commit 5cbc764de3
2 changed files with 34 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx
View File

@@ -1,26 +1,14 @@
import React, { useCallback } from 'react';
import React, { useCallback } from "react";
import {
useDispatch,
useSelector,
} from 'react-redux';
import { useSelector } from "react-redux";
import { VirtualGridList } from '@enact/sandstone/VirtualList';
import {
SpotlightContainerDecorator,
} from '@enact/spotlight/SpotlightContainerDecorator';
import ri from '@enact/ui/resolution';
import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
import SectionTitle from '../../../components/SectionTitle/SectionTitle';
import { $L } from '../../../utils/helperMethods';
import css from './HomeOnSale.module.less';
import HomeOnSaleItem from './HomeOnSaleItem/HomeOnSaleItem';
const SALE_ITEM_CONF = {
ITEM_WIDTH: 630 * 2,
ITEM_HEIGHT: 300 * 2,
SPACING: 18 * 2,
};
import SectionTitle from "../../../components/SectionTitle/SectionTitle";
import TVirtualGridList from "../../../components/TVirtualGridList/TVirtualGridList";
import { $L } from "../../../utils/helperMethods";
import css from "./HomeOnSale.module.less";
import HomeOnSaleItem from "./HomeOnSaleItem/HomeOnSaleItem";
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
@@ -28,7 +16,6 @@ const Container = SpotlightContainerDecorator(
);
const HomeOnSale = ({ ...rest }) => {
const dispatch = useDispatch();
const homeOnSaleInfos = useSelector(
(state) => state.onSale.onSaleData.homeOnSaleInfos
);
@@ -55,19 +42,14 @@ const HomeOnSale = ({ ...rest }) => {
<SectionTitle className={css.subTitle} title={$L(`ON SALE`)} />
<div className={css.onSaleItem}>
{homeOnSaleInfos && homeOnSaleInfos.length > 0 && (
<VirtualGridList
<TVirtualGridList
className={css.grid}
dataSize={homeOnSaleInfos.length}
direction="horizontal"
horizontalScrollbar="hidden"
itemRenderer={renderItem}
itemSize={{
minWidth: ri.scale(SALE_ITEM_CONF.ITEM_WIDTH),
minHeight: ri.scale(SALE_ITEM_CONF.ITEM_HEIGHT),
}}
noScrollByWheel
scrollMode="translate"
spacing={ri.scale(SALE_ITEM_CONF.SPACING)}
renderItem={renderItem}
itemHeight={300}
itemWidth={630}
spacing={18}
/>
)}
</div>

40
com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.module.less
View File

@@ -19,38 +19,40 @@
> div {
> div {
> div {
&:nth-child(5n + 1) {
> div {
> div {
&:nth-child(5n + 1) {
> div {
background: linear-gradient(0.4turn, #f485c3, #cc4d92);
> div {
background: linear-gradient(0.4turn, #f485c3, #cc4d92);
}
}
}
}
&:nth-child(5n + 2) {
> div {
&:nth-child(5n + 2) {
> div {
background: linear-gradient(0.4turn, #fdbe43, #e47915);
> div {
background: linear-gradient(0.4turn, #fdbe43, #e47915);
}
}
}
}
&:nth-child(5n + 3) {
> div {
&:nth-child(5n + 3) {
> div {
background: linear-gradient(0.4turn, #97ca73, #3e8d18);
> div {
background: linear-gradient(0.4turn, #97ca73, #3e8d18);
}
}
}
}
&:nth-child(5n + 4) {
> div {
&:nth-child(5n + 4) {
> div {
background: linear-gradient(0.4turn, #84b0e9, #4282d9);
> div {
background: linear-gradient(0.4turn, #84b0e9, #4282d9);
}
}
}
}
&:nth-child(5n + 5) {
> div {
&:nth-child(5n + 5) {
> div {
background: linear-gradient(0.4turn, #a387ea, #7750dc);
> div {
background: linear-gradient(0.4turn, #a387ea, #7750dc);
}
}
}
}