ContestPortal/src/views/news/components/newsDetail.vue

<template>
  <div class="container">
    <el-button style="margin-left: 93%" @click="backHandle" type="success">
      返回
    </el-button>
    <el-divider />
    <p class="list-title">{{ data.title }}</p>
    <p class="list-summary" v-html="data.content"></p>
    <div class="center-image">
      <img
        class="list-image"
        :src="setImageUrl(data.comimg)"
        alt="News Image"
      
      />
    </div>
    <p class="list-time">{{ data.publishTime }}</p>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { queryEssayApi } from '@/api/news'

const router = useRouter()
const route = useRoute()
const backHandle = () => {
  router.go(-1)
}
const data = ref({})
//通过id获取文章详细信息
queryEssayApi(route.params.id).then((res) => {
  data.value = res.result[0]
  console.log(`当前id为${route.params.id}新闻详细信息`, data.value)
})


const setImageUrl = (url: string) => {
  return import.meta.env.VITE_APP_BASE_API + '/sys/common/static/' + url
}
</script>

<style scoped>
.container {
  width: 60%;
  margin: auto;
  /* height: 98vh; */
  /* overflow-y: scroll; */
  padding: 0;
  display: block;
  margin-top: 100px;
}
.container::-webkit-scrollbar {
  width: 0;
}
.list-title {
  font-size: 25px;
  font-weight: 600;
  text-align: center;
}
.list-summary {
  font-size: 20px;
  color: #8c8b8b;
  margin-top: 30px;
  line-height: 1.9;
}
.center-image {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.list-image {
  width: 500px;
  height: 200px;
  margin-top: 20px;
}
.list-time {
  font-size: 16px;
  color: #999999;
  margin-top: 60px;
  margin-left: 84%;
}
</style>