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-06-13 21:47:19 +09:00
parent 1724a26c6d
commit e6862c65ae
7 changed files with 82 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
assets/css/pdp_detail.css
View File

@@ -1972,9 +1972,14 @@
.displayTheme.comp_wide .comp_body.layer_up .text_area {
margin-top: 5.2rem;
}
@media (max-width: 768px) {
.displayTheme.comp_wide .comp_body.layer_up .text_area {
margin-top: 6rem !important;
}
}
@media (max-width: 768px) {
.displayTheme.comp_wide .comp_body .text_area {
margin-top: 4rem !important;
margin-top: 3rem !important;
}
.displayTheme.comp_wide .comp_body .text_area h3 {
font-size: 3rem;
@@ -2008,6 +2013,14 @@
padding: 3.4rem 0;
background-color: rgba(0, 0, 0, 0.8);
}
@media (max-width: 768px) {
.displayTheme.comp_wide .comp_bottom.thumb-swiper {
padding: 31.2rem 0 0;
}
.displayTheme.comp_wide .comp_bottom.thumb-swiper .com_bottm_inner {
padding: 2.4rem 0;
}
}
.displayTheme.comp_wide .comp_bottom .com_bottm_inner {
display: flex;
justify-content: center;
@@ -2070,7 +2083,7 @@
}
@media (max-width: 768px) {
.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide {
width: 18rem !important;
width: 12rem !important;
padding: 0.8rem;
}
}
@@ -2154,6 +2167,7 @@
position: absolute;
top: 2rem;
right: 2rem;
z-index: 1;
width: 6rem;
height: 6rem;
background: url(../images/kia/pdp/display_theme/btn_video_close.png) no-repeat center/contain;
@@ -2193,6 +2207,11 @@
position: relative;
padding-top: 7.2rem;
}
@media (max-width: 768px) {
.displayTheme .dtlImgs {
padding-top: 7.2rem;
}
}
.displayTheme .dtlImgs .item {
transition: opacity 0.2s;
}
@@ -2222,17 +2241,12 @@
}
@media (max-width: 768px) {
.displayTheme + .comp_1x_b_v_s_b {
margin-top: 7.5rem;
margin-top: 4rem;
}
}
.displayTheme + .comp_1x_b_v_s_b .image_area {
height: auto;
}
@media (max-width: 768px) {
.displayTheme + .comp_1x_b_v_s_b {
margin-top: 5rem;
}
}
.displayTheme .comp_body .text_area h5 {
font-size: 3rem;
}
@@ -2261,6 +2275,11 @@
.displayThemeDtl .swiper-pagination {
top: 46.4rem;
}
@media (max-width: 768px) {
.displayThemeDtl .swiper-pagination {
top: 13.4rem;
}
}
.displayThemeDtl .swiper-pagination .swiper-pagination-bullet {
opacity: 1;
width: 5.6rem;
@@ -2668,6 +2687,11 @@
padding: 0 2rem;
}
}
@media (max-width: 768px) {
.theme-story {
top: 0;
}
}
.theme-story .tooltip {
display: none;
}
@@ -2699,6 +2723,14 @@
margin-right: 0.8rem;
border-radius: 50%;
}
@media (max-width: 768px) {
.theme-story .dtthumb {
width: 7.4rem;
}
.theme-story .dtthumb p {
display: none;
}
}
.theme-story .btn-remove {
position: absolute;
top: 50%;
@@ -2723,6 +2755,12 @@
color: #000;
cursor: pointer;
}
@media (max-width: 768px) {
.displayTheme .btn-intro {
top: 2rem;
right: 1.6rem;
}
}
.displayTheme .btn-intro:before {
content: "";
display: block;

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

File diff suppressed because one or more lines are too long

39
assets/css/pdp_detail.scss
View File

@@ -1876,11 +1876,14 @@
&.layer_up {
.text_area {
margin-top:5.2rem;
@include maxtablet{
margin-top: 6rem !important;
}
}
}
.text_area {
@include maxtablet{
margin-top: 4rem !important;
margin-top: 3rem !important;
h3 {
font-size: 3rem;
}
@@ -1914,6 +1917,12 @@
padding:3.4rem 0;
background-color: rgba(0,0,0,.8);
}
@include maxtablet{
padding:31.2rem 0 0;
.com_bottm_inner {
padding:2.4rem 0;
}
}
}
.com_bottm_inner {
display: flex;
@@ -1966,7 +1975,7 @@
border:2px solid transparent;
cursor: pointer;
@include maxtablet{
width: 18rem !important;
width: 12rem !important;
padding:.8rem;
}
&:first-child {
@@ -2058,6 +2067,7 @@
position: absolute;
top: 2rem;
right: 2rem;
z-index: 1;
width: 6rem;
height: 6rem;
background: url(../images/kia/pdp/display_theme/btn_video_close.png) no-repeat center / contain;
@@ -2106,6 +2116,9 @@
.dtlImgs {
position: relative;
padding-top:7.2rem;
@include maxtablet{
padding-top:7.2rem;
}
.item {
transition: opacity 0.2s;
.text_area {
@@ -2130,15 +2143,12 @@
z-index: 2;
margin-top:0;
@include maxtablet{
margin-top: 7.5rem;
margin-top: 4rem;
}
.image_area {
height: auto;
}
@include maxtablet{
margin-top:5rem;
}
}
.comp_body .text_area h5 {
@@ -2172,6 +2182,9 @@
.swiper-pagination {
top:46.4rem;
@include maxtablet{
top: 13.4rem;
}
.swiper-pagination-bullet {
opacity: 1;
width: 5.6rem;
@@ -2558,6 +2571,9 @@
overflow-x: auto;
padding: 0 2rem;
}
@include maxtablet{
top: 0;
}
.tooltip {display: none;}
.btn-dtthumb {
position: relative;
@@ -2588,6 +2604,12 @@
margin-right:.8rem;
border-radius: 50%;
}
@include maxtablet{
width: 7.4rem;
p {
display: none;
}
}
}
.btn-remove {
@@ -2615,6 +2637,11 @@
font-weight: 600;
color:#000;
cursor: pointer;
@include maxtablet{
top:2rem;
right:1.6rem;
}
&:before {
content:"";
display: block;

BIN
assets/css/아카이브.zip
View File

Binary file not shown.

BIN
assets/images/kia/pdp/display_theme/NBA_Theme1_screen_m.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 464 KiB

After

Width:  |  Height:  |  Size: 285 KiB

BIN
assets/images/kia/pdp/display_theme/NBA_Theme_screen_m.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 116 KiB

4
product/pdp_display_theme_0429.html
View File

@@ -416,13 +416,13 @@
<div class="comp_wide comp_1x_w_v_o_b displayTheme">
<div class="image_area visualBg">
<img src="../assets/images/kia/pdp/display_theme/NBA_Theme_screen.jpg" class="web" alt="디스플레이 테마 이미지">
<img src="../assets/images/kia/pdp/display_theme/NBA_Theme1_screen_m.png" class="mobile" alt="디스플레이 테마 이미지">
<img src="../assets/images/kia/pdp/display_theme/NBA_Theme_screen_m.jpg" class="mobile" alt="디스플레이 테마 이미지">
</div>
<div class="comp_top">
<div class="comp_body layer_up">
<div class="text_area">
<h3 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
누구보다 돋보이게 빛나고, 차별화 된 라이팅 패턴
드라이빙 라이프에 스타일을 더 하는 특별한 테마
</h3>
<div class="info" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
운전자가 다가가면 다이나믹하게 반응하는 라이팅 패턴으로 내 차만의 특별한 존재감을 확인해 보세요.