Browse Source

몰메인 관련 수정

bin2107 5 years ago
parent
commit
9614c9c175

+ 18 - 2
src/main/webapp/WEB-INF/views/web/common/fragments/GnbWeb.html

@@ -766,14 +766,30 @@
 							tag+=' 		<img src="'+bannerImgUrl+''+item.imgPath1+'" alt=""/>';
 							tag+=' 	</a>';
 							tag+='</div>';
+							tag+='<div class="close_bnr_area">';
+							tag+=' 	<form class="form_wrap">';
+							tag+=' 		<div class="form_field">';
+							tag+=' 			<input id="chk-cookie" type="checkbox"><label for="chk-cookie"><span>오늘 하루 보지 않기</span></label>';
+							tag+=' 		</div>';
+							tag+=' 	</form>';
+							tag+=' 	<button id="btn_close_bnr" class="btn_close"><span>닫기</span></button>';
+							tag+='</div>';
 						}else{
-							tag+='<div class="bnrtype_text" style="background-color:#'+item.strVar5+';">';
+							tag+='<div class="bnrtype_text" style="background-color:#fd4801;">';
 							tag+=' 	<a href="'+item.strVar1+'" target="">';
-							tag+=' 		<div style="color:#'+item.strVar6+'; font-size:20px; font-weight:300;">';
+							tag+=' 		<div style="color:#fff; font-size:20px; font-weight:300;">';
 							tag+=' 			<span style="font-weight:500">'+item.strTitle1+'</span>';
 							tag+=' 		</div>';
 							tag+=' 	</a>';
 							tag+='</div>';
+							tag+='<div class="close_bnr_area">';
+							tag+=' 	<form class="form_wrap">';
+							tag+=' 		<div class="form_field">';
+							tag+=' 			<input id="chk-cookie" type="checkbox"><label for="chk-cookie"><span>오늘 하루 보지 않기</span></label>';
+							tag+=' 		</div>';
+							tag+=' 	</form>';
+							tag+=' 	<button id="btn_close_bnr" class="btn_close"><span>닫기</span></button>';
+							tag+='</div>';
 						}
 
 						$('#divTopbanner').html(tag);

+ 30 - 10
src/main/webapp/WEB-INF/views/web/display/MallMainFormWeb.html

@@ -113,7 +113,7 @@
 							<div class="swiper-container post-trendy">
 								<div class="swiper-wrapper">
 									<th:block th:each="goodsData, goodsStat : ${mainLayoutData.goodsList}">
-										<div class="swiper-slide">
+										<div class="swiper-slide" th:if="${goodsStat.count<21}">
 											<div class="item_prod">
 												<div class="item_state">
 													<button type="button" class="itemLike" th:classappend="${goodsData.likeIt == 'likeit'}? 'likeit' : ''"  onclick="cfnPutWishList(this);" th:attr="goodsCd=${goodsData.goodsCd}, ithrCd='', contentsLoc='SMM003', planDtlSq=''">관심상품 추가</button>
@@ -260,7 +260,7 @@
 								<div class="swiper-wrapper">
 									<th:block th:each="socialData, socialStat : ${mainLayoutData.socialInfo}">
 										<th:block th:each="goodsData, goodsStat : ${socialData.socialGoodsList}">
-											<div class="swiper-slide">
+											<div class="swiper-slide" th:if="${goodsStat.count<21}">
 												<div class="item_prod">
 													<div class="item_state">
 														<button type="button" class="itemLike" th:classappend="${goodsData.likeIt == 'likeit'}? 'likeit' : ''"  onclick="cfnPutWishList(this);" th:attr="goodsCd=${goodsData.goodsCd}, ithrCd='', contentsLoc='SMM006', planDtlSq=''">관심상품 추가</button>
@@ -315,16 +315,20 @@
 									<div class="swiper-slide">
 										<div class="pick_look">
 											<div class="swiper-container post-lookbook">
-												<div class="swiper-wrapper">
+												<div class="swiper-wrapper" id="id007">
 													<th:block th:each="bannerData, bannerStat : ${brandPickData.BannerList}">
 														<div class="swiper-slide" th:if="${bannerData.imgPath1 != ''}">
-															<div class="text_box">
-																<p class="title" th:text="${bannerData.strTitle1}">BUCKAROO<br> 2020 가을 신상 오픈1</p>
-																<p class="sub_text" th:text="${bannerData.subText1}"> 2020 FALL / WINTER 신상살펴보기1</p>
-															</div>
-															<div class="img_box">
-																<img th:src="${@environment.getProperty('domain.image')+bannerData.imgPath1}" alt="barnd lookbook">
-															</div>
+															<a th:href="${bannerData.strVar1}">
+																<div class="text_box">
+																	<p class="title">
+																		<input type="hidden" name="title" th:value="${bannerData.strTitle1}">
+																	</p>
+																	<p class="sub_text" th:text="${bannerData.subText1}"> 2020 FALL / WINTER 신상살펴보기1</p>
+																</div>
+																<div class="img_box">
+																	<img th:src="${@environment.getProperty('domain.image')+bannerData.imgPath1}" alt="barnd lookbook">
+																</div>
+															</a>
 														</div>
 													</th:block>
 												</div>
