Skip to content

C
corporateCulture-qd
Commit 595f79ba by lijiabin
Options

【需求 17679】 perf: 优化页面布局等

parent 387b0f7b
Showing with 34 additions and 63 deletions
src/views/homePage/homeTab/components/videoList.vue
......@@ -31,24 +31,20 @@
<!-- 第一个视频 - 占据两列 -->
<div
v-show="list.length >= 1"
@click="jumpToArticleDetailPage({ type: ArticleTypeEnum.VIDEO, id: list[0]?.id })"
@click="jumpToArticleDetailPage({ type: ArticleTypeEnum.VIDEO, id: list[0]?.id ?? 0 })"
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">
<div class="relative overflow-hidden">
<!-- 调整：增加图片高度到 h-[360px] 或 h-[400px] -->
<img
:src="list[0]?.faceUrl"
class="w-full h-90 object-cover group-hover:scale-105 transition-transform duration-700"
class="w-full h-[360px] 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
class="absolute top-4 left-4 bg-gradient-to-r from-orange-500 to-red-500 text-white px-3 py-1.5 rounded-full text-sm font-semibold shadow-lg"
>
🔥 推荐
</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"
......@@ -56,60 +52,49 @@
<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"
>
{{ 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>
<span>{{ Math.max(list[0]?.playCount, list[0]?.viewCount) }}</span>
<el-icon class="text-sm"><View /></el-icon>
<span>{{ Math.max(list[0]?.playCount ?? 0, list[0]?.viewCount ?? 0) }}</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>
<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>
<el-icon class="text-sm"><Star /></el-icon>
<span>{{ list[0]?.replyCount }}</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="w-16 h-16 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center shadow-2xl transform scale-90 group-hover:scale-100 transition-transform duration-300"
>
<SvgIcon name="icon_play" size="24" color="#374151" />
</div>
</div> -->
</div>
<div class="p-6">
<!-- 调整：减小内边距 p-6 改为 p-4 -->
<div class="p-4">
<h3
class="font-bold text-xl mb-3 text-gray-900 group-hover:text-blue-600 transition-colors line-clamp-1"
class="font-bold text-lg mb-2 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-1 leading-relaxed text-xl">
<!-- 调整：减小内容文字大小和间距 -->
<h2 class="text-gray-600 mb-3 line-clamp-1 leading-relaxed text-base">
{{ list[0]?.content }}
</h2>
<div class="flex items-center justify-between text-gray-500 text-base">
<div class="flex items-center justify-between text-gray-500 text-sm">
<div class="flex items-center gap-2">
<img
:src="list[0]?.showAvatar"
......@@ -118,8 +103,8 @@
/>
<span class="font-medium">{{ list[0]?.showName }}</span>
</div>
<span class="text-base px-2 py-1 rounded-full">{{
dayjs((list[0]?.createTime ?? 0) * 1000).format('YYYY-MM-DD HH:mm:ss')
<span class="text-sm">{{
dayjs((list[0]?.createTime ?? 0) * 1000).format('YYYY-MM-DD HH:mm')
}}</span>
</div>
</div>
......@@ -134,11 +119,14 @@
@click="jumpToArticleDetailPage({ type: ArticleTypeEnum.VIDEO, id: item?.id })"
>
<div class="relative overflow-hidden">
<!-- 调整：增加图片高度到 h-[160px] 或 h-[180px] -->
<img
:src="item?.faceUrl"
class="w-full h-44 object-cover group-hover:scale-105 transition-transform duration-500"
class="w-full h-[160px] 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"
......@@ -154,61 +142,44 @@
{{ 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>
<el-icon class="text-sm"><View /></el-icon>
<span>{{ Math.max(item?.playCount, 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>
<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>
<el-icon class="text-sm"><Star /></el-icon>
<span>{{ item?.replyCount }}</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 backdrop-blur-sm 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-4">
<!-- 调整：减小内边距和间距 -->
<div class="p-3">
<h3
class="font-semibold text-base mb-2 group-hover:text-blue-600 transition-colors line-clamp-1"
class="font-semibold text-sm 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" />
<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>{{
dayjs((item?.createTime ?? 0) * 1000).format('YYYY-MM-DD HH:mm')
}}</span>
<span>{{ dayjs((item?.createTime ?? 0) * 1000).format('MM-DD HH:mm') }}</span>
</div>
</div>
</div>
......
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