github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-11 18:42:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化抽屉样式

Browse Source
This commit is contained in:
kuaifan 2025-08-08 17:20:34 +08:00
parent 00b34fda42
commit e51e8f7196
2 changed files with 20 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
resources/assets/js/components/MicroApps/modal.vue
View File

@ -235,11 +235,11 @@ export default {
--modal-resize-display: block; --modal-resize-display: block;
--modal-content-left: auto; --modal-content-left: auto;
--modal-content-min-width: auto; --modal-content-min-width: auto;
--modal-body-margin: 8px; --modal-body-margin: 0;
--modal-body-border-radius: 16px; --modal-body-border-radius: 0;
--modal-body-background-color: #ffffff; --modal-body-background-color: #ffffff;
--modal-dark-filter: none; --modal-dark-filter: none;
--modal-slide-transform: translate(15%, 0) scale(0.98); --modal-slide-transform: translate(15%, 0);
--modal-capsule-bgcolor: rgba(255, 255, 255, 0.6); --modal-capsule-bgcolor: rgba(255, 255, 255, 0.6);
--modal-capsule-bor-color: rgba(229, 230, 235, 0.6); --modal-capsule-bor-color: rgba(229, 230, 235, 0.6);
@ -266,7 +266,7 @@ export default {
--modal-content-min-width: 100%; --modal-content-min-width: 100%;
--modal-body-margin: 0; --modal-body-margin: 0;
--modal-body-border-radius: 0; --modal-body-border-radius: 0;
--modal-slide-transform: translate(0, 15%) scale(0.98); --modal-slide-transform: translate(0, 15%);
} }
&-hidden { &-hidden {
@ -389,12 +389,9 @@ export default {
} }
&-fade { &-fade {
&-enter-active { &-enter-active,
transition: all .2s ease;
}
&-leave-active { &-leave-active {
transition: all .2s ease; transition: opacity .5s cubic-bezier(0.32, 0.72, 0, 1);
} }
&-enter, &-enter,
@ -404,12 +401,9 @@ export default {
} }
&-slide { &-slide {
&-enter-active { &-enter-active,
transition: all .2s ease;
}
&-leave-active { &-leave-active {
transition: all .2s ease; transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1), opacity .3s cubic-bezier(0.32, 0.72, 0, 1);
} }
&-enter, &-enter,

27
resources/assets/sass/components/drawer-overlay.scss vendored
View File

@ -29,17 +29,17 @@ body {
// 通用抽屉样式 // 通用抽屉样式
.common-drawer { .common-drawer {
--margin-top: 8px; --margin-top: 0px;
--margin-left: 8px; --margin-left: 0px;
--margin-right: 8px; --margin-right: 0px;
--margin-bottom: 8px; --margin-bottom: 0px;
--close-top: 16px; --close-top: 12px;
--close-right: 16px; --close-right: 12px;
--close-size: 40px; --close-size: 40px;
--close-color: #606266; --close-color: #606266;
--title-color: #303133; --title-color: #303133;
--content-bg-color: #ffffff; --content-bg-color: #ffffff;
--border-radius: 16px; --border-radius: 0px;
&.file-drawer { &.file-drawer {
--margin-top: 40px; --margin-top: 40px;
@ -155,6 +155,7 @@ body {
&-more { &-more {
flex-shrink: 0; flex-shrink: 0;
margin: 0 8px;
} }
} }
@ -222,14 +223,12 @@ body.dark-mode-reverse {
&-right { &-right {
&-enter-active, &-enter-active,
&-leave-active { &-leave-active {
touch-action: none; transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1), opacity .3s cubic-bezier(0.32, 0.72, 0, 1);
will-change: transform, opacity;
transition: transform .2s cubic-bezier(0.32, 0.72, 0, 1), opacity .2s cubic-bezier(0.32, 0.72, 0, 1);
} }
&-enter, &-enter,
&-leave-to { &-leave-to {
transform: translate(15%, 0) scale(0.98); transform: translate(15%, 0);
opacity: 0; opacity: 0;
} }
} }
@ -237,14 +236,12 @@ body.dark-mode-reverse {
&-bottom { &-bottom {
&-enter-active, &-enter-active,
&-leave-active { &-leave-active {
touch-action: none; transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1), opacity .3s cubic-bezier(0.32, 0.72, 0, 1);
will-change: transform, opacity;
transition: transform .2s cubic-bezier(0.32, 0.72, 0, 1), opacity .2s cubic-bezier(0.32, 0.72, 0, 1);
} }
&-enter, &-enter,
&-leave-to { &-leave-to {
transform: translate(0, 15%) scale(0.98); transform: translate(0, 15%);
opacity: 0; opacity: 0;
} }
} }