You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
1.7 KiB
83 lines
1.7 KiB
<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>
|
|
|