Skip to content

C
corporateCulture-qd
Commit 5351d2ad by lijiabin
Options

【需求 20331】 perf: 去掉类似毛玻璃的效果，防止掉帧

parent 15014302
Showing with 53 additions and 91 deletions
src/components/common/ArticleContent/index.vue
<template>
<div
class="p-6 bg-white backdrop-blur-sm rounded-lg shadow-sm border border-white/50 overflow-hidden"
>
<div class="p-6 bg-white rounded-lg shadow-sm border border-white/50 overflow-hidden">
<el-skeleton :rows="5" animated :loading="loading" :throttle="{ leading: 0, trailing: 300 }">
<template #template>
<!-- 发布者信息 -->
......
src/views/auction/index.vue
......@@ -202,7 +202,7 @@ const onBid = async (item: AuctionItemDto) => {
<BackButton />
<div class="flex gap-6">
<div class="flex-3/4 min-w-0">
<div class="bg-white/90 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-white/60">
<div class="bg-white/90 rounded-2xl p-6 shadow-lg border border-white/60">
<div class="flex items-center gap-3 mb-6">
<div
class="w-1.5 h-7 bg-gradient-to-b from-[--un-gradient-from] to-[--un-gradient-to] rounded-full shadow-sm"
......@@ -268,7 +268,7 @@ const onBid = async (item: AuctionItemDto) => {
<!-- 倒计时条 -->
<div
v-if="item.status === AuctionStatusEnum.AUCTIONING"
class="absolute bottom-0 inset-x-0 bg-black/60 backdrop-blur-sm text-white text-11px py-1.5 px-3 flex items-center gap-1.5"
class="absolute bottom-0 inset-x-0 bg-black/60 text-white text-11px py-1.5 px-3 flex items-center gap-1.5"
>
<span
class="inline-block w-1.5 h-1.5 rounded-full bg-red-400 animate-pulse"
......@@ -359,9 +359,7 @@ const onBid = async (item: AuctionItemDto) => {
<!-- 右侧：信息面板 -->
<div class="flex-1/4 space-y-6">
<!-- YA币信息卡片 -->
<div
class="bg-white/90 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-white/60 sticky top-[52px]"
>
<div class="bg-white/90 rounded-2xl p-6 shadow-lg border border-white/60 sticky top-[52px]">
<div class="text-center mb-6">
<div class="text-gray-500 text-sm mb-2">当前YA币</div>
<div
......
src/views/columnSearchList/index.vue
......@@ -130,7 +130,7 @@
</div>
</div>
<div class="bottom-pagination backdrop-blur-8 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="flex items-center justify-end gap-4">
<!-- 左侧：回到顶部按钮 -->
......
src/views/homePage/askTab/index.vue
......@@ -144,7 +144,7 @@
</div>
</div>
<!-- 底部分页 -->
<div class="bottom-pagination backdrop-blur-8 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="flex items-center justify-between">
<!-- 左侧：回到顶部按钮 -->
......
src/views/homePage/homeTab/components/recommendList.vue
......@@ -88,7 +88,7 @@
</div>
<!-- 底部分页 -->
<div class="bottom-pagination backdrop-blur-8 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="flex items-center justify-between">
<div class="left">
......
src/views/homePage/homeTab/components/videoList.vue
......@@ -55,28 +55,22 @@
<!-- 时长 -->
<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 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"
>
<div class="flex items-center gap-1 bg-black/50 px-3 py-1.5 rounded-lg">
<el-icon class="text-sm"><IEpView /></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"
>
<div class="flex items-center gap-1 bg-black/50 px-3 py-1.5 rounded-lg">
<el-icon class="text-sm"><IEpChatDotRound /></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"
>
<div class="flex items-center gap-1 bg-black/50 px-3 py-1.5 rounded-lg">
<el-icon class="text-sm"><IEpStar /></el-icon>
<span>{{ list[0]?.replyCount }}</span>
</div>
......@@ -138,28 +132,22 @@
<!-- 时长 -->
<div
v-if="!smallerThanXl"
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 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"
>
<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 backdrop-blur-sm px-2 py-1 rounded-lg"
>
<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 backdrop-blur-sm px-2 py-1 rounded-lg"
>
<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?.replyCount }}</span>
</div>
......@@ -227,32 +215,26 @@
<!-- 时长 -->
<div
v-if="!smallerThanXl"
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 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"
>
<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 backdrop-blur-sm px-2 py-1 rounded-lg"
>
<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 backdrop-blur-sm px-2 py-1 rounded-lg"
>
<div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
<el-icon class="text-sm">
<IEpStar />
</el-icon>
......@@ -264,7 +246,7 @@
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"
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>
......@@ -327,32 +309,26 @@
<!-- 时长 -->
<div
v-if="!smallerThanXl"
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 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"
>
<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 backdrop-blur-sm px-2 py-1 rounded-lg"
>
<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 backdrop-blur-sm px-2 py-1 rounded-lg"
>
<div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
<el-icon class="text-sm">
<IEpStar />
</el-icon>
......@@ -364,7 +340,7 @@
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"
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>
......@@ -395,7 +371,7 @@
</div>
<!-- 底部分页 -->
<div class="bottom-pagination backdrop-blur-8 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="flex items-center justify-between">
<!-- 左侧：回到顶部按钮 -->
......
src/views/homePage/yaTab/components/columnList.vue
......@@ -100,7 +100,7 @@
</div>
</div>
</div>
<div class="bottom-pagination backdrop-blur-8 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="flex items-center justify-between">
<!-- 左侧：回到顶部按钮 -->
......
src/views/homePage/yaTab/components/interviewList.vue
......@@ -89,7 +89,7 @@
</div>
</div>
</div>
<div class="bottom-pagination backdrop-blur-8 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="flex items-center justify-between">
<!-- 左侧：回到顶部按钮 -->
......
src/views/homePage/yaTab/components/practiceList.vue
......@@ -186,7 +186,7 @@
</div>
</div>
<!-- 底部分页 -->
<div class="bottom-pagination backdrop-blur-8 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="flex items-center justify-between">
<!-- 左侧：回到顶部按钮 -->
......
src/views/homePage/yaTab/components/videoList.vue
......@@ -59,22 +59,22 @@
<!-- 时长 -->
<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 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">
<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 backdrop-blur-sm px-2 py-1 rounded-lg">
<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 backdrop-blur-sm px-2 py-1 rounded-lg">
<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.replyCount }}</span>
</div>
......@@ -163,28 +163,22 @@
<!-- 时长 -->
<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 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 backdrop-blur-sm px-2 py-1 rounded-lg"
>
<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 backdrop-blur-sm px-2 py-1 rounded-lg"
>
<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 backdrop-blur-sm px-2 py-1 rounded-lg"
>
<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>
......@@ -260,7 +254,7 @@
</div>
</div>
</div>
<div class="bottom-pagination backdrop-blur-8 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="flex items-center justify-between">
<!-- 左侧：回到顶部按钮 -->
......
src/views/pointsStore/index.vue
......@@ -5,9 +5,7 @@
<!-- 左侧：商品列表区域 -->
<div class="flex-3/4 min-w-0">
<!-- 虚拟装饰区域 -->
<div
class="bg-white/90 backdrop-blur-sm rounded-2xl p-6 shadow-lg mb-6 border border-white/60"
>
<div class="bg-white/90 rounded-2xl p-6 shadow-lg mb-6 border border-white/60">
<div class="flex items-center gap-3 mb-6">
<div
class="w-1.5 h-7 bg-gradient-to-b from-[#8b5cf6] to-[#6366f1] rounded-full shadow-sm"
......@@ -72,7 +70,7 @@
</div>
<!-- 实物奖品区域 -->
<div class="bg-white/90 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-white/60">
<div class="bg-white/90 rounded-2xl p-6 shadow-lg border border-white/60">
<div class="flex items-center gap-3 mb-6">
<div
class="w-1.5 h-7 bg-gradient-to-b from-[#8b5cf6] to-[#6366f1] rounded-full shadow-sm"
......@@ -160,9 +158,7 @@
<!-- 右侧：信息面板 -->
<div class="flex-1/4 flex-shrink-0 space-y-6">
<!-- YA币信息卡片 -->
<div
class="bg-white/90 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-white/60 sticky top-[52px]"
>
<div class="bg-white/90 rounded-2xl p-6 shadow-lg border border-white/60 sticky top-[52px]">
<div class="text-center mb-6">
<div class="text-gray-500 text-sm mb-2">当前YA币</div>
<div
......
src/views/practiceSearchList/index.vue
......@@ -193,7 +193,7 @@
</div>
</div>
<div class="bottom-pagination backdrop-blur-8 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="flex items-center justify-end gap-4">
<!-- 左侧：回到顶部按钮 -->
......
src/views/publishVideo/index.vue
......@@ -8,7 +8,7 @@
<div class="col-span-8 space-y-6">
<!-- 视频上传区域 -->
<div
class="bg-white backdrop-blur-sm rounded-lg shadow-lg border border-white/20 p-8 hover:shadow-xl transition-all duration-300"
class="bg-white rounded-lg shadow-lg border border-gray-100 p-8 hover:shadow-xl transition-shadow duration-300"
>
<div class="flex items-center justify-between mb-6">
<h3 class="text-xl font-bold text-gray-800">上传视频</h3>
......@@ -24,7 +24,7 @@
<!-- 基本设置 -->
<div
class="bg-white backdrop-blur-sm rounded-lg shadow-lg border border-white/20 p-8 hover:shadow-xl transition-all duration-300"
class="bg-white rounded-lg shadow-lg border border-gray-100 p-8 hover:shadow-xl transition-shadow duration-300"
>
<div class="flex items-center justify-between mb-6">
<h3 class="text-xl font-bold text-gray-800">基本设置</h3>
......@@ -39,7 +39,7 @@
<!-- 主封面预览 -->
<div class="relative group">
<div
class="w-48 h-28 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer overflow-hidden"
class="w-48 h-28 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 cursor-pointer overflow-hidden"
@click="handleOpenCoverDialog"
>
<img
......@@ -202,7 +202,7 @@
</div>
<div
class="bg-white backdrop-blur-sm rounded-lg shadow-lg border border-white/20 p-6 hover:shadow-xl transition-all duration-300"
class="bg-white rounded-lg shadow-lg border border-gray-100 p-6 hover:shadow-xl transition-shadow duration-300"
>
<h4 class="text-lg font-bold text-gray-800 mb-4">发布设置</h4>
......@@ -237,12 +237,12 @@
</div>
</div>
<div class="bg-white/70 backdrop-blur-sm rounded-lg shadow-lg border border-white/20 p-6">
<div class="bg-white rounded-lg shadow-lg border border-gray-100 p-6">
<div class="space-y-3 flex justify-center items-center gap-4">
<el-button
@click="handleSubmit(ReleaseStatusTypeEnum.DRAFT)"
size="large"
class="w-full !border-gray-200 hover:!border-indigo-300 hover:!text-indigo-600 transition-all duration-200"
class="w-full !border-gray-200 hover:!border-indigo-300 hover:!text-indigo-600 transition-colors duration-200"
>
<el-icon class="mr-2">
<IEpDocument />
......@@ -252,7 +252,7 @@
<el-button
type="primary"
size="large"
class="w-full !bg-gradient-to-r !from-indigo-500 !to-purple-600 !border-none shadow-lg hover:shadow-xl transition-all duration-300"
class="w-full !bg-gradient-to-r !from-indigo-500 !to-purple-600 !border-none shadow-lg hover:shadow-xl transition-shadow duration-300"
@click="handleSubmit(ReleaseStatusTypeEnum.PUBLISH)"
>
<el-icon class="mr-2">
......@@ -284,7 +284,7 @@
@loadedmetadata="onVideoLoaded"
@timeupdate="onTimeUpdate"
/>
<div class="absolute bottom-4 left-4 right-4 bg-black/50 backdrop-blur-sm rounded-lg p-3">
<div class="absolute bottom-4 left-4 right-4 bg-black/60 rounded-lg p-3">
<div class="text-white text-sm mb-2">
当前时间：{{ formatTime(currentTime) }} / {{ formatTime(videoDuration) }}
</div>
......
src/views/searchPage/index.vue
......@@ -159,7 +159,7 @@
</div>
</div>
<div class="bottom-pagination backdrop-blur-8 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="flex items-center justify-end gap-4">
<!-- 左侧：回到顶部按钮 -->
......
src/views/videoDetail/index.vue
......@@ -169,7 +169,7 @@
<!-- 打赏 -->
<el-button
text
class="reward-button flex items-center gap-2 px-4 py-2 rounded-lg bg-white/40 hover:bg-white/70 backdrop-blur-sm border border-blue-100/30 hover:border-blue-200/50 transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-blue-100/50"
class="reward-button flex items-center gap-2 px-4 py-2 rounded-lg bg-white/40 hover:bg-white/70 border border-blue-100/30 hover:border-blue-200/50 transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-blue-100/50"
@click="handleReward"
>
<!-- 金币容器 - 带多重动画 -->
......
src/views/videoSearchList/index.vue
......@@ -136,7 +136,7 @@
</div>
</div>
<div class="bottom-pagination backdrop-blur-8 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="flex items-center justify-end gap-4">
<!-- 左侧：回到顶部按钮 -->
......
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