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

PDP 제품썸네일 영역 여백 수정

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2025-04-21 21:49:58 +09:00
parent 2860fdb613
commit d03db3f25b
3 changed files with 40 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
assets/css/product.css
View File

@@ -68,6 +68,7 @@
.contentWarp .productView .productLeft .productImg .productSwiper .swiper-slide {
position: relative;
background-color: #666;
height: auto;
}
.contentWarp .productView .productLeft .productImg .productSwiper .swiper-slide img {
width: 100%;
@@ -75,7 +76,7 @@
}
.contentWarp .productView .productLeft .productImg .productSwiper .swiper-slide .productSmallVideo {
width: 100%;
height: auto;
height: 100%;
overflow: hidden;
position: relative;
}
@@ -88,7 +89,9 @@
position: absolute;
width: 100%;
aspect-ratio: 1/1;
height: auto;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
position: relative;
left: 0;
top: 0;
@@ -263,22 +266,18 @@
position: absolute;
}
.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label {
background-color: #05141f;
background-color: #05141F;
}
.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dt,
.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dd {
.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dt, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dd {
color: #fff;
}
.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dt p,
.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dt strong,
.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dd p,
.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dd strong {
.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dt p, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dt strong, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dd p, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dd strong {
color: #fff;
}
.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li label {
display: block;
padding: 2.5rem;
border: 1px solid #dedede;
border: 1px solid #DEDEDE;
border-radius: 0.6rem;
cursor: pointer;
}
@@ -328,7 +327,7 @@
}
.contentWarp .productView .productRight .optionWarp .producInfoWarp .termsOK > a::after {
content: "";
display: block;
displaY: block;
width: 0.6rem;
margin-left: 0.8rem;
background-image: url("/kr/assets/images/common/icon-mMarrow.svg");
@@ -351,7 +350,7 @@
.contentWarp .productView .productRight .optionWarp .producInfoWarp .noStreaming {
margin-top: 2rem;
padding: 3rem 2rem;
background-color: #f3f3f3;
background-color: #F3F3F3;
border-radius: 0.6rem;
}
.contentWarp .productView .productRight .optionWarp .producInfoWarp .noStreaming P {
@@ -383,7 +382,7 @@
.contentWarp .productView .productRight .optionWarp .packageOption .optionList {
margin-top: 2rem;
padding: 2.5rem;
border: 1px solid #dedede;
border: 1px solid #DEDEDE;
border-radius: 0.6rem;
}
@media (max-width: 768px) {
@@ -426,7 +425,7 @@
border-radius: 0.6rem;
}
.contentWarp .productView .productRight .optionWarp .packageOption .optionList .optionItem {
display: flex;
displaY: flex;
width: 100%;
height: 9rem;
overflow: hidden;
@@ -450,7 +449,7 @@
}
.contentWarp .productView .productRight .optionWarp .packageOption .optionList .optionItem .optionText p span,
.contentWarp .productView .productRight .optionWarp .packageOption .optionList .optionItem .optionText p strong {
display: block;
displaY: block;
width: 100%;
font-size: 1.4rem;
line-height: 1.4;
@@ -516,7 +515,7 @@
}
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn label {
display: flex;
displaY: flex;
width: 100%;
height: 12rem;
overflow: hidden;
@@ -573,8 +572,8 @@
position: absolute;
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label {
background-color: #05141f;
border: 1px solid #05141f;
background-color: #05141F;
border: 1px solid #05141F;
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label::before {
content: "";
@@ -621,7 +620,7 @@
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p span,
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p strong {
display: block;
displaY: block;
width: 100%;
font-size: 1.4rem;
width: 75%;
@@ -695,17 +694,17 @@
}
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .disabledBtn label {
border: 1px solid #dedede;
border: 1px solid #DEDEDE;
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .disabledBtn label span,
.contentWarp .productView .productRight .optionWarp .producOption .optionList .disabledBtn label strong {
color: #9ea1a2;
color: #9EA1A2;
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .disabledBtn label p {
opacity: 0.5;
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .disabledBtn:hover label {
border: 1px solid #dedede;
border: 1px solid #DEDEDE;
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn + .checkBtn {
margin-top: 1rem;
@@ -727,7 +726,7 @@
margin-top: 2rem;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn label {
display: flex;
displaY: flex;
justify-content: space-between;
align-items: center;
width: 100%;
@@ -737,7 +736,7 @@
cursor: pointer;
position: relative;
border-radius: 0.6rem;
border: 1px solid #dedede;
border: 1px solid #DEDEDE;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn label span {
font-size: 1.4rem;
@@ -769,7 +768,7 @@
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn label .discount {
display: block;
font-size: 1.4rem;
color: #9ea1a2;
color: #9EA1A2;
}
@media (max-width: 1024px) {
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn label .discount {
@@ -789,8 +788,8 @@
position: absolute;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn input[type=radio]:checked + label {
background-color: #05141f;
border: 1px solid #05141f;
background-color: #05141F;
border: 1px solid #05141F;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn input[type=radio]:checked + label span,
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn input[type=radio]:checked + label strong {
@@ -803,13 +802,13 @@
color: #fff;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn input[type=radio]:checked + label .discount {
color: #9ea1a2;
color: #9EA1A2;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn:hover label {
border: 1px solid #000;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn.coupon {
background-color: #f3f3f3;
background-color: #F3F3F3;
border-radius: 0.6rem;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn.coupon label .title {
@@ -834,20 +833,20 @@
color: #676767;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .disabledBtn label {
border: 1px solid #dedede;
border: 1px solid #DEDEDE;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .disabledBtn label span,
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .disabledBtn label strong {
color: #9ea1a2;
color: #9EA1A2;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .disabledBtn label span .title {
color: #9ea1a2 !important;
color: #9EA1A2 !important;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .disabledBtn label span .info {
color: #9ea1a2 !important;
color: #9EA1A2 !important;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .disabledBtn:hover label {
border: 1px solid #dedede;
border: 1px solid #DEDEDE;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn + .radioBtn {
margin-top: 1rem;
@@ -951,7 +950,7 @@
.pdpListBtn {
width: 100%;
height: 7.4rem;
background-color: #f3f3f3;
background-color: #F3F3F3;
padding: 0 2rem;
}
@media (min-width: 768px) {

2
assets/css/product.css.map
View File

File diff suppressed because one or more lines are too long

8
assets/css/product.scss
View File

@@ -51,10 +51,11 @@
.swiper-slide{
position: relative;
background-color: #666;
height: auto;
img{width:100%; height:100%;}
.productSmallVideo{
width:100%;
height:auto;
height:100%;
overflow: hidden;
position: relative;
@@ -62,8 +63,9 @@
video {
position: absolute;
width: 100%;
aspect-ratio: 1/1;
height:auto;
aspect-ratio: 1 / 1;
height:100%;
object-fit: cover;
position: relative;
left: 0;
top: 0;