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; } }