Skip to content

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

[김은해] 20220221 작업_v2

parent 30443166
Hide whitespace changes
Inline Side-by-side
Showing with 223 additions and 45 deletions
src/assets/css/seller_common.css
View file @ e9c316e6
...@@ -583,6 +583,7 @@ ...@@ -583,6 +583,7 @@
line-height:40px; line-height:40px;
font-size:1.5rem; font-size:1.5rem;
color:#666; color:#666;
letter-spacing:-0.5px;
} }
.seller-tab-area .feature-point-item { .seller-tab-area .feature-point-item {
...@@ -598,7 +599,7 @@ ...@@ -598,7 +599,7 @@
.seller-tab-area .group-box { .seller-tab-area .group-box {
width:calc(50% - 0.4rem); width:calc(50% - 0.4rem);
margin-top:0.8rem; margin-top:0.8rem;
} }
.seller-tab-area .group-box:nth-child(odd){ .seller-tab-area .group-box:nth-child(odd){
...@@ -617,20 +618,131 @@ ...@@ -617,20 +618,131 @@
margin:0.8rem 0 0 0.8rem; margin:0.8rem 0 0 0.8rem;
} }
.seller-tab-area .phone-tag {
font-size:1.2rem;
font-weight:700;
letter-spacing: -0.43px;
}
.seller-tab-area .fp-item-desc .seller-tab-area .fp-item-desc
{ {
background-color: #fafafa; background-color: #fafafa;
text-align: center; text-align: center;
min-height:160px;
max-height:160px; max-height:160px;
padding:1.5rem 0 2rem; padding:1.5rem 0 2rem;
border-radius:4px;
letter-spacing: -0.5px;
position:relative;
}
.seller-tab-area .fp-item-desc.display-desc {
min-height:210px;
max-height:210px;
} }
.seller-tab-area .fp-item-tit { .seller-tab-area .fp-item-tit {
font-size:1.3rem; font-size:1.3rem;
letter-spacing: -0.46px;
margin-bottom:1.2rem;
}
.seller-tab-area .fp-item-tit.camera-tit {
margin-bottom:3.2rem;
}
.seller-tab-area .fp-item-txt {
position:absolute;
width:100%;
bottom:20px;
}
.seller-tab-area .fp-item-txt.side-txt {
position:static;
width:auto;
margin-left:30px
} }
.seller-tab-area .fp-item-txt.side-txt.camera-txt {
margin-left:60px;
}
.seller-tab-area .fp-item-txt.side-txt.camera-txt2 {
margin-left:64px;
}
.seller-tab-area .fp-item-txt.side-txt.camera-txt3 {
margin-left:50px;
}
.seller-tab-area .fp-item-txt > div {
font-size:1.2rem;
}
.seller-tab-area .size-unit {
font-size:1.2rem;
color:#666;
letter-spacing: -0.46px;
}
.seller-tab-area .row-box {
display:flex;
align-items: center;
justify-content: center;
}
.seller-tab-area .row-box.camera-row-box {
padding-left:14px;
}
.seller-tab-area .noti {
font-size:0.9rem;
margin-top:0.8rem;
color:#666;
letter-spacing: -0.3px;
}
.seller-tab-area .fp-item-img {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.seller-tab-area .fp-item-img.side-img{
position:static;
transform:none;
}
.seller-tab-area .camera-img {
width:70px;
line-height:70px;
}
.seller-tab-area .samsung-logo {
width:82px;
}
.seller-tab-area .android-logo {
width:93px;
}
.seller-tab-area .w72 {
width:72px;
}
.seller-tab-area .w70 {
width:70px;
}
.seller-tab-area .w74 {
width:74px;
}
.seller-tab-area .w42 {
width:42px;
}
/* //2022.01.21 특장점 추가 */
.sticky-bar .layer-pay { .sticky-bar .layer-pay {
......
src/assets/html/seller_heder_modify.html
View file @ e9c316e6
...@@ -432,14 +432,18 @@ ...@@ -432,14 +432,18 @@
<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> <div class="fp-item-img">
<img src="../img/point/fill-1@2x.png" class="samsung-logo">
</div>
<div class="fp-item-txt">삼성</div> <div class="fp-item-txt">삼성</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> <div class="fp-item-img">
<img src="../img/point/group-3@2x.png" class="android-logo">
</div>
<div class="fp-item-txt">안드로이드</div> <div class="fp-item-txt">안드로이드</div>
</div> </div>
</div> </div>
...@@ -447,7 +451,7 @@ ...@@ -447,7 +451,7 @@
<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> <div class="fp-item-img"></div>
<div class="fp-item-txt">5G통신 지원</div> <div class="fp-item-txt"><span>5G</span>통신 지원</div>
</div> </div>
</div> </div>
<div class="group-box"> <div class="group-box">
...@@ -468,14 +472,16 @@ ...@@ -468,14 +472,16 @@
<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> <div class="fp-item-img"></div>
<div class="fp-item-txt">가로X세로X두께<br>(단위:㎜)</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">
<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> <div class="fp-item-img">
<div class="fp-item-txt">226g</div> <img src="../img/point/icon-scale@2x.png" class="w72">
</div>
<div class="fp-item-txt"><span>226</span>g</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -486,11 +492,17 @@ ...@@ -486,11 +492,17 @@
<h4 class="feature-point-tit">디스플레이</h4> <h4 class="feature-point-tit">디스플레이</h4>
<div class="fp-item-group"> <div class="fp-item-group">
<div class="group-box wide-group-box"> <div class="group-box wide-group-box">
<div class="fp-item-desc"> <div class="fp-item-desc display-desc">
<h5 class="fp-item-tit">디스플레이</h5> <h5 class="fp-item-tit">디스플레이</h5>
<div class="row-box"> <div class="row-box">
<div class="fp-item-img"></div> <div class="fp-item-img side-img">
<div class="fp-item-txt">삼성</div> <img src="../img/point/icon-phone@2x.png" class="w72">
</div>
<div class="fp-item-txt side-txt">
<div>Dynamic AMOLED 2X</div>
<div><span>2532</span> X <span>1170</span><span>px</span></div>
<div><span>120</span><span>Hz</span> 주사율</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -504,22 +516,28 @@ ...@@ -504,22 +516,28 @@
<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> <div class="fp-item-img">
<div class="fp-item-txt">헥사코어,7GHz</div> <img src="../img/point/rectangle@2x.png" class="w70">
</div>
<div class="fp-item-txt"><span>헥사코어</span>,<span>7</span><span>GHz</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">RAM</h5> <h5 class="fp-item-tit">RAM</h5>
<div class="fp-item-img"></div> <div class="fp-item-img">
<div class="fp-item-txt">6GB RAM</div> <img src="../img/point/icon-ram@2x.png" class="w74">
</div>
<div class="fp-item-txt"><span>6</span><span>GB</span> RAM</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> <div class="fp-item-img">
<div class="fp-item-txt">2815mAh</div> <img src="../img/point/icon-battery@2x.png" class="w72">
</div>
<div class="fp-item-txt"><span>2815</span><span>mAh</span></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -532,49 +550,97 @@ ...@@ -532,49 +550,97 @@
<div class="group-box wide-group-box"> <div class="group-box wide-group-box">
<div class="phone-tag">i Phone 6/7/8</div> <div class="phone-tag">i Phone 6/7/8</div>
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit">제조사</h5> <h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="fp-item-img"></div> <div class="row-box">
<div class="fp-item-txt">삼성</div> <div class="fp-item-img side-img">
<img src="../img/point/group-23-copy-7@2x.png" class="w70">
</div>
<div class="fp-item-txt side-txt camera-txt">
<div><span>와이드</span></div>
<div><span>F1.6</span></div>
<div><span>12</span><span>MP</span></div>
</div>
</div>
</div> </div>
</div> </div>
<div class="group-box wide-group-box"> <div class="group-box wide-group-box">
<div class="phone-tag">i Phone 6/7/8</div> <div class="phone-tag">i Phone 6/7/8_?</div>
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit">제조사</h5> <h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="fp-item-img"></div> <div class="row-box">
<div class="fp-item-txt">삼성</div> <div class="fp-item-img side-img">
<img src="../img/point/group-23-copy-3@2x.png" class="w70">
</div>
<div class="fp-item-txt side-txt camera-txt">
<div><span>와이드</span></div>
<div><span>F1.6</span></div>
<div><span>12</span><span>MP</span></div>
</div>
</div>
</div> </div>
</div> </div>
<div class="group-box wide-group-box"> <div class="group-box wide-group-box">
<div class="phone-tag">i Phone 10</div> <div class="phone-tag">i Phone 10</div>
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit">제조사</h5> <h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="fp-item-img"></div> <div class="row-box camera-row-box">
<div class="fp-item-txt">삼성</div> <div class="fp-item-img side-img">
<img src="../img/point/group-23-copy-8@2x.png" class="w42">
</div>
<div class="fp-item-txt side-txt camera-txt2">
<div><span>와이드</span> + <span>울트라와이드</span></div>
<div><span>F1.6</span> + <span>F2.0</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div> </div>
</div> </div>
<div class="group-box wide-group-box"> <div class="group-box wide-group-box">
<div class="phone-tag">i Phone 11/12</div> <div class="phone-tag">i Phone 11/12</div>
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit">제조사</h5> <h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="fp-item-img"></div> <div class="row-box">
<div class="fp-item-txt">삼성</div> <div class="fp-item-img side-img">
<img src="../img/point/group-23-copy-6@2x.png" class="w70">
</div>
<div class="fp-item-txt side-txt camera-txt3">
<div><span>와이드</span> + <span>울트라와이드</span></div>
<div><span>F1.6</span> + <span>F2.0</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div> </div>
</div> </div>
<div class="group-box wide-group-box"> <div class="group-box wide-group-box">
<div class="phone-tag">i Phone 13</div> <div class="phone-tag">i Phone 13</div>
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit">제조사</h5> <h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="fp-item-img"></div> <div class="row-box">
<div class="fp-item-txt">삼성</div> <div class="fp-item-img side-img">
<img src="../img/point/group-23-copy-5@2x.png" class="w70">
</div>
<div class="fp-item-txt side-txt camera-txt3">
<div><span>와이드</span> + <span>울트라와이드</span></div>
<div><span>F1.6</span> + <span>F2.0</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div> </div>
</div> </div>
<div class="group-box wide-group-box"> <div class="group-box wide-group-box">
<div class="phone-tag">i Phone 11/12/13pro</div> <div class="phone-tag">i Phone 11/12/13pro</div>
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit">제조사</h5> <h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="fp-item-img"></div> <div class="row-box">
<div class="fp-item-txt">삼성</div> <div class="fp-item-img side-img">
<img src="../img/point/group-23-copy-5@2x.png" class="w70">
</div>
<div class="fp-item-txt side-txt camera-txt3">
<div><span>와이드</span> + <span>울트라와이드</span> + <span>광각</span></div>
<div><span>F1.6</span> + <span>F2.0</span> + <span>F2.2</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div> </div>
</div> </div>
<div class="group-box wide-group-box"> <div class="group-box wide-group-box">
...@@ -590,9 +656,9 @@ ...@@ -590,9 +656,9 @@
<h5 class="fp-item-tit">전면 카메라</h5> <h5 class="fp-item-tit">전면 카메라</h5>
<div class="fp-item-img"></div> <div class="fp-item-img"></div>
<div class="fp-item-txt"> <div class="fp-item-txt">
<span>와이드</span> <div>와이드</div>
<span>F1.6</span> <div>F1.6</div>
<span>12MP</span> <div><span>12</span><span>MP</span></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -601,13 +667,13 @@ ...@@ -601,13 +667,13 @@
<h5 class="fp-item-tit">전면 카메라</h5> <h5 class="fp-item-tit">전면 카메라</h5>
<div class="fp-item-img"></div> <div class="fp-item-img"></div>
<div class="fp-item-txt"> <div class="fp-item-txt">
<span>와이드+와이드</span> <div>와이드 + 와이드</div>
<span>F1.6+F2.0</span> <div>F1.6 + F2.0</div>
<span>12MP+12MP</span> <div>12MP + 12MP</div>
</div> </div>
</div> </div>
</div> </div>
<div>※ 실제 카메라 배치와 다를 수 있습니다.</div> <div class="noti">※ 실제 카메라 배치와 다를 수 있습니다.</div>
</div> </div>
</div> </div>
<!-- //카메라 --> <!-- //카메라 -->
...@@ -619,7 +685,7 @@ ...@@ -619,7 +685,7 @@
<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> <div class="fp-item-img"></div>
<div class="fp-item-txt">IP68등급 획득</div> <div class="fp-item-txt"><span>IP68</span>등급 획득</div>
</div> </div>
</div> </div>
<div class="group-box"> <div class="group-box">
......
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