Fix Bug #500: 检查项目分类切换时界面抖动/闪烁修复
根因:展开分类加载检查方法时,方法列表区域初始高度为0,加载完成后突然插入导致高度跳变; 同时折叠面板动画期间容器最小高度(120px)不足,加剧了视觉闪烁。 修复: 1. 添加骨架占位div:方法列表加载中时预渲染带shimmer动画的占位区域,提前预留高度 2. 增大.collapse-scroll min-height至300px,稳定折叠动画期间的容器高度 3. .method-section添加min-height:50px,减少加载完成前后的高度差 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -414,6 +414,15 @@
|
|||||||
<span class="method-price-tag">¥{{ method.packagePrice || method.price || 0 }}</span>
|
<span class="method-price-tag">¥{{ method.packagePrice || method.price || 0 }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Bug #500修复: 加载中的方法列表骨架占位,提前预留空间避免高度跳变 -->
|
||||||
|
<div
|
||||||
|
v-if="categoryLoadingSet.has(cat.typeId) && (!cat.methods || cat.methods.length === 0)"
|
||||||
|
class="method-section method-section-skeleton"
|
||||||
|
>
|
||||||
|
<div class="method-section-title">检查方法</div>
|
||||||
|
<div class="skeleton-method-row"></div>
|
||||||
|
<div class="skeleton-method-row"></div>
|
||||||
|
</div>
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
</el-collapse>
|
</el-collapse>
|
||||||
</div>
|
</div>
|
||||||
@@ -1803,7 +1812,7 @@ defineExpose({ getList });
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden; /* Bug #500: 防止切换时水平方向溢出导致抖动 */
|
overflow-x: hidden; /* Bug #500: 防止切换时水平方向溢出导致抖动 */
|
||||||
min-height: 120px; /* Bug #500: 固定最小高度,避免分类切换时 flex 容器高度突变 */
|
min-height: 300px; /* Bug #500: 增大最小高度,避免折叠动画期间容器高度突变 */
|
||||||
}
|
}
|
||||||
.empty-hint {
|
.empty-hint {
|
||||||
color: #909399;
|
color: #909399;
|
||||||
@@ -1862,6 +1871,7 @@ defineExpose({ getList });
|
|||||||
background: #f0f7ff;
|
background: #f0f7ff;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
|
min-height: 50px; /* Bug #500: 方法区域预留最小高度,减少加载完成后的高度突变 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.method-section-title {
|
.method-section-title {
|
||||||
@@ -1903,6 +1913,24 @@ defineExpose({ getList });
|
|||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Bug #500修复: 方法列表骨架占位样式 */
|
||||||
|
.method-section-skeleton {
|
||||||
|
opacity: 0.6;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.skeleton-method-row {
|
||||||
|
height: 22px;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: linear-gradient(90deg, #e8f4ff 25%, #d0e8ff 50%, #e8f4ff 75%);
|
||||||
|
background-size: 200% 100%;
|
||||||
|
animation: shimmer 1.5s ease-in-out infinite;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% { background-position: 200% 0; }
|
||||||
|
100% { background-position: -200% 0; }
|
||||||
|
}
|
||||||
|
|
||||||
/* 已选择 tags */
|
/* 已选择 tags */
|
||||||
/* 已选择:加宽,避免套餐明细挤成一团 */
|
/* 已选择:加宽,避免套餐明细挤成一团 */
|
||||||
.selected-panel {
|
.selected-panel {
|
||||||
|
|||||||
Reference in New Issue
Block a user