Yusaki/MiroFish
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor Step4Report component styles for improved transitions and layout

Browse source 
- Removed custom scrollbar styles to simplify the design and enhance performance.
- Updated transition effects for slide content to focus on opacity changes, improving visual feedback during content changes.
- Streamlined CSS by eliminating unnecessary properties, contributing to cleaner and more maintainable code.
This commit is contained in:
666ghj 2025-12-14 12:56:38 +08:00
parent be90a46cb4
commit 2215c47453
1 changed files with 8 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
frontend/src/components/Step4Report.vue
View file

@ -1380,26 +1380,6 @@ watch(() => props.reportId, (newId) => {
border-top: 1px solid #E5E7EB; border-top: 1px solid #E5E7EB;
padding: 20px; padding: 20px;
background: #FFFFFF; background: #FFFFFF;
max-height: 500px;
overflow-y: auto;
}
.section-content::-webkit-scrollbar {
width: 6px;
}
.section-content::-webkit-scrollbar-track {
background: #F3F4F6;
border-radius: 3px;
}
.section-content::-webkit-scrollbar-thumb {
background: #D1D5DB;
border-radius: 3px;
}
.section-content::-webkit-scrollbar-thumb:hover {
background: #9CA3AF;
} }
.content-body { .content-body {
@ -1500,35 +1480,21 @@ watch(() => props.reportId, (newId) => {
/* Slide Content Transition */ /* Slide Content Transition */
.slide-content-enter-active { .slide-content-enter-active {
transition: all 0.4s ease-out; transition: opacity 0.3s ease-out;
overflow: hidden;
} }
.slide-content-leave-active { .slide-content-leave-active {
transition: all 0.3s ease-in; transition: opacity 0.2s ease-in;
overflow: hidden;
}
.slide-content-enter-from {
max-height: 0;
opacity: 0;
padding: 0 20px;
}
.slide-content-enter-to {
max-height: 500px;
opacity: 1;
}
.slide-content-leave-from {
max-height: 500px;
opacity: 1;
} }
.slide-content-enter-from,
.slide-content-leave-to { .slide-content-leave-to {
max-height: 0;
opacity: 0; opacity: 0;
padding: 0 20px; }
.slide-content-enter-to,
.slide-content-leave-from {
opacity: 1;
} }
/* Waiting Placeholder */ /* Waiting Placeholder */