[김은해] 특장점 인포그래픽 수정

src/assets/css/seller_common.css

@@ -540,19 +540,21 @@
 }
 
 .seller-tab-area {
-  background-color: #fff;
   margin-right: -20px;
   margin-left: -20px;
   font-family: 'Spoqa Han Sans Neo', sans-serif;
+  padding:0 20px;
 }
 
 .seller-tab-area .tab-list {
   display: flex;
   border-bottom: 1px solid #e1e1e1;
+  background:#efeff1;
+  
 }
 
 .seller-tab-area .tab-item {
-  width: 50%;
+  width:33.333%;
 }
 
 .seller-tab-area .tab-item>a {
@@ -561,41 +563,52 @@
   padding: 14px 21px;
 }
 
+
 .seller-tab-area .tab-item.on>a {
   border-bottom: 3px solid #000;
   font-weight: 600;
 }
 
 .seller-tab-area .tab-content {
-  padding: 20px;
+  padding: 30px 0;
   background-color: #efeff1;
-  /* 2022.01.21 수정 */
+  margin-bottom:20px;
 }
 
 .seller-tab-area .tab-content img {
   max-width: 100%;
 }
 
+.seller-tab-area .anchor-wrap {
+  position:relative; 
+  height:50px;
+}
+
+
+.seller-tab-area .anchor-menu.menu-fixed {
+  position:fixed;
+  top:52px;
+  width:calc(100% - 40px);
+  max-width:560px;
+  z-index:100000;
+}
+
 /* 2022.01.21 특장점 추가 */
 .seller-tab-area .feature-point-tit {
-  border-radius: 4px;
-  border: 1px solid  #c7c7c7;
-  text-align: center;
-  line-height:40px;
-  font-size:1.5rem;
-  color:#666;
-  letter-spacing:-0.5px;
+  font-size:1.8rem;
+  color:#222;
+  letter-spacing:-0.6px;
 }
 
 .seller-tab-area .feature-point-item {
-  margin-bottom:1.2rem;
+  margin-bottom:3rem;
 }
 
 .seller-tab-area .fp-item-group {
   display:flex;
   flex-wrap: wrap;
   align-items: flex-start;
-  margin-top:0.4rem;
+  margin-top:0.8rem;
 }
 
 .seller-tab-area .group-box {
@@ -619,6 +632,12 @@
   margin-right:0;
 }
 
+.seller-tab-area .group-box.battery-box {
+  position:absolute;
+  bottom:0; 
+  right:0;
+  margin-right:0;
+}
 
 .seller-tab-area .phone-tag {
   font-size:1.2rem;
@@ -638,9 +657,15 @@
   position:relative;
 }
 
-.seller-tab-area .fp-item-desc.phone-scale-desc {
-  min-height:240px;
-  max-height:240px;
+.seller-tab-area .fp-item-desc.long-desc
+{
+  min-height:328px;
+  max-height:328px;
+}
+
+.seller-tab-area .fp-item-desc.long-desc .fp-item-img
+{
+  transform: translate(-50%,-110%);
 }
 
 .seller-tab-area .fp-item-tit {
@@ -654,7 +679,7 @@
 }
 
 .seller-tab-area .fp-item-tit.sub-display-tit {
-  margin-bottom:3.5rem;
+  margin-bottom:2rem;
 }
 
 .seller-tab-area .fp-item-txt {
@@ -664,12 +689,21 @@
   font-size:1.3rem;
 }
 
+.seller-tab-area .fp-item-txt.processor-txt {
+  bottom:6px;
+}
+
+.seller-tab-area .fp-item-desc.long-desc .processor-txt {
+  bottom:auto;
+  top:60%;
+}
+
 .seller-tab-area .fp-item-txt.side-txt {
   position:static;
   width:auto;
-  padding-right:14px; 
   box-sizing:border-box;
   line-height:1.5rem;
+  margin-left:54px;
 }
 
 .seller-tab-area .fp-item-txt.side-txt > div {
@@ -684,26 +718,11 @@
   justify-content:center;
 }
 
-.seller-tab-area .iphone-678 .row-box .side-txt {
-  margin-left:58px;
-}
-
-.seller-tab-area .android .fp-item-img.side-img {
-  width:109px;
-}
-
-.seller-tab-area .android .row-box {
-  max-width:270px;
-}
 
 .seller-tab-area .android-1 .row-box {
   justify-content:center;
 }
 
-.seller-tab-area .android-1 .row-box .side-txt {
-  margin-left:56px;
-}
-
 .seller-tab-area .wide-angle .row-box .side-txt {
   padding-right:0;
 }
@@ -733,9 +752,7 @@
 .seller-tab-area .row-box {
   display:flex;
   align-items: center;
-  justify-content:space-between;
-  max-width:240px;
-  margin:0 auto;
+  justify-content:center;
 }
 
 
@@ -744,6 +761,7 @@
   margin-top:0.8rem;
   color:#666;
   letter-spacing: -0.3px;
+  width:100%;
 }
 
 .seller-tab-area .fp-item-img {
@@ -754,16 +772,9 @@
 }
 
 .seller-tab-area .fp-item-desc.phone-scale-desc .fp-item-img {
-  transform: translate(-50%,-60%);
+  transform: translate(-50%,-37%);
 }
 
