feat: 优化ViewerLayout和QuestionBoxView组件

- 在ViewerLayout.vue中添加过渡模式以增强动画效果
- 更新QuestionBoxView.vue,调整问题头部间距,优化图片展示逻辑,修改上传图片网格样式,提升用户体验
This commit is contained in:
2025-05-03 07:08:20 +08:00
parent 1f47703a8b
commit 5ec2babc44
2 changed files with 28 additions and 89 deletions

View File

@@ -476,6 +476,7 @@
<RouterView v-slot="{ Component }">
<Transition
name="fade-slide"
mode="out-in"
:appear="true"
>
<KeepAlive>
@@ -676,19 +677,7 @@
// --- 路由过渡动画 ---
.fade-slide-enter-active,
.fade-slide-leave-active {
transition: opacity 0.25s ease, transform 0.25s ease;
// 关键: 相对于 content-layout-container 定位
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; // 让过渡元素也撑满容器高度
// 关键: 保持内边距和盒模型一致
padding: var(--vtsuru-content-padding);
box-sizing: border-box;
// 关键: 背景色防止透视
background-color: var(--n-card-color); // 使用内容区的背景色
z-index: 1;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.fade-slide-enter-from {