Commit 29a813a6 authored by jiyunlim's avatar jiyunlim

[이모션/임지연] [상품상세] 자급제/쓰던폰 작업

parent 7afd7da3
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
...@@ -28,6 +28,7 @@ dt,dd{display:inline;color:#333} ...@@ -28,6 +28,7 @@ dt,dd{display:inline;color:#333}
dt:after{display:inline;content:': '} dt:after{display:inline;content:': '}
dd:last-of-type{display:inline-block;color:#aaa} dd:last-of-type{display:inline-block;color:#aaa}
.ft_a{display:inline-block;padding:2px 2px 5px;color:#16d;letter-spacing:-1px;text-decoration:underline} .ft_a{display:inline-block;padding:2px 2px 5px;color:#16d;letter-spacing:-1px;text-decoration:underline}
.space{ font-size: .9rem; border-bottom: 1px solid #000; padding: 0.8rem 0;}
</style> </style>
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script type="text/javascript"> <script type="text/javascript">
...@@ -43,11 +44,11 @@ document.createElement("footer"); ...@@ -43,11 +44,11 @@ document.createElement("footer");
</head> </head>
<body> <body>
<header role="banner"> <header role="banner">
<h1 class="hd_h1">Seller Front 마크업 산출물 </h1> <h1 class="hd_h1">Seller Front 마크업 산출물 </h1>
</header> </header>
<article id="ct"> <article id="ct">
<section role="main"> <section role="main">
<h1 class="u_vc">마크업</h1> <h1 class="u_vc">마크업</h1>
...@@ -70,7 +71,18 @@ document.createElement("footer"); ...@@ -70,7 +71,18 @@ document.createElement("footer");
<li><a href="./seller_pop_shop_detail.html"> [팝업] 매장정보 <span> / ./seller_pop_shop_detail.html</span></a></li> <li><a href="./seller_pop_shop_detail.html"> [팝업] 매장정보 <span> / ./seller_pop_shop_detail.html</span></a></li>
<li><a href="./ui_modal.html"> seller modal <span> / ./ui_modal.html</span></a></li> <li><a href="./ui_modal.html"> seller modal <span> / ./ui_modal.html</span></a></li>
</ul> </ul>
<h2 class="space">[상품상세] 자급제/쓰던폰</h2>
<ul>
<li><a href="./seller_used_gate.html">자급제폰/쓰던 폰(중고폰) - 메인<span>/ ./seller_used_gate.html</span></a></li>
<li><a href="./seller_phone_registration1.html">자급제폰 등록 및 개통 - 자급제폰 정보<span>/ ./seller_phone_registration1.html</span></a></li>
<li><a href="./seller_phone_registration2.html">자급제폰 등록 및 개통 - 옵션.혜택<span>/ ./seller_phone_registration2.html</span></a></li>
<li><a href="./seller_used_registration1.html">쓰던 폰(중고폰) 등록 및 개통 - 쓰던 폰 정보<span>/ ./seller_used_registration1.html</span></a></li>
<li><a href="./seller_used_registration2.html">쓰던 폰(중고폰) 등록 및 개통 - 옵션.혜택<span>/ ./seller_used_registration2.html</span></a></li>
<li><a href="./seller_usim_5g_registration1.html">5G 요금제로 USIM 개통 - 옵션.혜택<span>/ ./seller_usim_5g_registration1.html</span></a></li>
<li><a href="./seller_usim_lte_registration1.html">LTE 요금제로 USIM 개통 - 옵션.혜택<span>/ ./seller_usim_lte_registration1.html</span></a></li>
<li><a href="./seller_pop_serial_number.html">[팝업] 일련번호, IMEI, Wi-Fi MAC 주소 확인방법<span>/ ./seller_pop_serial_number.html</span></a></li>
</ul>
</section> </section>
</article> </article>
</body> </body>
</html> </html>
This diff is collapsed.
This diff is collapsed.
<!--design: 자급제폰 등록 및 개통
팝업: 일련번호, IMEI, Wi-Fi MAC 주소 확인방법
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,viewport-fit=cover">
<title>[팝업] 일련번호, IMEI, Wi-Fi MAC 주소 확인방법 | SK텔레콤 공식 온라인 쇼핑몰 T월드 다이렉트</title>
<link rel="shortcut icon" type="image/x-icon" href="../img/favicon.ico">
<link rel="stylesheet" type="text/css" href="../css/seller.css">
<script>
document.documentElement.dataset.userAgent = navigator.userAgent;
</script>
</head>
<body>
<!-- popup -->
<div class="popup pop-seller serial-number-chk">
<div class="popup-body">
<div class="popup-header">
<h1 class="popup-title">일련번호, IMEI, Wi-Fi MAC 주소 확인방법</h1>
</div>
<div role="main" class="popup-content">
<div class="seller-tab-wrap">
<button type="button" class="tab-item on" data-tab="planList"><span>Android</span></button>
<button type="button" class="tab-item" data-tab="planList"><span>iOS</span></button>
</div>
<h2 class="g-invisible">일련번호, IMEI, Wi-Fi MAC 주소 확인방법</h2>
<!-- 안드로이드 : IMEI 확인방법-->
<div class="seller-cont-area imei" data-tab-content="planList">
<!-- [D] 내용 펼쳐짐 기본값 'active '-->
<div class="serial-number-way android active">
<h2 class="title">일련번호, IMEI 확인방법</h2>
<!-- 확인방법 -->
<ul class="serial-number-detail ">
<li class="way-list step1">
<span class="step-title">Step 01</span>
<span class="step-desc">‘설정’을 실행하여 하단의 ‘휴대전화 정보’ 선택</span>
<div class="step-img">
<img src="../img/used/img-imei-android-01@2x.png" alt="‘설정’을 실행하여 하단의 ‘휴대전화 정보’ 선택">
</div>
</li>
<li class="way-list step2">
<span class="step-title">Step 02</span>
<span class="step-desc">‘휴대전화 정보’에서 ‘규제정보’ 선택</span>
<div class="step-img">
<img src="../img/used/img-imei-android-02@2x.png" alt="‘휴대전화 정보’에서 ‘규제정보’ 선택">
</div>
</li>
<li class="way-list step3">
<span class="step-title">Step 3</span>
<span class="step-desc">아래와 같이 ‘일련번호’ 정보와 ‘IMEI’ 정보 확인가능</span>
<div class="step-img">
<img src="../img/used/img-imei-android-03@2x.png" alt="아래와 같이 ‘일련번호’ 정보와 ‘IMEI’ 정보 확인가능">
</div>
</li>
</ul>
</div>
<!-- [D] 내용 펼쳐짐 기본값 'active '-->
<div class="serial-number-way ios active">
<h2 class="title">Wi-Fi MAC 주소 확인방법</h2>
<!-- 확인방법 -->
<ul class="serial-number-detail ">
<li class="way-list step1">
<span class="step-title">Step 01</span>
<span class="step-desc">‘설정’을 실행하여 하단의 ‘휴대전화 정보’ 선택</span>
<div class="step-img">
<img src="../img/used/img-wifimac-android-04@2x.png" alt="‘설정’을 실행하여 하단의 ‘휴대전화 정보’ 선택">
</div>
</li>
<li class="way-list step2">
<span class="step-title">Step 02</span>
<span class="step-desc">‘휴대전화 정보’에서 ‘상태’ 선택</span>
<div class="step-img">
<img src="../img/used/img-wifimac-android-05@2x.png" alt="‘휴대전화 정보’에서 ‘상태’ 선택">
</div>
</li>
<li class="way-list step3">
<span class="step-title">Step 3</span>
<span class="step-desc">아래와 같이 ‘Wi-Fi MAC 주소’ 항목 확인 가능</span>
<div class="step-img">
<img src="../img/used/img-wifimac-android-06@2x.png" alt="아래와 같이 ‘Wi-Fi MAC 주소’ 항목 확인 가능">
</div>
</li>
</ul>
</div>
</div>
<!-- iOS : Wi-Fi MAC 주소 확인방법-->
<div class="seller-cont-area ios" data-tab-content="planList">
<!-- [D] 내용 펼쳐짐 기본값 'active '-->
<div class="serial-number-way active">
<!-- 확인방법 -->
<ul class="serial-number-detail ">
<li class="way-list step1">
<span class="step-title">Step 01</span>
<span class="step-desc">‘설정’을 실행하여 ‘일반’ 항목 선택</span>
<div class="step-img">
<img src="../img/used/img-imei-ios-01@2x.png" alt="‘설정’을 실행하여 ‘일반’ 항목 선택">
</div>
</li>
<li class="way-list step2">
<span class="step-title">Step 02</span>
<span class="step-desc">‘일반’화면에서 ‘정보’항목 선택</span>
<div class="step-img">
<img src="../img/used/img-imei-ios-02@2x.png" alt="‘휴대전화 정보’에서 ‘상태’ 선택">
</div>
</li>
<li class="way-list step3">
<span class="step-title">Step 3</span>
<span class="step-desc">아래와 같이 각 정보 확인가능</span>
<div class="step-img">
<img src="../img/used/img-imei-ios-03@2x.png" alt="아래와 같이 ‘Wi-Fi MAC 주소’ 항목 확인 가능">
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- popup close btn -->
<button type="button" class="btn-close" >
<span class="ico-close">팝업 닫기</span>
</button>
</div>
</div>
<!-- //popup -->
<script src="../js/jquery.min.js"></script>
<script src="../js/swiper.min.js"></script>
<script ipt src="../js/tdirect-ui.js"></script>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
<!--design: 자급제/쓰던 폰(중고폰) : 첫화면 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,viewport-fit=cover">
<title>[상품 Mobile] 자급제 / 쓰던폰 | SK텔레콤 공식 온라인 쇼핑몰 T월드 다이렉트</title>
<link rel="shortcut icon" type="image/x-icon" href="../img/favicon.ico">
<link rel="stylesheet" type="text/css" href="../css/seller.css">
<script>
document.documentElement.dataset.userAgent = navigator.userAgent;
</script>
</head>
<body>
<!-- [D] div.wrap에 used-page-wrap 클래스 추가 -->
<div class="wrap header-sticky used-gate-wrap ">
<!-- header -->
<header class="header header-sub">
<div class="top-menu">
<a href="#none" class="btn-back">
<span class="ico-back">이전 페이지로 돌아가기</span>
</a>
<div class="top-header-title"><span class="txt-head">쓰던 폰(중고폰) 등록 및 개통</span></div>
</div>
</header>
<!-- //header -->
<main role="main" class="content">
<div class="used-gate-wrap">
<div class="visual-wrap">
<img src="../img/gate/img_visual_used_gate@2x.png" alt="부담없는 온라인 전용 요금제 언택트 플랜">
<div class="g-invisible">
<span>자급제/쓰던 폰 고객님을 위한 특별 혜택</span>
<strong>부담없는 온라인 전용 요금제 언택트 플랜</strong>
<p>
자급제폰 구매 후 사용하시던 SKT 유심으로 기기변경, 언택트 플랜 가입하시면 스타벅스 아메리카노 기프티콘 2잔 제공
(유심 신규가입 고객 제외)
※ 기프티콘은 요금제 가입 해당 월 유지 기준으로 익월 말까지 발송됩니다.
</p>
</div>
</div>
<div class="gate-content">
<div class="l-grid">
<h2 class="g-invisible">개통 방식 안내</h2>
<span class="title"><strong>자급제폰/쓰던 폰(중고폰)</strong>으로 언택트 플랜 가입을 원하시는<br>SK텔레콤 기기변경 고객님</span>
<div class="service-banner-wrap">
<a href="./seller_phone_registration1.html" class="link-banner open-self">
<div class="group-row">
<strong class="tit-link">자급제폰 등록 및 개통</strong>
</div>
<div class="group-row">
<span class="txt-link">서비스 바로가기</span>
</div>
</a>
<a href="./seller_used_registration1.html" class="link-banner open-used">
<div class="group-row">
<strong class="tit-link">쓰던 폰(중고폰) 등록 및 개통</strong>
</div>
<div class="group-row">
<span class="txt-link">서비스 바로가기</span>
</div>
</a>
</div>
<span class="title"><strong>자급제폰/쓰던 폰(중고폰)</strong>으로<br>SK텔레콤 가입 원하시는 신규 고객님</span>
<div class="service-banner-wrap">
<a href="./seller_usim_5g_registration1.html" class="link-banner open-5g">
<div class="group-row">
<strong class="tit-link">5G 요금제로 기기 없이 유심만 개통</strong>
</div>
<div class="group-row">
<span class="txt-link">서비스 바로가기</span>
</div>
</a>
<a href="./seller_usim_lte_registration1.html" class="link-banner open-lte">
<div class="group-row">
<strong class="tit-link">LTE 요금제로 기기 없이 유심만 개통</strong>
</div>
<div class="group-row">
<span class="txt-link">서비스 바로가기</span>
</div>
</a>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
...@@ -1355,6 +1355,10 @@ var UI = { ...@@ -1355,6 +1355,10 @@ var UI = {
$(this).closest('.fold-item').siblings('.fold-item').removeClass('active'); $(this).closest('.fold-item').siblings('.fold-item').removeClass('active');
$(this).closest('.fold-item').toggleClass('active'); $(this).closest('.fold-item').toggleClass('active');
}); });
// 일련번호 '확인방법' 내용 열고/ 닫음
$('.serial-number-way .title', $('.seller-cont-area')).on('click', function () {
$(this).parent().toggleClass('active');
});
/* 체크포인트 확인방법 */ /* 체크포인트 확인방법 */
$('.checkpoint-area .title-field').on('click', function () { $('.checkpoint-area .title-field').on('click', function () {
...@@ -1438,10 +1442,12 @@ var UI = { ...@@ -1438,10 +1442,12 @@ var UI = {
if (isSticky) { if (isSticky) {
$('body').css({ $('body').css({
'overflow': 'hidden' 'overflow': 'hidden'
}); });
} else { } else {
$('body').css({ $('body').css({
'overflow': 'auto' 'overflow': 'auto',
}); });
} }
}); });
......
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