Skip to content

T
TDS_Myshop_Detail
Commit ad284410 authored by 임지연_이모션's avatar 임지연_이모션
Browse files
Options

MyShop_Detail._22.01.05_v2-가입정보 팝업구조로 수정

parent b723c705
Hide whitespace changes
Inline Side-by-side
Showing with 32 additions and 44 deletions
src/assets/css/seller_common.css
View file @ ad284410
...@@ -667,7 +667,7 @@ ...@@ -667,7 +667,7 @@
font-size: 1rem; font-size: 1rem;
} }
/* new 가입자 정보 22.01.03 seller_subscriber_info */ /* new 가입자 정보 22.01.05 seller_subscriber_info */
.seller-wrap.seller_subscriber_info .content { .seller-wrap.seller_subscriber_info .content {
padding-top: 6.2rem; padding-top: 6.2rem;
padding-bottom: 0; padding-bottom: 0;
...@@ -688,10 +688,10 @@ ...@@ -688,10 +688,10 @@
width: 100%; width: 100%;
} }
.seller_subscriber_info .layer-pay { .seller_subscriber_info.popup .popup-footer {
border-top: 0; border-top: 0;
background-color: #efeff1; background-color: #efeff1 !important;
box-shadow: none; box-shadow: none !important ;
} }
.seller_subscriber_info .l-grid { .seller_subscriber_info .l-grid {
...@@ -701,24 +701,24 @@ ...@@ -701,24 +701,24 @@
padding-bottom: 20px; padding-bottom: 20px;
} }
.seller_subscriber_info .layer-pay .btn-area { .seller_subscriber_info.popup .popup-footer .btn-area {
font-size: 1.3rem; font-size: 1.3rem;
padding-top: 0; padding-top: 0;
display: flex; display: flex;
} }
.seller_subscriber_info .layer-pay .btn-area button { .seller_subscriber_info.popup .popup-footer .btn-area button {
height: 44px; height: 44px;
line-height: 44px; line-height: 44px;
} }
.seller_subscriber_info .layer-pay .btn-area .btn-primary { .seller_subscriber_info.popup .popup-footer .btn-area .btn-primary {
min-width: auto; min-width: auto;
margin: 0 0.4rem; 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; 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 { .seller_subscriber_info.popup .popup-footer .btn-area .btn-middle-light {
min-width: auto; 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; 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; background-color: #efeff1;
......
src/assets/html/seller_subscriber_info.html
View file @ ad284410
...@@ -17,22 +17,17 @@ ...@@ -17,22 +17,17 @@
</head> </head>
<body> <body>
<!-- [D] div.wrap에 클래스 product-detail-page 추가 <!-- popup -->
header가 상단 고정을 경우 div.wrap에 클래스 header-sticky 추가 --> <div class="popup pop-seller seller_subscriber_info">
<div class="wrap seller-wrap header-sticky seller_subscriber_info"> <div class="popup-body">
<header class="header header-sub"> <div class="popup-header">
<div class="top-menu"> <h1 class="popup-title">가입자 정보</h1>
<a href="#none" class="btn-back">
<span class="ico-back">이전 페이지로 돌아가기</span>
</a>
<div class="top-header-title"><span class="txt-head">가입자 정보</span></div>
</div> </div>
</header>
<main role="main" class="content"> <main role="main" class="popup-content">
<div class="l-grid">
<p class="subscrib-txt-msg">신청서로 이동하기 전 가입자 정보를 확인해 주세요</p> <p class="subscrib-txt-msg">신청서로 이동하기 전 가입자 정보를 확인해 주세요</p>
<!-- [D] Case: 비회원 --> <!-- [D] Case: 비회원 -->
<div class="opt-group"> <div class="opt-group">
<h2 class="opt-group-tit">가입자명</h2> <h2 class="opt-group-tit">가입자명</h2>
<div class="opt-group-con"> <div class="opt-group-con">
...@@ -48,12 +43,13 @@ ...@@ -48,12 +43,13 @@
<div class="opt-group-con"> <div class="opt-group-con">
<div class="form-group"> <div class="form-group">
<span class="c-input"> <span class="c-input">
<input type="text" placeholder="‘-’ 없이 숫자만 입력해 주세요" title="‘-’ 없이 숫자만 입력해 주세요" maxlength="11" class="input" numberOnly> <input type="text" placeholder="‘-’ 없이 숫자만 입력해 주세요" title="‘-’ 없이 숫자만 입력해 주세요" maxlength="11"
class="input" numberOnly>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<!-- [D] Case: 회원(서비스관리번호有) --> <!-- [D] Case: 회원(서비스관리번호有) -->
<div class="opt-group"> <div class="opt-group">
<h2 class="opt-group-tit">가입자명</h2> <h2 class="opt-group-tit">가입자명</h2>
<div class="opt-group-con"> <div class="opt-group-con">
...@@ -69,13 +65,13 @@ ...@@ -69,13 +65,13 @@
<div class="opt-group-con"> <div class="opt-group-con">
<div class="form-group"> <div class="form-group">
<span class="c-input"> <span class="c-input">
<input type="text" placeholder="‘-’ 없이 숫자만 입력해 주세요" title="‘-’ 없이 숫자만 입력해 주세요" maxlength="11" onfocus="this.value=''" value="010-8912-1706" <input type="text" placeholder="‘-’ 없이 숫자만 입력해 주세요" title="‘-’ 없이 숫자만 입력해 주세요" maxlength="11"
class="input" numberOnly> onfocus="this.value=''" value="010-8912-1706" class="input" numberOnly>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<!-- [D] Case: 언택트플랜 case (비회원 or 회원&다른번호 입력)--> <!-- [D] Case: 언택트플랜 case (비회원 or 회원&다른번호 입력)-->
<div class="opt-group"> <div class="opt-group">
<h2 class="opt-group-tit">가입자명</h2> <h2 class="opt-group-tit">가입자명</h2>
<div class="opt-group-con"> <div class="opt-group-con">
...@@ -96,29 +92,21 @@ ...@@ -96,29 +92,21 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</main> </main>
<!-- s: 하단 버튼 바 --> <!-- s: 하단 버튼 바 -->
<div class="sticky-bar"> <div class="popup-footer">
<div class="layer-pay"> <!-- [D] 활성/비활성 여부는 클래스 disabled 추가/삭제로 컨트롤 -->
<h2 class="g-invisible">가입자정보</h2> <div class="btn-area">
<div class="l-grid"> <button type="button" class="btn-middle-light">취소</button>
<!-- [D] 활성/비활성 여부는 클래스 disabled 추가/삭제로 컨트롤 --> <button type="button" class="btn-primary">확인</button>
<div class="btn-area">
<button type="button" class="btn-middle-light">취소</button>
<button type="button" class="btn-primary">확인</button>
</div>
</div> </div>
</div> </div>
<!-- //e: 하단 버튼 바 -->
</div> </div>
<!-- //e: 하단 버튼 바 -->
</div> </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/jquery.min.js"></script>
<script src="../js/swiper.min.js"></script> <script src="../js/swiper.min.js"></script>
<script src="../js/tdirect-ui.js"></script> <script src="../js/tdirect-ui.js"></script>
......
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