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">
<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-dtail">
<section>
<h1>{{ post.title }}</h1>
<p>조회수 {{ post.views }}</p>
<p>작성일 {{ post.date }}</p>
</section>
<section class="dtail-ing">
<div>{{ post.content }}</div>
<div>
<i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i>
{{ post.pick }}
</div>
</section>
<!-- <section class="dtail-button">
<input type="file" id="file" style="display: none;">
<label for="file" class="data-file-bt">파일업로드</label>
</section> -->
<section class="dtail-navigation">
<button>다음글</button>
<button>이전글</button>
</section>
<section class="dtail-navigation-in">
<button @click="goBack">목록</button>
</section>
<!-- <hr> -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
post: {}
};
},
mounted() {
const postId = this.$route.params.id;
this.fetchPostData(postId);
},
methods: {
goBack() {
this.$router.go(-1);
},
fetchPostData(postId) {
const dummyData = {
id: postId,
title: ' [공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인',
views: 1234,
date: '2023/10/27',
content: '안녕하세요? 한국교육학술정보원(KERIS)에서는 AI 디지털교과서 개발을 위해 개발 영역에 대한 기술지원(교육·컨설팅 등)을 계획하고 있습니다.이에, 개발사에서 희망하는 기술지원 영역에대한 수요 조사를 다음과 같이 실시하오니 많은 참여 바랍니다. [즐거움이 가득한 학습교재] 학생이 흥미를 가지고 즐겁게 공부할 수 있도록 학생의 경험과 수준에 맞는 교재를 개발하기 위해 항상 연구하며 노력하고 있습니다.',
pick: '155'
};
this.post = dummyData;
}
}
}
</script>
<style scoped>
section {
border-bottom: 1px solid #007aff;
}
.Data-dtail {
width: 100%;
padding: 0rem 3rem 12rem;
}
.sec1 {
border: 0px;
}
.Data-dtail section h1 {
color: #007aff;
}
.Data-dtail section:nth-child(1) {
/* border: 1px solid red; */
background-color: rgb(236, 236, 236);
border-top: 1px solid #007aff;
}
.Data-dtail section:nth-child(1) {
display: grid;
grid-template-columns: 73% 10% 14%;
}
.Data-dtail section:nth-child(3) {
/* padding: 3rem; */
font-size: 1.7rem;
}
.Data-dtail h1 {
padding: 3rem;
}
.Data-dtail p {
font-size: 1.5rem;
padding: 4rem 0rem 0rem 3rem;
/* border: 1px solid red; */
}
.dtail-ing {
padding: 3rem;
height: 40rem;
display: grid;
grid-template-columns: 1fr;
align-content: space-between;
}
.dtail-ing div {
font-size: 1.7rem;
}
.dtail-button {
padding: 3rem;
}
hr {
border: 0.5px solid #007aff;
}
.data-file-bt {
cursor: pointer;
}
.dtail-navigation {
/* border: 1px solid red; */
/* padding: 3r/em; */
display: grid;
grid-template-columns: 1fr;
}
.dtail-navigation button {
padding: 2rem 3rem;
text-align: left;
font-family: "Pretendard-Regular";
color: #007aff;
font-size: 1.5rem;
font-weight: 600;
}
.dtail-navigation button:nth-child(1) {
border-bottom: 0.5px solid #787878;
}
.dtail-navigation-in {
border: 0px;
padding: 3rem 0;
text-align: right;
}
.dtail-navigation-in button {
padding: 1.5rem 5rem;
background-color: #007aff;
color: white;
font-family: "Pretendard-Regular";
border-radius: 1.5rem;
}
</style>