Skip to content

C
corporate-culture-qd
Commit 0fa41ff6 by lijiabin
Options

【代码优化 11710】 refactor: 单独抽离出来一个视频卡片，在多页面使用

parent f2dec14d
Showing with 156 additions and 473 deletions
src/components/common/VideoCard/index.vue 0 → 100644
<template>
<div
class="group relative rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer"
>
<div class="relative overflow-hidden">
<img
:src="item.faceUrl"
:class="[
'w-full object-cover group-hover:scale-105 transition-transform duration-500',
isFromYaPage ? 'h-36 xl:h-44' : 'aspect-video',
]"
/>
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
<!-- 推荐角标 -->
<div
v-if="item.isRecommend"
class="absolute top-0 left-0 w-15 h-7 bg-#FFF9B9 flex items-center justify-center border-2px border-solid border-#f4f0eb rounded-tl-lg rounded-br-lg"
>
<img class="w-6" src="@/assets/img/culture/recommend.png" alt="" />
<div class="text-12px text-#000 line-height-12px">推荐</div>
</div>
<!-- 时长：ya 页常显；其它页仅桌面端显示 -->
<div
v-if="item.videoDuration && !smallerThanXl"
class="absolute bottom-3 right-3 bg-black/80 text-white px-2 py-1 rounded-lg text-xs"
>
{{ item.videoDuration }}
</div>
<!-- 数据 -->
<div class="absolute bottom-3 left-3 flex gap-3 text-white text-xs">
<div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
<el-icon class="text-sm"><IEpView /></el-icon>
<span>{{ Math.max(item.playCount ?? 0, item.viewCount) }}</span>
</div>
<div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
<el-icon class="text-sm"><IEpChatDotRound /></el-icon>
<span>{{ item.replyCount }}</span>
</div>
<div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
<el-icon class="text-sm"><IEpStar /></el-icon>
<!-- 后端两个字段名不一致，兜底兼容 -->
<span>{{ item.collectCount ?? item.collectionCount ?? 0 }}</span>
</div>
</div>
</div>
<div class="p-3 xl:p-4">
<h3
class="font-semibold text-base mb-2 group-hover:text-blue-600 transition-colors line-clamp-1"
>
{{ item.title }}
</h3>
<div class="flex items-center justify-between text-gray-500 text-xs">
<div class="flex items-center gap-2 max-w-55%">
<img :src="item.showAvatar" alt="" class="w-6 h-6 rounded-full object-cover" />
<el-tooltip :content="item.showName" placement="top">
<span class="font-medium line-clamp-1">{{ item.showName }}</span>
</el-tooltip>
</div>
<span>{{
smallerThanXl
? dayjs(time * 1000).format('YYYY-MM-DD')
: dayjs(time * 1000).format('YYYY-MM-DD HH:mm')
}}</span>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import dayjs from 'dayjs'
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
/** 视频卡所需字段（兼容 getVideoList 的 collectCount 与 getArticleList 的 collectionCount） */
interface VideoCardItem {
faceUrl: string
isRecommend?: boolean | number
videoDuration?: string
playCount?: number
viewCount: number
replyCount: number
collectCount?: number
collectionCount?: number
title: string
showAvatar?: string
showName?: string
publishTime?: number
createTime?: number
}
const { item, isFromYaPage = false } = defineProps<{
item: VideoCardItem
/** 是否来自 ya 页面：决定封面尺寸 + 时长是否常显 */
isFromYaPage?: boolean
}>()
const breakpoints = useBreakpoints(breakpointsTailwind)
const smallerThanXl = breakpoints.smaller('xl')
// 发布时间优先取 publishTime，没有则取 createTime（单位：秒）
const time = computed(() => item.publishTime ?? item.createTime ?? 0)
</script>
src/components/common/YaColumnSection/index.vue
...@@ -4,7 +4,10 @@ ...@@ -4,7 +4,10 @@
:style="{ '--dynamic-color': item.color }" :style="{ '--dynamic-color': item.color }"
> >
<!-- 专栏标题栏 --> <!-- 专栏标题栏 -->
<div class="flex items-center justify-between px-5 py-3" :style="{ backgroundColor: item.color }"> <div
class="flex items-center justify-between px-5 py-3"
:style="{ backgroundColor: item.color }"
>
<h3 class="text-base font-semibold text-gray-800 flex items-center gap-2"> <h3 class="text-base font-semibold text-gray-800 flex items-center gap-2">
<span class="w-1 h-5 rounded-full bg-gray-700/60"></span> <span class="w-1 h-5 rounded-full bg-gray-700/60"></span>
{{ item.title }} {{ item.title }}
...@@ -24,12 +27,15 @@ ...@@ -24,12 +27,15 @@
v-if="item.yaColumnVoList.length" v-if="item.yaColumnVoList.length"
class="grid grid-cols-1 grid-cols-3 xl:grid-cols-3 gap-5" class="grid grid-cols-1 grid-cols-3 xl:grid-cols-3 gap-5"
> >
<YaArticleCard <template v-for="i in item.yaColumnVoList" :key="i.articleId">
v-for="i in item.yaColumnVoList" <!-- 默认渲染 YaArticleCard；调用方可用默认插槽自定义卡片内容 -->
:key="i.articleId" <slot :item="i">
:item="i" <YaArticleCard
@click="jumpToArticleDetailPage({ type: i.type, id: i.articleId })" :item="i"
/> @click="jumpToArticleDetailPage({ type: i.type, id: i.articleId })"
/>
</slot>
</template>
</div> </div>
<div v-else class="flex items-center justify-center h-48"> <div v-else class="flex items-center justify-center h-48">
<el-empty description="暂无数据" /> <el-empty description="暂无数据" />
...@@ -42,11 +48,11 @@ ...@@ -42,11 +48,11 @@
import { useRouter, type RouteLocationRaw } from 'vue-router' import { useRouter, type RouteLocationRaw } from 'vue-router'
import { useNavigation } from '@/hooks' import { useNavigation } from '@/hooks'
import YaArticleCard from '@/components/common/YaArticleCard/index.vue' import YaArticleCard from '@/components/common/YaArticleCard/index.vue'
import type { ColumnItemDto, InterviewItemDto } from '@/api/article/types' import type { YaArticleCardVo } from '@/api/article/types'
defineProps<{ defineProps<{
/** 一个专栏/专访分区的完整数据 */ /** 一个专栏/专访/视频分区的完整数据 */
item: ColumnItemDto | InterviewItemDto item: { title: string; color?: string; yaColumnVoList: YaArticleCardVo[] }
/** 传入则展示「查看更多」并跳转该路由；不传则不展示 */ /** 传入则展示「查看更多」并跳转该路由；不传则不展示 */
moreLink?: RouteLocationRaw moreLink?: RouteLocationRaw
}>() }>()
......
src/views/homePage/homeTab/components/videoList.vue
...@@ -106,77 +106,12 @@ ...@@ -106,77 +106,12 @@
<!-- 右侧两个视频 --> <!-- 右侧两个视频 -->
<div class="flex flex-col xl:gap-5 gap-4"> <div class="flex flex-col xl:gap-5 gap-4">
<div <VideoCard
v-for="(item, index) in list.slice(1, 3)" v-for="(item, index) in list.slice(1, 3)"
:key="index" :key="index"
class="group relative rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer" :item="item"
@click="jumpToArticleDetailPage({ type: ArticleTypeEnum.VIDEO, id: item?.id })" @click="jumpToArticleDetailPage({ type: ArticleTypeEnum.VIDEO, id: item?.id })"
> />
<div class="relative overflow-hidden">
<!-- 调整：增加图片高度到 h-[160px] 或 h-[180px] -->
<img
:src="item?.faceUrl"
class="w-full aspect-video object-cover group-hover:scale-105 transition-transform duration-500"
/>
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
<!-- 推荐标签 -->
<div
v-if="item?.isRecommend"
class="absolute top-0 left-0 w-15 h-7 bg-#FFF9B9 flex items-center justify-center border-2px border-solid border-#f4f0eb rounded-tl-lg rounded-br-lg"
>
<img class="w-6" src="@/assets/img/culture/recommend.png" />
<div class="text-12px text-#000 line-height-12px">推荐</div>
</div>
<!-- 时长 -->
<div
v-if="!smallerThanXl"
class="absolute bottom-3 right-3 bg-black/80 text-white px-2 py-1 rounded-lg text-xs"
>
{{ item?.videoDuration }}
</div>
<!-- 数据统计 -->
<div class="absolute bottom-3 left-3 flex gap-3 text-white text-xs">
<div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
<el-icon class="text-sm"><IEpView /></el-icon>
<span>{{ Math.max(item?.playCount, item?.viewCount) }}</span>
</div>
<div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
<el-icon class="text-sm"><IEpChatDotRound /></el-icon>
<span>{{ item?.replyCount }}</span>
</div>
<div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
<el-icon class="text-sm"><IEpStar /></el-icon>
<span>{{ item?.collectionCount }}</span>
</div>
</div>
</div>
<!-- 调整：减小内边距和间距 -->
<div class="p-3 xl:p-4">
<h3
class="font-semibold text-base mb-2 group-hover:text-blue-600 transition-colors line-clamp-1"
>
{{ item?.title }}
</h3>
<div class="flex items-center justify-between text-gray-500 text-xs">
<div class="flex items-center gap-2 max-w-55%">
<img :src="item?.showAvatar" alt="" class="w-5 h-5 rounded-full object-cover" />
<el-tooltip :content="item.showName" placement="bottom">
<span class="font-medium line-clamp-1">{{ item.showName }}</span>
</el-tooltip>
</div>
<span v-if="!smallerThanXl">{{
dayjs((item?.createTime ?? 0) * 1000).format('YYYY-MM-DD HH:mm')
}}</span>
<span v-else>{{
dayjs((item?.createTime ?? 0) * 1000).format('YYYY-MM-DD')
}}</span>
</div>
</div>
</div>
</div> </div>
</div> </div>
...@@ -185,188 +120,24 @@ ...@@ -185,188 +120,24 @@
v-show="list.length > 3" v-show="list.length > 3"
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:gap-5 gap-4" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:gap-5 gap-4"
> >
<div <VideoCard
@click="jumpToArticleDetailPage({ type: ArticleTypeEnum.VIDEO, id: item.id })"
v-for="item in list.slice(3)" v-for="item in list.slice(3)"
:key="item.id" :key="item.id"
class="group relative rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer" :item="item"
> @click="jumpToArticleDetailPage({ type: ArticleTypeEnum.VIDEO, id: item.id })"
<div class="relative overflow-hidden"> />
<img
:src="item.faceUrl"
class="w-full aspect-video object-cover group-hover:scale-105 transition-transform duration-500"
/>
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
<!-- 标签 -->
<!-- <div
class="absolute top-3 left-3 bg-gradient-to-r from-indigo-500 to-purple-500 text-white px-2.5 py-1 rounded-full text-xs font-semibold"
>
{{ item.tagNameList[0] }}
</div> -->
<div
v-if="item.isRecommend"
class="absolute top-0 left-0 w-15 h-7 bg-#FFF9B9 flex items-center justify-center border-2px border-solid border-#f4f0eb rounded-tl-lg rounded-br-lg"
>
<img class="w-6" src="@/assets/img/culture/recommend.png" alt="" />
<div class="text-12px text-#000 line-height-12px">推荐</div>
</div>
<!-- 时长 -->
<div
v-if="!smallerThanXl"
class="absolute bottom-3 right-3 bg-black/80 text-white px-2 py-1 rounded-lg text-xs"
>
{{ item.videoDuration }}
</div>
<!-- 数据 -->
<div class="absolute bottom-3 left-3 flex gap-3 text-white text-xs">
<div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
<el-icon class="text-sm">
<IEpView />
</el-icon>
<span>{{ Math.max(item.playCount, item.viewCount) }}</span>
</div>
<div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
<el-icon class="text-sm">
<IEpChatDotRound />
</el-icon>
<span>{{ item.replyCount }}</span>
</div>
<div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
<el-icon class="text-sm">
<IEpStar />
</el-icon>
<span>{{ item.collectionCount }}</span>
</div>
</div>
<!-- 播放按钮 -->
<!-- <div
class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"
>
<div
class="bg-white/90 rounded-full flex items-center justify-center shadow-xl transform scale-90 group-hover:scale-100 transition-transform duration-300"
>
<el-icon size="50" color="#333"><VideoPlay /></el-icon>
</div>
</div> -->
</div>
<div class="p-3 xl:p-4">
<h3
class="font-semibold text-base mb-2 group-hover:text-blue-600 transition-colors line-clamp-1"
>
{{ item?.title }}
</h3>
<div class="flex items-center justify-between text-gray-500 text-xs">
<div class="flex items-center gap-2 max-w-55%">
<img :src="item?.showAvatar" alt="" class="w-6 h-6 rounded-full object-cover" />
<el-tooltip :content="item.showName" placement="bottom">
<span class="font-medium line-clamp-1">{{ item.showName }}</span>
</el-tooltip>
</div>
<span v-if="!smallerThanXl">{{
dayjs(item?.createTime * 1000).format('YYYY-MM-DD HH:mm')
}}</span>
<span v-else>{{ dayjs(item?.createTime * 1000).format('YYYY-MM-DD') }}</span>
</div>
</div>
</div>
</div> </div>
</div> </div>
<!-- 其他页面 - 标准3列网格 --> <!-- 其他页面 - 标准3列网格 -->
<div v-show="searchParams.current !== 1"> <div v-show="searchParams.current !== 1">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:gap-5 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:gap-5 gap-4">
<div <VideoCard
@click="jumpToArticleDetailPage({ type: ArticleTypeEnum.VIDEO, id: item.id })"
v-for="item in list" v-for="item in list"
:key="item.id" :key="item.id"
class="group relative rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer" :item="item"
> @click="jumpToArticleDetailPage({ type: ArticleTypeEnum.VIDEO, id: item.id })"
<div class="relative overflow-hidden"> />
<img
:src="item.faceUrl"
class="w-full aspect-video object-cover group-hover:scale-105 transition-transform duration-500"
/>
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
<!-- 标签 -->
<!-- <div
class="absolute top-3 left-3 bg-gradient-to-r from-indigo-500 to-purple-500 text-white px-2.5 py-1 rounded-full text-xs font-semibold"
>
{{ item.tagNameList[0] }}
</div> -->
<div
v-if="item.isRecommend"
class="absolute top-0 left-0 w-15 h-7 bg-#FFF9B9 flex items-center justify-center border-2px border-solid border-#f4f0eb rounded-tl-lg rounded-br-lg"
>
<img class="w-6" src="@/assets/img/culture/recommend.png" alt="" />
<div class="text-12px text-#000 line-height-12px">推荐</div>
</div>
<!-- 时长 -->
<div
v-if="!smallerThanXl"
class="absolute bottom-3 right-3 bg-black/80 text-white px-2 py-1 rounded-lg text-xs"
>
{{ item?.videoDuration }}
</div>
<!-- 数据 -->
<div class="absolute bottom-3 left-3 flex gap-3 text-white text-xs">
<div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
<el-icon class="text-sm">
<IEpView />
</el-icon>
<span>{{ Math.max(item.playCount, item.viewCount) }}</span>
</div>
<div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
<el-icon class="text-sm">
<IEpChatDotRound />
</el-icon>
<span>{{ item.replyCount }}</span>
</div>
<div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
<el-icon class="text-sm">
<IEpStar />
</el-icon>
<span>{{ item.collectionCount }}</span>
</div>
</div>
<!-- 播放按钮 -->
<!-- <div
class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"
>
<div
class="bg-white/90 rounded-full flex items-center justify-center shadow-xl transform scale-90 group-hover:scale-100 transition-transform duration-300"
>
<el-icon size="50" color="#333"><VideoPlay /></el-icon>
</div>
</div> -->
</div>
<div class="p-3 xl:p-4">
<h3
class="font-semibold text-base mb-2 group-hover:text-blue-600 transition-colors line-clamp-1"
>
{{ item.title }}
</h3>
<div class="flex items-center justify-between text-gray-500 text-xs">
<div class="flex items-center gap-2 max-w-55%">
<img :src="item.showAvatar" alt="" class="w-6 h-6 rounded-full object-cover" />
<el-tooltip :content="item.showName" placement="bottom">
<span class="font-medium line-clamp-1">{{ item.showName }}</span>
</el-tooltip>
</div>
<span v-if="!smallerThanXl">{{
dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm')
}}</span>
<span v-else>{{ dayjs(item.createTime * 1000).format('YYYY-MM-DD') }}</span>
</div>
</div>
</div>
</div> </div>
</div> </div>
...@@ -421,10 +192,7 @@ import { usePageSearch } from '@/hooks' ...@@ -421,10 +192,7 @@ import { usePageSearch } from '@/hooks'
import { getArticleList } from '@/api' import { getArticleList } from '@/api'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { useNavigation } from '@/hooks' import { useNavigation } from '@/hooks'
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core' import VideoCard from '@/components/common/VideoCard/index.vue'
const breakpoints = useBreakpoints(breakpointsTailwind)
const smallerThanXl = breakpoints.smaller('xl')
const tabsRef = inject(TABS_REF_KEY) const tabsRef = inject(TABS_REF_KEY)
......
src/views/homePage/yaTab/components/videoList.vue
...@@ -30,228 +30,35 @@ ...@@ -30,228 +30,35 @@
</div> </div>
</div> </div>
<div v-loading="loadingMore" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-6"> <div v-loading="loadingMore" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
<div <VideoCard
@click="jumpToArticleDetailPage({ type: ArticleTypeEnum.VIDEO, id: item.articleId })"
v-for="item in listMore" v-for="item in listMore"
:key="item.articleId" :key="item.articleId"
class="group relative rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer" :item="item"
> is-from-ya-page
<div class="relative overflow-hidden"> @click="jumpToArticleDetailPage({ type: ArticleTypeEnum.VIDEO, id: item.articleId })"
<img />
:src="item.faceUrl"
class="w-full h-36 xl:h-42 object-cover group-hover:scale-105 transition-transform duration-500"
/>
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
<!-- 标签 -->
<!-- <div
class="absolute top-3 left-3 bg-gradient-to-r from-indigo-500 to-purple-500 text-white px-2.5 py-1 rounded-full text-xs font-semibold"
>
{{ item.tagNameList[0] }}
</div> -->
<div
v-if="item.isRecommend"
class="absolute top-0 left-0 w-15 h-7 bg-#FFF9B9 flex items-center justify-center border-2px border-solid border-#f4f0eb rounded-tl-lg rounded-br-lg"
>
<img class="w-6" src="@/assets/img/culture/recommend.png" alt="" />
<div class="text-12px text-#000 line-height-12px">推荐</div>
</div>
<!-- 时长 -->
<div
class="absolute bottom-3 right-3 bg-black/80 text-white px-2 py-1 rounded-lg text-xs"
>
{{ item?.videoDuration }}
</div>
<!-- 数据 -->
<div class="absolute bottom-3 left-3 flex gap-3 text-white text-xs">
<div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
<el-icon class="text-sm"><IEpView /></el-icon>
<span>{{ Math.max(item.playCount, item.viewCount) }}</span>
</div>
<div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
<el-icon class="text-sm"><IEpChatDotRound /></el-icon>
<span>{{ item.replyCount }}</span>
</div>
<div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
<el-icon class="text-sm"><IEpStar /></el-icon>
<span>{{ item.collectCount }}</span>
</div>
</div>
</div>
<div class="p-2.5 xl:p-4 xl:pb-3">
<h3
class="font-semibold text-base mb-2 group-hover:text-blue-600 transition-colors line-clamp-1"
>
{{ item.title }}
</h3>
<div class="flex items-center justify-between text-gray-500 text-xs">
<div class="flex items-center gap-2 max-w-55%">
<img :src="item.showAvatar" alt="" class="w-6 h-6 rounded-full object-cover" />
<el-tooltip :content="item.showName" placement="top">
<span class="font-medium line-clamp-1">{{ item.showName }}</span>
</el-tooltip>
</div>
<span v-if="smallerThanXl">{{
dayjs(item.publishTime * 1000).format('YYYY-MM-DD')
}}</span>
<span v-else>{{ dayjs(item.publishTime * 1000).format('YYYY-MM-DD HH:mm') }}</span>
</div>
</div>
</div>
</div> </div>
<div v-loading="loading" v-if="list.length"> <div v-loading="loading" v-if="list.length">
<div class="w-full max-w-6xl mx-auto"> <div class="w-full max-w-6xl mx-auto">
<div <YaColumnSection
v-for="(item, index) in list" v-for="(item, index) in list"
:key="index" :key="index"
class="bg-white rounded-lg shadow-sm mb-6 overflow-hidden" :item="item"
:style="{ '--dynamic-color': item.color }" :more-link="{
path: `/videoSearchList/${item.id}`,
query: {
columnTitle: item.title,
},
}"
> >
<div <template #default="{ item: i }">
class="flex items-center justify-between pr-4 pl-4 pt-2 pb-2 bg-green-50 border-b border-green-100" <VideoCard
:style="{ backgroundColor: item.color, '--dynamic-color': item.color }" :item="i"
> is-from-ya-page
<h3 class="text-lg font-medium text-gray-800 flex items-center"> @click="jumpToArticleDetailPage({ type: i.type, id: i.articleId })"
<span class="w-1 h-5 mr-2 bg-#444"></span> />
{{ item.title }} </template>
</h3> </YaColumnSection>
<div
class="flex items-center cursor-pointer"
@click="
router.push({
path: `/videoSearchList/${item.id}`,
query: {
columnTitle: item.title,
},
})
"
>
<span class="mr-1 text-14px color-#606266">查看更多 >></span>
</div>
</div>
<div class="p-4">
<div v-if="item.yaColumnVoList.length" class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div
v-for="i in item.yaColumnVoList"
:key="i.articleId"
class="group cursor-pointer rounded-lg overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300"
@click="jumpToArticleDetailPage({ type: i.type, id: i.articleId })"
>
<div class="relative overflow-hidden">
<img
:src="i.faceUrl"
class="w-full h-36 xl:h-44 object-cover group-hover:scale-105 transition-transform duration-500"
/>
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
<!-- 标签 -->
<!-- <div
class="absolute top-3 left-3 bg-gradient-to-r from-indigo-500 to-purple-500 text-white px-2.5 py-1 rounded-full text-xs font-semibold"
>
{{ item.tagNameList[0] }}
</div> -->
<div
v-if="i.isRecommend"
class="absolute top-0 left-0 w-15 h-7 bg-#FFF9B9 flex items-center justify-center border-2px border-solid border-#f4f0eb rounded-tl-lg rounded-br-lg"
>
<img class="w-6" src="@/assets/img/culture/recommend.png" alt="" />
<div class="text-12px text-#000 line-height-12px">推荐</div>
</div>
<!-- 时长 -->
<div
class="absolute bottom-3 right-3 bg-black/80 text-white px-2 py-1 rounded-lg text-xs"
>
{{ i.videoDuration }}
</div>
<!-- 数据 -->
<div class="absolute bottom-3 left-3 flex gap-3 text-white text-xs">
<div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
<el-icon class="text-sm"><IEpView /></el-icon>
<span>{{ Math.max(i.playCount, i.viewCount) }}</span>
</div>
<div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
<el-icon class="text-sm"><IEpChatDotRound /></el-icon>
<span>{{ i.replyCount }}</span>
</div>
<div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
<el-icon class="text-sm"><IEpStar /></el-icon>
<span>{{ i.replyCount }}</span>
</div>
</div>
</div>
<div class="p-4 pb-3">
<h3
class="font-semibold text-base mb-2 group-hover:text-blue-600 transition-colors line-clamp-1"
>
{{ i.title }}
</h3>
<div class="flex items-center justify-between text-gray-500 text-xs">
<div class="flex items-center gap-2 max-w-55%">
<img :src="i.showAvatar" alt="" class="w-6 h-6 rounded-full object-cover" />
<el-tooltip :content="i.showName" placement="top">
<span class="font-medium line-clamp-1">{{ i.showName }}</span>
</el-tooltip>
</div>
<span v-if="smallerThanXl">{{
dayjs(i.createTime * 1000).format(' MM-DD HH:mm')
}}</span>
<span v-else>{{ dayjs(i.createTime * 1000).format('YYYY-MM-DD HH:mm') }}</span>
</div>
</div>
<!-- <div class="relative mb-3 overflow-hidden rounded-lg">
<img
:src="i.faceUrl"
class="w-full aspect-[5/3] object-cover group-hover:scale-105 transition-transform duration-300"
/>
<div
v-if="i.isRecommend"
class="absolute top--1 left--1 w-15 h-7 z-1000 bg-#FFF9B9 flex items-center justify-center border-2px border-solid border-#f4f0eb rounded-tl-lg rounded-br-lg"
>
<img class="w-6" src="@/assets/img/culture/recommend.png" alt="" />
<div class="text-12px text-#000 line-height-12px">推荐</div>
</div>
</div>
<h3 class="text font-medium text-gray-800 mb-2 transition-colors line-clamp-1">
{{ i.title }}
</h3>
<p class="text-sm text-gray-500 mb-3 line-clamp-1">
{{ i.content }}
</p>
<div class="flex items-center justify-between text-xs text-gray-500">
<div class="flex items-center space-x-4">
<span class="flex items-center">
<el-icon class="mr-1">
<View />
</el-icon>
{{ i.viewCount }}
</span>
<span class="flex items-center">
<el-icon class="mr-1">
<ChatDotRound />
</el-icon>
{{ i.replyCount }}
</span>
<span class="flex items-center">
<el-icon class="mr-1">
<Star />
</el-icon>
{{ i.collectCount }}
</span>
</div>
<span>{{ dayjs(i.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
</div> -->
</div>
</div>
<div v-else class="flex items-center justify-center h-48">
<el-empty description="暂无数据" />
</div>
</div>
</div>
</div> </div>
<div class="bottom-pagination border-t border-gray-200"> <div class="bottom-pagination border-t border-gray-200">
<div class="max-w-7xl mx-auto py-4"> <div class="max-w-7xl mx-auto py-4">
...@@ -300,13 +107,10 @@ import { getVideoList, getVideoListViewMore } from '@/api' ...@@ -300,13 +107,10 @@ import { getVideoList, getVideoListViewMore } from '@/api'
import { usePageSearch, useScrollTop } from '@/hooks' import { usePageSearch, useScrollTop } from '@/hooks'
import { TABS_REF_KEY, ArticleTypeEnum } from '@/constants' import { TABS_REF_KEY, ArticleTypeEnum } from '@/constants'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import { useNavigation } from '@/hooks' import { useNavigation } from '@/hooks'
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core' import YaColumnSection from '@/components/common/YaColumnSection/index.vue'
import VideoCard from '@/components/common/VideoCard/index.vue'
// 判断是否是xl
const breakpoints = useBreakpoints(breakpointsTailwind)
const smallerThanXl = breakpoints.smaller('xl')
const router = useRouter() const router = useRouter()
const tabsRef = inject(TABS_REF_KEY) const tabsRef = inject(TABS_REF_KEY)
const { handleBackTop, ScrollTopComp } = useScrollTop(tabsRef!) const { handleBackTop, ScrollTopComp } = useScrollTop(tabsRef!)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment