diff --git a/src/views/chart/ContentEdit/components/EditTools/index.vue b/src/views/chart/ContentEdit/components/EditTools/index.vue index d7679911..034620d0 100644 --- a/src/views/chart/ContentEdit/components/EditTools/index.vue +++ b/src/views/chart/ContentEdit/components/EditTools/index.vue @@ -9,15 +9,24 @@ @mouseenter="toolsMouseoverHandle" @mouseleave="toolsMouseoutHandle" > + + + @@ -83,6 +84,8 @@ let mouseTime: any = null const isMini = ref(true) // 是否是侧边栏 const isAside = computed(() => settingStore.getChartToolsStatus === ToolsStatusEnum.ASIDE) +// 控制 tootip 提示时机 +const asideTootipDis = ref(true) // 文件上传 const { importUploadFileListRef, importCustomRequest, importBeforeUpload } = useFile() @@ -103,8 +106,12 @@ const toolsMouseoverHandle = () => { mouseTime = setTimeout(() => { if (isMini.value) { isMini.value = false + asideTootipDis.value = true } }, 200); + setTimeout(() => { + asideTootipDis.value = false + }, 200) } const toolsMouseoutHandle = () => { @@ -122,7 +129,7 @@ $dockBottom: 60px; $dockMiniWidth: 200px; $dockMiniBottom: 53px; -$asideHeight: 78px; +$asideHeight: 90px; $asideMiniHeight: 22px; $asideBottom: 70px; @@ -137,18 +144,15 @@ $asideBottom: 70px; mix-blend-mode: luminosity; @include filter-border-color("hover-border-color-shallow"); &.aside { - flex-direction: column; + flex-direction: column-reverse; height: auto; right: 20px; padding: 20px 8px; bottom: $asideBottom; - transition: height ease .4s; + overflow: hidden; + transition: height ease 0.4s; .btn-item { margin-bottom: 10px; - /* 没生效,用上面的 go-mb-0 代替 */ - &:last-child { - margin-bottom: 0; - } @include deep() { .n-button__icon { margin-right: 4px; @@ -172,15 +176,18 @@ $asideBottom: 70px; position: relative; display: block; } + .asideLogo { + opacity: 0.4; + } } &.isMini { cursor: pointer; padding: 13px 13px; background-color: var(--n-toggle-bar-color); - animation: aside-mini-in .4s ease forwards; + animation: aside-mini-in 0.4s ease forwards; @keyframes aside-mini-in { 0% { - opacity: .5; + opacity: 0.5; height: $asideHeight; } 100% { @@ -192,6 +199,9 @@ $asideBottom: 70px; position: relative; display: none; } + .asideLogo { + opacity: 1; + } } }