Merge remote-tracking branch 'style24/stage_tsit' into develop

src/main/webapp/WEB-INF/views/mob/planning/PlanningDetailFormMob.html

@@ -21,10 +21,10 @@
 <th:block layout:fragment="content">
 
 <!-- 이벤트를 위한 임시 script 및 style 추가 시작 (21.10.22 by junghwan)  -->
-<link rel="stylesheet" th:href="${@environment.getProperty('domain.uximage')} + '/ux/jquery.bxslider.css'" th:if="${planInfo.planSq}==38 or ${planInfo.planSq}==43 or ${planInfo.planSq}==49 or ${planInfo.planSq}==56">
+<link rel="stylesheet" th:href="${@environment.getProperty('domain.uximage')} + '/ux/jquery.bxslider.css'" th:if="${planInfo.planSq}==38 or ${planInfo.planSq}==43 or ${planInfo.planSq}==49 or ${planInfo.planSq}==56 or ${planInfo.planSq}==63">
 <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" th:if="${planInfo.planSq}==38 or ${planInfo.planSq}==43"></script> -->
-<script th:src="${@environment.getProperty('domain.uximage')} + '/ux/jquery.bxslider.min.js'" th:if="${planInfo.planSq}==38 or ${planInfo.planSq}==43 or ${planInfo.planSq}==49 or ${planInfo.planSq}==56"></script>
-<script th:src="${@environment.getProperty('domain.uximage')} + '/ux/mo/js/all.min.js'" th:if="${planInfo.planSq}==49"></script>
+<script th:src="${@environment.getProperty('domain.uximage')} + '/ux/jquery.bxslider.min.js'" th:if="${planInfo.planSq}==38 or ${planInfo.planSq}==43 or ${planInfo.planSq}==49 or ${planInfo.planSq}==56 or ${planInfo.planSq}==63"></script>
+<script th:src="${@environment.getProperty('domain.uximage')} + '/ux/mo/js/all.min.js'" th:if="${planInfo.planSq}==49 or ${planInfo.planSq}==63"></script>
 
 <!-- 스타일데이 -->
 <script src="https://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js" th:if="${planInfo.planSq}==38"></script>
@@ -271,6 +271,55 @@ background-color: #fff;text-align: center;}
     .linkBox_right2 img{max-width:300px; width:100%;}
     .gift-modal-info{position:absolute; top:60px;}
 </style>
