Skip to content

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

수정 및 페이지 추가

parent 53538c48
Hide whitespace changes
Inline Side-by-side
Showing with 182 additions and 1 deletion
src/assets/css/tdirect.css
View file @ 9b0e6e54
...@@ -5925,6 +5925,11 @@ select::-ms-expand { ...@@ -5925,6 +5925,11 @@ select::-ms-expand {
line-height: 1.5 line-height: 1.5
} }
.popup.pop_page {
position:static;
}
.loading-area { .loading-area {
padding: 3rem 0; padding: 3rem 0;
line-height: 0; line-height: 0;
...@@ -9528,6 +9533,8 @@ select::-ms-expand { ...@@ -9528,6 +9533,8 @@ select::-ms-expand {
display: block display: block
} }
.product-option-row .c-ick-var .desc {word-break : keep-all;}
.product-option-row .c-ick-var~.c-ick-var { .product-option-row .c-ick-var~.c-ick-var {
margin-top: 1rem margin-top: 1rem
} }
......
src/assets/html/seller_pop_page.html 0 → 100644
View file @ 9b0e6e54
<!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>[팝업] 요금제 선택하기 | 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_page pop-seller pop-plan-list">
<div class="popup-body">
<div class="popup-header">
<h1 class="popup-title">요금제 선택하기</h1>
</div>
<div role="main" class="popup-content">
<span class="txt-question" style="display: none;">※ 비노출 요금제는 상담 문의해주세요.</span>
<div class="seller-scroll-wrap">
<div class="seller-scroll-list">
<button type="button" class="tab-item on" data-tab="planList"><span>#AI Pick</span></button>
<button type="button" class="tab-item" data-tab="planList"><span>#다이렉트 플랜 5G</span></button>
<button type="button" class="tab-item" data-tab="planList"><span>#5GX 플랜</span></button>
<button type="button" class="tab-item" data-tab="planList"><span>#다이렉트 플랜 5G</span></button>
<button type="button" class="tab-item" data-tab="planList"><span>#5GX 플랜</span></button>
</div>
</div>
<h2 class="g-invisible">요금제 목록</h2>
<div class="seller-cont-area" data-tab-content="planList">
<div class="seller-plan-list">
<div class="seller-plan-item open">
<div class="inner">
<div class="info">
<div class="tit">
<span class="sub-tit">뉴 T끼리 맞춤형(150분+700MB)</span>
<!-- [D] badge type 텍스트/bg 매칭
.type1 : 사용중
.type2 : 추천
.type3 : AI Pick
.type4 : 고객선택
-->
<em class="badge-round type4">고객선택</em>
<h2 class="main-tit">데이터 무제한</h2>
</div>
<div class="data">
<h2 class="main-tit">999,999 <span>원/월</span></h2>
<span class="sub-tit">120,000원/월</span>
</div>
</div>
<p class="desc">12GB+매일2GB 이후 속도제어</p>
</div>
<div class="area-toggle-cont">
<h3 class="g-invisible">혜택 자세히보기</h3>
<strong class="txt-info">추가 혜택 <em>N개</em>를 선택해주세요.</strong>
<span class="c-select">
<select title="추가 혜택 선택1" class="select" required>
<option value="" hidden>선택 안함</option>
<option value="opt1">VIP 멤버십</option>
<option value="opt2">V 컬러링</option>
</select>
</span>
<span class="c-select">
<select title="추가 혜택 선택2" class="select" required>
<option value="" hidden>선택 안함</option>
<option value="opt1">VIP 멤버십</option>
<option value="opt2">V 컬러링</option>
</select>
</span>
<div class="area-info">
<span class="title-info">안내사항</span>
<ul class="dsc-list">
<li class="dsc-item">FLO팩 : 모바일 무제한 듣기 + FLO 이용 데이터 무료(월 7,920원 상당)</li>
<li class="dsc-item">POOQ팩 : 모바일과 PC 실시간 지상파&VOD 이용 + VOD 10회 다운로드(월 7,900원 상당)</li>
<li class="dsc-item">5GX 95 요금제를 사용하시는 고객님께 FLO팩과 POOQ팩 중 선택하신 1개 옵션이 무료로 제공됩니다.</li>
<li class="dsc-item">5GX 95 요금제를 사용하시는 고객님께 FLO팩과 POOQ팩 중 선택하신 1개 옵션이 무료로 제공됩니다.</li>
<li class="dsc-item">5GX 95 요금제를 사용하시는 고객님께 FLO팩과 POOQ팩 중 선택하신 1개 옵션이 무료로 제공됩니다.</li>
<li class="dsc-item">5GX 95 요금제를 사용하시는 고객님께 FLO팩과 POOQ팩 중 선택하신 1개 옵션이 무료로 제공됩니다.</li>
<li class="dsc-item">5GX 95 요금제를 사용하시는 고객님께 FLO팩과 POOQ팩 중 선택하신 1개 옵션이 무료로 제공됩니다.</li>
<li class="dsc-item">5GX 95 요금제를 사용하시는 고객님께 FLO팩과 POOQ팩 중 선택하신 1개 옵션이 무료로 제공됩니다.</li>
</ul>
</div>
</div>
</div>
<div class="seller-plan-item">
<div class="inner">
<div class="info">
<div class="tit">
<span class="sub-tit">다이렉트 슬림</span>
<!-- [D] badge type 텍스트/bg 매칭
.type1 : 사용중
.type2 : 추천
.type3 : AI Pick
.type4 : 고객선택
-->
<em class="badge-round type3">AI Pick</em>
<h2 class="main-tit">데이터 무제한</h2>
</div>
<div class="data">
<h2 class="main-tit">999,999 <span>원/월</span></h2>
<span class="sub-tit">120,000원/월</span>
</div>
</div>
<p class="desc">12GB+매일2GB 이후 속도제어</p>
</div>
<div class="area-toggle-cont">
<h4 class="g-invisible">혜택 자세히보기</h4>
<strong class="txt-info">추가 혜택 <em>N개</em>를 선택해주세요.</strong>
<span class="c-select">
<select title="추가 혜택 선택1" class="select" required>
<option value="" hidden>선택 안함</option>
<option value="opt1">VIP 멤버십</option>
<option value="opt2">V 컬러링</option>
</select>
</span>
<span class="c-select">
<select title="추가 혜택 선택2" class="select" required>
<option value="" hidden>선택 안함</option>
<option value="opt1">VIP 멤버십</option>
<option value="opt2">V 컬러링</option>
</select>
</span>
<div class="area-info">
<span class="title-info">안내사항</span>
<ul class="dsc-list">
<li class="dsc-item">FLO팩 : 모바일 무제한 듣기 + FLO 이용 데이터 무료(월 7,920원 상당)</li>
<li class="dsc-item">POOQ팩 : 모바일과 PC 실시간 지상파&VOD 이용 + VOD 10회 다운로드(월 7,900원 상당)</li>
<li class="dsc-item">5GX 95 요금제를 사용하시는 고객님께 FLO팩과 POOQ팩 중 선택하신 1개 옵션이 무료로 제공됩니다.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="seller-cont-area" data-tab-content="planList">
<div class="init-area">
<p class="init-type">조회된 상품이 없습니다.</p>
</div>
</div>
</div>
<div class="popup-footer">
<div class="btn-area">
<!-- [D] 활성/비활성 여부는 disabled 클래스 및 속성으로 추가/삭제로 컨트롤 -->
<button type="button" class="btn-primary btn-lg disabled" disabled>요금제 선택</button>
</div>
</div>
<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>
<script>
(function () {
$('.seller-plan-item .inner').on('click', function () {
const $parent = $(this).parent('.seller-plan-item');
$parent.siblings('.seller-plan-item').removeClass('open');
$parent.toggleClass('open');
});
})();
</script>
</body>
</html>
\ No newline at end of file
src/assets/js/tdirect-ui.js
View file @ 9b0e6e54
...@@ -2529,5 +2529,8 @@ $("input[type='text'], textarea" , ".c-input").on("focus", function () { ...@@ -2529,5 +2529,8 @@ $("input[type='text'], textarea" , ".c-input").on("focus", function () {
}, 400); }, 400);
console.log($(this).offset()) console.log($(this).offset())
}); });
/*공통 : 팝업페이지 나타날 시 일부 모바일 스크롤 이슈 */ /*공통 : 팝업페이지 나타날 시 일부 모바일 스크롤 이슈 */
if ( $('.popup').css('display') === 'none') {
\ No newline at end of file $('.sticky-bar').addClass('active');
}
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