|
|
@@ -0,0 +1,120 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="ko"
|
|
|
+ xmlns:th="http://www.thymeleaf.org"
|
|
|
+ xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
|
+ layout:decorator="web/common/layout/DefaultLayoutWeb">
|
|
|
+<!--
|
|
|
+ *******************************************************************************
|
|
|
+ * @source : SocialMainFormWeb.html
|
|
|
+ * @desc : 소셜메인(핫딜메인) Page
|
|
|
+ *============================================================================
|
|
|
+ * Pastelmall
|
|
|
+ * Copyright(C) 2020 TSIT, All rights reserved.
|
|
|
+ *============================================================================
|
|
|
+ * VER DATE AUTHOR DESCRIPTION
|
|
|
+ * === =========== ========== =============================================
|
|
|
+ * 1.0 2021.3.11 sowon 최초 작성
|
|
|
+ *******************************************************************************
|
|
|
+ -->
|
|
|
+<body>
|
|
|
+<th:block layout:fragment="content">
|
|
|
+ <!-- container -->
|
|
|
+ <div id="container" class="container dp">
|
|
|
+ <div class="breadcrumb">
|
|
|
+ <ul>
|
|
|
+ <li class="bread_home"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">홈</a></li>
|
|
|
+ <li class="bread_2depth">핫딜</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="wrap">
|
|
|
+ <div class="content dp_hotdeal"> <!-- 페이지특정 클래스 = dp_hotdeal -->
|
|
|
+ <div class="cont_head">
|
|
|
+ <div>
|
|
|
+ <h3>[[${socialInfo.socialNm}]]</h3>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cont_body">
|
|
|
+ <div class="hotdeal">
|
|
|
+ <div id="countdown">
|
|
|
+ <span id="h-hours"></span>
|
|
|
+ <span id="h-minutes"></span>
|
|
|
+ <span id="h-seconds"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list_content">
|
|
|
+ <div class="itemsGrp rowtype"> <!-- itemsGrp rank hot deal --> <!-- rowtype 추가시 가로형태로 출력 -->
|
|
|
+ <th:block th:each="SocialData, SocialStat : ${socialGoods}">
|
|
|
+ <div th:class="${SocialData.stockQtySum == 0 ? 'item_prod sold_out' : 'item_prod'}" >
|
|
|
+ <div class="item_state"> <!-- item_state AD soldout -->
|
|
|
+ <a href="#none" class="itemLink">
|
|
|
+ <div class="itemPic">
|
|
|
+ <div class="shape ranker"><span>특가</span></div>
|
|
|
+ <img alt="BLUE-a" class=" vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + SocialData.sysImgNm}">
|
|
|
+ <button type="button" class="itemLike active">관심상품 추가</button>
|
|
|
+ </div>
|
|
|
+ <p class="itemBrand" th:text="${SocialData.brandKnm}"></p>
|
|
|
+ <div class="itemName" th:text="${SocialData.goodsNm}" style="font-size: 18px;"></div>
|
|
|
+ <p class="itemPrice" >
|
|
|
+ [[${#numbers.formatInteger(SocialData.currAprice,0,'COMMA')} + 원]]
|
|
|
+ <!-- [[${SocialData.currAprice}]]원 -->
|
|
|
+ <span class="itemPrice_original" th:text="${#numbers.formatInteger(SocialData.listPrice,0,'COMMA')} + '원'"></span>
|
|
|
+ <span class=" itemPercent" th:text="${#numbers.formatDecimal(SocialData.dcArate,1,0)} + '%'"></span>
|
|
|
+ </p>
|
|
|
+ <p class="itemBadge">
|
|
|
+ <span class="badge13">베스트 </span>
|
|
|
+ </p>
|
|
|
+ <!-- <div class="itemcolorchip">
|
|
|
+ <span class="chip_color35" value="ABM">BEIGE</span>
|
|
|
+ <span class="chip_color54" value="BDS">BLACK</span>
|
|
|
+ <span class="chip_color40" value="YBR">WHITE</span>
|
|
|
+ </div> -->
|
|
|
+ <div class="itemComment" th:text="${SocialData.goodsTnm}"></div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </th:block>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+<script th:inline="javascript">
|
|
|
+var socialInfo = [[${socialInfo}]];
|
|
|
+console.log(socialInfo);
|
|
|
+
|
|
|
+$(function(){
|
|
|
+ /* 핫딜 countDown */
|
|
|
+ function hotdealTimer() {
|
|
|
+ var endTime = new Date(socialInfo.socialEddt); // 남은시간 지정
|
|
|
+
|
|
|
+ endTime = (Date.parse(endTime) / 1000);
|
|
|
+
|
|
|
+ var now = new Date();
|
|
|
+ now = (Date.parse(now) / 1000);
|
|
|
+
|
|
|
+ var timeLeft = endTime - now;
|
|
|
+
|
|
|
+ var days = Math.floor(timeLeft / 86400);
|
|
|
+ var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
|
|
|
+ var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
|
|
|
+ var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
|
|
|
+
|
|
|
+ if (hours < '10') { hours = '0' + hours; }
|
|
|
+ if (minutes < '10') { minutes = '0' + minutes; }
|
|
|
+ if (seconds < '10') { seconds = '0' + seconds; }
|
|
|
+
|
|
|
+ //$('#d-days').html(days);
|
|
|
+ $('#h-hours').html(hours);
|
|
|
+ $('#h-minutes').html(minutes);
|
|
|
+ $('#h-seconds').html(seconds);
|
|
|
+ }
|
|
|
+ setInterval(function() { hotdealTimer(); }, 1000);
|
|
|
+ /* countDown */
|
|
|
+});
|
|
|
+</script>
|
|
|
+</th:block>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|