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
2024-07-02 23:03:24 +09:00
parent 0a676da6d0
commit 0eb21578fa
8 changed files with 125 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
assets/css/kia/kiamain.css
View File

@@ -9,6 +9,14 @@
/*반응형, 브라우저 크기가 1204px 이상일때*/
/*넓이, 높이 자동 계산함수*/
/*변수파일 import*/
@-webkit-keyframes fadein {
from {
opacity: 0.9;
}
to {
opacity: 1;
}
}
@keyframes fadein {
from {
opacity: 0.9;
@@ -294,7 +302,7 @@
.mainProductItem .item .infoArea .infoBottom .listOtionPrice {
display: flex;
justify-content: flex-start;
align-items: center;
align-items: flex-start;
}
@media (max-width: 1024px) {
.mainProductItem .item .infoArea .infoBottom .listOtionPrice {
@@ -312,6 +320,7 @@
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl {
flex-direction: row-reverse;
justify-content: flex-end;
flex-wrap: wrap;
}
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl:not(:first-child) {
margin-top: 1rem;
@@ -353,6 +362,24 @@
color: #FFFFFF;
}
}
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd.discount {
margin: 0.6rem 0 -1.5rem;
font-size: 1.4rem;
color: #9EA1A2;
}
@media (max-width: 1024px) {
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd.discount {
width: 100%;
margin: 0.2rem 0 0;
}
}
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd.discount b {
font-weight: 600;
}
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd.discount i {
font-weight: 400;
text-decoration: line-through;
}
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl:not(:first-child) {
margin-left: 1.5rem;
padding-left: 1.5rem;
@@ -794,6 +821,7 @@
}
@media (min-width: 1025px) {
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
@@ -821,6 +849,7 @@
}
@media (min-width: 1025px) {
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist span {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
@@ -830,6 +859,7 @@
}
@media (min-width: 1025px) {
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist span + span {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
@@ -885,6 +915,7 @@
@media (min-width: 1025px) {
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem {
top: 8.7rem;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
left: auto;
@@ -939,6 +970,7 @@
color: #9EA1A2;
font-weight: 400;
displaY: flex;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
@@ -954,6 +986,7 @@
}
@media (min-width: 1025px) {
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carItem.on + .carlistItem {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
@@ -1210,14 +1243,16 @@
}
.mainProductList .mainProductInner ul li a:hover::before {
content: "";
animation: fadein 1s;
-webkit-animation: fadein 1s;
animation: fadein 1s;
background-image: url(/kr/assets/images/kia/producy-on.png);
z-index: 1;
background-size: cover;
}
.mainProductList .mainProductInner ul li a:hover .descript, .mainProductList .mainProductInner ul li a:hover .listImgBtn {
displaY: block;
animation: fadein 1s;
-webkit-animation: fadein 1s;
animation: fadein 1s;
}
.mainSevice {
@@ -1354,4 +1389,5 @@
margin-left: 1rem;
margin-top: 0;
}
}
}
/*# sourceMappingURL=kiamain.css.map */

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

File diff suppressed because one or more lines are too long

21
assets/css/kia/kiamain.scss
View File

@@ -251,7 +251,7 @@
.listOtionPrice {
display: flex;
justify-content: flex-start;
align-items: center;
align-items: flex-start;
@media(max-width: 1024px){
display: block;
}
@@ -264,6 +264,7 @@
@media(max-width: 1024px){
flex-direction: row-reverse;
justify-content: flex-end;
flex-wrap: wrap;
&:not(:first-child){
margin-top: 1rem;
}
@@ -301,6 +302,24 @@
color: #FFFFFF;
}
&.discount {
margin:.6rem 0 -1.5rem;
font-size: 1.4rem;
color: #9EA1A2;
@media(max-width: 1024px){
width: 100%;
margin:.2rem 0 0;
}
b {
font-weight: 600;
}
i {
font-weight: 400;
text-decoration:line-through;
}
}
}
&:not(:first-child){
margin-left: 1.5rem;

21
assets/css/product.css
View File

@@ -762,6 +762,24 @@
font-size: 1.4rem;
text-align: right;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn label .discount {
display: block;
font-size: 1.4rem;
color: #9EA1A2;
}
@media (max-width: 1024px) {
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn label .discount {
width: 100%;
margin: 0.2rem 0 0;
}
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn label .discount b {
font-weight: 600;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn label .discount i {
font-weight: 400;
text-decoration: line-through;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn input[type=radio] {
visibility: hidden;
position: absolute;
@@ -780,6 +798,9 @@
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn input[type=radio]:checked + label span .info {
color: #fff;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn input[type=radio]:checked + label .discount {
color: #9EA1A2;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn:hover label {
border: 1px solid #000;
}

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

File diff suppressed because one or more lines are too long

21
assets/css/product.scss
View File

@@ -692,6 +692,24 @@
font-size: 1.4rem;
text-align: right;
}
}
.discount {
display: block;
font-size: 1.4rem;
color: #9EA1A2;
@media(max-width: 1024px){
width: 100%;
margin:.2rem 0 0;
}
b {
font-weight: 600;
}
i {
font-weight: 400;
text-decoration:line-through;
}
}
}
input[type=radio]{
@@ -710,6 +728,9 @@
color:#fff;
}
}
.discount {
color: #9EA1A2;
}
}
}
&:hover{

18
kia.html
View File

@@ -41,7 +41,7 @@
<link rel="icon" href="assets/images/kia/favicon-16x16.png">
<link rel="stylesheet" href="assets/css/kia/kia-font.css?v1" type="text/css" />
<link rel="stylesheet" href="assets/css/kia/kia.css?v1" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="assets/css/kia/kiamain.css?v1" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="assets/css/kia/kiamain.css" type="text/css" />
</head>
<body>
<!--//header-->
@@ -344,10 +344,10 @@
<video loop muted playsinline preload="auto" poster="assets/images/sample_pdp/sample_main_product_pc_01.png">
<source src="assets/images/sample_pdp/sample_main_product_01.mp4" type="video/mp4">
</video>
<img src="assets/images/sample_pdp/sample_main_product_pc_01.png" alt="이미지 상품명">
<img src="https://connectstore.kia.com/kr/ux_data/product/20230620/ab5da8542c31441ba25f35993ff18000.png" alt="이미지 상품명">
</p>
</a>
<div class="infoArea" style="background-image:url('assets/images/sample_pdp/sample_main_product_mo_01.png');">
<div class="infoArea" style="background-image:url('https://connectstore.kia.com/kr/ux_data/product/20230620/dbac827600a14a1496c1d4c75419e2a2.png');">
<div class="infoTop">
<!-- 신상품, 프로모션, 구매가능 모두 조건에 해당되지 않으면, tag 영역은 전체 노출되지 않습니다. -->
<div class="tag">
@@ -364,11 +364,14 @@
<div class="infoBottom">
<div class="listOtionPrice">
<dl>
<dt>평생 이용권</dt>
<dt>평생 이용</dt>
<dd>\520,000</dd>
<!-- 2024-07-02 discount 추가 -->
<dd class="discount"><b>99%</b>, <i>₩ 500,000</i></dd>
<!--// 2024-07-02 discount 추가 -->
</dl>
<dl>
<dt>일반 정기 구독</dt>
<dt>정기 구독</dt>
<dd>\12,000/월</dd>
</dl>
</div>
@@ -408,7 +411,7 @@
<div class="infoBottom">
<div class="listOtionPrice">
<dl>
<dt>평생 이용권</dt>
<dt>평생 이용</dt>
<dd>\520,000</dd>
</dl>
</div>
@@ -661,6 +664,9 @@
</div>
</div>
<!--//footer-->
<script>
AOS.init();
</script>
</body>
</html>

13
product/product-carsw-view.html
View File

@@ -426,15 +426,20 @@
<div class="radioBtn">
<input type="radio" name="radioBtn" id="radioOne" value="평생이용권 150000">
<label for="radioOne">
<span>평생 이용권</span>
<strong>₩ 150,000</strong>
<span>평생 이용</span>
<!-- 2024-07-02 discount 추가 -->
<strong>
₩ 150,000
<span class="discount"><b>99%</b>, <i>₩ 500,000</i></span>
</strong>
<!--// 2024-07-02 discount 추가 -->
</label>
</div>
<div class="radioBtn">
<input type="radio" name="radioBtn" id="radioTwo" value="일반 정기 구독 150000">
<label for="radioTwo">
<span>연 정기 구독</span>
<span>연 구독</span>
<strong>₩ 12,000/년</strong>
</label>
</div>
@@ -442,7 +447,7 @@
<div class="radioBtn disabledBtn">
<input type="radio" name="radioBtn" id="radioThree" value="1개월 무료 정기구독 150000" disabled>
<label for="radioThree">
<span>월 정기 구독</span>
<span>월 구독</span>
<strong>
₩ 12,000/월
<!--