style24
/
style24.front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
							<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="mob/common/layout/DefaultLayoutMob">
<!--
 *******************************************************************************
 * @source  : LookbookMainFormMob.html
 * @desc    : 룩북리스트 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.05.09   bin2107     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">
	<main role="" id="" class="container dp">

		<section class="content dp_lookbook">
			<div class="inner">
				<!-- 상품리스트 -->
				<div class="list_content"> <!-- 데이터 없을시 클래스 nodata 추가 -->
					<div class="count_wrap">
						<div>
							<p><span>9999</span>개의 상품</p>
						</div>
						<div>
							<ul class="dp_util">
								<li>
									<div class="open_categori">
										<!-- 210415_select > a태그로 변경 -->
										<a id="filter">브랜드선택
											<!--<option value="hide">브랜드선택</option>
                                            <option value="Test_SELECT_OPTION_1" rel="icon-temperature">브랜드1</option>
                                            <option value="Test_SELECT_OPTION_2">브랜드2</option>
                                            <option value="Test_SELECT_OPTION_3">브랜드3</option>-->
										</a>
									</div>
								</li>
							</ul>
						</div>
					</div>
					<div class="list_defult">
						<div>
							<p>등록된 룩북이 없습니다.</p>
						</div>
						<button type="button" class="btn btn_default"><span>홈으로 가기</span></button>
					</div>
					<div class="lookbookGrp">
						<div class="swiper_filter brand">
							<div class="cate_wrap">
								<a href="javascript:;">전체</a>
								<a href="javascript:;">티셔츠/셔츠</a>
								<a href="javascript:;">니트/가디건/베스트</a>
								<a href="javascript:;">원피스/스커트</a>
								<a href="javascript:;">팬츠/데님/레깅스</a>
								<a href="javascript:;">가죽/모피</a>
								<a href="javascript:;">여성 잡화</a>
								<a href="javascript:;">언더웨어</a>
								<a href="javascript:;">세트</a>
								<a href="javascript:;">니트/가디건/베스트</a>
								<a href="javascript:;">원피스/스커트</a>
								<a href="javascript:;">가죽/모피</a>
								<a href="javascript:;">여성 잡화</a>
							</div>
							<div class="btnbox"><a href="#none" class="reset">새로고침</a></div>
						</div>
						<ul class="event_con">
							<li>
								<a href="">
									<div class="ev_img">
										<img src="/images/pc/thumb/ev_list_img01.jpg" alt="ATTENTION! 20FW HOLIDAY TBJ 주목할 홀리데이 TBJ 컬렉션">
									</div>
									<div class="ev_txt">
										<p class="brand">TBJ 외</p>
										<p class="tit">2020 F/W COLLECTION 2020</p>
									</div>
								</a>
							</li>
							<li>
								<a href="">
									<div class="ev_img">
										<img src="/images/pc/thumb/ev_list_img01.jpg" alt="ATTENTION! 20FW HOLIDAY TBJ 주목할 홀리데이 TBJ 컬렉션">
									</div>
									<div class="ev_txt">
										<p class="brand">TBJ 외</p>
										<p class="tit">2020 F/W COLLECTION 2020</p>
									</div>
								</a>
							</li>
							<li>
								<a href="">
									<div class="ev_img">
										<img src="/images/pc/thumb/ev_list_img01.jpg" alt="ATTENTION! 20FW HOLIDAY TBJ 주목할 홀리데이 TBJ 컬렉션">
									</div>
									<div class="ev_txt">
										<p class="brand">TBJ 외</p>
										<p class="tit">2020 F/W COLLECTION 2020</p>
									</div>
								</a>
							</li>
							<li>
								<a href="">
									<div class="ev_img">
										<img src="/images/pc/thumb/ev_list_img01.jpg" alt="ATTENTION! 20FW HOLIDAY TBJ 주목할 홀리데이 TBJ 컬렉션">
									</div>
									<div class="ev_txt">
										<p class="brand">TBJ 외</p>
										<p class="tit">2020 F/W COLLECTION 2020</p>
									</div>
								</a>
							</li>
							<li>
								<a href="">
									<div class="ev_img">
										<img src="/images/pc/thumb/ev_list_img01.jpg" alt="ATTENTION! 20FW HOLIDAY TBJ 주목할 홀리데이 TBJ 컬렉션">
									</div>
									<div class="ev_txt">
										<p class="brand">TBJ 외</p>
										<p class="tit">2020 F/W COLLECTION 2020</p>
									</div>
								</a>
							</li>
							<li>
								<a href="">
									<div class="ev_img">
										<img src="/images/pc/thumb/ev_list_img01.jpg" alt="ATTENTION! 20FW HOLIDAY TBJ 주목할 홀리데이 TBJ 컬렉션">
									</div>
									<div class="ev_txt">
										<p class="brand">TBJ 외</p>
										<p class="tit">2020 F/W COLLECTION 2020</p>
									</div>
								</a>
							</li>
							<li>
								<a href="">
									<div class="ev_img">
										<img src="/images/pc/thumb/ev_list_img01.jpg" alt="ATTENTION! 20FW HOLIDAY TBJ 주목할 홀리데이 TBJ 컬렉션">
									</div>
									<div class="ev_txt">
										<p class="brand">TBJ 외</p>
										<p class="tit">2020 F/W COLLECTION 2020</p>
									</div>
								</a>
							</li>
							<li>
								<a href="">
									<div class="ev_img">
										<img src="/images/pc/thumb/ev_list_img01.jpg" alt="ATTENTION! 20FW HOLIDAY TBJ 주목할 홀리데이 TBJ 컬렉션">
									</div>
									<div class="ev_txt">
										<p class="brand">TBJ 외</p>
										<p class="tit">2020 F/W COLLECTION 2020</p>
									</div>
								</a>
							</li>
						</ul>
					</div>
					<div class="list_last">마지막페이지 입니다.</div>
				</div>
				<!-- //상품리스트 -->
			</div>
		</section>

		<!-- 카테고리 -->
		<div class="category_box lookbook">
			<div class="lap">
				<div class="category_close">카테고리닫기</div>
				<div class="category_list">
					<!-- 카테고리 선택 -->
					<div class="selcet_list">
						<ul>
							<li class="active"><a href="javascript:void(0)">전체</a></li>
							<li><a href="javascript:void(0)">BUCKAROO</a></li>
							<li><a href="javascript:void(0)">TBJ</a></li>
							<li><a href="javascript:void(0)">ANDEW</a></li>
							<li><a href="javascript:void(0)">FRJ</a></li>
							<li><a href="javascript:void(0)">LPGA골프</a></li>
						</ul>
					</div>
					<!-- 카테고리 선택 -->
				</div>
				<div class="category_floormenu"><!--  ☞☞ 제품이 품절되면 soldout클래스 추가 -->
					<div>
						<button class="reset"><span>초기화</span></button>
					</div>
					<div>
						<button class="apply"><span>적용</span></button>
					</div>
				</div>
			</div>
		</div>
		<!-- //카테고리 -->

		<!-- 210415_최신상품순 리스트 팝업 추가 -->
		<div id="odDatePop" class="popup_box odDatePop">
			<div class="lap">
				<div class="popup_close">카테고리닫기</div>
				<div class="popup_head sr-only">
					<h2 class="">기간 선택 팝업</h2>
				</div>
				<div class="popup_con">
					<div class="button_list clear">
						<button type="button" class="on"><span>전체</span></button>
						<button type="button"><span>BUCKAROO</span></button>
						<button type="button"><span>TBJ</span></button>
						<button type="button"><span>ANDEW</span></button>
						<button type="button"><span>FRJ</span></button>
					</div>
				</div>
			</div>
			<div class="brand_floormenu"><!--  ☞☞ 제품이 품절되면 soldout클래스 추가 -->
				<div class="share_like">
					<button class="refresh">초기화</button>
					<!--<button class="like">위시리스트</button>-->
				</div>
				<div class="prd_buy">
					<button class="buying btPop_auto" id="btn_purchase">적용</button>
					<button class="cantbuying">SOLD OUT</button>
				</div>
			</div>
		</div>
	</main>

