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

[TItemCard] videoshow 부분 이미지 가로형 세로형 관련 추가.

Browse Source 
- TItemCard imgType 추가.
 - getTop20Show topinfos 값중 vtctpYn값이 Y가 아닐시 가로형 이미지.
This commit is contained in:
junghoon86.park
2024-03-05 11:29:31 +09:00
parent ac0714c11f
commit d5f4dc30f2
3 changed files with 95 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less
View File

@@ -186,43 +186,89 @@
/* videoShow */
.videoShow {
.size(@w: 546px, @h:438px);
padding: 14px;
background-color: @COLOR_WHITE;
border-radius: 12px;
.border-solid(@size:1px,@color:@COLOR_GRAY02);
font-family: @baseFontBold;
position: relative;
&.imgHorizontal {
.size(@w: 546px, @h:438px);
padding: 18px;
background-color: @COLOR_WHITE;
border-radius: 12px;
.border-solid(@size:1px,@color:@COLOR_GRAY02);
font-family: @baseFontBold;
position: relative;
&:focus {
&::after {
.focused(@boxShadow: 22px, @borderRadius: 12px);
}
}
&.nonPosition {
&:focus {
&::after {
.focused(@boxShadow: 22px, @borderRadius: 12px);
}
}
}
.imageWrap {
> img {
.size(@w: 100%, @h: 288px);
object-fit: cover;
&.nonPosition {
&:focus {
&::after {
.focused(@boxShadow: 22px, @borderRadius: 12px);
}
}
}
.imageWrap {
> img {
.size(@w: 100%, @h: 288px);
object-fit: cover;
}
}
.descWrap {
margin-top: 38px;
color: @COLOR_GRAY06;
font-size: 24px;
.size(@w: 510px, @h: 61px);
display: flex;
.title {
width: calc(100% - 72px);
.elip(@clamp: 2);
}
}
}
.descWrap {
margin-top: 38px;
color: @COLOR_GRAY06;
font-size: 24px;
.size(@w: 510px, @h: 61px);
&.imgVertical {
.size(@w: 546px, @h:438px);
padding: 18px;
background-color: @COLOR_WHITE;
border-radius: 12px;
.border-solid(@size:1px,@color:@COLOR_GRAY02);
font-family: @baseFontBold;
position: relative;
display: flex;
&:focus {
&::after {
.focused(@boxShadow: 22px, @borderRadius: 12px);
}
}
&.nonPosition {
&:focus {
&::after {
.focused(@boxShadow: 22px, @borderRadius: 12px);
}
}
}
.imageWrap {
flex: none;
> img {
.size(@w: 228px, @h: 402px);
object-fit: cover;
}
}
.title {
width: calc(100% - 72px);
.elip(@clamp: 2);
.descWrap {
flex: none;
color: @COLOR_GRAY06;
font-size: 24px;
.size(@w: 510px, @h: 61px);
display: flex;
.title {
margin-left: 11px;
width: 270px;
height: 402px;
.elip(@clamp: 12);
}
}
}
}