<template> <div class="mb-30"> <div class="flex-sp-bw mb-20"> <div class="resultext"> <img :src="resulticon" alt=""> <p>총 <b>{{ count }}개</b>의 {{ helpText }}</p> </div> <button type="button" class="gopage" @click="fnMoveTo(routeName, null)">모두보기</button> </div> <ul> <li v-for="(item, idx2) of list" :key="idx2" class="result-box mb-15"> <div class="main-img"> <img v-if="item.hasOwnProperty('files') && item.files.length > 0" :src="item.files[0].filePath" alt=""> <img v-else src="client/resources/images/img6.png" alt=""> </div> <div class="text-box"> <h5>{{ item.sj }}</h5> <p v-if="name === 'P' || name === 'V'" class="address">{{ item.adres }}</p> <p class="text">{{ item.cn }}</p> <div class="mb-20"> <ul class="category"> <li v-for="(ctgry, idx3) of item.ctgrys" :key="idx3" class="category1">{{ ctgry.ctgryNm }}</li> </ul> </div> <div class="date"> <ul> <li>생산연도 <b>{{ item.prdctnYear }}</b></li> <li>|</li> <li>등록일 <b>{{ item.rgsde }}</b></li> </ul> </div> </div> </li> </ul> </div> </template> <script> export default { name: "CardViewList", props: { name: { type: String, default: 'P', }, count: { type: Number, default: 0, }, list: { type: Array, default: () => [], }, }, data() { return { }; }, computed: { helpText() { switch (this.name) { case 'P': return '사진 기록물이 검색되었습니다.'; case 'V': return '영상 기록물이 검색되었습니다.'; case 'M': return '미디어 영상이 검색되었습니다.'; case 'N': return '보도자료가 검색되었습니다.'; } }, routeName() { switch (this.name) { case 'P': return 'PicHistorySearch'; case 'V': return '영상 기록물'; case 'M': return '미디어 영상'; case 'N': return '보도자료'; } }, }, created() { }, mounted() { }, watch: {}, methods: { // 페이지 이동 fnMoveTo(page, id) { if (id !== null || id !== '') { this.$router.push({ name: page, query: { id: id } }); } else { this.$router.push({ name: page }); } } }, }; </script> <style scoped> /* 임시로 추가 */ .main-img img { max-width: 320px; } </style>