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.
126 lines
3.1 KiB
126 lines
3.1 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('africanVideo') }}
|
|
</NBreadcrumbItem>
|
|
</NBreadcrumb>
|
|
</div>
|
|
<!-- 视频列表-->
|
|
<div class="africen-list w-1200 mt-6 py-6">
|
|
<NuxtLink v-for="(item, index) in videoDataList" :to="localePath('/video-detail/' + item.id)" class="africen inline-block cursor-pointer ">
|
|
<div class="africen-img-box" @mouseleave="item.play = false" @mouseover="item.play = true" >
|
|
<video v-if="item.play" autoplay muted class="africen-img-cover" :src="item.videoUrl"/>
|
|
<video v-if="!item.picUrl" v-show="!item.play" muted class="africen-img" :src="item.videoUrl"/>
|
|
<img v-if="item.picUrl" v-show="!item.play" muted class="africen-img" :src="item.picUrl"/>
|
|
<div class="africen-video-desc">
|
|
<div class="view-num pl-2">
|
|
<p class="flex items-center"> <NIcon :component="VideocamOutline" size="25"></NIcon> <span class="ml-1">{{item.viewsCount}}</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="africen-title py-2">{{locale =='zh'?item.title:item.titleEn}}</p>
|
|
<div class="africen-desc">
|
|
<div class="africen-time">{{dayjs(item.createTime).format('YYYY-MM-DD')}}</div>
|
|
</div>
|
|
</NuxtLink>
|
|
|
|
</div>
|
|
|
|
<!-- 分页-->
|
|
<div class="flex justify-center py-8">
|
|
<NPagination
|
|
:item-count="videoItemCount"
|
|
@update-page="videoPageChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
|
|
import {NBreadcrumb, NBreadcrumbItem, NIcon, NPagination} from "naive-ui";
|
|
import {getVideoList} from "~/api/video";
|
|
import {VideocamOutline} from "@vicons/ionicons5";
|
|
const dayjs = useDayjs()
|
|
const {locale} = useI18n()
|
|
const localePath = useLocalePath()
|
|
//获取视频
|
|
const videoPageParams = {
|
|
pageNo: 1,
|
|
pageSize: 10
|
|
}
|
|
|
|
const videoItemCount = ref(0)
|
|
const videoDataList = ref<any[]>([])
|
|
const videoPageChange = (pageNo: number) => {
|
|
getVideoList(videoPageParams).then( (res: any) => {
|
|
videoDataList.value = res.list
|
|
videoItemCount.value = res.total
|
|
})
|
|
|
|
}
|
|
videoPageChange(1)
|
|
</script>
|
|
<style scoped>
|
|
.africen-list{
|
|
background-color: #FFFFFF;
|
|
|
|
}
|
|
.africen {
|
|
width: 280px;
|
|
margin: 0 10px 30px;
|
|
}
|
|
.africen-title{
|
|
height: 50px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
line-height: 20px;
|
|
}
|
|
.africen-img-box {
|
|
width: 100%;
|
|
height: 175px;
|
|
position: relative;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.africen-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
z-index: 1;
|
|
}
|
|
|
|
.africen-img-cover{
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
z-index: 2;
|
|
}
|
|
|
|
.africen-video-desc {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 25px;
|
|
line-height: 20px;
|
|
background-image: linear-gradient(to top, rgba(0, 0, 0, .5), transparent);
|
|
color: #FFFFFF;
|
|
z-index: 10;
|
|
|
|
}
|
|
|
|
|
|
|
|
.africen-time {
|
|
color: #9A9A9A;
|
|
}
|
|
|
|
</style>
|