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;
width: 5rem;
height: 5rem;
border: 1px solid #D3D3D3;
border-radius: 50%;
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-x: auto;
}
.scroll_area .themeImg {
height: 40rem;
.scroll_area .web {
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 */

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

File diff suppressed because one or more lines are too long

81
assets/css/pdp_detail.scss
View File

@@ -1561,7 +1561,7 @@
}
}
.btn-select.on + .list-member {
.btn-select.on+.list-member {
display: block;
}
@@ -1832,7 +1832,7 @@
font-size: 1.8rem;
}
> p {
>p {
position: relative;
width: 93%;
@@ -1908,7 +1908,7 @@
}
}
dt.active + dd {
dt.active+dd {
display: block;
}
@@ -2040,7 +2040,7 @@
}
}
button + button {
button+button {
margin-top: 1rem;
@include tablet {
@@ -2052,7 +2052,7 @@
}
}
> .dd-padding {
>.dd-padding {
padding-left: 6.5rem;
}
}
@@ -2073,10 +2073,9 @@
content: none;
}
&:hover {
}
&:hover {}
> p {
>p {
span {
color: #9ea1a2;
}
@@ -2084,7 +2083,7 @@
}
}
dl + dl {
dl+dl {
margin-top: 1rem;
}
}
@@ -2304,6 +2303,7 @@
}
@include maxtablet {
&:before,
&:after {
display: none;
@@ -2372,6 +2372,7 @@
// height: 10rem;
.comp_body {
.text_area {
// display: flex;
h3 {
font-size: 3rem;
@@ -2382,7 +2383,7 @@
font-size: 1.6rem;
}
> * {
>* {
flex: 1;
}
}
@@ -2458,7 +2459,7 @@
}
}
& + .item {
&+.item {
margin-top: 8rem;
@include maxtablet {
@@ -2472,7 +2473,7 @@
}
}
& + .comp_1x_b_v_s_b {
&+.comp_1x_b_v_s_b {
position: relative;
z-index: 2;
margin-top: 0;
@@ -2498,7 +2499,7 @@
margin-top: 8rem;
.comp_body {
& + .comp_body {
&+.comp_body {
margin-top: 10rem;
}
@@ -2515,7 +2516,7 @@
.displayThemeDtl {
.swiper-navigation {
> * {
>* {
top: 210px;
left: -65px;
width: 5rem;
@@ -2750,6 +2751,7 @@
}
@include maxtablet {
&:before,
&:after {
display: none;
@@ -2820,12 +2822,13 @@
.comp_body {
.text_area {
// display: flex;
h3 {
margin-bottom: 2rem;
}
> * {
>* {
flex: 1;
}
}
@@ -2894,7 +2897,7 @@
}
}
& + .item {
&+.item {
margin-top: 8rem;
@include maxtablet {
@@ -2908,7 +2911,7 @@
}
}
& + .comp_1x_b_v_s_b {
&+.comp_1x_b_v_s_b {
position: relative;
z-index: 2;
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;
padding: 2rem 2rem 2rem 0;
@@ -3239,6 +3242,7 @@
margin-top: 6rem;
}
}
.mb-2 {
margin-bottom: 2rem;
@@ -3325,12 +3329,13 @@
// }
.comp_body {
.text_area {
// display: flex;
h3 {
margin-bottom: 2rem;
}
> * {
>* {
flex: 1;
}
}
@@ -3360,10 +3365,11 @@
.comp_wide {
&.title-only {
& + .comp_wide {
&+.comp_wide {
margin-top: 4rem;
}
}
.between {
display: flex;
justify-content: space-between;
@@ -3607,6 +3613,7 @@
}
&.paused {
.btn-play,
.btn-sound {
display: block !important;
@@ -3738,6 +3745,7 @@
}
&.playing {
.comp_body.layer_up,
.thumb-swiper,
.pdpInCarGameSwiper,
@@ -3823,12 +3831,14 @@
&:before {
background-color: rgba(5, 20, 31, 1);
}
.contents_area {
.image_area {
margin-top: 0;
}
}
}
.contents_area {
padding-top: 7rem;
@@ -3854,6 +3864,7 @@
flex-wrap: wrap;
}
}
.image_area {
max-width: 120rem;
height: auto;
@@ -3863,6 +3874,7 @@
@include maxmobile {
padding-top: 3rem;
}
img {
height: auto;
object-fit: inherit;
@@ -3874,11 +3886,12 @@
.pdpDtl {
.swiper-navigation {
> * {
>* {
top: 210px;
left: -65px;
width: 5rem;
height: 5rem;
border: 1px solid #D3D3D3;
border-radius: 50%;
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 {
overflow: hidden;
overflow-x: auto;
.themeImg {
height: 40rem;
.web {
display: block;
@include maxtablet {
display: none;
}
}
}
.mobile {
display: none;
@include maxtablet {
display: block;
}
}
.themeImg {
@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/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/common.js?v1.1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v12"></script>
<!--상품상세 페이지 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="apple-touch-icon-precomposed" href="../assets/images/kia/home_icon.png" />
<link rel="shortcut icon" href="../assets/images/kia/favicon-16x16.png" />
@@ -352,8 +352,8 @@
<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="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_m.png" class="themeImg mobile" 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="이용 사양" />
</div>
</div>
@@ -363,17 +363,17 @@
<div class="swiper-wrapper">
<div class="swiper-slide">
<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 class="swiper-slide">
<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 class="swiper-slide">
<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>
@@ -396,17 +396,17 @@
<div class="swiper-wrapper">
<div class="swiper-slide">
<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 class="swiper-slide">
<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 class="swiper-slide">
<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>
@@ -428,17 +428,17 @@
<div class="swiper-wrapper">
<div class="swiper-slide">
<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 class="swiper-slide">
<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 class="swiper-slide">
<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>