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

차량 선택 추가

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2025-08-28 00:33:47 +09:00
parent 06e6efc41d
commit e6322c2d16
6 changed files with 320 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -849,15 +849,16 @@ video::-webkit-media-controls {
}
.hederWarp_n .headerInner .gnb .menuWarp .mobileFunc button {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 5rem;
font-size: 1.6rem;
font-weight: bold;
background-color: #f3f3f3;
border: solid #dedede;
border-width: 1px 0 1px 0;
padding: 2rem;
color: #676767;
color: #030303;
cursor: pointer;
}
.hederWarp_n .headerInner .gnb .menuWarp .mobileFunc button::after {
@@ -865,6 +866,7 @@ video::-webkit-media-controls {
display: block;
width: 0.6rem;
height: 1.2rem;
margin-left: 0.8rem;
background-image: url("../images/common/icon-mMarrow.svg");
background-repeat: no-repeat;
background-size: contain;
@@ -885,29 +887,33 @@ video::-webkit-media-controls {
display: flex;
justify-content: space-between;
align-items: center;
height: 5.6rem;
padding: 0 2rem;
padding: 0 2rem 2rem;
margin-top: -1px;
color: #05141f;
border-bottom: 1px solid #dedede;
background-color: #f3f3f3;
}
.hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem.on {
border: none;
}
.hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item {
display: flex;
justify-content: flex-start;
align-items: center;
display: block;
position: relative;
width: 100%;
padding: 1.2rem 1.4rem;
background-color: #fff;
border: 1px solid #dedede;
}
.hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item span {
.hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item strong {
display: block;
margin-bottom: 0.4rem;
color: #05141f;
font-size: 1.4rem;
font-weight: 600;
display: flex;
align-items: center;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
min-width: 2.2rem;
word-break: break-word;
font-weight: 400;
}
.hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item span {
color: #9ea1a2;
font-size: 1.4rem;
}
.hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item span + span {
color: #676767;
@@ -922,8 +928,16 @@ video::-webkit-media-controls {
margin-left: 1rem;
margin-right: 1rem;
}
.hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .btn-select {
position: absolute;
bottom: 1.2rem;
right: 1.4rem;
font-weight: 600;
font-size: 1.2rem;
border-bottom: 1px solid #676767;
}
.hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .arrow {
display: block;
display: none;
width: 1.2rem;
height: 0.8rem;
margin-top: -0.4rem;
@@ -1229,9 +1243,9 @@ video::-webkit-media-controls {
}
@media (min-width: 1025px) {
.hederWarp_n .headerInner .func .carlist .carItem {
height: 3.2rem;
padding: 0 1.2rem;
border: 1px solid #dedede;
height: 3.5rem;
padding: 0;
border-bottom: 1px solid #cdd0d2;
}
}
.hederWarp_n .headerInner .func .carlist .carItem::after {
@@ -1254,7 +1268,7 @@ video::-webkit-media-controls {
}
@media (min-width: 1025px) {
.hederWarp_n .headerInner .func .carlist .carItem:hover, .hederWarp_n .headerInner .func .carlist .carItem:focus {
border: 1px solid #dedede;
border-bottom: 1px solid #dedede;
}
}
.hederWarp_n .headerInner .func .carlist .carItem.on::after {
@@ -1296,7 +1310,7 @@ video::-webkit-media-controls {
}
@media (min-width: 1025px) {
.hederWarp_n .headerInner .func .carlist .carlistItem {
top: 3.2rem;
top: 3.1rem;
left: 0;
right: 0;
transform: initial;
@@ -4516,11 +4530,11 @@ video::-webkit-media-controls {
position: relative;
padding: 1.6rem 1.6rem 1.4rem;
background: #fff;
border: 1px solid #0b1320; /* 테두리 추가 */
border: 1px solid #697279; /* 테두리 추가 */
border-radius: 0.6rem;
font-size: 1.4rem;
color: #0b1320;
filter: drop-shadow(0 0.2rem 0.8rem rgba(0, 0, 0, 0.18));
color: #9ea1a2;
box-shadow: 4px 4px 10px 0px rgba(5, 20, 31, 0.1215686275);
}
.tooltip-bubble .edge {
position: absolute;
@@ -4529,8 +4543,84 @@ video::-webkit-media-controls {
width: 1.2rem;
height: 1.2rem;
background: #fff;
border-left: 1px solid #0b1320; /* 포인터 테두리 */
border-top: 1px solid #0b1320;
border-left: 1px solid #697279; /* 포인터 테두리 */
border-top: 1px solid #697279;
transform: rotate(45deg);
}
#carListPopup {
display: flex;
justify-content: center;
align-items: center;
}
#carListPopup .popContents {
display: flex;
flex-direction: column;
}
#carListPopup .payInfoCon {
flex: 1;
overflow-y: auto;
max-height: 60vh;
}
#carListPopup .popContents {
width: 90%;
max-width: 40rem;
background-color: #fff;
border-radius: 0.6rem;
padding: 0 1.6rem;
}
#carListPopup .popContents h2 {
height: 7.8rem;
padding: 3.2rem 0 2.4rem;
font-size: 1.8rem;
font-weight: 600;
color: #000;
text-align: center;
}
#carListPopup .popContents .carlistItem {
overflow-y: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
}
#carListPopup .popContents .carlistItem button {
position: relative;
padding: 0.8rem 0 0.8rem 3rem;
text-align: left;
}
#carListPopup .popContents .carlistItem button strong {
display: block;
font-size: 1.4rem;
font-weight: 400;
color: #05141f;
line-height: 1.5;
}
#carListPopup .popContents .carlistItem button em {
display: block;
font-size: 1.2rem;
color: #9ea1a2;
line-height: 1.4;
}
#carListPopup .popContents .carlistItem .selected button:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 2rem;
height: 2rem;
background: url("../images/common/ico_selected2.png") center center no-repeat;
background-size: 1.8rem auto;
}
#carListPopup .towButton {
justify-content: center;
height: 12rem;
gap: 1rem;
padding: 3.2rem 0;
}
#carListPopup .towButton button {
max-width: 12.5rem;
}
/*# sourceMappingURL=common.css.map */

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

