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

스트리밍 프리미엄 수정

Browse Source
This commit is contained in:
hyeonggil
2024-09-13 14:32:38 +09:00
parent d364cc05c2
commit f0e31dc93d
14 changed files with 92 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
assets/css/pdp_detail.css
View File

@@ -3418,6 +3418,7 @@
left: -65px; left: -65px;
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
border: 1px solid #D3D3D3;
border-radius: 50%; border-radius: 50%;
background: rgb(255, 255, 255) url(../images/kia/pdp/display_theme/icon-arrow.png) no-repeat center/15px auto; background: rgb(255, 255, 255) url(../images/kia/pdp/display_theme/icon-arrow.png) no-repeat center/15px auto;
} }
@@ -3458,7 +3459,25 @@
overflow: hidden; overflow: hidden;
overflow-x: auto; overflow-x: auto;
} }
.scroll_area .themeImg { .scroll_area .web {
height: 40rem; display: block;
}
@media (max-width: 768px) {
.scroll_area .web {
display: none;
}
}
.scroll_area .mobile {
display: none;
}
@media (max-width: 768px) {
.scroll_area .mobile {
display: block;
}
}
@media (max-width: 768px) {
.scroll_area .themeImg {
height: 48rem;
}
} }
/*# sourceMappingURL=pdp_detail.css.map */ /*# sourceMappingURL=pdp_detail.css.map */

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

File diff suppressed because one or more lines are too long

77
assets/css/pdp_detail.scss
View File

