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

kbo 작업 완료, UG완료 = 모바일 스와이프 제거

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2025-03-30 21:17:09 +09:00
parent 3a890af761
commit 485df0b769
5 changed files with 206 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
assets/css/pdp_detail.css
View File

@@ -3674,6 +3674,21 @@
.displayTheme-kbo.comp_wide .swiper-pagination {
top: 48.4rem;
}
@media (max-width: 1240px) {
.displayTheme-kbo.comp_wide .swiper-pagination {
top: 39vw;
}
}
@media (max-width: 900px) {
.displayTheme-kbo.comp_wide .swiper-pagination {
top: 39.4vw;
}
}
@media (max-width: 768px) {
.displayTheme-kbo.comp_wide .swiper-pagination {
top: 37.5vw;
}
}
@media (max-width: 768px) {
.displayTheme-kbo.comp_wide .comp_top .comp_body .text_area h3 {
letter-spacing: -0.075em;
@@ -3717,4 +3732,66 @@
padding-top: 28.2rem;
}
}
@media (max-width: 640px) {
.displayTheme-kbo.comp_wide .displayThemeKboDtl .swiper-wrapper {
display: block;
}
.displayTheme-kbo.comp_wide .displayThemeKboDtl .swiper-wrapper .swiper-slide + .swiper-slide {
margin-top: 5rem;
}
}
.displayTheme-kbo.comp_wide .displayThemeKboDtl .swiper-navigation > * {
top: 210px;
left: -65px;
width: 5rem;
height: 5rem;
border-radius: 50%;
background: rgb(255, 255, 255) url(../images/kia/pdp/display_theme/icon-arrow.png) no-repeat center/15px auto;
}
.displayTheme-kbo.comp_wide .displayThemeKboDtl .swiper-navigation > *:after {
display: none;
}
.displayTheme-kbo.comp_wide .displayThemeKboDtl .swiper-navigation .swiper-button-next {
left: auto;
right: -65px;
transform: rotate(180deg);
}
@media (max-width: 1200px) {
.displayTheme-kbo.comp_wide .displayThemeKboDtl .swiper-navigation {
display: none;
}
}
.displayTheme-kbo.comp_wide .displayThemeKboDtl .swiper-pagination {
top: 48.4rem;
}
@media (max-width: 1240px) {
.displayTheme-kbo.comp_wide .displayThemeKboDtl .swiper-pagination {
top: 47.4rem;
}
}
@media (max-width: 1200px) {
.displayTheme-kbo.comp_wide .displayThemeKboDtl .swiper-pagination {
top: 39.4vw;
}
}
@media (max-width: 760px) {
.displayTheme-kbo.comp_wide .displayThemeKboDtl .swiper-pagination {
top: 36.4vw;
}
}
@media (max-width: 640px) {
.displayTheme-kbo.comp_wide .displayThemeKboDtl .swiper-pagination {
display: none;
}
}
.displayTheme-kbo.comp_wide .displayThemeKboDtl .swiper-pagination .swiper-pagination-bullet {
opacity: 1;
width: 5.6rem;
height: 0.4rem;
border-radius: 0;
background-color: #e9e9e9;
}
.displayTheme-kbo.comp_wide .displayThemeKboDtl .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: #000;
}
/*# sourceMappingURL=pdp_detail.css.map */

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

File diff suppressed because one or more lines are too long

80
assets/css/pdp_detail.scss
View File

@@ -3967,10 +3967,6 @@
top: 36.4vw;
}
@include maxtablet {
// top: 14.4rem;
}
.swiper-pagination-bullet {
opacity: 1;
width: 5.6rem;
@@ -4194,6 +4190,15 @@
}
.swiper-pagination {
top: 48.4rem;
@media (max-width: 1240px) {
top: 39vw;
}
@media (max-width: 900px) {
top: 39.4vw;
}
@media (max-width: 768px) {
top: 37.5vw;
}
}
.comp_top {
.comp_body {
@@ -4246,4 +4251,71 @@
}
}
}
.displayThemeKboDtl {
@media (max-width: 640px) {
.swiper-wrapper {
display: block;
.swiper-slide {
& + .swiper-slide {
margin-top: 5rem;
}
}
}
}
.swiper-navigation {
> * {
top: 210px;
left: -65px;
width: 5rem;
height: 5rem;
border-radius: 50%;
background: rgba(255, 255, 255) url(../images/kia/pdp/display_theme/icon-arrow.png) no-repeat center / 15px auto;
&:after {
display: none;
}
}
.swiper-button-next {
left: auto;
right: -65px;
transform: rotate(180deg);
}
@media (max-width: 1200px) {
display: none;
}
}
.swiper-pagination {
top: 48.4rem;
@media (max-width: 1240px) {
top: 47.4rem;
}
@media (max-width: 1200px) {
top: 39.4vw;
}
@media (max-width: 760px) {
top: 36.4vw;
}
@media (max-width: 640px) {
display: none;
}
.swiper-pagination-bullet {
opacity: 1;
width: 5.6rem;
height: 0.4rem;
border-radius: 0;
background-color: #e9e9e9;
&.swiper-pagination-bullet-active {
background-color: #000;
}
}
}
}
}

