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

[영상노출 관련 스타일 수정]

Browse Source 
- 영상재생시에 하단에 노출되는 livechannel부분에 qvc는 border-radius 0으로 작업.
This commit is contained in:
junghoon86.park
2025-12-15 09:52:31 +09:00
parent e97172fad5
commit 1305158113
2 changed files with 32 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx
View File

@@ -106,7 +106,10 @@ export default memo(function PlayerItemCard({
} }
}, [onFocus]); }, [onFocus]);
const progressStyle = useMemo(() => ({ width: `${percentGauge}%` }), [percentGauge]); const progressStyle = useMemo(
() => ({ width: `${percentGauge}%` }),
[percentGauge]
);
const ariaLabel = 'Selected, ' + patnerName + ' ' + productName(); const ariaLabel = 'Selected, ' + patnerName + ' ' + productName();
const css = version === 2 ? css2 : css1; const css = version === 2 ? css2 : css1;
@@ -121,13 +124,17 @@ export default memo(function PlayerItemCard({
onBlur={_onBlur} onBlur={_onBlur}
onClick={_onClick} onClick={_onClick}
onFocus={_onFocus} onFocus={_onFocus}
spotlightId={productId ? 'spotlightId-' + removeDotAndColon(productId) : spotlightId} spotlightId={
productId ? 'spotlightId-' + removeDotAndColon(productId) : spotlightId
}
aria-label={ariaLabel} aria-label={ariaLabel}
{...rest} {...rest}
> >
<div className={css.imageWrap}> <div className={css.imageWrap}>
<CustomImage alt={imageAlt} delay={0} src={imageSource} /> <CustomImage alt={imageAlt} delay={0} src={imageSource} />
{soldoutFlag && soldoutFlag === 'Y' && <div>{$L(STRING_CONF.SOLD_OUT)}</div>} {soldoutFlag && soldoutFlag === 'Y' && (
<div>{$L(STRING_CONF.SOLD_OUT)}</div>
)}
{currentVideoVisible && ( {currentVideoVisible && (
<div className={css.nowPlay}> <div className={css.nowPlay}>
<h3>{$L('Now Playing')}</h3> <h3>{$L('Now Playing')}</h3>
@@ -136,7 +143,14 @@ export default memo(function PlayerItemCard({
</div> </div>
<div className={css.descWrap}> <div className={css.descWrap}>
<div className={css.patnerWrap}> <div className={css.patnerWrap}>
<CustomImage className={css.logo} src={logo} fallbackSrc={defaultLogoImg} /> <CustomImage
className={classNames(
css.logo,
(patnerName === 'QVC' || patnerName === 'qvc') && css.qvcLogo
)}
src={logo}
fallbackSrc={defaultLogoImg}
/>
<h3 className={css.brandName}>{patnerName}</h3> <h3 className={css.brandName}>{patnerName}</h3>
</div> </div>

25
com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.v2.module.less
View File

@@ -1,5 +1,5 @@
@import "../../../style/CommonStyle.module.less"; @import '../../../style/CommonStyle.module.less';
@import "../../../style/utils.module.less"; @import '../../../style/utils.module.less';
/* liveHorizontal */ /* liveHorizontal */
.liveHorizontal { .liveHorizontal {
@@ -86,10 +86,13 @@
max-width: 80%; max-width: 80%;
max-height: 80%; max-height: 80%;
object-fit: contain; object-fit: contain;
&.qvcLogo {
border-radius: 0;
}
} }
.brandName { .brandName {
color: #EAEAEA; color: #eaeaea;
font-size: 24px; font-size: 24px;
font-family: @baseFont; font-family: @baseFont;
font-weight: 700; font-weight: 700;
@@ -100,7 +103,7 @@
.title { .title {
width: 100%; width: 100%;
color: #EAEAEA; color: #eaeaea;
font-size: 24px; font-size: 24px;
font-family: @baseFont; font-family: @baseFont;
font-weight: 400; font-weight: 400;
@@ -124,16 +127,16 @@
// track 역할 // track 역할
&::before { &::before {
content: ""; content: '';
.size(@w: 100%, @h: 5px); .size(@w: 100%, @h: 5px);
.position(@position: absolute, @top: 0, @left: 0); .position(@position: absolute, @top: 0, @left: 0);
background: #D4D4D4; background: #d4d4d4;
} }
.gauge { .gauge {
height: 5px; height: 5px;
.position(@position: absolute, @top: 0, @left: 0); .position(@position: absolute, @top: 0, @left: 0);
background: #7D848C; background: #7d848c;
transition: width 0.3s ease; transition: width 0.3s ease;
&.focused { &.focused {
@@ -158,7 +161,7 @@
border-color: @PRIMARY_COLOR_RED; border-color: @PRIMARY_COLOR_RED;
&::after { &::after {
content: ""; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@@ -259,7 +262,7 @@
} }
.brandName { .brandName {
color: #EAEAEA; color: #eaeaea;
font-size: 24px; font-size: 24px;
font-family: @baseFont; font-family: @baseFont;
font-weight: 700; font-weight: 700;
@@ -270,7 +273,7 @@
.title { .title {
width: 100%; width: 100%;
color: #EAEAEA; color: #eaeaea;
font-size: 24px; font-size: 24px;
font-family: @baseFont; font-family: @baseFont;
font-weight: 400; font-weight: 400;
@@ -289,7 +292,7 @@
border-color: @PRIMARY_COLOR_RED; border-color: @PRIMARY_COLOR_RED;
&::after { &::after {
content: ""; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;