<template>
  <div class="container">
    <div class="bread-container">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/news' }">学校动态</el-breadcrumb-item>
        <el-breadcrumb-item>{{ info.title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="news-card">
      <div class="news-top">
        <h1>{{ info.title }}</h1>
        <p class="news-info">
          <span>上传者：{{ info.createBy }}</span>
          <span>上传时间：{{ info.createTime }}</span>
        </p>
      </div>
      <div class="news-content" v-html="info.content"> </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getTrendInfoAPI } from '@/apis/home'

const route = useRoute()
const id = route.params.id

const info = ref({})
const getTrendInfoData = async () => {
  const res = await getTrendInfoAPI(id)
  info.value = res.data
}

onMounted(() => {
  getTrendInfoData()
})

</script>

<style lang="scss" scoped>
.container {
  .bread-container {
    padding: 25px 0;

    :deep(.el-breadcrumb__inner) {
      color: #fff;
      font-size: 16px;
    }

    :deep(.el-breadcrumb__separator) {
      color: #fff;
    }
  }

  .news-card {
    margin-top: 20px;
    padding: 20px;

    min-height: 600px;
    background-color: #FAEADF;
    border-radius: 10px;

    .news-top {
      text-align: center;

      .news-info {
        line-height: 60px;
        color: #A9A19B;

        span:nth-child(1) {
          margin-right: 20px;
        }
      }
    }

    .news-content {
      margin: 0 20px;

      :deep(p) {
        text-indent: 2em;
        line-height: 30px;
      }
    }

  }

}
</style>