Commit dd8fd7c0 authored by 김은해_이모션's avatar 김은해_이모션

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

parent 59a93b32
...@@ -540,19 +540,21 @@ ...@@ -540,19 +540,21 @@
} }
.seller-tab-area { .seller-tab-area {
background-color: #fff;
margin-right: -20px; margin-right: -20px;
margin-left: -20px; margin-left: -20px;
font-family: 'Spoqa Han Sans Neo', sans-serif; font-family: 'Spoqa Han Sans Neo', sans-serif;
padding:0 20px;
} }
.seller-tab-area .tab-list { .seller-tab-area .tab-list {
display: flex; display: flex;
border-bottom: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1;
background:#efeff1;
} }
.seller-tab-area .tab-item { .seller-tab-area .tab-item {
width: 50%; width:33.333%;
} }
.seller-tab-area .tab-item>a { .seller-tab-area .tab-item>a {
...@@ -561,41 +563,52 @@ ...@@ -561,41 +563,52 @@
padding: 14px 21px; padding: 14px 21px;
} }
.seller-tab-area .tab-item.on>a { .seller-tab-area .tab-item.on>a {
border-bottom: 3px solid #000; border-bottom: 3px solid #000;
font-weight: 600; font-weight: 600;
} }
.seller-tab-area .tab-content { .seller-tab-area .tab-content {
padding: 20px; padding: 30px 0;
background-color: #efeff1; background-color: #efeff1;
/* 2022.01.21 수정 */ margin-bottom:20px;
} }
.seller-tab-area .tab-content img { .seller-tab-area .tab-content img {
max-width: 100%; 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 특장점 추가 */ /* 2022.01.21 특장점 추가 */
.seller-tab-area .feature-point-tit { .seller-tab-area .feature-point-tit {
border-radius: 4px; font-size:1.8rem;
border: 1px solid #c7c7c7; color:#222;
text-align: center; letter-spacing:-0.6px;
line-height:40px;
font-size:1.5rem;
color:#666;
letter-spacing:-0.5px;
} }
.seller-tab-area .feature-point-item { .seller-tab-area .feature-point-item {
margin-bottom:1.2rem; margin-bottom:3rem;
} }
.seller-tab-area .fp-item-group { .seller-tab-area .fp-item-group {
display:flex; display:flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-start; align-items: flex-start;
margin-top:0.4rem; margin-top:0.8rem;
} }
.seller-tab-area .group-box { .seller-tab-area .group-box {
...@@ -619,6 +632,12 @@ ...@@ -619,6 +632,12 @@
margin-right:0; margin-right:0;
} }
.seller-tab-area .group-box.battery-box {
position:absolute;
bottom:0;
right:0;
margin-right:0;
}
.seller-tab-area .phone-tag { .seller-tab-area .phone-tag {
font-size:1.2rem; font-size:1.2rem;
...@@ -638,9 +657,15 @@ ...@@ -638,9 +657,15 @@
position:relative; position:relative;
} }
.seller-tab-area .fp-item-desc.phone-scale-desc { .seller-tab-area .fp-item-desc.long-desc
min-height:240px; {
max-height:240px; 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 { .seller-tab-area .fp-item-tit {
...@@ -654,7 +679,7 @@ ...@@ -654,7 +679,7 @@
} }
.seller-tab-area .fp-item-tit.sub-display-tit { .seller-tab-area .fp-item-tit.sub-display-tit {
margin-bottom:3.5rem; margin-bottom:2rem;
} }
.seller-tab-area .fp-item-txt { .seller-tab-area .fp-item-txt {
...@@ -664,12 +689,21 @@ ...@@ -664,12 +689,21 @@
font-size:1.3rem; 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 { .seller-tab-area .fp-item-txt.side-txt {
position:static; position:static;
width:auto; width:auto;
padding-right:14px;
box-sizing:border-box; box-sizing:border-box;
line-height:1.5rem; line-height:1.5rem;
margin-left:54px;
} }
.seller-tab-area .fp-item-txt.side-txt > div { .seller-tab-area .fp-item-txt.side-txt > div {
...@@ -684,26 +718,11 @@ ...@@ -684,26 +718,11 @@
justify-content:center; 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 { .seller-tab-area .android-1 .row-box {
justify-content:center; justify-content:center;
} }
.seller-tab-area .android-1 .row-box .side-txt {
margin-left:56px;
}
.seller-tab-area .wide-angle .row-box .side-txt { .seller-tab-area .wide-angle .row-box .side-txt {
padding-right:0; padding-right:0;
} }
...@@ -733,9 +752,7 @@ ...@@ -733,9 +752,7 @@
.seller-tab-area .row-box { .seller-tab-area .row-box {
display:flex; display:flex;
align-items: center; align-items: center;
justify-content:space-between; justify-content:center;
max-width:240px;
margin:0 auto;
} }
...@@ -744,6 +761,7 @@ ...@@ -744,6 +761,7 @@
margin-top:0.8rem; margin-top:0.8rem;
color:#666; color:#666;
letter-spacing: -0.3px; letter-spacing: -0.3px;
width:100%;
} }
.seller-tab-area .fp-item-img { .seller-tab-area .fp-item-img {
...@@ -754,16 +772,9 @@ ...@@ -754,16 +772,9 @@
} }
.seller-tab-area .fp-item-desc.phone-scale-desc .fp-item-img { .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 { .seller-tab-area .fp-item-img img {
max-width:none; max-width:none;
...@@ -774,7 +785,6 @@ ...@@ -774,7 +785,6 @@
top:0; top:0;
left:0; left:0;
transform:none; transform:none;
width:70px;
} }
.seller-tab-area .fp-item-img.pen { .seller-tab-area .fp-item-img.pen {
...@@ -951,8 +961,8 @@ ...@@ -951,8 +961,8 @@
width:109px; width:109px;
} }
.seller-tab-area .w103 { .seller-tab-area .w104 {
width:103px; width:104px;
} }
.seller-tab-area .w102 { .seller-tab-area .w102 {
...@@ -971,8 +981,8 @@ ...@@ -971,8 +981,8 @@
width:95px; width:95px;
} }
.seller-tab-area .w86 { .seller-tab-area .w87 {
width:86px; width:87px;
} }
.seller-tab-area .w83 { .seller-tab-area .w83 {
...@@ -983,8 +993,8 @@ ...@@ -983,8 +993,8 @@
width:80px; width:80px;
} }
.seller-tab-area .w76 { .seller-tab-area .w75 {
width:76px; width:75px;
} }
.seller-tab-area .w74 { .seller-tab-area .w74 {
...@@ -999,6 +1009,14 @@ ...@@ -999,6 +1009,14 @@
width:70px; width:70px;
} }
.seller-tab-area .w68 {
width:68px;
}
.seller-tab-area .w66 {
width:63px;
}
.seller-tab-area .w63 { .seller-tab-area .w63 {
width:63px; width:63px;
} }
...@@ -1007,8 +1025,8 @@ ...@@ -1007,8 +1025,8 @@
width:62px; width:62px;
} }
.seller-tab-area .w59 { .seller-tab-area .w57 {
width:59px; width:57px;
} }
...@@ -1024,6 +1042,11 @@ ...@@ -1024,6 +1042,11 @@
width:42px; width:42px;
} }
.seller-tab-area .w40 {
width:40px;
}
/* //2022.01.21 특장점 추가 */ /* //2022.01.21 특장점 추가 */
......
...@@ -1372,7 +1372,7 @@ html { ...@@ -1372,7 +1372,7 @@ html {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-font-smoothing: unset; -moz-font-smoothing: unset;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased font-smoothing: antialiased;
} }
.wrap { .wrap {
......
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
src/assets/img/point/SM109_10_folded_size.png

499 Bytes | W: | H:

src/assets/img/point/SM109_10_folded_size.png

560 Bytes | W: | H:

src/assets/img/point/SM109_10_folded_size.png
src/assets/img/point/SM109_10_folded_size.png
src/assets/img/point/SM109_10_folded_size.png
src/assets/img/point/SM109_10_folded_size.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/point/SM109_10_size.png

504 Bytes | W: | H:

src/assets/img/point/SM109_10_size.png

592 Bytes | W: | H:

src/assets/img/point/SM109_10_size.png
src/assets/img/point/SM109_10_size.png
src/assets/img/point/SM109_10_size.png
src/assets/img/point/SM109_10_size.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/point/SM109_1_display.png

510 Bytes | W: | H:

src/assets/img/point/SM109_1_display.png

3.45 KB | W: | H:

src/assets/img/point/SM109_1_display.png
src/assets/img/point/SM109_1_display.png
src/assets/img/point/SM109_1_display.png
src/assets/img/point/SM109_1_display.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/point/SM109_1_folded_size.png

420 Bytes | W: | H:

src/assets/img/point/SM109_1_folded_size.png

474 Bytes | W: | H:

src/assets/img/point/SM109_1_folded_size.png
src/assets/img/point/SM109_1_folded_size.png
src/assets/img/point/SM109_1_folded_size.png
src/assets/img/point/SM109_1_folded_size.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/point/SP002.png

346 Bytes | W: | H:

src/assets/img/point/SP002.png

1.14 KB | W: | H:

src/assets/img/point/SP002.png
src/assets/img/point/SP002.png
src/assets/img/point/SP002.png
src/assets/img/point/SP002.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/point/battery.png

598 Bytes | W: | H:

src/assets/img/point/battery.png

595 Bytes | W: | H:

src/assets/img/point/battery.png
src/assets/img/point/battery.png
src/assets/img/point/battery.png
src/assets/img/point/battery.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/point/default_display.png

942 Bytes | W: | H:

src/assets/img/point/default_display.png

1.05 KB | W: | H:

src/assets/img/point/default_display.png
src/assets/img/point/default_display.png
src/assets/img/point/default_display.png
src/assets/img/point/default_display.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/point/default_size.png

509 Bytes | W: | H:

src/assets/img/point/default_size.png

602 Bytes | W: | H:

src/assets/img/point/default_size.png
src/assets/img/point/default_size.png
src/assets/img/point/default_size.png
src/assets/img/point/default_size.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/point/ram.png

648 Bytes | W: | H:

src/assets/img/point/ram.png

957 Bytes | W: | H:

src/assets/img/point/ram.png
src/assets/img/point/ram.png
src/assets/img/point/ram.png
src/assets/img/point/ram.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -2534,3 +2534,71 @@ $("input[type='text'], textarea" , ".c-input").on("focus", function () { ...@@ -2534,3 +2534,71 @@ $("input[type='text'], textarea" , ".c-input").on("focus", function () {
if ( $('.popup').css('display') === 'none') { if ( $('.popup').css('display') === 'none') {
$('.sticky-bar').addClass('active'); $('.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();
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment