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

UIUX수정

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2025-05-11 20:49:44 +09:00
parent 576092fc41
commit d42ecd0524
5 changed files with 99 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
assets/css/kia/kiamain.scss
View File

@@ -573,9 +573,9 @@
display: block;
position: absolute;
width:100%;
height:8rem;
height:24rem;
top:0;
background: linear-gradient(180deg, rgba(5,20,31,0.8) 0%, rgba(5,20,31,0) 100%);
background: linear-gradient(180deg, rgba(5,20,31,0.7) 0%, rgba(5,20,31,0) 100%);
z-index: 2;
}
ul{
@@ -1333,7 +1333,7 @@
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem 0.8rem;
padding: 0.6rem 0.8rem 0.5rem;
margin: 0 0.4rem 0 0.6rem;
border: 1px solid #9EA1A2;
font-size: 1.3rem;
@@ -1350,10 +1350,12 @@
&.available {
background-color: #5D7D2B;
color: #fff;
border:0;
}
&.promotion {
background-color: #F3C300;
color: #000;
border:0;
}
}
}

8
assets/css/kiamain.css
View File

@@ -628,9 +628,9 @@
display: block;
position: absolute;
width: 100%;
height: 8rem;
height: 24rem;
top: 0;
background: linear-gradient(180deg, rgba(5, 20, 31, 0.8) 0%, rgba(5, 20, 31, 0) 100%);
background: linear-gradient(180deg, rgba(5, 20, 31, 0.7) 0%, rgba(5, 20, 31, 0) 100%);
z-index: 2;
}
.mainTopKey .mainSwiper ul li {
@@ -1452,7 +1452,7 @@
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem 0.8rem;
padding: 0.6rem 0.8rem 0.5rem;
margin: 0 0.4rem 0 0.6rem;
border: 1px solid #9EA1A2;
font-size: 1.3rem;
@@ -1472,9 +1472,11 @@
.specNoti .tag.available {
background-color: #5D7D2B;
color: #fff;
border: 0;
}
.specNoti .tag.promotion {
background-color: #F3C300;
color: #000;
border: 0;
}
/*# sourceMappingURL=kiamain.css.map */

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

File diff suppressed because one or more lines are too long

89
kia.html
View File

@@ -244,11 +244,11 @@
<div class="swiper mainSwiper">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<video class="mainKvMoviePc" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover">
<video class="mainKvMoviePc" playsinline="playsinline" muted="muted" loop="" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover">
<source src="https://connectstore.kia.com/kr/ux_data/content/20250422/5afd169781ac4d648dc704f33c102d1b.mp4" type="video/mp4" />
<!-- pc mp4 -->
</video>
<video class="mainKvMovieMo" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover">
<video class="mainKvMovieMo" playsinline="playsinline" muted="muted" loop="" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover">
<source src="https://connectstore.kia.com/kr/ux_data/content/20250422/f257092db8c84f918bc0d7ef8b08ce12.mp4" type="video/mp4" />
<!-- pc mp4 -->
</video>
@@ -263,6 +263,26 @@
</div>
</div>
</li>
<li class="swiper-slide">
<video class="mainKvMoviePc" playsinline="playsinline" muted="muted" loop="" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover">
<source src="https://connectstore.kia.com/kr/ux_data/content/20240724/0ff6b9d3096441ea86edeb4868b05aa8.mp4" type="video/mp4" />
<!-- pc mp4 -->
</video>
<video class="mainKvMovieMo" playsinline="playsinline" muted="muted" loop="" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover">
<source src="https://connectstore.kia.com/kr/ux_data/content/20240724/b564f268deed421c957acfcaea54a939.mp4.mp4" type="video/mp4" />
<!-- pc mp4 -->
</video>
<div class="mainText">
<p>
<strong>Kia Connect Store</strong>
<span>Software Defined Vehicle.<br />소프트웨어로 여는 새로운 모빌리티 시대로</span>
</p>
<div class="oneButton">
<a href="product/product-carsw-view.html"><p>자세히 보기</p></a>
</div>
</div>
</li>
<li class="swiper-slide">
<video class="mainKvMoviePc" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover">
<source src="https://worldwide.kia.com/kr/image/video/ev9/premiere/ev9-wp-discover-hero-d.mp4" type="video/mp4" />
@@ -993,6 +1013,71 @@
<!--//footer-->
<script>
AOS.init();
var swiper = new Swiper(".mainSwiper", {
pagination: {
el: ".swiper-pagination",
clickable: true,
},
loop:true,
loopAdditionalSlides: 1,
navigation: {
nextEl: ".kvNextBtn",
prevEl: ".kvPrevBtn",
},
on: {
init:function (){
console.log("init")
// 모든 비디오 정지
document.querySelectorAll(".mainSwiper video").forEach(video => {
video.pause();
});
// 현재 active 슬라이드의 비디오 재생
const activeVideo = this.slides[this.activeIndex].querySelector("video");
if (activeVideo) {
activeVideo.play().catch((e) => console.warn("video play error", e));
}
},
slideChange: function () {
// 모든 비디오 정지
document.querySelectorAll(".mainSwiper video").forEach(video => {
video.pause();
});
// 현재 active 슬라이드의 비디오 재생
const activeVideo = this.slides[this.activeIndex].querySelector("video");
if (activeVideo) {
activeVideo.play().catch((e) => console.warn("video play error", e));
}
//GA4 : 3.3.10.1 Banner Interaction - impression
var currentSlide = this.slides[this.activeIndex];
var title = $(currentSlide).find('.mainText span').text().trim().replace(/<br\s*\/?>/gi, '');
if (!title) {
title = $(currentSlide).find('.mainText strong').text().trim().replace(/<br\s*\/?>/gi, '');
if (!title) {
var imgElement = $(currentSlide).find('.mainText img');
if (imgElement.length > 0) {
var imgSrc = imgElement.attr('src');
title = imgSrc.substring(imgSrc.lastIndexOf('/') + 1);
}
}
var activeSliceIndex = this.realIndex + 1;
title = "제목없음_" + activeSliceIndex + "번이미지"
}
// GA4 alert Test
//console.log(JSON.stringify(window.dataLayer[window.dataLayer.length-1]));
//console.log("banner test : " + title)
}
}
});
</script>
</body>
</html>

1
product/pdp_display_theme.html
View File

@@ -166,6 +166,7 @@
</div>
</li>
</ul>
<div class="menuBg"></div>
<!-- 모바일 전용 추가 메뉴 영역입니다. -->
<div class="mobileSubMenu">
<a href="https://privacy.kia.com/overview/full-policy/" target="_blank">개인정보 처리방침</a>