somang4819/itsm_ysm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home.jsp 수정

Browse Source
This commit is contained in:
com02 2021-11-29 14:22:43 +09:00
parent e0303c9a00
commit d01f1f0864
3 changed files with 55 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/main/webapp/WEB-INF/jsp/nlib/cmm/home.jsp
View File

@ -423,9 +423,20 @@ function fn_listPops(typeDivCd) {
var windowWidth = $(window).width();
var _slidesPerView = 5;
var _slidesPerViewpopula = 4;
var _slidesPerViewOnline = 7;
var _spaceBetween = 30;
if (windowWidth < 1400) {
_slidesPerView = 3;
_slidesPerViewpopula = 2;
_slidesPerViewOnline = 3;
_spaceBetween = 20;
}
if (windowWidth < 480) {
_slidesPerView = 1;
_slidesPerViewpopula = 1;
_slidesPerViewOnline = 1.5;
_spaceBetween = 20;
}
@ -451,19 +462,16 @@ function fn_listPops(typeDivCd) {
*/
});
var _slidesPerViewOnline = 7;
if (windowWidth < 480) {
_slidesPerViewOnline = 1.5;
/* 유형별 인기자료 */
var swiper = new Swiper(".popularSwiper", {
slidesPerView : 1,
spaceBetween : _spaceBetween,
centeredSlides : true,
pagination : {
el : ".swiper-pagination",
},
});
}
/* 인기자료 */
var swiper = new Swiper(".popularSwiper", {
loop: true,
slidesPerView : _slidesPerViewpopula,
spaceBetween : _spaceBetween,
centeredSlides : false,
pagination : {
el : ".swiper-pagination",
},
});
/* 온라인 자료관 */
var swiper = new Swiper(".onlineSwiper", {

2
src/main/webapp/css/default.css
View File

@ -550,7 +550,7 @@ transform: rotate(45deg);
.join.connect .inner .row-bottom .join-box .success .text p:nth-of-type(2) button {background:#0b2c57;border:1px solid #ddd;border-radius:3px;width:100%;display:inline-block;font-size:15px;font-weight:600;height:47px;line-height:44px;}
.join.connect .inner .row-bottom .join-box .success .text p:nth-of-type(2) button span {font-size:16px;color:#fff;font-weight: 500;}
.join.connect .inner .row-bottom .join-box .success .text p:nth-of-type(2) button span:nth-of-type(1) {border-right:1px solid #777;margin-right:10px;padding-right:10px;}
.join.connect .inner .row-bottom .join-box .success .box {background: #f0f0f0;display: inline-block;width:30%;padding:3% 35%;border-radius: 3px;border:1px solid #ddd;}
.join.connect .inner .row-bottom .join-box .success .box {background: #f0f0f0;display: inline-block;width:100%;padding:3% 0%;border-radius: 3px;border:1px solid #ddd;display: flex;align-items: center;justify-content: center;}
.join.connect .inner .row-bottom .join-box .success .box::before {background: #f0f0f0;border-top:1px solid #ddd;border-left:1px solid #ddd;}
.join.connect .inner .row-bottom .join-box .success .box .icon {float:left;margin-right:10px;}
.join-box .success .box .icon.kakao {background: #ffeb00;border-radius:50%;}

39
src/main/webapp/css/media.css
View File

@ -116,24 +116,29 @@ a.pop-logo img { margin-right: 10px; }
.sec1 .inner .banner p > span { display: block; }
.sec1 .inner .banner p:nth-of-type(2) {top:260px;}
.sec1 .inner .color-box {width:100vw;padding:0px 50px;box-sizing: border-box;top:-70px;}
.sec1 .inner .color-box .list {height:180px;}
.sec1 .inner .color-box .list {height:150px;}
.sec1 .inner .color-box .list .title {font-size:18px;margin:20px 0px 10px;}
.contents {width:96%;padding:0% 2%;}
.sec2 {padding:0% 2% 100px;}
.sec2 .keyword-box {width:100%;}
.sec3 {padding:100px 2% 100px;}
.sec3 .pickSwiper .swiper-slide .list-box .images a img {width:100%;}
.sec5 {padding:100px 2% 100px;}
.sec5 .inner .tab_content {width:96%;padding:30px 1.9%;}
.sec5 .inner {width:100%;}
.sec6 {padding:100px 2% 100px;}
.sec6 .inner .more-btn {right: 0%;}
.sec6 .onlineSwiper .swiper-slide {background:none;box-shadow:0 0 0;}
.sec6 .onlineSwiper::before {width:7%;box-shadow:0 0 0;}
.sec6 .onlineSwiper::after {right:-1px;width:7%;box-shadow:0 0 0;}
.sec6 .swiper-button-next, .swiper-rtl .swiper-button-prev {right:15px;}
.sec6 .swiper-button-prev, .swiper-rtl .swiper-button-next {left:15px;}
.sec7 {vertical-align:top;}
.sec7 {vertical-align:top;width:96%;padding:100px 2% 100px;}
.sec7 .inner {width:100%;}
.sec7 .inner .Fl .con .list .text {width:53%;}
.sec7 .inner .qna .con .list .text {width:40%;}
.sec7 .inner .Fl .con .list .box {margin-right:2%;}
footer {width:96%;padding: 40px 2% 60px;}
footer .inner {width:100%;}
footer .family_site {right:10px;}
.map .inner .info-box {width: 96%;padding:0% 2%;}
@ -165,12 +170,17 @@ footer .family_site {right:10px;}
.guide .inner .row-bottom .guide-box .banner .right .list-box .li .text p:nth-of-type(1) { height: 50px; display: flex; align-items: center; font-size: 16px; margin-bottom: 16px; }
.guide .inner .row-bottom .guide-box .banner .right .list-box .li .text p:nth-of-type(2) { font-size: 12px; margin-left: -60px; }
.myinfo .inner .row-bottom .myinfo-box .top-info {width:96%;padding:0% 2%;}
.myinfo .inner .row-bottom .myinfo-box .top-info {width:96%;padding:30px 2%;}
.myinfo .inner .row-bottom .myinfo-box .top-info .left {padding-right:2%;}
.myinfo .inner .row-bottom .myinfo-box .top-info .left {width:23%;}
.myinfo .inner .row-bottom .myinfo-box .top-info .right {width:70%;}
.myinfo .inner .row-bottom .myinfo-box .top-info .right .top-box > .con-1 .list-box > div {width:18.8%;}
.myinfo .inner .row-bottom .myinfo-box .top-info .right .top-box > .con-2 .list-box > div {width:23.8%;}
.cart .inner .tabs_item .list-cart-wrap .list-cart div.list > div.t-data > div.img {margin-right:0;}
.myinfo .contents .loan-history .list-box .list > div.tit {width:20%;}
.myinfo .contents .loan-history .list-box .list > div.con {width:70%;}
.myinfo .contents .visit-history .list-box .list > div.tit {width:20%;}
.myinfo .contents .visit-history .list-box .list > div.con {width:70%;}
.cart .inner .tabs_item .list-cart-wrap .list-cart div.list > div.t-data > div.img {margin-right:0;padding:0px 20px;}
.privacy .top-bg {width:100%;}
.privacy .con {width:100%;}
.service .top-bg {width:100%;}
@ -195,7 +205,24 @@ footer .family_site {right:10px;}
.qna .title .right {width:50%;}
.qna .list-table-wrap li .t-writer {width:25%;}
.qna .list-table-wrap li .t-date {width:10%;}
.qna .list-table-wrap li .t-tit {width:30%;}
.greeting .inner .row-bottom .greeting-box .gree .left {width:100%;margin:0;text-align:left;}
.greeting .inner .row-bottom .greeting-box .gree .right {width:100%;}
.qna-write-table .wt-title {width:84%;}
.myinfo .inner .row-bottom .myinfo-box .top-info .left {padding-right:2%;}
.cart .inner .loan-confirm .tabs_item .visit-select-box .select-box > div {display:inline;}
.interested-data .inner .data-box .list-data-wrap .list-data div.list > div.t-data > div.img {padding:0% 10px;}
.interested-data .inner .data-box .list-data-wrap .list-data div.list > div.t-chk {width:12%;}
.interested-data .inner .data-box .list-data-wrap .list-data div.list > div.t-chk {line-height:12px !important;}
.loan-data .inner .tabs_item .list-wrap .list-data div.list > div.n-cultural {width:25%;}
.loan-data .inner .tabs_item .list-wrap .list-data div.list > div.n-data {width:35%;}
.visit-data .inner .tabs_item .list-wrap .list-data div.list > div.n-cultural {width:25%;}
.visit-data .inner .tabs_item .list-wrap .list-data div.list > div.n-data {width:32%;}
.visit-data .inner .tabs_item .list-wrap .list-data div.list > div.n-state button {margin:0;float:none;text-align:center;}
.join .inner .row-bottom {width:96%;padding:0% 2%;}
.cart .inner .tabs_item .list-cart-wrap.confirm .list-cart div.list > div.t-visit {margin-top:0;}
.data.detail .inner .row-top .center .right .con-2 .b-btn button {margin-right:0;}
.cart .inner .tabs_item .list-cart-wrap .list-cart div.list > div.t-visit.long {font-size:13px;padding:5px 0px;}
}
/* 모바일 가로, 테블릿 세로 (해상도 ~ 479px)*/
@ -323,7 +350,7 @@ footer .family_site {right:10px;}
.sec7 .inner .Fl .more a span img {width:22px;}
.sec7 .inner .Fl .more a span > span {display:none;}
footer { padding: 20px 0px 16px; position: relative; height: auto; box-sizing: border-box; }
footer { width:100%;padding: 20px 0px 16px; position: relative; height: auto; box-sizing: border-box; }
footer .inner { width: 100%; box-sizing: border-box; }
footer .row-top { display: flex; flex-direction: column; align-items: center; }
footer .row-top .footer-logo img { width: 140px; }