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.
102 lines
2.4 KiB
102 lines
2.4 KiB
<template>
|
|
<div>
|
|
<div class="header-height"></div>
|
|
<div class="w-1200 py-8 nav">
|
|
<NBreadcrumb>
|
|
<NBreadcrumbItem>
|
|
<NuxtLink :to="localePath('/')">{{ $t('homePage') }}</NuxtLink>
|
|
</NBreadcrumbItem>
|
|
<NBreadcrumbItem>
|
|
{{ $t('news') }}
|
|
</NBreadcrumbItem>
|
|
</NBreadcrumb>
|
|
</div>
|
|
|
|
<!-- 文章列表-->
|
|
<div class="w-1440">
|
|
<div class="w-1200">
|
|
<NuxtLink v-for="(item, index) in articleDataList" :to="localePath('/news-detail/' + item.id)" class="article flex justify-between">
|
|
<div class="flex flex-col justify-between">
|
|
<p class="article-title line-clamp-2">{{ locale== 'zh'?item.title:item.titleEn}}</p>
|
|
<NSpace class="article-footer">
|
|
<span class="">{{locale== 'zh'? item.source: item.sourceEn}}</span>
|
|
<span class="">{{item.viewsCount}} {{$t('viewsCount')}}</span>
|
|
<span class="">{{dayjs(item.createTime).format('YYYY-MM-DD')}}</span>
|
|
</NSpace>
|
|
</div>
|
|
<img :src="item.picUrl" class="article-img" />
|
|
</NuxtLink>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 分页-->
|
|
<div class="flex justify-center py-8">
|
|
<NPagination
|
|
:itemCount="itemCount"
|
|
:page-size="10"
|
|
@update-page="queryList"
|
|
/>
|
|
</div>
|
|
|
|
|
|
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {NBreadcrumb, NBreadcrumbItem, NSpace, NPagination, NThing} from 'naive-ui'
|
|
import {getArticleList} from "~/api/article";
|
|
const dayjs = useDayjs()
|
|
const {locale} = useI18n()
|
|
const localePath = useLocalePath()
|
|
useHead({
|
|
title: `金梦网-最新资讯`
|
|
})
|
|
const pageParams = {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
categoryId: 28
|
|
}
|
|
const itemCount = ref(0)
|
|
const articleDataList = ref<any[]>([])
|
|
const queryList = (pageNo: number) => {
|
|
pageParams.pageNo = pageNo
|
|
getArticleList(pageParams).then((res: any)=> {
|
|
articleDataList.value = res.list
|
|
itemCount.value = res.total
|
|
})
|
|
}
|
|
queryList(1)
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.data-list {
|
|
|
|
}
|
|
.article{
|
|
border-bottom: 1px solid rgba(137, 107, 52, 0.15);
|
|
padding: 38px 0 28px;
|
|
}
|
|
.article-img {
|
|
width: 260px;
|
|
height: 165px;
|
|
border-radius: 8px;
|
|
}
|
|
.article-title{
|
|
width: 859px;
|
|
height: 92px;
|
|
line-height: 45px;
|
|
color: rgba(51, 51, 51, 1);
|
|
font-size: 20px;
|
|
text-align: left;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.article-footer {
|
|
font-size: 14px;
|
|
color: #9A9A9A;
|
|
}
|
|
.nav {
|
|
border-bottom: 1px solid rgba(137, 107, 52, 0.15);
|
|
}
|
|
</style>
|