diff --git a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
index 76f51d44..bf44ef9f 100644
--- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
+++ b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
@@ -119,14 +119,12 @@ export default memo(function TItemCard({
)}
{isBestSeller && rank && (
-
+
{STRING_CONF.TOP}
{rank}
)}
- {isLive && (
-
- )}
+ {isLive &&

}
);
});
diff --git a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less
index d0c917ca..ca2b51e7 100644
--- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less
+++ b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less
@@ -1,9 +1,8 @@
@import "../../style/CommonStyle.module.less";
@import "../../style/utils.module.less";
-/* horizontal type */
+/* horizontal */
.horizontal {
- /* normal */
display: flex;
.size(@w: 660px, @h: 236px);
padding: 18px;
@@ -11,8 +10,7 @@
border: solid 1px @COLOR_GRAY02;
background-color: @COLOR_WHITE;
- // left contents (image contetns)
- > div:nth-child(1) {
+ .imageWrap {
position: relative;
.size(@w: 200px, @h: 200px);
margin-right: 20px;
@@ -47,8 +45,7 @@
}
}
- // right contents
- > div:nth-child(2) {
+ .descWrap {
.flex(@direction: column, @justifyCenter: space-between, @alignCenter: flex-start);
flex-grow: 1;
width: 404px;
@@ -88,7 +85,7 @@
}
}
- /* focused */
+ // focused
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius:12px);
@@ -96,9 +93,8 @@
}
}
-/* vertical type (Thumbnail) */
+/* vertical */
.vertical {
- /* normal */
position: relative;
display: flex;
flex-direction: column;
@@ -108,8 +104,7 @@
border: solid 1px @COLOR_GRAY02;
background-color: @COLOR_WHITE;
- // top contents (image contetns)
- > div:nth-child(1) {
+ .imageWrap {
position: relative;
.size(@w: 288px, @h: 288px);
margin-bottom: 6px;
@@ -134,7 +129,7 @@
}
// sold out
- > div:nth-child(3) {
+ > div {
.position(@position: absolute, @top: 0, @right: 0);
.flex();
.size(@w: 288px, @h: 288px);
@@ -144,8 +139,7 @@
}
}
- // bottom contents
- > div:nth-child(2) {
+ .descWrap {
.flex(@direction: column, @alignCenter: flex-start);
flex-grow: 1;
@@ -186,8 +180,8 @@
}
}
- // best seller (TOP mark)
- > div:nth-child(3) {
+ // best seller
+ .bestSeller {
.position(@position: absolute, @top: -1px, @left: 18px);
.flex(@direction: column, @justifyCenter: space-between);
padding: 15px 16px 21px;
@@ -203,7 +197,7 @@
}
}
- /* focused */
+ // focused
&:focus {
&::after {
.focused(@boxShadow: 22px, @borderRadius: 12px);
@@ -218,6 +212,7 @@
/* videoShow */
.videoShow {
+ // horizontal
&.imgHorizontal {
.size(@w: 546px, @h:438px);
padding: 18px;
@@ -240,8 +235,10 @@
}
}
.imageWrap {
+ .size(@w: 100%, @h: 288px);
+
> img {
- .size(@w: 100%, @h: 288px);
+ .size(@w: inherit, @h: inherit);
object-fit: cover;
}
}
@@ -261,6 +258,8 @@
}
}
}
+
+ // vertical
&.imgVertical {
.size(@w: 546px, @h:438px);
padding: 18px;
@@ -270,11 +269,13 @@
font-weight: bold;
position: relative;
display: flex;
+
&:focus {
&::after {
.focused(@boxShadow: 22px, @borderRadius: 12px);
}
}
+
&.nonPosition {
&:focus {
&::after {
@@ -282,10 +283,13 @@
}
}
}
+
.imageWrap {
flex: none;
+ .size(@w: 228px, @h: 402px);
+
> img {
- .size(@w: 228px, @h: 402px);
+ .size(@w: inherit, @h: inherit);
object-fit: cover;
}
}