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">{{ data.summary }}</p>
    <div class="center-image">
      <img class="list-image" :src="data.imageUrl" alt="News Image">
    </div>
    <p class="list-time">{{ data.date }}</p>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import {useRoute, useRouter} from "vue-router";
const router = useRouter();
const route = useRoute();
const backHandle = ()=>{
  router.go(-1);
}
const data = ref(route.query);
</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: 10px;
  line-height: 1.9;
}
.list-time{
  font-size: 16px;
  color: #999999;
  margin-top: 10px;
}
.center-image{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.list-image{
  width: 500px;
  height: 500px;
  margin-top: 20px;
}
</style>