fix: 首页滚动条防闪烁与颜色标注修正
- v-if 改为容器始终渲染 + min-height,避免数据加载后布局跳动 - 颜色标注改为"学习报告"/"学习残片",准确描述元素类型
This commit is contained in:
@@ -89,11 +89,15 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<section class="welcome-page">
|
||||
<div class="review-scroll-section surface-card" v-if="sessionGroups.length > 0">
|
||||
<div class="review-scroll-header">
|
||||
<div
|
||||
class="review-scroll-section surface-card"
|
||||
:class="{ 'is-empty': sessionGroups.length === 0 }"
|
||||
>
|
||||
<template v-if="sessionGroups.length > 0">
|
||||
<div class="review-scroll-header">
|
||||
<span class="color-legend">
|
||||
<span class="dot dot-report"></span> 有学习报告
|
||||
<span class="dot dot-fragment"></span> 仅有学习残片
|
||||
<span class="dot dot-report"></span> 学习报告
|
||||
<span class="dot dot-fragment"></span> 学习残片
|
||||
</span>
|
||||
</div>
|
||||
<div class="review-scroll-track">
|
||||
@@ -115,6 +119,7 @@ onMounted(() => {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="welcome-banner surface-card">
|
||||
@@ -199,6 +204,11 @@ onMounted(() => {
|
||||
.review-scroll-section {
|
||||
padding: 14px 22px;
|
||||
overflow: hidden;
|
||||
min-height: 90px;
|
||||
}
|
||||
|
||||
.review-scroll-section.is-empty {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.review-scroll-header {
|
||||
|
||||
Reference in New Issue
Block a user