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="completeImageUrl" alt="News Image"  v-default-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(data.value,'data')
})

// 定义一个计算属性来处理图片路径
const completeImageUrl = computed(() => {
  if (data.value.comimg) {
    return new URL(data.value.comimg, 'https://localhost:18085/jeecg-boot/').href;
  }
  return '';
});
</script>

<style scoped>
.container{
  width: 60%;
  margin: auto;
  height: 98vh;
  overflow-y: scroll;
  padding: 0;
  display: block;
}
.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>