소장자료 상세페이지 수정

This commit is contained in:
com02 2021-12-14 18:58:16 +09:00
parent 59602674ab
commit 82fb836dba
3 changed files with 67 additions and 55 deletions

View File

@ -93,8 +93,9 @@ function goList(){
<div class="inner">
<div class="row-top">
<div class="center">
<div class="left">
<div class="cla">
<div class="title-box">
<div class="cla-info">
<div class="con-1">
<c:if test="${result.ableOnline eq true}">
<span class="online">온라인열람</span>
@ -113,11 +114,8 @@ function goList(){
<span class="code"><c:out value="${result.mngtNo}"/></span>
</div>
</div>
<div class="tit"><c:out value="${result.title}"/></div>
<div class="img"><img src="<c:out value="${result.rprsThumbUrlWithDefaultBig}"/>" alt="<c:out value='${result.title}'/>"></div>
</div>
<div class="right">
<div class="con-1">
<div class="tit-info"><c:out value="${result.title}"/></div>
<div class="btn-info">
<c:if test="${result.ableOnline eq true}">
<button type="button" class="view" title="새 창 열림" onclick="gfn_showDocPdf('<c:out value="${result.interfaceId}"/>','<c:out value="${result.masterId}"/>','<c:out value="${result.typeDivCd}"/>','<c:out value="${result.dtlsTypeDivCd}"/>')";>원문보기</button>
</c:if>
@ -130,7 +128,14 @@ function goList(){
</c:if>
<button type="button" class="share" onclick="gfn_setSnsShare('<c:out value="${result.masterId}"/>');">공유</button>
</div>
<div class="con-2">
</div>
<div class="left">
<div class="img"><img src="<c:out value="${result.rprsThumbUrlWithDefaultBig}"/>" alt="<c:out value='${result.title}'/>"></div>
</div>
<div class="right">
<div class="data-info">
<div class="de-data">
<ul>
<li>

View File

@ -930,39 +930,42 @@ transform: rotate(45deg);}
.data.detail .inner {}
.data.detail .inner .row-top {width:100%;padding:45px 0px;display:inline-block;background: linear-gradient(to right, #485864, #6a7b8c);}
.data.detail .inner .row-top .center {width:1400px;margin:0 auto;}
.data.detail .inner .row-top .center .title-box {display:inline-block;position:relative;width:100%;}
.data.detail .inner .row-top .center .title-box .cla-info {margin-bottom:10px;}
.data.detail .inner .row-top .center .title-box .cla-info .con-1 {display: inline;}
.data.detail .inner .row-top .center .title-box .cla-info .con-1 span {background:#fff;border:2px solid #333;border-radius:50px;color:#333;padding:1px 10px 2px;font-size:12px;font-weight: 500;display: inline-block;}
.data.detail .inner .row-top .center .title-box .cla-info .con-1 span.online {color:#376795;border:2px solid #376795;}
.data.detail .inner .row-top .center .title-box .cla-info .con-1 span.loan {color:#b68946;border:2px solid #b68946;}
.data.detail .inner .row-top .center .title-box .cla-info .con-1 span.visit {color:#2b8b99;border:2px solid #2b8b99;}
.data.detail .inner .row-top .center .title-box .cla-info .con-2 {display: inline-block;padding:0px 0px 0px 10px;}
.data.detail .inner .row-top .center .title-box .cla-info .con-2 .code {font-size:16px;color:#fff;line-height: 26px;}
.data.detail .inner .row-top .center .title-box .tit-info {font-size:24px;color:#fff;font-weight: 500;margin-bottom:20px;/*max-height: 105px;*/width:100%;height:auto;padding-bottom:10px;overflow: hidden;border-bottom:1px solid #ddd;margin-bottom: 30px;}
.data.detail .inner .row-top .center .title-box .btn-info {display: inline-block;position:absolute;right:0px;top:0px;}
.data.detail .inner .row-top .center .title-box .btn-info button {background:#f5f5f5;width:auto;height:30px;line-height:28px;width:30px;border-radius: 3px;font-size:14px;color:#222;font-weight: 500;text-align: center;border:1px solid #ddd;}
.data.detail .inner .row-top .center .title-box .btn-info button.view {width:auto;padding:0px 26px;}
.data.detail .inner .row-top .center .title-box .btn-info button.ris {}
.data.detail .inner .row-top .center .title-box .btn-info button.favorit {text-indent: -99999px;background:url(/images/icon/icon-data-star.png) no-repeat center #f5f5f5;}
/*.data.detail .inner .row-top .center .right .con-1 button.favorit.on {background:url(/images/icon/icon-data-star-on.png) no-repeat center #f5f5f5;}*/
.data.detail .inner .row-top .center .title-box .btn-info button.share {text-indent: -99999px;background:url(/images/icon/icon-data-share.png) no-repeat center #f5f5f5;}
.data.detail .inner .row-top .center .title-box .btn-info button.original {width:200px;display:none;}
.data.detail .inner .row-top .center .left {float:left;width:490px;margin-right:60px;text-align:left;}
.data.detail .inner .row-top .center .right {float:left;width:850px;text-align: left;}
.data.detail .inner .row-top .center .left .cla {margin-bottom:10px;}
.data.detail .inner .row-top .center .left .cla .con-1 {display: inline;}
.data.detail .inner .row-top .center .left .cla .con-1 span {background:#fff;border:2px solid #333;border-radius:50px;color:#333;padding:1px 10px 2px;font-size:12px;font-weight: 500;display: inline-block;}
.data.detail .inner .row-top .center .left .cla .con-1 span.online {color:#376795;border:2px solid #376795;}
.data.detail .inner .row-top .center .left .cla .con-1 span.loan {color:#b68946;border:2px solid #b68946;}
.data.detail .inner .row-top .center .left .cla .con-1 span.visit {color:#2b8b99;border:2px solid #2b8b99;}
.data.detail .inner .row-top .center .left .cla .con-2 {display: inline-block;padding:0px 0px 0px 10px;}
.data.detail .inner .row-top .center .left .cla .con-2 .code {font-size:16px;color:#fff;line-height: 26px;}
.data.detail .inner .row-top .center .left .tit {font-size:24px;color:#fff;font-weight: 500;margin-bottom:20px;/*max-height: 105px;*/height:auto;overflow: hidden;}
.data.detail .inner .row-top .center .left .img {background:#fff;display: inline-block;width:100%;height:445px;display: flex;align-items: center;justify-content: center;}
.data.detail .inner .row-top .center .right .con-1 {display: inline-block;width:100%;height:100px;border-bottom:1px solid #ddd;text-align: right;margin-bottom: 30px;}
.data.detail .inner .row-top .center .right .con-1 button {background:#f5f5f5;width:auto;height:30px;line-height:28px;width:30px;border-radius: 3px;font-size:14px;color:#222;font-weight: 500;text-align: center;border:1px solid #ddd;margin-top:55px;}
.data.detail .inner .row-top .center .right .con-1 button.view {width:auto;padding:0px 26px;}
.data.detail .inner .row-top .center .right .con-1 button.ris {}
.data.detail .inner .row-top .center .right .con-1 button.favorit {text-indent: -99999px;background:url(/images/icon/icon-data-star.png) no-repeat center #f5f5f5;}
/*.data.detail .inner .row-top .center .right .con-1 button.favorit.on {background:url(/images/icon/icon-data-star-on.png) no-repeat center #f5f5f5;}*/
.data.detail .inner .row-top .center .right .con-1 button.share {text-indent: -99999px;background:url(/images/icon/icon-data-share.png) no-repeat center #f5f5f5;}
.data.detail .inner .row-top .center .right .con-1 button.original {width:200px;display:none;}
.data.detail .inner .row-top .center .right .con-2 {}
.data.detail .inner .row-top .center .right .con-2 .de-data {}
.data.detail .inner .row-top .center .right .con-2 .de-data ul {width: 100%;/*display: flex;flex-direction: column;*/}
.data.detail .inner .row-top .center .right .con-2 .de-data ul li {float:left;width:50%;margin:0px 0px 12px;}
.data.detail .inner .row-top .center .right .con-2 .de-data ul.full-width li {width:100%;}
.data.detail .inner .row-top .center .right .con-2 .de-data ul li span {font-size:14px;color:#fff;}
.data.detail .inner .row-top .center .right .con-2 .de-data ul li span:nth-of-type(1) {font-weight: 400;display:inline-block;margin-right:20px;min-width:70px;}
.data.detail .inner .row-top .center .right .con-2 .de-data ul li span:nth-of-type(2) {font-weight: 200;}
.data.detail .inner .row-top .center .right .con-2 .b-btn {margin:30px 0px 25px;display:inline-block;width:100%;}
.data.detail .inner .row-top .center .right .con-2 .b-btn button {font-size:14px;font-weight: 500;}
.data.detail .inner .row-top .center .right .con-2 .keyword {}
.data.detail .inner .row-top .center .right .con-2 .keyword span {background: #f4f4f4;color:#333;display:inline-block;padding:1px 10px 2px;border-radius: 50px;font-size:12px;margin-bottom:5px;}
.data.detail .inner .row-top .center .right .con-2 .keyword span.first {background: #b68948;color:#fff;margin-right:10px;padding:1px 16px 2px;}
.data.detail .inner .row-top .center .right .data-info {}
.data.detail .inner .row-top .center .right .data-info .de-data {}
.data.detail .inner .row-top .center .right .data-info .de-data ul {width: 100%;/*display: flex;flex-direction: column;*/}
.data.detail .inner .row-top .center .right .data-info .de-data ul li {float:left;width:50%;margin:0px 0px 12px;}
.data.detail .inner .row-top .center .right .data-info .de-data ul.full-width li {width:100%;}
.data.detail .inner .row-top .center .right .data-info .de-data ul li span {font-size:14px;color:#fff;}
.data.detail .inner .row-top .center .right .data-info .de-data ul li span:nth-of-type(1) {font-weight: 400;display:inline-block;margin-right:20px;min-width:70px;}
.data.detail .inner .row-top .center .right .data-info .de-data ul li span:nth-of-type(2) {font-weight: 200;}
.data.detail .inner .row-top .center .right .data-info .b-btn {margin:30px 0px 25px;display:inline-block;width:100%;}
.data.detail .inner .row-top .center .right .data-info .b-btn button {font-size:14px;font-weight: 500;}
.data.detail .inner .row-top .center .right .data-info .keyword {}
.data.detail .inner .row-top .center .right .data-info .keyword span {background: #f4f4f4;color:#333;display:inline-block;padding:1px 10px 2px;border-radius: 50px;font-size:12px;margin-bottom:5px;}
.data.detail .inner .row-top .center .right .data-info .keyword span.first {background: #b68948;color:#fff;margin-right:10px;padding:1px 16px 2px;}
.data.detail .inner .row-bottom .con-1 {display:inline-block;width:100%;border:1px solid #ddd;margin:50px 0px 100px;}
.data.detail .inner .row-bottom .con-1 .list-box {display:inline-block;width:100%;padding:25px 0px;}
.data.detail .inner .row-bottom .con-1 .list-box .list {float:left;width:24.9%;border-right:1px solid #ddd;text-align: center;}

View File

@ -158,7 +158,7 @@ footer .family_site {right:10px;}
.article-side {width:22%;margin-right:2%;}
.culture-box {width:74%;}
.data.detail .inner .row-top .center .left {width:40%;}
.data.detail .inner .row-top .center .left .img img {}
.data.detail .inner .row-top .center .left .img img {width:100%;max-height: 430px;max-width: 300px;}
.data.detail .inner .row-top .center .right {width:54%;}
.greeting .inner .row-bottom .greeting-box .gree {width:90%;padding:70px 5%;}
.guide .inner .row-bottom { padding: 0px 0px 80px; box-sizing: border-box; }
@ -719,6 +719,20 @@ footer .family_site {right:10px;}
/* 소장 자료 상세 */
.data.detail .inner .row-top .center { width: 100%; display: flex; flex-direction: column; padding: 0 16px; box-sizing: border-box; }
.data.detail .inner .row-top .center .title-box .cla-info { position: relative; }
.data.detail .inner .row-top .center .title-box .cla-info .con-1 { width: 100%; display: block; }
.data.detail .inner .row-top .center .title-box .cla-info .con-2 { position: relative; top: 5px; padding: 0; }
.data.detail .inner .row-top .center .title-box .tit-info { font-size: 22px; margin-bottom: 30px;overflow:hidden; }
.data.detail .inner .row-top .center .title-box .btn-info {position:relative;}
.data.detail .inner .row-top .center .title-box .btn-info { display: flex; height: auto; border: none; }
.data.detail .inner .row-top .center .title-box .btn-info button { margin-bottom:10px;width: 36px; height: 36px; }
.data.detail .inner .row-top .center .title-box .btn-info button.view { flex: 1; }
.data.detail .inner .row-top .center .title-box .btn-info button.ris { display: none; }
.data.detail .inner .row-top .center .title-box .btn-info button.favorit { margin: 0px 10px; }
.data.detail .inner .row-top .center .title-box .btn-info button.original {width:200px;display:inline-block;}
.data.detail .inner .row-top .center .left,
.data.detail .inner .row-top .center .right,
.data.detail .inner .row-bottom .con-4 .top h3,
@ -726,22 +740,12 @@ footer .family_site {right:10px;}
.data.detail .inner .row-top .center .left .img img { width: 100%; }
.data.detail .inner .row-top .center .left .img {background:#fff;text-align:center;width:80%;padding:5% 10%;}
.data.detail .inner .row-bottom { padding: 0; }
.data.detail .inner .row-top .center .left .cla { position: relative; }
.data.detail .inner .row-top .center .left .cla .con-1 { width: 100%; display: block; }
.data.detail .inner .row-top .center .left .cla .con-2 { position: relative; top: 5px; padding: 0; }
.data.detail .inner .row-top .center .left .tit { font-size: 22px; margin-bottom: 30px;overflow:hidden; }
.data.detail .inner .row-top .center .right .con-1 { display: flex; height: auto; border: none; }
.data.detail .inner .row-top .center .right .con-1 button { margin-top: 14px; width: 36px; height: 36px; }
.data.detail .inner .row-top .center .right .con-1 button.view { flex: 1; }
.data.detail .inner .row-top .center .right .con-1 button.ris { display: none; }
.data.detail .inner .row-top .center .right .con-1 button.favorit { margin: 14px 10px 0; }
.data.detail .inner .row-top .center .right .con-1 button.original {width:200px;display:inline-block;}
.data.detail .inner .row-top .center .right .con-2 .de-data { flex-direction: column; }
.data.detail .inner .row-top .center .right .con-2 .de-data ul { width: 100%; display: flex; flex-direction: column; }
.data.detail .inner .row-top .center .right .con-2 .de-data ul li { width: 100%; }
.data.detail .inner .row-top .center .right .con-2 .b-btn button { width: 100%; margin-bottom: 6px; }
.data.detail .inner .row-top .center .right .con-2 .keyword span.first,
.data.detail .inner .row-top .center .right .con-2 .keyword span { padding: 5px 14px 5px; border-radius: 30px; }
.data.detail .inner .row-top .center .right .data-info .de-data { flex-direction: column;margin-top:20px;}
.data.detail .inner .row-top .center .right .data-info .de-data ul { width: 100%; display: flex; flex-direction: column; }
.data.detail .inner .row-top .center .right .data-info .de-data ul li { width: 100%; }
.data.detail .inner .row-top .center .right .data-info .b-btn button { width: 100%; margin-bottom: 6px; }
.data.detail .inner .row-top .center .right .data-info .keyword span.first,
.data.detail .inner .row-top .center .right .data-info .keyword span { padding: 5px 14px 5px; border-radius: 30px; }
.data.detail .inner .row-top .center .left .img img {width:100%;max-height: 430px;max-width: 300px;}
.data.detail .inner .row-bottom.contents { padding: 0 16px; }
.data.detail .inner .row-bottom .con-1 { margin-bottom: 30px; }