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]);
const progressStyle = useMemo(() => ({ width: `${percentGauge}%` }), [percentGauge]);
const progressStyle = useMemo(
() => ({ width: `${percentGauge}%` }),
[percentGauge]
);
const ariaLabel = 'Selected, ' + patnerName + ' ' + productName();
const css = version === 2 ? css2 : css1;
@@ -121,13 +124,17 @@ export default memo(function PlayerItemCard({
onBlur={_onBlur}
onClick={_onClick}
onFocus={_onFocus}
spotlightId={productId ? 'spotlightId-' + removeDotAndColon(productId) : spotlightId}
spotlightId={
productId ? 'spotlightId-' + removeDotAndColon(productId) : spotlightId
}
aria-label={ariaLabel}
{...rest}
>
<div className={css.imageWrap}>
<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 && (
<div className={css.nowPlay}>
<h3>{$L('Now Playing')}</h3>
@@ -136,7 +143,14 @@ export default memo(function PlayerItemCard({
</div>
<div className={css.descWrap}>
<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>
</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/utils.module.less";
@import '../../../style/CommonStyle.module.less';
@import '../../../style/utils.module.less';
/* liveHorizontal */
.liveHorizontal {
@@ -86,10 +86,13 @@
max-width: 80%;
max-height: 80%;
object-fit: contain;
&.qvcLogo {
border-radius: 0;
}
}
.brandName {
color: #EAEAEA;
color: #eaeaea;
font-size: 24px;
font-family: @baseFont;
font-weight: 700;
@@ -100,7 +103,7 @@
.title {
width: 100%;
color: #EAEAEA;
color: #eaeaea;
font-size: 24px;
font-family: @baseFont;
font-weight: 400;
@@ -124,16 +127,16 @@
// track 역할
&::before {
content: "";
content: '';
.size(@w: 100%, @h: 5px);
.position(@position: absolute, @top: 0, @left: 0);
background: #D4D4D4;
background: #d4d4d4;
}
.gauge {
height: 5px;
.position(@position: absolute, @top: 0, @left: 0);
background: #7D848C;
background: #7d848c;
transition: width 0.3s ease;
&.focused {
@@ -158,7 +161,7 @@
border-color: @PRIMARY_COLOR_RED;
&::after {
content: "";
content: '';
position: absolute;
top: 0;
left: 0;
@@ -259,7 +262,7 @@
}
.brandName {
color: #EAEAEA;
color: #eaeaea;
font-size: 24px;
font-family: @baseFont;
font-weight: 700;
@@ -270,7 +273,7 @@
.title {
width: 100%;
color: #EAEAEA;
color: #eaeaea;
font-size: 24px;
font-family: @baseFont;
font-weight: 400;
@@ -289,7 +292,7 @@
border-color: @PRIMARY_COLOR_RED;
&::after {
content: "";
content: '';
position: absolute;
top: 0;
left: 0;