gil/fod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

인트로 사운드 버튼, 아케이드게임 레이아웃 수정 완료

Browse Source
This commit is contained in:
hyeonggil
2024-08-05 11:54:16 +09:00
parent 206836b8c7
commit d693f7e152
17 changed files with 114 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
assets/css/pdp_detail.css
View File

@@ -2312,6 +2312,7 @@
@media (max-width: 768px) {
.inCarGame.comp_1x_w_v_o_b .image_area {
overflow: hidden;
height: auto;
}
}
.inCarGame .comp_top.title-area {
@@ -2355,6 +2356,12 @@
border-radius: 0;
background-color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 768px) {
.inCarGame .visualBg.swiper .swiper-pagination .swiper-pagination-bullet {
width: 3rem;
height: 0.3rem;
}
}
.inCarGame .visualBg.swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: rgb(255, 255, 255);
}
@@ -2995,7 +3002,7 @@
}
}
.editorWarp .video_wrap {
display: flex;
display: none;
align-items: center;
justify-content: center;
position: absolute;
@@ -3035,26 +3042,20 @@
height: 100%;
width: 100%;
}
.editorWarp .video_wrap .video-area .video .video-ctrl {
display: flex;
align-items: center;
justify-content: center;
.editorWarp .video_wrap .video-area .video .btn-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
gap: 4rem;
}
.editorWarp .video_wrap .video-area .video .btn-play {
width: 8rem;
height: 8rem;
background: url(../images/kia/contents/ico_play.png) no-repeat center/100% auto;
background: url(../images/kia/contents/ico_play.png?v1) no-repeat center/100% auto;
text-indent: -9999em;
cursor: pointer;
}
.editorWarp .video_wrap .video-area .video .btn-play.pause {
display: none;
background: url(../images/kia/contents/ico_pause.png) no-repeat center/100% auto;
background: url(../images/kia/contents/ico_pause.png?v1) no-repeat center/100% auto;
}
.editorWarp .video_wrap .video-area .video .btn-play.play {
display: block;
@@ -3067,22 +3068,27 @@
}
.editorWarp .video_wrap .video-area .video .btn-sound {
display: none;
width: 8rem;
height: 8rem;
background: url(../images/kia/contents/ico_sound_off.png) no-repeat center/100% auto;
position: absolute;
bottom: 3rem;
right: 3rem;
width: 4rem;
height: 4rem;
background: url(../images/kia/contents/ico_sound_off.png?v1) no-repeat center/100% auto;
text-indent: -9999em;
cursor: pointer;
}
.editorWarp .video_wrap .video-area .video .btn-sound.off {
background: url(../images/kia/contents/ico_sound_off.png) no-repeat center/100% auto;
background: url(../images/kia/contents/ico_sound_off.png?v1) no-repeat center/100% auto;
}
.editorWarp .video_wrap .video-area .video .btn-sound.on {
background: url(../images/kia/contents/ico_sound_on.png) no-repeat center/100% auto;
background: url(../images/kia/contents/ico_sound_on.png?v1) no-repeat center/100% auto;
}
@media (max-width: 501px) {
.editorWarp .video_wrap .video-area .video .btn-sound {
width: 4rem;
height: 4rem;
bottom: 1.5rem;
right: 1.5rem;
width: 2rem;
height: 2rem;
}
}
@media (max-width: 768px) {
@@ -3149,22 +3155,17 @@
.editorWarp .video_wrap .btn-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.editorWarp .video_wrap.played .video:hover .video-ctrl {
display: flex;
.editorWarp .video_wrap.played .video .btn-sound {
display: block;
}
.editorWarp .video_wrap.played .video:hover .video-ctrl .btn-play,
.editorWarp .video_wrap.played .video:hover .video-ctrl .btn-sound {
.editorWarp .video_wrap.played .video:hover .video-ctrl .btn-play {
display: block;
}
.editorWarp .video_wrap.paused .btn-play,
.editorWarp .video_wrap.paused .btn-sound {
display: block !important;
}
.editorWarp .video_wrap.paused .video:hover .video-ctrl {
display: flex;
}
.editorWarp .video_wrap.paused .video:hover .video-ctrl .btn-play,
.editorWarp .video_wrap.paused .video:hover .video-ctrl .btn-sound {
.editorWarp .video_wrap.paused .video:hover .video-ctrl .btn-play {
display: block;
}
@media (max-width: 768px) {
@@ -3232,7 +3233,7 @@
}
}
.editorWarp .btn-intro {
display: flex;
display: none;
align-items: center;
position: absolute;
top: 5rem;
@@ -3302,14 +3303,16 @@
max-width: 92%;
}
}
.editorWarp .visualBg .swiper-button-next, .editorWarp .visualBg .swiper-button-prev {
.editorWarp .visualBg .swiper-button-next,
.editorWarp .visualBg .swiper-button-prev {
position: static;
width: 1.8rem;
height: 3.6rem;
margin: 0;
background: url(../images/common/ico_arrow_r.png) no-repeat center/contain;
}
.editorWarp .visualBg .swiper-button-next:after, .editorWarp .visualBg .swiper-button-prev:after {
.editorWarp .visualBg .swiper-button-next:after,
.editorWarp .visualBg .swiper-button-prev:after {
display: none;
}
.editorWarp .visualBg .swiper-button-prev {

2
assets/css/pdp_detail.css.map
View File

File diff suppressed because one or more lines are too long

97
assets/css/pdp_detail.scss
View File

@@ -2604,7 +2604,7 @@
.image_area {
@include maxtablet {
overflow: hidden;
// height: 80rem;
height: auto;
}
}
}
@@ -2644,15 +2644,22 @@
&.swiper {
position: relative;
.swiper-pagination {
bottom:3rem;
bottom: 3rem;
.swiper-pagination-bullet {
opacity: 1;
width: 5.6rem;
height: .4rem;
border-radius: 0;
background-color: rgba(255, 255, 255, 0.5);
@include maxtablet {
width: 3rem;
height: .3rem;
}
&.swiper-pagination-bullet-active {
background-color: rgba(255, 255, 255, 1);
}
@@ -2994,7 +3001,7 @@
}
&.comp_wide.comp_2x_b_h_s_e2 {
margin-top:20rem;
margin-top: 20rem;
@include maxtablet {
margin-top: 10rem;
@@ -3421,7 +3428,7 @@
}
.video_wrap {
display: flex;
display: none;
align-items: center;
justify-content: center;
position: absolute;
@@ -3466,27 +3473,31 @@
}
}
.video-ctrl {
display: flex;
align-items: center;
justify-content: center;
// .video-ctrl {
// display: flex;
// align-items: center;
// justify-content: center;
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// gap: 4rem;
// }
.btn-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
gap: 4rem;
}
.btn-play {
width: 8rem;
height: 8rem;
background: url(../images/kia/contents/ico_play.png) no-repeat center / 100% auto;
background: url(../images/kia/contents/ico_play.png?v1) no-repeat center / 100% auto;
text-indent: -9999em;
cursor: pointer;
&.pause {
display: none;
background: url(../images/kia/contents/ico_pause.png) no-repeat center / 100% auto;
background: url(../images/kia/contents/ico_pause.png?v1) no-repeat center / 100% auto;
}
&.play {
@@ -3502,23 +3513,28 @@
.btn-sound {
display: none;
width: 8rem;
height: 8rem;
background: url(../images/kia/contents/ico_sound_off.png) no-repeat center / 100% auto;
position: absolute;
bottom: 3rem;
right: 3rem;
width: 4rem;
height: 4rem;
background: url(../images/kia/contents/ico_sound_off.png?v1) no-repeat center / 100% auto;
text-indent: -9999em;
cursor: pointer;
&.off {
background: url(../images/kia/contents/ico_sound_off.png) no-repeat center / 100% auto;
background: url(../images/kia/contents/ico_sound_off.png?v1) no-repeat center / 100% auto;
}
&.on {
background: url(../images/kia/contents/ico_sound_on.png) no-repeat center / 100% auto;
background: url(../images/kia/contents/ico_sound_on.png?v1) no-repeat center / 100% auto;
}
@include maxmobile {
width: 4rem;
height: 4rem;
bottom: 1.5rem;
right: 1.5rem;
width: 2rem;
height: 2rem;
}
}
@@ -3597,12 +3613,14 @@
&.played {
.video {
.btn-sound {
display: block;
}
&:hover {
.video-ctrl {
display: flex;
.btn-play,
.btn-sound {
.btn-play {
display: block;
}
}
@@ -3616,13 +3634,12 @@
.btn-sound {
display: block !important;
}
.video {
&:hover {
.video-ctrl {
display: flex;
.btn-play,
.btn-sound {
.btn-play {
display: block;
}
}
@@ -3715,7 +3732,7 @@
.btn-intro {
display: flex;
display: none;
align-items: center;
position: absolute;
top: 5rem;
@@ -3788,28 +3805,34 @@
display: flex;
justify-content: space-between;
position: absolute;
top:50%;
top: 50%;
left: 50%;
z-index: 10;
width: 100%;
max-width: 140rem;
height: 0;
transform: translate(-50%, -50%);
@include maxmobile {
max-width: 92%;
}
}
.swiper-button-next, .swiper-button-prev {
.swiper-button-next,
.swiper-button-prev {
position: static;
width:1.8rem;
width: 1.8rem;
height: 3.6rem;
margin: 0;
background: url(../images/common/ico_arrow_r.png) no-repeat center / contain;
&:after {display: none;}
&:after {
display: none;
}
}
.swiper-button-prev {
background: url(../images/common/ico_arrow_l.png) no-repeat center / contain;
}
}
}
}

BIN
assets/images/kia/contents/ico_pause.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
assets/images/kia/contents/ico_play.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
assets/images/kia/contents/ico_sound_off.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
assets/images/kia/contents/ico_sound_on.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
assets/images/kia/pdp/in_car_game/visual_screen1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 688 KiB

BIN
assets/images/kia/pdp/in_car_game/visual_screen1_m.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 436 KiB

BIN
assets/images/kia/pdp/in_car_game/visual_screen2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 960 KiB

BIN
assets/images/kia/pdp/in_car_game/visual_screen2_m.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 571 KiB

BIN
assets/images/kia/pdp/in_car_game/visual_screen3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 817 KiB

BIN
assets/images/kia/pdp/in_car_game/visual_screen3_m.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 761 KiB

8
assets/js/common.js
View File

@@ -745,17 +745,21 @@ function pdpIntro() {
$(".close-today").html(
`<span onclick="hideTodayIntroPopup('${cookieVal}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>`
);
$(".btn-intro").css("display", "flex");
if (getCookie(cookieVal)) {
$(".editorWarp").removeClass("playing");
$(".video_wrap").css("display", "none");
$(".close-today input").attr("checked", "checked");
videoElements[0].pause();
videoElements[0].currentTime = 0;
$(".video_wrap").hide();
$(".close-today").html(
`<span onclick="deleteCookie('${cookieVal}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>`
);
} else {
$(".video_wrap").css("display", "flex");
$(".close-today").html(
`<span onclick="hideTodayIntroPopup('${cookieVal}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>`
);
@@ -1156,7 +1160,7 @@ function getCookie(name) {
function deleteCookie(name) {
document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
$(".close-today input").prop("checked", false);
$(".close-today").html(
`<span onclick="hideTodayIntroPopup('${name}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>`
);

4
product/pdp_display_theme_0429.html
View File

@@ -31,10 +31,10 @@
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/jquery-ui.min.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/swiper.min.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/aos.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v111452"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v1811452"></script>
<!--상품상세 페이지 css 분리-->
<link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v1.2" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v1552" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v81552" type="text/css" />
<link rel="shortcut icon" href="../assets/images/kia/home_icon.png" />
<link rel="apple-touch-icon-precomposed" href="../assets/images/kia/home_icon.png" />
<link rel="shortcut icon" href="../assets/images/kia/favicon-16x16.png">

22
product/pdp_in_car_game.html
View File

@@ -31,10 +31,10 @@
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/jquery-ui.min.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/swiper.min.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/aos.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v242442"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v1271242442"></script>
<!--상품상세 페이지 css 분리-->
<link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v1.2" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v244242" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v7121244242" type="text/css" />
<link rel="shortcut icon" href="../assets/images/kia/home_icon.png" />
<link rel="apple-touch-icon-precomposed" href="../assets/images/kia/home_icon.png" />
<link rel="shortcut icon" href="../assets/images/kia/favicon-16x16.png">
@@ -341,20 +341,20 @@
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="image_area">
<img src="../assets/images/kia/pdp/in_car_game/theme1_screen.jpg" class="web" alt="디스플레이 테마 이미지">
<img src="../assets/images/kia/pdp/in_car_game/theme1_screen_m.jpg" class="mobile" alt="디스플레이 테마 이미지">
<img src="../assets/images/kia/pdp/in_car_game/visual_screen1.jpg" class="web" alt="아케이드 게임 이미지">
<img src="../assets/images/kia/pdp/in_car_game/visual_screen1_m.jpg" class="mobile" alt="아케이드 게임 이미지">
</div>
</div>
<div class="swiper-slide">
<div class="image_area">
<img src="../assets/images/kia/pdp/in_car_game/theme1_screen.jpg" class="web" alt="디스플레이 테마 이미지">
<img src="../assets/images/kia/pdp/in_car_game/theme1_screen_m.jpg" class="mobile" alt="디스플레이 테마 이미지">
<div class="image_area">
<img src="../assets/images/kia/pdp/in_car_game/visual_screen2.jpg" class="web" alt="아케이드 게임 이미지">
<img src="../assets/images/kia/pdp/in_car_game/visual_screen2_m.jpg" class="mobile" alt="아케이드 게임 이미지">
</div>
</div>
<div class="swiper-slide">
<div class="image_area">
<img src="../assets/images/kia/pdp/in_car_game/theme1_screen.jpg" class="web" alt="디스플레이 테마 이미지">
<img src="../assets/images/kia/pdp/in_car_game/theme1_screen_m.jpg" class="mobile" alt="디스플레이 테마 이미지">
<div class="image_area">
<img src="../assets/images/kia/pdp/in_car_game/visual_screen3.jpg" class="web" alt="아케이드 게임 이미지">
<img src="../assets/images/kia/pdp/in_car_game/visual_screen3_m.jpg" class="mobile" alt="아케이드 게임 이미지">
</div>
</div>
</div>
@@ -378,7 +378,7 @@
</div>
</div>
</div>
<div class="btn-intro">
<div class="btn-intro" style="color:#fff;">
Intro영상 다시보기
</div>
</div>

4
product/pdp_srs_plus.html
View File

@@ -31,10 +31,10 @@
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/jquery-ui.min.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/swiper.min.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/aos.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v11252532"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v117252532"></script>
<!--상품상세 페이지 css 분리-->
<link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v1.2" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v15122552" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v175122552" type="text/css" />
<link rel="shortcut icon" href="../assets/images/kia/home_icon.png" />
<link rel="apple-touch-icon-precomposed" href="../assets/images/kia/home_icon.png" />
<link rel="shortcut icon" href="../assets/images/kia/favicon-16x16.png">