File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="visual mb-50">
<swiper :loop="true" :spaceBetween="30" :centeredSlides="true" :pagination="{
type: 'progressbar',
}" :navigation="true" :modules="modules" class="mySwiper ">
<swiper-slide v-for="(item, index) in slides" :key="index" >
<img :src="item.img" :alt="item.alt" />
</swiper-slide>
<div class="pagination">
<div class="page-count">1/3</div>
</div>
</swiper>
<div class="search-wrap">
<div class="search-area">
<select name="" id="">
<option value="" selected>전체</option>
<option value="">사진</option>
<option value="">영상</option>
<option value="">미디어 영상</option>
<option value="">보도자료</option>
</select>
<div class="line"></div>
<input type="text" placeholder="검색어를 입력하세요">
<button class="search-btn"><img :src="search" alt=""></button>
</div>
<div class="total-search">
<button class="total-btn">상세검색</button>
</div>
</div>
</div>
<div class="current-status mb-60">
<div class="board w1500">
<ul>
<li>
<div class="labeling"><img :src="icon1" alt=""><span>전체</span></div>
<div class="count all">520</div>
</li>
<li class="line"></li>
<li>
<div class="labeling"><img :src="icon2" alt=""><span>사진</span></div>
<div class="count">520</div>
</li>
<li class="line"></li>
<li>
<div class="labeling"><img :src="icon3" alt=""><span>영상</span></div>
<div class="count">520</div>
</li>
<li class="line"></li>
<li>
<div class="labeling"><img :src="icon4" alt=""><span>미디어</span></div>
<div class="count">520</div>
</li>
<li class="line"></li>
<li>
<div class="labeling"><img :src="icon5" alt=""><span>보도자료</span></div>
<div class="count">520</div>
</li>
</ul>
<div class="current-btn"> <button><span>기록물 현황</span><img :src="direct" alt=""></button></div>
</div>
</div>
<div class="new-update w1500">
<div class="tabs">
<ul>
<li v-for="(tab, index) in tabs" :key="index" class="tab-title" :class="{ active: selectedTab === index }"
@click="selectTab(index)">
<img
:src="selectedTab === index ? tab.activeImage : tab.inactiveImage"
:alt="tab.title"
class="tab-icon"
/>
<p><b>{{ tab.title }}</b> 기록물</p>
</li>
</ul>
<div class="tab-content">
<div v-if="selectedTab === 0" class="new-pic">
<p>{{ tabs[0].content }}</p>
</div>
<div v-if="selectedTab === 1" class="new-video">
<p>{{ tabs[1].content }}</p>
</div>
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
// Import Swiper Vue components
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
// import required modules
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
export default {
components: {
Swiper,
SwiperSlide,
},
setup() {
return {
modules: [Autoplay, Pagination, Navigation],
};
},
data() {
return {
selectedTab: 0, // Set initial tab index to 0 (first tab)
tabs: [
{ title: "신규 사진", content: "This is the content for Tab 1", activeImage: "client/resources/images/pic-btn-click.png", // Active tab image
inactiveImage: "client/resources/images/pic-btn-click.png"},
{ title: "신규 영상", content: "This is the content for Tab 2",activeImage: "client/resources/images/video-btn.png", // Active tab image
inactiveImage: "client/resources/images/video-btn.png"},
],
direct: 'client/resources/images/direct-btn.png',
search: 'client/resources/images/icon/search.png',
icon1: 'client/resources/images/icon/icon1.png',
icon2: 'client/resources/images/icon/icon2.png',
icon3: 'client/resources/images/icon/icon3.png',
icon4: 'client/resources/images/icon/icon4.png',
icon5: 'client/resources/images/icon/icon5.png',
slides: [
{ img: 'client/resources/images/visual.png', alt: 'Slide 1' },
{ img: 'client/resources/images/visual.png', alt: 'Slide 2' },
{ img: 'client/resources/images/visual.png', alt: 'Slide 3' },
// Add more slides as needed
],
autoplay: {
delay: 2500, // Delay in milliseconds
disableOnInteraction: false, // Autoplay won't stop when interacting
},
pagination: {
clickable: true, // Allow clicking pagination
},
navigation: true, // Enable navigation buttons (prev/next)
};
},
methods: {
selectTab(index) {
this.selectedTab = index; // Update the selected tab index
},
},
};
</script>
<style scoped></style>