diff --git a/code/base-project/base-vue/packages/ao-design/src/popup/index.scss b/code/base-project/base-vue/packages/ao-design/src/popup/index.scss index 59a4d20a..72d2302a 100644 --- a/code/base-project/base-vue/packages/ao-design/src/popup/index.scss +++ b/code/base-project/base-vue/packages/ao-design/src/popup/index.scss @@ -12,26 +12,50 @@ $popup-prefix: '#{$prefix}-popup'; border-radius: 2px; z-index: 1000; box-sizing: border-box; - box-shadow: $shadow-popup; text-align: center; &-arrow { position: absolute; width: 8px; height: 8px; z-index: 1; + &::before { - position: absolute; content: ''; - width: 8px; - height: 8px; + position: absolute; + inset: 0; + background: $bg-color-container; transform: rotate(45deg); - // background: $bg-color-container; - background: red; - box-sizing: border-box; - margin: 0; - padding: 0; + transform-origin: center; } } + // 上方弹出,阴影主方向靠下(轻微),边缘明显 + &[data-popup-placement^='top'] { + box-shadow: + 0 4px 8px rgba(0, 0, 0, 0.06), + 0 0 4px rgba(0, 0, 0, 0.12); // + } + + // 下方弹出,阴影主方向靠上,边缘明显 + &[data-popup-placement^='bottom'] { + box-shadow: + 0 -4px 8px rgba(0, 0, 0, 0.06), + 0 0 4px rgba(0, 0, 0, 0.12); + } + + // 左侧弹出,阴影主方向靠右,边缘明显 + &[data-popup-placement^='left'] { + box-shadow: + 4px 0 8px rgba(0, 0, 0, 0.06), + 0 0 4px rgba(0, 0, 0, 0.12); + } + + // 右侧弹出,阴影主方向靠左,边缘明显 + &[data-popup-placement^='right'] { + box-shadow: + -4px 0 8px rgba(0, 0, 0, 0.06), + 0 0 4px rgba(0, 0, 0, 0.12); + } + // 上方弹出,箭头在底部 &[data-popup-placement^='top'] > &-arrow { bottom: -4px; diff --git a/code/base-project/base-vue/packages/ao-design/src/popup/index.tsx b/code/base-project/base-vue/packages/ao-design/src/popup/index.tsx index d8877d62..deb5a60d 100644 --- a/code/base-project/base-vue/packages/ao-design/src/popup/index.tsx +++ b/code/base-project/base-vue/packages/ao-design/src/popup/index.tsx @@ -262,7 +262,7 @@ export default defineComponent({ > {slots.content ? slots.content() : props.content} {props.showArrow && ( -