fix: 修复虚拟列表悬浮时的字体抖动与闪烁问题
- Img 组件:移除 .img-element:hover scale(1.02) 放大效果 - VirtualScroller:移除 .virtual-scroller-item 的 backface-visibility 和 perspective,消除 GPU 合成层导致的文字抗锯齿切换 - set.vue:叠加按钮从 display:none 改为 opacity 控制显隐,避免 repaint 触发文字重光栅化 - set.vue:prompt 内 generate-data 从 v-show 改为 visibility:hidden,避免悬浮时布局变化导致的无限循环闪烁
This commit is contained in:
parent
6879b08fe3
commit
ab4e0591a9
@ -93,10 +93,6 @@ onUnmounted(() => {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.img-element:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.fullscreen-icon {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
|
||||
@ -598,8 +598,6 @@ defineExpose({
|
||||
|
||||
.virtual-scroller-item {
|
||||
contain: layout style;
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.virtual-scroller-bottom-placeholder {
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div style="width: 100%;display: flex;justify-content: center;align-items: center;transform: rotate(180deg);">
|
||||
<div class="primary-box" :class="{ 'none-primary-box': props.item.status === 'none' }">
|
||||
<div ref="promptContainerRef" class="prompt-container">
|
||||
<div ref="promptContainerRef" class="prompt-container">
|
||||
<div ref="promptWrapperRef" class="prompt-wrapper">
|
||||
<div ref="promptRef" class="prompt" :class="{ expanded: isHovering }" @mouseenter="isHovering = true" @mouseleave="isHovering = false">
|
||||
<span class="prompt-text">
|
||||
{{ props.item.generateData.prompt || '生成图片' }}
|
||||
<i-ep-DocumentCopy class="Copy" @click.stop="copyPrompt" />
|
||||
</span>
|
||||
<div v-show="!isHovering && !showExternalGenerateData" class="generate-data internal">
|
||||
<div :style="{ visibility: !isHovering && !showExternalGenerateData ? 'visible' : 'hidden' }" class="generate-data internal">
|
||||
<div class="detailed-data first-detailed-data">{{ props.item.generateData.model }}</div>
|
||||
<div class="detailed-data">{{ props.item.generateData.proportion }}</div>
|
||||
</div>
|
||||
@ -501,12 +501,14 @@ const copyPrompt = async () => {
|
||||
}
|
||||
.one-box:hover{
|
||||
.left-top,.bottom-brush{
|
||||
display:flex
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
.one-box.collected{
|
||||
.left-top{
|
||||
display:flex
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
.success-box{
|
||||
@ -531,7 +533,10 @@ const copyPrompt = async () => {
|
||||
}
|
||||
|
||||
.left-top,.bottom-brush{
|
||||
display: none;
|
||||
display: flex;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user