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

GNB & 차량 리스트 개선 UX _20250804 수정

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2025-08-31 18:52:05 +09:00
parent 2c80fdfe48
commit 4a94432e6a
5 changed files with 98 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -913,7 +913,7 @@ video::-webkit-media-controls {
} }
.hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item span { .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item span {
color: #9ea1a2; color: #9ea1a2;
font-size: 1.4rem; font-size: 1.2rem;
} }
.hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item span + span { .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item span + span {
color: #676767; color: #676767;
@@ -4601,12 +4601,14 @@ video::-webkit-media-controls {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 0.8rem; gap: 0.8rem;
max-height: 27rem;
} }
#carListPopup .popContents .carlistItem button { #carListPopup .popContents .carlistItem button {
position: relative; position: relative;
padding: 0.8rem 0 0.8rem 3rem; padding: 0.8rem 0 0.8rem 3rem;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
-webkit-tap-highlight-color: transparent;
} }
#carListPopup .popContents .carlistItem button strong { #carListPopup .popContents .carlistItem button strong {
display: block; display: block;

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

File diff suppressed because one or more lines are too long

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

@@ -137,7 +137,7 @@ video::-webkit-media-controls {
min-width: 2.2rem; min-width: 2.2rem;
} }
span+span { span + span {
&::before { &::before {
content: ""; content: "";
display: block; display: block;
@@ -188,7 +188,8 @@ video::-webkit-media-controls {
left: 50%; left: 50%;
transform: translate(-50%, 0); transform: translate(-50%, 0);
@include desktopMin {} @include desktopMin {
}
.boxBullet { .boxBullet {
display: none; display: none;
@@ -233,7 +234,7 @@ video::-webkit-media-controls {
} }
} }
li+li { li + li {
margin-top: 1rem; margin-top: 1rem;
} }
} }
@@ -243,7 +244,7 @@ video::-webkit-media-controls {
display: block; display: block;
} }
.carItem.on+.carlistItem { .carItem.on + .carlistItem {
display: block; display: block;
} }
} }
@@ -356,7 +357,7 @@ video::-webkit-media-controls {
} }
} }
button+button { button + button {
border-right: 0; border-right: 0;
} }
@@ -378,7 +379,7 @@ video::-webkit-media-controls {
padding: 0; padding: 0;
} }
>a { > a {
display: none; display: none;
@include desktopMin { @include desktopMin {
@@ -419,7 +420,7 @@ video::-webkit-media-controls {
} }
} }
li+li { li + li {
margin-top: 2rem; margin-top: 2rem;
} }
} }
@@ -455,7 +456,7 @@ video::-webkit-media-controls {
} }
} }
li+li { li + li {
margin-top: 3rem; margin-top: 3rem;
@include desktopMin { @include desktopMin {
@@ -484,7 +485,7 @@ video::-webkit-media-controls {
display: block; display: block;
} }
>a { > a {
display: none; display: none;
@include desktopMin { @include desktopMin {
@@ -532,7 +533,7 @@ video::-webkit-media-controls {
} }
} }
li+li { li + li {
margin-top: 1rem; margin-top: 1rem;
} }
} }
@@ -543,7 +544,7 @@ video::-webkit-media-controls {
} }
} }
.menu+.user { .menu + .user {
margin-left: 2rem; margin-left: 2rem;
} }
} }
@@ -555,7 +556,7 @@ video::-webkit-media-controls {
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
} }
.mMenuWarp+.cart { .mMenuWarp + .cart {
margin-left: 0; margin-left: 0;
@include desktopMin { @include desktopMin {
@@ -564,7 +565,7 @@ video::-webkit-media-controls {
} }
.cart { .cart {
>a { > a {
display: flex; display: flex;
align-items: center; align-items: center;
height: 5.6rem; height: 5.6rem;
@@ -652,7 +653,7 @@ video::-webkit-media-controls {
} }
} }
.carlist+.gnbIcon { .carlist + .gnbIcon {
margin-left: 0; margin-left: 0;
@include desktopMin { @include desktopMin {
@@ -693,7 +694,6 @@ video::-webkit-media-controls {
.moblieMenu { .moblieMenu {
.slide-open { .slide-open {
.burgur { .burgur {
.top-line, .top-line,
.bot-line { .bot-line {
background-color: #000; background-color: #000;
@@ -742,11 +742,11 @@ video::-webkit-media-controls {
} }
&.menu-open { &.menu-open {
&~.pageTitle { & ~ .pageTitle {
z-index: 0 !important; z-index: 0 !important;
} }
&~.contentWarp { & ~ .contentWarp {
z-index: 0 !important; z-index: 0 !important;
} }
@@ -802,7 +802,7 @@ video::-webkit-media-controls {
} }
.userLogin { .userLogin {
>a { > a {
border: 1px solid rgba(5, 20, 31, 0.3); border: 1px solid rgba(5, 20, 31, 0.3);
color: #05141f; color: #05141f;
transition: 0.3s; transition: 0.3s;
@@ -1012,7 +1012,7 @@ video::-webkit-media-controls {
background-size: contain; background-size: contain;
} }
&+button { & + button {
border-right: 0; border-right: 0;
} }
} }
@@ -1058,10 +1058,10 @@ video::-webkit-media-controls {
span { span {
color: #9ea1a2; color: #9ea1a2;
font-size: 1.4rem; font-size: 1.2rem;
} }
span+span { span + span {
color: #676767; color: #676767;
font-weight: 400; font-weight: 400;
@@ -1135,7 +1135,7 @@ video::-webkit-media-controls {
width: fit-content; width: fit-content;
} }
span+span { span + span {
font-weight: 400; font-weight: 400;
&::before { &::before {
@@ -1151,7 +1151,7 @@ video::-webkit-media-controls {
} }
} }
li+li { li + li {
margin-top: 1rem; margin-top: 1rem;
} }
} }
@@ -1282,7 +1282,7 @@ video::-webkit-media-controls {
background: url("../images/common/icon-arrow_right.svg") center center no-repeat; background: url("../images/common/icon-arrow_right.svg") center center no-repeat;
} }
&~.menuDepth2Wrap { & ~ .menuDepth2Wrap {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
} }
@@ -1403,7 +1403,7 @@ video::-webkit-media-controls {
font-weight: 600; font-weight: 600;
color: #676767; color: #676767;
&+a { & + a {
border-left: 1px solid #dedede; border-left: 1px solid #dedede;
} }
} }
@@ -1520,7 +1520,7 @@ video::-webkit-media-controls {
white-space: nowrap; white-space: nowrap;
} }
span+span { span + span {
&::before { &::before {
content: ""; content: "";
display: block; display: block;
@@ -1554,7 +1554,7 @@ video::-webkit-media-controls {
display: block; display: block;
} }
&.on+.carlistItem { &.on + .carlistItem {
display: block; display: block;
} }
@@ -1625,7 +1625,7 @@ video::-webkit-media-controls {
} }
} }
span+span { span + span {
&::before { &::before {
content: ""; content: "";
display: block; display: block;
@@ -1651,7 +1651,7 @@ video::-webkit-media-controls {
position: relative; position: relative;
padding-left: 2rem; padding-left: 2rem;
>span { > span {
display: inline; display: inline;
} }
@@ -1704,7 +1704,7 @@ video::-webkit-media-controls {
} }
} }
li+li { li + li {
margin-top: 1rem; margin-top: 1rem;
@include desktopMin { @include desktopMin {
@@ -1724,7 +1724,7 @@ video::-webkit-media-controls {
display: none; display: none;
} }
>a { > a {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.3rem 0.6rem; padding: 0.3rem 0.6rem;
@@ -1749,7 +1749,7 @@ video::-webkit-media-controls {
display: none; display: none;
} }
>a { > a {
display: flex; display: flex;
align-items: center; align-items: center;
height: 8rem; height: 8rem;
@@ -1802,7 +1802,7 @@ video::-webkit-media-controls {
} }
} }
li+li { li + li {
margin-top: 1rem; margin-top: 1rem;
} }
} }
@@ -1814,7 +1814,7 @@ video::-webkit-media-controls {
} }
.cart { .cart {
>a { > a {
display: flex; display: flex;
align-items: center; align-items: center;
height: 5.6rem; height: 5.6rem;
@@ -1924,7 +1924,7 @@ video::-webkit-media-controls {
} }
.userLogin { .userLogin {
>a { > a {
border: 1px solid rgba(5, 20, 31, 0.3); border: 1px solid rgba(5, 20, 31, 0.3);
color: #05141f; color: #05141f;
transition: 0.3s; transition: 0.3s;
@@ -2166,7 +2166,7 @@ video::-webkit-media-controls {
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
} }
a+a { a + a {
margin-left: 2rem; margin-left: 2rem;
} }
} }
@@ -2249,7 +2249,7 @@ video::-webkit-media-controls {
} }
} }
.btn-select.on+.list-member { .btn-select.on + .list-member {
display: block; display: block;
} }
@@ -2642,7 +2642,8 @@ video::-webkit-media-controls {
margin-bottom: 0rem; margin-bottom: 0rem;
} }
@include desktopMax {} @include desktopMax {
}
dt { dt {
color: #676767; color: #676767;
@@ -2665,7 +2666,7 @@ video::-webkit-media-controls {
} }
} }
dl+dl { dl + dl {
border-bottom: 0; border-bottom: 0;
margin-top: 0rem; margin-top: 0rem;
padding-bottom: 0rem; padding-bottom: 0rem;
@@ -2682,7 +2683,7 @@ video::-webkit-media-controls {
} }
} }
a+a { a + a {
margin-top: 1.1rem; margin-top: 1.1rem;
} }
} }
@@ -2756,7 +2757,7 @@ video::-webkit-media-controls {
} }
} }
p+p { p + p {
margin-top: 1.5rem; margin-top: 1.5rem;
@include tablet { @include tablet {
@@ -2855,7 +2856,7 @@ video::-webkit-media-controls {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
a+a { a + a {
margin-top: 1rem; margin-top: 1rem;
@include tablet { @include tablet {
@@ -3040,7 +3041,7 @@ video::-webkit-media-controls {
cursor: not-allowed; cursor: not-allowed;
} }
[type="radio"]:disabled+span { [type="radio"]:disabled + span {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
@@ -3156,7 +3157,7 @@ video::-webkit-media-controls {
} }
} }
>div { > div {
width: 100%; width: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -3175,11 +3176,11 @@ video::-webkit-media-controls {
} }
} }
input[type="text"]+input[type="text"] { input[type="text"] + input[type="text"] {
margin-left: 1rem; margin-left: 1rem;
} }
input[type="text"]+select { input[type="text"] + select {
width: 100%; width: 100%;
margin-top: 1rem; margin-top: 1rem;
@@ -3199,11 +3200,11 @@ video::-webkit-media-controls {
} }
} }
>div.phone { > div.phone {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
>div.mail { > div.mail {
input { input {
width: calc(100% / 2 - 4.5%); width: calc(100% / 2 - 4.5%);
} }
@@ -3365,7 +3366,7 @@ video::-webkit-media-controls {
} }
} }
button+label { button + label {
margin-left: 1rem; margin-left: 1rem;
} }
} }
@@ -3384,7 +3385,7 @@ video::-webkit-media-controls {
} }
} }
dl+dl { dl + dl {
margin-top: 3rem; margin-top: 3rem;
} }
@@ -3419,7 +3420,7 @@ video::-webkit-media-controls {
} }
} }
p+p { p + p {
margin-top: 2rem; margin-top: 2rem;
} }
} }
@@ -3461,7 +3462,7 @@ video::-webkit-media-controls {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
a+a { a + a {
margin-top: 1rem; margin-top: 1rem;
@include tablet { @include tablet {
@@ -3601,12 +3602,12 @@ video::-webkit-media-controls {
} }
.cartItemInfo { .cartItemInfo {
>div { > div {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 0; margin-top: 0;
>p { > p {
margin-left: 0; margin-left: 0;
border-radius: 0; border-radius: 0;
overflow: hidden; overflow: hidden;
@@ -3680,7 +3681,7 @@ video::-webkit-media-controls {
} }
} }
dt+dd { dt + dd {
margin-top: 0.5rem; margin-top: 0.5rem;
@include desktopMin { @include desktopMin {
@@ -3688,7 +3689,7 @@ video::-webkit-media-controls {
} }
} }
dd+dd { dd + dd {
margin-top: 1.5rem; margin-top: 1.5rem;
font-size: 1.4rem; font-size: 1.4rem;
@@ -3700,7 +3701,7 @@ video::-webkit-media-controls {
} }
} }
.cartItemInfo+dl { .cartItemInfo + dl {
min-width: 20rem; min-width: 20rem;
text-align: right; text-align: right;
@@ -3727,7 +3728,7 @@ video::-webkit-media-controls {
} }
} }
>dl { > dl {
.couponBtn { .couponBtn {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@@ -3835,7 +3836,7 @@ video::-webkit-media-controls {
cursor: not-allowed; cursor: not-allowed;
} }
[type="radio"]:disabled+span { [type="radio"]:disabled + span {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
@@ -3936,7 +3937,7 @@ video::-webkit-media-controls {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
a+a { a + a {
margin-top: 1rem; margin-top: 1rem;
@include tablet { @include tablet {
@@ -3995,7 +3996,7 @@ video::-webkit-media-controls {
padding: 0 3rem; padding: 0 3rem;
} }
&+.content { & + .content {
margin-top: 3rem; margin-top: 3rem;
padding-top: 6rem; padding-top: 6rem;
border-top: 1px solid #d9d9d9; border-top: 1px solid #d9d9d9;
@@ -4055,7 +4056,7 @@ video::-webkit-media-controls {
margin-top: 4rem; margin-top: 4rem;
} }
>p { > p {
margin-top: 2rem; margin-top: 2rem;
line-height: 3rem; line-height: 3rem;
font-size: 2.2rem; font-size: 2.2rem;
@@ -4188,7 +4189,7 @@ video::-webkit-media-controls {
font-size: 1.4rem; font-size: 1.4rem;
} }
>span { > span {
display: block; display: block;
@include maxtablet { @include maxtablet {
@@ -4205,7 +4206,7 @@ video::-webkit-media-controls {
font-size: 1.6rem; font-size: 1.6rem;
} }
&+.agree-area { & + .agree-area {
margin-bottom: 4rem; margin-bottom: 4rem;
} }
@@ -4346,7 +4347,7 @@ video::-webkit-media-controls {
padding: 0; padding: 0;
margin: 0 3rem; margin: 0 3rem;
&+.content { & + .content {
padding: 6rem 0; padding: 6rem 0;
} }
@@ -4419,7 +4420,7 @@ video::-webkit-media-controls {
margin-top: 4rem; margin-top: 4rem;
} }
>p { > p {
margin-top: 2rem; margin-top: 2rem;
line-height: 2.2rem; line-height: 2.2rem;
font-size: 1.6rem; font-size: 1.6rem;
@@ -4575,7 +4576,7 @@ video::-webkit-media-controls {
height: 40px; height: 40px;
} }
.swiper-scrollbar-lock+.swiper-scrollbar-after-space { .swiper-scrollbar-lock + .swiper-scrollbar-after-space {
display: none; display: none;
} }
} }
@@ -4619,7 +4620,7 @@ video::-webkit-media-controls {
} }
} }
p+p { p + p {
margin-top: 1.5rem; margin-top: 1.5rem;
@include tablet { @include tablet {
@@ -4718,7 +4719,7 @@ video::-webkit-media-controls {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
a+a { a + a {
margin-top: 1rem; margin-top: 1rem;
@include tablet { @include tablet {
@@ -5098,12 +5099,14 @@ video::-webkit-media-controls {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 0.8rem; gap: 0.8rem;
max-height: 27rem;
button { button {
position: relative; position: relative;
padding: 0.8rem 0 0.8rem 3rem; padding: 0.8rem 0 0.8rem 3rem;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
-webkit-tap-highlight-color: transparent;
strong { strong {
display: block; display: block;
@@ -5150,4 +5153,4 @@ video::-webkit-media-controls {
max-width: 12.5rem; max-width: 12.5rem;
} }
} }
} }

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

@@ -1515,7 +1515,6 @@ $(document).on("click", "#carListPopup .popContents .carlistItem button", functi
$(this).closest("li").addClass("selected"); $(this).closest("li").addClass("selected");
// 상위 .carItem span에 선택된 텍스트 적용 // 상위 .carItem span에 선택된 텍스트 적용
$(".hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item strong").text(selectedText); // $(".hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item strong").text(selectedText);
$(".hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item span").text(selectedTextCode); // $(".hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item span").text(selectedTextCode);
close_layer_popup("carListPopup");
}); });

20
kr/mypage/coupon-list_new.html
View File

@@ -731,12 +731,30 @@
<em>666JH4TB2H26CC012345</em> <em>666JH4TB2H26CC012345</em>
</button> </button>
</li> </li>
<li>
<button>
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성 개선</strong>
<em>444JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>쏘렌토(MQ4) 하이브리드</strong>
<em>555JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>스포티지 개조 25</strong>
<em>666JH4TB2H26CC012345</em>
</button>
</li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="towButton"> <div class="towButton">
<button class="cartBtn leftBtn" onclick="close_layer_popup('carListPopup')"><p>취소</p></button> <button class="cartBtn leftBtn" onclick="close_layer_popup('carListPopup')"><p>취소</p></button>
<button class="PurchaseBtn rightBtn"><p>선택</p></button> <button class="PurchaseBtn rightBtn" onclick="close_layer_popup('carListPopup')"><p>선택</p></button>
</div> </div>
</div> </div>
</div> </div>