feat: new popup for map marker

src/components/Card/index.scss

@@ -17,6 +17,8 @@
   display: flex;
   flex-direction: column;
   color: #fff;
+  animation: fadeInBottom 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+
   > div {
     flex: 1;
     overflow-y: auto;

src/components/Popup/index.scss

@@ -0,0 +1,39 @@
+@import '../../styles/utils.scss';
+
+.popup-container {
+  box-sizing: border-box;
+  background-image: url('../../assets/card-bg/frame_filter_center@2x.png');
+  background-position: top center;
+  background-repeat: repeat-y;
+  position: relative;
+  animation: fadeInBottom 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+
+  .card-border-bottom-left,
+  .card-border-bottom-right,
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    width: px2rem(40px);
+    height: px2rem(40px);
+    background-color: transparent;
+    border-left: px2rem(1px) solid #00a3ff;
+    border-top: px2rem(1px) solid #00a3ff;
+    top: 0;
+    left: 0;
+  }
+  .card-border-bottom-right,
+  &::after {
+    border-left: unset;
+    border-right: px2rem(1px) solid #00a3ff;
+    right: 0;
+    left: unset;
+  }
+  .card-border-bottom-left,
+  .card-border-bottom-right {
+    bottom: 0;
+    top: unset;
+    border-bottom: px2rem(1px) solid #00a3ff;
+    border-top: unset;
+  }
+}

src/components/Popup/index.tsx

@@ -0,0 +1,14 @@
+import { defineComponent } from 'vue-demi';
+import './index.scss';
+export default defineComponent({
+  name: 'Popup',
+  setup(props, ctx) {
+    return () => (
+      <div class="popup-container">
+        {ctx.slots.default && ctx.slots.default()}
+        <i class="card-border-bottom-left"></i>
+        <i class="card-border-bottom-right"></i>
+      </div>
+    );
+  },
+});

src/styles/global.scss

@@ -88,9 +88,9 @@ table {
 html,
 body {
   font-size: 16px;
-  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", Roboto,
-    "helvetica neue", Arial, "noto sans", sans-serif, "apple color emoji",
-    "segoe ui emoji", "segoe ui symbol", "noto color emoji";
+  font-family: -apple-system, BlinkMacSystemFont, 'segoe ui', Roboto,
+    'helvetica neue', Arial, 'noto sans', sans-serif, 'apple color emoji',
+    'segoe ui emoji', 'segoe ui symbol', 'noto color emoji';
 }
 body {
   background: #f0f2f5;
@@ -102,3 +102,27 @@ body {
 #nprogress .bar {
   z-index: 9999;
 }
+
+@keyframes fadeInBottom {
+  0% {
+    opacity: 0;
+    transform: translateY(30%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}