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