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="w1400">
<div class="noti-bos">
<section class="main-sec sec1">
<!-- <div class="main-content"> -->
<div class="flex">
<!-- 자료집 비주얼 -->
<div class="data-b">
<div class="w1400">
<div class="data-b-b">
<!-- 자료집 텍스트 -->
<div class="data-text">
<img src="../../../../resources/jpg/notic-logo-img.png" alt="">
<p>공지사항</p>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="data-select">
<select name="data-table-sild" id="data-table-sild">
<option value="전체" selected>전체</option>
<option value="기본순">기본순</option>
<option value="업로드순" disabled>업로드순</option>
<option value="조회순">조회순</option>
</select>
<div class="input-group">
<input type="text" class="input" onfocus="this.value=''; return true;" value="검색어를 입력해주세요.">
<input class="button--submit" value="검색" type="submit">
</div>
</div>
<section class="noti-sec">
<div class="noti-sec-table">
<!-- <table>
<th>no</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
<th>조회수</th>
<tr>
<td>1</td>
<td>AI 디지털교과서 개발 기술지원 수요조사</td>
<td>KERIS</td>
<td>2023-09-12</td>
<td>129</td>
</tr>
<tr>
<td>1</td>
<td>AI 디지털교과서 개발 기술지원 수요조사</td>
<td>KERIS</td>
<td>2023-09-12</td>
<td>129</td>
</tr>
<tr>
<td>1</td>
<td>AI 디지털교과서 개발 기술지원 수요조사</td>
<td>KERIS</td>
<td>2023-09-12</td>
<td>129</td>
</tr>
<tr>
<td>1</td>
<td>AI 디지털교과서 개발 기술지원 수요조사</td>
<td>KERIS</td>
<td>2023-09-12</td>
<td>129</td>
</tr>
<tr>
<td>1</td>
<td>AI 디지털교과서 개발 기술지원 수요조사</td>
<td>KERIS</td>
<td>2023-09-12</td>
<td>129</td>
</tr>
<tr>
<td>1</td>
<td>AI 디지털교과서 개발 기술지원 수요조사</td>
<td>KERIS</td>
<td>2023-09-12</td>
<td>129</td>
</tr>
<tr>
<td>1</td>
<td>AI 디지털교과서 개발 기술지원 수요조사</td>
<td>KERIS</td>
<td>2023-09-12</td>
<td>129</td>
</tr>
<tr>
<td>1</td>
<td>AI 디지털교과서 개발 기술지원 수요조사</td>
<td>KERIS</td>
<td>2023-09-12</td>
<td>129</td>
</tr>
<tr>
<td>1</td>
<td>AI 디지털교과서 개발 기술지원 수요조사</td>
<td>KERIS</td>
<td>2023-09-12</td>
<td>129</td>
</tr>
<tr>
<td>1</td>
<td>AI 디지털교과서 개발 기술지원 수요조사</td>
<td>KERIS</td>
<td>2023-09-12</td>
<td>129</td>
</tr>
</table> -->
<table>
<th>NO</th>
<th>제목</th>
<th>날짜</th>
<th>조회수</th>
<tr v-for="(post, index) in posts" :key="post.id" @click="goToDetailPage(post.id)">
<td>{{ index + 1 }}</td>
<td>{{ post.title }}</td>
<td>{{ post.date }}</td>
<td>{{ post.views }}</td>
</tr>
</table>
</div>
</section>
</div>
</div>
</template>
<script>
export default {
data() {
return {
posts: [
{ id: 1, title: '[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인 ', date: '2023/10/19', views: 588 },
{ id: 2, title: '[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인 ', date: '2023/10/20', views: 789 },
{ id: 3, title: '[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인 ', date: '2023/10/21', views: 123 },
{ id: 3, title: '[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인 ', date: '2023/10/21', views: 123 },
{ id: 3, title: '[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인 ', date: '2023/10/21', views: 123 },
{ id: 3, title: '[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인 ', date: '2023/10/21', views: 123 },
{ id: 3, title: '[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인 ', date: '2023/10/21', views: 123 },
{ id: 3, title: '[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인 ', date: '2023/10/21', views: 123 },
{ id: 3, title: '[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인 ', date: '2023/10/21', views: 123 },
{ id: 3, title: '[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인 ', date: '2023/10/21', views: 123 },
{ id: 3, title: '[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인 ', date: '2023/10/21', views: 123 },
{ id: 3, title: '[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인 ', date: '2023/10/21', views: 123 },
// 추가적인 게시글 데이터
]
}
},
methods: {
goToDetailPage(postId) {
this.$router.push('/NoticeDtail.page');
}
},
watch: {
},
computed: {
},
mounted() {
}
}
</script>
<style scoped>
.noti-bos {
width: 100%;
}
.noti-sec {
width: 100%;
padding: 12rem 3rem;
}
.noti-sec-table table {
background-color: white;
border-bottom: 1px solid #cccccc;
}
.noti-sec-table th {
padding: 1.5rem;
color: white;
background-color: #007aff;
font-size: 1.5rem;
}
.noti-sec-table td {
padding: 1.5rem;
font-size: 1.5rem;
border-bottom: 1px solid #cccccc;
text-align: center;
}
</style>