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
ref="swiper"
:loop="true"
:spaceBetween="30"
:centeredSlides="true"
:autoplay="{
delay: 2500,
disableOnInteraction: false,
}"
:pagination="{
type: 'progressbar',
}" :navigation="true" :modules="modules" @slideChange="onSlideChange" 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">{{ currentSlide }} / {{ totalSlides }}</div>
<div class="btn-control">
<button @click="play"><CaretRightOutlined /></button>
<button @click="stop"><PauseOutlined /></button>
</div>
</div>
</swiper>
<div class="search-wrap">
<div class="search-area">
<select name="" id="">
<option value="all" selected>전체</option>
<option value="pic">사진</option>
<option value="video">영상</option>
<option value="media">미디어 영상</option>
<option value="bodo">보도자료</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"><router-link :to="{path : '/TotalSearch.page'}" >상세검색</router-link></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 mb-50">
<div class="tabs">
<ul class="">
<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="content-wrap">
<router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
<div class="new-pic">
<div v-for="(contentItem, index) in tabs[0].contentArray" :key="index" class="box-wrap">
<div class="box">
<img :src="contentItem.image" :alt="tabs[0].title" class="tab-image" />
<div class="info">
<p>{{ contentItem.content }}</p>
<span>{{ contentItem.date }}</span>
</div>
</div>
</div>
</div>
</div>
<div v-if="selectedTab === 1" class="content-wrap">
<router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
<div class="new-video">
<div v-for="(contentItem, index) in tabs[1].contentArray" :key="index" class="box-wrap">
<div class="box">
<img :src="contentItem.image" :alt="tabs[1].title" class="tab-image" />
<div class="info">
<p>{{ contentItem.content }}</p>
<span>{{ contentItem.date }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="new-update w1500 mb-50 flex-sp-bw">
<div class="new-media">
<div class="title mb-30">
<h4>신규 미디어 영상</h4>
<router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
</div>
<div class="media-wrap">
<div v-for="(mediacontent, index) in mediacontent" :key="index" class="media-box">
<img :src="mediacontent.image" :alt="mediacontent.title" class="media-image" />
<div class="info">
<p>{{ mediacontent.content }}</p>
<span>{{ mediacontent.date }}</span>
</div>
</div>
</div>
</div>
<div class="new-bodo">
<div class="title mb-30">
<h4>신규 미디어 영상</h4>
<router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
</div>
<ul>
<li v-for="(bodocontent, index) in bodocontent" :key="index" class="info">
<p>{{ bodocontent.content }}</p>
<span>{{ bodocontent.date }}</span>
</li>
</ul>
</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 { CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue';
// import required modules
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
export default {
components: {
Swiper,
SwiperSlide,
PauseOutlined,
CaretRightOutlined,
},
setup() {
return {
modules: [Autoplay, Pagination, Navigation],
};
},
data() {
return {
selectedTab: 0, // Set initial tab index to 0 (first tab)
tabs: [
{
title: "신규 사진", activeImage: "client/resources/images/mCont_ico1_on.png", // Active tab image
inactiveImage: "client/resources/images/mCont_ico1_off.png",
contentArray: [
{ content: '문수사', date: '2025-03-18', image: 'client/resources/images/img1.png' },
{ content: '신평벽화마을', date: '2025-03-19', image: 'client/resources/images/img2.png' },
{ content: '박정희대통령역사자료관', date: '2025-03-20', image: 'client/resources/images/img3.png' }
],
},
{
title: "신규 영상", activeImage: "client/resources/images/mCont_ico2_on.png", // Active tab image
inactiveImage: "client/resources/images/mCont_ico2_off.png",
contentArray: [
{ content: '제목1', date: '2025-03-18', image: 'client/resources/images/img1.png' },
{ content: '제목2', date: '2025-03-19', image: 'client/resources/images/img2.png' },
{ content: '제목3', date: '2025-03-20', image: 'client/resources/images/img3.png' }
],
},
],
mediacontent: [
{ content: '문수사', date: '2025-03-18', image: 'client/resources/images/img4.png' },
{ content: '신평벽화마을', date: '2025-03-19', image: 'client/resources/images/img5.png' },
],
bodocontent: [
{ content: '구미시장 우리동네 온(溫)데이', date: '2025-03-18', },
{ content: "구미 청년 창업, 지난해 성과 '쏠쏠'…올해도 새 도전자", date: '2025-03-19', },
{ content: "구미시여성단체협의회 신경은 회장 부부, 1,000만 원", date: '2025-03-19', },
{ content: "초보 기술 공무원도 전문가로! 구미시, 실무 역량 향상", date: '2025-03-19', },
{ content: "구미시, 청렴도 1등급 목표…반부패·청렴 시책 강화", date: '2025-03-19', },
],
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
],
currentSlide: 1, // To track the current slide
totalSlides: 3,
navigation: true, // Enable navigation buttons (prev/next)
};
},
mounted() {
// Store the swiper instance when it's ready
this.totalSlides = this.slides.length;
},
methods: {
selectTab(index) {
this.selectedTab = index; // Update the selected tab index
},
play() {
const swiper = this.$refs.swiper.swiper;
if (swiper && swiper.autoplay) {
swiper.autoplay.start(); // Start autoplay
} else {
console.warn('Swiper instance or autoplay is not available');
}
},
// Method to stop autoplay
stop() {
const swiper = this.$refs.swiper.swiper;
if (swiper && swiper.autoplay) {
swiper.autoplay.stop(); // Stop autoplay
} else {
console.warn('Swiper instance or autoplay is not available');
}
},
// Method to update the current slide and total slides
onSlideChange() {
const swiper = this.$refs.swiper.swiper;
if (swiper) {
this.currentSlide = swiper.realIndex + 1; // Get current slide (1-based index)
}
},
},
};
</script>
<style scoped></style>