u

code/base-project/base-vue/packages/ao-design/src/popup/index.scss

@@ -1,31 +1,70 @@
 @use '../_styles/_variables.scss' as *;
 @use 'sass:color';
 
-$popup-prefix: "#{$prefix}-popup";
+$popup-prefix: '#{$prefix}-popup';
 
 .#{$popup-prefix} {
   position: absolute;
-  background-color: #333;
-  color: #fff;
+  background-color: $bg-color-container;
+  color: $text-color-base;
   padding: 4px 8px;
-  font-size: 12px;
+  font-size: 13px;
   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;
+      transform: rotate(45deg);
+      // background: $bg-color-container;
+      background: red;
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+  }
+  // 上方弹出，箭头在底部
+  &[data-popup-placement^='top'] > &-arrow {
+    bottom: -4px;
   }
 
-  &-arrow::before {
-    position: absolute;
-    content: '';
-    width: 8px;
-    height: 8px;
-    background: #333;
-    transform: rotate(45deg);
-    box-sizing: border-box;
+  // 下方弹出，箭头在顶部
+  &[data-popup-placement^='bottom'] > &-arrow {
+    top: -4px;
+  }
+
+  // 左侧弹出，箭头在右侧
+  &[data-popup-placement^='left'] > &-arrow {
+    right: -4px;
+  }
+
+  // 右侧弹出，箭头在左侧
+  &[data-popup-placement^='right'] > &-arrow {
+    left: -4px;
   }
 }
+
+/* 普通淡入淡出动画 */
+.popup-fade-enter-from,
+.popup-fade-leave-to {
+  opacity: 0;
+}
+
+.popup-fade-enter-to,
+.popup-fade-leave-from {
+  opacity: 1;
+}
+
+.popup-fade-enter-active,
+.popup-fade-leave-active {
+  transition: opacity 0.2s ease;
+}