Skip to content

T
TDS_Myshop_Detail
Commit dd8fd7c0 authored by 김은해_이모션's avatar 김은해_이모션
Browse files
Options

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

parent 59a93b32
Hide whitespace changes
Inline Side-by-side
Showing with 1018 additions and 837 deletions
src/assets/css/seller_common.css
View file @ dd8fd7c0
...@@ -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 특장점 추가 */
......
src/assets/css/tdirect.css
View file @ dd8fd7c0
...@@ -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 {
......
src/assets/html/seller_heder_modify.html
View file @ dd8fd7c0
...@@ -412,17 +412,23 @@ ...@@ -412,17 +412,23 @@
<!-- s: 특장점 및 구매후기 --> <!-- s: 특장점 및 구매후기 -->
<div class="seller-tab-area"> <div class="seller-tab-area">
<ul class="tab-list"> <div class="anchor-wrap">
<ul class="tab-list anchor-menu">
<!-- [D] 탭 선택 시 해당 li태그에 'on' class 추가 --> <!-- [D] 탭 선택 시 해당 li태그에 'on' class 추가 -->
<li class="tab-item on" data-tab="seller-detail-tab"> <li class="tab-item anchor-btn1 on">
<a href="#none" class=""><em>특장점</em></a> <a href="#none"><em>스펙</em></a>
</li> </li>
<li class="tab-item" data-tab="seller-detail-tab"> <li class="tab-item anchor-btn2">
<a href="#none" class=""><em>구매후기</em></a> <a href="#none"><em>특장점</em></a>
</li>
<li class="tab-item anchor-btn3">
<a href="#none"><em>구매후기</em></a>
</li> </li>
</ul> </ul>
<div data-tab-content="seller-detail-tab" class="tab-content" style="display:none;"> </div>
<h3 class="g-invisible">특장점</h3> <div class="anchor-contents">
<div class="tab-content anchor-content1" id="anchor-spec">
<h3 class="g-invisible">스펙</h3>
<div id="featurePoint" class="feature-point-contents"> <div id="featurePoint" class="feature-point-contents">
<!-- 특장점 리뉴얼 22.01.21--> <!-- 특장점 리뉴얼 22.01.21-->
<!-- 공통 --> <!-- 공통 -->
...@@ -522,12 +528,11 @@ ...@@ -522,12 +528,11 @@
<div class="fp-item-desc phone-scale-desc"> <div class="fp-item-desc phone-scale-desc">
<h5 class="fp-item-tit">휴대폰 크기</h5> <h5 class="fp-item-tit">휴대폰 크기</h5>
<div class="fp-item-img"> <div class="fp-item-img">
<img src="../img/point/default_size.png" class="w86"> <img src="../img/point/default_size.png" class="w87">
<div class="value-text phone-height">160.8</div> <div class="value-text phone-height">160.8</div>
<div class="value-text phone-width">78.1</div> <div class="value-text phone-width">78.1</div>
<div class="value-text phone-thick">7.4</div> <div class="value-text phone-thick">7.4</div>
</div> </div>
<div class="fp-item-txt">가로 X 세로 X 두께<br><span class="size-unit">(단위:㎜)</span></div>
</div> </div>
</div> </div>
<div class="group-box"> <div class="group-box">
...@@ -552,11 +557,9 @@ ...@@ -552,11 +557,9 @@
<div class="row-box"> <div class="row-box">
<div class="fp-item-img side-img"> <div class="fp-item-img side-img">
<img src="../img/point/default_display.png" class="w48"> <img src="../img/point/default_display.png" class="w48">
<div class="value-text">
<span>6.2</span><span>인치</span>
</div>
</div> </div>
<div class="fp-item-txt side-txt"> <div class="fp-item-txt side-txt">
<div><span>6.2</span><span>인치</span></div>
<div>Dynamic AMOLED 2X</div> <div>Dynamic AMOLED 2X</div>
<div><span>2532</span> X <span>1170</span><span>px</span></div> <div><span>2532</span> X <span>1170</span><span>px</span></div>
<div><span>120</span><span>Hz</span> 주사율</div> <div><span>120</span><span>Hz</span> 주사율</div>
...@@ -575,41 +578,77 @@ ...@@ -575,41 +578,77 @@
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit">프로세서</h5> <h5 class="fp-item-tit">프로세서</h5>
<div class="fp-item-img"> <div class="fp-item-img">
<img src="../img/point/SP002.png" class="w70"> <img src="../img/point/SP002.png" class="w66">
<div class="value-text processor">
<span>A14<br>Bionic칩testtesttesttesttesttest</span>
</div>
</div> </div>
<div class="fp-item-txt"><span>헥사코어</span>, <span>7</span><span>GHz</span> 탑재</div> <div class="fp-item-txt processor-txt">
<div><span>A14</span> Bionic 칩</div>
<div><span>헥사코어</span>, <span>7</span><span>GHz</span></div>
</div>
</div> </div>
</div> </div>
<div class="group-box"> <div class="group-box">
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit">RAM</h5> <h5 class="fp-item-tit">RAM</h5>
<div class="fp-item-img"> <div class="fp-item-img">
<img src="../img/point/ram.png" class="w74"> <img src="../img/point/ram.png" class="w74">
<div class="value-text ram">
<span>6</span><span>GB</span>
</div>
</div> </div>
<div class="fp-item-txt"><span>6</span><span>GB</span> RAM 탑재</div> <div class="fp-item-txt"><span>6</span><span>GB</span></div>
</div> </div>
</div> </div>
<div class="group-box"> <div class="group-box">
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit">배터리 용량</h5> <h5 class="fp-item-tit">배터리 용량</h5>
<div class="fp-item-img"> <div class="fp-item-img">
<img src="../img/point/battery.png" class="w72"> <img src="../img/point/battery.png" class="w70">
<div class="value-text battery">
<span>2815</span><span>mAh</span>
</div>
</div> </div>
<div class="fp-item-txt"><span>2815</span><span>mAh</span> 용량</div> <div class="fp-item-txt"><span>2815</span><span>mAh</span></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- //성능 --> <!-- //성능 -->
<!-- 성능 -->
<div class="feature-point-item">
<h4 class="feature-point-tit">성능</h4>
<div class="fp-item-group">
<div class="group-box">
<div class="fp-item-desc">
<h5 class="fp-item-tit">프로세서</h5>
<div class="fp-item-img">
<img src="../img/point/SP002.png" class="w70">
</div>
<div class="fp-item-txt processor-txt">
<div><span>A14</span> Bionic 칩</div>
<div><span>헥사코어</span>, <span>7</span><span>GHz</span></div>
<div><span>헥사코어</span>, <span>7</span><span>GHz</span></div>
<div><span>헥사코어</span>, <span>7</span><span>GHz</span></div>
<div><span>헥사코어</span>, <span>7</span><span>GHz</span></div>
</div>
</div>
</div>
<div class="group-box">
<div class="fp-item-desc">
<h5 class="fp-item-tit">RAM</h5>
<div class="fp-item-img">
<img src="../img/point/ram.png" class="w74">
</div>
<div class="fp-item-txt"><span>6</span><span>GB</span></div>
</div>
</div>
<div class="group-box battery-box">
<div class="fp-item-desc">
<h5 class="fp-item-tit">배터리 용량</h5>
<div class="fp-item-img">
<img src="../img/point/battery.png" class="w70">
</div>
<div class="fp-item-txt"><span>2815</span><span>mAh</span></div>
</div>
</div>
</div>
</div>
<!-- //성능 -->
<!-- 카메라 --> <!-- 카메라 -->
<div class="feature-point-item"> <div class="feature-point-item">
<h4 class="feature-point-tit">카메라</h4> <h4 class="feature-point-tit">카메라</h4>
...@@ -1019,12 +1058,19 @@ ...@@ -1019,12 +1058,19 @@
<!-- //특장점 리뉴얼 22.01.21--> <!-- //특장점 리뉴얼 22.01.21-->
</div> </div>
</div> </div>
<div data-tab-content="seller-detail-tab" class="tab-content" style="display:none"> <div class="tab-content anchor-content2" id="anchor-point">
<h3 class="g-invisible">구매후기</h3> <h3 class="g-invisible">특장점</h3>
<div id="Review" class="review-contents"> <div id="Review" class="review-contents">
구매후기 컨텐츠... 특장점
</div> </div>
</div> </div>
<div class="tab-content anchor-content3" id="anchor-review" style="height:850px;">
<h3 class="g-invisible">구매후기</h3>
<div id="Review" class="review-contents">
구매후기
</div>
</div>
</div>
</div> </div>
<!-- //e: 특장점 및 구매후기 --> <!-- //e: 특장점 및 구매후기 -->
</div> </div>
......
src/assets/html/seller_heder_modify_f.html
View file @ dd8fd7c0
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/html/seller_process1.html
View file @ dd8fd7c0
...@@ -460,17 +460,23 @@ ...@@ -460,17 +460,23 @@
<!-- s: 특장점 및 구매후기 --> <!-- s: 특장점 및 구매후기 -->
<div class="seller-tab-area"> <div class="seller-tab-area">
<ul class="tab-list"> <div class="anchor-wrap">
<!-- [D] 탭 선택 시 해당 li태그에 'on' class 추가 --> <ul class="tab-list anchor-menu">
<li class="tab-item on" data-tab="seller-detail-tab"> <!-- [D] 탭 선택 시 해당 li태그에 'on' class 추가 -->
<a href="#none" class=""><em>특장점</em></a> <li class="tab-item anchor-btn1 on">
</li> <a href="#none"><em>스펙</em></a>
<li class="tab-item" data-tab="seller-detail-tab"> </li>
<a href="#none" class=""><em>구매후기</em></a> <li class="tab-item anchor-btn2">
</li> <a href="#none"><em>특장점</em></a>
</ul> </li>
<div data-tab-content="seller-detail-tab" class="tab-content" style="display:none;"> <li class="tab-item anchor-btn3">
<h3 class="g-invisible">특장점</h3> <a href="#none"><em>구매후기</em></a>
</li>
</ul>
</div>
<div class="anchor-contents">
<div class="tab-content anchor-content1" id="anchor-spec">
<h3 class="g-invisible">스펙</h3>
<div id="featurePoint" class="feature-point-contents"> <div id="featurePoint" class="feature-point-contents">
<!-- 특장점 리뉴얼 22.01.21--> <!-- 특장점 리뉴얼 22.01.21-->
<!-- 공통 --> <!-- 공통 -->
...@@ -570,12 +576,11 @@ ...@@ -570,12 +576,11 @@
<div class="fp-item-desc phone-scale-desc"> <div class="fp-item-desc phone-scale-desc">
<h5 class="fp-item-tit">휴대폰 크기</h5> <h5 class="fp-item-tit">휴대폰 크기</h5>
<div class="fp-item-img"> <div class="fp-item-img">
<img src="../img/point/default_size.png" class="w86"> <img src="../img/point/default_size.png" class="w87">
<div class="value-text phone-height">160.8</div> <div class="value-text phone-height">160.8</div>
<div class="value-text phone-width">78.1</div> <div class="value-text phone-width">78.1</div>
<div class="value-text phone-thick">7.4</div> <div class="value-text phone-thick">7.4</div>
</div> </div>
<div class="fp-item-txt">가로 X 세로 X 두께<br><span class="size-unit">(단위:㎜)</span></div>
</div> </div>
</div> </div>
<div class="group-box"> <div class="group-box">
...@@ -600,11 +605,9 @@ ...@@ -600,11 +605,9 @@
<div class="row-box"> <div class="row-box">
<div class="fp-item-img side-img"> <div class="fp-item-img side-img">
<img src="../img/point/default_display.png" class="w48"> <img src="../img/point/default_display.png" class="w48">
<div class="value-text">
<span>6.2</span><span>인치</span>
</div>
</div> </div>
<div class="fp-item-txt side-txt"> <div class="fp-item-txt side-txt">
<div><span>6.2</span><span>인치</span></div>
<div>Dynamic AMOLED 2X</div> <div>Dynamic AMOLED 2X</div>
<div><span>2532</span> X <span>1170</span><span>px</span></div> <div><span>2532</span> X <span>1170</span><span>px</span></div>
<div><span>120</span><span>Hz</span> 주사율</div> <div><span>120</span><span>Hz</span> 주사율</div>
...@@ -615,6 +618,44 @@ ...@@ -615,6 +618,44 @@
</div> </div>
</div> </div>
<!-- //디스플레이 --> <!-- //디스플레이 -->
<!-- 성능 -->
<div class="feature-point-item">
<h4 class="feature-point-tit">성능</h4>
<div class="fp-item-group">
<div class="group-box">
<div class="fp-item-desc">
<h5 class="fp-item-tit">프로세서</h5>
<div class="fp-item-img">
<img src="../img/point/SP002.png" class="w66">
</div>
<div class="fp-item-txt processor-txt">
<div><span>A14</span> Bionic 칩</div>
<div><span>헥사코어</span>, <span>7</span><span>GHz</span></div>
</div>
</div>
</div>
<div class="group-box">
<div class="fp-item-desc">
<h5 class="fp-item-tit">RAM</h5>
<div class="fp-item-img">
<img src="../img/point/ram.png" class="w74">
</div>
<div class="fp-item-txt"><span>6</span><span>GB</span></div>
</div>
</div>
<div class="group-box">
<div class="fp-item-desc">
<h5 class="fp-item-tit">배터리 용량</h5>
<div class="fp-item-img">
<img src="../img/point/battery.png" class="w70">
</div>
<div class="fp-item-txt"><span>2815</span><span>mAh</span></div>
</div>
</div>
</div>
</div>
<!-- //성능 -->
<!-- 성능 --> <!-- 성능 -->
<div class="feature-point-item"> <div class="feature-point-item">
<h4 class="feature-point-tit">성능</h4> <h4 class="feature-point-tit">성능</h4>
...@@ -624,11 +665,14 @@ ...@@ -624,11 +665,14 @@
<h5 class="fp-item-tit">프로세서</h5> <h5 class="fp-item-tit">프로세서</h5>
<div class="fp-item-img"> <div class="fp-item-img">
<img src="../img/point/SP002.png" class="w70"> <img src="../img/point/SP002.png" class="w70">
<div class="value-text processor">
<span>A14<br>Bionic칩testtesttesttesttesttest</span>
</div>
</div> </div>
<div class="fp-item-txt"><span>헥사코어</span>, <span>7</span><span>GHz</span> 탑재</div> <div class="fp-item-txt processor-txt">
<div><span>A14</span> Bionic 칩</div>
<div><span>헥사코어</span>, <span>7</span><span>GHz</span></div>
<div><span>헥사코어</span>, <span>7</span><span>GHz</span></div>
<div><span>헥사코어</span>, <span>7</span><span>GHz</span></div>
<div><span>헥사코어</span>, <span>7</span><span>GHz</span></div>
</div>
</div> </div>
</div> </div>
<div class="group-box"> <div class="group-box">
...@@ -636,28 +680,23 @@ ...@@ -636,28 +680,23 @@
<h5 class="fp-item-tit">RAM</h5> <h5 class="fp-item-tit">RAM</h5>
<div class="fp-item-img"> <div class="fp-item-img">
<img src="../img/point/ram.png" class="w74"> <img src="../img/point/ram.png" class="w74">
<div class="value-text ram">
<span>6</span><span>GB</span>
</div>
</div> </div>
<div class="fp-item-txt"><span>6</span><span>GB</span> RAM 탑재</div> <div class="fp-item-txt"><span>6</span><span>GB</span></div>
</div> </div>
</div> </div>
<div class="group-box"> <div class="group-box battery-box">
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit">배터리 용량</h5> <h5 class="fp-item-tit">배터리 용량</h5>
<div class="fp-item-img"> <div class="fp-item-img">
<img src="../img/point/battery.png" class="w72"> <img src="../img/point/battery.png" class="w70">
<div class="value-text battery">
<span>2815</span><span>mAh</span>
</div>
</div> </div>
<div class="fp-item-txt"><span>2815</span><span>mAh</span> 용량</div> <div class="fp-item-txt"><span>2815</span><span>mAh</span></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- //성능 --> <!-- //성능 -->
<!-- 카메라 --> <!-- 카메라 -->
<div class="feature-point-item"> <div class="feature-point-item">
<h4 class="feature-point-tit">카메라</h4> <h4 class="feature-point-tit">카메라</h4>
...@@ -1065,90 +1104,21 @@ ...@@ -1065,90 +1104,21 @@
</div> </div>
<!-- //연결/기타 --> <!-- //연결/기타 -->
<!-- //특장점 리뉴얼 22.01.21--> <!-- //특장점 리뉴얼 22.01.21-->
<!-- 제품사양(2021.08.24 추가) -->
<!-- <table class="tbl_row" border="1">
<caption>제품 사양</caption>
<colgroup>
<col width="25%">
<col width="*">
</colgroup>
<tbody>
<tr>
<th scope="row">모델명</th>
<td>Galaxy Z Fold2 5G</td>
</tr>
<tr>
<th scope="row">디스플레이</th>
<td>
메인 디스플레이 : 192.7mm(7.6”) Dynamic AMOLED 2X Infinity-O Display
(2,208×1,768)<br>
커버 디스플레이 : 158.1mm(6.2”) Super AMOLED(2,260×816)
</td>
</tr>
<tr>
<th scope="row">CPU</th>
<td>Snapdragon 865+</td>
</tr>
<tr>
<th scope="row">OS</th>
<td>Android 10</td>
</tr>
<tr>
<th scope="row">메모리</th>
<td>RAM 12GB / ROM 256GB</td>
</tr>
<tr>
<th scope="row">외장 메모리</th>
<td>MicroSD slot 미지원</td>
</tr>
<tr>
<th scope="row">카메라</th>
<td>전면 1,000만 (F2.2 전면) + 1,000만 (F2.2 커버)<br>
후면 1,200만 (F1.8 광각) + 1,200만 (F2.2 초광각) + 1,200만 (F2.4 망원)
</td>
</tr>
<tr>
<th scope="row">네트워크</th>
<td>5G</td>
</tr>
<tr>
<th scope="row">USIM</th>
<td>Nano 유심</td>
</tr>
<tr>
<th scope="row">크기</th>
<td>접었을 때 : 159.2 x 68.0 x 13.8~16.8mm<br>
펼쳤을 때 : 159.2 x 128.2 x 6.0~6.9mm
</td>
</tr>
<tr>
<th scope="row">무게</th>
<td>282g</td>
</tr>
<tr>
<th scope="row">배터리</th>
<td>4,500mAh</td>
</tr>
<tr>
<th scope="row">특징</th>
<td>무선 배터리 공유 / 측면지문 / 삼성 페이 / 빅스비</td>
</tr>
<tr>
<th scope="row">제조국</th>
<td>대한민국</td>
</tr>
</tbody>
</table> -->
<!-- table 주석 처리 22.01.27 -->
</div> </div>
</div> </div>
<div data-tab-content="seller-detail-tab" class="tab-content" style="display:none"> <div class="tab-content anchor-content2" id="anchor-point">
<h3 class="g-invisible">특장점</h3>
<div id="Review" class="review-contents">
특장점
</div>
</div>
<div class="tab-content anchor-content3" id="anchor-review" style="height:850px;">
<h3 class="g-invisible">구매후기</h3> <h3 class="g-invisible">구매후기</h3>
<div id="Review" class="review-contents"> <div id="Review" class="review-contents">
구매후기 컨텐츠... 구매후기
</div> </div>
</div> </div>
</div>
</div> </div>
<!-- //e: 특장점 및 구매후기 --> <!-- //e: 특장점 및 구매후기 -->
</div> </div>
......
src/assets/img/point/SM109_10_folded_size.png
View replaced file @ 59a93b32 View file @ dd8fd7c0
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
View replaced file @ 59a93b32 View file @ dd8fd7c0
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
View replaced file @ 59a93b32 View file @ dd8fd7c0
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
View replaced file @ 59a93b32 View file @ dd8fd7c0
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
View replaced file @ 59a93b32 View file @ dd8fd7c0
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
View replaced file @ 59a93b32 View file @ dd8fd7c0
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
View replaced file @ 59a93b32 View file @ dd8fd7c0
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
View replaced file @ 59a93b32 View file @ dd8fd7c0
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
View replaced file @ 59a93b32 View file @ dd8fd7c0
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
src/assets/js/tdirect-ui.js
View file @ dd8fd7c0
...@@ -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