기획전 스크립트 / 스타일 추가

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

@@ -21,9 +21,9 @@
 <th:block layout:fragment="content">
 
 <!-- 이벤트를 위한 임시 script 및 style 추가 시작 (21.10.22 by junghwan)  -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css" th:if="${planInfo.planSq}==38 or ${planInfo.planSq}==43 or ${planInfo.planSq}==49">
+<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">
 <!-- <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 src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js" th:if="${planInfo.planSq}==38 or ${planInfo.planSq}==43 or ${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"></script>
 <script th:src="${@environment.getProperty('domain.uximage')} + '/ux/mo/js/all.min.js'" th:if="${planInfo.planSq}==49"></script>
 
 <!-- 스타일데이 -->
@@ -196,6 +196,81 @@
     .linkBox_right2 img{max-width:300px; width:100%;}
     .gift-modal-info{position:absolute; top:60px;}
 </style>   
+<!-- 다이어리 사은품 -->
+<script th:if="${planInfo.planSq}==56">
+$(function () {
+    $('.gift_slider2').bxSlider(
+        {wrapperClass: 'sliderwrap4', auto: true, speed: 300, controls: false}
+    );
+});
+$(document).ready(function () {
+    $("#modal-gift2").click(function () {
+        $("#giftPop2").css('display', 'block');
+        $("body").addClass('ohidden');
+    });
+    $("#modal-gift3").click(function () {
+        $("#giftPop3").css('display', 'block');
+        $("body").addClass('ohidden');
+    });
+    $("#close-modal").click(function () {
+        $("#giftPop2").css('display', 'none');
+        $("body").removeClass('ohidden');
+        location.reload();
+    });
+    $("#close-modal2").click(function () {
+        $("#giftPop3").css('display', 'none');
+        $("body").removeClass('ohidden');
+        location.reload();
+    });
+});
+
+</script>
+<style type="text/css" th:if="${planInfo.planSq}==56">
+/* 처음 - (11월) 이번에 새로 추가된 css */
+    .pm_gift_red{padding:5rem 0 1rem; background:#ff3849; background-size: cover; text-align:center;}
+    .pm_gift_orange{padding:5rem 0 1rem; background:#fd9357; background-size: cover; text-align:center;}
+    .sliderwrap4{position:relative; max-width:860px; width:100%; margin-bottom:60px; text-align: center;}
+    .sliderwrap4 .bx-pager{position:absolute; width:100%; left:50%; bottom:-30px; transform:translateX(-50%);}
+    .sliderwrap4 .bx-pager div{display:inline-block;padding:0 3px;}
+    .sliderwrap4 .bx-pager div a{display:block; width:6px; height:6px; background:#fff; border-radius:100%; color:transparent; font-size:0px;}
+    .sliderwrap4 .bx-pager div .active{background:#000;}
+    .gift_box2 .gift_section #modal-gift3{position:absolute; bottom:2rem; left:50%; transform: translateX(-50%); max-width:18rem;;}
+    .gift_box2 .gift_section #modal-gift3 img{width:100%;}
+    #giftPop3 {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;}
+    .gift_box3{margin:3rem auto 2rem; max-width:1080px;}
+    .gift_box3 .gift_section{width:100%; width:auto; padding:0 2.2rem;}
+    .gift_box3 p{font-size:18px;}
+    .gift_box3 .gift_section{position:relative;}
+    .gift_box3 .gift_section #modal-gift2, .gift_box3 .gift_section #modal-gift3{position:absolute; bottom:2rem; left:50%; transform: translateX(-50%); max-width:18rem;;}
+    .gift_box3 .gift_section #modal-gift2 img, .gift_box3 .gift_section #modal-gift3 img{width:100%;}
+    /* 끝 - (11월) 이번에 새로 추가된 css */
+
+    .gift_box2{margin:5rem auto; max-width:1080px;}
+    .gift_box2 .gift_section{width:100%; width:auto; padding:0 2.2rem;}
+    .gift_box2 p{font-size:18px;}
+    .gift_box2 .gift_section{position:relative;}
+    .gift_box2 .gift_section #modal-gift2{position:absolute; bottom:2rem; left:50%; transform: translateX(-50%); max-width:18rem;;}
+    .gift_box2 .gift_section #modal-gift2 img{width:100%;}
+    .sliderwrap3{position:relative; width:100%; margin-bottom:80px; text-align: center;}
+    .sliderwrap3 .bx-pager{position:absolute; left:50%; bottom:-2rem; transform:translateX(-50%);}
+    .sliderwrap3 .bx-pager div{display:inline-block;padding:0 3px;}
+    .sliderwrap3 .bx-pager div a{display:block; width:6px; height:6px; background:#fff; border-radius:100%; color:transparent; font-size:0px;}
+    .sliderwrap3 .bx-pager div .active{background:#fd4802;}
+    .gift_slider2 li{text-align:right;}
+
+    #giftPop2 {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;}
+    .green_section{background-color:#638b57; text-align:center; padding:6rem 2rem;}
+
+    .brandSection_Link2{max-width:960px; overflow:hidden; margin:0 auto; border-bottom:1px solid #000;}
+    .linkBox_left2{float:left; width:50%; text-align:center; border-top:1px solid #000; border-left:1px solid #000; border-right:1px solid #000; box-sizing: border-box;}
+    .linkBox_left2 img{max-width:300px; width:100%;}
+    .linkBox_right2{float:right; width:50%; text-align:center;border-top:1px solid #000; border-right:1px solid #000; box-sizing: border-box;}
+    .linkBox_right2 img{max-width:300px; width:100%;}
+    .gift-modal-info{position:absolute; top:60px;}
+</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" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css" th:if="${planInfo.planSq}==38 or ${planInfo.planSq}==43 or ${planInfo.planSq}==49">
+<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">
 <!-- <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 src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js" th:if="${planInfo.planSq}==38 or ${planInfo.planSq}==43 or ${planInfo.planSq}==49"></script>
-<script th:src="${@environment.getProperty('domain.uximage')} + '/ux/pc/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"></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 src="https://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js" th:if="${planInfo.planSq}==38"></script>
@@ -127,7 +127,7 @@
 	.pm_gift img{max-width:1080px;}
 	.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 .gift_section #g-view{position:absolute; bottom:8rem; left:50%; transform: translateX(-50%);}
 	.gift_box p{font-size:18px;}
 	
 	.sliderwrap3{position:relative; max-width:860px; width:100%; margin-bottom:80px; text-align: center;}
@@ -141,6 +141,54 @@
 	.controls .bx-prev{right:calc(100% + 40px);}
 	.controls .bx-next{left:calc(100% + 40px);}
 </style>
+<!-- 다이어리 사은품 -->
+<script th:if="${planInfo.planSq}==56">
+  openWindow2 = function() {
+    var popupX = (document.body.offsetWidth / 2) - (800 / 2);
+    var popupY= (window.screen.height / 2) - (700 / 2);
+    window.open('https://image.istyle24.com/Statics/design/event/2021/1124Gift02/gift_popup2.html', '', 'status=no, height=700, width=800, left='+ popupX + ', top='+ popupY + ', screenX='+ popupX + ', screenY= '+ popupY);
+    return;
+  }
+  
+  openWindow3 = function() {
+    var popupX = (document.body.offsetWidth / 2) - (800 / 2);
+    var popupY= (window.screen.height / 2) - (700 / 2);
+    window.open('https://image.istyle24.com/Statics/design/event/2021/1124Gift02/gift_popup3.html', '', 'status=no, height=700, width=800, left='+ popupX + ', top='+ popupY + ', screenX='+ popupX + ', screenY= '+ popupY);
+    return;
+  }
+  
+  $(function () {
+      $('.gift_slider').bxSlider(
+          {wrapperClass: 'sliderwrap4', auto: true, speed: 300, nextText: '<i class="fas fa-chevron-right"></i>', prevText: '<i class="fas fa-chevron-left"></i>'}
+      );
+  });
+</script>
+<style type="text/css" th:if="${planInfo.planSq}==56">
+/* 처음 - (11월) 이번에 새로 추가된 css */
+.coner_item01 img {max-width:100%;}
+.pm_gift_box1{padding:80px 0; background:url('http://image.istyle24.com/Statics/design/event/2021/1124Gift02/1115_bg_gift_2.jpg') center no-repeat; background-size: cover; text-align:center;}
+.pm_gift_box1 img{max-width:1080px;}
+.pm_gift_red{padding:80px 0; background:#ff3849; background-size: cover; text-align:center;}
+.pm_gift_red img{max-width:1080px;}
+.pm_gift_orange{padding:80px 0; background:#fd9357; background-size: cover; text-align:center;}
+.pm_gift_orange img{max-width:1080px;}
+.sliderwrap4{position:relative; max-width:860px; width:100%; margin-bottom:80px; text-align: center;}
+.sliderwrap4 .bx-pager{position:absolute; left:50%; bottom:-40px; transform:translateX(-50%);}
+.sliderwrap4 .bx-pager div{display:inline-block;padding:0 3px;}
+.sliderwrap4 .bx-pager div a{display:block; width:6px; height:6px; background:#fff; border-radius:100%; color:transparent; font-size:0px;}
+.sliderwrap4 .bx-pager div .active{background:#000;}
+.controls2 .bx-prev, .controls2 .bx-next{position:absolute;top:50%;transform:translateY(-50%);font-size:3em;color:#fff;}
+.controls2 .bx-prev{right:calc(100% + 40px);}
+.controls2 .bx-next{left:calc(100% + 40px);}
+/* 끝 - (11월) 이번에 새로 추가된 css */
+
+.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:8rem; 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')}">