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

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

parent 59a93b32
......@@ -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 특장점 추가 */
......
......@@ -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 {
......
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 () {
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();
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