Skip to content

C
corporateCulture-qd
Commit b175d962 by lijiabin
Options

【需求 17679】 perf: 优化首页的视频展示

parent 661ed78a
Showing with 112 additions and 168 deletions
src/views/homePage/homeTab/components/videoList.vue
......@@ -6,17 +6,12 @@
<div class="flex items-center justify-between pb-4">
<!-- 左侧 Tabs -->
<div class="flex items-center space-x-1">
<div
v-for="tab in tabs"
:key="tab.sortLogic"
:class="[
'px-6 py-2 rounded-full text-sm font-medium cursor-pointer transition-all duration-200',
searchParams.sortLogic === tab.sortLogic
? 'bg-orange-400 text-white shadow-md'
: 'text-gray-600 hover:text-orange-500 hover:bg-orange-50',
]"
@click="toggleTab(tab.sortLogic)"
>
<div v-for="tab in tabs" :key="tab.sortLogic" :class="[
'px-6 py-2 rounded-full text-sm font-medium cursor-pointer transition-all duration-200',
searchParams.sortLogic === tab.sortLogic
? 'bg-orange-400 text-white shadow-md'
: 'text-gray-600 hover:text-orange-500 hover:bg-orange-50',
]" @click="toggleTab(tab.sortLogic)">
{{ tab.label }}
</div>
</div>
......@@ -29,19 +24,12 @@
<!-- 前三个特殊布局 -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
<!-- 第一个视频 - 占据两列 -->
<div
v-show="list.length >= 1"
@click="openDetailPage(`/videoDetail/${list[0]?.id}`)"
class="lg:col-span-2 group relative rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-xl transition-all duration-500 cursor-pointer"
>
<div class="relative overflow-hidden mb-5">
<img
:src="list[0]?.faceUrl"
class="w-full h-90 object-cover group-hover:scale-105 transition-transform duration-700"
/>
<div
class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"
></div>
<div v-show="list.length >= 1" @click="openDetailPage(`/videoDetail/${list[0]?.id}`)"
class="lg:col-span-2 group relative rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-xl transition-all duration-500 cursor-pointer">
<div class="relative overflow-hidden mb-2">
<img :src="list[0]?.faceUrl"
class="w-full h-90 object-cover group-hover:scale-105 transition-transform duration-700" />
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
<!-- 标签和数据 -->
<!-- <div
......@@ -49,35 +37,32 @@
>
🔥 推荐
</div> -->
<div
v-if="list[0]?.isRecommend"
class="absolute top-0 left-0 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"
>
<div v-if="list[0]?.isRecommend"
class="absolute top-0 left-0 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" />
<div class="text-12px text-#000 line-height-12px">推荐</div>
</div>
<div
class="absolute bottom-4 right-4 bg-black/80 backdrop-blur-sm text-white px-3 py-1.5 rounded-lg text-sm"
>
class="absolute bottom-4 right-4 bg-black/80 backdrop-blur-sm text-white px-3 py-1.5 rounded-lg text-sm">
{{ list[0]?.videoDuration }}
</div>
<div class="absolute bottom-4 left-4 flex gap-4 text-white">
<div
class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-3 py-1.5 rounded-lg"
>
<el-icon class="text-sm"><View /></el-icon>
<div class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-3 py-1.5 rounded-lg">
<el-icon class="text-sm">
<View />
</el-icon>
<span>{{ list[0]?.viewCount }}</span>
</div>
<div
class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-3 py-1.5 rounded-lg"
>
<el-icon class="text-sm"><ChatDotRound /></el-icon>
<div class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-3 py-1.5 rounded-lg">
<el-icon class="text-sm">
<ChatDotRound />
</el-icon>
<span>{{ list[0]?.replyCount }}</span>
</div>
<div
class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-3 py-1.5 rounded-lg"
>
<el-icon class="text-sm"><Star /></el-icon>
<div class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-3 py-1.5 rounded-lg">
<el-icon class="text-sm">
<Star />
</el-icon>
<span>{{ list[0]?.replyCount }}</span>
</div>
</div>
......@@ -95,24 +80,18 @@
</div>
<div class="p-6">
<h3
class="font-bold text-xl mb-3 text-gray-900 group-hover:text-blue-600 transition-colors line-clamp-1"
>
<h3 class="font-bold text-2xl mb-3 text-gray-900 group-hover:text-blue-600 transition-colors line-clamp-1">
{{ list[0]?.title }}
</h3>
<h2 class="text-gray-600 mb-4 line-clamp-2 leading-relaxed">
<h2 class="text-gray-600 mb-4 line-clamp-1 leading-relaxed text-xl">
{{ list[0]?.content }}
</h2>
<div class="flex items-center justify-between text-gray-500 text-sm">
<div class="flex items-center justify-between text-gray-500 text-base">
<div class="flex items-center gap-2">
<img
:src="list[0]?.showAvatar"
alt=""
class="w-6 h-6 rounded-full object-cover"
/>
<img :src="list[0]?.showAvatar" alt="" class="w-6 h-6 rounded-full object-cover" />
<span class="font-medium">{{ list[0]?.showName }}</span>
</div>
<span class="text-xs bg-gray-100 px-2 py-1 rounded-full">{{
<span class="text-base px-2 py-1 rounded-full">{{
dayjs((list[0]?.createTime ?? 0) * 1000).format('YYYY-MM-DD HH:mm:ss')
}}</span>
</div>
......@@ -121,51 +100,43 @@
<!-- 右侧两个视频 -->
<div class="flex flex-col gap-6">
<div
v-for="(item, index) in list.slice(1, 3)"
:key="index"
<div v-for="(item, index) in list.slice(1, 3)" :key="index"
class="group relative rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer"
@click="openDetailPage(`/videoDetail/${item?.id}`)"
>
@click="openDetailPage(`/videoDetail/${item?.id}`)">
<div class="relative overflow-hidden">
<img
:src="item?.faceUrl"
class="w-full h-44 object-cover group-hover:scale-105 transition-transform duration-500"
/>
<img :src="item?.faceUrl"
class="w-full 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
v-if="item?.isRecommend"
class="absolute top-0 left-0 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"
>
<div v-if="item?.isRecommend"
class="absolute top-0 left-0 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" />
<div class="text-12px text-#000 line-height-12px">推荐</div>
</div>
<!-- 时长 -->
<div
class="absolute bottom-3 right-3 bg-black/80 backdrop-blur-sm text-white px-2 py-1 rounded-lg text-xs"
>
class="absolute bottom-3 right-3 bg-black/80 backdrop-blur-sm 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 backdrop-blur-sm px-2 py-1 rounded-lg"
>
<el-icon class="text-sm"><View /></el-icon>
<div class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-2 py-1 rounded-lg">
<el-icon class="text-sm">
<View />
</el-icon>
<span>{{ item?.viewCount }}</span>
</div>
<div
class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-2 py-1 rounded-lg"
>
<el-icon class="text-sm"><ChatDotRound /></el-icon>
<div class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-2 py-1 rounded-lg">
<el-icon class="text-sm">
<ChatDotRound />
</el-icon>
<span>{{ item?.replyCount }}</span>
</div>
<div
class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-2 py-1 rounded-lg"
>
<el-icon class="text-sm"><Star /></el-icon>
<div class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-2 py-1 rounded-lg">
<el-icon class="text-sm">
<Star />
</el-icon>
<span>{{ item?.replyCount }}</span>
</div>
</div>
......@@ -182,15 +153,15 @@
</div>
<div class="p-4">
<h3
class="font-semibold text-base mb-2 group-hover:text-blue-600 transition-colors line-clamp-1"
>
<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">
<div class="flex items-center gap-2 max-w-55%">
<img :src="item?.showAvatar" alt="" class="w-6 h-6 rounded-full object-cover" />
<span class="font-medium">{{ item?.showName }}</span>
<el-tooltip :content="item.showName" placement="bottom">
<span class="font-medium line-clamp-1">{{ item.showName }}</span>
</el-tooltip>
</div>
<span>{{
dayjs((item?.createTime ?? 0) * 1000).format('YYYY-MM-DD HH:mm')
......@@ -203,17 +174,11 @@
<!-- 剩余视频 - 标准网格 -->
<div v-show="list.length > 3" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div
@click="openDetailPage(`/videoDetail/${item.id}`)"
v-for="item in list.slice(3)"
:key="item.id"
class="group relative rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer"
>
<div @click="openDetailPage(`/videoDetail/${item.id}`)" v-for="item in list.slice(3)" :key="item.id"
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 h-44 object-cover group-hover:scale-105 transition-transform duration-500"
/>
<img :src="item.faceUrl"
class="w-full 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>
<!-- 标签 -->
......@@ -222,39 +187,36 @@
>
{{ item.tagNameList[0] }}
</div> -->
<div
v-if="item.isRecommend"
class="absolute top-0 left-0 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"
>
<div v-if="item.isRecommend"
class="absolute top-0 left-0 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
class="absolute bottom-3 right-3 bg-black/80 backdrop-blur-sm text-white px-2 py-1 rounded-lg text-xs"
>
class="absolute bottom-3 right-3 bg-black/80 backdrop-blur-sm 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 backdrop-blur-sm px-2 py-1 rounded-lg"
>
<el-icon class="text-sm"><View /></el-icon>
<div class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-2 py-1 rounded-lg">
<el-icon class="text-sm">
<View />
</el-icon>
<span>{{ item.viewCount }}</span>
</div>
<div
class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-2 py-1 rounded-lg"
>
<el-icon class="text-sm"><ChatDotRound /></el-icon>
<div class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-2 py-1 rounded-lg">
<el-icon class="text-sm">
<ChatDotRound />
</el-icon>
<span>{{ item.replyCount }}</span>
</div>
<div
class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-2 py-1 rounded-lg"
>
<el-icon class="text-sm"><Star /></el-icon>
<div class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-2 py-1 rounded-lg">
<el-icon class="text-sm">
<Star />
</el-icon>
<span>{{ item.replyCount }}</span>
</div>
</div>
......@@ -271,15 +233,15 @@
</div>
<div class="p-4">
<h3
class="font-semibold text-base mb-2 group-hover:text-blue-600 transition-colors line-clamp-1"
>
<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">
<div class="flex items-center gap-2 max-w-55%">
<img :src="item?.showAvatar" alt="" class="w-6 h-6 rounded-full object-cover" />
<span class="font-medium">{{ item?.showName }}</span>
<el-tooltip :content="item.showName" placement="bottom">
<span class="font-medium line-clamp-1">{{ item.showName }}</span>
</el-tooltip>
</div>
<span>{{ dayjs(item?.createTime * 1000).format('YYYY-MM-DD HH:mm') }}</span>
</div>
......@@ -291,17 +253,11 @@
<!-- 其他页面 - 标准3列网格 -->
<div v-show="searchParams.current !== 1">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div
@click="openDetailPage(`/videoDetail/${item.id}`)"
v-for="item in list"
:key="item.id"
class="group relative rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer"
>
<div @click="openDetailPage(`/videoDetail/${item.id}`)" v-for="item in list" :key="item.id"
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 h-44 object-cover group-hover:scale-105 transition-transform duration-500"
/>
<img :src="item.faceUrl"
class="w-full 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>
<!-- 标签 -->
......@@ -310,39 +266,36 @@
>
{{ item.tagNameList[0] }}
</div> -->
<div
v-if="item.isRecommend"
class="absolute top-0 left-0 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"
>
<div v-if="item.isRecommend"
class="absolute top-0 left-0 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
class="absolute bottom-3 right-3 bg-black/80 backdrop-blur-sm text-white px-2 py-1 rounded-lg text-xs"
>
class="absolute bottom-3 right-3 bg-black/80 backdrop-blur-sm 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 backdrop-blur-sm px-2 py-1 rounded-lg"
>
<el-icon class="text-sm"><View /></el-icon>
<div class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-2 py-1 rounded-lg">
<el-icon class="text-sm">
<View />
</el-icon>
<span>{{ item.viewCount }}</span>
</div>
<div
class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-2 py-1 rounded-lg"
>
<el-icon class="text-sm"><ChatDotRound /></el-icon>
<div class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-2 py-1 rounded-lg">
<el-icon class="text-sm">
<ChatDotRound />
</el-icon>
<span>{{ item.replyCount }}</span>
</div>
<div
class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-2 py-1 rounded-lg"
>
<el-icon class="text-sm"><Star /></el-icon>
<div class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-2 py-1 rounded-lg">
<el-icon class="text-sm">
<Star />
</el-icon>
<span>{{ item.replyCount }}</span>
</div>
</div>
......@@ -359,15 +312,15 @@
</div>
<div class="p-4">
<h3
class="font-semibold text-base mb-2 group-hover:text-blue-600 transition-colors line-clamp-1"
>
<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">
<div class="flex items-center gap-2 max-w-55%">
<img :src="item.showAvatar" alt="" class="w-6 h-6 rounded-full object-cover" />
<span class="font-medium">{{ item.showName }}</span>
<el-tooltip :content="item.showName" placement="bottom">
<span class="font-medium line-clamp-1">{{ item.showName }}</span>
</el-tooltip>
</div>
<span>{{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm') }}</span>
</div>
......@@ -387,23 +340,14 @@
<!-- 右侧：分页器 -->
<div class="right">
<div
class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3"
>
<el-pagination
v-model:current-page="searchParams.current"
v-model:page-size="searchParams.size"
:page-sizes="[9, 24, 36, 48]"
layout="prev, pager, next, jumper, total"
:total="total"
class="custom-pagination"
@current-change="
<div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3">
<el-pagination v-model:current-page="searchParams.current" v-model:page-size="searchParams.size"
:page-sizes="[9, 24, 36, 48]" layout="prev, pager, next, jumper, total" :total="total"
class="custom-pagination" @current-change="
(e) => {
;(handleBackTop(), goToPage(e))
; (handleBackTop(), goToPage(e))
}
"
@size-change="changePageSize"
/>
" @size-change="changePageSize" />
</div>
</div>
</div>
......@@ -431,15 +375,15 @@ const { ScrollTopComp, handleBackTop } = useScrollTop(tabsRef!)
const { list, total, searchParams, loading, goToPage, changePageSize, refresh } = usePageSearch(
getArticleList,
{
defaultParams: { type: ArticleTypeEnum.VIDEO, sortLogic: 0 },
defaultParams: { type: ArticleTypeEnum.VIDEO, sortLogic: 1 },
defaultCurrent: 1,
defaultSize: 9,
immediate: false,
},
)
const tabs = [
{ label: '最多播放', sortLogic: 0 },
{ label: '最新发布', sortLogic: 1 },
{ label: '最多播放', sortLogic: 0 },
]
const toggleTab = (sortLogic: number) => {
......
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