<template>
  <el-button @click="backHandle" type="success">返回</el-button>
  <div style="margin-top: 20px;margin-left: 50px;margin-right: 50px">
    <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>
.list-title{
  font-size: 25px;
  font-weight: 600;
}
.list-summary{
  font-size: 20px;
  color: #8c8b8b;
  margin-top: 10px;
}
.list-time{
  font-size: 16px;
  color: #999999;
  margin-top: 10px;
}
.center-image{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.list-image{
  width: 500px;
  margin-top: 20px;
}
</style>