github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-12 11:19:56 +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-content-left: auto;
--modal-content-min-width: auto;
--modal-body-margin: 8px;
--modal-body-border-radius: 16px;
--modal-body-margin: 0;
--modal-body-border-radius: 0;
--modal-body-background-color: #ffffff;
--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-bor-color: rgba(229, 230, 235, 0.6);
@ -266,7 +266,7 @@ export default {
--modal-content-min-width: 100%;
--modal-body-margin: 0;
--modal-body-border-radius: 0;
--modal-slide-transform: translate(0, 15%) scale(0.98);
--modal-slide-transform: translate(0, 15%);
}
&-hidden {
@ -389,12 +389,9 @@ export default {
}
&-fade {
&-enter-active {
transition: all .2s ease;
}
&-enter-active,
&-leave-active {
transition: all .2s ease;
transition: opacity .5s cubic-bezier(0.32, 0.72, 0, 1);
}
&-enter,
@ -404,12 +401,9 @@ export default {
}
&-slide {
&-enter-active {
transition: all .2s ease;
}
&-enter-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,

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

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