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/data-img-text.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">
<!-- <button @click="uploadFile">파일 업로드</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: ' [공유] AI 디지털교과서 개발 가이드라인 설명회 발표자료(230907)',
views: 1234,
date: '2023/10/27',
content: '안녕하세요. 한국교육학술 정보원입니다. 9.7(목) 진행한 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;
}
@media all and (max-width: 479px) {
.Data-dtail section:nth-child(1) {
grid-template-columns: 1fr;
padding: 2rem;
}
.Data-dtail h1 {
padding: 0.5rem;
}
.Data-dtail p {
padding: 1rem;
}
}
@media all and (min-width: 480px) and (max-width: 767px) {
.Data-dtail section:nth-child(1) {
grid-template-columns: 1fr;
padding: 2rem;
}
.Data-dtail h1 {
padding: 0.5rem;
}
.Data-dtail p {
padding: 1rem;
}
}
@media all and (min-width: 767px) and (max-width: 1023px) {}
@media all and (min-width: 1023px) and (max-width: 1268px) {}
</style>