최정임
05-02
250502 최정임 메인 반응형 css
@f88a1e3b3a0545a638d84eac6bf3a66c0e570646
--- client/resources/css/user/layout.css
+++ client/resources/css/user/layout.css
... | ... | @@ -5,14 +5,20 @@ |
| 5 | 5 |
z-index: 20; |
| 6 | 6 |
background-color: #fff; |
| 7 | 7 |
} |
| 8 |
- |
|
| 8 |
+.wrapper{position: relative;}
|
|
| 9 | 9 |
.container {
|
| 10 |
- margin: 120px 0; |
|
| 11 |
- position: relative; |
|
| 10 |
+ padding-top: 120px; |
|
| 11 |
+ |
|
| 12 | 12 |
} |
| 13 |
- |
|
| 13 |
+@media screen and (max-width: 1220px) {
|
|
| 14 |
+ |
|
| 15 |
+ .header-container {
|
|
| 16 |
+ &>.nav-wrap{display: none !important;}
|
|
| 17 |
+ } |
|
| 18 |
+} |
|
| 14 | 19 |
.header-container {
|
| 15 | 20 |
width: 1500px; |
| 21 |
+ margin: 0 auto; |
|
| 16 | 22 |
display: flex; |
| 17 | 23 |
align-items: center; |
| 18 | 24 |
justify-content: space-between; |
... | ... | @@ -130,7 +136,7 @@ |
| 130 | 136 |
} |
| 131 | 137 |
} |
| 132 | 138 |
@media screen and (max-width: 1500px) {
|
| 133 |
- .header-container{width: auto; }
|
|
| 139 |
+ .header-container{width: auto; }
|
|
| 134 | 140 |
} |
| 135 | 141 |
footer {
|
| 136 | 142 |
width: 100%; |
... | ... | @@ -170,7 +176,7 @@ |
| 170 | 176 |
|
| 171 | 177 |
.scroll-up {
|
| 172 | 178 |
position: fixed; |
| 173 |
- right: 210px; |
|
| 179 |
+ right: 0px; |
|
| 174 | 180 |
bottom: 101px; |
| 175 | 181 |
z-index: 555; |
| 176 | 182 |
}(파일 끝에 줄바꿈 문자 없음) |
--- client/resources/css/user/main.css
+++ client/resources/css/user/main.css
... | ... | @@ -12,11 +12,51 @@ |
| 12 | 12 |
z-index: 9999; |
| 13 | 13 |
} |
| 14 | 14 |
|
| 15 |
+@media screen and (max-width: 1220px) {
|
|
| 16 |
+ .pagination_container {bottom: 30px !important;}
|
|
| 17 |
+ .all-menu {
|
|
| 18 |
+ height: 66rem !important; |
|
| 19 |
+ |
|
| 20 |
+ .nav-wrap {}
|
|
| 21 |
+ |
|
| 22 |
+ nav {
|
|
| 23 |
+ left: 0 !important; |
|
| 24 |
+ |
|
| 25 |
+ ul {
|
|
| 26 |
+ display: grid !important; |
|
| 27 |
+ grid-template-columns: 1fr 1fr; |
|
| 28 |
+ width: 67% !important; |
|
| 29 |
+ |
|
| 30 |
+ li {
|
|
| 31 |
+ width: 100% !important; |
|
| 32 |
+ } |
|
| 33 |
+ } |
|
| 34 |
+ } |
|
| 35 |
+ } |
|
| 36 |
+ |
|
| 37 |
+ .current-status {
|
|
| 38 |
+ & .board {
|
|
| 39 |
+ |
|
| 40 |
+ & li {
|
|
| 41 |
+ .count {
|
|
| 42 |
+ width: auto !important; |
|
| 43 |
+ } |
|
| 44 |
+ } |
|
| 45 |
+ } |
|
| 46 |
+ } |
|
| 47 |
+ .new-update {
|
|
| 48 |
+ & .info {
|
|
| 49 |
+ p {
|
|
| 50 |
+ width: min-content !important; |
|
| 51 |
+ }}} |
|
| 52 |
+ /* .new-pic, .new-video, .new-update {flex-direction: column; gap: 10px;} */
|
|
| 53 |
+} |
|
| 54 |
+ |
|
| 15 | 55 |
.all-menu {
|
| 16 | 56 |
position: absolute; |
| 17 | 57 |
top: 0; |
| 18 | 58 |
left: 0; |
| 19 |
- background-image: url(../../images/allmenu-bg.png); |
|
| 59 |
+ |
|
| 20 | 60 |
background-repeat: no-repeat; |
| 21 | 61 |
background-color: #fff; |
| 22 | 62 |
width: 100%; |
... | ... | @@ -26,32 +66,44 @@ |
| 26 | 66 |
position: absolute; |
| 27 | 67 |
top: 40px; |
| 28 | 68 |
right: 38px; |
| 69 |
+ z-index: 1; |
|
| 29 | 70 |
|
| 30 | 71 |
} |
| 31 | 72 |
|
| 73 |
+ .nav-wrap {
|
|
| 74 |
+ .title {
|
|
| 75 |
+ width: 174px; |
|
| 76 |
+ } |
|
| 77 |
+ } |
|
| 78 |
+ |
|
| 32 | 79 |
nav {
|
| 33 |
- margin: 80px 210px; |
|
| 80 |
+ position: absolute; |
|
| 81 |
+ left: 12%; |
|
| 82 |
+ width: 100%; |
|
| 83 |
+ justify-content: center; |
|
| 84 |
+ padding-top: 90px; |
|
| 85 |
+ |
|
| 34 | 86 |
&>ul {
|
| 35 | 87 |
margin-left: 60px; |
| 36 | 88 |
display: flex; |
| 37 | 89 |
gap: 40px; |
| 90 |
+ width: 100%; |
|
| 38 | 91 |
} |
| 39 | 92 |
|
| 40 | 93 |
&>ul>li {
|
| 41 |
- |
|
| 94 |
+ width: 18%; |
|
| 42 | 95 |
z-index: 2; |
| 43 |
- width: 270px; |
|
| 44 | 96 |
height: 237px; |
| 45 | 97 |
padding: 0; |
| 46 | 98 |
border-radius: 30px; |
| 47 | 99 |
background-color: #fbf3f4; |
| 48 | 100 |
position: relative; |
| 101 |
+ min-width: 17rem; |
|
| 49 | 102 |
|
| 50 | 103 |
h6 {
|
| 51 | 104 |
font-size: 24px; |
| 52 | 105 |
text-align: center; |
| 53 | 106 |
line-height: 70px; |
| 54 |
- width: 270px; |
|
| 55 | 107 |
height: 70px; |
| 56 | 108 |
background-image: linear-gradient(#fff, #fff), |
| 57 | 109 |
linear-gradient(-45deg, #ca3e49, #3d355d); |
... | ... | @@ -60,12 +112,20 @@ |
| 60 | 112 |
border: 3px solid transparent; |
| 61 | 113 |
border-radius: 15px; |
| 62 | 114 |
font-family: "Pretendard-SB"; |
| 115 |
+ white-space: nowrap; |
|
| 116 |
+ /* 줄바꿈 금지 */ |
|
| 117 |
+ overflow: hidden; |
|
| 118 |
+ /* 넘치는 텍스트 숨김 */ |
|
| 119 |
+ text-overflow: ellipsis; |
|
| 120 |
+ |
|
| 121 |
+ |
|
| 63 | 122 |
} |
| 64 | 123 |
|
| 65 | 124 |
} |
| 66 | 125 |
} |
| 67 | 126 |
|
| 68 | 127 |
.submenu {
|
| 128 |
+ /* padding-top: 40px; */ |
|
| 69 | 129 |
padding: 40px 30px; |
| 70 | 130 |
|
| 71 | 131 |
|
... | ... | @@ -102,6 +162,17 @@ |
| 102 | 162 |
|
| 103 | 163 |
|
| 104 | 164 |
|
| 165 |
+} |
|
| 166 |
+ |
|
| 167 |
+.all-menu::before {
|
|
| 168 |
+ content: ''; |
|
| 169 |
+ display: block; |
|
| 170 |
+ position: absolute; |
|
| 171 |
+ bottom: 0; |
|
| 172 |
+ background-image: url(../../images/allmenu-bg.png); |
|
| 173 |
+ height: 420px; |
|
| 174 |
+ width: 100%; |
|
| 175 |
+ background-repeat: no-repeat; |
|
| 105 | 176 |
} |
| 106 | 177 |
|
| 107 | 178 |
.visual {
|
... | ... | @@ -176,7 +247,7 @@ |
| 176 | 247 |
|
| 177 | 248 |
.search-btn {
|
| 178 | 249 |
position: absolute; |
| 179 |
- right: 0; |
|
| 250 |
+ right: -1px; |
|
| 180 | 251 |
top: 0; |
| 181 | 252 |
} |
| 182 | 253 |
} |
... | ... | @@ -211,20 +282,25 @@ |
| 211 | 282 |
} |
| 212 | 283 |
|
| 213 | 284 |
.current-status {
|
| 214 |
- background-color: #f6f6f6; |
|
| 285 |
+ background: linear-gradient(45deg, rgba(50, 52, 94, 0.05), rgba(223, 63, 70, 0.05)); |
|
| 286 |
+ border-top-right-radius: 80px; |
|
| 287 |
+ border-bottom-left-radius: 80px; |
|
| 215 | 288 |
padding: 30px 0; |
| 216 | 289 |
|
| 217 | 290 |
.board {
|
| 218 | 291 |
position: relative; |
| 219 |
- padding: 49px 0px; |
|
| 292 |
+ |
|
| 220 | 293 |
background-color: #fff; |
| 221 | 294 |
border-radius: 50px; |
| 295 |
+ display: flex; |
|
| 296 |
+ justify-content: space-between; |
|
| 222 | 297 |
|
| 223 | 298 |
ul {
|
| 299 |
+ padding: 49px 0px; |
|
| 224 | 300 |
display: flex; |
| 225 |
- gap: 37px; |
|
| 226 |
- margin-right: 37px; |
|
| 227 |
- justify-content: end; |
|
| 301 |
+ margin: 0 37px; |
|
| 302 |
+ width: -webkit-fill-available; |
|
| 303 |
+ justify-content: space-between; |
|
| 228 | 304 |
} |
| 229 | 305 |
|
| 230 | 306 |
li {
|
... | ... | @@ -273,12 +349,9 @@ |
| 273 | 349 |
} |
| 274 | 350 |
|
| 275 | 351 |
.current-banner {
|
| 276 |
- background-image: url(../../images/direct-btn-bg.png); |
|
| 277 |
- background-repeat: no-repeat; |
|
| 278 |
- position: absolute; |
|
| 279 | 352 |
width: 375px; |
| 280 |
- height: 247px; |
|
| 281 |
- top: 0; |
|
| 353 |
+ background: linear-gradient(45deg, #32345e, #df3f46); |
|
| 354 |
+ border-radius: 50px; |
|
| 282 | 355 |
|
| 283 | 356 |
div {
|
| 284 | 357 |
position: absolute; |
... | ... | @@ -294,7 +367,17 @@ |
| 294 | 367 |
color: #fff; |
| 295 | 368 |
} |
| 296 | 369 |
} |
| 370 |
+ } |
|
| 297 | 371 |
|
| 372 |
+ .current-banner::before {
|
|
| 373 |
+ content: ''; |
|
| 374 |
+ background-image: url(../../images/direct-btn-bg.png); |
|
| 375 |
+ background-repeat: no-repeat; |
|
| 376 |
+ position: absolute; |
|
| 377 |
+ width: 246px; |
|
| 378 |
+ height: 152px; |
|
| 379 |
+ top: 101px; |
|
| 380 |
+ left: 67px; |
|
| 298 | 381 |
} |
| 299 | 382 |
} |
| 300 | 383 |
|
... | ... | @@ -347,7 +430,7 @@ |
| 347 | 430 |
} |
| 348 | 431 |
|
| 349 | 432 |
.box-wrap {
|
| 350 |
- width: 454px; |
|
| 433 |
+ width: 30%; |
|
| 351 | 434 |
height: 370px; |
| 352 | 435 |
|
| 353 | 436 |
.box {
|
... | ... | @@ -455,7 +538,7 @@ |
| 455 | 538 |
} |
| 456 | 539 |
|
| 457 | 540 |
.media-box {
|
| 458 |
- width: 420px; |
|
| 541 |
+ width: 50%; |
|
| 459 | 542 |
border: 1px solid #eeeeee; |
| 460 | 543 |
border-radius: 22px; |
| 461 | 544 |
cursor: pointer; |
... | ... | @@ -503,15 +586,23 @@ |
| 503 | 586 |
/* swiper */ |
| 504 | 587 |
|
| 505 | 588 |
.swiper {
|
| 506 |
- width: 1600px; |
|
| 589 |
+ width: inherit; |
|
| 507 | 590 |
height: 100%; |
| 508 | 591 |
} |
| 509 |
-@media screen and (max-width: 1500px) {
|
|
| 510 |
- .swiper{width: auto; }
|
|
| 511 |
- .swiper-wrapper{width: auto !important;}
|
|
| 512 |
- } |
|
| 592 |
+ |
|
| 593 |
+@media screen and (max-width: 1500px) {}
|
|
| 594 |
+ |
|
| 595 |
+@media screen and (max-width: 1220px) {
|
|
| 596 |
+ .search-wrap {
|
|
| 597 |
+ bottom: 80px !important; |
|
| 598 |
+ .search-area {
|
|
| 599 |
+ width: auto; |
|
| 600 |
+ } |
|
| 601 |
+ } |
|
| 602 |
+} |
|
| 603 |
+ |
|
| 513 | 604 |
.swiper-wrapper {
|
| 514 |
- width: 1500px !important; |
|
| 605 |
+ width: inherit !important; |
|
| 515 | 606 |
margin: 0 auto; |
| 516 | 607 |
} |
| 517 | 608 |
|
... | ... | @@ -528,6 +619,7 @@ |
| 528 | 619 |
|
| 529 | 620 |
.swiper-slide img {
|
| 530 | 621 |
display: block; |
| 622 |
+ width: inherit; |
|
| 531 | 623 |
height: 100%; |
| 532 | 624 |
object-fit: cover; |
| 533 | 625 |
} |
... | ... | @@ -593,6 +685,7 @@ |
| 593 | 685 |
color: #fff !important; |
| 594 | 686 |
font-family: "Pretendard-B"; |
| 595 | 687 |
margin-right: 10px; |
| 688 |
+ |
|
| 596 | 689 |
span {
|
| 597 | 690 |
font-size: 20px; |
| 598 | 691 |
color: #fff; |
... | ... | @@ -600,4 +693,13 @@ |
| 600 | 693 |
} |
| 601 | 694 |
} |
| 602 | 695 |
|
| 603 |
-.pagination_container{display: flex; align-items: center; gap: 25px; position: absolute; bottom: 107px; left: 50%; transform: translateX(-67%); z-index: 50;} (파일 끝에 줄바꿈 문자 없음)
|
|
| 696 |
+.pagination_container {
|
|
| 697 |
+ display: flex; |
|
| 698 |
+ align-items: center; |
|
| 699 |
+ gap: 25px; |
|
| 700 |
+ position: absolute; |
|
| 701 |
+ bottom: 107px; |
|
| 702 |
+ left: 50%; |
|
| 703 |
+ transform: translateX(-67%); |
|
| 704 |
+ z-index: 50; |
|
| 705 |
+}(파일 끝에 줄바꿈 문자 없음) |
--- client/resources/images/direct-btn-bg.png
+++ client/resources/images/direct-btn-bg.png
| Binary file is not shown |
--- client/views/App.vue
+++ client/views/App.vue
... | ... | @@ -1,12 +1,14 @@ |
| 1 | 1 |
<template> |
| 2 |
- <div class="wrapper"> |
|
| 2 |
+ <div class="wrapper "> |
|
| 3 | 3 |
<Header /> |
| 4 |
- <div class="container "><router-view /></div> |
|
| 5 |
- <Footer /> |
|
| 6 |
- <button class="scroll-up" @click="scrollToTop"> |
|
| 4 |
+ <div class="container "><router-view /> |
|
| 5 |
+ <button class="scroll-up" @click="scrollToTop"> |
|
| 7 | 6 |
<img src="../resources/images/icon/top.png" alt=""> |
| 8 | 7 |
</button> |
| 8 |
+ </div> |
|
| 9 |
+ |
|
| 9 | 10 |
</div> |
| 11 |
+ <Footer /> |
|
| 10 | 12 |
</template> |
| 11 | 13 |
<script> |
| 12 | 14 |
import Header from './layout/Header.vue'; |
--- client/views/index.html
+++ client/views/index.html
... | ... | @@ -18,6 +18,7 @@ |
| 18 | 18 |
</head> |
| 19 | 19 |
<body> |
| 20 | 20 |
<div id="root"></div> |
| 21 |
+ |
|
| 21 | 22 |
<script src="../client/build/bundle.js"></script> |
| 22 | 23 |
</body> |
| 23 | 24 |
</html>(파일 끝에 줄바꿈 문자 없음) |
--- client/views/layout/Header.vue
+++ client/views/layout/Header.vue
... | ... | @@ -1,6 +1,6 @@ |
| 1 | 1 |
<template> |
| 2 | 2 |
<header> |
| 3 |
- <div class="header-container w1500"> |
|
| 3 |
+ <div class="header-container"> |
|
| 4 | 4 |
<div class="logo-wrap"> |
| 5 | 5 |
<router-link :to="{ path: '/' }" class="logo"><img :src="logo" alt=""></router-link>
|
| 6 | 6 |
</div> |
... | ... | @@ -54,7 +54,7 @@ |
| 54 | 54 |
<button @click="closeMenu" class="closebtn">✕</button> |
| 55 | 55 |
<div class="nav-wrap"> |
| 56 | 56 |
<nav class="flex"> |
| 57 |
- <div><img :src="title" alt=""></div> |
|
| 57 |
+ <div class="title"><img :src="title" alt=""></div> |
|
| 58 | 58 |
<ul> |
| 59 | 59 |
<li> |
| 60 | 60 |
<h6>기록물</h6> |
--- client/views/pages/main/Main.vue
+++ client/views/pages/main/Main.vue
... | ... | @@ -1,5 +1,5 @@ |
| 1 | 1 |
<template> |
| 2 |
- <div class="visual mb-50"> |
|
| 2 |
+ <div class="visual mb-50 w1500"> |
|
| 3 | 3 |
<div class="swiper mySwiper swiper-container" ref="swiperContainer"> |
| 4 | 4 |
<div class="swiper-wrapper"> |
| 5 | 5 |
<div class="swiper-slide" v-for="(item, index) in slides" :key="index"> |
... | ... | @@ -46,8 +46,12 @@ |
| 46 | 46 |
</div> |
| 47 | 47 |
</div> |
| 48 | 48 |
<div class="current-status mb-60"> |
| 49 |
- <div class="board w1500"> |
|
| 49 |
+ <div class="board w1500"> |
|
| 50 |
+ <div class="current-banner"> |
|
| 51 |
+ <div><span>기록물 현황</span></div> |
|
| 52 |
+ </div> |
|
| 50 | 53 |
<ul> |
| 54 |
+ |
|
| 51 | 55 |
<template v-for="(item, idx) of icons" :key="idx"> |
| 52 | 56 |
<li @click="fnMoveTo(item.routeName)"> |
| 53 | 57 |
<div class="labeling"><img :src="item.url" :alt="item.name + '아이콘'"><span>{{ item.name }}</span></div>
|
... | ... | @@ -56,9 +60,7 @@ |
| 56 | 60 |
<li class="line" v-if="idx < icons.length - 1"></li> |
| 57 | 61 |
</template> |
| 58 | 62 |
</ul> |
| 59 |
- <div class="current-banner"> |
|
| 60 |
- <div><span>기록물 현황</span></div> |
|
| 61 |
- </div> |
|
| 63 |
+ |
|
| 62 | 64 |
</div> |
| 63 | 65 |
</div> |
| 64 | 66 |
<div class="new-update w1500 mb-50"> |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?