-.seller-tab-area .fp-item-desc.phone-scale-desc .fp-item-img.flip-folded {
-  transform: translate(-50%,-50%);
-}
-
-.seller-tab-area .fp-item-desc.phone-scale-desc .fp-item-img.fold-folded {
-  transform: translate(-50%,-52%);
-}
 
 .seller-tab-area .fp-item-img img {
   max-width:none;
@@ -774,7 +785,6 @@
   top:0; 
   left:0;
   transform:none;
-  width:70px;
 }
 
 .seller-tab-area .fp-item-img.pen {
@@ -951,8 +961,8 @@
   width:109px;
 }
 
-.seller-tab-area .w103 {
-  width:103px;
+.seller-tab-area .w104 {
+  width:104px;
 }
 
 .seller-tab-area .w102 {
@@ -971,8 +981,8 @@
   width:95px;
 }
 
-.seller-tab-area .w86 {
-  width:86px;
+.seller-tab-area .w87 {
+  width:87px;
 }
 
 .seller-tab-area .w83 {
@@ -983,8 +993,8 @@
   width:80px;
 }
 
-.seller-tab-area .w76 {
-  width:76px;
+.seller-tab-area .w75 {
+  width:75px;
 }
 
 .seller-tab-area .w74 {
@@ -999,6 +1009,14 @@
   width:70px;
 }
 
+.seller-tab-area .w68 {
+  width:68px;
+}
+
+.seller-tab-area .w66 {
+  width:63px;
+}
+
 .seller-tab-area .w63 {
   width:63px;
 }
@@ -1007,8 +1025,8 @@
   width:62px;
 }
 
-.seller-tab-area .w59 {
-  width:59px;
+.seller-tab-area .w57 {
+  width:57px;
 }
 
 
@@ -1024,6 +1042,11 @@
   width:42px;
 }
 
+.seller-tab-area .w40 {
+  width:40px;
+}
+
+
 
 /* //2022.01.21 특장점 추가 */
 

src/assets/css/tdirect.css

@@ -1372,7 +1372,7 @@ html {
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: unset;
 	-moz-osx-font-smoothing: grayscale;
-	font-smoothing: antialiased
+	font-smoothing: antialiased;
 }
 
 .wrap {

src/assets/js/tdirect-ui.js

@@ -2534,3 +2534,71 @@ $("input[type='text'], textarea" , ".c-input").on("focus", function () {
 	if ( $('.popup').css('display') === 'none') { 
 		$('.sticky-bar').addClass('active'); 
 	} 
+
+
+
+	/* 스크롤시 메뉴 on 22.02.14*/
+	var menu_offset = $('.anchor-menu').offset();
+	$(window).scroll(function() {
+			if ($(document).scrollTop() + 102 > menu_offset.top) {
+					$('.anchor-menu').addClass('menu-fixed');			
+			}else {
+					$('.anchor-menu').removeClass('menu-fixed');
+			}
+				
+			
+			var currenScroll = $(document).scrollTop();
+			var _con1 = $('.anchor-content1').offset().top;
+			var _con2 = $('.anchor-content2').offset().top;       
+			var _con3 = $('.anchor-content3').offset().top;
+			var _con1H = $('.anchor-content1').height();
+			var _con2H = $('.anchor-content2').height();
+			var _con3H = $('.anchor-content3').height();
+	
+			if (currenScroll <= _con1 + _con1H - 45){
+				$('.anchor-menu li').removeClass('on');
+				$('.anchor-btn1').addClass('on');
+			} else if (currenScroll <= _con1 + _con1H + _con2H){
+				$('.anchor-menu li').removeClass('on');
+				$('.anchor-btn2').addClass('on');
+		
+			} else if (currenScroll > _con1 + _con1H + _con2H ) {
+				$('.anchor-menu li').removeClass('on');
+				$('.anchor-btn3').addClass('on');
+				
+			}
+	});
+
+	
+	/* 클릭시 해당영역으로 이동 22.02.11 */
+	$('.anchor-menu .anchor-btn1').click(function(){
+		var ancSpec = $('#anchor-spec').position(); 
+		$('html, body').animate({scrollTop : ancSpec.top - 40}, 600);				
+	});
+
+	$('.anchor-menu .anchor-btn2').click(function(){
+		var ancPoint = $('#anchor-point').position(); 
+		$('html, body').animate({scrollTop : ancPoint.top - 40}, 600);
+	});
+
+	$('.anchor-menu .anchor-btn3').click(function(){
+		var ancReview = $('#anchor-review').position(); 
+		$('html, body').animate({scrollTop : ancReview.top - 39}, 600);
+	});
+
+
+	
+	
+	/*프로세서 2줄이상 세로 길이 조절 */	
+function _txtHeight () {
+	$('.processor-txt').each(function(){
+		var procTxt = $(this).height();
+		if (procTxt > 35) {
+			$(this).parents('.fp-item-desc').addClass('long-desc');
+			$(this).parents('.fp-item-group').css('position','relative');
+		} else {
+			$(this).parents('.fp-item-desc').removeClass('long-desc');
+		}
+	});
+}
+_txtHeight();