+<!-- 유아동브랜드 Holiday 사은품이벤트 -->
+<script th:if="${planInfo.planSq}==63">
+    let slider = $('.gift_slider').bxSlider(
+        {
+            wrapperClass: 'giftwrap', 
+            auto: true, 
+            speed: 300, 
+            controls: false,
+        }
+    );
+    $(document).on('click','.bx-next, .bx-prev',function() {
+    	slider.stopAuto();
+    	slider.startAuto();
+    });
+    $(document).ready(function () {
+        $("#modal-gift").click(function () {
+            $("#giftPop").css('display', 'block');
+            $("body").addClass('ohidden');
+        });
+        $("#close-modal").click(function () {
+            $("#giftPop").css('display', 'none');
+            $("body").removeClass('ohidden');
+            location.reload(true);
+        });
+    });
+</script>
+<style type="text/css" th:if="${planInfo.planSq}==63">
+    .pm_gift_box1{padding:5rem 0; background:#333231; text-align:center;}
+    .pm_gift_box1 img{max-width:960px; width:100%;}
+    .pm_gift_box2{padding:2rem 0 5rem; background:#70121e; text-align:center;}
+    .pm_gift_box2 img{max-width:960px; width:100%;}
+    .pm_gift_red{padding:2rem 0 4rem; background:#af1c2f; background-size: cover; text-align:center;}
+    .giftwrap{position:relative; max-width:860px; width:100%; margin-bottom:40px; text-align: center;}
+    .giftwrap .bx-pager{position:absolute; width:100%; left:50%; bottom:-20px; transform:translateX(-50%);}
+    .giftwrap .bx-pager div{display:inline-block;padding:0 3px;}
+    .giftwrap .bx-pager div a{display:block; width:6px; height:6px; background:#fff; border-radius:100%; color:transparent; font-size:0px;}
+    .giftwrap .bx-pager div .active{background:#000;}        
+    .gift_slider li{text-align:right;}
+    #giftPop {position: fixed; top: 0; right: 0;bottom: 0;left: 0;width: 100%;height: 100%;overflow: auto;z-index: 999;padding: 0;box-sizing: border-box;
+    background-color: #fff;text-align: center;}
+    .ohidden{overflow:hidden;}
+    .gift-modal-info{position:absolute; top:52px;}
+    .gift_box{margin:3rem auto 2rem; max-width:1080px;}
+    .gift_box .gift_section{width:100%; width:auto; padding:0 2rem;}
+    .gift_box p{font-size:18px;}
+    .gift_box .gift_section{position:relative;}
+    .gift_box .gift_section #modal-gift{position:absolute; bottom:2rem; left:50%; transform: translateX(-50%); max-width:15rem;;}
+    .gift_box .gift_section #modal-gift img{width:100%;}
+</style>   
 <!-- 이벤트를 위한 임시 script 및 style 추가 종료 (21.10.22 by junghwan)  -->
 
 <main role="" id="" class="container dp">

src/main/webapp/WEB-INF/views/web/planning/PlanningDetailFormWeb.html

@@ -19,10 +19,10 @@
 <th:block layout:fragment="content">
 <script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
 <!-- 이벤트를 위한 임시 script 및 style 추가 시작 (21.10.22 by junghwan)  -->
-<link rel="stylesheet" th:href="${@environment.getProperty('domain.uximage')} + '/ux/jquery.bxslider.css'" th:if="${planInfo.planSq}==38 or ${planInfo.planSq}==43 or ${planInfo.planSq}==49 or ${planInfo.planSq}==56">
+<link rel="stylesheet" th:href="${@environment.getProperty('domain.uximage')} + '/ux/jquery.bxslider.css'" th:if="${planInfo.planSq}==38 or ${planInfo.planSq}==43 or ${planInfo.planSq}==49 or ${planInfo.planSq}==56 or ${planInfo.planSq}==63">
 <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" th:if="${planInfo.planSq}==38 or ${planInfo.planSq}==43"></script> -->
-<script th:src="${@environment.getProperty('domain.uximage')} + '/ux/jquery.bxslider.min.js'" th:if="${planInfo.planSq}==38 or ${planInfo.planSq}==43 or ${planInfo.planSq}==49 or ${planInfo.planSq}==56"></script>
-<script th:src="${@environment.getProperty('domain.uximage')} + '/ux/pc/js/all.min.js'" th:if="${planInfo.planSq}==49 or ${planInfo.planSq}==56"></script>
+<script th:src="${@environment.getProperty('domain.uximage')} + '/ux/jquery.bxslider.min.js'" th:if="${planInfo.planSq}==38 or ${planInfo.planSq}==43 or ${planInfo.planSq}==49 or ${planInfo.planSq}==56 or ${planInfo.planSq}==63"></script>
+<script th:src="${@environment.getProperty('domain.uximage')} + '/ux/pc/js/all.min.js'" th:if="${planInfo.planSq}==49 or ${planInfo.planSq}==56 or ${planInfo.planSq}==63"></script>
 
 <!-- 스타일데이 -->
 <script src="https://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js" th:if="${planInfo.planSq}==38"></script>
@@ -189,6 +189,49 @@
 .gift_slider li{text-align:right;}
 .gift_slider li span{position:absolute; left:50%; bottom:30px; transform:translateX(-50%);}
 </style>
+<!-- 유아동브랜드 Holiday 사은품이벤트 -->
+<script th:if="${planInfo.planSq}==63">
+	openWindow = function() {
+		var popupX = (document.body.offsetWidth / 2) - (800 / 2);
+		var popupY= (window.screen.height / 2) - (700 / 2);
+		window.open('gift_popup.html', '', 'status=no, height=700, width=800, left='+ popupX + ', top='+ popupY + ', screenX='+ popupX + ', screenY= '+ popupY);
+		return;
+	}
+	let slider = $('.gift_slider').bxSlider(
+        {
+            wrapperClass: 'giftwrap', 
+            auto: true, 
+            speed: 300, 
+            nextText: '<i class="xi-angle-right-thin"></i>',
+            prevText: '<i class="xi-angle-left-thin"></i>',
+        }
+    );
+    $(document).on('click','.bx-next, .bx-prev',function() {
+        slider.stopAuto();
+        slider.startAuto();
+    });
+</script>
+<style th:if="${planInfo.planSq}==63">
+	.coner_item01 img {max-width:100%;}
+	.pm_gift_box1{padding:110px 0 70px; background:#333231; text-align:center;}
+	.pm_gift_box1 img{max-width:1080px;}
+	.pm_gift_red{padding:80px 0; background:#af1c2f; text-align:center;}
+	.pm_gift_red img{max-width:1080px;}
+	.giftwrap{position:relative; max-width:860px; width:100%; margin-bottom:80px; text-align: center;}
+	.giftwrap .bx-pager{position:absolute; left:50%; bottom:-40px; transform:translateX(-50%);}
+	.giftwrap .bx-pager div{display:inline-block;padding:0 3px;}
+	.giftwrap .bx-pager div a{display:block; width:6px; height:6px; background:#fff; border-radius:100%; color:transparent; font-size:0px;}
+	.giftwrap .bx-pager div .active{background:#000;}
+	.g_controls .bx-prev, .g_controls .bx-next{position:absolute;top:50%;transform:translateY(-50%);font-size:4rem;color:#fff;}
+	.g_controls .bx-prev{right:calc(100% + 40px);}
+	.g_controls .bx-next{left:calc(100% + 40px);}
+	.gift_box{margin:30px 0;}
+	.gift_box .gift_section{position:relative; max-width:860px; width:auto; margin:0 auto;}
+	.gift_box .gift_section #g-view{position:absolute; bottom:2rem; left:50%; transform: translateX(-50%);}
+	.gift_box p{font-size:18px;}
+	.gift_slider li{text-align:right;}
+	.gift_slider li span{position:absolute; left:50%; bottom:30px; transform:translateX(-50%);}
+</style>
 <!-- 이벤트를 위한 임시 script 및 style 추가 종료 (21.10.22 by junghwan)  -->
 
 <div id="container" class="container dp" th:with="frontUrl=${@environment.getProperty('domain.front')}, goodsView=${@environment.getProperty('upload.goods.view')}, planView=${@environment.getProperty('upload.image.view')}">