@@ -1561,7 +1561,7 @@
} }
} }
.btn-select.on + .list-member { .btn-select.on+.list-member {
display: block; display: block;
} }
@@ -1832,7 +1832,7 @@
font-size: 1.8rem; font-size: 1.8rem;
} }
> p { >p {
position: relative; position: relative;
width: 93%; width: 93%;
@@ -1908,7 +1908,7 @@
} }
} }
dt.active + dd { dt.active+dd {
display: block; display: block;
} }
@@ -2040,7 +2040,7 @@
} }
} }
button + button { button+button {
margin-top: 1rem; margin-top: 1rem;
@include tablet { @include tablet {
@@ -2052,7 +2052,7 @@
} }
} }
> .dd-padding { >.dd-padding {
padding-left: 6.5rem; padding-left: 6.5rem;
} }
} }
@@ -2073,10 +2073,9 @@
content: none; content: none;
} }
&:hover { &:hover {}
}
> p { >p {
span { span {
color: #9ea1a2; color: #9ea1a2;
} }
@@ -2084,7 +2083,7 @@
} }
} }
dl + dl { dl+dl {
margin-top: 1rem; margin-top: 1rem;
} }
} }
@@ -2304,6 +2303,7 @@
} }
@include maxtablet { @include maxtablet {
&:before, &:before,
&:after { &:after {
display: none; display: none;
@@ -2372,6 +2372,7 @@
// height: 10rem; // height: 10rem;
.comp_body { .comp_body {
.text_area { .text_area {
// display: flex; // display: flex;
h3 { h3 {
font-size: 3rem; font-size: 3rem;
@@ -2382,7 +2383,7 @@
font-size: 1.6rem; font-size: 1.6rem;
} }
> * { >* {
flex: 1; flex: 1;
} }
} }
@@ -2458,7 +2459,7 @@
} }
} }
& + .item { &+.item {
margin-top: 8rem; margin-top: 8rem;
@include maxtablet { @include maxtablet {
@@ -2472,7 +2473,7 @@
} }
} }
& + .comp_1x_b_v_s_b { &+.comp_1x_b_v_s_b {
position: relative; position: relative;
z-index: 2; z-index: 2;
margin-top: 0; margin-top: 0;
@@ -2498,7 +2499,7 @@
margin-top: 8rem; margin-top: 8rem;
.comp_body { .comp_body {
& + .comp_body { &+.comp_body {
margin-top: 10rem; margin-top: 10rem;
} }
@@ -2515,7 +2516,7 @@
.displayThemeDtl { .displayThemeDtl {
.swiper-navigation { .swiper-navigation {
> * { >* {
top: 210px; top: 210px;
left: -65px; left: -65px;
width: 5rem; width: 5rem;
@@ -2750,6 +2751,7 @@
} }
@include maxtablet { @include maxtablet {
&:before, &:before,
&:after { &:after {
display: none; display: none;
@@ -2820,12 +2822,13 @@
.comp_body { .comp_body {
.text_area { .text_area {
// display: flex; // display: flex;
h3 { h3 {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
> * { >* {
flex: 1; flex: 1;
} }
} }
@@ -2894,7 +2897,7 @@
} }
} }
& + .item { &+.item {
margin-top: 8rem; margin-top: 8rem;
@include maxtablet { @include maxtablet {
@@ -2908,7 +2911,7 @@
} }
} }
& + .comp_1x_b_v_s_b { &+.comp_1x_b_v_s_b {
position: relative; position: relative;
z-index: 2; z-index: 2;
margin-top: 2rem; margin-top: 2rem;
@@ -3181,7 +3184,7 @@
} }
} }
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn.type2 input[type="checkbox"] + label { .contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn.type2 input[type="checkbox"]+label {
height: auto; height: auto;
padding: 2rem 2rem 2rem 0; padding: 2rem 2rem 2rem 0;
@@ -3239,6 +3242,7 @@
margin-top: 6rem; margin-top: 6rem;
} }
} }
.mb-2 { .mb-2 {
margin-bottom: 2rem; margin-bottom: 2rem;
@@ -3325,12 +3329,13 @@
// } // }
.comp_body { .comp_body {
.text_area { .text_area {
// display: flex; // display: flex;
h3 { h3 {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
> * { >* {
flex: 1; flex: 1;
} }
} }
@@ -3360,10 +3365,11 @@
.comp_wide { .comp_wide {
&.title-only { &.title-only {
& + .comp_wide { &+.comp_wide {
margin-top: 4rem; margin-top: 4rem;
} }
} }
.between { .between {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -3607,6 +3613,7 @@
} }
&.paused { &.paused {
.btn-play, .btn-play,
.btn-sound { .btn-sound {
display: block !important; display: block !important;
@@ -3738,6 +3745,7 @@
} }
&.playing { &.playing {
.comp_body.layer_up, .comp_body.layer_up,
.thumb-swiper, .thumb-swiper,
.pdpInCarGameSwiper, .pdpInCarGameSwiper,
@@ -3823,12 +3831,14 @@
&:before { &:before {
background-color: rgba(5, 20, 31, 1); background-color: rgba(5, 20, 31, 1);
} }
.contents_area { .contents_area {
.image_area { .image_area {
margin-top: 0; margin-top: 0;
} }
} }
} }
.contents_area { .contents_area {
padding-top: 7rem; padding-top: 7rem;
@@ -3854,6 +3864,7 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
} }
.image_area { .image_area {
max-width: 120rem; max-width: 120rem;
height: auto; height: auto;
@@ -3863,6 +3874,7 @@
@include maxmobile { @include maxmobile {
padding-top: 3rem; padding-top: 3rem;
} }
img { img {
height: auto; height: auto;
object-fit: inherit; object-fit: inherit;
@@ -3874,11 +3886,12 @@
.pdpDtl { .pdpDtl {
.swiper-navigation { .swiper-navigation {
> * { >* {
top: 210px; top: 210px;
left: -65px; left: -65px;
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
border: 1px solid #D3D3D3;
border-radius: 50%; border-radius: 50%;
background: rgba(255, 255, 255) url(../images/kia/pdp/display_theme/icon-arrow.png) no-repeat center / 15px auto; background: rgba(255, 255, 255) url(../images/kia/pdp/display_theme/icon-arrow.png) no-repeat center / 15px auto;
@@ -3924,10 +3937,30 @@
} }
} }
} }
.scroll_area { .scroll_area {
overflow: hidden; overflow: hidden;
overflow-x: auto; overflow-x: auto;
.web {
display: block;
@include maxtablet {
display: none;
}
}
.mobile {
display: none;
@include maxtablet {
display: block;
}
}
.themeImg { .themeImg {
height: 40rem; @include maxtablet {
height: 48rem;
}
} }
} }

BIN
assets/images/kia/pdp/streaming_premium/img_spec_m.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

0
assets/images/kia/pdp/streaming_premium/streaming_premium_img1.png → assets/images/kia/pdp/streaming_premium/streaming_premium_img1_1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 415 KiB

After

Width:  |  Height:  |  Size: 415 KiB

BIN
assets/images/kia/pdp/streaming_premium/streaming_premium_img1_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 774 KiB

BIN
assets/images/kia/pdp/streaming_premium/streaming_premium_img1_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 458 KiB

0
assets/images/kia/pdp/streaming_premium/streaming_premium_img2.png → assets/images/kia/pdp/streaming_premium/streaming_premium_img2_1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 614 KiB

After

Width:  |  Height:  |  Size: 614 KiB

BIN
assets/images/kia/pdp/streaming_premium/streaming_premium_img2_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 614 KiB

BIN
assets/images/kia/pdp/streaming_premium/streaming_premium_img2_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 614 KiB

0
assets/images/kia/pdp/streaming_premium/streaming_premium_img3.png → assets/images/kia/pdp/streaming_premium/streaming_premium_img3_1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 498 KiB

After

Width:  |  Height:  |  Size: 498 KiB

BIN
assets/images/kia/pdp/streaming_premium/streaming_premium_img3_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 420 KiB

BIN
assets/images/kia/pdp/streaming_premium/streaming_premium_img3_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 257 KiB

26
product/pdp_streaming_premium.html
View File

@@ -31,10 +31,10 @@
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/jquery-ui.min.js?v1"></script> <script type="text/javascript" charset="UTF-8" src="../assets/js/library/jquery-ui.min.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/swiper.min.js?v1"></script> <script type="text/javascript" charset="UTF-8" src="../assets/js/library/swiper.min.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/aos.js?v1"></script> <script type="text/javascript" charset="UTF-8" src="../assets/js/library/aos.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v1.1"></script> <script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v12"></script>
<!--상품상세 페이지 css 분리--> <!--상품상세 페이지 css 분리-->
<link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v1.2" type="text/css" /> <link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v1.2" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v5" type="text/css" /> <link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v6" type="text/css" />
<link rel="shortcut icon" href="../assets/images/kia/home_icon.png" /> <link rel="shortcut icon" href="../assets/images/kia/home_icon.png" />
<link rel="apple-touch-icon-precomposed" href="../assets/images/kia/home_icon.png" /> <link rel="apple-touch-icon-precomposed" href="../assets/images/kia/home_icon.png" />
<link rel="shortcut icon" href="../assets/images/kia/favicon-16x16.png" /> <link rel="shortcut icon" href="../assets/images/kia/favicon-16x16.png" />
@@ -352,8 +352,8 @@
<div class="comp_body"> <div class="comp_body">
<div class="item aos-init aos-animate spec-area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-offset="9999" data-aos-duration="200"> <div class="item aos-init aos-animate spec-area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-offset="9999" data-aos-duration="200">
<div class="scroll_area"> <div class="scroll_area">
<img src="../assets/images/kia/pdp/streaming_premium/img_spec.png" class="themeImg" alt="이용 사양" /> <img src="../assets/images/kia/pdp/streaming_premium/img_spec.png" class="themeImg web" alt="이용 사양" />
<!-- <img src="../assets/images/kia/pdp/streaming_premium/img_spec_m.png" class="themeImg mobile" alt="비디오 스트리밍" /> --> <img src="../assets/images/kia/pdp/streaming_premium/img_spec_m.png" class="themeImg mobile" alt="이용 사양" />
</div> </div>
</div> </div>
@@ -363,17 +363,17 @@
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"> <div class="swiper-slide">
<div class="image_area"> <div class="image_area">
<img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img1.png" class="themeImg" alt="더욱 다양한 OTT 서비스" /> <img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img1_1.png" class="themeImg" alt="더욱 다양한 OTT 서비스" />
</div> </div>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<div class="image_area"> <div class="image_area">
<img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img1.png" class="themeImg" alt="더욱 다양한 OTT 서비스" /> <img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img1_2.png" class="themeImg" alt="더욱 다양한 OTT 서비스" />
</div> </div>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<div class="image_area"> <div class="image_area">
<img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img1.png" class="themeImg" alt="더욱 다양한 OTT 서비스" /> <img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img1_3.png" class="themeImg" alt="더욱 다양한 OTT 서비스" />
</div> </div>
</div> </div>
</div> </div>
@@ -396,17 +396,17 @@
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"> <div class="swiper-slide">
<div class="image_area"> <div class="image_area">
<img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img2.png" class="themeImg" alt="SNS 및 실시간 라이브 방송" /> <img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img2_1.png" class="themeImg" alt="SNS 및 실시간 라이브 방송" />
</div> </div>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<div class="image_area"> <div class="image_area">
<img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img2.png" class="themeImg" alt="SNS 및 실시간 라이브 방송" /> <img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img2_2.png" class="themeImg" alt="SNS 및 실시간 라이브 방송" />
</div> </div>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<div class="image_area"> <div class="image_area">
<img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img2.png" class="themeImg" alt="SNS 및 실시간 라이브 방송" /> <img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img2_3.png" class="themeImg" alt="SNS 및 실시간 라이브 방송" />
</div> </div>
</div> </div>
</div> </div>
@@ -428,17 +428,17 @@
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"> <div class="swiper-slide">
<div class="image_area"> <div class="image_area">
<img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img3.png" class="themeImg" alt="노래방 / 키즈/ 게임" /> <img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img3_1.png" class="themeImg" alt="노래방 / 키즈/ 게임" />
</div> </div>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<div class="image_area"> <div class="image_area">
<img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img3.png" class="themeImg" alt="노래방 / 키즈/ 게임" /> <img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img3_2.png" class="themeImg" alt="노래방 / 키즈/ 게임" />
</div> </div>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<div class="image_area"> <div class="image_area">
<img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img3.png" class="themeImg" alt="노래방 / 키즈/ 게임" /> <img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img3_3.png" class="themeImg" alt="노래방 / 키즈/ 게임" />
</div> </div>
</div> </div>
</div> </div>