디즈니 어드민에 맞춰 수정

This commit is contained in:
hyeonggil
2025-07-12 18:04:40 +09:00
parent d26d4561bc
commit e93e4dd8cf
7 changed files with 5305 additions and 5141 deletions

View File

@@ -4176,7 +4176,7 @@
width: auto;
}
}
.displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li button {
.displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li .tab-btn {
display: flex;
align-items: center;
width: 100%;
@@ -4188,7 +4188,7 @@
cursor: pointer;
}
@media (min-width: 768px) {
.displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li button {
.displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li .tab-btn {
width: auto;
height: 4.3rem;
padding: 0 1.6rem 0 1.2rem;
@@ -4197,7 +4197,7 @@
border-radius: 2.2rem;
border: 0.2rem solid rgba(255, 255, 255, 0.2);
}
.displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li button:before {
.displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li .tab-btn:before {
content: "";
display: block;
width: 2.2rem;
@@ -4206,16 +4206,16 @@
background: url(../images/kia/pdp/display_theme_disney/ico_tab.png) no-repeat center top/100% auto;
}
}
.displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li.active button {
.displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li.active .tab-btn {
color: #fff;
}
@media (min-width: 768px) {
.displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li.active button {
.displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li.active .tab-btn {
border: 0;
background: linear-gradient(90deg, #ed1c24 0%, #b51016 100%);
padding: 0 1.8rem 0 1.4rem;
}
.displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li.active button:before {
.displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li.active .tab-btn:before {
background-image: url(../images/kia/pdp/display_theme_disney/ico_tab_active.png);
}
}
@@ -4576,17 +4576,12 @@
.displayThemeDesney .btn-zoom {
display: block;
position: absolute;
top: 1rem;
right: 1rem;
top: 0;
right: 0;
width: 2.4rem;
height: 2.4rem;
background: url(../images/kia/pdp/display_theme_disney/btn_zoom.png) no-repeat 0 0/100% auto;
}
@media (min-width: 768px) {
.displayThemeDesney .btn-zoom {
display: none;
}
}
.desktop .displayThemeDesney .mobile {
display: none;

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

View File

@@ -4,6 +4,41 @@ $(document).ready(function () {
history.scrollRestoration = "manual";
}
$(document).on("click", ".pdpDetail .tab-menu .tab-btn", function () {
const $thisBtn = $(this);
const $tabWrap = $(".pdpDetail .tab-wrap");
const $tabBtns = $(".pdpDetail .tab-menu .tab-btn");
const $tabContents = $(".pdpDetail .tab-box");
const currentIndex = $tabBtns.index($thisBtn); // index 구하기
const currentTabBtnText = $thisBtn.text();
// 탭 버튼 active 처리
$tabBtns.closest("li").removeClass("active");
$thisBtn.closest("li").addClass("active");
// 탭 콘텐츠 show/hide
$tabContents.hide().eq(currentIndex).show();
// 스크롤 이동
$("html, body").animate(
{
scrollTop: $tabWrap.offset().top - 60,
},
200
);
// 모바일/태블릿 메뉴 닫기
if ($("body").hasClass("moblie") || $("body").hasClass("tablet")) {
$(".pdpDetail .tab-menu .btn-select").removeClass("open").text(currentTabBtnText);
$(".pdpDetail .tab-menu ul").slideUp(200);
}
});
$(document).on("click", ".pdpDetail .tab-menu .btn-select", function () {
const $this = $(this);
$this.toggleClass("open").next().slideToggle(200);
});
//윈도우 사이즈 반응형에 따른 스크립트
const body = document.querySelector("body");
var targetSize = "";

View File

@@ -422,13 +422,13 @@
<div class="tab-wrap">
<div class="tab-menu cont-select">
<div class="inner">
<button class="btn-select" onclick="pdpDisplayTabMobile()">Marvels Avengers Comics</button>
<div class="btn-select">Marvels Avengers Comics</div>
<ul>
<li class="active">
<button type="button" onclick="pdpDisplayTab(this, '.box1')">Marvels Avengers Comics</button>
<span class="tab-btn">Marvels Avengers Comics</span>
</li>
<li>
<button type="button" onclick="pdpDisplayTab(this, '.box2')">Marvels Avengers Assemble</button>
<span class="tab-btn">Marvels Avengers Assemble</span>
</li>
</ul>
</div>
@@ -551,9 +551,7 @@
<div class="tit-area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<h3>
Whats <br />Coming Up <br />
<span class="next"
>Next<i class="speech-bubble">Stay tuned for the next <br />Marvel Display Themes!</i></span
>?
<span class="next">Next<i class="speech-bubble">Stay tuned for the next <br />Marvel Display Themes!</i></span>?
</h3>
</div>
<div class="image_area">
@@ -570,13 +568,13 @@
<div class="item welcome-goodbye" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="image_area">
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_disney/welcome2.mp4" type="video/mp4" />
<source src="../assets/images/kia/pdp/display_theme_disney/lakers_welcome.mp4" type="video/mp4" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="image_area">
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_disney/goodbye2.mp4" type="video/mp4" />
<source src="../assets/images/kia/pdp/display_theme_disney/lakers_goodbye.mp4" type="video/mp4" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
@@ -681,9 +679,7 @@
<div class="tit-area">
<h3>
Whats <br />Coming Up <br />
<span class="next"
>Next<i class="speech-bubble">Stay tuned for the next <br />Marvel Display Themes!</i></span
>?
<span class="next">Next<em class="speech-bubble">Stay tuned for the next <br />Marvel Display Themes!</em>?</span>
</h3>
</div>
<div class="image_area">