[임지연/이모션]가입정보추가

b723c705 · 임지연_이모션 · 9e28c32c · b723c705 · b723c705 · b723c705
Commit b723c705 authored Jan 05, 2022 by 임지연_이모션
4 changed files
--- a/.gitignore
+++ b/.gitignore
+.vscode/settings.json
--- a/src/assets/css/seller_common.css
+++ b/src/assets/css/seller_common.css
@@ -292,9 +292,10 @@
  clear: both;
 }

-.opt-group .btn-popup{
+.opt-group .btn-popup {
  float: right;
 }
+
 .opt-group:nth-of-type(1) {
  border-top: 0;
 }
@@ -302,11 +303,13 @@
 .inner-opt-desc {
  margin-top: 3rem;
 }
-.discount-types-tit{
-    margin-top:1rem;
+
+.discount-types-tit {
+  margin-top: 1rem;
  font-size: 1.5rem;
  font-weight: 400;
 }
+
 .opt-group-tit {
  font-size: 1.5rem;
  font-weight: 400;
@@ -316,8 +319,8 @@
  margin-top: 1rem;
 }

-.opt-group-con .dsc-list-wrap{
-    margin-top:0.6rem;
+.opt-group-con .dsc-list-wrap {
+  margin-top: 0.6rem;
 }

 .opt-group-con .txt-info {
@@ -664,6 +667,64 @@
  font-size: 1rem;
 }

+/* new 가입자 정보 22.01.03  seller_subscriber_info */
+.seller-wrap.seller_subscriber_info .content {
+  padding-top: 6.2rem;
+  padding-bottom: 0;
+}
+.subscrib-txt-msg {
+  font-size: 1.5rem;
+  letter-spacing: -0.5px;
+  font-weight: normal;
+  color: #222;
+  padding-bottom:4rem;
+}
+.bottom-btn-bar {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10010;
+  width: 100%;
+}
+
+.seller_subscriber_info .layer-pay {
+  border-top: 0;
+  background-color: #efeff1;
+  box-shadow: none;
+}
+
+.seller_subscriber_info .l-grid {
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.seller_subscriber_info .layer-pay .btn-area {
+  font-size: 1.3rem;
+  padding-top: 0;
+  display: flex;
+}
+
+.seller_subscriber_info .layer-pay .btn-area button {
+  height: 44px;
+  line-height: 44px;
+}
+
+.seller_subscriber_info .layer-pay .btn-area .btn-primary {
+  min-width: auto;
+  margin: 0 0.4rem;
+  box-shadow: -4px -6px 10px 0 rgba(255, 255, 255, 0.83), 4px 7px 10px 0 #d3d3d3, -1px -1px 1px 0 #fff;
+}
+
+.seller_subscriber_info .layer-pay .btn-area .btn-middle-light {
+  min-width: auto;
+  box-shadow: -4px -6px 10px 0 rgba(255, 255, 255, 0.83), 4px 7px 10px 0 #d3d3d3, -1px -1px 1px 0 #fff;
+  background-color: #efeff1;
+  margin: 0 0.4rem;
+}
+
 /* seller_process 2 */
 .type-family .product-option-col .c-ick-var,
 .type-welfare .product-option-col .c-ick-var {
@@ -1012,6 +1073,9 @@
  border-right: 1px solid #e1e1e1 !important;
 }

+.seller_subscriber_info .opt-group {
+  border-top: 0;
+}

 /* 320디바이스 대응수정(2021.08.24 추가) */
 @media all and (max-width: 320px) {

--- a/src/assets/html/index.html
+++ b/src/assets/html/index.html
@@ -81,6 +81,8 @@ document.createElement("footer");
 				<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>
+				<li><a href="./seller_subscriber_info.html">가입자 정보<span>/ ./seller_subscriber_info.html</span></a></li>
+				
 			</ul>
 		</section>
 	</article>	

--- a/src/assets/html/seller_subscriber_info.html
+++ b/src/assets/html/seller_subscriber_info.html
+<!-- 
+  가입자 정보 화면
+ -->
+<!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] detail | 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에 클래스 product-detail-page 추가
+ 		header가 상단 고정을 경우 div.wrap에 클래스 header-sticky 추가 -->
+  <div class="wrap seller-wrap header-sticky seller_subscriber_info">
+    <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>
+
+    <main role="main" class="content">
+      <div class="l-grid">
+        <p class="subscrib-txt-msg">신청서로 이동하기 전 가입자 정보를 확인해 주세요</p>
+      <!-- [D] Case: 비회원 -->
+        <div class="opt-group">
+          <h2 class="opt-group-tit">가입자명</h2>
+          <div class="opt-group-con">
+            <div class="form-group">
+              <span class="c-input">
+                <input type="text" placeholder="가입하실 분의 이름을 입력하세요" title="가입하실 분의 이름을 입력하세요" class="input">
+              </span>
+            </div>
+          </div>
+        </div>
+        <div class="opt-group">
+          <h2 class="opt-group-tit">휴대폰번호</h2>
+          <div class="opt-group-con">
+            <div class="form-group">
+              <span class="c-input">
+                <input type="text" placeholder="‘-’ 없이 숫자만 입력해 주세요" title="‘-’ 없이 숫자만 입력해 주세요" maxlength="11" class="input" numberOnly>
+              </span>
+            </div>
+          </div>
+        </div>
+      <!-- [D] Case: 회원(서비스관리번호有) -->
+        <div class="opt-group">
+          <h2 class="opt-group-tit">가입자명</h2>
+          <div class="opt-group-con">
+            <div class="form-group">
+              <span class="c-input">
+                <input type="text" placeholder="가입하실 분의 이름을 입력하세요" title="가입하실 분의 이름을 입력하세요" value="최부열" class="input">
+              </span>
+            </div>
+          </div>
+        </div>
+        <div class="opt-group">
+          <h2 class="opt-group-tit">휴대폰번호</h2>
+          <div class="opt-group-con">
+            <div class="form-group">
+              <span class="c-input">
+                <input type="text" placeholder="‘-’ 없이 숫자만 입력해 주세요" title="‘-’ 없이 숫자만 입력해 주세요" maxlength="11" onfocus="this.value=''" value="010-8912-1706"
+                  class="input" numberOnly>
+              </span>
+            </div>
+          </div>
+        </div>
+      <!-- [D] Case: 언택트플랜 case (비회원 or 회원&다른번호 입력)-->
+        <div class="opt-group">
+          <h2 class="opt-group-tit">가입자명</h2>
+          <div class="opt-group-con">
+            <div class="form-group">
+              <span class="c-input">
+                <input type="text" placeholder="가입하실 분의 이름을 입력하세요" title="가입하실 분의 이름을 입력하세요" class="input">
+              </span>
+            </div>
+          </div>
+        </div>
+        <div class="opt-group">
+          <h2 class="opt-group-tit">휴대폰번호</h2>
+          <div class="opt-group-con">
+            <div class="form-group">
+              <span class="c-input">
+                010-8912-1706
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+    <!-- s: 하단 버튼 바 -->
+    <div class="sticky-bar">
+      <div class="layer-pay">
+        <h2 class="g-invisible">가입자정보</h2>
+        <div class="l-grid">
+          <!-- [D] 활성/비활성 여부는 클래스 disabled 추가/삭제로 컨트롤 -->
+          <div class="btn-area">
+            <button type="button" class="btn-middle-light">취소</button>
+            <button type="button" class="btn-primary">확인</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- //e: 하단 버튼 바 -->
+  </div>
+
+  <!-- <script>
+    $("input").on("click", function(){
+      $(this).val($(this).val().replace(/[^0-9]/g,""));
+    })
+  </script> -->
+  <script src="../js/jquery.min.js"></script>
+  <script src="../js/swiper.min.js"></script>
+  <script src="../js/tdirect-ui.js"></script>
+</body>
+
+</html>
\ No newline at end of file