48
assets/js/common.js
View File

@@ -269,6 +269,7 @@ $(document).ready(function () {
pdpInCarGameSwiper();
pdpInCarGameSwiperDtl();
pdpDisplayThemeKbo();
pdpDisplayThemeKboSwiperDtl();
pdpSwiperDtl(".streamingPremium-swiper1");
pdpSwiperDtl(".streamingPremium-swiper2");
pdpSwiperDtl(".streamingPremium-swiper3");
@@ -1185,3 +1186,50 @@ function pdpDisplayThemeKbo() {
flagScroll = false;
}
let swiperKboThemeDtl = undefined;
function swiperThemeKboDtlInit() {
const ww = $(window).width();
const $swiperContainer = $(".displayThemeKboDtl .swiper");
if ($swiperContainer.length === 0) return;
if (ww > 640) {
if (!swiperKboThemeDtl) {
swiperKboThemeDtl = new Swiper($swiperContainer[0], {
slidesPerView: 1,
navigation: {
nextEl: ".displayThemeKboDtl .swiper-button-next",
prevEl: ".displayThemeKboDtl .swiper-button-prev",
},
pagination: {
el: ".displayThemeKboDtl .swiper-pagination",
},
on: {
init: function () {
$(document).on("click", ".pdpDisplayThemeKbo .dtthumb", function () {
swiperKboThemeDtl.slideTo(0);
});
},
},
});
}
} else {
if (swiperKboThemeDtl) {
swiperKboThemeDtl.destroy();
swiperKboThemeDtl = undefined;
}
}
}
function pdpDisplayThemeKboSwiperDtl() {
// 초기에 실행
swiperThemeKboDtlInit();
// 리사이즈 이벤트 바인딩
$(window).on("resize", function () {
swiperThemeKboDtlInit();
});
flagScroll = false;
}

8
product/pdp_display_theme_kbo.html
View File

@@ -506,7 +506,7 @@
<div class="theme-story"></div>
<div class="item aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-offset="9999" data-aos-duration="200">
<div class="displayThemeDtl">
<div class="displayThemeKboDtl">
<p class="swiper-info">좌우 화살표를 눌러 더 많은 디자인을 확인해보세요!</p>
<div class="swiper">
<div class="swiper-wrapper">
@@ -516,7 +516,7 @@
</div>
<div class="text_area">
<h5>Cluster</h5>
<p>클러스터 화면에 응원하는 KBO팀의 로고와 팀 칼라가 적용됩니다. 구단별 캐릭터와 함께 팀 정신을 느껴 보세요.</p>
<p>클러스터 화면에 응원하는 KBO팀의 로고와 팀 컬러가 적용됩니다. 구단별 캐릭터와 함께 팀 정신을 느껴 보세요.</p>
</div>
</div>
<div class="swiper-slide">
@@ -526,7 +526,7 @@
<div class="text_area">
<h5>Navigation</h5>
<p>
내비게이션의 각 메뉴 화면을 넘길 때 마다 특별한 KBO 팀 아이콘과 팀 칼라가 적용된 것을 확인할 수 있습니다.<br />
내비게이션의 각 메뉴 화면을 넘길 때 마다 특별한 KBO 팀 아이콘과 팀 컬러가 적용된 것을 확인할 수 있습니다.<br />
스타일리쉬하고 특별한 운전 경험을 완성합니다.
</p>
</div>
@@ -547,7 +547,7 @@
<div class="text_area">
<h5>Profile</h5>
<p>
NBA팀의 로고와 칼라를 활용하여 디자인된 다양한 프로필 이미지를 선택할 수 있습니다.<br />
NBA팀의 로고와 컬러를 활용하여 디자인된 다양한 프로필 이미지를 선택할 수 있습니다.<br />
운전자 별로 다른 이미지를 골라 보세요.
</p>
</div>