
--- client/resources/css/common/common.css
+++ client/resources/css/common/common.css
... | ... | @@ -52,8 +52,11 @@ |
52 | 52 |
.mt-5{margin-top: 5px;} |
53 | 53 |
|
54 | 54 |
.mb-10{margin-bottom: 10px;} |
55 |
+.mb-15{margin-bottom: 15px;} |
|
56 |
+.mb-20{margin-bottom: 20px;} |
|
55 | 57 |
.mb-25{margin-bottom: 25px;} |
56 | 58 |
.mb-30{margin-bottom: 30px;} |
59 |
+.mb-40{margin-bottom: 40px;} |
|
57 | 60 |
.mb-50{margin-bottom: 50px;} |
58 | 61 |
.mb-60{margin-bottom: 60px;} |
59 | 62 |
.mb-110{margin-bottom: 110px;} |
--- client/resources/css/user/sub.css
+++ client/resources/css/user/sub.css
... | ... | @@ -26,6 +26,16 @@ |
26 | 26 |
position: absolute; |
27 | 27 |
} |
28 | 28 |
} |
29 |
+ .gopage{ |
|
30 |
+ font-family: "Pretendard-L"; |
|
31 |
+ font-size: 17px; |
|
32 |
+ text-align: right; |
|
33 |
+ |
|
34 |
+ } |
|
35 |
+ .gopage::after{ |
|
36 |
+ content: '\2192'; |
|
37 |
+ font-size: 18px; |
|
38 |
+ } |
|
29 | 39 |
} |
30 | 40 |
|
31 | 41 |
.sub-title-area { |
... | ... | @@ -161,6 +171,21 @@ |
161 | 171 |
|
162 | 172 |
/* 통합검색 */ |
163 | 173 |
.search-form { |
174 |
+ dl{ |
|
175 |
+ padding: 35px 75px; |
|
176 |
+ dd{ |
|
177 |
+ display: flex; |
|
178 |
+ align-items: center; |
|
179 |
+ p { |
|
180 |
+ font-size: 18px; |
|
181 |
+ font-family: "Pretendard-SB"; |
|
182 |
+ width: 180px; |
|
183 |
+ } |
|
184 |
+ } |
|
185 |
+ .mark{width: fit-content; margin: 0 11px;} |
|
186 |
+ |
|
187 |
+ } |
|
188 |
+ |
|
164 | 189 |
background-image: linear-gradient(#fff, #fff), |
165 | 190 |
linear-gradient(-45deg, #ca3e49, #3f355c); |
166 | 191 |
background-origin: border-box; |
... | ... | @@ -168,11 +193,58 @@ |
168 | 193 |
border: 3px solid transparent; |
169 | 194 |
border-radius: 32px; |
170 | 195 |
|
171 |
- label { |
|
172 |
- font-size: 18px; |
|
173 |
- font-family: "Pretendard-SB"; |
|
196 |
+ |
|
197 |
+ .btn-group{ |
|
198 |
+ display: flex; |
|
199 |
+ justify-content: center; |
|
200 |
+ button{ |
|
201 |
+ display: flex; |
|
202 |
+ align-items: center; |
|
203 |
+ justify-content: center; |
|
204 |
+ gap: 10px; |
|
205 |
+ width: 140px; |
|
206 |
+ font-family: "Pretendard-B"; |
|
207 |
+ font-size: 16px; |
|
208 |
+ border-radius: 30px; |
|
209 |
+ &.reset{ |
|
210 |
+ border: 1px solid #ccc; |
|
211 |
+ } |
|
212 |
+ &.search{ |
|
213 |
+ background: linear-gradient(132deg, #3e355c, #763954); |
|
214 |
+ p{ |
|
215 |
+ color: #fff; |
|
216 |
+ } |
|
217 |
+ } |
|
218 |
+ } |
|
174 | 219 |
} |
220 |
+ ul{display: flex; gap: 15px;} |
|
221 |
+ li{display: flex; align-items: center; width: 125px; gap: 12px;} |
|
222 |
+ |
|
175 | 223 |
|
224 |
+ input[type="text"]{ |
|
225 |
+ background-color: #f6f6f6; |
|
226 |
+ width: 84%; |
|
227 |
+ border: 0; |
|
228 |
+ } |
|
229 |
+ input[type="date"]{ |
|
230 |
+ position: relative; |
|
231 |
+ width: 158px; |
|
232 |
+ border-radius: 8px; |
|
233 |
+ background: url(../../images/icon/calendar.png) no-repeat right 10px center / |
|
234 |
+ auto; |
|
235 |
+ } |
|
236 |
+ input[type="date"]::placeholder{color: #fff;;} |
|
237 |
+ input[type='date']::-webkit-calendar-picker-indicator { |
|
238 |
+ position: absolute; |
|
239 |
+ left: 0; |
|
240 |
+ top: 0; |
|
241 |
+ width: 100%; |
|
242 |
+ height: 100%; |
|
243 |
+ background: transparent; |
|
244 |
+ color: transparent; |
|
245 |
+ cursor: pointer; |
|
246 |
+ } |
|
247 |
+ |
|
176 | 248 |
input[type="checkbox"] { |
177 | 249 |
position: relative; |
178 | 250 |
width: 22px; |
... | ... | @@ -209,5 +281,113 @@ |
209 | 281 |
width: 15px; |
210 | 282 |
height: 11px; |
211 | 283 |
} |
284 |
+ input[type="checkbox"]:checked + label { |
|
285 |
+ color: rgba(0, 0, 0, 0.12); /* Change the label color when checkbox is checked */ |
|
286 |
+ } |
|
287 |
+ |
|
288 |
+ label{ |
|
289 |
+ font-size: 17px; |
|
290 |
+ font-family: "Pretendard-L"; |
|
291 |
+ } |
|
292 |
+ |
|
293 |
+/* 기본스타일 제거, 버튼 모양 재설정 */ |
|
294 |
+input[type='radio'] { |
|
295 |
+ flex-shrink:0; |
|
296 |
+ -webkit-appearance: none; /* 웹킷 브라우저에서 기본 스타일 제거*/ |
|
297 |
+ -moz-appearance: none; /* 모질라 브라우저에서 기본 스타일 제거*/ |
|
298 |
+ appearance: none; /*기본 브라우저에서 기본 스타일 제거*/ |
|
299 |
+ width: 22px; |
|
300 |
+ height: 22px; |
|
301 |
+ padding: 0; |
|
302 |
+ border: 1px solid #ccc; /*체크되지 않았을 때의 테두리 색상*/ |
|
303 |
+ border-radius: 50%; |
|
304 |
+ outline: none; /*focus 시에 나타나는 기본 스타일 제거*/ |
|
305 |
+ cursor: pointer; |
|
306 |
+ } |
|
307 |
+ /* 체크 시 버튼 모양 스타일*/ |
|
308 |
+ input[type='radio']:checked { |
|
309 |
+ background-color: #544483; /*체크 시 내부 원 색상*/ |
|
310 |
+ border: 4px solid #fff; /*라인이 아닌, 라인과 원 사이 색상*/ |
|
311 |
+ box-shadow: 0 0 0 1px #ccc; /*라인*/ |
|
312 |
+ } |
|
313 |
+ |
|
314 |
+} |
|
315 |
+.search-result{ |
|
316 |
+ .resultext{ |
|
317 |
+ .main-img{ |
|
318 |
+ width: 320px; |
|
319 |
+ height: 220px; |
|
320 |
+ border-radius: 24px; |
|
321 |
+ } |
|
322 |
+ display: flex; |
|
323 |
+ p{ |
|
324 |
+ font-family: "Pretendard-L"; |
|
325 |
+ font-size: 17px; |
|
326 |
+ b{ |
|
327 |
+ color: #ce3e48; |
|
328 |
+ } |
|
329 |
+ } |
|
330 |
+ img{object-fit: contain;} |
|
331 |
+ } |
|
332 |
+ .result-box{ |
|
333 |
+ display: flex; |
|
334 |
+ justify-content: space-between; |
|
335 |
+ border: 1px solid #ddd; |
|
336 |
+ border-radius: 24px; |
|
337 |
+ padding: 30px; |
|
338 |
+ .text-box{ |
|
339 |
+ p,li{font-family: "Pretendard-L";} |
|
340 |
+ .text{ |
|
341 |
+ width: 1048px; |
|
342 |
+ font-size: 16px; |
|
343 |
+ color: #555555; |
|
344 |
+ overflow: hidden; /* Hide any overflow */ |
|
345 |
+ text-overflow: ellipsis; /* Add an ellipsis at the end */ |
|
346 |
+ display: -webkit-box; |
|
347 |
+ -webkit-line-clamp: 2; /* Limit to 2 lines */ |
|
348 |
+ -webkit-box-orient: vertical; |
|
349 |
+ margin-bottom: 20px; |
|
350 |
+ } |
|
351 |
+ h5{ |
|
352 |
+ font-family: "Pretendard-B"; |
|
353 |
+ font-size: 25px; |
|
354 |
+ margin-bottom: 20px; |
|
355 |
+ } |
|
356 |
+ .address{ |
|
357 |
+ font-size: 20px; |
|
358 |
+ margin-bottom: 18px; |
|
359 |
+ } |
|
360 |
+ .category { |
|
361 |
+ margin-bottom: 20px; |
|
362 |
+ ul{ |
|
363 |
+ display: flex; |
|
364 |
+ gap: 5px; |
|
365 |
+ } |
|
366 |
+ li{ |
|
367 |
+ width: fit-content; |
|
368 |
+ border-radius: 3px; |
|
369 |
+ padding: 5px 10px; |
|
370 |
+ font-family: "Pretendard-SB"; |
|
371 |
+ font-size: 14px; |
|
372 |
+ &.category1{ |
|
373 |
+ color: #a5067b; |
|
374 |
+ border: 1px solid #a5067b; |
|
375 |
+ } |
|
376 |
+ &.category2{ |
|
377 |
+ color: #007ac3; |
|
378 |
+ border: 1px solid #007ac3; |
|
379 |
+ } |
|
380 |
+ } |
|
381 |
+ } |
|
382 |
+ .date{ |
|
383 |
+ ul{display: flex; gap: 20px;} |
|
384 |
+ li{font-size: 17px; |
|
385 |
+ b{margin-left: 5px;} |
|
386 |
+ } |
|
387 |
+ } |
|
388 |
+ } |
|
389 |
+ |
|
390 |
+ } |
|
391 |
+ |
|
212 | 392 |
} |
213 | 393 |
|
+++ client/resources/images/icon/calendar.png
Binary file is not shown |
+++ client/resources/images/icon/r-check.png
Binary file is not shown |
+++ client/resources/images/icon/reset.png
Binary file is not shown |
--- client/resources/images/icon/search.png
+++ client/resources/images/icon/search.png
Binary file is not shown |
+++ client/resources/images/img6.png
Binary file is not shown |
--- client/views/pages/AppRouter.js
+++ client/views/pages/AppRouter.js
... | ... | @@ -8,6 +8,7 @@ |
8 | 8 |
import NotFound from "./etc/NotFound.vue"; |
9 | 9 |
|
10 | 10 |
import TotalSearch from "./user/TotalSearch.vue"; |
11 |
+import PicHistory from "./user/PicHistory.vue"; |
|
11 | 12 |
|
12 | 13 |
const routes = [ |
13 | 14 |
{ path: "/", name: "MainPage", component: Main, meta: { authorization: ['ROLE_ADMIN', 'ROLE_USER']} }, |
... | ... | @@ -16,6 +17,7 @@ |
16 | 17 |
{ path: "/notFound.page", name: "NotFoundPage", component: NotFound }, |
17 | 18 |
|
18 | 19 |
{ path: "/TotalSearch.page", name: "TotalSearch", component: TotalSearch }, |
20 |
+ { path: "/PicHistory.page", name: "PicHistory", component: PicHistory }, |
|
19 | 21 |
|
20 | 22 |
|
21 | 23 |
]; |
+++ client/views/pages/user/PicHistory.vue
... | ... | @@ -0,0 +1,193 @@ |
1 | +<template> | |
2 | + <div class="content"> | |
3 | + <div class="sub-title-area mb-30"> | |
4 | + <h2>사진 기록물</h2> | |
5 | + <div class="breadcrumb-list"> | |
6 | + <ul> | |
7 | + <!-- Bind the image source dynamically for homeicon --> | |
8 | + <li><img :src="homeicon" alt="Home Icon"></li> | |
9 | + <li><img :src="righticon" alt=""></li> | |
10 | + <li>통합검색</li> | |
11 | + </ul> | |
12 | + </div> | |
13 | + </div> | |
14 | + <form action="search" class="search-form mb-40"> | |
15 | + <dl> | |
16 | + <dd class="mb-15"> | |
17 | + <p>기록유형</p> | |
18 | + <ul> | |
19 | + <li v-for="(option, index) in checkOptions" :key="index"> | |
20 | + <input type="checkbox" :id="'check_button_' + index" :name="'check_button_' + index" /> | |
21 | + <label :for="'check_button_' + index">{{ option }}</label> | |
22 | + </li> | |
23 | + </ul> | |
24 | + </dd> | |
25 | + <dd class="mb-15"> | |
26 | + <p>검색범위</p> | |
27 | + <ul> | |
28 | + <li v-for="(option, index) in checkOptions2" :key="index"> | |
29 | + <input type="checkbox" :id="'check_button_' + index" :name="'check_button_' + index" /> | |
30 | + <label :for="'check_button_' + index">{{ option }}</label> | |
31 | + </li> | |
32 | + </ul> | |
33 | + </dd> | |
34 | + <dd class="mb-15"> | |
35 | + <p>검색어</p> | |
36 | + <input type="text"> | |
37 | + </dd> | |
38 | + <dd class="mb-15"> | |
39 | + <p>생산연도</p> | |
40 | + <input type="date"> | |
41 | + <p class="mark">~</p> | |
42 | + <input type="date"> | |
43 | + </dd> | |
44 | + <dd class="mb-20"> | |
45 | + <p>카테고리</p> | |
46 | + <ul> | |
47 | + <li v-for="(option, index) in checkOptions3" :key="index"> | |
48 | + <input type="checkbox" :id="'check_button_' + index" :name="'check_button_' + index" /> | |
49 | + <label :for="'check_button_' + index">{{ option }}</label> | |
50 | + </li> | |
51 | + </ul> | |
52 | + </dd> | |
53 | + <dd class="mb-15"> | |
54 | + <p>정렬</p> | |
55 | + <ul> | |
56 | + <li v-for="(option, index) in checkOptions4" :key="index"> | |
57 | + <input type="radio" :id="'radio_button_' + index" :name="'radio_button_' + index" /> | |
58 | + <label :for="'radio_button_' + index">{{ option }}</label> | |
59 | + </li> | |
60 | + </ul> | |
61 | + </dd> | |
62 | + <div class="btn-group"> | |
63 | + <button class="reset"><img :src="reseticon" alt=""> | |
64 | + <p>초기화</p> | |
65 | + </button> | |
66 | + <button class="search"><img :src="searchicon" alt=""> | |
67 | + <p>검색</p> | |
68 | + </button> | |
69 | + </div> | |
70 | + | |
71 | + </dl> | |
72 | + | |
73 | + </form> | |
74 | + <div class="search-result"> | |
75 | + <ul> | |
76 | + <li v-for="(resultitem, index) in resultitems" :key="index" class="mb-30"> | |
77 | + <div class="flex-sp-bw mb-20"> | |
78 | + <div class="resultext"> | |
79 | + <img :src="resulticon" alt=""> | |
80 | + <p>총 <b>{{ resultitem.count }}개</b>의 사진 기록물이 검색되었습니다. </p> | |
81 | + </div> | |
82 | + <router-link :to="{ path: '/' }" class="gopage">모두보기</router-link> | |
83 | + </div> | |
84 | + <div class="result-box"> | |
85 | + <div class="main-img"><img :src="resultitem.img" alt=""></div> | |
86 | + <div class="text-box"> | |
87 | + <h5>{{ resultitem.title }}</h5> | |
88 | + <p class="address">{{ resultitem.address }}</p> | |
89 | + <p class="text">{{ resultitem.content }}</p> | |
90 | + <div class="category"> | |
91 | + <ul> | |
92 | + <li v-if="resultitem.category1" class="category1">카테고리1</li> | |
93 | + <li v-if="resultitem.category2" class="category2">카테고리2</li> | |
94 | + </ul> | |
95 | + </div> | |
96 | + <div class="date"> | |
97 | + <ul> | |
98 | + <li>생산연도 <b>{{ resultitem.year }}</b></li> | |
99 | + <li>|</li> | |
100 | + <li>등록 <b>{{ resultitem.date }}</b></li> | |
101 | + </ul> | |
102 | + </div> | |
103 | + </div> | |
104 | + </div> | |
105 | + </li> | |
106 | + </ul> | |
107 | + </div> | |
108 | + </div> | |
109 | +</template> | |
110 | + | |
111 | +<script> | |
112 | +export default { | |
113 | + data() { | |
114 | + return { | |
115 | + resulticon: "client/resources/images/icon/r-check.png", | |
116 | + homeicon: 'client/resources/images/icon/home.png', | |
117 | + searchicon: 'client/resources/images/icon/search.png', | |
118 | + reseticon: 'client/resources/images/icon/reset.png', | |
119 | + righticon: 'client/resources/images/icon/right.png', | |
120 | + checkOptions: [ | |
121 | + '전체', | |
122 | + '사진', | |
123 | + '영상', | |
124 | + '미디어 영상', | |
125 | + '보도자료', | |
126 | + ], | |
127 | + checkOptions2: [ | |
128 | + '전체', | |
129 | + '제목', | |
130 | + '내용', | |
131 | + '주소', | |
132 | + ], | |
133 | + checkOptions3: [ | |
134 | + '카테고리1', | |
135 | + '카테고리2', | |
136 | + '카테고리3', | |
137 | + '카테고리4', | |
138 | + '카테고리5', | |
139 | + ], | |
140 | + checkOptions4: [ | |
141 | + '최신', | |
142 | + '인기', | |
143 | + ], | |
144 | + resultitems: [ | |
145 | + { | |
146 | + count: 5, | |
147 | + img: 'client/resources/images/img6.png', | |
148 | + title: '사진 기록물 제목', | |
149 | + address: '경상북도 구미시 송정대로 55', | |
150 | + content: '대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어…', | |
151 | + category1: true, | |
152 | + category2: true, | |
153 | + year: 2020, | |
154 | + date: '2021-01-01' | |
155 | + }, | |
156 | + { | |
157 | + count: 3, | |
158 | + img: 'client/resources/images/img6.png', | |
159 | + title: '영상 기록물 제목', | |
160 | + address: '경상북도 구미시 송정대로 55', | |
161 | + content: '대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어…', | |
162 | + category1: true, | |
163 | + category2: false, | |
164 | + year: 2021, | |
165 | + date: '2022-01-01' | |
166 | + }, | |
167 | + { | |
168 | + count: 3, | |
169 | + img: 'client/resources/images/img6.png', | |
170 | + title: '미디어 영상 제목', | |
171 | + address: '경상북도 구미시 송정대로 55', | |
172 | + content: '대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어…', | |
173 | + category1: true, | |
174 | + category2: false, | |
175 | + year: 2021, | |
176 | + date: '2022-01-01' | |
177 | + }, | |
178 | + { | |
179 | + count: 3, | |
180 | + img: 'client/resources/images/img6.png', | |
181 | + title: '보도자료 제목', | |
182 | + address: '경상북도 구미시 송정대로 55', | |
183 | + content: '대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어…', | |
184 | + category1: true, | |
185 | + category2: false, | |
186 | + year: 2021, | |
187 | + date: '2022-01-01' | |
188 | + }, | |
189 | + ] | |
190 | + }; | |
191 | + } | |
192 | +}; | |
193 | +</script> |
--- client/views/pages/user/TotalSearch.vue
+++ client/views/pages/user/TotalSearch.vue
... | ... | @@ -1,6 +1,6 @@ |
1 | 1 |
<template> |
2 | 2 |
<div class="content"> |
3 |
- <div class="sub-title-area mb-110"> |
|
3 |
+ <div class="sub-title-area mb-30"> |
|
4 | 4 |
<h2>통합검색</h2> |
5 | 5 |
<div class="breadcrumb-list"> |
6 | 6 |
<ul> |
... | ... | @@ -10,33 +10,184 @@ |
10 | 10 |
<li>통합검색</li> |
11 | 11 |
</ul> |
12 | 12 |
</div> |
13 |
- </div> |
|
14 |
- <form action="search" class="search-form"> |
|
13 |
+ </div> |
|
14 |
+ <form action="search" class="search-form mb-40"> |
|
15 | 15 |
<dl> |
16 |
- <dd class="mb-25"> |
|
17 |
- |
|
18 |
- <input type="checkbox" id="check_button" name=""> |
|
19 |
- <label for="check_button">선택1</label> |
|
20 |
- |
|
16 |
+ <dd class="mb-15"> |
|
17 |
+ <p>기록유형</p> |
|
18 |
+ <ul> |
|
19 |
+ <li v-for="(option, index) in checkOptions" :key="index"> |
|
20 |
+ <input type="checkbox" :id="'check_button_' + index" :name="'check_button_' + index" /> |
|
21 |
+ <label :for="'check_button_' + index">{{ option }}</label> |
|
22 |
+ </li> |
|
23 |
+ </ul> |
|
21 | 24 |
</dd> |
22 |
- |
|
23 |
- |
|
25 |
+ <dd class="mb-15"> |
|
26 |
+ <p>검색범위</p> |
|
27 |
+ <ul> |
|
28 |
+ <li v-for="(option, index) in checkOptions2" :key="index"> |
|
29 |
+ <input type="checkbox" :id="'check_button_' + index" :name="'check_button_' + index" /> |
|
30 |
+ <label :for="'check_button_' + index">{{ option }}</label> |
|
31 |
+ </li> |
|
32 |
+ </ul> |
|
33 |
+ </dd> |
|
34 |
+ <dd class="mb-15"> |
|
35 |
+ <p>검색어</p> |
|
36 |
+ <input type="text"> |
|
37 |
+ </dd> |
|
38 |
+ <dd class="mb-15"> |
|
39 |
+ <p>생산연도</p> |
|
40 |
+ <input type="date"> |
|
41 |
+ <p class="mark">~</p> |
|
42 |
+ <input type="date"> |
|
43 |
+ </dd> |
|
44 |
+ <dd class="mb-20"> |
|
45 |
+ <p>카테고리</p> |
|
46 |
+ <ul> |
|
47 |
+ <li v-for="(option, index) in checkOptions3" :key="index"> |
|
48 |
+ <input type="checkbox" :id="'check_button_' + index" :name="'check_button_' + index" /> |
|
49 |
+ <label :for="'check_button_' + index">{{ option }}</label> |
|
50 |
+ </li> |
|
51 |
+ </ul> |
|
52 |
+ </dd> |
|
53 |
+ <dd class="mb-15"> |
|
54 |
+ <p>정렬</p> |
|
55 |
+ <ul> |
|
56 |
+ <li v-for="(option, index) in checkOptions4" :key="index"> |
|
57 |
+ <input type="radio" :id="'radio_button_' + index" :name="'radio_button_' + index" /> |
|
58 |
+ <label :for="'radio_button_' + index">{{ option }}</label> |
|
59 |
+ </li> |
|
60 |
+ </ul> |
|
61 |
+ </dd> |
|
62 |
+ <div class="btn-group"> |
|
63 |
+ <button class="reset"><img :src="reseticon" alt=""> |
|
64 |
+ <p>초기화</p> |
|
65 |
+ </button> |
|
66 |
+ <button class="search"><img :src="searchicon" alt=""> |
|
67 |
+ <p>검색</p> |
|
68 |
+ </button> |
|
69 |
+ </div> |
|
70 |
+ |
|
24 | 71 |
</dl> |
25 |
- <!-- Bind the image source dynamically for loginicon --> |
|
26 |
- <button><img :src="loginicon" alt="Login Icon"><span>로그인</span></button> |
|
72 |
+ |
|
27 | 73 |
</form> |
74 |
+ <div class="search-result"> |
|
75 |
+ <ul> |
|
76 |
+ <li v-for="(resultitem, index) in resultitems" :key="index" class="mb-30"> |
|
77 |
+ <div class="flex-sp-bw mb-20"> |
|
78 |
+ <div class="resultext"> |
|
79 |
+ <img :src="resulticon" alt=""> |
|
80 |
+ <p>총 <b>{{ resultitem.count }}개</b>의 사진 기록물이 검색되었습니다. </p> |
|
81 |
+ </div> |
|
82 |
+ <router-link :to="{ path: '/' }" class="gopage">모두보기</router-link> |
|
83 |
+ </div> |
|
84 |
+ <div class="result-box"> |
|
85 |
+ <div class="main-img"><img :src="resultitem.img" alt=""></div> |
|
86 |
+ <div class="text-box"> |
|
87 |
+ <h5>{{ resultitem.title }}</h5> |
|
88 |
+ <p class="address">{{ resultitem.address }}</p> |
|
89 |
+ <p class="text">{{ resultitem.content }}</p> |
|
90 |
+ <div class="category"> |
|
91 |
+ <ul> |
|
92 |
+ <li v-if="resultitem.category1" class="category1">카테고리1</li> |
|
93 |
+ <li v-if="resultitem.category2" class="category2">카테고리2</li> |
|
94 |
+ </ul> |
|
95 |
+ </div> |
|
96 |
+ <div class="date"> |
|
97 |
+ <ul> |
|
98 |
+ <li>생산연도 <b>{{ resultitem.year }}</b></li> |
|
99 |
+ <li>|</li> |
|
100 |
+ <li>등록 <b>{{ resultitem.date }}</b></li> |
|
101 |
+ </ul> |
|
102 |
+ </div> |
|
103 |
+ </div> |
|
104 |
+ </div> |
|
105 |
+ </li> |
|
106 |
+ </ul> |
|
107 |
+ </div> |
|
28 | 108 |
</div> |
29 | 109 |
</template> |
30 | 110 |
|
31 | 111 |
<script> |
32 | 112 |
export default { |
33 |
- data() { |
|
34 |
- return { |
|
35 |
- // Define the image sources |
|
36 |
- homeicon: 'client/resources/images/icon/home.png', |
|
37 |
- loginicon: 'client/resources/images/icon/lock.png', |
|
38 |
- righticon: 'client/resources/images/icon/right.png', |
|
39 |
- }; |
|
40 |
- } |
|
113 |
+ data() { |
|
114 |
+ return { |
|
115 |
+ resulticon: "client/resources/images/icon/r-check.png", |
|
116 |
+ homeicon: 'client/resources/images/icon/home.png', |
|
117 |
+ searchicon: 'client/resources/images/icon/search.png', |
|
118 |
+ reseticon: 'client/resources/images/icon/reset.png', |
|
119 |
+ righticon: 'client/resources/images/icon/right.png', |
|
120 |
+ checkOptions: [ |
|
121 |
+ '전체', |
|
122 |
+ '사진', |
|
123 |
+ '영상', |
|
124 |
+ '미디어 영상', |
|
125 |
+ '보도자료', |
|
126 |
+ ], |
|
127 |
+ checkOptions2: [ |
|
128 |
+ '전체', |
|
129 |
+ '제목', |
|
130 |
+ '내용', |
|
131 |
+ '주소', |
|
132 |
+ ], |
|
133 |
+ checkOptions3: [ |
|
134 |
+ '카테고리1', |
|
135 |
+ '카테고리2', |
|
136 |
+ '카테고리3', |
|
137 |
+ '카테고리4', |
|
138 |
+ '카테고리5', |
|
139 |
+ ], |
|
140 |
+ checkOptions4: [ |
|
141 |
+ '최신', |
|
142 |
+ '인기', |
|
143 |
+ ], |
|
144 |
+ resultitems: [ |
|
145 |
+ { |
|
146 |
+ count: 5, |
|
147 |
+ img: 'client/resources/images/img6.png', |
|
148 |
+ title: '사진 기록물 제목', |
|
149 |
+ address: '경상북도 구미시 송정대로 55', |
|
150 |
+ content: '대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어…', |
|
151 |
+ category1: true, |
|
152 |
+ category2: true, |
|
153 |
+ year: 2020, |
|
154 |
+ date: '2021-01-01' |
|
155 |
+ }, |
|
156 |
+ { |
|
157 |
+ count: 3, |
|
158 |
+ img: 'client/resources/images/img6.png', |
|
159 |
+ title: '영상 기록물 제목', |
|
160 |
+ address: '경상북도 구미시 송정대로 55', |
|
161 |
+ content: '대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어…', |
|
162 |
+ category1: true, |
|
163 |
+ category2: false, |
|
164 |
+ year: 2021, |
|
165 |
+ date: '2022-01-01' |
|
166 |
+ }, |
|
167 |
+ { |
|
168 |
+ count: 3, |
|
169 |
+ img: 'client/resources/images/img6.png', |
|
170 |
+ title: '미디어 영상 제목', |
|
171 |
+ address: '경상북도 구미시 송정대로 55', |
|
172 |
+ content: '대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어…', |
|
173 |
+ category1: true, |
|
174 |
+ category2: false, |
|
175 |
+ year: 2021, |
|
176 |
+ date: '2022-01-01' |
|
177 |
+ }, |
|
178 |
+ { |
|
179 |
+ count: 3, |
|
180 |
+ img: 'client/resources/images/img6.png', |
|
181 |
+ title: '보도자료 제목', |
|
182 |
+ address: '경상북도 구미시 송정대로 55', |
|
183 |
+ content: '대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어…', |
|
184 |
+ category1: true, |
|
185 |
+ category2: false, |
|
186 |
+ year: 2021, |
|
187 |
+ date: '2022-01-01' |
|
188 |
+ }, |
|
189 |
+ ] |
|
190 |
+ }; |
|
191 |
+ } |
|
41 | 192 |
}; |
42 | 193 |
</script> |
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?