File diff suppressed because one or more lines are too long

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

@@ -988,15 +988,17 @@ video::-webkit-media-controls {
button {
display: flex;
justify-content: space-between;
// justify-content: space-between;
align-items: center;
width: 100%;
height: 5rem;
font-size: 1.6rem;
font-weight: bold;
background-color: #f3f3f3;
border: solid #dedede;
border-width: 1px 0 1px 0;
padding: 2rem;
color: #676767;
color: #030303;
cursor: pointer;
&::after {
@@ -1004,6 +1006,7 @@ video::-webkit-media-controls {
display: block;
width: 0.6rem;
height: 1.2rem;
margin-left: 0.8rem;
background-image: url("../images/common/icon-mMarrow.svg");
background-repeat: no-repeat;
background-size: contain;
@@ -1027,28 +1030,33 @@ video::-webkit-media-controls {
display: flex;
justify-content: space-between;
align-items: center;
height: 5.6rem;
padding: 0 2rem;
padding: 0 2rem 2rem;
margin-top: -1px;
color: #05141f;
border-bottom: 1px solid #dedede;
background-color: #f3f3f3;
&.on {
border: none;
}
.item {
display: flex;
justify-content: flex-start;
align-items: center;
span {
display: block;
position: relative;
width: 100%;
padding: 1.2rem 1.4rem;
background-color: #fff;
border: 1px solid #dedede;
strong {
display: block;
margin-bottom: 0.4rem;
color: #05141f;
font-size: 1.4rem;
font-weight: 600;
display: flex;
align-items: center;
width: fit-content;
min-width: 2.2rem;
word-break: break-word;
font-weight: 400;
}
span {
color: #9ea1a2;
font-size: 1.4rem;
}
span + span {
@@ -1067,8 +1075,17 @@ video::-webkit-media-controls {
}
}
.btn-select {
position: absolute;
bottom: 1.2rem;
right: 1.4rem;
font-weight: 600;
font-size: 1.2rem;
border-bottom: 1px solid #676767;
}
.arrow {
display: block;
display: none;
width: 1.2rem;
height: 0.8rem;
margin-top: -0.4rem;
@@ -1438,9 +1455,9 @@ video::-webkit-media-controls {
height: 8rem;
@include desktopMin {
height: 3.2rem;
padding: 0 1.2rem;
border: 1px solid #dedede;
height: 3.5rem;
padding: 0;
border-bottom: 1px solid #cdd0d2;
}
&::after {
@@ -1463,7 +1480,7 @@ video::-webkit-media-controls {
outline: none;
@include desktopMin {
border: 1px solid #dedede;
border-bottom: 1px solid #dedede;
}
}
@@ -1511,7 +1528,7 @@ video::-webkit-media-controls {
transform: translate(-50%, 0);
@include desktopMin {
top: 3.2rem;
top: 3.1rem;
left: 0;
right: 0;
transform: initial;
@@ -4996,11 +5013,12 @@ video::-webkit-media-controls {
position: relative;
padding: 1.6rem 1.6rem 1.4rem;
background: #fff;
border: 1px solid #0b1320; /* 테두리 추가 */
border: 1px solid #697279; /* 테두리 추가 */
border-radius: 0.6rem;
font-size: 1.4rem;
color: #0b1320;
filter: drop-shadow(0 0.2rem 0.8rem rgba(0, 0, 0, 0.18));
color: #9ea1a2;
box-shadow: 4px 4px 10px 0px #05141f1f;
.edge {
position: absolute;
top: -0.7rem; /* border 두께 때문에 살짝 조정 */
@@ -5008,8 +5026,90 @@ video::-webkit-media-controls {
width: 1.2rem;
height: 1.2rem;
background: #fff;
border-left: 1px solid #0b1320; /* 포인터 테두리 */
border-top: 1px solid #0b1320;
border-left: 1px solid #697279; /* 포인터 테두리 */
border-top: 1px solid #697279;
transform: rotate(45deg);
}
}
#carListPopup {
display: flex;
justify-content: center;
align-items: center;
.popContents {
display: flex;
flex-direction: column;
}
.payInfoCon {
flex: 1;
overflow-y: auto;
max-height: 60vh;
}
.popContents {
width: 90%;
max-width: 40rem;
background-color: #fff;
border-radius: 0.6rem;
padding: 0 1.6rem;
h2 {
height: 7.8rem;
padding: 3.2rem 0 2.4rem;
font-size: 1.8rem;
font-weight: 600;
color: #000;
text-align: center;
}
.carlistItem {
overflow-y: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
button {
position: relative;
padding: 0.8rem 0 0.8rem 3rem;
text-align: left;
strong {
display: block;
font-size: 1.4rem;
font-weight: 400;
color: #05141f;
line-height: 1.5;
}
em {
display: block;
font-size: 1.2rem;
color: #9ea1a2;
line-height: 1.4;
}
}
.selected {
button {
&:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 2rem;
height: 2rem;
background: url("../images/common/ico_selected2.png") center center no-repeat;
background-size: 1.8rem auto;
}
}
}
}
}
.towButton {
justify-content: center;
height: 12rem;
gap: 1rem;
padding: 3.2rem 0;
button {
max-width: 12.5rem;
}
}
}

BIN
kr/assets/images/common/ico_selected2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 288 B

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

@@ -50,7 +50,7 @@ $(document).ready(function () {
if (targetSize != "moblie") {
menu_init();
$(document).on("click", ".mobileCarlist > .mobilecarItem", function () {
$(document).on("click", ".mobileCarlist > .mobilecarItem .btn-select", function () {
if (!$(this).hasClass("noitem")) {
$(this).next().slideToggle("fast");
$(this).find(".arrow").toggleClass("on");

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

@@ -83,38 +83,17 @@
</button> -->
</div>
<!-- 모바일 전용 차량 선택 UI입니다. -->
<!-- 2025.08.27 추가 -->
<div class="mobileCarlist">
<a href="javascript:void(0)" class="mobilecarItem">
<div class="mobilecarItem">
<div class="item">
<!-- <span>MV</span>
<span>161어 1660</span> -->
쏘렌토(MQ4) 하이브리드-플러그인 상품성개선
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선</strong>
<span>KMTKEXXBPMU000081</span>
<button class="btn-select" onclick="open_layer_popup('carListPopup')">차량 선택하기 ></button>
</div>
<div class="arrow"></div>
</a>
<div class="carlistItem">
<ul>
<li>
<a href="javascript:void(0)">
<span>MV</span>
<span>KMTKEXXBPMU000081</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span>SX</span>
<span>161어 1660</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span>MV</span>
<span>452허 1234</span>
</a>
</li>
</ul>
</div>
</div>
<!--// 2025.08.27 추가 -->
<!-- PC 모바일 공통 메뉴 영역입니다. -->
<ul class="menu">
<li class="menuDepth1Wrap">
@@ -179,10 +158,9 @@
</div>
<div class="func">
<!-- PC 전용 차량 선택 UI입니다. -->
<!-- 2025.08.27 추가 -->
<div class="carlist">
<a href="javascript:void(0)" class="carItem">
<!-- <span>MV</span>
<span>161어 1660</span> -->
<span>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선</span>
</a>
<div class="carlistItem">
@@ -344,11 +322,12 @@
</ul>
</div>
</div>
<!--// 2025.08.27 추가 -->
<!-- PC 전용 로그인 버튼입니다. -->
<div class="userLogin">
<!-- <div class="userLogin">
<a href="#">로그인/가입</a>
</div>
</div> -->
<!-- PC 전용 USER 관련 링크 영역입니다. -->
<div class="user">
@@ -707,6 +686,71 @@
</div>
</div>
</div>
<!-- 2025.08.27 추가 -->
<div id="carListPopup" class="popupWarp" style="display: none">
<div class="popContents">
<h2>차량 선택하기 (5)</h2>
<div class="payInfoCon">
<div class="carlistItem">
<ul>
<li class="selected">
<button>
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선플러그인 상품성개선</strong>
<em>111JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선플러그인 상품성개선</strong>
<em>111JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선플러그인 상품성개선</strong>
<em>111JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선플러그인 상품성개선</strong>
<em>111JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선플러그인 상품성개선</strong>
<em>111JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선플러그인 상품성개선</strong>
<em>111JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선플러그인 상품성개선</strong>
<em>111JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선플러그인 상품성개선</strong>
<em>111JH4TB2H26CC012345</em>
</button>
</li>
</ul>
</div>
</div>
<div class="towButton">
<button class="cartBtn leftBtn" onclick="close_layer_popup('carListPopup')"><p>취소</p></button>
<button class="PurchaseBtn rightBtn"><p>선택</p></button>
</div>
</div>
</div>
<!--// 2025.08.27 추가 -->
<!--//footer-->
</body>
</html>