[영상 노출에 따른 부분 수정]
- 영상 상하 블랙라인 관련 하여 스타일 수정 - discimir부분 노출관련하여 처리.
This commit is contained in:
@@ -5,11 +5,10 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
width: 1114px; // ProductDetail과 동일한 고정 크기
|
width: 1114px; // ProductDetail과 동일한 고정 크기
|
||||||
max-width: 1114px;
|
max-width: 1114px;
|
||||||
height: 740px; // ProductDetail과 동일한 고정 높이
|
height: 632px !important; // ProductDetail과 동일한 고정 높이
|
||||||
margin-bottom: 30px; // ProductDetail과 동일한 간격
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: rgba(0, 0, 0, 1);
|
background-color: rgba(0, 0, 0, 1);
|
||||||
border-radius: 12px;
|
border-radius: 12px 12px 0 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 6px; // 포커스 테두리를 위한 공간
|
padding: 6px; // 포커스 테두리를 위한 공간
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -80,7 +79,7 @@
|
|||||||
z-index: 23; // MediaPanel(z-index: 22)보다 위에 표시되어야 비디오 재생 중에도 포커스 테두리가 보임
|
z-index: 23; // MediaPanel(z-index: 22)보다 위에 표시되어야 비디오 재생 중에도 포커스 테두리가 보임
|
||||||
border: 6px solid @PRIMARY_COLOR_RED;
|
border: 6px solid @PRIMARY_COLOR_RED;
|
||||||
box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
|
box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
|
||||||
border-radius: 12px;
|
border-radius: 12px 12px 0px 0px;
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -217,30 +216,28 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.notice {
|
.notice {
|
||||||
|
width: calc(100% - 10px);
|
||||||
|
height: 54px;
|
||||||
|
background: #000000;
|
||||||
|
.flex(@justifyCenter:flex-start);
|
||||||
|
padding: 6px 18px 18px 18px;
|
||||||
|
border-radius: 0 0 12px 12px;
|
||||||
|
margin-bottom: 30px; // ProductDetail과 동일한 간격
|
||||||
|
.marquee {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 54px;
|
height: 100%;
|
||||||
background: #000000;
|
}
|
||||||
.flex(@justifyCenter:flex-start);
|
img {
|
||||||
padding: 6px 18px 18px 18px;
|
width: 18px;
|
||||||
position: absolute;
|
height: 18px;
|
||||||
bottom: 0;
|
margin: 10px 12px 0 0;
|
||||||
border-radius: 0 0 12px 12px;
|
object-fit: contain;
|
||||||
|
}
|
||||||
.marquee {
|
span {
|
||||||
width: 100%;
|
line-height: normal;
|
||||||
height: 100%;
|
letter-spacing: normal;
|
||||||
}
|
text-align: left;
|
||||||
img {
|
.font(@fontFamily:@baseFont, @fontSize:20px);
|
||||||
width: 18px;
|
color: @COLOR_GRAY04;
|
||||||
height: 18px;
|
}
|
||||||
margin: 10px 12px 0 0;
|
}
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
line-height: normal;
|
|
||||||
letter-spacing: normal;
|
|
||||||
text-align: left;
|
|
||||||
.font(@fontFamily:@baseFont, @fontSize:20px);
|
|
||||||
color: @COLOR_GRAY04;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -311,6 +311,7 @@ export default function ProductVideo({
|
|||||||
if (!canPlayVideo) return null;
|
if (!canPlayVideo) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
<SpottableComponent
|
<SpottableComponent
|
||||||
className={css.videoContainer}
|
className={css.videoContainer}
|
||||||
onClick={handleVideoClick}
|
onClick={handleVideoClick}
|
||||||
@@ -330,12 +331,13 @@ export default function ProductVideo({
|
|||||||
<img src={playImg} alt="재생" />
|
<img src={playImg} alt="재생" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={css.notice}>
|
|
||||||
<Marquee className={css.marquee} marqueeOn="render">
|
|
||||||
<img src={ic_warning} alt={disclaimer} />
|
|
||||||
<span>{disclaimer}</span>
|
|
||||||
</Marquee>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
</SpottableComponent>
|
||||||
|
<div className={css.notice}>
|
||||||
|
<Marquee className={css.marquee} marqueeOn="render">
|
||||||
|
<img src={ic_warning} alt={disclaimer} />
|
||||||
|
<span>{disclaimer}</span>
|
||||||
|
</Marquee>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user