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 @@ ...@@ -31,24 +31,20 @@
<!-- 第一个视频 - 占据两列 --> <!-- 第一个视频 - 占据两列 -->
<div <div
v-show="list.length >= 1" 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" 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 <img
:src="list[0]?.faceUrl" :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 <div
class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"
></div> ></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 <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"
...@@ -56,60 +52,49 @@ ...@@ -56,60 +52,49 @@
<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"> <el-icon class="text-sm"><View /></el-icon>
<View /> <span>{{ Math.max(list[0]?.playCount ?? 0, list[0]?.viewCount ?? 0) }}</span>
</el-icon>
<span>{{ Math.max(list[0]?.playCount, 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"> <el-icon class="text-sm"><ChatDotRound /></el-icon>
<ChatDotRound />
</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"> <el-icon class="text-sm"><Star /></el-icon>
<Star />
</el-icon>
<span>{{ list[0]?.replyCount }}</span> <span>{{ list[0]?.replyCount }}</span>
</div> </div>
</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>
<div class="p-6"> <!-- 调整：减小内边距 p-6 改为 p-4 -->
<div class="p-4">
<h3 <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 }} {{ list[0]?.title }}
</h3> </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 }} {{ list[0]?.content }}
</h2> </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"> <div class="flex items-center gap-2">
<img <img
:src="list[0]?.showAvatar" :src="list[0]?.showAvatar"
...@@ -118,8 +103,8 @@ ...@@ -118,8 +103,8 @@
/> />
<span class="font-medium">{{ list[0]?.showName }}</span> <span class="font-medium">{{ list[0]?.showName }}</span>
</div> </div>
<span class="text-base px-2 py-1 rounded-full">{{ <span class="text-sm">{{
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')
}}</span> }}</span>
</div> </div>
</div> </div>
...@@ -134,11 +119,14 @@ ...@@ -134,11 +119,14 @@
@click="jumpToArticleDetailPage({ type: ArticleTypeEnum.VIDEO, id: item?.id })" @click="jumpToArticleDetailPage({ type: ArticleTypeEnum.VIDEO, id: item?.id })"
> >
<div class="relative overflow-hidden"> <div class="relative overflow-hidden">
<!-- 调整：增加图片高度到 h-[160px] 或 h-[180px] -->
<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-[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 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"
...@@ -154,61 +142,44 @@ ...@@ -154,61 +142,44 @@
{{ 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"> <el-icon class="text-sm"><View /></el-icon>
<View />
</el-icon>
<span>{{ Math.max(item?.playCount, item?.viewCount) }}</span> <span>{{ Math.max(item?.playCount, 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"> <el-icon class="text-sm"><ChatDotRound /></el-icon>
<ChatDotRound />
</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"> <el-icon class="text-sm"><Star /></el-icon>
<Star />
</el-icon>
<span>{{ item?.replyCount }}</span> <span>{{ item?.replyCount }}</span>
</div> </div>
</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>
<div class="p-4"> <!-- 调整：减小内边距和间距 -->
<div class="p-3">
<h3 <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 }} {{ 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 max-w-55%"> <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"> <el-tooltip :content="item.showName" placement="bottom">
<span class="font-medium line-clamp-1">{{ item.showName }}</span> <span class="font-medium line-clamp-1">{{ item.showName }}</span>
</el-tooltip> </el-tooltip>
</div> </div>
<span>{{ <span>{{ dayjs((item?.createTime ?? 0) * 1000).format('MM-DD HH:mm') }}</span>
dayjs((item?.createTime ?? 0) * 1000).format('YYYY-MM-DD HH:mm')
}}</span>
</div> </div>
</div> </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