scout666/liveh5-nuxt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(tangPopup): 为正在竞拍的标识添加闪烁动画效果

Browse Source 
- 在 tangPopup.vue 文件中，为正在竞拍的标识添加了 blink 类名
- 在样式部分新增了 .blink 类的样式，使用 keyframes 创建 fade 动
This commit is contained in:
xingyy 2025-02-08 15:31:02 +08:00
parent 36793c5c5a
commit c86e449d52
1 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/pages/liveRoom/components/SideButton/tangPopup.vue
View File

@ -86,7 +86,7 @@ const loadMore = async () => {
loading="lazy" loading="lazy"
/> />
<div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div> <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
<div v-if="auctionData.artwork.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute">竞拍中</div> <div v-if="auctionData.artwork.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">竞拍中</div>
</div> </div>
<div> <div>
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px"> <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
@ -113,4 +113,12 @@ const loadMore = async () => {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.blink {
animation: fade 1s linear infinite;
}
@keyframes fade {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
</style> </style>