|
|
|
@ -1,31 +1,97 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="container"> |
|
|
|
|
<div class="news-list"> |
|
|
|
|
<div class="item" v-for="i in 10" :key="i"> |
|
|
|
|
<div class="left"><div class="year">2024-10</div><div class="day">10</div></div> |
|
|
|
|
<div class="right"> |
|
|
|
|
<div class="title">新闻标题</div> |
|
|
|
|
<div class="editor">编辑 | 无糖</div> |
|
|
|
|
<div class="description" |
|
|
|
|
>小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本</div |
|
|
|
|
<div class="item" v-for="i in newList" :key="i"> |
|
|
|
|
<div class="left" |
|
|
|
|
><div class="year">{{ i.publishTime.split('-')[0] }}-{{ i.publishTime.split('-')[1] }}</div |
|
|
|
|
><div class="day">{{ i.publishTime.split(' ')[0].split('-')[2] }}</div></div |
|
|
|
|
> |
|
|
|
|
<div class="get-info">查看详情</div> |
|
|
|
|
<div class="right"> |
|
|
|
|
<div class="title">{{ i.title }}</div> |
|
|
|
|
<div class="editor">{{ i.source }}</div> |
|
|
|
|
<div class="description"><div v-html="i.info"></div></div> |
|
|
|
|
<div class="get-info" @click="onGetInfo(i)">查看详情</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<!-- 分页 --> |
|
|
|
|
<div class="pagination"> <Pagination :current="current" :pageSize="page.pageSize" :total="total" show-less-items @change="onChange" /></div> |
|
|
|
|
</div> |
|
|
|
|
<!-- 栏目 --> |
|
|
|
|
<div class="column-list"> |
|
|
|
|
<div class="title">栏目列表</div> |
|
|
|
|
<div class="list"> |
|
|
|
|
<div class="item">全部</div> |
|
|
|
|
<div class="item">项目申报</div> |
|
|
|
|
<div class="item">新闻列表</div> |
|
|
|
|
<div class="item" @click="getindexallarticleEvent">全部</div> |
|
|
|
|
<div class="item" v-for="i in newColumnList" :key="i.id" @click="getMyNewsList(i)">{{ i.name }}</div> |
|
|
|
|
<!-- <div class="item">项目申报</div> |
|
|
|
|
<div class="item">新闻列表</div> --> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script setup></script> |
|
|
|
|
<script setup> |
|
|
|
|
import { Pagination } from 'ant-design-vue'; |
|
|
|
|
|
|
|
|
|
import { getindexcolumn, getindexarticle, getindexallarticle } from '@/api/mainHome'; |
|
|
|
|
import { ref } from 'vue'; |
|
|
|
|
import { useRouter } from 'vue-router'; |
|
|
|
|
|
|
|
|
|
const router = useRouter(); |
|
|
|
|
const current = ref(1); |
|
|
|
|
const total = ref(0); |
|
|
|
|
const page = ref({ |
|
|
|
|
pageSize: 10, |
|
|
|
|
pageNo: 1, |
|
|
|
|
}); |
|
|
|
|
const newColumnList = ref([]); |
|
|
|
|
const getindexcolumnEvent = async () => { |
|
|
|
|
const res = await getindexcolumn(); |
|
|
|
|
console.log(res); |
|
|
|
|
newColumnList.value = res; |
|
|
|
|
}; |
|
|
|
|
getindexcolumnEvent(); |
|
|
|
|
|
|
|
|
|
const getMyNewsList = (item) => { |
|
|
|
|
console.log(item); |
|
|
|
|
getindexarticleEvent(item.id); |
|
|
|
|
}; |
|
|
|
|
const newList = ref([]); |
|
|
|
|
const getindexarticleEvent = async (id) => { |
|
|
|
|
columnId.value = id; |
|
|
|
|
const res = await getindexarticle({ columnId: id, ...page.value }); |
|
|
|
|
console.log(res); |
|
|
|
|
newList.value = res.records; |
|
|
|
|
total.value = res.total; |
|
|
|
|
}; |
|
|
|
|
const columnId = ref(''); |
|
|
|
|
const onChange = (page) => { |
|
|
|
|
console.log(page); |
|
|
|
|
page.pageNo = page; |
|
|
|
|
if (columnId.value) { |
|
|
|
|
getindexarticleEvent(columnId.value); |
|
|
|
|
} else { |
|
|
|
|
getindexallarticleEvent(); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
const getindexallarticleEvent = async () => { |
|
|
|
|
const res = await getindexallarticle(); |
|
|
|
|
console.log(res); |
|
|
|
|
newList.value = res.records; |
|
|
|
|
total.value = res.total; |
|
|
|
|
}; |
|
|
|
|
getindexallarticleEvent(); |
|
|
|
|
|
|
|
|
|
// 查看详情 |
|
|
|
|
const onGetInfo = (item) => { |
|
|
|
|
console.log(item); |
|
|
|
|
router.push({ |
|
|
|
|
path: '/main-home/newsInfo', |
|
|
|
|
query: { |
|
|
|
|
id: item.id, |
|
|
|
|
}, |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped lang="less"> |
|
|
|
|
.container { |
|
|
|
@ -35,13 +101,15 @@ |
|
|
|
|
display: flex; |
|
|
|
|
margin-top: 50px; |
|
|
|
|
.news-list { |
|
|
|
|
position: relative; |
|
|
|
|
width: calc(1200px - 415px); |
|
|
|
|
margin-right: 30px; |
|
|
|
|
|
|
|
|
|
min-height: 755px; |
|
|
|
|
padding-bottom: 80px; |
|
|
|
|
.item { |
|
|
|
|
display: flex; |
|
|
|
|
width: 100%; |
|
|
|
|
border-bottom: 2px solid #CCC; |
|
|
|
|
border-bottom: 2px solid #ccc; |
|
|
|
|
padding-bottom: 45px; |
|
|
|
|
margin-top: 40px; |
|
|
|
|
.left { |
|
|
|
@ -120,10 +188,21 @@ |
|
|
|
|
color: #555; |
|
|
|
|
height: 50px; |
|
|
|
|
line-height: 50px; |
|
|
|
|
border-bottom: 1px solid #D9D9D9; |
|
|
|
|
border-bottom: 1px solid #d9d9d9; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.pagination { |
|
|
|
|
// background-color: #fff; |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: -20px; |
|
|
|
|
left: 50%; |
|
|
|
|
transform: translateX(-50%); |
|
|
|
|
margin-top: 20px; |
|
|
|
|
height: 70px; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|