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

[HomePanel] HomeOnSale쪽 배경색 관련 css 수정

Browse Source 
- css 수정.
This commit is contained in:
junghoon86.park
2024-02-06 16:39:39 +09:00
parent 2f1b2606df
commit 79feded12f
3 changed files with 84 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -48,7 +48,7 @@ const HomeOnSale = ({ ...rest }) => {
<Container {...rest} className={css.container}>
<div className={css.bestSeller}>
<h2 className={css.subTitle}>{$L("ON SALE")}</h2>
<TGrid type="onSaleItem">
<div className={css.onSaleItem}>
{homeOnSaleInfos && homeOnSaleInfos.length > 0 && (
<VirtualGridList
className={css.grid}
@@ -65,7 +65,7 @@ const HomeOnSale = ({ ...rest }) => {
spacing={ri.scale(SALE_ITEM_CONF.SPACING)}
/>
)}
</TGrid>
</div>
</div>
</Container>
);

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

@@ -16,5 +16,85 @@
.grid {
height: 300px;
> div {
> div {
> div {
&:nth-child(5n + 1) {
> div {
> div {
background: linear-gradient(to top, #f485c3, #cc4d92);
}
}
}
&:nth-child(5n + 2) {
> div {
> div {
background: linear-gradient(to top, #fdbe43, #e47915);
}
}
}
&:nth-child(5n + 3) {
> div {
> div {
background: linear-gradient(to top, #97ca73, #3e8d18);
}
}
}
&:nth-child(5n + 4) {
> div {
> div {
background: linear-gradient(to top, #84b0e9, #4282d9);
}
}
}
&:nth-child(5n + 5) {
> div {
> div {
background: linear-gradient(to top, #a387ea, #7750dc);
}
}
}
}
}
}
}
&.onSaleItem {
margin-top: 20px;
height: 300px;
display: flex;
flex-wrap: nowrap;
overflow: hidden;
// > div {
// > div {
// > div {
// > div:nth-child(5n + 1) {
// .onSaleItemListBox {
// background-image: linear-gradient(to top, #f485c3, #cc4d92);
// }
// }
// > div:nth-child(5n + 2) {
// .onSaleItemListBox {
// background-image: linear-gradient(to top, #fdbe43, #e47915);
// }
// }
// > div:nth-child(5n + 3) {
// .onSaleItemListBox {
// background-image: linear-gradient(to top, #97ca73, #3e8d18);
// }
// }
// > div:nth-child(5n + 4) {
// .onSaleItemListBox {
// background-image: linear-gradient(to top, #84b0e9, #4282d9);
// }
// }
// > div:nth-child(5n + 5) {
// .onSaleItemListBox {
// background-image: linear-gradient(to top, #a387ea, #7750dc);
// }
// }
// }
// }
// }
}
}

27
com.twin.app.shoptime/src/views/HomePanel/HomeOnSaleItem/HomeOnSaleItem.module.less
View File

@@ -16,6 +16,7 @@
box-sizing: border-box;
.focusDropShadow();
}
.onSaleItemListImg {
width: 300px;
height: 300px;
@@ -29,6 +30,7 @@
box-sizing: border-box;
padding: 24px;
display: inline-block;
.onSaleItemListBoxTitle {
width: 282px;
height: 30px;
@@ -82,29 +84,4 @@
}
}
}
&:nth-child(5n + 1) {
.onSaleItemListBox {
background-image: linear-gradient(to top, #f485c3, #cc4d92);
}
}
&:nth-child(5n + 2) {
.onSaleItemListBox {
background-image: linear-gradient(to top, #fdbe43, #e47915);
}
}
&:nth-child(5n + 3) {
.onSaleItemListBox {
background-image: linear-gradient(to top, #97ca73, #3e8d18);
}
}
&:nth-child(5n + 4) {
.onSaleItemListBox {
background-image: linear-gradient(to top, #84b0e9, #4282d9);
}
}
&:nth-child(5n + 5) {
.onSaleItemListBox {
background-image: linear-gradient(to top, #a387ea, #7750dc);
}
}
}