增加悬浮窗页面功能

src/layout/components/FastMenu/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="fast-menu">
+    <el-dropdown
+      trigger="click"
+      placement="top-end"
+      @visible-change="handleVisibleChange"
+      append-to-body="true"
+    >
+      <img class="img" :src="imgsrc" alt="" />
+      <!-- <el-icon color="#fff" size="24px">
+        <Plus v-if="!showMenu" />
+        <Close v-else />
+      </el-icon> -->
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item v-for="(item, index) in list" :key="index">
+            Action {{ index + 1 }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+const list = ref(new Array(10).fill(1));
+
+const imgsrc = computed(() => {
+  return showMenu.value
+    ? new URL("/src/assets/images/close.png", import.meta.url).href
+    : new URL("/src/assets/images/plus.png", import.meta.url).href;
+});
+const showMenu = ref(false);
+function handleVisibleChange(visible: boolean) {
+  showMenu.value = visible;
+}
+</script>
+<style lang="scss" scoped>
+.fast-menu {
+  position: fixed;
+  $size: 40px;
+  right: 40px;
+  bottom: 40px;
+  width: $size;
+  height: $size;
+  .img {
+    width: $size;
+    height: $size;
+  }
+  // box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+  // background: linear-gradient(135deg, #409eff, #3a84ff);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  .svg-icon {
+    margin-right: 0;
+    color: #fff;
+  }
+}
+</style>