[Spring][쇼핑몰 프로젝트][37] 장바구니 기능(장바구니 페이지) -2
https://kimvampa.tistory.com/266
This commit is contained in:
SeoJin Kim
@@ -1,12 +1,327 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
||||
pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
|
||||
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Insert title here</title>
|
||||
<title>Welcome BookMall</title>
|
||||
<link rel="stylesheet" href="/resources/css/cart.css">
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.4.1.js"
|
||||
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
|
||||
crossorigin="anonymous"></script>
|
||||
</head>
|
||||
<body>
|
||||
${cartInfo}
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="wrap">
|
||||
<div class="top_gnb_area">
|
||||
<ul class="list">
|
||||
<c:if test = "${member == null}"> <!-- 로그인 x -->
|
||||
<li >
|
||||
<a href="/member/login">로그인</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/member/join">회원가입</a>
|
||||
</li>
|
||||
</c:if>
|
||||
<c:if test="${member != null }"> <!-- 로그인 o -->
|
||||
<c:if test="${member.adminCk == 1 }"> <!-- 관리자 계정 -->
|
||||
<li><a href="/admin/main">관리자 페이지</a></li>
|
||||
</c:if>
|
||||
<li>
|
||||
<a id="gnb_logout_button">로그아웃</a>
|
||||
</li>
|
||||
<li>
|
||||
마이룸
|
||||
</li>
|
||||
<li>
|
||||
<a href="/cart/${member.memberId}">장바구니</a>
|
||||
</li>
|
||||
</c:if>
|
||||
<li>
|
||||
고객센터
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="top_area">
|
||||
<!-- 로고영역 -->
|
||||
<div class="logo_area">
|
||||
<a href="/main"><img src="/resources/img/mLogo.png"></a>
|
||||
</div>
|
||||
<div class="search_area">
|
||||
<div class="search_wrap">
|
||||
<form id="searchForm" action="/search" method="get">
|
||||
<div class="search_input">
|
||||
<select name="type">
|
||||
<option value="T">책 제목</option>
|
||||
<option value="A">작가</option>
|
||||
</select>
|
||||
<input type="text" name="keyword" value="<c:out value="${pageMaker.cri.keyword}"/>">
|
||||
<button class='btn search_btn'>검 색</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login_area">
|
||||
|
||||
<!-- 로그인 하지 않은 상태 -->
|
||||
<c:if test = "${member == null }">
|
||||
<div class="login_button"><a href="/member/login">로그인</a></div>
|
||||
<span><a href="/member/join">회원가입</a></span>
|
||||
</c:if>
|
||||
|
||||
<!-- 로그인한 상태 -->
|
||||
<c:if test="${ member != null }">
|
||||
<div class="login_success_area">
|
||||
<span>회원 : ${member.memberName}</span>
|
||||
<span>충전금액 : <fmt:formatNumber value="${member.money }" pattern="\#,###.##"/></span>
|
||||
<span>포인트 : <fmt:formatNumber value="${member.point }" pattern="#,###" /></span>
|
||||
<a href="/member/logout.do">로그아웃</a>
|
||||
</div>
|
||||
</c:if>
|
||||
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="content_area">
|
||||
|
||||
<div class="content_subject"><span>장바구니</span></div>
|
||||
<!-- 장바구니 리스트 -->
|
||||
<div class="content_middle_section"></div>
|
||||
<!-- 장바구니 가격 합계 -->
|
||||
<!-- cartInfo -->
|
||||
<div class="content_totalCount_section">
|
||||
|
||||
<table class="subject_table">
|
||||
<caption>표 제목 부분</caption>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<th class="td_width_1"></th>
|
||||
<th class="td_width_2"></th>
|
||||
<th class="td_width_3">상품명</th>
|
||||
<th class="td_width_4">가격</th>
|
||||
<th class="td_width_4">수량</th>
|
||||
<th class="td_width_4">합계</th>
|
||||
<th class="td_width_4">삭제</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="cart_table">
|
||||
<caption>표 내용 부분</caption>
|
||||
<tbody>
|
||||
<c:forEach items="${cartInfo}" var="ci">
|
||||
<tr>
|
||||
<td class="td_width_1 cart_info_td">
|
||||
<input type="hidden" class="individual_bookPrice_input" value="${ci.bookPrice}">
|
||||
<input type="hidden" class="individual_salePrice_input" value="${ci.salePrice}">
|
||||
<input type="hidden" class="individual_bookCount_input" value="${ci.bookCount}">
|
||||
<input type="hidden" class="individual_totalPrice_input" value="${ci.salePrice * ci.bookCount}">
|
||||
<input type="hidden" class="individual_point_input" value="${ci.point}">
|
||||
<input type="hidden" class="individual_totalPoint_input" value="${ci.totalPoint}">
|
||||
</td>
|
||||
<td class="td_width_2"></td>
|
||||
<td class="td_width_3">${ci.bookName}</td>
|
||||
<td class="td_width_4 price_td">
|
||||
<del>정가 : <fmt:formatNumber value="${ci.bookPrice}" pattern="#,### 원" /></del><br>
|
||||
판매가 : <span class="red_color"><fmt:formatNumber value="${ci.salePrice}" pattern="#,### 원" /></span><br>
|
||||
마일리지 : <span class="green_color"><fmt:formatNumber value="${ci.point}" pattern="#,###" /></span>
|
||||
</td>
|
||||
<td class="td_width_4 table_text_align_center">
|
||||
<div class="table_text_align_center quantity_div">
|
||||
<input type="text" value="${ci.bookCount}" class="quantity_input">
|
||||
<button class="quantity_btn plus_btn">+</button>
|
||||
<button class="quantity_btn minus_btn">-</button>
|
||||
</div>
|
||||
<a class="quantity_modify_btn">변경</a>
|
||||
</td>
|
||||
<td class="td_width_4 table_text_align_center">
|
||||
<fmt:formatNumber value="${ci.salePrice * ci.bookCount}" pattern="#,### 원" />
|
||||
</td>
|
||||
<td class="td_width_4 table_text_align_center delete_btn"><button>삭제</button></td>
|
||||
</tr>
|
||||
</c:forEach>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="list_table">
|
||||
</table>
|
||||
</div>
|
||||
<!-- 가격 종합 -->
|
||||
<div class="content_total_section">
|
||||
<div class="total_wrap">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td>총 상품 가격</td>
|
||||
<td>
|
||||
<span class="totalPrice_span">70000</span> 원
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>배송비</td>
|
||||
<td>
|
||||
<span class="delivery_price">3000</span>원
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>총 주문 상품수</td>
|
||||
<td><span class="totalKind_span"></span>종 <span class="totalCount_span"></span>권</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="boundary_div">구분선</div>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>총 결제 예상 금액</strong>
|
||||
</td>
|
||||
<td>
|
||||
<span class="finalTotalPrice_span">70000</span> 원
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>총 적립 예상 마일리지</strong>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<span class="totalPoint_span">70000</span> 원
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 구매 버튼 영역 -->
|
||||
<div class="content_btn_section">
|
||||
<a>주문하기</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer 영역 -->
|
||||
<div class="footer_nav">
|
||||
<div class="footer_nav_container">
|
||||
<ul>
|
||||
<li>회사소개</li>
|
||||
<span class="line">|</span>
|
||||
<li>이용약관</li>
|
||||
<span class="line">|</span>
|
||||
<li>고객센터</li>
|
||||
<span class="line">|</span>
|
||||
<li>광고문의</li>
|
||||
<span class="line">|</span>
|
||||
<li>채용정보</li>
|
||||
<span class="line">|</span>
|
||||
</ul>
|
||||
</div>
|
||||
</div> <!-- class="footer_nav" -->
|
||||
|
||||
<div class="footer">
|
||||
<div class="footer_container">
|
||||
|
||||
<div class="footer_left">
|
||||
<img src="/resources/img/Logo.png">
|
||||
</div>
|
||||
<div class="footer_right">
|
||||
(주) VamBook 대표이사 : OOO
|
||||
<br>
|
||||
사업자등록번호 : ooo-oo-ooooo
|
||||
<br>
|
||||
대표전화 : oooo-oooo(발신자 부담전화)
|
||||
<br>
|
||||
<br>
|
||||
COPYRIGHT(C) <strong>kimvampa.tistory.com</strong> ALL RIGHTS RESERVED.
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div> <!-- class="footer" -->
|
||||
|
||||
</div> <!-- class="wrap" -->
|
||||
</div> <!-- class="wrapper" -->
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
/* 종합 정보 섹션 정보 삽입 */
|
||||
let totalPrice = 0; // 총 가격
|
||||
let totalCount = 0; // 총 갯수
|
||||
let totalKind = 0; // 총 종류
|
||||
let totalPoint = 0; // 총 마일리지
|
||||
let deliveryPrice = 0; // 배송비
|
||||
let finalTotalPrice = 0; // 최종 가격(총 가격 + 배송비)
|
||||
|
||||
$(".cart_info_td").each(function(index, element){
|
||||
|
||||
// 총 가격
|
||||
totalPrice += parseInt($(element).find(".individual_totalPrice_input").val());
|
||||
// 총 갯수
|
||||
totalCount += parseInt($(element).find(".individual_bookCount_input").val());
|
||||
// 총 종류
|
||||
totalKind += 1;
|
||||
// 총 마일리지
|
||||
totalPoint += parseInt($(element).find(".individual_totalPoint_input").val());
|
||||
|
||||
});
|
||||
|
||||
/* 배송비 결정 */
|
||||
if(totalPrice >= 30000){
|
||||
deliveryPrice = 0;
|
||||
} else if(totalPrice == 0){
|
||||
deliveryPrice = 0;
|
||||
} else {
|
||||
deliveryPrice = 3000;
|
||||
}
|
||||
|
||||
/* 최종 가격 */
|
||||
finalTotalPrice = totalPrice + deliveryPrice;
|
||||
|
||||
/* 값 삽입 */
|
||||
// 총 가격
|
||||
$(".totalPrice_span").text(totalPrice.toLocaleString());
|
||||
// 총 갯수
|
||||
$(".totalCount_span").text(totalCount);
|
||||
// 총 종류
|
||||
$(".totalKind_span").text(totalKind);
|
||||
// 총 마일리지
|
||||
$(".totalPoint_span").text(totalPoint.toLocaleString());
|
||||
// 배송비
|
||||
$(".delivery_price").text(deliveryPrice);
|
||||
// 최종 가격(총 가격 + 배송비)
|
||||
$(".finalTotalPrice_span").text(finalTotalPrice.toLocaleString());
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
475
VamPa/src/main/webapp/resources/css/cart.css
Normal file
475
VamPa/src/main/webapp/resources/css/cart.css
Normal file
@@ -0,0 +1,475 @@
|
||||
@charset "UTF-8";
|
||||
*{
|
||||
margin: 0;
|
||||
padding:0;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
/* 화면 전체 렙 */
|
||||
.wrapper{
|
||||
width: 100%;
|
||||
}
|
||||
/* content 랩 */
|
||||
.wrap{
|
||||
width : 1080px;
|
||||
margin: auto;
|
||||
}
|
||||
/* 홈페이지 기능 네비 */
|
||||
.top_gnb_area{
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #f0f0f1;
|
||||
position:relative;
|
||||
}
|
||||
.top_gnb_area .list{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0;
|
||||
|
||||
}
|
||||
.top_gnb_area .list li{
|
||||
list-style: none;
|
||||
float : left;
|
||||
padding: 13px 15px 0 10px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 로고, 검색, 로그인 */
|
||||
.top_area{
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
/* background-color: #f7f0b9; */
|
||||
}
|
||||
/* 로고 영역 */
|
||||
.logo_area{
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
float:left;
|
||||
}
|
||||
.logo_area img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 검색 박스 영역 */
|
||||
.search_area{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
float:left;
|
||||
}
|
||||
.search_wrap{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#searchForm{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.search_input{
|
||||
display: flex;
|
||||
height: 30%;
|
||||
width: 80%;
|
||||
}
|
||||
.search_input select{
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
.search_input input{
|
||||
margin-left: 10px;
|
||||
width: 57%;
|
||||
font-size: 18px;
|
||||
padding-left: 2%;
|
||||
}
|
||||
.search_btn{
|
||||
margin-left: 10px;
|
||||
width: 17%;
|
||||
border-radius: 14px;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
/* 로그인 버튼 영역 */
|
||||
.login_area{
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.login_button{
|
||||
height: 50%;
|
||||
background-color: #D4DFE6;
|
||||
margin-top: 30px;
|
||||
line-height: 77px;
|
||||
font-size: 40px;
|
||||
font-weight: 900;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.login_area>span{
|
||||
margin-top: 10px;
|
||||
font-weight: 900;
|
||||
display: inline-block;
|
||||
}
|
||||
.login_button{
|
||||
height : 50%;
|
||||
background-color: #D4DFE6;
|
||||
margin-top:30px;
|
||||
}
|
||||
|
||||
/* 제품 목록 네비 */
|
||||
.navi_bar_area{
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background-color: #7696fd;
|
||||
}
|
||||
|
||||
/* 홈페이지 메인 제품 목록 */
|
||||
.content_area{
|
||||
width: 100%;
|
||||
min-height: 1000px;
|
||||
}
|
||||
table{
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
.table_text_align_center{
|
||||
text-align: center;
|
||||
}
|
||||
caption{
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content_subject{
|
||||
height: 110px;
|
||||
line-height: 110px;
|
||||
background-color: #5080bd;
|
||||
margin-bottom: 60px;
|
||||
|
||||
}
|
||||
.content_subject span{
|
||||
padding-left: 30 px;
|
||||
display: inline-block;
|
||||
color: white;
|
||||
font-size: 50px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.content_totalCount_section{
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.content_btn_section{
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
.content_btn_section a{
|
||||
color: #fefeff;
|
||||
background-color: #365fdd;
|
||||
min-width: 125px;
|
||||
padding: 17px 25px;
|
||||
display: inline-block;
|
||||
height: 39px;
|
||||
font-size: 23px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-right: 14px;
|
||||
line-height: 39px;
|
||||
}
|
||||
|
||||
|
||||
.subject_table{
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th{
|
||||
text-align: center;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
border-top: 1px solid #3084d9;
|
||||
background: #f4f9fd;
|
||||
padding: 2px 0;
|
||||
}
|
||||
.td_width_1{
|
||||
width: 5%;
|
||||
}
|
||||
.td_width_2{
|
||||
width: 10%;
|
||||
}
|
||||
.td_width_3{
|
||||
width: 25%;
|
||||
}
|
||||
.td_width_4{
|
||||
width: 15%;
|
||||
}
|
||||
.cart_table{
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.cart_table tr{
|
||||
height: 110px;
|
||||
}
|
||||
.price_td{
|
||||
padding-left: 5px;
|
||||
}
|
||||
.red_color{
|
||||
color : red;
|
||||
}
|
||||
.green_color{
|
||||
color : green;
|
||||
}
|
||||
.cart_table td{
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
}
|
||||
.quantity_div{
|
||||
position: relative;
|
||||
width: 42px;
|
||||
height: 25px;
|
||||
text-align: left;
|
||||
margin: 5px auto;
|
||||
}
|
||||
.quantity_input{
|
||||
position: absolute;
|
||||
width: 27px;
|
||||
height: 23px;
|
||||
text-align: center;
|
||||
border: 1px solid #c6c6c6;
|
||||
border-right: 0px;
|
||||
line-height: 19px;
|
||||
font-size: 12px;
|
||||
color: #4c4848;
|
||||
left: 0;
|
||||
}
|
||||
.quantity_btn{
|
||||
position: absolute;
|
||||
border: 1px solid #aaa;
|
||||
color: #3a60df;
|
||||
width: 14px;
|
||||
height: 13px;
|
||||
padding: 0px;
|
||||
background-color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 7px;
|
||||
line-height: 6px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.plus_btn{
|
||||
top: 0;
|
||||
right: 0
|
||||
}
|
||||
.minus_btn{
|
||||
bottom: 0;
|
||||
right: 0
|
||||
}
|
||||
.quantity_modify_btn{
|
||||
border: 1px solid #d0d0d0;
|
||||
height: 13px;
|
||||
line-height: 13px;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
width: 28px;
|
||||
display: inline-block;
|
||||
padding: 3px 6px 2px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.table_text_align_center{
|
||||
text-align: center;
|
||||
}
|
||||
.delete_btn{
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.content_total_section{
|
||||
background-color: rgb(227, 237, 247);
|
||||
}
|
||||
.total_wrap{
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
padding: 10px 0 10px 0;
|
||||
}
|
||||
.total_wrap td{
|
||||
width : 50%;
|
||||
}
|
||||
.finalTotalPrice_span{
|
||||
color: #854A72;
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.totalPoint_span{
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.boundary_div{
|
||||
font-size: 0;
|
||||
border: 1px dotted #d1c7c7;
|
||||
margin: 5px 0 5px 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 로그인 성공 영역 */
|
||||
.login_success_area{
|
||||
height: 62%;
|
||||
width: 80%;
|
||||
border: 2px solid #7474ad;
|
||||
border-radius: 15px;
|
||||
margin: 5% auto;
|
||||
padding-top: 5%;
|
||||
}
|
||||
.login_success_area>a{
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
background: #e1e5e8;
|
||||
width: 82px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
border-radius: 25px;
|
||||
color: #606267;
|
||||
}
|
||||
.login_success_area>span{
|
||||
display : block;
|
||||
text-align: left;
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
/* 검색결과 없음 */
|
||||
.table_empty{
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
margin: 200px 0 215px 0px;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
/* 필터정보 */
|
||||
.search_filter {
|
||||
width: 85%;
|
||||
margin: auto;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.filter_button_wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter_button_wrap button {
|
||||
width: 50%;
|
||||
}
|
||||
.filter_button{
|
||||
background-color: #04AA6D;
|
||||
border: 1px solid green;
|
||||
color: white;
|
||||
padding: 10px 24px;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
}
|
||||
.filter_button_wrap:after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
.filter_button_wrap button:not(:last-child) {
|
||||
border-right: none;
|
||||
}
|
||||
.filter_button:hover {
|
||||
background-color: #3e8e41;
|
||||
}
|
||||
.filter_active{
|
||||
background-color: #045d3c;
|
||||
}
|
||||
.filter_content{
|
||||
padding:20px 50px 20px 50px;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
.filter_content a:not(:first-child){
|
||||
margin-left: 10px;
|
||||
}
|
||||
.filter_a{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.filter_b{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* footer navai 영역 */
|
||||
.footer_nav{
|
||||
width:100%;
|
||||
height:50px;
|
||||
}
|
||||
.footer_nav_container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color:#8EC0E4;
|
||||
}
|
||||
.footer_nav_container>ul{
|
||||
font-weight : bold;
|
||||
float:left;
|
||||
list-style:none;
|
||||
position:relative;
|
||||
padding-top:10px;
|
||||
line-height: 27px;
|
||||
font-family: dotum;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.footer_nav_container>ul>li{
|
||||
display:inline;
|
||||
width: 45px;
|
||||
height: 19px;
|
||||
padding: 10px 9px 0 10px;
|
||||
}
|
||||
.footer_nav_container>ul>span{
|
||||
margin: 0 4px;
|
||||
}
|
||||
/* footer 영역 */
|
||||
.footer{
|
||||
width:100%;
|
||||
height:130px;
|
||||
background-color:#D4DFE6;
|
||||
padding-bottom : 50px;
|
||||
}
|
||||
.footer_container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
.footer_left>img {
|
||||
width: 150%;
|
||||
height: 130px;
|
||||
margin-left: -20px;
|
||||
margin-top: -12px;
|
||||
}
|
||||
.footer_left{
|
||||
float :left;
|
||||
width: 170px;
|
||||
margin-left: 20px;
|
||||
margin-top : 30px;
|
||||
|
||||
}
|
||||
.footer_right{
|
||||
float :left;
|
||||
width: 680px;
|
||||
margin-left: 70px;
|
||||
margin-top : 30px;
|
||||
}
|
||||
|
||||
|
||||
/* float 속성 해제 */
|
||||
.clearfix{
|
||||
clear: both;
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
#Generated by Maven Integration for Eclipse
|
||||
#Tue Nov 23 14:20:08 KST 2021
|
||||
#Wed Nov 24 18:29:52 KST 2021
|
||||
m2e.projectLocation=C\:\\Users\\sjinj\\git\\Blog_Project2\\VamPa
|
||||
m2e.projectName=VamPa
|
||||
groupId=com.vam
|
||||
|
||||
@@ -1,12 +1,327 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
||||
pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
|
||||
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Insert title here</title>
|
||||
<title>Welcome BookMall</title>
|
||||
<link rel="stylesheet" href="/resources/css/cart.css">
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.4.1.js"
|
||||
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
|
||||
crossorigin="anonymous"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="wrap">
|
||||
<div class="top_gnb_area">
|
||||
<ul class="list">
|
||||
<c:if test = "${member == null}"> <!-- 로그인 x -->
|
||||
<li >
|
||||
<a href="/member/login">로그인</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/member/join">회원가입</a>
|
||||
</li>
|
||||
</c:if>
|
||||
<c:if test="${member != null }"> <!-- 로그인 o -->
|
||||
<c:if test="${member.adminCk == 1 }"> <!-- 관리자 계정 -->
|
||||
<li><a href="/admin/main">관리자 페이지</a></li>
|
||||
</c:if>
|
||||
<li>
|
||||
<a id="gnb_logout_button">로그아웃</a>
|
||||
</li>
|
||||
<li>
|
||||
마이룸
|
||||
</li>
|
||||
<li>
|
||||
<a href="/cart/${member.memberId}">장바구니</a>
|
||||
</li>
|
||||
</c:if>
|
||||
<li>
|
||||
고객센터
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="top_area">
|
||||
<!-- 로고영역 -->
|
||||
<div class="logo_area">
|
||||
<a href="/main"><img src="/resources/img/mLogo.png"></a>
|
||||
</div>
|
||||
<div class="search_area">
|
||||
<div class="search_wrap">
|
||||
<form id="searchForm" action="/search" method="get">
|
||||
<div class="search_input">
|
||||
<select name="type">
|
||||
<option value="T">책 제목</option>
|
||||
<option value="A">작가</option>
|
||||
</select>
|
||||
<input type="text" name="keyword" value="<c:out value="${pageMaker.cri.keyword}"/>">
|
||||
<button class='btn search_btn'>검 색</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login_area">
|
||||
|
||||
<!-- 로그인 하지 않은 상태 -->
|
||||
<c:if test = "${member == null }">
|
||||
<div class="login_button"><a href="/member/login">로그인</a></div>
|
||||
<span><a href="/member/join">회원가입</a></span>
|
||||
</c:if>
|
||||
|
||||
<!-- 로그인한 상태 -->
|
||||
<c:if test="${ member != null }">
|
||||
<div class="login_success_area">
|
||||
<span>회원 : ${member.memberName}</span>
|
||||
<span>충전금액 : <fmt:formatNumber value="${member.money }" pattern="\#,###.##"/></span>
|
||||
<span>포인트 : <fmt:formatNumber value="${member.point }" pattern="#,###" /></span>
|
||||
<a href="/member/logout.do">로그아웃</a>
|
||||
</div>
|
||||
</c:if>
|
||||
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="content_area">
|
||||
|
||||
<div class="content_subject"><span>장바구니</span></div>
|
||||
<!-- 장바구니 리스트 -->
|
||||
<div class="content_middle_section"></div>
|
||||
<!-- 장바구니 가격 합계 -->
|
||||
<!-- cartInfo -->
|
||||
<div class="content_totalCount_section">
|
||||
|
||||
<table class="subject_table">
|
||||
<caption>표 제목 부분</caption>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<th class="td_width_1"></th>
|
||||
<th class="td_width_2"></th>
|
||||
<th class="td_width_3">상품명</th>
|
||||
<th class="td_width_4">가격</th>
|
||||
<th class="td_width_4">수량</th>
|
||||
<th class="td_width_4">합계</th>
|
||||
<th class="td_width_4">삭제</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="cart_table">
|
||||
<caption>표 내용 부분</caption>
|
||||
<tbody>
|
||||
<c:forEach items="${cartInfo}" var="ci">
|
||||
<tr>
|
||||
<td class="td_width_1 cart_info_td">
|
||||
<input type="hidden" class="individual_bookPrice_input" value="${ci.bookPrice}">
|
||||
<input type="hidden" class="individual_salePrice_input" value="${ci.salePrice}">
|
||||
<input type="hidden" class="individual_bookCount_input" value="${ci.bookCount}">
|
||||
<input type="hidden" class="individual_totalPrice_input" value="${ci.salePrice * ci.bookCount}">
|
||||
<input type="hidden" class="individual_point_input" value="${ci.point}">
|
||||
<input type="hidden" class="individual_totalPoint_input" value="${ci.totalPoint}">
|
||||
</td>
|
||||
<td class="td_width_2"></td>
|
||||
<td class="td_width_3">${ci.bookName}</td>
|
||||
<td class="td_width_4 price_td">
|
||||
<del>정가 : <fmt:formatNumber value="${ci.bookPrice}" pattern="#,### 원" /></del><br>
|
||||
판매가 : <span class="red_color"><fmt:formatNumber value="${ci.salePrice}" pattern="#,### 원" /></span><br>
|
||||
마일리지 : <span class="green_color"><fmt:formatNumber value="${ci.point}" pattern="#,###" /></span>
|
||||
</td>
|
||||
<td class="td_width_4 table_text_align_center">
|
||||
<div class="table_text_align_center quantity_div">
|
||||
<input type="text" value="${ci.bookCount}" class="quantity_input">
|
||||
<button class="quantity_btn plus_btn">+</button>
|
||||
<button class="quantity_btn minus_btn">-</button>
|
||||
</div>
|
||||
<a class="quantity_modify_btn">변경</a>
|
||||
</td>
|
||||
<td class="td_width_4 table_text_align_center">
|
||||
<fmt:formatNumber value="${ci.salePrice * ci.bookCount}" pattern="#,### 원" />
|
||||
</td>
|
||||
<td class="td_width_4 table_text_align_center delete_btn"><button>삭제</button></td>
|
||||
</tr>
|
||||
</c:forEach>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="list_table">
|
||||
</table>
|
||||
</div>
|
||||
<!-- 가격 종합 -->
|
||||
<div class="content_total_section">
|
||||
<div class="total_wrap">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td>총 상품 가격</td>
|
||||
<td>
|
||||
<span class="totalPrice_span">70000</span> 원
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>배송비</td>
|
||||
<td>
|
||||
<span class="delivery_price">3000</span>원
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>총 주문 상품수</td>
|
||||
<td><span class="totalKind_span"></span>종 <span class="totalCount_span"></span>권</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="boundary_div">구분선</div>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>총 결제 예상 금액</strong>
|
||||
</td>
|
||||
<td>
|
||||
<span class="finalTotalPrice_span">70000</span> 원
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>총 적립 예상 마일리지</strong>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<span class="totalPoint_span">70000</span> 원
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 구매 버튼 영역 -->
|
||||
<div class="content_btn_section">
|
||||
<a>주문하기</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer 영역 -->
|
||||
<div class="footer_nav">
|
||||
<div class="footer_nav_container">
|
||||
<ul>
|
||||
<li>회사소개</li>
|
||||
<span class="line">|</span>
|
||||
<li>이용약관</li>
|
||||
<span class="line">|</span>
|
||||
<li>고객센터</li>
|
||||
<span class="line">|</span>
|
||||
<li>광고문의</li>
|
||||
<span class="line">|</span>
|
||||
<li>채용정보</li>
|
||||
<span class="line">|</span>
|
||||
</ul>
|
||||
</div>
|
||||
</div> <!-- class="footer_nav" -->
|
||||
|
||||
<div class="footer">
|
||||
<div class="footer_container">
|
||||
|
||||
<div class="footer_left">
|
||||
<img src="/resources/img/Logo.png">
|
||||
</div>
|
||||
<div class="footer_right">
|
||||
(주) VamBook 대표이사 : OOO
|
||||
<br>
|
||||
사업자등록번호 : ooo-oo-ooooo
|
||||
<br>
|
||||
대표전화 : oooo-oooo(발신자 부담전화)
|
||||
<br>
|
||||
<br>
|
||||
COPYRIGHT(C) <strong>kimvampa.tistory.com</strong> ALL RIGHTS RESERVED.
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div> <!-- class="footer" -->
|
||||
|
||||
</div> <!-- class="wrap" -->
|
||||
</div> <!-- class="wrapper" -->
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
/* 종합 정보 섹션 정보 삽입 */
|
||||
let totalPrice = 0; // 총 가격
|
||||
let totalCount = 0; // 총 갯수
|
||||
let totalKind = 0; // 총 종류
|
||||
let totalPoint = 0; // 총 마일리지
|
||||
let deliveryPrice = 0; // 배송비
|
||||
let finalTotalPrice = 0; // 최종 가격(총 가격 + 배송비)
|
||||
|
||||
$(".cart_info_td").each(function(index, element){
|
||||
|
||||
// 총 가격
|
||||
totalPrice += parseInt($(element).find(".individual_totalPrice_input").val());
|
||||
// 총 갯수
|
||||
totalCount += parseInt($(element).find(".individual_bookCount_input").val());
|
||||
// 총 종류
|
||||
totalKind += 1;
|
||||
// 총 마일리지
|
||||
totalPoint += parseInt($(element).find(".individual_totalPoint_input").val());
|
||||
|
||||
});
|
||||
|
||||
/* 배송비 결정 */
|
||||
if(totalPrice >= 30000){
|
||||
deliveryPrice = 0;
|
||||
} else if(totalPrice == 0){
|
||||
deliveryPrice = 0;
|
||||
} else {
|
||||
deliveryPrice = 3000;
|
||||
}
|
||||
|
||||
/* 최종 가격 */
|
||||
finalTotalPrice = totalPrice + deliveryPrice;
|
||||
|
||||
/* 값 삽입 */
|
||||
// 총 가격
|
||||
$(".totalPrice_span").text(totalPrice.toLocaleString());
|
||||
// 총 갯수
|
||||
$(".totalCount_span").text(totalCount);
|
||||
// 총 종류
|
||||
$(".totalKind_span").text(totalKind);
|
||||
// 총 마일리지
|
||||
$(".totalPoint_span").text(totalPoint.toLocaleString());
|
||||
// 배송비
|
||||
$(".delivery_price").text(deliveryPrice);
|
||||
// 최종 가격(총 가격 + 배송비)
|
||||
$(".finalTotalPrice_span").text(finalTotalPrice.toLocaleString());
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
475
VamPa_MySQL/src/main/webapp/resources/css/cart.css
Normal file
475
VamPa_MySQL/src/main/webapp/resources/css/cart.css
Normal file
@@ -0,0 +1,475 @@
|
||||
@charset "UTF-8";
|
||||
*{
|
||||
margin: 0;
|
||||
padding:0;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
/* 화면 전체 렙 */
|
||||
.wrapper{
|
||||
width: 100%;
|
||||
}
|
||||
/* content 랩 */
|
||||
.wrap{
|
||||
width : 1080px;
|
||||
margin: auto;
|
||||
}
|
||||
/* 홈페이지 기능 네비 */
|
||||
.top_gnb_area{
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #f0f0f1;
|
||||
position:relative;
|
||||
}
|
||||
.top_gnb_area .list{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0;
|
||||
|
||||
}
|
||||
.top_gnb_area .list li{
|
||||
list-style: none;
|
||||
float : left;
|
||||
padding: 13px 15px 0 10px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 로고, 검색, 로그인 */
|
||||
.top_area{
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
/* background-color: #f7f0b9; */
|
||||
}
|
||||
/* 로고 영역 */
|
||||
.logo_area{
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
float:left;
|
||||
}
|
||||
.logo_area img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 검색 박스 영역 */
|
||||
.search_area{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
float:left;
|
||||
}
|
||||
.search_wrap{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#searchForm{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.search_input{
|
||||
display: flex;
|
||||
height: 30%;
|
||||
width: 80%;
|
||||
}
|
||||
.search_input select{
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
.search_input input{
|
||||
margin-left: 10px;
|
||||
width: 57%;
|
||||
font-size: 18px;
|
||||
padding-left: 2%;
|
||||
}
|
||||
.search_btn{
|
||||
margin-left: 10px;
|
||||
width: 17%;
|
||||
border-radius: 14px;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
/* 로그인 버튼 영역 */
|
||||
.login_area{
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.login_button{
|
||||
height: 50%;
|
||||
background-color: #D4DFE6;
|
||||
margin-top: 30px;
|
||||
line-height: 77px;
|
||||
font-size: 40px;
|
||||
font-weight: 900;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.login_area>span{
|
||||
margin-top: 10px;
|
||||
font-weight: 900;
|
||||
display: inline-block;
|
||||
}
|
||||
.login_button{
|
||||
height : 50%;
|
||||
background-color: #D4DFE6;
|
||||
margin-top:30px;
|
||||
}
|
||||
|
||||
/* 제품 목록 네비 */
|
||||
.navi_bar_area{
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background-color: #7696fd;
|
||||
}
|
||||
|
||||
/* 홈페이지 메인 제품 목록 */
|
||||
.content_area{
|
||||
width: 100%;
|
||||
min-height: 1000px;
|
||||
}
|
||||
table{
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
.table_text_align_center{
|
||||
text-align: center;
|
||||
}
|
||||
caption{
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content_subject{
|
||||
height: 110px;
|
||||
line-height: 110px;
|
||||
background-color: #5080bd;
|
||||
margin-bottom: 60px;
|
||||
|
||||
}
|
||||
.content_subject span{
|
||||
padding-left: 30 px;
|
||||
display: inline-block;
|
||||
color: white;
|
||||
font-size: 50px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.content_totalCount_section{
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.content_btn_section{
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
.content_btn_section a{
|
||||
color: #fefeff;
|
||||
background-color: #365fdd;
|
||||
min-width: 125px;
|
||||
padding: 17px 25px;
|
||||
display: inline-block;
|
||||
height: 39px;
|
||||
font-size: 23px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-right: 14px;
|
||||
line-height: 39px;
|
||||
}
|
||||
|
||||
|
||||
.subject_table{
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th{
|
||||
text-align: center;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
border-top: 1px solid #3084d9;
|
||||
background: #f4f9fd;
|
||||
padding: 2px 0;
|
||||
}
|
||||
.td_width_1{
|
||||
width: 5%;
|
||||
}
|
||||
.td_width_2{
|
||||
width: 10%;
|
||||
}
|
||||
.td_width_3{
|
||||
width: 25%;
|
||||
}
|
||||
.td_width_4{
|
||||
width: 15%;
|
||||
}
|
||||
.cart_table{
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.cart_table tr{
|
||||
height: 110px;
|
||||
}
|
||||
.price_td{
|
||||
padding-left: 5px;
|
||||
}
|
||||
.red_color{
|
||||
color : red;
|
||||
}
|
||||
.green_color{
|
||||
color : green;
|
||||
}
|
||||
.cart_table td{
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
}
|
||||
.quantity_div{
|
||||
position: relative;
|
||||
width: 42px;
|
||||
height: 25px;
|
||||
text-align: left;
|
||||
margin: 5px auto;
|
||||
}
|
||||
.quantity_input{
|
||||
position: absolute;
|
||||
width: 27px;
|
||||
height: 23px;
|
||||
text-align: center;
|
||||
border: 1px solid #c6c6c6;
|
||||
border-right: 0px;
|
||||
line-height: 19px;
|
||||
font-size: 12px;
|
||||
color: #4c4848;
|
||||
left: 0;
|
||||
}
|
||||
.quantity_btn{
|
||||
position: absolute;
|
||||
border: 1px solid #aaa;
|
||||
color: #3a60df;
|
||||
width: 14px;
|
||||
height: 13px;
|
||||
padding: 0px;
|
||||
background-color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 7px;
|
||||
line-height: 6px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.plus_btn{
|
||||
top: 0;
|
||||
right: 0
|
||||
}
|
||||
.minus_btn{
|
||||
bottom: 0;
|
||||
right: 0
|
||||
}
|
||||
.quantity_modify_btn{
|
||||
border: 1px solid #d0d0d0;
|
||||
height: 13px;
|
||||
line-height: 13px;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
width: 28px;
|
||||
display: inline-block;
|
||||
padding: 3px 6px 2px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.table_text_align_center{
|
||||
text-align: center;
|
||||
}
|
||||
.delete_btn{
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.content_total_section{
|
||||
background-color: rgb(227, 237, 247);
|
||||
}
|
||||
.total_wrap{
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
padding: 10px 0 10px 0;
|
||||
}
|
||||
.total_wrap td{
|
||||
width : 50%;
|
||||
}
|
||||
.finalTotalPrice_span{
|
||||
color: #854A72;
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.totalPoint_span{
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.boundary_div{
|
||||
font-size: 0;
|
||||
border: 1px dotted #d1c7c7;
|
||||
margin: 5px 0 5px 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 로그인 성공 영역 */
|
||||
.login_success_area{
|
||||
height: 62%;
|
||||
width: 80%;
|
||||
border: 2px solid #7474ad;
|
||||
border-radius: 15px;
|
||||
margin: 5% auto;
|
||||
padding-top: 5%;
|
||||
}
|
||||
.login_success_area>a{
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
background: #e1e5e8;
|
||||
width: 82px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
border-radius: 25px;
|
||||
color: #606267;
|
||||
}
|
||||
.login_success_area>span{
|
||||
display : block;
|
||||
text-align: left;
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
/* 검색결과 없음 */
|
||||
.table_empty{
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
margin: 200px 0 215px 0px;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
/* 필터정보 */
|
||||
.search_filter {
|
||||
width: 85%;
|
||||
margin: auto;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.filter_button_wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter_button_wrap button {
|
||||
width: 50%;
|
||||
}
|
||||
.filter_button{
|
||||
background-color: #04AA6D;
|
||||
border: 1px solid green;
|
||||
color: white;
|
||||
padding: 10px 24px;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
}
|
||||
.filter_button_wrap:after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
.filter_button_wrap button:not(:last-child) {
|
||||
border-right: none;
|
||||
}
|
||||
.filter_button:hover {
|
||||
background-color: #3e8e41;
|
||||
}
|
||||
.filter_active{
|
||||
background-color: #045d3c;
|
||||
}
|
||||
.filter_content{
|
||||
padding:20px 50px 20px 50px;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
.filter_content a:not(:first-child){
|
||||
margin-left: 10px;
|
||||
}
|
||||
.filter_a{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.filter_b{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* footer navai 영역 */
|
||||
.footer_nav{
|
||||
width:100%;
|
||||
height:50px;
|
||||
}
|
||||
.footer_nav_container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color:#8EC0E4;
|
||||
}
|
||||
.footer_nav_container>ul{
|
||||
font-weight : bold;
|
||||
float:left;
|
||||
list-style:none;
|
||||
position:relative;
|
||||
padding-top:10px;
|
||||
line-height: 27px;
|
||||
font-family: dotum;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.footer_nav_container>ul>li{
|
||||
display:inline;
|
||||
width: 45px;
|
||||
height: 19px;
|
||||
padding: 10px 9px 0 10px;
|
||||
}
|
||||
.footer_nav_container>ul>span{
|
||||
margin: 0 4px;
|
||||
}
|
||||
/* footer 영역 */
|
||||
.footer{
|
||||
width:100%;
|
||||
height:130px;
|
||||
background-color:#D4DFE6;
|
||||
padding-bottom : 50px;
|
||||
}
|
||||
.footer_container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
.footer_left>img {
|
||||
width: 150%;
|
||||
height: 130px;
|
||||
margin-left: -20px;
|
||||
margin-top: -12px;
|
||||
}
|
||||
.footer_left{
|
||||
float :left;
|
||||
width: 170px;
|
||||
margin-left: 20px;
|
||||
margin-top : 30px;
|
||||
|
||||
}
|
||||
.footer_right{
|
||||
float :left;
|
||||
width: 680px;
|
||||
margin-left: 70px;
|
||||
margin-top : 30px;
|
||||
}
|
||||
|
||||
|
||||
/* float 속성 해제 */
|
||||
.clearfix{
|
||||
clear: both;
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
#Generated by Maven Integration for Eclipse
|
||||
#Tue Nov 23 14:20:08 KST 2021
|
||||
#Wed Nov 24 18:29:52 KST 2021
|
||||
m2e.projectLocation=C\:\\Users\\sjinj\\git\\Blog_Project2\\VamPa_MySQL
|
||||
m2e.projectName=VamPa_MySQL
|
||||
groupId=com.vam
|
||||
|
||||
Reference in New Issue
Block a user