디스플레이테마 사용안내 리스트
This commit is contained in:
5
.vscode/settings.json
vendored
Normal file
5
.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"prettier.printWidth": 9999,
|
||||
"prettier.htmlWhitespaceSensitivity": "ignore", // 불필요한 줄 정렬 방지
|
||||
"editor.defaultFormatter": null
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 107 KiB |
BIN
assets/images/kia/contents/imgUsageList10.jpg
Normal file
BIN
assets/images/kia/contents/imgUsageList10.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
270
info/product-usage-guide-display-theme.php
Normal file
270
info/product-usage-guide-display-theme.php
Normal file
@@ -0,0 +1,270 @@
|
||||
<?php $bland_code = "kia"; ?>
|
||||
<!--
|
||||
//메타의 각 브랜드 별 코드는 hyundai,genesis 입니다.
|
||||
//브랜드 별 경로에 따라 해당 코드를 변경해주세요.
|
||||
-->
|
||||
<?php $gnbStyleCode = "hskey"; ?>
|
||||
<!--
|
||||
페이지 별 붙박이 코드입니다. 해당 변수는 JSP로만 변경해주시고, 값은 그대로 유지만 시켜주시면 됩니다.
|
||||
-->
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>제품상세명 > 제품리스트 > 회사명</title>
|
||||
<!--
|
||||
//위에 순서대로 title 이 변경되어야 합니다.
|
||||
-->
|
||||
<?php
|
||||
include($_SERVER['DOCUMENT_ROOT']."/kr/include/meta.php");
|
||||
?>
|
||||
<!--상품상세 페이지 css 분리-->
|
||||
<link rel="stylesheet" charset="UTF-8" href="/kr/assets/css/service.css?v1" type="text/css" />
|
||||
|
||||
<?php
|
||||
include($_SERVER['DOCUMENT_ROOT']."/kr/include/style.php");
|
||||
?>
|
||||
|
||||
|
||||
</head>
|
||||
<body id="event">
|
||||
<div class="contentHeaderCase case05"> </div>
|
||||
|
||||
<!--//header-->
|
||||
<?php
|
||||
include($_SERVER['DOCUMENT_ROOT']."/kr/include/header.php");
|
||||
?>
|
||||
<!--//header-->
|
||||
|
||||
<div class="pageTitle">
|
||||
<h1>사양별 이용안내</h1>
|
||||
</div>
|
||||
|
||||
<div class="contentWarp">
|
||||
<div class="contentsTypeNew caseUsageDetail">
|
||||
<section class="caseInfoWrap">
|
||||
<h2 class="titleCase01">디스플레이 테마</h2>
|
||||
<img src="../assets/images/kia/contents/imgCaseInfo.jpg" alt="디스플레이 테마" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800" />
|
||||
<div>
|
||||
<h3 class="titleCase02" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">디스플레이 테마</h3>
|
||||
<p class="txtCase01" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
클러스터/인포테인먼트 시스템 디자인을 NBA 30개 / KBO 10개 팀 테마로 변경하여 운전자의 특별한 개성을 표현할 수 있습니다. 테마 다운로드에는 약 5분(환경에 따라 상이)이 소요되며 적용을 위해 재시동이 필요합니다.
|
||||
<span style="color: #676767; display: block; padding-top: 15px">※ 테마는 카테고리와 상관 없이 최대 3개까지만 다운로드하여 저장 가능하며, 삭제 / 재설치가 가능합니다.</span>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="caseFunction">
|
||||
<h2 class="titleCase01" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">이용 방법</h2>
|
||||
|
||||
<div class="functionTab" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<ul>
|
||||
<li class="active">
|
||||
<button><b>테마 다운로드 / 적용</b></button>
|
||||
</li>
|
||||
<li>
|
||||
<button><b>테마 삭제</b></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
const btn = $(".selectInner_new2").find(".btn-select");
|
||||
const list = $(".selectInner_new2").find(".list-member");
|
||||
$(document).on("click", ".selectInner_new2 .btn-select", function () {
|
||||
$(this).toggleClass("on");
|
||||
});
|
||||
$(document).on("click", ".selectInner_new2 .list-member li button", function (event) {
|
||||
if (event.target.nodeName === "BUTTON") {
|
||||
btn.html(event.target.innerText);
|
||||
btn.removeClass("on");
|
||||
var tabIndex = $(this).parent().index() + 1;
|
||||
$(".caseFunction>section:nth-of-type(" + tabIndex + ")")
|
||||
.show()
|
||||
.siblings("section")
|
||||
.hide();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="selectInner_new2">
|
||||
<div class="cont-select">
|
||||
<button class="btn-select">테마 다운로드 / 적용</button>
|
||||
<ul class="list-member">
|
||||
<li><button>테마 다운로드 / 적용</button></li>
|
||||
<li><button>테마 삭제</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="functionDetail active" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<section class="storeGuideItem">
|
||||
<header class="case">
|
||||
<h4 class="titleCase03">테마 다운로드 / 적용 방법</h4>
|
||||
<strong>7 STEP</strong>
|
||||
</header>
|
||||
|
||||
<div class="swiper swiper1">
|
||||
<ul class="swiper-wrapper caseWide">
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/display_theme1_1.jpg" alt="인포테인먼트 화면에서 설정 메뉴에 진입" />
|
||||
<b>STEP 01</b>
|
||||
<p class="caseBlack txtCase01">인포테인먼트 화면에서 설정 메뉴에 진입합니다.</p>
|
||||
</li>
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/display_theme1_2.jpg" alt="'설정 메뉴에서 화면구성 서브메뉴에 진입" />
|
||||
<b>STEP 02</b>
|
||||
<p class="caseBlack txtCase01">설정 메뉴에서 화면구성 서브메뉴에 진입합니다.</p>
|
||||
</li>
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/display_theme1_3.jpg" alt="좌측상단의 디스플레이 테마에서 미리보기" />
|
||||
<b>STEP 03</b>
|
||||
<p class="caseBlack txtCase01">좌측상단의 디스플레이 테마를 터치한 후 원하는 테마 카테고리를 선택합니다.</p>
|
||||
</li>
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/display_theme1_4.jpg" alt="구매한 사양은 다운로드 버튼이 활성화되며 터치 시 다운로드" />
|
||||
<b>STEP 04</b>
|
||||
<p class="caseBlack txtCase01">구매한 사양은 다운로드 버튼이 활성화되며 터치 시 다운로드가 진행됩니다.(약 5분 소요)</p>
|
||||
</li>
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/display_theme1_5.jpg" alt="다운로드가 완료되면 재부팅을 진행" />
|
||||
<b>STEP 05</b>
|
||||
<p class="caseBlack txtCase01">다운로드가 완료되면 재부팅을 진행합니다.</p>
|
||||
</li>
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/display_theme1_6.jpg" alt="프로필별로 설정" />
|
||||
<b>STEP 06</b>
|
||||
<p class="caseBlack txtCase01">프로필별로 설정 가능합니다.</p>
|
||||
</li>
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/display_theme1_7.jpg" alt="로그인하면 적용된 테마를 확인" />
|
||||
<b>STEP 07</b>
|
||||
<p class="caseBlack txtCase01">로그인하면 적용된 테마를 확인하실 수 있습니다.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="swiper-scrollbar"></div>
|
||||
<div class="swiper-scrollbar-after-space"></div>
|
||||
</div>
|
||||
<div class="swiper-button-next btnNextSlide1"></div>
|
||||
<div class="swiper-button-prev btnPrevSlide1"></div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="functionDetail">
|
||||
<section class="storeGuideItem">
|
||||
<header class="case">
|
||||
<h4 class="titleCase03">테마 삭제 방법</h4>
|
||||
<strong>8 STEP</strong>
|
||||
</header>
|
||||
|
||||
<div class="swiper swiper2">
|
||||
<ul class="swiper-wrapper caseWide">
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/display_theme2_1.jpg" alt="인포테인먼트 화면에서 설정 메뉴에 진입" />
|
||||
<b>STEP 01</b>
|
||||
<p class="caseBlack txtCase01">인포테인먼트 화면에서 설정 메뉴에 진입합니다.</p>
|
||||
</li>
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/display_theme2_2.jpg" alt="'설정 메뉴에서 화면구성 서브메뉴에 진입" />
|
||||
<b>STEP 02</b>
|
||||
<p class="caseBlack txtCase01">설정 메뉴에서 화면구성 서브메뉴에 진입합니다.</p>
|
||||
</li>
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/display_theme2_3.jpg" alt="좌측상단의 디스플레이 테마 메뉴를 터치" />
|
||||
<b>STEP 03</b>
|
||||
<p class="caseBlack txtCase01">좌측상단의 디스플레이 테마를 터치한 후 원하는 테마 카테고리를 선택합니다.</p>
|
||||
</li>
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/display_theme2_4.jpg" alt="좌측하단 햄버거 메뉴를 터치하고 삭제 메뉴" />
|
||||
<b>STEP 04</b>
|
||||
<p class="caseBlack txtCase01">좌측하단 햄버거 메뉴를 터치하고 삭제 메뉴를 터치합니다.</p>
|
||||
</li>
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/display_theme2_5.jpg" alt="삭제할 팀 테마를 선택" />
|
||||
<b>STEP 05</b>
|
||||
<p class="caseBlack txtCase01">삭제할 테마를 선택합니다.</p>
|
||||
</li>
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/display_theme2_6.jpg" alt="테마가 선택된 상태에서 삭제 버튼을 터치" />
|
||||
<b>STEP 06</b>
|
||||
<p class="caseBlack txtCase01">테마가 선택된 상태에서 삭제 버튼을 터치합니다.</p>
|
||||
</li>
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/display_theme2_7.jpg" alt="삭제 진행" />
|
||||
<b>STEP 07</b>
|
||||
<p class="caseBlack txtCase01">삭제가 진행됩니다.(약 2분 소요)</p>
|
||||
</li>
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/display_theme2_8.jpg" alt="삭제 완료" />
|
||||
<b>STEP 08</b>
|
||||
<p class="caseBlack txtCase01">삭제가 완료되었습니다. 이제 새 테마를 다운로드 받을 수 있습니다.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="swiper-scrollbar"></div>
|
||||
<div class="swiper-scrollbar-after-space"></div>
|
||||
</div>
|
||||
<div class="swiper-button-next btnNextSlide2"></div>
|
||||
<div class="swiper-button-prev btnPrevSlide2"></div>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<div class="contentsBtnWarp">
|
||||
<div class="oneButton">
|
||||
<a href="../info/product-usage-guide"><p>목록</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--//footer-->
|
||||
<?php
|
||||
include($_SERVER['DOCUMENT_ROOT']."/kr/include/footer.php");
|
||||
?>
|
||||
<!--//footer-->
|
||||
<script>
|
||||
$(document).on('click','.functionTab button',function(){
|
||||
var tabIndex = $(this).parent().index() +1;
|
||||
$(this).parent('li').addClass('active').siblings('li').removeClass('active');
|
||||
$('.caseFunction>section:nth-of-type('+tabIndex+')').show().siblings('section').hide();
|
||||
});
|
||||
|
||||
var swiper1 = new Swiper(".swiper1", {
|
||||
slidesPerView: "auto",
|
||||
roundLengths: true,
|
||||
//freeMode: true,
|
||||
scrollbar: {
|
||||
el: ".swiper-scrollbar",
|
||||
hide: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".btnNextSlide1",
|
||||
prevEl: ".btnPrevSlide1",
|
||||
},
|
||||
});
|
||||
|
||||
var swiper2 = new Swiper(".swiper2", {
|
||||
slidesPerView: "auto",
|
||||
roundLengths: true,
|
||||
//freeMode: true,
|
||||
scrollbar: {
|
||||
el: ".swiper-scrollbar",
|
||||
hide: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".btnNextSlide2",
|
||||
prevEl: ".btnPrevSlide2",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -248,7 +248,7 @@
|
||||
<section>
|
||||
<h2 class="titleCase01">기아 커넥트 스토어 디지털 사양 이용안내</h2>
|
||||
<div class="listType01">
|
||||
<a href="../info/product-usage-guide-nba.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-nba.html" style="background-image: url('../assets/images/kia/contents/imgUsageList10.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/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-srs.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="#" style="background-image: url('../assets/images/kia/contents/imgUsageList08_comingsoon.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>스트리밍 프리미엄 (Coming Soon)</b></a> -->
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
<section>
|
||||
<h2 class="titleCase01">기아 커넥트 스토어 디지털 사양 이용안내</h2>
|
||||
<div class="listType01">
|
||||
<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-nba.html" style="background-image: url('../assets/images/kia/contents/imgUsageList10.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/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="#" style="background-image: url('../assets/images/kia/contents/imgUsageList08_comingsoon.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>스트리밍 프리미엄 (Coming Soon)</b></a> -->
|
||||
|
||||
Reference in New Issue
Block a user