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
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="content main ">
<div class="w1400">
<!-- 공지사항 및 배너 -->
<div class="community-zone flex mb30">
<div class="visual-zone gd-8 pl0">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in visualSlides" :key="index">
<img :src="item.img" :alt="item.alt" />
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev button"></div>
<div class="swiper-button-next button"></div>
</div>
<div class="gd-4 pr0 ">
<!-- 검색창 -->
<div class="community-zone mb20">
<div class="box-out-title flex justify-between align-center">
</div>
<div class="search-bar text-ct" tabindex="0">
<div class="box">
<p>통합검색</p>
<div class="bar"></div>
<input type="text" class="search-input" placeholder="검색어를 입력하세요." v-model="search.searchText"
@keyup.enter="totalSearch" />
<button class="icon-button search-button" @click="totalSearch">
<svg-icon type="mdi" :path="this.$iconPath()" class="search-icon"></svg-icon>
</button>
</div>
</div>
</div>
<div class="">
<div class="box-out-title flex justify-between align-center">
<p>공지사항(목록형)</p>
<router-link to="/government/BBS_MNG_000000000000027/list.page" class=" flex align-center">
<p class="mr5">바로가기</p>
<svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
</router-link>
</div>
<div class="box">
<div class="tab-nav mb15">
<ul class="flex align-center" style="gap: 30px;">
<li v-for="(item, idx) in codeList" :key="idx" :value="item.cd" :class="{
' ': true,
activeTab: activeTab === item.cd,
}" @click="showTab(item.cd)">
<p>{{ item.cdNm }}</p>
</li>
</ul>
</div>
<div class="tab-content">
<div>
<div class="list_news flex justify-between" style="gap: 20px;">
<ul>
<li class="leli">
<a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
<span>2025.01.08</span>
</li>
<li class="leli">
<a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
<span>2025.01.08</span>
</li>
<li class="leli">
<a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
<span>2025.01.08</span>
</li>
</ul>
<ul>
<li class="leli">
<a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
<span>2025.01.08</span>
</li>
<li class="leli">
<a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
<span>2025.01.08</span>
</li>
<li class="leli">
<a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
<span>2025.01.08</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 바로가기 -->
<div class="community-zone mb20">
<div class="box-out-title flex justify-between align-center">
<p>바로가기</p>
</div>
<ul class="quick-link">
<li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
<li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
<li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
<li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
<li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
</ul>
</div>
<!-- 배너 -->
<div class="community-zone mb30">
<div class="best_service">
<h4><span>BEST1</span><strong>대제목</strong> 1</h4>
<div class="service_wrap">
<div class="left_cont best1">
<a href="#"><img src="" alt=""></a>
<div class="txt">
<span class="label_tag etc_tag">키워드</span>
<h5>부제목</h5>
<div class="sub_info">배너내용</div>
<div class="point_info"><strong>배너내용 강조</strong></div>
</div>
<!-- <div class="btn_set">
<a href="" class="btn_small btn_bg_blue">신청하기</a>
</div> -->
</div>
<div class="right_cont">
<ul class="product_list">
<li>
<div class="pdt_info">
<strong class="pdt_name">제목</strong>
<span class="label_tag blue_tag">키워드</span>
<div class="pdt_simple_info">
내용
</div>
<a href="" class="btn_small btn_bg_green">바로가기</a>
</div>
</li>
<li>
<div class="pdt_info">
<strong class="pdt_name">제목</strong>
<span class="label_tag blue_tag">키워드</span>
<div class="pdt_simple_info">내용
</div>
<a href="" class="btn_small btn_bg_green">바로가기</a>
</div>
</li>
<li>
<div class="pdt_info">
<strong class="pdt_name">제목</strong><span class="label_tag green_tag">키워드</span><span
class="label_tag blue_tag">키워드</span>
<div class="pdt_simple_info">내용</div>
<a href="" class="btn_small btn_bg_blue">신청하기</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 카드뉴스 -->
<div class="cardnews-zone mb30">
<div class=" ">
<div class="box-out-title flex justify-between align-center">
<p>카드뉴스</p>
</div>
<div class="swiper-container">
<ul class="swiper-wrapper search-list">
<li class="li box swiper-slide" v-for="(item, index) in slides" :key="index" >
<a :href="item.link">
<div class="img-wrap" :class="item.imgClass">
<img :src="item.img" :alt="item.alt" />
</div>
<div class="conts-wrap">
<h4 class="tit">{{ item.title }}</h4>
<p class="desc">{{ item.description }}</p>
<div class="full-input flex justify-end">
<div class="btn-wrap flex align-center">
<p class="mr5">바로가기</p>
<svg-icon type="mdi" :width="15" :height="15"
:path="this.$iconPath('mdiArrowRight')"></svg-icon>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="swiper-button-prev button"></div>
<div class="swiper-button-next button"></div>
</div>
</div>
<!-- 배너존 -->
<div class="chart-zone mb30">
<div class="box-out-title flex justify-between align-center">
<p>배너</p>
</div>
<div class="banner-zone">
<div class="banner_txt">
<span>해당페이지</span>
<!-- 230808 문구 수정 -->
<span class="b_txt"><strong>해당페이지</strong>을 이용해 보세요.</span>
<!-- // 230808 문구 수정 -->
</div>
<a href="" class="btn_link" title="새창열림">바로 체험하기</a>
</div>
</div>
</div>
</div>
</template>
<script>
import ClusteredColumnChart from "../../../../component/chart/ClusteredColumnChart.vue";
import store from "../../../AppStore.js";
// 통합검색 관련
import queryParams from "../../../../../resources/js/queryParams.js";
import { defaultTotalSearchParams } from "../../../../../resources/js/defaultTotalSearchParams.js";
// API
import { sysListByPageProc } from "../../../../../resources/api/popup.js";
import Swiper from 'swiper';
export default {
name: 'SwiperComponent',
mixins: [queryParams],
components: {
ClusteredColumnChart: ClusteredColumnChart,
},
data() {
return {
visualSlides: [
{ img: '', alt: 'Slide 1' },
{ img: '', alt: 'Slide 2' },
{ img: '', alt: 'Slide 3' },
],
slides: [
{
img: '',
alt: 'Slide 1',
title: '컴포넌트 1',
description: '디지털 정부서비스 UI를 구성하는 공통 요소 기반으로 일관성 있는 구현이 용이한 컴포넌트 가이드디지털 정부서비스 UI를 구성하는 공통 요소 기반으로 일관성 있는 구현이 용이한 컴포넌트 가이드디지털 정부서비스 UI를 구성하는 공통 요소 기반으로 일관성 있는 구현이 용이한 컴포넌트 가이드디지털 정부서비스 UI를 구성하는 공통 요소 기반으로 일관성 있는 구현이 용이한 컴포넌트 가이드',
link: '',
imgClass: 'main_1' // 각 슬라이드에 고유한 클래스 적용
},
{
img: '',
alt: 'Slide 2',
title: '컴포넌트 2',
description: '두 번째 컴포넌트 설명',
link: '',
imgClass: 'main_2'
},
{
img: '',
alt: 'Slide 3',
title: '컴포넌트 3',
description: '세 번째 컴포넌트 설명',
link: '',
imgClass: 'main_3'
}
],
search: { ...defaultTotalSearchParams },
mbrId: store.state.mbrId || null, // 사용자 아이디
roles: store.state.roles.map((auth) => auth.authority) || [], // 사용자 권한
menuType: store.state.userType || null, // 메뉴 타입
// 공지사항 top5
noticeTop5: [],
// 검색조건
codeList: [],
activeTab: "categoryTab",
searchKeyword: "day",
// 통계
chartData: [],
popupList: [],
// 기업정보
companyInfoList: [],
};
},
created() {
// 쿠키 초기화
const today = new Date();
let tomorrow = new Date(today.setDate(today.getDate() + 1));
tomorrow.setHours(0, 0, 0, 0);
tomorrow = new Date(tomorrow);
if (this.$cookies.get("popup") == null) {
this.$cookies.set("popup", [], tomorrow);
}
this.fnPopupList();
},
methods: {
showTab: function (tabName) {
this.activeTab = tabName;
this.searchKeyword = "day";
},
// 통합검색
totalSearch() {
if (this.search.searchText === "") {
alert("검색어를 입력해주세요.");
return;
}
this.search.mbrId = this.mbrId;
this.search.roles = this.roles;
this.search.menuType = this.menuType;
this.saveQueryParams("totalSearchQueryParams", this.search); // 검색조건 저장
this.$router.push({
path: "/government/search.page",
});
},
// 팝업조회(상세)
async fnPopupList() {
let data = {
pageType: this.$store.state.userType,
};
try {
const response = await sysListByPageProc(data);
let popupList = response.data.data;
if (popupList != null && popupList.length > 0) {
this.fnShowPopup(popupList);
}
} catch (error) {
alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
}
},
// 팝업 표시
fnShowPopup(popupList) {
for (let popup of popupList) {
let count = false;
const popupCookies = this.$cookies.get("popup");
if (popupCookies.length > 0) {
for (let cookie of popupCookies) {
if (popup.popupId == cookie) {
count = true;
}
}
}
if (!count) {
let size = "width=" + popup.wdthLen + ", height=" + popup.vrtcLen;
window.open(
"/cmmn/popup.page?popupId=" + popup.popupId,
"_blank",
size + ", scrollbars=no, resizable=no, toolbars=no, menubar=no"
);
}
}
},
stopAutoplay() {
if (this.visualSlide) {
this.visualSlide.autoplay.stop();
}
},
// 자동 슬라이드 전환 시작하기
startAutoplay() {
if (this.visualSlide) {
this.visualSlide.autoplay.start();
this.visualSlide.update();
}
},
},
mounted() {
// Swiper 인스턴스 초기화
this.visualSlide = new Swiper('.visual-zone .swiper-container', {
loop: true, // 슬라이드 반복 여부
autoplay: {
delay: 2500, // 2.5초마다 자동으로 슬라이드 전환
disableOnInteraction: false, // 사용자가 슬라이드 조작 후에도 자동 전환 유지
},
pagination: {
el: '.swiper-pagination', // 페이지네이션 요소
clickable: true, // 페이지네이션 클릭 가능
},
navigation: {
nextEl: '.swiper-button-next', // 다음 버튼
prevEl: '.swiper-button-prev', // 이전 버튼
},
});
this.cardnewsSlide = new Swiper('.cardnews-zone .swiper-container', {
loop: true, // 슬라이드 반복 여부
slidesPerView: 3, // 한 번에 보여줄 슬라이드 개수
spaceBetween: 25,
navigation: {
nextEl: '.swiper-button-next', // 다음 버튼
prevEl: '.swiper-button-prev', // 이전 버튼
},
});
}
};
</script>