Skip to content

C
corporateCulture-qd
Commit b175d962 by lijiabin
Options

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

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