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

차량 선택 기능 추가 및 UI 개선: 차량 리스트에서 버튼으로 선택 가능하도록 변경하고, CSS 스타일 조정으로 레이아웃 및 텍스트 정렬 개선

Browse Source
This commit is contained in:
hyeonggil
2025-08-29 16:51:38 +09:00
parent b45f6ec501
commit 2c80fdfe48
5 changed files with 256 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -936,6 +936,7 @@ video::-webkit-media-controls {
font-size: 1.2rem; font-size: 1.2rem;
color: #676767; color: #676767;
border-bottom: 1px solid #676767; border-bottom: 1px solid #676767;
cursor: pointer;
} }
.hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .arrow { .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .arrow {
display: none; display: none;
@@ -1244,9 +1245,19 @@ video::-webkit-media-controls {
} }
@media (min-width: 1025px) { @media (min-width: 1025px) {
.hederWarp_n .headerInner .func .carlist .carItem { .hederWarp_n .headerInner .func .carlist .carItem {
justify-content: space-between;
width: 35rem;
height: 3.5rem; height: 3.5rem;
padding: 0; padding: 0;
border-bottom: 1px solid #cdd0d2; border-bottom: 1px solid #cdd0d2;
text-align: left;
}
.hederWarp_n .headerInner .func .carlist .carItem span {
display: block;
width: 35rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
} }
.hederWarp_n .headerInner .func .carlist .carItem::after { .hederWarp_n .headerInner .func .carlist .carItem::after {
@@ -1272,6 +1283,9 @@ video::-webkit-media-controls {
border-bottom: 1px solid #dedede; border-bottom: 1px solid #dedede;
} }
} }
.hederWarp_n .headerInner .func .carlist .carItem.on {
border-bottom-color: #000;
}
.hederWarp_n .headerInner .func .carlist .carItem.on::after { .hederWarp_n .headerInner .func .carlist .carItem.on::after {
transform: rotate(-180deg); transform: rotate(-180deg);
background-position-x: left; background-position-x: left;
@@ -1283,10 +1297,6 @@ video::-webkit-media-controls {
color: #fff; color: #fff;
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 400; font-weight: 400;
display: flex;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
white-space: nowrap; white-space: nowrap;
} }
.hederWarp_n .headerInner .func .carlist .carItem span + span::before { .hederWarp_n .headerInner .func .carlist .carItem span + span::before {
@@ -1311,7 +1321,7 @@ video::-webkit-media-controls {
} }
@media (min-width: 1025px) { @media (min-width: 1025px) {
.hederWarp_n .headerInner .func .carlist .carlistItem { .hederWarp_n .headerInner .func .carlist .carlistItem {
top: 3.1rem; top: 3.2rem;
left: 0; left: 0;
right: 0; right: 0;
transform: initial; transform: initial;
@@ -1350,13 +1360,16 @@ video::-webkit-media-controls {
/* WebKit 기반 브라우저용 스크롤바 스타일 */ /* WebKit 기반 브라우저용 스크롤바 스타일 */
} }
.hederWarp_n .headerInner .func .carlist .carlistItem ul::-webkit-scrollbar { .hederWarp_n .headerInner .func .carlist .carlistItem ul::-webkit-scrollbar {
width: 0.4rem; /* 폭 4px */ width: 0.4rem;
/* 폭 4px */
} }
.hederWarp_n .headerInner .func .carlist .carlistItem ul::-webkit-scrollbar-track { .hederWarp_n .headerInner .func .carlist .carlistItem ul::-webkit-scrollbar-track {
background: transparent; /* 트랙 투명 */ background: transparent;
/* 트랙 투명 */
} }
.hederWarp_n .headerInner .func .carlist .carlistItem ul::-webkit-scrollbar-thumb { .hederWarp_n .headerInner .func .carlist .carlistItem ul::-webkit-scrollbar-thumb {
background-color: #dedede; /* 스크롤바 색상 */ background-color: #dedede;
/* 스크롤바 색상 */
border-radius: 0.2rem; border-radius: 0.2rem;
} }
} }
@@ -1412,6 +1425,7 @@ video::-webkit-media-controls {
} }
.hederWarp_n .headerInner .func .carlist .carlistItem ul li button { .hederWarp_n .headerInner .func .carlist .carlistItem ul li button {
text-align: left; text-align: left;
cursor: pointer;
} }
} }
.hederWarp_n .headerInner .func .carlist .carlistItem ul li .btn-info { .hederWarp_n .headerInner .func .carlist .carlistItem ul li .btn-info {
@@ -1600,7 +1614,7 @@ video::-webkit-media-controls {
} }
.hederWarp_n.noBoder .headerInner .func .carlist .carItem span, .hederWarp_n.noBoder .headerInner .func .carlist .carItem span,
.hederWarp_n.hBoder .headerInner .func .carlist .carItem span { .hederWarp_n.hBoder .headerInner .func .carlist .carItem span {
color: #05141f; color: #000;
} }
.hederWarp_n.noBoder .headerInner .func .carlist .carItem::after, .hederWarp_n.noBoder .headerInner .func .carlist .carItem::after,
.hederWarp_n.hBoder .headerInner .func .carlist .carItem::after { .hederWarp_n.hBoder .headerInner .func .carlist .carItem::after {
@@ -4531,7 +4545,8 @@ video::-webkit-media-controls {
position: relative; position: relative;
padding: 1.6rem 1.6rem 1.4rem; padding: 1.6rem 1.6rem 1.4rem;
background: #fff; background: #fff;
border: 1px solid #697279; /* 테두리 추가 */ border: 1px solid #697279;
/* 테두리 추가 */
border-radius: 0.6rem; border-radius: 0.6rem;
font-size: 1.4rem; font-size: 1.4rem;
color: #9ea1a2; color: #9ea1a2;
@@ -4539,12 +4554,14 @@ video::-webkit-media-controls {
} }
.tooltip-bubble .edge { .tooltip-bubble .edge {
position: absolute; position: absolute;
top: -0.7rem; /* border 두께 때문에 살짝 조정 */ top: -0.7rem;
/* border 두께 때문에 살짝 조정 */
left: 2.4rem; left: 2.4rem;
width: 1.2rem; width: 1.2rem;
height: 1.2rem; height: 1.2rem;
background: #fff; background: #fff;
border-left: 1px solid #697279; /* 포인터 테두리 */ border-left: 1px solid #697279;
/* 포인터 테두리 */
border-top: 1px solid #697279; border-top: 1px solid #697279;
transform: rotate(45deg); transform: rotate(45deg);
} }
@@ -4589,6 +4606,7 @@ video::-webkit-media-controls {
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;
} }
#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

195
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,8 +188,7 @@ 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;
@@ -234,7 +233,7 @@ video::-webkit-media-controls {
} }
} }
li + li { li+li {
margin-top: 1rem; margin-top: 1rem;
} }
} }
@@ -244,7 +243,7 @@ video::-webkit-media-controls {
display: block; display: block;
} }
.carItem.on + .carlistItem { .carItem.on+.carlistItem {
display: block; display: block;
} }
} }
@@ -357,7 +356,7 @@ video::-webkit-media-controls {
} }
} }
button + button { button+button {
border-right: 0; border-right: 0;
} }
@@ -379,7 +378,7 @@ video::-webkit-media-controls {
padding: 0; padding: 0;
} }
> a { >a {
display: none; display: none;
@include desktopMin { @include desktopMin {
@@ -420,7 +419,7 @@ video::-webkit-media-controls {
} }
} }
li + li { li+li {
margin-top: 2rem; margin-top: 2rem;
} }
} }
@@ -456,7 +455,7 @@ video::-webkit-media-controls {
} }
} }
li + li { li+li {
margin-top: 3rem; margin-top: 3rem;
@include desktopMin { @include desktopMin {
@@ -485,7 +484,7 @@ video::-webkit-media-controls {
display: block; display: block;
} }
> a { >a {
display: none; display: none;
@include desktopMin { @include desktopMin {
@@ -533,7 +532,7 @@ video::-webkit-media-controls {
} }
} }
li + li { li+li {
margin-top: 1rem; margin-top: 1rem;
} }
} }
@@ -544,7 +543,7 @@ video::-webkit-media-controls {
} }
} }
.menu + .user { .menu+.user {
margin-left: 2rem; margin-left: 2rem;
} }
} }
@@ -556,7 +555,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 {
@@ -565,7 +564,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;
@@ -653,7 +652,7 @@ video::-webkit-media-controls {
} }
} }
.carlist + .gnbIcon { .carlist+.gnbIcon {
margin-left: 0; margin-left: 0;
@include desktopMin { @include desktopMin {
@@ -694,6 +693,7 @@ 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;
} }
} }
@@ -1047,6 +1047,7 @@ video::-webkit-media-controls {
padding: 1.2rem 1.4rem; padding: 1.2rem 1.4rem;
background-color: #fff; background-color: #fff;
border: 1px solid #dedede; border: 1px solid #dedede;
strong { strong {
display: block; display: block;
margin-bottom: 0.4rem; margin-bottom: 0.4rem;
@@ -1054,12 +1055,13 @@ video::-webkit-media-controls {
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 400; font-weight: 400;
} }
span { span {
color: #9ea1a2; color: #9ea1a2;
font-size: 1.4rem; font-size: 1.4rem;
} }
span + span { span+span {
color: #676767; color: #676767;
font-weight: 400; font-weight: 400;
@@ -1083,6 +1085,7 @@ video::-webkit-media-controls {
font-size: 1.2rem; font-size: 1.2rem;
color: #676767; color: #676767;
border-bottom: 1px solid #676767; border-bottom: 1px solid #676767;
cursor: pointer;
} }
.arrow { .arrow {
@@ -1132,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 {
@@ -1148,7 +1151,7 @@ video::-webkit-media-controls {
} }
} }
li + li { li+li {
margin-top: 1rem; margin-top: 1rem;
} }
} }
@@ -1279,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;
} }
} }
@@ -1400,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;
} }
} }
@@ -1456,9 +1459,20 @@ video::-webkit-media-controls {
height: 8rem; height: 8rem;
@include desktopMin { @include desktopMin {
justify-content: space-between;
width: 35rem;
height: 3.5rem; height: 3.5rem;
padding: 0; padding: 0;
border-bottom: 1px solid #cdd0d2; border-bottom: 1px solid #cdd0d2;
text-align: left;
span {
display: block;
width: 35rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
} }
&::after { &::after {
@@ -1486,6 +1500,8 @@ video::-webkit-media-controls {
} }
&.on { &.on {
border-bottom-color: #000;
&::after { &::after {
transform: rotate(-180deg); transform: rotate(-180deg);
background-position-x: left; background-position-x: left;
@@ -1500,13 +1516,11 @@ video::-webkit-media-controls {
color: #fff; color: #fff;
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 400; font-weight: 400;
display: flex;
width: fit-content;
// min-width: 2.2rem; // min-width: 2.2rem;
white-space: nowrap; white-space: nowrap;
} }
span + span { span+span {
&::before { &::before {
content: ""; content: "";
display: block; display: block;
@@ -1529,7 +1543,7 @@ video::-webkit-media-controls {
transform: translate(-50%, 0); transform: translate(-50%, 0);
@include desktopMin { @include desktopMin {
top: 3.1rem; top: 3.2rem;
left: 0; left: 0;
right: 0; right: 0;
transform: initial; transform: initial;
@@ -1540,7 +1554,7 @@ video::-webkit-media-controls {
display: block; display: block;
} }
&.on + .carlistItem { &.on+.carlistItem {
display: block; display: block;
} }
@@ -1570,21 +1584,25 @@ video::-webkit-media-controls {
/* WebKit 기반 브라우저용 스크롤바 스타일 */ /* WebKit 기반 브라우저용 스크롤바 스타일 */
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 0.4rem; /* 폭 4px */ width: 0.4rem;
/* 폭 4px */
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background: transparent; /* 트랙 투명 */ background: transparent;
/* 트랙 투명 */
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #dedede; /* 스크롤바 색상 */ background-color: #dedede;
/* 스크롤바 색상 */
border-radius: 0.2rem; border-radius: 0.2rem;
} }
} }
li { li {
align-items: center; align-items: center;
a { a {
display: flex; display: flex;
font-size: 1.4rem; font-size: 1.4rem;
@@ -1601,12 +1619,13 @@ video::-webkit-media-controls {
font-weight: 400; font-weight: 400;
display: flex; display: flex;
width: fit-content; width: fit-content;
@include desktopMin { @include desktopMin {
display: inline; display: inline;
} }
} }
span + span { span+span {
&::before { &::before {
content: ""; content: "";
display: block; display: block;
@@ -1623,6 +1642,7 @@ video::-webkit-media-controls {
display: inline; display: inline;
} }
} }
button { button {
display: inline; display: inline;
} }
@@ -1630,11 +1650,14 @@ video::-webkit-media-controls {
@include desktopMin { @include desktopMin {
position: relative; position: relative;
padding-left: 2rem; padding-left: 2rem;
> span {
>span {
display: inline; display: inline;
} }
button { button {
text-align: left; text-align: left;
cursor: pointer;
} }
} }
@@ -1647,6 +1670,7 @@ video::-webkit-media-controls {
background: url("../images/common/ico_info.png") center center no-repeat; background: url("../images/common/ico_info.png") center center no-repeat;
background-size: 1.3rem auto; background-size: 1.3rem auto;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
.tooltip { .tooltip {
display: flex; display: flex;
@@ -1667,6 +1691,7 @@ video::-webkit-media-controls {
height: 1.4rem; height: 1.4rem;
margin-right: 0.4rem; margin-right: 0.4rem;
} }
&.selected { &.selected {
&:before { &:before {
content: ""; content: "";
@@ -1679,7 +1704,7 @@ video::-webkit-media-controls {
} }
} }
li + li { li+li {
margin-top: 1rem; margin-top: 1rem;
@include desktopMin { @include desktopMin {
@@ -1699,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;
@@ -1724,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;
@@ -1777,7 +1802,7 @@ video::-webkit-media-controls {
} }
} }
li + li { li+li {
margin-top: 1rem; margin-top: 1rem;
} }
} }
@@ -1789,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;
@@ -1867,7 +1892,7 @@ video::-webkit-media-controls {
.carlist { .carlist {
.carItem { .carItem {
span { span {
color: #05141f; color: #000;
} }
&::after { &::after {
@@ -1899,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;
@@ -2141,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;
} }
} }
@@ -2224,7 +2249,7 @@ video::-webkit-media-controls {
} }
} }
.btn-select.on + .list-member { .btn-select.on+.list-member {
display: block; display: block;
} }
@@ -2617,8 +2642,7 @@ video::-webkit-media-controls {
margin-bottom: 0rem; margin-bottom: 0rem;
} }
@include desktopMax { @include desktopMax {}
}
dt { dt {
color: #676767; color: #676767;
@@ -2641,7 +2665,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;
@@ -2658,7 +2682,7 @@ video::-webkit-media-controls {
} }
} }
a + a { a+a {
margin-top: 1.1rem; margin-top: 1.1rem;
} }
} }
@@ -2732,7 +2756,7 @@ video::-webkit-media-controls {
} }
} }
p + p { p+p {
margin-top: 1.5rem; margin-top: 1.5rem;
@include tablet { @include tablet {
@@ -2831,7 +2855,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 {
@@ -3016,7 +3040,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;
} }
@@ -3132,7 +3156,7 @@ video::-webkit-media-controls {
} }
} }
> div { >div {
width: 100%; width: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -3151,11 +3175,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;
@@ -3175,11 +3199,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%);
} }
@@ -3341,7 +3365,7 @@ video::-webkit-media-controls {
} }
} }
button + label { button+label {
margin-left: 1rem; margin-left: 1rem;
} }
} }
@@ -3360,7 +3384,7 @@ video::-webkit-media-controls {
} }
} }
dl + dl { dl+dl {
margin-top: 3rem; margin-top: 3rem;
} }
@@ -3395,7 +3419,7 @@ video::-webkit-media-controls {
} }
} }
p + p { p+p {
margin-top: 2rem; margin-top: 2rem;
} }
} }
@@ -3437,7 +3461,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 {
@@ -3577,12 +3601,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;
@@ -3656,7 +3680,7 @@ video::-webkit-media-controls {
} }
} }
dt + dd { dt+dd {
margin-top: 0.5rem; margin-top: 0.5rem;
@include desktopMin { @include desktopMin {
@@ -3664,7 +3688,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;
@@ -3676,7 +3700,7 @@ video::-webkit-media-controls {
} }
} }
.cartItemInfo + dl { .cartItemInfo+dl {
min-width: 20rem; min-width: 20rem;
text-align: right; text-align: right;
@@ -3703,7 +3727,7 @@ video::-webkit-media-controls {
} }
} }
> dl { >dl {
.couponBtn { .couponBtn {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@@ -3811,7 +3835,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;
} }
@@ -3912,7 +3936,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 {
@@ -3971,7 +3995,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;
@@ -4031,7 +4055,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;
@@ -4164,7 +4188,7 @@ video::-webkit-media-controls {
font-size: 1.4rem; font-size: 1.4rem;
} }
> span { >span {
display: block; display: block;
@include maxtablet { @include maxtablet {
@@ -4181,7 +4205,7 @@ video::-webkit-media-controls {
font-size: 1.6rem; font-size: 1.6rem;
} }
& + .agree-area { &+.agree-area {
margin-bottom: 4rem; margin-bottom: 4rem;
} }
@@ -4322,7 +4346,7 @@ video::-webkit-media-controls {
padding: 0; padding: 0;
margin: 0 3rem; margin: 0 3rem;
& + .content { &+.content {
padding: 6rem 0; padding: 6rem 0;
} }
@@ -4395,7 +4419,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;
@@ -4551,7 +4575,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;
} }
} }
@@ -4595,7 +4619,7 @@ video::-webkit-media-controls {
} }
} }
p + p { p+p {
margin-top: 1.5rem; margin-top: 1.5rem;
@include tablet { @include tablet {
@@ -4694,7 +4718,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 {
@@ -5014,7 +5038,8 @@ video::-webkit-media-controls {
position: relative; position: relative;
padding: 1.6rem 1.6rem 1.4rem; padding: 1.6rem 1.6rem 1.4rem;
background: #fff; background: #fff;
border: 1px solid #697279; /* 테두리 추가 */ border: 1px solid #697279;
/* 테두리 추가 */
border-radius: 0.6rem; border-radius: 0.6rem;
font-size: 1.4rem; font-size: 1.4rem;
color: #9ea1a2; color: #9ea1a2;
@@ -5022,12 +5047,14 @@ video::-webkit-media-controls {
.edge { .edge {
position: absolute; position: absolute;
top: -0.7rem; /* border 두께 때문에 살짝 조정 */ top: -0.7rem;
/* border 두께 때문에 살짝 조정 */
left: 2.4rem; left: 2.4rem;
width: 1.2rem; width: 1.2rem;
height: 1.2rem; height: 1.2rem;
background: #fff; background: #fff;
border-left: 1px solid #697279; /* 포인터 테두리 */ border-left: 1px solid #697279;
/* 포인터 테두리 */
border-top: 1px solid #697279; border-top: 1px solid #697279;
transform: rotate(45deg); transform: rotate(45deg);
} }
@@ -5037,21 +5064,25 @@ video::-webkit-media-controls {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.popContents { .popContents {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.payInfoCon { .payInfoCon {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
max-height: 60vh; max-height: 60vh;
} }
.popContents { .popContents {
width: 90%; width: 90%;
max-width: 40rem; max-width: 40rem;
background-color: #fff; background-color: #fff;
border-radius: 0.6rem; border-radius: 0.6rem;
padding: 0 1.6rem; padding: 0 1.6rem;
h2 { h2 {
height: 7.8rem; height: 7.8rem;
padding: 3.2rem 0 2.4rem; padding: 3.2rem 0 2.4rem;
@@ -5060,16 +5091,20 @@ video::-webkit-media-controls {
color: #000; color: #000;
text-align: center; text-align: center;
} }
.carlistItem { .carlistItem {
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 0.8rem; gap: 0.8rem;
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;
strong { strong {
display: block; display: block;
font-size: 1.4rem; font-size: 1.4rem;
@@ -5077,6 +5112,7 @@ video::-webkit-media-controls {
color: #05141f; color: #05141f;
line-height: 1.5; line-height: 1.5;
} }
em { em {
display: block; display: block;
font-size: 1.2rem; font-size: 1.2rem;
@@ -5109,6 +5145,7 @@ video::-webkit-media-controls {
height: 12rem; height: 12rem;
gap: 1rem; gap: 1rem;
padding: 3.2rem 0; padding: 3.2rem 0;
button { button {
max-width: 12.5rem; max-width: 12.5rem;
} }

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

@@ -1484,3 +1484,38 @@ $(document).on("mouseleave", ".tooltip", function () {
$(this).remove(); $(this).remove();
}); });
}); });
// PC 차량 선택
$(document).on("click", ".func .carlist .carlistItem .car-name", function (e) {
// 클릭한 button 태그의 텍스트 가져오기
var selectedText = $(this).find("span").text();
// 상위 li에서 selected 클래스 제거
$(".func .carlist .carlistItem ul li").removeClass("selected");
// 클릭한 li에 selected 클래스 추가
$(this).closest("li").addClass("selected");
console.log(selectedText);
// 상위 .carItem span에 선택된 텍스트 적용
$(".func .carlist > .carItem span").text(selectedText);
$(".func .carlist .carlistItem").removeClass("on");
});
// 모바일 차량 선택
$(document).on("click", "#carListPopup .popContents .carlistItem button", function (e) {
// 클릭한 button 태그의 텍스트 가져오기
var selectedText = $(this).find("strong").text();
var selectedTextCode = $(this).find("em").text();
// 상위 li에서 selected 클래스 제거
$("#carListPopup .popContents .carlistItem ul li").removeClass("selected");
// 클릭한 li에 selected 클래스 추가
$(this).closest("li").addClass("selected");
// 상위 .carItem span에 선택된 텍스트 적용
$(".hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item strong").text(selectedText);
$(".hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item span").text(selectedTextCode);
close_layer_popup("carListPopup");
});

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

@@ -171,153 +171,153 @@
<ul> <ul>
<!-- [D] 선택 시 selected 클래스 추가 --> <!-- [D] 선택 시 selected 클래스 추가 -->
<li class="selected"> <li class="selected">
<a href="javascript:void(0)"> <button class="car-name">
<span>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선</span> <span>쏘렌토(MQ4) 하이브리드-플러그인 상품성 개선</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="111JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="111JH4TB2H26CC012345"></button>
</li> </li>
<li> <li>
<a href="javascript:void(0)"> <button class="car-name">
<span>쏘렌토(MQ4) 하이브리드</span> <span>쏘렌토(MQ4) 하이브리드</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li> </li>
<li> <li>
<a href="javascript:void(0)"> <button class="car-name">
<span>스포티지 개조</span> <span>스포티지 개조</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li> </li>
<li> <li>
<a href="javascript:void(0)"> <button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span> <span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li> </li>
<li> <li>
<a href="javascript:void(0)"> <button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span> <span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li> </li>
<li> <li>
<a href="javascript:void(0)"> <button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span> <span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li> </li>
<li> <li>
<a href="javascript:void(0)"> <button class="car-name">
<span>스포티지 개조</span> <span>스포티지 개조</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li> </li>
<li> <li>
<a href="javascript:void(0)"> <button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span> <span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li> </li>
<li> <li>
<a href="javascript:void(0)"> <button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span> <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li> </li>
<li> <li>
<a href="javascript:void(0)"> <button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span> <span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li> </li>
<li> <li>
<a href="javascript:void(0)"> <button class="car-name">
<span>스포티지 개조</span> <span>스포티지 개조</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li> </li>
<li> <li>
<a href="javascript:void(0)"> <button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span> <span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li> </li>
<li> <li>
<a href="javascript:void(0)"> <button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span> <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li> </li>
<li> <li>
<a href="javascript:void(0)"> <button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span> <span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li> </li>
<li> <li>
<a href="javascript:void(0)"> <button class="car-name">
<span>스포티지 개조</span> <span>스포티지 개조</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li> </li>
<li> <li>
<a href="javascript:void(0)"> <button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span> <span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li> </li>
<li> <li>
<a href="javascript:void(0)"> <button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span> <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li> </li>
<li> <li>
<a href="javascript:void(0)"> <button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span> <span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li> </li>
<li> <li>
<a href="javascript:void(0)"> <button class="car-name">
<span>스포티지 개조</span> <span>스포티지 개조</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li> </li>
<li> <li>
<a href="javascript:void(0)"> <button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span> <span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li> </li>
<li> <li>
<a href="javascript:void(0)"> <button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span> <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li> </li>
<li> <li>
<a href="javascript:void(0)"> <button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span> <span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li> </li>
<li> <li>
<a href="javascript:void(0)"> <button class="car-name">
<span>스포티지 개조</span> <span>스포티지 개조</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li> </li>
<li> <li>
<a href="javascript:void(0)"> <button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span> <span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li> </li>
<li> <li>
<a href="javascript:void(0)"> <button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span> <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
</a> </button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button> <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li> </li>
</ul> </ul>
@@ -704,31 +704,31 @@
<li> <li>
<button> <button>
<strong>쏘렌토(MQ4) 하이브리드</strong> <strong>쏘렌토(MQ4) 하이브리드</strong>
<em>111JH4TB2H26CC012345</em> <em>222JH4TB2H26CC012345</em>
</button> </button>
</li> </li>
<li> <li>
<button> <button>
<strong>스포티지 개조 25</strong> <strong>스포티지 개조 25</strong>
<em>111JH4TB2H26CC012345</em> <em>333JH4TB2H26CC012345</em>
</button> </button>
</li> </li>
<li> <li>
<button> <button>
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성 개선</strong> <strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성 개선</strong>
<em>111JH4TB2H26CC012345</em> <em>444JH4TB2H26CC012345</em>
</button> </button>
</li> </li>
<li> <li>
<button> <button>
<strong>쏘렌토(MQ4) 하이브리드</strong> <strong>쏘렌토(MQ4) 하이브리드</strong>
<em>111JH4TB2H26CC012345</em> <em>555JH4TB2H26CC012345</em>
</button> </button>
</li> </li>
<li> <li>
<button> <button>
<strong>스포티지 개조 25</strong> <strong>스포티지 개조 25</strong>
<em>111JH4TB2H26CC012345</em> <em>666JH4TB2H26CC012345</em>
</button> </button>
</li> </li>
</ul> </ul>