chominsoo4245 / mjon_git star
Forked from hylee / mjon_git
kmg 2023-12-27
2023/12/27 후불회원에만 노출되는 헤더영역 보유잔액 안내 레이어
@af2ae1abd4c4fa35f6dd5bbd2f8e96141b2ec34d
79cd62e
af2ae1a
src/main/webapp/WEB-INF/jsp/web/com/webCommonHeader.jsp
--- src/main/webapp/WEB-INF/jsp/web/com/webCommonHeader.jsp
+++ src/main/webapp/WEB-INF/jsp/web/com/webCommonHeader.jsp
@@ -1635,9 +1635,14 @@
 
 		                    </div>
 
 		                    <div class="login_pay">
 
 			                    <div class="check_money">
 
-									<i></i>
 
-									<fmt:formatNumber type="number" maxFractionDigits="3" value="${userMoney}" var="commaPrice" />
 
-			                        <p>보유잔액<em>(캐시)</em> <span class="fwMd" id="hdUserMoney"><c:out value="${commaPrice}"/></span>원</p>
 
+			                    	<div class="holdingsum_box">
 
+										<i></i>
 
+										<fmt:formatNumber type="number" maxFractionDigits="3" value="${userMoney}" var="commaPrice" />
 
+			                        	<p>보유잔액<em>(캐시)</em> <span class="fwMd" id="hdUserMoney"><c:out value="${commaPrice}"/></span>원</p>
 
+			                        	<dl>
 
+							              <dd>후불제 고객의 보유잔액(캐시)은 당월 발송 가능<br>금액을 말하며 <span>매월 1일 자동으로 충전</span>됩니다.</dd>
 
+							            </dl>
 
+			                        </div>
 
 			                        <button type="button" class="btnType btnType3" onclick="location.href='/web/member/pay/PayView.do'">충전</button>
 
 			                        <div class="account_box">
 
 			                        	<button type="button" class="btnType btnType3" onclick="location.href='/web/member/pay/PayView.do?tabType=2'">전용계좌</button>
79cd62e
af2ae1a
src/main/webapp/publish/css/common.css
--- src/main/webapp/publish/css/common.css
+++ src/main/webapp/publish/css/common.css
@@ -116,7 +116,7 @@
 
 .login2 .login_info button {margin-right: 2px;}
 
 .login2 .login_pay {display:flex;}
 
 .login2 .check_money p span, .login2 .point p span {padding-left: 4px;}
 
-.login2 .check_money {margin-right: 20px;}
 
+.login2 .check_money {margin-right: 20px; display: inline-flex;}
 
 .login2 .check_money p {padding-right: 6px;display: inline-block;vertical-align: middle;}
 
 .login2 .check_money i {background-image: url(/publish/images/check_money2.png);width: 29px;height: 30px;margin-right: 3px;}
 
 .login2 .check_money button {margin-right: 2px;}
@@ -127,6 +127,13 @@
 
 .login2 .check_money .account_box dl dt:before {content:'';display:inline-block;width:22px;height:20px;margin:0 5px 0 0;vertical-align:top;background:url(/publish/images/content/icon_account_layer.png) no-repeat left top;}
 
 .login2 .check_money .account_box dl dd {margin:7px 0 0;font-size:15px;font-weight:500;white-space:nowrap;}
 
 .login2 .check_money .account_box:hover dl {display:block;}
 
+	/*후불 회원에게만 노출되는 안내레이어*/
 
+.login2 .check_money .holdingsum_box {position: relative;}
 
+.login2 .check_money .holdingsum_box dl {display:none;position:absolute;left:50%;top:41px;padding:12px;border:2px solid #002c9a;background:#fff;border-radius:10px;box-shadow:0px 3px 10px 0px rgba(0, 0, 0, 0.5);transform:translateX(-50%);}
 
+.login2 .check_money .holdingsum_box dl:after {content:'';position:absolute;left:50%;top:-10px;width:16px;height:10px;margin:0 0 0 -8px;background:url(../images/content/icon_account_arrow.png) no-repeat left top;}
 
+.login2 .check_money .holdingsum_box dl dd {margin:3px;font-size:15px;font-weight:500;white-space:nowrap; line-height:20px;}
 
+.login2 .check_money .holdingsum_box:hover dl {display:block;}
 
+	
 .login2 .point p {padding-right: 6px;display: inline-block; vertical-align: middle;}
 
 .login2 .point i {background-image: url(/publish/images/pointIcon2.png);width: 30px;height: 28px;margin-right: 3px;margin-top: -2px;}
 
 .login2 .login_right button i {background-image: url(/publish/images/login_introIcon.png);width: 20px;height: 18px;margin: 0 6px 3px 0;}
Add a comment
List