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

디스플레이 테마 1차 업로드

Browse Source
This commit is contained in:
hyeonggil
2024-02-16 16:01:22 +09:00
parent f37f0a38d2
commit edc92db14c
8 changed files with 271 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
assets/css/pdp_detail.css
View File

@@ -1955,6 +1955,21 @@
background: rgb(255, 255, 255);
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 43%, rgb(255, 255, 255) 100%);
}
@media (max-width: 768px) {
.displayTheme.comp_wide .comp_body .text_area {
margin-top: 4rem !important;
}
}
@media (max-width: 768px) {
.displayTheme.comp_wide .comp_body .text_area h3 {
font-size: 3rem;
}
}
@media (max-width: 768px) {
.displayTheme.comp_wide .comp_body .text_area .info {
font-size: 1.4rem;
}
}
.displayTheme.comp_wide .comp_bottom {
display: flex;
align-items: center;
@@ -1963,9 +1978,17 @@
height: 44rem;
background-color: rgba(0, 0, 0, 0.8);
}
@media (max-width: 768px) {
.displayTheme.comp_wide .comp_bottom {
height: 22rem;
}
}
.displayTheme.comp_wide .comp_bottom .com_bottm_inner {
display: flex;
align-items: center;
position: relative;
max-width: 100%;
height: 100%;
}
.displayTheme.comp_wide .comp_bottom .com_bottm_inner:before, .displayTheme.comp_wide .comp_bottom .com_bottm_inner:after {
content: "";
@@ -1984,6 +2007,44 @@
right: 0;
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 43%, rgb(0, 0, 0) 100%);
}
@media (max-width: 1200px) {
.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper {
padding-right: 2rem;
}
}
.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper ul li {
width: 28.6rem !important;
cursor: pointer;
}
@media (max-width: 768px) {
.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper ul li {
width: 14rem !important;
}
}
@media (max-width: 1240px) {
.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper ul li:first-child {
margin-left: 2rem;
}
}
.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper ul li img {
width: 100%;
border-radius: 0.6rem;
}
.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper ul li p {
margin-top: 3rem;
font-size: 1.8rem;
font-weight: 400;
color: #FFFFFF;
text-align: center;
}
@media (max-width: 768px) {
.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper ul li p {
margin-top: 2rem;
}
}
.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper ul li.active img {
border: 1px solid #FFFFFF;
}
.displayTheme .comp_top {
z-index: 2;
height: 32.7rem;
@@ -1992,17 +2053,51 @@
position: relative;
z-index: 2;
height: 52rem;
background-color: rgba(0, 0, 0, 0.5);
background-color: rgba(0, 0, 0, 0);
}
@media (max-width: 768px) {
.displayTheme .comp_md {
height: 3rem;
}
}
.displayTheme .dtlImgs .item {
transition: opacity 0.2s;
}
.displayTheme .dtlImgs .item .text_area {
margin-top: 3rem;
}
@media (max-width: 768px) {
.displayTheme .dtlImgs .item .text_area {
margin-top: 2rem;
}
}
.displayTheme .dtlImgs .item + .item {
margin-top: 7.5rem;
}
@media (max-width: 768px) {
.displayTheme .dtlImgs .item + .item {
margin-top: 5rem;
}
}
.displayTheme .dtlImgs .item.change {
opacity: 0;
}
.displayTheme + .comp_1x_b_v_s_b {
position: relative;
z-index: 2;
margin-top: 21.6rem;
}
@media (max-width: 768px) {
.displayTheme + .comp_1x_b_v_s_b {
margin-top: 7.5rem;
}
}
.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;
}
}
/*# 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

88
assets/css/pdp_detail.scss
View File

@@ -1835,6 +1835,7 @@
.pdpDisplayThemeSwiper {
.swiper-wrapper {
transition-timing-function: linear ;
}
}
.displayTheme {
@@ -1858,7 +1859,26 @@
background: linear-gradient(180deg, rgba(255,255,255,0) 43%, rgba(255,255,255,1) 100%);
}
}
&.comp_wide {
.comp_body {
.text_area {
@include maxtablet{
margin-top: 4rem !important;
}
h3 {
@include maxtablet{
font-size: 3rem;
}
}
.info {
@include maxtablet{
font-size: 1.4rem;
}
}
}
}
.comp_bottom {
display: flex;
align-items: center;
@@ -1866,9 +1886,15 @@
z-index: 2;
height: 44rem;
background-color: rgba(0,0,0,.8);
@include maxtablet{
height: 22rem;
}
.com_bottm_inner {
display: flex;
align-items: center;
position: relative;
max-width:100%;
height: 100%;
&:before,&:after {
content:"";
display: block;
@@ -1886,6 +1912,44 @@
right:0;
background: linear-gradient(90deg, rgba(0,0,0,0) 43%, rgba(0,0,0,1) 100%);
}
.swiper {
@media(max-width: 1200px){
padding-right: 2rem;
}
ul{
li{
width: 28.6rem !important;
cursor: pointer;
@include maxtablet{
width: 14rem !important;
}
&:first-child {
@media(max-width: 1240px){
margin-left: 2rem;
}
}
img{
width: 100%;
border-radius: 0.6rem;
}
p {
margin-top: 3rem;
font-size: 1.8rem;
font-weight: 400;
color: #FFFFFF;
text-align: center;
@media(max-width: 768px){
margin-top: 2rem;
}
}
&.active {
img {
border: 1px solid #FFFFFF;
}
}
}
}
}
}
}
}
@@ -1897,15 +1961,28 @@
position: relative;
z-index: 2;
height: 52rem;
background-color: rgba(0,0,0,.5);
background-color: rgba(0,0,0,0);
@include maxtablet{
height: 3rem;
}
}
.dtlImgs {
.item {
transition: opacity 0.2s;
.text_area {
margin-top:3rem;
@include maxtablet{
margin-top:2rem;
}
}
&+.item {
margin-top:7.5rem;
@include maxtablet{
margin-top:5rem;
}
}
&.change {
opacity: 0;
}
}
}
@@ -1913,5 +1990,14 @@
position: relative;
z-index: 2;
margin-top:21.6rem;
@include maxtablet{
margin-top: 7.5rem;
}
.image_area {
height: auto;
}
@include maxtablet{
margin-top:5rem;
}
}
}

25
assets/css/product.css
View File

@@ -512,10 +512,21 @@
cursor: pointer;
position: relative;
}
@media (max-width: 768px) {
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn label {
height: 8rem;
}
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn label p img {
width: 12rem;
height: 12rem;
}
@media (max-width: 768px) {
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn label p img {
width: 8rem;
height: 8rem;
}
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .productSmallVideo {
min-width: 12rem;
height: 12rem;
@@ -612,7 +623,7 @@
@media (min-width: 1240px) {
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p span,
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p strong {
font-size: 1.6rem;
font-size: 1.4rem;
}
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p strong {
@@ -624,6 +635,11 @@
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p strong + span {
margin-top: 1rem;
}
@media (max-width: 768px) {
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p strong + span {
margin-top: 0.5rem;
}
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .disabledBtn label {
border: 1px solid #DEDEDE;
}
@@ -908,10 +924,15 @@
.optionList {
overflow: auto;
width: 500px;
height: 600px;
padding: 25px;
border: 1px solid #DEDEDE;
border-radius: 6px;
}
@media (max-width: 768px) {
.optionList {
height: 49.5rem;
padding: 2rem;
}
}
/*# sourceMappingURL=product.css.map */

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