<script th:inline="javascript">
	/*<![CDATA[*/
	$(document).ready(function(){

		$(document).on('click','.sub_category .more_btn',function(){
			$(this).toggleClass('on');
			$('.sub_category .cate_wrap').toggleClass('on');
			if($(this).hasClass('on')){
				$(this).find('span').text('접기');
			}else{
				$(this).find('span').text('더보기');
			}
		});


		//카테고리
		function category(){
			var categoryOpen=$(".open_categori .select_dress");
			var categoryClose=$(".category_box .category_close");
			var categoryPop=$(".category_box");

			categoryOpen.on("click",function(){
				categoryPop.show();
				categoryPop.addClass("active");
				$("body").css({"overflow":"hidden"});
			});

			categoryClose.on("click",function(){
				categoryPop.hide();
				$("body").css({"overflow":"visible"});
			});
		}
		category();

		// 210415_팝업관련 추가
		//기간 선택 팝업
		$(document).on("click", ".open_categori", function(){
			$('#odDatePop').show().addClass("active");
			$("body").css({"overflow":"hidden"});
		});
		//팝업_닫기
		$('.popup_close').on("click",function(){
			$('.popup_box').hide().removeClass('active');
			$("body").css({"overflow":"visible"});
		});
		// 210415_팝업 테두리 선택 추가
		$(document).ready(function(){
			$(document).on('click','.popup_box .button_list button',function(){
				//$('.popup_box .button_list button').removeClass('on');
				$(this).toggleClass('on');
			})
		});
		$(document).on('click','.popup_box .button_list button',function(){
			$(this).parents('.popup_box').show().addClass('active');
			//$("body").css({"overflow":"visible"});
		});
		$(document).on('click','.brand_floormenu .refresh',function(){
			$('.popup_box .button_list button').removeClass('on');
		});
		$(document).on('click','.popup_box .buying',function(){
			$(this).parents('.popup_box').hide().removeClass('active');
			$("body").css({"overflow":"visible"});
		});

	});
	/*]]>*/
</script>

</th:block>

</body>
</html>