pdp/사양안내 업로드

This commit is contained in:
hyeonggil
2024-06-19 17:56:18 +09:00
parent 6f7e860912
commit f21d830235
22 changed files with 248 additions and 48 deletions

View File

@@ -1940,6 +1940,12 @@
width: 100%;
max-width: 192rem;
}
@media (max-width: 768px) {
.displayTheme .visualBg {
overflow: hidden;
height: 143vw;
}
}
.displayTheme .visualBg img {
width: 100%;
}
@@ -2255,6 +2261,18 @@
font-size: 2rem;
}
}
.displayTheme.welcome-goodbye {
margin-top: 8rem;
}
.displayTheme.welcome-goodbye .comp_body + .comp_body {
margin-top: 10rem;
}
.displayTheme.welcome-goodbye .comp_body .text_area {
margin-bottom: 2rem;
}
.displayTheme.welcome-goodbye .comp_body video {
width: 100%;
}
.displayThemeDtl .swiper-navigation > * {
top: 210px;
@@ -2275,9 +2293,9 @@
.displayThemeDtl .swiper-pagination {
top: 46.4rem;
}
@media (max-width: 768px) {
@media (max-width: 1200px) {
.displayThemeDtl .swiper-pagination {
top: 13.4rem;
top: 36.4vw;
}
}
.displayThemeDtl .swiper-pagination .swiper-pagination-bullet {
@@ -2550,6 +2568,11 @@
border-radius: 0.8rem;
overflow: hidden;
}
@media (max-width: 768px) {
.inCarGame + .comp_1x_b_v_s_b .image_area video {
width: 100%;
}
}
@media (max-width: 768px) {
.inCarGame + .comp_1x_b_v_s_b {
margin-top: 4rem;
@@ -2617,22 +2640,56 @@
margin-top: 0.7rem;
}
.inCarGame .inCarGameDtlThumb .swiper-slide {
overflow: hidden;
position: relative;
height: 14.85rem;
border-radius: 0.8rem;
cursor: pointer;
}
@media (max-width: 768px) {
.inCarGame .inCarGameDtlThumb .swiper-slide {
height: 4.5rem;
}
}
.inCarGame .inCarGameDtlThumb .swiper-slide.video-slideThumb:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
transform: translate(-50%, -50%);
width: 60px;
height: 61px;
background: url(../images/kia/pdp/in_car_game/btn_play.png) no-repeat center/contain;
}
@media (max-width: 768px) {
.inCarGame .inCarGameDtlThumb .swiper-slide.video-slideThumb:before {
width: 30px;
height: 31px;
opacity: 0.75;
}
}
.inCarGame .inCarGameDtlThumb .swiper-slide img {
display: block;
max-width: 100%;
border-radius: 0.8rem;
overflow: hidden;
}
.inCarGame .inCarGameDtlThumb .swiper-slide video {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
width: 100%;
}
.inCarGame .inCarGameDtlThumb .swiper-slide:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 3;
width: 100%;
height: 100%;
border-radius: 0.8rem;

File diff suppressed because one or more lines are too long

View File

@@ -1843,6 +1843,10 @@
position: absolute;
width: 100%;
max-width: 192rem;
@include maxtablet{
overflow: hidden;
height: 143vw;
}
img {
width: 100%;
&.mobile {display: none;}
@@ -2156,6 +2160,21 @@
font-size: 2rem;
}
}
&.welcome-goodbye {
margin-top:8rem;
.comp_body {
&+.comp_body {
margin-top: 10rem;
}
.text_area {
margin-bottom:2rem;
}
video {
width: 100%;
}
}
}
}
.displayThemeDtl {
@@ -2181,8 +2200,12 @@
.swiper-pagination {
top:46.4rem;
// top:36.4vw;
@media(max-width: 1200px){
top:36.4vw;
}
@include maxtablet{
top: 13.4rem;
// top: 14.4rem;
}
.swiper-pagination-bullet {
opacity: 1;
@@ -2468,6 +2491,11 @@
border-radius: 0.8rem;
overflow: hidden;
}
@include maxtablet{
video {
width: 100%;
}
}
}
@include maxtablet{
margin-top:4rem;
@@ -2502,21 +2530,53 @@
.inCarGameDtlThumb {
margin-top: .7rem;
.swiper-slide {
overflow: hidden;
position: relative;
height: 14.85rem;
border-radius: 0.8rem;
@include maxtablet{
height: 4.5rem;
}
cursor: pointer;
&.video-slideThumb {
&:before {
content:"";
display: block;
position: absolute;
top:50%;left:50%;
z-index: 2;
transform: translate(-50%, -50%);
width: 60px;
height: 61px;
background: url(../images/kia/pdp/in_car_game/btn_play.png) no-repeat center / contain;
@include maxtablet{
width: 30px;
height: 31px;
opacity: .75;
}
}
}
img {
display: block;
max-width: 100%;
border-radius: 0.8rem;
overflow: hidden;
}
video {
position: absolute;
top:50%;
transform: translateY(-50%);
z-index: 1;
width: 100%;
}
&:after {
content:"";
display: block;
position: absolute;
top:0;
left:0;
z-index: 3;
width: 100%;
height: 100%;
border-radius: .8rem;

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 342 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 165 KiB

After

Width:  |  Height:  |  Size: 130 KiB

View File

@@ -267,6 +267,7 @@ $(document).ready(function() {
pdpInCarGameSwiper()
pdpInCarGameSwiperDtl();
pdpIntro();
flagScroll = false;
}
}
@@ -447,7 +448,7 @@ function pdpInCarGameSwiper(){
// },
on: {
init: function () {
console.log('pdpInCarGameSwiper 실행한다')
// console.log('pdpInCarGameSwiper 실행한다')
},
},
});
@@ -463,9 +464,10 @@ function pdpInCarGameSwiper(){
}
});
}
flagScroll = false;
}
let inCarGameSwiper;
function pdpInCarGameSwiperDtl(){
if ($('.inCarGameDtl').length > 0) {
var inCarGameSwiper = new Swiper(".inCarGameDtlThumb", {
@@ -483,9 +485,16 @@ function pdpInCarGameSwiperDtl(){
thumbs: {
swiper: inCarGameSwiper,
},
on: {
init: function () {
$(document).on("click", ".inCarGame .dtthumb", function() {
inCarGameSwiper.slideTo(0);
inCarGameSwiper2.slideTo(0);
});
},
},
});
}
flagScroll = false;
}
$(document).on("click", ".inCarGame .dtthumb", function(e) {
@@ -504,15 +513,42 @@ $(document).on("click", ".inCarGame .dtthumb", function(e) {
}, 200);
$(".inCarGame .themeImg").each(function(e){
const idx = e+1;
const idx = e+2;
const src = $(this).attr("src");
const lastIndex = src.lastIndexOf("/");
const pathWithoutFileName = src.substring(0, lastIndex);
$(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.png`);
});
$(".inCarGame .themeImgThumb").each(function(e){
$(".inCarGame .video-slide").each(function(e){
const idx = e+1;
const src = $(this).find(".themeVideo").attr("src");
const lastIndex = src.lastIndexOf("/");
const pathWithoutFileName = src.substring(0, lastIndex);
const videoEle = `
<video loop="" muted="" playsinline="" autoplay="" poster="${pathWithoutFileName}/${dtlImgPath}-1.png">
<source src="${pathWithoutFileName}/${dtlImgPath}-1.mp4" type="video/mp4" class="themeVideo">
</video>
`;
$(this).html(videoEle);
// $(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.mp4`);
});
$(".inCarGame .video-slideThumb").each(function(e){
const idx = e+1;
const src = $(this).find(".themeVideo").attr("src");
const lastIndex = src.lastIndexOf("/");
const pathWithoutFileName = src.substring(0, lastIndex);
const videoEle = `
<video loop="" muted="" playsinline="" poster="${pathWithoutFileName}/${dtlImgPath}-1.png">
<source src="${pathWithoutFileName}/${dtlImgPath}-1.mp4" type="video/mp4" class="themeVideo">
</video>
`;
$(this).html(videoEle);
// $(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.mp4`);
});
$(".inCarGame .themeImgThumb").each(function(e){
const idx = e+2;
const src = $(this).attr("src");
const lastIndex = src.lastIndexOf("/");
const pathWithoutFileName = src.substring(0, lastIndex);
@@ -589,31 +625,33 @@ $(document).on("click", ".displayTheme .dtthumb", function() {
});
function pdpIntro(){
const videoElement = document.getElementById('dpThemeVideo');
const videoWrap = $('.displayTheme .video_wrap');
const btnIntro = $('.displayTheme .btn-intro');
const btnClose = $('.video_wrap .btn-close');
if($('#dpThemeVideo').length > 0){
const videoElement = document.getElementById('dpThemeVideo');
const videoWrap = $('.displayTheme .video_wrap');
const btnIntro = $('.displayTheme .btn-intro');
const btnClose = $('.video_wrap .btn-close');
videoElement.addEventListener('ended', function() {
$(videoWrap).fadeOut('fast',function(){
videoElement.currentTime = 0;
videoElement.pause();
videoElement.addEventListener('ended', function() {
$(videoWrap).fadeOut('fast',function(){
videoElement.currentTime = 0;
videoElement.pause();
});
});
});
$(btnIntro).on('click', function() {
$(videoWrap).fadeIn('fast',function(){
videoElement.currentTime = 0;
videoElement.play();
});
});
$(btnClose).on('click', function() {
$(videoWrap).fadeOut('fast',function(){
videoElement.currentTime = 0;
videoElement.pause();
$(btnIntro).on('click', function() {
$(videoWrap).fadeIn('fast',function(){
videoElement.currentTime = 0;
videoElement.play();
});
});
$(btnClose).on('click', function() {
$(videoWrap).fadeOut('fast',function(){
videoElement.currentTime = 0;
videoElement.pause();
});
});
});
}
}

View File

@@ -267,12 +267,12 @@
<li class="swiper-slide">
<img class="noBorder" src="../assets/images/kia/contents/incar_game01_1.jpg" alt="사양 구매 후, 게임 카드에 재진입. 홈 화면 > 메뉴 > 게임">
<b>STEP 01</b>
<p class="caseBlack txtCase01">사양 구매 후, 게임 카드에 재진입 합니다. 홈 화면 > 메뉴 > 게임 <br>(별도의 설치과정이 필요하지 않습니다)</p>
<p class="caseBlack txtCase01">사양 구매 후, 게임 카드에 재진입 합니다. <br>홈 화면 > 메뉴 > 게임 <br>(별도의 설치과정이 필요하지 않습니다)</p>
</li>
<li class="swiper-slide">
<img class="noBorder" src="../assets/images/kia/contents/incar_game01_2.jpg" alt="'좌우로 스크롤링하여 게임을 탐색/선택">
<b>STEP 02</b>
<p class="caseBlack txtCase01">좌우로 스크롤링하여 게임을 탐색/선택합니다. 가장 최근에 실행한 게임이 가장 왼쪽에 나타납니다.</p>
<p class="caseBlack txtCase01">좌우로 스크롤링하여 게임을 탐색/선택합니다. <br>가장 최근에 실행한 게임이 가장 왼쪽에 나타납니다.</p>
</li>
<li class="swiper-slide">
<img class="noBorder" src="../assets/images/kia/contents/incar_game01_3.jpg" alt="게임에 대한 설명을 참고한 후 게임을 실행">

View File

@@ -248,10 +248,10 @@
<section>
<h2 class="titleCase01">기아 커넥트 스토어 디지털 사양 이용안내</h2>
<div class="listType01">
<a href="../info/product-usage-guide-lighting" style="background-image: url('../assets/images/kia/contents/imgUsageList05.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>NBA 디스플레이 테마</b></a>
<a href="../info/product-usage-guide-lighting" style="background-image: url('../assets/images/kia/contents/imgUsageList06.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>아케이드 게임</b></a>
<a href="../info/product-usage-guide-lighting" style="background-image: url('../assets/images/kia/contents/imgUsageList07.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>스마트 회생 시스템 플러스</b></a>
<a href="../info/product-usage-guide-lighting" style="background-image: url('../assets/images/kia/contents/imgUsageList08.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>마트 회생 시스템 플러스</b></a>
<a href="../info/product-usage-guide-incargame.html" style="background-image: url('../assets/images/kia/contents/imgUsageList05.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>NBA 디스플레이 테마</b></a>
<a href="../info/product-usage-guide-incargame.html" style="background-image: url('../assets/images/kia/contents/imgUsageList06.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>아케이드 게임</b></a>
<a href="../info/product-usage-guide-incargame.html" style="background-image: url('../assets/images/kia/contents/imgUsageList07.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>스마트 회생 시스템 플러스</b></a>
<a href="../info/product-usage-guide-incargame.html" style="background-image: url('../assets/images/kia/contents/imgUsageList08.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>트리밍 프리미엄</b></a>
<a href="../info/product-usage-guide-lighting" style="background-image: url('../assets/images/kia/contents/imgUsageList02.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>라이팅 패턴<br>이용방법</b></a>
<a href="../info/product-usage-guide-rspa2" style="background-image: url('../assets/images/kia/contents/imgUsageList01.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>원격 스마트 주차 보조 2(RSPA 2)<br>이용방법</b></a>

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?v1.1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v55"></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?v1.1" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v55" 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">
@@ -263,7 +263,7 @@
<div class="productImg">
<div class="swiper productSwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="../assets/images/kia/product-img/producy-temp1.png" alt="이미지 상품명"></div>
<div class="swiper-slide"><img src="../assets/images/kia/pdp/display_theme/producy-temp1.png" alt="이미지 상품명"></div>
<div class="swiper-slide"><img src="../assets/images/kia/product-img/producy-temp2.png" alt="이미지 상품명"></div>
<div class="swiper-slide withVideo">
<p class="productSmallVideo">
@@ -573,7 +573,7 @@
<div class="comp_md layer_up video_wrap">
<button type="button" class="btn-close">닫기</button>
<video id="dpThemeVideo" playsinline="playsinline" autoplay="autoplay" muted="muted" controls>
<source src="https://connectstore.kia.com/kr/ux_data/content/20231214/10f7f9bebf774965907b716d80e510ca.mp4" type="video/mp4">
<source src="../assets/images/kia/pdp/display_theme/NBA_Display_Theme_Intro.mp4" type="video/mp4">
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
@@ -641,6 +641,44 @@
</div>
</div>
<div class="comp_wide displayTheme welcome-goodbye">
<div class="comp_body">
<div class="text_area">
<h4 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
Welcome Video
</h4>
<p data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
NBA팀별 로고와 캐릭터가 반영된 Video가 차량 Sleep 모드 동작 이후 차량 시동을 켤 때에 1회 실행됩니다.
</p>
</div>
<div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme/lakers_welcome.mp4" type="video/mp4">
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
</div>
<div class="comp_body">
<div class="text_area">
<h4 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
Goodbye Video
</h4>
<p data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
NBA팀별 로고와 컨셉이 반영된 Video가 차량 시동이 꺼질 때 마다 실행됩니다.
</p>
</div>
<div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme/lakers_goodbye.mp4" type="video/mp4">
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
</div>
</div>
<div class="comp_wide comp_2x_b_h_s_e2 displayTheme">
<div class="comp_body">
<div class="item">

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?v1.1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v43"></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?v4" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v8" 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">
@@ -408,8 +408,12 @@
<div class="swiper inCarGameDtl">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="image_area">
<img src="../assets/images/kia/pdp/in_car_game/theme1-1.png" class="themeImg" alt="디스플레이 테마1">
<div class="image_area video-slide">
<!-- <img src="../assets/images/kia/pdp/in_car_game/theme1-1.png" class="themeImg" alt="디스플레이 테마1"> -->
<video loop muted playsinline preload="auto" autoplay poster="/kr/assets/images/kia/pdp/in_car_game/thumb02.png">
<source src="../assets/images/kia/pdp/in_car_game/theme2-1.mp4" type="video/mp4" class="themeVideo">
</video>
</div>
</div>
<div class="swiper-slide">
@@ -430,8 +434,11 @@
</div>
<div thumbsSlider="" class="swiper inCarGameDtlThumb">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../assets/images/kia/pdp/in_car_game/theme1-1.png" class="themeImgThumb" alt="" />
<div class="swiper-slide video-slideThumb">
<!-- <img src="../assets/images/kia/pdp/in_car_game/theme1-1.png" class="themeImgThumb" alt="" /> -->
<video loop muted playsinline preload="auto" poster="../assets/images/kia/pdp/in_car_game/thumb02.png">
<source src="../assets/images/kia/pdp/in_car_game/theme2-1.mp4" type="video/mp4" class="themeVideo">
</video>
</div>
<div class="swiper-slide">
<img src="../assets/images/kia/pdp/in_car_game/theme1-2.png" class="themeImgThumb" alt="" />

View File

@@ -34,7 +34,7 @@
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v1.1"></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?v5" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v6" 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">