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-07 17:31:45 +09:00
parent f8f5fd98c3
commit 3597ea576f
10 changed files with 65 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
assets/css/pdp_detail.css
View File

@@ -287,6 +287,18 @@
align-items: center;
flex-direction: row-reverse;
}
.comp_1x_w_v_s_e1 .bottom .contents_area.reverse {
flex-direction: row;
}
.comp_1x_w_v_s_e1 .bottom .contents_area.reverse .text_area {
padding-left: 5rem;
padding-right: 0;
}
@media (max-width: 768px) {
.comp_1x_w_v_s_e1 .bottom .contents_area.reverse .text_area {
padding-left: 0;
}
}
@media (max-width: 768px) {
.comp_1x_w_v_s_e1 .bottom .contents_area {
display: block;
@@ -842,14 +854,14 @@
padding-left: 0;
}
}
.comp_1x_b_h_s_e1 .comp_body:nth-child(even) {
.comp_1x_b_h_s_e1 .comp_body:nth-child(even), .comp_1x_b_h_s_e1 .comp_body.reverse {
flex-direction: row-reverse;
}
.comp_1x_b_h_s_e1 .comp_body:nth-child(even) .text_area {
.comp_1x_b_h_s_e1 .comp_body:nth-child(even) .text_area, .comp_1x_b_h_s_e1 .comp_body.reverse .text_area {
padding-right: 5rem;
}
@media (max-width: 768px) {
.comp_1x_b_h_s_e1 .comp_body:nth-child(even) .text_area {
.comp_1x_b_h_s_e1 .comp_body:nth-child(even) .text_area, .comp_1x_b_h_s_e1 .comp_body.reverse .text_area {
padding-right: 0;
}
}

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

File diff suppressed because one or more lines are too long

16
assets/css/pdp_detail.scss
View File

@@ -301,6 +301,19 @@
align-items: center;
flex-direction: row-reverse;
&.reverse {
flex-direction: row;
.text_area {
padding-left: 5rem;
padding-right: 0;
@media(max-width: 768px) {
padding-left: 0;
}
}
}
@media(max-width: 768px) {
display: block;
}
@@ -916,7 +929,8 @@
}
&:nth-child(even) {
&:nth-child(even),
&.reverse {
flex-direction: row-reverse;
.text_area {

BIN
assets/images/kia/contents/boost01_1.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 66 KiB

BIN
assets/images/kia/contents/boost01_2.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 139 KiB

After

Width:  |  Height:  |  Size: 108 KiB

BIN
assets/images/kia/contents/boost01_3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

31
assets/js/common.js
View File

@@ -718,9 +718,12 @@ function pdpIntro() {
let cookieVal;
$(".editorWarp").addClass("playing");
const youtubeId = $('.youtube-box').data('youtube');
const youtubeFrame = '<iframe src="https://www.youtube.com/embed/'+youtubeId+'?autoplay=1&controls=1&rel=0&showsearch=0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
$('.editorWarp .youtube-box').html(youtubeFrame);
const youtubeId = $(".youtube-box").data("youtube");
const youtubeFrame =
'<iframe src="https://www.youtube.com/embed/' +
youtubeId +
'?autoplay=1&controls=1&rel=0&showsearch=0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-black; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
$(".editorWarp .youtube-box").html(youtubeFrame);
switch (true) {
case $(".displayTheme").length > 0:
@@ -728,17 +731,9 @@ function pdpIntro() {
break;
case $(".inCarGame").length > 0:
cookieVal = "inCarGameIntro";
$(".video_wrap video").attr(
"poster",
"../assets/images/kia/pdp/in_car_game/intro_poster.png"
);
break;
case $(".srsPlus").length > 0:
cookieVal = "srsPlusIntro";
$(".video_wrap video").attr(
"poster",
"../assets/images/kia/pdp/srs_plus/intro_poster.png"
);
break;
}
@@ -746,7 +741,9 @@ function pdpIntro() {
`<span onclick="hideTodayIntroPopup('${cookieVal}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>`
);
$(".btn-intro").css({"display":"flex","opacity":"0", "top":"8rem"}).animate({"opacity":"1", "top":"5rem"},400);
$(".btn-intro")
.css({ display: "flex", opacity: "0", marginTop: "2rem" })
.animate({ opacity: "1", marginTop: "0" }, 400);
if (getCookie(cookieVal)) {
$(".editorWarp").removeClass("playing");
$(".video_wrap").css("display", "none");
@@ -759,7 +756,9 @@ function pdpIntro() {
`<span onclick="deleteCookie('${cookieVal}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>`
);
} else {
$(".video_wrap").css({"display":"flex","opacity":"0"}).animate({"opacity":"1"},200);
$(".video_wrap")
.css({ display: "flex", opacity: "0" })
.animate({ opacity: "1" }, 200);
$(".close-today").html(
`<span onclick="hideTodayIntroPopup('${cookieVal}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>`
);
@@ -774,7 +773,7 @@ function pdpIntro() {
if (getCookie(cookieVal)) {
$(".close-today input").attr("checked", "checked");
}
$('.editorWarp .youtube-box').html(youtubeFrame);
$(".editorWarp .youtube-box").html(youtubeFrame);
$(videoWrap).show();
// if (video) {
// video.currentTime = 0;
@@ -784,10 +783,10 @@ function pdpIntro() {
// .btn-close 버튼 클릭 시 비디오 숨기기
$(document).on("click", ".video_wrap .btn-close", function () {
console.log('btn close 실행');
// console.log("btn close 실행");
$(".editorWarp").removeClass("playing");
$(videoWrap).hide();
$('.editorWarp .youtube-box').empty();
$(".editorWarp .youtube-box").empty();
// if (video) {
// video.currentTime = 0;
// video.pause();

13
info/product-usage-guide-boost.html
View File

@@ -268,21 +268,26 @@
<section class="storeGuideItem" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<header class="case">
<h3 class="titleCase03">차량</h3>
<strong>2 STEP</strong>
<strong>3 STEP</strong>
</header>
<div class="swiper swiper1">
<ul class="swiper-wrapper caseWide">
<li class="swiper-slide">
<img class="noBorder" src="../assets/images/kia/contents/boost01_1.jpg" alt="사양 구매 후, 게임 카드에 재진입. 홈 화면 > 메뉴 > 게임">
<img class="noBorder" src="../assets/images/kia/contents/boost01_1.jpg" alt="설정 > 화면구성>클러스터 테마 선택을 선택하고, ‘드라이브 모드’를 선택">
<b>STEP 01</b>
<p class="caseBlack txtCase01">설정 > 화면구성>클러스터  테마 선택을 선택하고, ‘드라이브 모드’를 선택합니다.</p>
<p class="caseBlack txtCase01">설정 > 화면구성>클러스터 테마 선택을 선택하고, ‘드라이브 모드’를 선택합니다.</p>
</li>
<li class="swiper-slide">
<img class="noBorder" src="../assets/images/kia/contents/boost01_2.jpg" alt="게임에 대한 설명을 참고한 후 게임을 실행">
<img class="noBorder" src="../assets/images/kia/contents/boost01_2.jpg" alt="‘SPORT’모드로 드라이브 모드를 변경">
<b>STEP 02</b>
<p class="caseBlack txtCase01">‘SPORT’모드로 드라이브 모드를 변경합니다.</p>
</li>
<li class="swiper-slide">
<img class="noBorder" src="../assets/images/kia/contents/boost01_3.jpg" alt="또는 설정 > 화면구성>클러스터 테마 선택을 선택하고, ‘스타일 C’를 선택">
<b>STEP 03</b>
<p class="caseBlack txtCase01">또는 설정 > 화면구성>클러스터 테마 선택을 선택하고, ‘스타일 C’를 선택합니다.</p>
</li>
</ul>
<div class="swiper-scrollbar"></div>
<div class="swiper-scrollbar-after-space"></div>

26
product/pdp_boost.html
View File

@@ -33,8 +33,8 @@
<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?v1"></script>
<!--상품상세 페이지 css 분리-->
<link rel="stylesheet" charset="UTF-8" href="/kr/assets/css/product.css?v1" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="/kr/assets/css/pdp_detail.css?v1" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v1" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v1" 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">
@@ -404,7 +404,8 @@
부스트의 폭발적인 속도감과 성능이 즐거운 드라이빙 경험을 선사합니다. 언제 어디서나 짜릿한 드라이빙 퍼포먼스를 만나보세요!
</p>
</div>
<div class="contents_area">
<div class="contents_area reverse">
<div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<img src="../assets/images/kia/pdp/boost/boost_contents_02.png" alt="주행 중 운전석 장면">
</div>
@@ -417,12 +418,13 @@
</p>
</div>
</div>
</div>
</div>
</div>
<div class="comp_wide comp_1x_b_h_s_e1">
<div class="comp_body">
<div class="comp_body reverse">
<div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<img src="../assets/images/kia/pdp/boost/boost_contents_03.png" alt="차량 주행 이미지">
</div>
@@ -435,19 +437,6 @@
</p>
</div>
</div>
<div class="comp_body">
<div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<img src="../assets/images/kia/pdp/boost/boost_contents_04.png" alt="차량 주행 이미지">
</div>
<div class="text_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<h4>
제로백 5.3초
</h4>
<p>
0-100 km/h 도달 시간이 6.0초에서 5.3초로 감축되어 극명한 차이를 느낄 수 있습니다
</p>
</div>
</div>
</div>
<div class="comp_wide comp_1x_w_v_s_e2">
@@ -708,6 +697,9 @@
</div>
</div>
<!--//footer-->
<script>
AOS.init();
</script>
</body>
</html>

2
product/pdp_srs_plus.html
View File

@@ -345,7 +345,7 @@
</div>
<div class="comp_md layer_up"></div>
<div class="comp_md layer_up video_wrap">
<div class="comp_md layer_up video_wrap" style="background: rgba(0,0,0,0.85);">
<div class="video-area">
<div class="video">
<div class="youtube-box" data-youtube="QTNIYFnfw_I"></div>