feat:add popups component

icons/Close.vue

@@ -0,0 +1,25 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24"
+        height="24" viewBox="0 0 24 24">
+        <defs>
+            <clipPath id="master_svg0_828_5989">
+                <rect x="0" y="0" width="24" height="24" rx="0" />
+            </clipPath>
+        </defs>
+        <g clip-path="url(#master_svg0_828_5989)">
+            <g>
+                <rect x="0" y="0" width="24" height="24" rx="0" fill="#FFFFFF" fill-opacity="0.009999999776482582" />
+            </g>
+            <g>
+                <path
+                    d="M16.29238,17.7066L16.29289,17.7071Q16.43355,17.8478,16.61732,17.9239Q16.801090000000002,18,17,18Q17.198900000000002,18,17.3827,17.9239Q17.566499999999998,17.8478,17.7071,17.7071Q17.8478,17.566499999999998,17.9239,17.3827Q18,17.198900000000002,18,17Q18,16.801090000000002,17.9239,16.61732Q17.8478,16.43355,17.7071,16.29289L7.707107,6.292893Q7.566455,6.152241,7.382683,6.0761199999999995Q7.198912,6,7,6Q6.801088,6,6.617317,6.0761199999999995Q6.433545,6.152241,6.292893,6.292893Q6.152241,6.433545,6.0761199999999995,6.617317Q6,6.801088,6,7Q6,7.198912,6.0761199999999995,7.382683Q6.152241,7.566455,6.292893,7.707107L16.29238,17.7066Z"
+                    fill-rule="evenodd" fill="currentColor" fill-opacity="1" />
+            </g>
+            <g>
+                <path
+                    d="M17.706699999999998,7.707482L17.7071,7.707107Q17.8478,7.566455,17.9239,7.382683Q18,7.198912,18,7Q18,6.801088,17.9239,6.617317Q17.8478,6.433545,17.7071,6.292893L17.7065,6.292321Q17.7025,6.28832,17.6985,6.284365L17.6979,6.2838Q17.5578,6.147326,17.3767,6.073663Q17.1955,6,17,6Q16.801090000000002,6,16.61732,6.0761199999999995Q16.43355,6.152241,16.29289,6.292893L16.29252,6.293268L6.293268,16.29252L6.292893,16.29289Q6.152241,16.43355,6.076121,16.61732Q6,16.801090000000002,6,17Q6,17.198900000000002,6.0761199999999995,17.3827Q6.152241,17.566499999999998,6.292893,17.7071Q6.433545,17.8478,6.617317,17.9239Q6.801088,18,7,18Q7.198912,18,7.382683,17.9239Q7.566455,17.8478,7.707107,17.7071L7.707482,17.706699999999998L17.706699999999998,7.707482Z"
+                    fill-rule="evenodd" fill="currentColor" fill-opacity="1" />
+            </g>
+        </g>
+    </svg>
+</template>

popups/index.vue

@@ -0,0 +1,59 @@
+<script setup>
+import Close from '../icons/Close.vue';
+import { ref } from 'vue';
+
+const props = defineProps({
+    // 提示文字
+    tips: {
+        type: String,
+        default: ''
+    },
+    // 是否显示
+    visible: {
+        type: Boolean,
+        default: false,
+        required: true
+    }
+});
+
+const emits = defineEmits(['update:visible']);
+
+const close = () => {
+    emits('update:visible', false);
+};
+
+</script>
+
+<template>
+    <div class="popup">
+        <Close @click="close" class="icon" />
+        <span>{{ tips }}</span>
+    </div>
+</template>
+
+<style scoped>
+.popup {
+    background-color: var(--sider-bg);
+    border: 1px solid #241917;
+    box-shadow: 0 5px 8px var(--button-normal-shadow);
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    padding: 1.2vw 8vw;
+    margin: 1.25vw;
+    border-radius: 8px;
+}
+
+.icon {
+    position: absolute;
+    top: .4vw;
+    right: .4vw;
+    cursor: pointer;
+    color: #241917;
+}
+
+.icon:hover {
+    transform: rotate(180deg);
+    transition: all 0.5s ease-out;
+}
+</style>