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-07-01 23:26:33 +09:00
parent 27b98db968
commit 0a676da6d0
18 changed files with 264 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
assets/css/pdp_detail.css
View File

@@ -1940,19 +1940,47 @@
width: 100%;
max-width: 192rem;
}
@media (max-width: 768px) {
@media (max-width: 1025px) {
.displayTheme .visualBg {
overflow: hidden;
height: 143vw;
height: 76rem;
}
}
@media (max-width: 820px) {
.displayTheme .visualBg {
height: 62rem;
}
}
@media (max-width: 768px) {
.displayTheme .visualBg {
height: 76rem;
}
}
@media (max-width: 501px) {
.displayTheme .visualBg {
height: 71rem;
}
}
.displayTheme .visualBg img {
width: 100%;
width: auto;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
@media (max-width: 1025px) {
.displayTheme .visualBg img {
width: 100%;
-o-object-fit: initial;
object-fit: initial;
-o-object-position: initial;
object-position: initial;
}
}
.displayTheme .visualBg img.mobile {
display: none;
}
@media (max-width: 768px) {
@media (max-width: 1025px) {
.displayTheme .visualBg img.web {
display: none;
}
@@ -2167,7 +2195,7 @@
width: 100%;
max-width: 160rem;
height: 100%;
max-height: 60rem;
max-height: 90rem;
}
.displayTheme .comp_md.video_wrap .btn-close {
position: absolute;
@@ -2180,6 +2208,24 @@
cursor: pointer;
text-indent: -9999em;
}
@media (max-width: 768px) {
.displayTheme .comp_md.video_wrap .btn-close {
top: 1rem;
right: 1rem;
width: 4rem;
height: 4rem;
}
}
@media (max-width: 768px) {
.displayTheme .comp_md.video_wrap {
height: 56rem;
}
}
@media (max-width: 501px) {
.displayTheme .comp_md.video_wrap {
height: 36rem;
}
}
.displayTheme.type2 .comp_bottom {
background-color: transparent;
}
@@ -2290,6 +2336,11 @@
right: -65px;
transform: rotate(180deg);
}
@media (max-width: 1200px) {
.displayThemeDtl .swiper-navigation {
display: none;
}
}
.displayThemeDtl .swiper-pagination {
top: 46.4rem;
}
@@ -2670,6 +2721,9 @@
opacity: 0.75;
}
}
.inCarGame .inCarGameDtlThumb .swiper-slide.video-slideThumb.theme5::before {
display: none;
}
.inCarGame .inCarGameDtlThumb .swiper-slide img {
display: block;
max-width: 100%;

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

File diff suppressed because one or more lines are too long

48
assets/css/pdp_detail.scss
View File

@@ -1843,15 +1843,31 @@
position: absolute;
width: 100%;
max-width: 192rem;
@include maxtablet{
@include maxdesktop{
overflow: hidden;
height: 143vw;
height: 76rem;
}
@media (max-width: 820px){
height: 62rem;
}
@include maxtablet{
height: 76rem;
}
@include maxmobile{
height: 71rem;
}
img {
width: 100%;
width: auto;
object-fit: cover;
object-position: center;
@include maxdesktop{
width: 100%;
object-fit: initial;
object-position: initial;
}
&.mobile {display: none;}
@include maxtablet{
@include maxdesktop{
&.web {display: none;}
&.mobile {
display: block;
@@ -2008,8 +2024,10 @@
border:2px solid #F8C40C;
}
}
}
}
}
}
}
@@ -2065,7 +2083,7 @@
width: 100%;
max-width: 160rem;
height: 100%;
max-height: 60rem;
max-height: 90rem;
}
.btn-close {
position: absolute;
@@ -2077,6 +2095,18 @@
background: url(../images/kia/pdp/display_theme/btn_video_close.png) no-repeat center / contain;
cursor: pointer;
text-indent: -9999em;
@include maxtablet{
top: 1rem;
right: 1rem;
width: 4rem;
height: 4rem;
}
}
@include maxtablet{
height: 56rem;
}
@include maxmobile{
height: 36rem;
}
}
}
@@ -2196,6 +2226,9 @@
right:-65px;
transform: rotate(180deg);
}
@media(max-width: 1200px){
display: none;
}
}
.swiper-pagination {
@@ -2556,6 +2589,11 @@
opacity: .75;
}
}
&.theme5 {
&::before {
display: none;
}
}
}
img {
display: block;

45
assets/css/product.css
View File

@@ -612,6 +612,7 @@
}
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p {
position: relative;
width: 100%;
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p span,
@@ -620,7 +621,7 @@
width: 100%;
font-size: 1.4rem;
width: 75%;
line-height: 1.4;
line-height: 1.2;
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
@@ -634,9 +635,15 @@
}
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p strong {
font-size: 1.6rem;
font-weight: 600;
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p strong em {
display: block;
font-size: 1.2rem;
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p span {
font-size: 1.2rem;
font-weight: 400;
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p strong + span {
@@ -647,6 +654,42 @@
margin-top: 0.5rem;
}
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p .badge {
display: inline-flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
right: 2.4rem;
width: 6rem;
height: 2.4rem;
padding-top: 0.25rem;
color: #fff;
font-weight: 600;
font-size: 1.2rem;
background-color: rgba(5, 20, 31, 0.6);
border-radius: 1.2rem;
line-height: 0;
}
@media (max-width: 768px) {
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p strong {
font-size: 1.4rem;
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p strong em {
font-size: 1rem;
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p span {
font-size: 1rem;
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p .badge {
right: 1.2rem;
width: 5rem;
height: 2rem;
padding-top: 0.15rem;
font-size: 1rem;
border-radius: 1rem;
}
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .disabledBtn label {
border: 1px solid #DEDEDE;
}

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

File diff suppressed because one or more lines are too long

51
assets/css/product.scss
View File

@@ -553,6 +553,7 @@
}
p{
position: relative;
width:100%;
span,
strong{
@@ -560,7 +561,7 @@
width:100%;
font-size:1.4rem ;
width:75%;
line-height: 1.4;
line-height: 1.2;
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
@@ -570,14 +571,58 @@
font-size:1.4rem ;
}
}
strong{font-weight: 600;}
span{font-weight: 400;}
strong{
font-size: 1.6rem;
font-weight: 600;
em {display: block;font-size: 1.2rem;}
}
span{
font-size: 1.2rem;
font-weight: 400;
}
strong + span{
margin-top:1rem;
@include maxtablet{
margin-top:.5rem;
}
}
.badge {
display: inline-flex;
justify-content: center;
align-items: center;
position: absolute;
top:0;
right:2.4rem;
width: 6rem;
height: 2.4rem;
padding-top: .25rem;
color:#fff;
font-weight: 600;
font-size: 1.2rem;
background-color: rgba(5, 20, 31, 0.6);
border-radius: 1.2rem;
line-height: 0;
}
@include maxtablet{
strong {
font-size: 1.4rem;
em {
font-size: 1rem;
}
}
span {
font-size: 1rem;
}
.badge {
right: 1.2rem;
width: 5rem;
height: 2rem;
padding-top: .15rem;
font-size: 1rem;
border-radius: 1rem;
}
}
}
}
}

BIN
assets/images/kia/pdp/display_theme/.DS_Store vendored
View File

Binary file not shown.

BIN
assets/images/kia/pdp/display_theme/producy-temp1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 342 KiB

After

Width:  |  Height:  |  Size: 464 KiB

BIN
assets/images/kia/pdp/in_car_game/theme1-1.mp4 Executable file
View File

Binary file not shown.

BIN
assets/images/kia/pdp/in_car_game/theme2-1.mp4
View File

Binary file not shown.

BIN
assets/images/kia/pdp/in_car_game/theme3-1.mp4
View File

Binary file not shown.

BIN
assets/images/kia/pdp/in_car_game/theme4-1.mp4 Executable file
View File

Binary file not shown.

BIN
assets/images/kia/pdp/in_car_game/theme6-1.mp4
View File

Binary file not shown.

BIN
assets/images/kia/pdp/in_car_game/theme7-1.mp4 Executable file
View File

Binary file not shown.

BIN
assets/images/kia/pdp/in_car_game/theme8-1.mp4
View File

Binary file not shown.

14
assets/js/common.js
View File

@@ -498,6 +498,9 @@ function pdpInCarGameSwiperDtl(){
}
flagScroll = false;
}
var beforeDtlImgPath = '';
$(document).on("click", ".inCarGame .dtthumb", function(e) {
const thumbIdx = e+1;
const dtlImgPath = $(this).attr("value");
@@ -520,13 +523,14 @@ $(document).on("click", ".inCarGame .dtthumb", function(e) {
const pathWithoutFileName = src.substring(0, lastIndex);
$(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.png`);
});
$(".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">
<video class="videos" loop="" muted="" playsinline="" autoplay="" poster="${pathWithoutFileName}/${dtlImgPath}-1.png">
<source src="${pathWithoutFileName}/${dtlImgPath}-1.mp4" type="video/mp4" class="themeVideo">
</video>
`;
@@ -534,7 +538,11 @@ $(document).on("click", ".inCarGame .dtthumb", function(e) {
// $(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.mp4`);
});
$(".inCarGame .video-slideThumb").each(function(e){
$(this).removeClass(`${beforeDtlImgPath}`)
const idx = e+1;
const src = $(this).find(".themeVideo").attr("src");
const lastIndex = src.lastIndexOf("/");
@@ -544,6 +552,10 @@ $(document).on("click", ".inCarGame .dtthumb", function(e) {
<source src="${pathWithoutFileName}/${dtlImgPath}-1.mp4" type="video/mp4" class="themeVideo">
</video>
`;
$(this).addClass(`${dtlImgPath}`)
beforeDtlImgPath = dtlImgPath;
$(this).html(videoEle);
// $(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.mp4`);

74
product/pdp_display_theme_0429.html
View File

@@ -284,7 +284,7 @@
<div class="producTitle">
<!-- <span>차량SW</span> -->
<h1>NBA 디스플레이 테마</h1>
<p>30개 NBA 팀의 개성있는 디스플레이 테마로 분위기 업업~!!!</p>
<p>운전에 스타일을 더 하는 특별한 테마</p>
</div>
<div class="producOption scroll">
<h2>구성 상품</h2>
@@ -295,20 +295,27 @@
<p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme1.png" alt="Atlanta Hawks"></p>
<div class="optionText">
<p>
<strong>Atlanta Hawks</strong>
<span>애틀란타 호크스</span>
<strong>
애틀란타 호크스
<em>Atlanta Hawks</em>
</strong>
<span>"True to Atlanta" - Feel the intensity with the Atlanta Hawks.</span>
</p>
</div>
</label>
</div>
<div class="checkBtn withVideo">
<input type="checkbox" name="check" id="check2" value="Boston Celtics">
<div class="checkBtn disabledBtn ">
<input type="checkbox" name="check" id="check2" value="Boston Celtics" disabled>
<label for="check2">
<p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme2.png" alt="Boston Celtics"></p>
<p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme2_2.png" alt="Boston Celtics"></p>
<div class="optionText">
<p>
<strong>Boston Celtics</strong>
<span>역동적인 느낌을 표현</span>
<strong>
보스턴 셀틱스
<em>Boston Celtics</em>
</strong>
<span>Boston Celtics gogo~~~!!! Boston Celtics gogo~~~!!!</span>
<i class="badge">구매완료</i>
</p>
</div>
</label>
@@ -319,8 +326,12 @@
<p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme3.png" alt="Chicago Bulls"></p>
<div class="optionText">
<p>
<strong>Chicago Bulls</strong>
<span>하이테크적인 미래 감성을 표현</span>
<strong>
시카고 불스
<em>chicago bulls</em>
</strong>
<span>"True to Atlanta" - Feel the intensity with the Atlanta Hawks.</span>
<i class="badge">구매완료</i>
</p>
</div>
</label>
@@ -331,8 +342,11 @@
<p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme4.png" alt="Brooklyn Nets"></p>
<div class="optionText">
<p>
<strong>Brooklyn Nets</strong>
<span>강인하고 견고한 느낌을 표현</span>
<strong>
브루클린 넷츠
<em>Brooklyn Nets</em>
</strong>
<span>"True to Atlanta" - Feel the intensity with the Atlanta Hawks.</span>
</p>
</div>
</label>
@@ -343,7 +357,10 @@
<p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme5.png" alt="Charlotte Hornets"></p>
<div class="optionText">
<p>
<strong>Charlotte Hornets</strong>
<strong>
샬럿 호넷
<em>charlotte hornets</em>
</strong>
<span>세련된 패턴으로 품격을 표현</span>
</p>
</div>
@@ -361,6 +378,18 @@
</div>
</label>
</div>
<div class="checkBtn">
<input type="checkbox" name="check" id="check6" value="ELEGANT">
<label for="check6">
<p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme6.png" alt="ELEGANT"></p>
<div class="optionText">
<p>
<strong>ELEGANT</strong>
<span>역동적인 사선 패턴</span>
</p>
</div>
</label>
</div>
</div>
</div>
@@ -422,10 +451,10 @@
<div class="comp_body layer_up">
<div class="text_area">
<h3 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
드라이빙 라이프에 스타일을 더 하는 특별한 테마
응원하는 NBA팀의 테마를 차량 디스플레이에 적용해보세요
</h3>
<div class="info" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
운전자가 다가가면 다이나믹하게 반응하는 라이팅 패턴으로 내 차만의 특별한 존재감을 확인해 보세요.
아래의 로고를 눌러 미리 차량에 적용된 디자인을 확인 할 수 있습니다.
</div>
</div>
</div>
@@ -599,7 +628,8 @@
<div class="text_area">
<h5>Cluster</h5>
<p>
해당 사양은 디지털 패턴 라이팅 그릴이 적용된 차량에 한해서 구매할 수 있습니다. 참고하시길 바랍니다.
클러스터 화면에 응원하는 NBA팀의 로고와 팀 칼라가 적용됩니다.<br>
게이지와 함께 차 오르는 팀 정신을 느껴 보세요.
</p>
</div>
</div>
@@ -610,8 +640,8 @@
<div class="text_area">
<h5>Navigation</h5>
<p>
나만의 취향과 선호도에 맞게 앱 또는 차량 내에서 자유롭게 원하는 패턴을 선택할 수 있습니다.<br>
미래지향적인 디자인으로 차량을 더욱 세련되게 스타일링 할 수 있습니다.
내비게이션의 각 메뉴 화면을 넘길 때 마다 특별한 NBA 팀 아이콘과 팀 칼라가 적용된 것을 확인할 수 있습니다.<br>
스타일리쉬하고 특별한 운전 경험을 완성합니다.
</p>
</div>
</div>
@@ -622,8 +652,8 @@
<div class="text_area">
<h5>Profile</h5>
<p>
나만의 취향과 선호도에 맞게 앱 또는 차량 내에서 자유롭게 원하는 패턴을 선택할 수 있습니다.<br>
미래지향적인 디자인으로 차량을 더욱 세련되게 스타일링 할 수 있습니다.
응원하는 NBA팀의 로고와 칼라를 활용하여 디자인된 다양한 프로필 이미지를 선택할 수 있습니다.<br>
운전자 별로 다른 이미지를 골라 보세요.
</p>
</div>
</div>
@@ -687,10 +717,10 @@
</div>
<div class="text_area">
<h5>
CCNC 차량에 한하여 구매가능
ccNC 차량에서 선택적 구매 가능
</h5>
<p>
기아 ccNC 인포테인먼트 플폼이 적용된 차량에만 선택 가능합니다.
기아 ccNC 인포테인먼트 플랫폼이 적용된 차량에만 선택 가능합니다.
</p>
</div>
</div>

6
product/pdp_in_car_game.html
View File

@@ -411,8 +411,8 @@
<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/theme1-1.png">
<source src="../assets/images/kia/pdp/in_car_game/theme2-1.mp4" type="video/mp4" class="themeVideo">
<video loop muted playsinline preload="auto" autoplay poster="./assets/images/kia/pdp/in_car_game/theme1-1.png">
<source src="../assets/images/kia/pdp/in_car_game/theme1-1.mp4" type="video/mp4" class="themeVideo">
</video>
</div>
</div>
@@ -437,7 +437,7 @@
<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/theme1-1.png">
<source src="../assets/images/kia/pdp/in_car_game/theme2-1.mp4" type="video/mp4" class="themeVideo">
<source src="../assets/images/kia/pdp/in_car_game/theme1-1.mp4" type="video/mp4" class="themeVideo">
</video>
</div>
<div class="swiper-slide">