<template>
    <div class="body">
        <div class="container">
            <h2 class="details">公告详情</h2>
            <h3 class="title">{{notical.title}}</h3>
            <div class="date">{{notical.time}}</div>
            <p class="content">{{notical.content}}</p>
        </div>
    </div>
</template>

<script>
import { detailNotice } from "@/api/notice/notice"
export default {
    data() {
        return {
            notical: {
                id: '',
                title: '',
                time: '',
                content: ''
            }
        }
    },
    created() {
        console.log(this.$route.params.id);
        let con = {
            id: this.$route.params.id
        }
        detailNotice(con).then(({data}) => {
            this.notical = data[0];
        })
    }
}
</script>


<style scoped>
.container {
    width: 500px;
    min-height: 360px;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 20px 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -80%);
}

.details {
    text-align: center;
}

.date {
    font-weight: 200;
}

.content {
    text-indent: 2em;
}
</style>