|
|
|
|
@ -32,7 +32,6 @@ |
|
|
|
|
</el-aside> |
|
|
|
|
<!-- 新闻内容--> |
|
|
|
|
<el-main> |
|
|
|
|
<div class="mainContainer"> |
|
|
|
|
<div class="card-header"> |
|
|
|
|
<el-card shadow="hover"> |
|
|
|
|
<div style="height:33px"> |
|
|
|
|
@ -53,7 +52,6 @@ |
|
|
|
|
<span>{{ nowTimeNewsData.content }}</span> |
|
|
|
|
</el-scrollbar> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</el-main> |
|
|
|
|
</el-container> |
|
|
|
|
</div> |
|
|
|
|
@ -65,6 +63,7 @@ import { |
|
|
|
|
queryEssay, |
|
|
|
|
} from "@/api/user/news.js" |
|
|
|
|
import {ref,onMounted} from 'vue'; |
|
|
|
|
import {ElMessage} from 'element-plus' |
|
|
|
|
import useUserStore from "@/store/modules/user"; |
|
|
|
|
import {useRouter} from "vue-router"; |
|
|
|
|
const router = useRouter(); |
|
|
|
|
@ -74,6 +73,13 @@ const column =ref([]) |
|
|
|
|
const CategoryList = async () => { |
|
|
|
|
const res = await queryCategory() |
|
|
|
|
column.value = res.data |
|
|
|
|
console.log('栏目数组长度：',column.value.length) |
|
|
|
|
// 初始化时加载第一个栏目的第一条新闻 |
|
|
|
|
if (column.value.length > 0) { |
|
|
|
|
await EssayList(column.value[0].id); |
|
|
|
|
} else { |
|
|
|
|
await ElMessage.warning('没有找到任何栏目！'); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// 渲染 |
|
|
|
|
onMounted(() => { |
|
|
|
|
@ -81,10 +87,7 @@ onMounted(() => { |
|
|
|
|
}) |
|
|
|
|
const essay = ref([]) |
|
|
|
|
const nowTimeNewsData = ref({}) |
|
|
|
|
//新闻详细信息获取 |
|
|
|
|
const newViews = (listObject)=> { |
|
|
|
|
nowTimeNewsData.value = { ...listObject } |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//新闻文章查询 |
|
|
|
|
const EssayList = async (id)=>{ |
|
|
|
|
const response = await queryEssay(id) |
|
|
|
|
@ -93,8 +96,11 @@ const EssayList = async (id)=>{ |
|
|
|
|
newViews(essay.value[0]); // 显示第一条新闻 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
//新闻详细信息获取 |
|
|
|
|
const newViews = (listObject)=> { |
|
|
|
|
nowTimeNewsData.value = { ...listObject } |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
|
.header_title{ |
|
|
|
|
font-size: 30px; |
|
|
|
|
@ -103,10 +109,7 @@ const EssayList = async (id)=>{ |
|
|
|
|
margin: auto; |
|
|
|
|
background-image: linear-gradient(60deg,honeydew,powderblue,honeydew); |
|
|
|
|
} |
|
|
|
|
.el-aside { |
|
|
|
|
height: 100vh; /* 设置高度为视窗高度 */ |
|
|
|
|
overflow-y: auto; /* 当内容超出时显示滚动条 */ |
|
|
|
|
} |
|
|
|
|
/*侧边*/ |
|
|
|
|
.header-flex-container { |
|
|
|
|
display: flex; |
|
|
|
|
/*align-items: center; !* 垂直居中 *!*/ |
|
|
|
|
@ -114,18 +117,16 @@ const EssayList = async (id)=>{ |
|
|
|
|
gap: 10px; |
|
|
|
|
background: white; |
|
|
|
|
margin-top: 20px; |
|
|
|
|
height: 81vh; |
|
|
|
|
height: 810px; |
|
|
|
|
overflow-y: auto; |
|
|
|
|
} |
|
|
|
|
.header-flex-container::-webkit-scrollbar { |
|
|
|
|
width: 0px; /* 滚动条宽度 */ |
|
|
|
|
} |
|
|
|
|
.header-list { |
|
|
|
|
/*display: flex; !* 使li元素水平排列 *!*/ |
|
|
|
|
flex-wrap: wrap; /* 如果需要换行 */ |
|
|
|
|
/*align-items: center; !* 如果需要，也可以使li元素垂直居中 *!*/ |
|
|
|
|
margin: 0; /* 移除默认外边距 */ |
|
|
|
|
padding: 0; /* 移除默认内边距 */ |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
margin-left: 50px; |
|
|
|
|
padding: 0; |
|
|
|
|
} |
|
|
|
|
.header-list span{ |
|
|
|
|
font-size: 17px; |
|
|
|
|
@ -146,6 +147,17 @@ const EssayList = async (id)=>{ |
|
|
|
|
.header-column span{ |
|
|
|
|
color: #222222; |
|
|
|
|
} |
|
|
|
|
/*内容*/ |
|
|
|
|
.scrollbarContent{ |
|
|
|
|
height:680px; |
|
|
|
|
border: 1px; |
|
|
|
|
background: white; |
|
|
|
|
border-radius: 1%; |
|
|
|
|
font-size: 20px; |
|
|
|
|
padding: 10px; |
|
|
|
|
overflow-y: auto; |
|
|
|
|
line-height: 2.0; |
|
|
|
|
} |
|
|
|
|
.contentTitle{ |
|
|
|
|
color: firebrick; |
|
|
|
|
font-size: 30px; |
|
|
|
|
@ -178,14 +190,5 @@ const EssayList = async (id)=>{ |
|
|
|
|
.flex-container p:last-child { |
|
|
|
|
margin-right: 0; |
|
|
|
|
} |
|
|
|
|
.scrollbarContent{ |
|
|
|
|
height:68vh; |
|
|
|
|
border: 1px; |
|
|
|
|
background: white; |
|
|
|
|
border-radius: 1%; |
|
|
|
|
font-size: 20px; |
|
|
|
|
padding: 10px; |
|
|
|
|
overflow-y: auto; |
|
|
|
|
line-height: 2.0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
</style> |
fwb
3 months ago