@@ -1166,6 +1170,22 @@ var main_tv_slide = new Swiper ('.main_tv .post-tv', {
 			tag += id006Text;
 			$("#id006").append(tag);
 		}
+
+		// 브랜드픽 <br> 태그
+		$('#id007 .title').each(function (){
+			let tag = '';
+			var brText = $(this).find("input[name=title]").val();
+
+			if(brText.indexOf('<br>') > -1){
+				var reText = brText.split("<br>");
+				tag += reText[0];
+				tag += '<br>';
+				tag += reText[1];
+			}else{
+				tag += brText;
+			}
+			$(this).append(tag);
+		});
 	});
 /*]]>*/
 </script>

+ 9 - 8
src/main/webapp/ux/pc/css/main.css

@@ -299,12 +299,12 @@
 
 
 /* main_stylereport */
-.main .wrap .content.main_stylereport {margin-top:20px;}
+.main .wrap .content.main_stylereport {margin-top:20px;padding-bottom: 40px;}
 .main_stylereport .cont_head {padding-bottom:60px;}
 .main_stylereport .cont_body a {text-align:center;color:#222222;}
 .main_stylereport .cont_body img {width:100%; height:auto; object-fit:cover;}
 .main_stylereport .cont_body dl {}
-.main_stylereport .cont_body dt {font-size:24px; font-weight:300; padding:25px 0 22px 0;}
+.main_stylereport .cont_body dt {font-size:24px; font-weight:300; padding:25px 0 17px 0;}
 .main_stylereport .cont_body dd {font-size:16px; font-weight:200; line-height:26px;}
 @media screen and (max-width:1460px) {
 	
@@ -313,7 +313,7 @@
 /* main_trendy */
 .main .wrap .content.main_trendy {background:#f5f5f5; margin-top:60px; margin-bottom:60px; padding-bottom:80px}
 .main_trendy .cont_head {padding:60px 0 60px 0;}
-.main_trendy .cont_body {position:relative; padding:0 70px;}
+.main_trendy .cont_body {position:relative; padding:0 60px;}
 .main_trendy .cont_body dl {}
 .main_trendy .cont_body dt {font-size:26px;font-weight:400;padding:28px 0 24px 0;}
 .main_trendy .cont_body dd {font-size:16px;font-weight:200;padding:10px 0 0;}
@@ -326,9 +326,9 @@
 .main_trendy .swiper-controls {padding-bottom:80px;}
 .main_trendy .swiper-pagination {margin-top:60px}
 .main_trendy .swiper-button-next, 
-.main_trendy .swiper-button-prev {top:250px;}
+.main_trendy .swiper-button-prev {top:210px;}
 .main_trendy .swiper-button-next {right:0px;}
-.main_trendy .swiper-button-prev {left:0px;}
+.main_trendy .swiper-button-prev {left:-15px;}
 @media screen and (max-width:1460px) {
 	.main_trendy .swiper-wrapper {min-height:520px;}
 }
@@ -337,11 +337,11 @@
 .main .wrap .content.main_it {position:relative; min-height:628px; padding-left:70px; padding-right:70px;}
 .main_it::after {content:''; display:block; clear:both;}
 .main_it .displayH {line-height:52px;}
-.main_it .cont_head{float:left; position:relative; width:380px; height:auto; line-height:1.2; margin-left:70px;}
+.main_it .cont_head{float:left; position:relative; width:384px; height:auto; line-height:1.2; margin-top: -4px; margin-left:66px;}
 .main_it .cont_head a {margin:22px 0;display:block;line-height:0;padding:0;}
 .main_it .cont_head span{font-size:18px;font-weight:300;color:#888888;}
 .main_it .cont_head a span::after{content:"";width:20px;height:13px;display:inline-block;background:url(/images/pc/ico_more_lg.png) 0% 0% no-repeat; background-position:10px 0px;}
-.main_it .cont_body{position:relative;width:calc(100% - 520px);float:left;margin:0 70px 0 0;}
+.main_it .cont_body{position:relative;width:calc(100% - 503px);float:left;margin:0;}
 .main_it .item_state {padding:0 0 60px;}
 .main_it .item_prod {width:100%;}
 .main_it .it_nav {position:absolute; left:-380px; top:195px; width:300px;}
@@ -427,6 +427,7 @@
 .main_pick .post-pick-for::after {content:'';display:block; clear:both;}
 .main_pick .post-pick-for .pick_look {float:left; width:38.2022%; background:#888888;}
 .main_pick .post-pick-for .pick_look .swiper-slide{position:relative; width:100%}
+.main_pick .post-pick-for .pick_look .swiper-slide a{display: inline-block; width: 100%; height: 100%;}
 .main_pick .post-pick-for .pick_look .swiper-slide .text_box {position:absolute; left:0; right:0; bottom:130px; color:#fff; text-align:center;}
 .main_pick .post-pick-for .pick_look .swiper-slide .text_box .title {position:relative; display:block; display:-webkit-box; width:100%; max-height:112px; overflow:hidden; white-space:normal; overflow-wrap:break-word; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:46px; font-weight:500; line-height:56px;}
 .main_pick .post-pick-for .pick_look .swiper-slide .text_box .sub_text {margin-top:25px; font-size:18px; font-weight:300; line-height:1;}
@@ -473,7 +474,7 @@
 .main_recomm .item_prod {width:100%;}
 .main_recomm .item_state {width:100%; padding:0;}
 .main_recomm .swiper-controls {margin-top:60px}
-.main_recomm .swiper-button-next {right:70px;}
+.main_recomm .swiper-button-next {right:60px;}
 .main_recomm .swiper-button-prev {left:70px;}
 @media screen and (max-width:1460px) {