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.
140 lines
3.2 KiB
140 lines
3.2 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('service') }}
|
|
</NBreadcrumbItem>
|
|
</NBreadcrumb>
|
|
</div>
|
|
|
|
<!-- 文章列表-->
|
|
<div class="w-1440">
|
|
<div class="w-1200">
|
|
<NuxtLink v-for="item in articleDataList" :to="localePath('/service-detail/' + item.id)" class="product flex justify-between py-8">
|
|
<div class="flex">
|
|
<img class="product-img" :src="item.picUrl"/>
|
|
<div class="ml-8">
|
|
<p class="product-title">{{locale == 'zh'?item.title: item.titleEn}}</p>
|
|
<p class="product-content">{{locale == 'zh'?item.content: item.contentEn}}</p>
|
|
<p class="product-desc"><span style="color: #906D2C;">{{item.viewsCount}}</span> {{$t('viewsCount')}} <span class="pl-4">{{dayjs(item.createTime).format('YYYY-MM-DD')}}</span></p>
|
|
</div>
|
|
</div>
|
|
<p class="btn-detail">{{$t('detail')}}</p>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 分页-->
|
|
<div class="flex justify-center py-8">
|
|
<NPagination
|
|
:item-count="itemCount"
|
|
@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: 31
|
|
}
|
|
const itemCount = ref(0)
|
|
const articleDataList = ref<any[]>([])
|
|
const queryList = (pageNo: number) => {
|
|
pageParams.pageNo = pageNo
|
|
getArticleList(pageParams).then((res: any)=> {
|
|
if(process.client) {
|
|
res.list.forEach(item => {
|
|
// 创建一个临时的div元素
|
|
var tempDiv = document.createElement('div');
|
|
|
|
tempDiv.innerHTML = item.content;
|
|
var plainText = tempDiv.textContent;
|
|
item.content = plainText
|
|
|
|
tempDiv.innerHTML = item.contentEn;
|
|
plainText = tempDiv.textContent;
|
|
item.contentEn = plainText
|
|
|
|
})
|
|
}
|
|
articleDataList.value = res.list
|
|
itemCount.value = res.total
|
|
})
|
|
}
|
|
queryList(1)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.data-list {
|
|
|
|
}
|
|
|
|
.btn-detail {
|
|
width: 60px;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
border-radius: 4px;
|
|
background: linear-gradient(180deg, rgba(229, 203, 152, 1) 0%, rgba(250, 235, 201, 1) 100%);
|
|
color: rgba(137, 107, 52, 1);
|
|
font-size: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.product-title {
|
|
font-size: 20px;
|
|
color: #333333;
|
|
width: 420px;
|
|
}
|
|
|
|
.product-content {
|
|
font-size: 16px;
|
|
color: #6C6C6C;
|
|
height: 40px;
|
|
line-height: 20px;
|
|
margin: 10px 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: 420px;
|
|
|
|
}
|
|
|
|
.product-desc {
|
|
font-size: 12px;
|
|
color: #999999;
|
|
width: 420px;
|
|
|
|
}
|
|
|
|
.product-img {
|
|
width: 200px;
|
|
height: 120px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.product-more {
|
|
color: rgba(229, 203, 152, 1);
|
|
font-size: 14px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
}
|
|
.nav {
|
|
border-bottom: 1px solid rgba(137, 107, 52, 0.15);
|
|
}
|
|
</style>
|