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