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-04-02 09:26:01 +09:00
parent 5c46a5e3de
commit 77b020ccc5
18 changed files with 195 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
assets/css/pdp_detail.css
View File

@@ -2194,27 +2194,41 @@
.inCarGame .visualBg img {
width: 100%;
}
.inCarGame .visualBg:after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
width: 100%;
height: 60%;
background: rgb(255, 255, 255);
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 43%, rgb(255, 255, 255) 100%);
.inCarGame .visualBg img.mobile {
display: none;
}
@media (max-width: 768px) {
.inCarGame .visualBg img.web {
display: none;
}
.inCarGame .visualBg img.mobile {
display: block;
-o-object-fit: initial;
object-fit: initial;
height: auto;
}
}
.inCarGame.comp_wide .comp_body.layer_up .text_area {
margin-top: 7rem;
}
.inCarGame.comp_wide .comp_body.layer_up .text_area .info {
line-height: 1.5;
}
.inCarGame.comp_wide .comp_body.layer_up .text_area .info br {
display: none;
}
@media (max-width: 768px) {
.inCarGame.comp_wide .comp_body.layer_up .text_area .info br {
display: block;
}
}
@media (max-width: 768px) {
.inCarGame.comp_wide .comp_body .text_area {
margin-top: 4rem !important;
margin-top: 6rem;
}
.inCarGame.comp_wide .comp_body .text_area h3 {
font-size: 3rem;
line-height: 4rem;
}
.inCarGame.comp_wide .comp_body .text_area .info {
font-size: 1.4rem;
@@ -2235,7 +2249,7 @@
}
@media (max-width: 768px) {
.inCarGame.comp_wide .comp_bottom {
padding: 2rem 0;
padding: 0;
}
}
.inCarGame.comp_wide .comp_bottom .com_bottm_inner {
@@ -2289,6 +2303,7 @@
}
.inCarGame.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper {
width: 100%;
transition-timing-function: linear;
}
.inCarGame.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide {
width: 16.6rem !important;
@@ -2298,7 +2313,8 @@
}
@media (max-width: 768px) {
.inCarGame.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide {
width: 8rem !important;
width: 18rem !important;
padding: 0.8rem;
}
}
@media (max-width: 1240px) {
@@ -2319,7 +2335,7 @@
}
@media (max-width: 768px) {
.inCarGame.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide p {
margin-top: 2rem;
margin-top: 0.5rem;
}
}
.inCarGame.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide.active {
@@ -2327,7 +2343,13 @@
}
.inCarGame .comp_top {
z-index: 2;
height: 46rem;
height: 27.5vw;
max-height: 529px;
}
@media (max-width: 768px) {
.inCarGame .comp_top {
height: 43.9rem;
}
}
.inCarGame .comp_top .comp_body .text_area h3 {
margin-bottom: 2rem;
@@ -2401,7 +2423,7 @@
.inCarGame + .comp_1x_b_v_s_b {
position: relative;
z-index: 2;
margin-top: 9rem;
margin-top: 8rem;
}
@media (max-width: 768px) {
.inCarGame + .comp_1x_b_v_s_b {
@@ -2410,23 +2432,44 @@
}
.inCarGame + .comp_1x_b_v_s_b .image_area {
height: auto;
border-radius: 0.8rem;
}
.inCarGame + .comp_1x_b_v_s_b .image_area img {
display: block;
border-radius: 0.8rem;
overflow: hidden;
}
@media (max-width: 768px) {
.inCarGame + .comp_1x_b_v_s_b {
margin-top: 5rem;
margin-top: 4rem;
}
}
.inCarGame + .comp_1x_b_v_s_b .dtlImgs .text_area {
margin-top: 3.2rem;
}
.inCarGame .comp_body .text_area h5 {
font-size: 3rem;
}
.inCarGame .inCarGameDtl {
overflow: hidden;
border-radius: 0.8rem;
}
.inCarGame .inCarGameDtl .swiper-slide {
cursor: pointer;
}
.inCarGame .inCarGameDtlThumb {
margin-top: 0.7rem;
}
.inCarGame .inCarGameDtlThumb .swiper-slide {
position: relative;
border-radius: 0.8rem;
cursor: pointer;
}
.inCarGame .inCarGameDtlThumb .swiper-slide img {
display: block;
max-width: 100%;
border-radius: 0.8rem;
overflow: hidden;
}
.inCarGame .inCarGameDtlThumb .swiper-slide:after {
content: "";

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

File diff suppressed because one or more lines are too long

91
assets/css/pdp_detail.scss
View File

@@ -2106,19 +2106,30 @@
max-width: 192rem;
img {
width: 100%;
&.mobile {display: none;}
@include maxtablet{
&.web {display: none;}
&.mobile {
display: block;
object-fit: initial;
height: auto;
}
}
}
&:after {
content:"";
display: block;
position: absolute;
bottom:0;
left:0;
z-index: 2;
width: 100%;
height: 60%;
background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,0) 43%, rgba(255,255,255,1) 100%);
}
// &:after {
// content:"";
// display: block;
// position: absolute;
// bottom:0;
// left:0;
// z-index: 2;
// width: 100%;
// height: 60%;
// background: rgb(255,255,255);
// background: linear-gradient(180deg, rgba(255,255,255,0) 43%, rgba(255,255,255,1) 100%);
// }
}
&.comp_wide {
@@ -2126,13 +2137,24 @@
&.layer_up {
.text_area {
margin-top:7rem;
.info {
line-height: 1.5;
br {
display: none;
@include maxtablet{
display: block;
}
}
}
}
}
.text_area {
@include maxtablet{
margin-top: 4rem !important;
margin-top: 6rem;
h3 {
font-size: 3rem;
line-height: 4rem;
}
.info {
font-size: 1.4rem;
@@ -2155,7 +2177,7 @@
}
@include maxtablet{
// max-height: 22rem;
padding:2rem 0;
padding:0;
}
.com_bottm_inner {
display: flex;
@@ -2200,13 +2222,15 @@
}
.swiper-wrapper {
width: 100%;
transition-timing-function : linear;
.swiper-slide {
width: 16.6rem !important;
padding:6px;
border:2px solid transparent;
cursor: pointer;
@include maxtablet{
width: 8rem !important;
width: 18rem !important;
padding:.8rem;
}
&:first-child {
@media(max-width: 1240px){
@@ -2224,7 +2248,7 @@
text-transform: uppercase;
text-align: left;
@media(max-width: 768px){
margin-top: 2rem;
margin-top: .5rem;
}
}
&.active {
@@ -2238,7 +2262,12 @@
}
.comp_top {
z-index: 2;
height: 46rem;
// height: 46rem;
height: 27.5vw;
max-height: 529px;
@include maxtablet{
height: 43.9rem;
}
.comp_body {
.text_area {
// display: flex;
@@ -2321,28 +2350,50 @@
&+.comp_1x_b_v_s_b {
position: relative;
z-index: 2;
margin-top:9rem;
margin-top:8rem;
@include maxtablet{
margin-top: 7.5rem;
}
.image_area {
height: auto;
border-radius: 0.8rem;
img {
display: block;
border-radius: 0.8rem;
overflow: hidden;
}
}
@include maxtablet{
margin-top:5rem;
margin-top:4rem;
}
.dtlImgs {
.text_area {
margin-top:3.2rem;
}
}
}
.comp_body .text_area h5 {
font-size: 3rem;
}
.inCarGameDtl {
overflow: hidden;
border-radius: 0.8rem;
.swiper-slide {
cursor: pointer;
}
}
.inCarGameDtlThumb {
margin-top: .7rem;
.swiper-slide {
position: relative;
border-radius: 0.8rem;
cursor: pointer;
img {
display: block;
max-width: 100%;
border-radius: 0.8rem;
overflow: hidden;
}
&:after {
content:"";

BIN
assets/images/kia/pdp/in_car_game/theme1-1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 911 KiB

After

Width:  |  Height:  |  Size: 832 KiB

BIN
assets/images/kia/pdp/in_car_game/theme1-2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 752 KiB

After

Width:  |  Height:  |  Size: 691 KiB

BIN
assets/images/kia/pdp/in_car_game/theme1-3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 740 KiB

After

Width:  |  Height:  |  Size: 568 KiB

BIN
assets/images/kia/pdp/in_car_game/theme1_screen_m.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 455 KiB

BIN
assets/images/kia/pdp/in_car_game/theme2-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 568 KiB

BIN
assets/images/kia/pdp/in_car_game/theme2-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 691 KiB

BIN
assets/images/kia/pdp/in_car_game/theme2-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 832 KiB

BIN
assets/images/kia/pdp/in_car_game/theme3-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 691 KiB

BIN
assets/images/kia/pdp/in_car_game/theme3-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 568 KiB

BIN
assets/images/kia/pdp/in_car_game/theme3-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 832 KiB

BIN
assets/images/kia/pdp/in_car_game/theme4-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 568 KiB

BIN
assets/images/kia/pdp/in_car_game/theme4-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 691 KiB

BIN
assets/images/kia/pdp/in_car_game/theme4-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 832 KiB

59
assets/js/common.js
View File

@@ -400,18 +400,18 @@ function pdpInCarGameSwiper(){
delay:1,
disableOnInteraction: true,
},
speed: 3000,
speed: 2400,
breakpoints: {
// when window width is >= 320px
320: {
spaceBetween: 10,
spaceBetween: 5,
},
// when window width is >= 480px
480: {
},
// when window width is >= 640px
640: {
spaceBetween: 20,
spaceBetween: 10,
}
},
// navigation: {
@@ -420,6 +420,7 @@ function pdpInCarGameSwiper(){
// },
on: {
init: function () {
console.log('pdpInCarGameSwiper 실행한다')
},
},
});
@@ -448,10 +449,10 @@ function pdpInCarGameSwiperDtl(){
});
var inCarGameSwiper2 = new Swiper(".inCarGameDtl", {
spaceBetween: 10,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// navigation: {
// nextEl: ".inCarGameDtl .swiper-button-next",
// prevEl: ".inCarGameDtl .swiper-button-prev",
// },
thumbs: {
swiper: inCarGameSwiper,
},
@@ -460,7 +461,43 @@ function pdpInCarGameSwiperDtl(){
flagScroll = false;
}
$(document).on("click", ".dtthumb", function() {
$(document).on("click", ".inCarGame .dtthumb", function() {
const dtlImgPath = $(this).attr("value");
const dtlImgs = $(".inCarGame .dtlImgs");
$(".inCarGame .dtthumb").removeClass("active");
$(this).addClass("active");
$('.inCarGame .dtlImgs .item').addClass('change')
setTimeout(function() {
$('.inCarGame .dtlImgs .item').removeClass('change')
}, 200);
$(".inCarGame .themeImg").each(function(e){
const idx = e+1;
const src = $(this).attr("src");
const lastIndex = src.lastIndexOf("/");
const pathWithoutFileName = src.substring(0, lastIndex);
$(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.png`);
});
$(".inCarGame .themeImgThumb").each(function(e){
const idx = e+1;
const src = $(this).attr("src");
const lastIndex = src.lastIndexOf("/");
const pathWithoutFileName = src.substring(0, lastIndex);
$(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.png`);
});
// const visualBgSrc = $(".visualBg img").attr("src");
// const visualBgLastIndex = visualBgSrc.lastIndexOf("/");
// const visualBgPathWithoutFileName = visualBgSrc.substring(0, visualBgLastIndex);
// $(".visualBg img").attr("src", `${visualBgPathWithoutFileName}/${dtlImgPath}_screen.jpg`);
flagAutoPlay = false;
});
$(document).on("click", ".displayTheme .dtthumb", function() {
const dtlImgPath = $(this).attr("value");
const dtlImgs = $(".dtlImgs");
@@ -480,9 +517,9 @@ $(document).on("click", ".dtthumb", function() {
$(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.png`);
});
const visualBgSrc = $(".visualBg img").attr("src");
const visualBgLastIndex = visualBgSrc.lastIndexOf("/");
const visualBgPathWithoutFileName = visualBgSrc.substring(0, visualBgLastIndex);
// const visualBgSrc = $(".visualBg img").attr("src");
// const visualBgLastIndex = visualBgSrc.lastIndexOf("/");
// const visualBgPathWithoutFileName = visualBgSrc.substring(0, visualBgLastIndex);
// $(".visualBg img").attr("src", `${visualBgPathWithoutFileName}/${dtlImgPath}_screen.jpg`);

24
product/pdp_in_car_game.html
View File

@@ -24,7 +24,7 @@
<link rel="stylesheet" charset="UTF-8" href="../assets/css/library/swiper.min.css?v1" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/library/aos.css?v1" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/basic.css?v1" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/common.css?v1" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/common.css?v2" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/contents.css?v1" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/popup.css?v1" type="text/css" />
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/jquery.js?v1"></script>
@@ -34,7 +34,7 @@
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v1.1"></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?v1.1" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v4" 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">
@@ -338,7 +338,8 @@
<div class="comp_wide comp_1x_w_v_o_b inCarGame">
<div class="image_area visualBg">
<img src="../assets/images/kia/pdp/in_car_game/theme1_screen.jpg" alt="디스플레이 테마 이미지">
<img src="../assets/images/kia/pdp/in_car_game/theme1_screen.jpg" class="web" alt="디스플레이 테마 이미지">
<img src="../assets/images/kia/pdp/in_car_game/theme1_screen_m.jpg" class="mobile" alt="디스플레이 테마 이미지">
</div>
<div class="comp_top">
<div class="comp_body layer_up">
@@ -347,7 +348,7 @@
차안에서 게임을 즐기며 시간을 보내보세요.
</h3>
<div class="info" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
기다림의 시간을 즐겁게 만들어 줄 8종의 캐주얼 게임이 당신을 기다립니다.
기다림의 시간을 즐겁게 만들어 줄<br> 8종의 캐주얼 게임이 당신을 기다립니다.
</div>
</div>
</div>
@@ -426,13 +427,13 @@
<div thumbsSlider="" class="swiper inCarGameDtlThumb">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../assets/images/kia/pdp/in_car_game/theme1-1.png" alt="" />
<img src="../assets/images/kia/pdp/in_car_game/theme1-1.png" class="themeImgThumb" alt="" />
</div>
<div class="swiper-slide">
<img src="../assets/images/kia/pdp/in_car_game/theme1-2.png" alt="" />
<img src="../assets/images/kia/pdp/in_car_game/theme1-2.png" class="themeImgThumb" alt="" />
</div>
<div class="swiper-slide">
<img src="../assets/images/kia/pdp/in_car_game/theme1-3.png" alt="" />
<img src="../assets/images/kia/pdp/in_car_game/theme1-3.png" class="themeImgThumb" alt="" />
</div>
</div>
</div>
@@ -745,7 +746,7 @@
</div>
<div class="popInner payInfo" style="display:none;">
<div class="popContents">
<dㅇㅇㅇㅇiv class="popContents">
<h1>결제 방법 안내</h1>
<div class="payInfoCon">
<p>
@@ -757,9 +758,12 @@
<a href=""><p>닫기</p></a>
</div>
</div>
</div>
</dㅇㅇㅇㅇiv>
</div>
</div>
<!--//footer-->
<script>
AOS.init();
</script>
</body>
</html>
</html>