File diff suppressed because one or more lines are too long

24
assets/css/product.scss
View File

@@ -462,10 +462,17 @@
overflow: hidden;
cursor: pointer;
position: relative;
@include maxtablet{
height:8rem;
}
p {
img {
width: 12rem;
height: 12rem;
@include maxtablet{
width: 8rem;
height: 8rem;
}
}
}
}
@@ -555,12 +562,17 @@
-webkit-box-orient: vertical;
overflow: hidden;
@include desktopMax{
font-size:1.6rem ;
font-size:1.4rem ;
}
}
strong{font-weight: 600;}
span{font-weight: 400;}
strong + span{margin-top:1rem; }
strong + span{
margin-top:1rem;
@include maxtablet{
margin-top:.5rem;
}
}
}
}
}
@@ -828,9 +840,15 @@
.optionList {
overflow: auto;
width: 500px;
//width: 500px;
height: 600px;
padding:25px;
border:1px solid #DEDEDE;
border-radius: 6px;
@include maxtablet{
height: 49.5rem;
padding:2rem;
}
@include desktopMax{
}
}

24
assets/js/common.js
View File

@@ -177,16 +177,29 @@ $(document).ready(function() {
var swiperTheme = new Swiper(".pdpDisplayThemeSwiper", {
slidesPerView: "auto",
loop:true,
spaceBetween: 20,
freeMode: true,
autoplay: {
delay:1,
disableOnInteraction: false,
},
speed: 4000,
breakpoints: {
// when window width is >= 320px
320: {
spaceBetween: 10,
},
// when window width is >= 480px
480: {
},
// when window width is >= 640px
640: {
spaceBetween: 20,
}
}
});
$('.pdpDisplayThemeSwiper').on('mouseleave', function() {
console.log("시작")
swiperTheme.autoplay.start();
@@ -433,6 +446,15 @@ $(document).on("click", ".dtthumb", function() {
$(this).parent().find("li").removeClass("active");
$(this).addClass("active");
$('.dtlImgs .item').addClass('change')
setTimeout(function() {
$('.dtlImgs .item').removeClass('change')
}, 200);
// AOS.refreshHard(); // Optional: Refresh AOS
// AOS.init();
$(".themeImg").each(function(e){
const idx = e+1;
const src = $(this).attr("src");

85
product/pdp_display_theme.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?v2"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v3"></script>
<!--상품상세 페이지 css 분리-->
<link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v2" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v2" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v3" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v3" 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">
@@ -301,11 +301,11 @@
</div>
</label>
</div>
<div class="checkBtn">
<div class="checkBtn withVideo">
<input type="checkbox" name="check" id="checkeTwo" value="Boston Celtics">
<label for="checkeTwo">
<label for="checkeOne">
<p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme2.png" alt="Boston Celtics"></p>
<div>
<div class="optionText">
<p>
<strong>Boston Celtics</strong>
<span>역동적인 느낌을 표현</span>
@@ -317,7 +317,7 @@
<input type="checkbox" name="check" id="checkeThree" value="Chicago Bulls" disabled>
<label for="checkeThree">
<p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme3.png" alt="Chicago Bulls"></p>
<div>
<div class="optionText">
<p>
<strong>Chicago Bulls</strong>
<span>하이테크적인 미래 감성을 표현</span>
@@ -329,7 +329,7 @@
<input type="checkbox" name="check" id="checkeTwo" value="Brooklyn Nets">
<label for="checkeTwo">
<p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme4.png" alt="Brooklyn Nets"></p>
<div>
<div class="optionText">
<p>
<strong>Brooklyn Nets</strong>
<span>강인하고 견고한 느낌을 표현</span>
@@ -341,7 +341,7 @@
<input type="checkbox" name="check" id="checkeThree" value="Charlotte Hornets" disabled>
<label for="checkeThree">
<p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme5.png" alt="Charlotte Hornets"></p>
<div>
<div class="optionText">
<p>
<strong>Charlotte Hornets</strong>
<span>세련된 패턴으로 품격을 표현</span>
@@ -353,7 +353,7 @@
<input type="checkbox" name="check" id="checkeTwo" value="ELEGANT">
<label for="checkeTwo">
<p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme6.png" alt="ELEGANT"></p>
<div>
<div class="optionText">
<p>
<strong>ELEGANT</strong>
<span>역동적인 사선 패턴</span>
@@ -363,52 +363,7 @@
</div>
</div>
</div>
<!-- <div class="producOption">
<h2>원하시는 상품을 선택해주세요</h2>
<div class="optionList">
<div class="checkBtn withVideo">
<input type="checkbox" name="check" id="checkeOne" value="Light Type-A" checked >
<label for="checkeOne">
<p class="productSmallVideo">
<video loop muted playsinline preload="auto" poster="/kr/assets/images/kia/product-img/producy-temp3.png">
<source src="../assets/images/kia/video/producy-temp3-video.mp4" type="video/mp4">
</video>
<img src="../assets/images/kia/product-img/producy-temp3.png" alt="이미지 상품명">
</p>
<div class="optionText">
<p>
<strong>Light Type-ALight Type-ALight Type-ALight Type-ALight Type-ALight Type-ALight Type-A</strong>
<span>파도 물결 패턴파도 물결 패턴파도 물결 패턴파도 물결 패턴파도 물결 패턴파도 물결 패턴파도 물결 패턴</span>
</p>
</div>
</label>
</div>
<div class="checkBtn">
<input type="checkbox" name="check" id="checkeTwo" value="Light Type-B">
<label for="checkeTwo">
<p><img src="../assets/images/kia/product-img/producy-temp2.png" alt="이미지 상품명"></p>
<div>
<p>
<strong>Light Type-B</strong>
<span>역동적인 사선 패턴</span>
</p>
</div>
</label>
</div>
<div class="checkBtn disabledBtn">
<input type="checkbox" name="check" id="checkeThree" value="Light Type-C" disabled>
<label for="checkeThree">
<p><img src="../assets/images/kia/product-img/producy-temp3.png" alt="이미지 상품명"></p>
<div>
<p>
<strong>Light Type-C</strong>
<span>부드러운 곡선 패턴</span>
</p>
</div>
</label>
</div>
</div>
</div> -->
<div class="priceOption">
<h2>원하시는 결제 옵션을 선택해주세요</h2>
<div class="priceList">
@@ -454,30 +409,28 @@
<!--//content-warp-->
<!--에디터 영역-->
<div class="editorWarp">
<div class="editorWarp pdpDetail">
<div class="editorInner">
<div class="comp_wide comp_1x_w_v_s_eS displayTheme">
<div class="visualBg">
<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_Theme1_screen.jpg" alt="디스플레이 테마 이미지">
</div>
<div class="comp_top">
<div class="comp_body">
<div class="comp_body layer_up">
<div class="text_area">
<h4 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<h3 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
누구보다 돋보이게 빛나고, <br>차별화 된 라이팅 패턴
</h4>
</h3>
<div class="info" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
운전자가 다가가면 다이나믹하게 반응하는 라이팅 패턴으로 <br>내 차만의 특별한 존재감을 확인해 보세요.
</div>
</div>
</div>
</div>
<div class="comp_md">
</div>
<div class="comp_md layer_up"></div>
<div class="comp_bottom">
<div class="com_bottm_inner">
<div class="swiper pdpDisplayThemeSwiper">
@@ -515,7 +468,7 @@
<div class="comp_wide comp_1x_b_v_s_b displayTheme">
<div class="comp_body dtlImgs">
<div class="item aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="200">
<div class="item aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-offset="9999" data-aos-duration="200">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme/NBA_Theme1-1.png" class="themeImg" alt="디스플레이 테마1">
</div>