diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/CollapsiblePanel.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/CollapsiblePanel.vue index f418820..fd2fe50 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/CollapsiblePanel.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/CollapsiblePanel.vue @@ -207,12 +207,31 @@ function onAfterLeave(el) { } &__body { + position: relative; overflow: hidden; transition: height 0.3s ease; + + // 使用伪元素作为背景层,九宫格实现 + &::before { + content: ''; + position: absolute; + inset: 0; + border-style: solid; + border-width: vh(25) vw(30); + border-image-source: url('../../assets/images/面板bg.png'); + border-image-slice: 25 30 25 30 fill; + border-image-width: vh(25) vw(30); + border-image-repeat: stretch; + box-sizing: border-box; + pointer-events: none; // 不阻挡鼠标事件 + z-index: -1; // 放在内容下方 + } } &__content { - padding: vh(12) vw(5) vh(20); + position: relative; + padding: vh(5) vw(20) vh(15); // 留出空间避免被圆角遮挡 + z-index: 1; // 如果内容需要滚动 &.scrollable { @@ -226,6 +245,7 @@ function onAfterLeave(el) { &--collapsed { .collapsible-panel__body { height: 0; + border-width: 0; // 折叠时移除 border } } }