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-19 21:35:52 +09:00
parent bbdd87be3f
commit ed9b8e8b3b
115 changed files with 7980 additions and 4892 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
kr/assets/css.zip Normal file
View File

Binary file not shown.

83
kr/assets/css/common.css
View File

@@ -72,6 +72,8 @@ video::-webkit-media-controls {
margin: 0 auto;
padding-left: 0rem;
padding-right: 0rem;
position: relative;
z-index: 1;
}
}
.hederWarp .headerInner .headerTop {
@@ -636,6 +638,9 @@ video::-webkit-media-controls {
.hederWarp.hBoder {
border-bottom: 1px solid #dedede;
}
.hederWarp.hBoder.menu-open .user .icon-user {
background-image: url(../images/common/icon-user.svg);
}
.hederWarp_n {
position: relative;
@@ -644,33 +649,23 @@ video::-webkit-media-controls {
overflow-x: clip;
background-color: transparent;
}
.hederWarp_n::before {
opacity: 1;
transition: opacity 0.1s ease-in-out;
}
@media (max-width: 1240px) {
.hederWarp_n {
padding: 0 2rem;
}
}
.hederWarp_n.menu-open {
background-color: #fff;
}
.hederWarp_n.menu-open:before {
opacity: 0 !important;
}
.hederWarp_n.menu-open + .pageTitle {
z-index: 0 !important;
}
.hederWarp_n.menu-open .user .icon-user {
background-image: url(../images/common/icon-user.svg) !important;
}
.hederWarp_n.menu-open .headerInner .gnb .logoWrap a {
color: #05141f;
}
.hederWarp_n.menu-open .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1 {
color: #05141f;
}
.hederWarp_n.menu-open .headerInner .gnb .menuWarp .menuBg {
opacity: 1;
}
.hederWarp_n.menu-open .headerInner .func .carlist .carItem span {
color: #05141f;
}
@@ -703,6 +698,11 @@ video::-webkit-media-controls {
background-color: #000;
}
}
@media (min-width: 1024px) {
.hederWarp_n.menu-open .headerInner .menuBg::after {
opacity: 1;
}
}
.hederWarp_n .headerInner {
display: flex;
justify-content: space-between;
@@ -716,13 +716,40 @@ video::-webkit-media-controls {
height: 5.6rem;
}
}
.hederWarp_n .headerInner .menuBg {
display: none;
}
@media (min-width: 1024px) {
.hederWarp_n .headerInner .menuBg {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
background-color: #fff;
transition: height 0.2s;
}
.hederWarp_n .headerInner .menuBg::after {
content: "";
position: absolute;
top: 80px;
left: 0;
right: 0;
border-top: 1px solid #dedede;
z-index: 2;
opacity: 0;
transition: opacity 0.2s;
}
}
.hederWarp_n .headerInner .gnb {
display: flex;
justify-content: flex-start;
align-items: center;
}
.hederWarp_n .headerInner .gnb .logoWrap {
z-index: 0;
position: relative;
z-index: 2;
}
@media (min-width: 1024px) {
.hederWarp_n .headerInner .gnb .logoWrap {
@@ -947,23 +974,6 @@ video::-webkit-media-controls {
margin-top: 1rem;
}
}
.hederWarp_n .headerInner .gnb .menuWarp .menuBg {
transition: all 0.1s ease-in-out;
background-color: #fff;
}
@media (min-width: 1024px) {
.hederWarp_n .headerInner .gnb .menuWarp .menuBg {
display: block;
position: absolute;
top: 8rem;
left: 0;
right: 0;
z-index: 1;
height: 0;
opacity: 0;
border-top: 1px solid #DEDEDE;
}
}
.hederWarp_n .headerInner .gnb .menuWarp .menu {
display: flex;
margin-left: 4.5rem;
@@ -1172,6 +1182,8 @@ video::-webkit-media-controls {
display: flex;
justify-content: flex-end;
align-items: center;
position: relative;
z-index: 2;
}
.hederWarp_n .headerInner .func .carlist {
position: relative;
@@ -1205,6 +1217,10 @@ video::-webkit-media-controls {
border: none;
outline: none;
}
.hederWarp_n .headerInner .func .carlist .carItem.on::after {
transform: rotate(-180deg);
background-position-x: left;
}
.hederWarp_n .headerInner .func .carlist .carItem.on .carlistItem {
display: block;
}
@@ -1445,6 +1461,11 @@ video::-webkit-media-controls {
background: url("../images/common/icon-tbarrow.svg") center right no-repeat;
background-size: 1.2rem;
}
.hederWarp_n.noBoder .headerInner .func .carlist .carItem.on::after,
.hederWarp_n.hBoder .headerInner .func .carlist .carItem.on::after {
transform: rotate(-180deg);
background-position-x: left;
}
.hederWarp_n.noBoder .headerInner .func .carlist.on a::after,
.hederWarp_n.hBoder .headerInner .func .carlist.on a::after {
transform: rotate(-180deg);

2
kr/assets/css/common.css.map
View File

File diff suppressed because one or more lines are too long

91
kr/assets/css/common.scss
View File

@@ -717,6 +717,11 @@ video::-webkit-media-controls {
//보더가 있는 헤더
.hederWarp.hBoder {
border-bottom: 1px solid #dedede;
&.menu-open {
.user .icon-user {
background-image: url(../images/common/icon-user.svg);
}
}
}
.hederWarp_n {
@@ -726,10 +731,6 @@ video::-webkit-media-controls {
z-index: 101;
overflow-x: clip;
background-color: transparent;
&::before {
opacity:1;
transition: opacity 0.1s ease-in-out;
}
@media (max-width: 1240px) {
padding: 0 2rem;
@@ -739,16 +740,16 @@ video::-webkit-media-controls {
// height: 5.6rem;
}
&.menu-open {
background-color: #fff;
&:before {
opacity: 0 !important;
}
&+.pageTitle {
z-index: 0 !important;
}
.user .icon-user {
background-image: url(../images/common/icon-user.svg) !important;
}
.headerInner {
.gnb {
.logoWrap {
a {
@@ -764,9 +765,6 @@ video::-webkit-media-controls {
}
}
}
.menuBg {
opacity: 1;
}
}
}
@@ -822,7 +820,18 @@ video::-webkit-media-controls {
}
}
}
.menuBg {
@media (min-width: 1024px) {
&::after{
opacity: 1;
}
}
}
}
}
@@ -833,19 +842,45 @@ video::-webkit-media-controls {
max-width: 120rem;
height: 8rem;
margin: 0 auto;
@media (max-width: 1024px) {
height: 5.6rem;
}
.menuBg {
display: none;
@media (min-width: 1024px) {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
background-color: #fff;
transition: height 0.2s;
&::after{
content:"";
position: absolute;
top:80px;
left: 0;
right: 0;
border-top: 1px solid #dedede;
z-index: 2;
opacity: 0;
transition: opacity 0.2s;
}
}
}
.gnb {
display: flex;
justify-content: flex-start;
align-items: center;
.logoWrap {
z-index: 0;
position: relative;
z-index: 2;
@media (min-width: 1024px) {
display: flex;
align-items: center;
@@ -1098,22 +1133,6 @@ video::-webkit-media-controls {
}
}
.menuBg {
transition: all 0.1s ease;
background-color: #fff;
@media (min-width: 1024px) {
display: block;
position: absolute;
top: 8rem;
left: 0;
right: 0;
z-index: 1;
height: 0;
opacity: 0;
border-top: 1px solid #DEDEDE;
}
}
.menu {
display: flex;
margin-left: 4.5rem;
@@ -1367,6 +1386,8 @@ video::-webkit-media-controls {
display: flex;
justify-content: flex-end;
align-items: center;
position: relative;
z-index: 2;
.carlist {
position: relative;
@@ -1408,6 +1429,10 @@ video::-webkit-media-controls {
}
&.on {
&::after {
transform: rotate(-180deg);
background-position-x: left;
}
.carlistItem {
display: block;
}
@@ -1699,6 +1724,12 @@ video::-webkit-media-controls {
background: url("../images/common/icon-tbarrow.svg") center right no-repeat;
background-size: 1.2rem;
}
&.on {
&::after {
transform: rotate(-180deg);
background-position-x: left;
}
}
}
&.on {

2
kr/assets/css/kia.css.map
View File

File diff suppressed because one or more lines are too long

2
kr/assets/css/kia/kia.css.map
View File

File diff suppressed because one or more lines are too long

3723
kr/assets/css/kia/service.css Normal file
View File

File diff suppressed because it is too large Load Diff

735
kr/assets/css/service.css
View File

File diff suppressed because it is too large Load Diff

2
kr/assets/css/service.css.map
View File

File diff suppressed because one or more lines are too long

52
kr/assets/js/common.js
View File

@@ -124,11 +124,20 @@ $(document).ready(function () {
let isEntered = false;
menu_init();
$(document).on("mouseenter", ".desktop .menu, .desktop .logoWrap", function () {
const $headerInner = $(".hederWarp_n .headerInner");
let $menuBg = $(".menuBg");
// menuBg가 없으면 생성 후 삽입
console.log($menuBg.length);
if ($menuBg.length <= 0) {
$menuBg = $('<div class="menuBg" style="height:0;"></div>');
$headerInner.append($menuBg);
}
$(document).on("mouseenter", ".desktop .gnb", function () {
if (isEntered) return;
isEntered = true;
$(".menuDepth2Wrap").hide().stop(true).fadeIn(200);
$(".menuDepth2Wrap").hide().stop(true).fadeIn(240);
$(".desktop .menu").addClass("open");
$(".desktop .hederWarp_n").addClass("menu-open");
@@ -136,21 +145,25 @@ $(document).ready(function () {
.toArray()
.map((el) => Math.floor($(el).outerHeight()));
const menuDepth2WrapHeight = Math.max(...menuDepth2WrapHeights);
$(".desktop .menuBg").css("height", menuDepth2WrapHeight);
// 강제로 리플로우 발생시켜야 transition 작동
requestAnimationFrame(() => {
$menuBg.css("height", `${menuDepth2WrapHeight + 80}px`);
});
});
$(document).on("mouseleave", ".desktop .gnb, .desktop .menuWarp", function (e) {
$(document).on("mouseleave", ".desktop .gnb, .desktop .menuBg", function (e) {
const toElement = e.relatedTarget;
// gnb, menuWarp, logoWrap, menu 내부로 이동한 경우는 무시
if ($(toElement).closest(".desktop .gnb, .desktop .menuWarp, .desktop .logoWrap, .desktop .menu").length > 0) {
if ($(toElement).closest(".desktop .gnb, .desktop .menuWarp, .desktop .logoWrap, .desktop .menuBg").length > 0) {
return;
}
$(".desktop .menuBg").css("height", "0");
$(".menuDepth2Wrap").hide().stop(true);
$(".desktop .menu").removeClass("open");
$(".desktop .hederWarp_n").removeClass("menu-open");
$(".desktop .menuBg").css("height", "0");
isEntered = false;
});
}
@@ -195,12 +208,12 @@ $(document).ready(function () {
});
//자동차 번호/메뉴/로그인 선택 슬라이드
$(".carlist, .carItem, .menu > a, .user > a")
$(".menu > a, .user > a")
.on("mouseover focusin", function () {
$(this).addClass("on");
$(this).next(".carlistItem, .gnbMenu, .userMenu").addClass("on");
$(this).next(".gnbMenu, .userMenu").addClass("on");
$(this)
.next(".carlistItem, .gnbMenu, .userMenu")
.next(".gnbMenu, .userMenu")
.on("mouseover focusin", function () {
$(this).addClass("on");
})
@@ -210,10 +223,27 @@ $(document).ready(function () {
})
.on("mouseleave", function () {
$(this).removeClass("on");
$(this).next(".carlistItem, .gnbMenu, .userMenu").removeClass("on");
$(this).parents(".carlist").removeClass("on");
$(this).next(".gnbMenu, .userMenu").removeClass("on");
});
let isOverCarItem = false;
let isOverCarlistItem = false;
$(".carlist").on("mouseenter", function () {
isOverCarItem = true;
$(".carItem, .carlistItem").addClass("on");
});
$(".carlist").on("mouseleave", function () {
isOverCarItem = false;
setTimeout(removeOnClassIfNeeded, 10);
});
function removeOnClassIfNeeded() {
if (!isOverCarItem && !isOverCarlistItem) {
$(".carItem, .carlistItem").removeClass("on");
}
}
$("#slide-open").click(function () {
if ($("#burgur").hasClass("on")) {
$("#burgur").removeClass("on");