z-index

src/layout/HeaderV2/BackgroundTask.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { setCallback } from "@/utils/websocket";
+import { useZIndex } from "element-plus";
 
 type TaskValue = {
   percentage?: number;
@@ -14,6 +15,10 @@ const store: {
   [key: string]: TaskValue;
 } = reactive({});
 
+const style = ref({
+  zIndex: 1,
+});
+
 function handleClose(data: TaskValue) {
   const key = data.id || data.name;
   delete store[key];
@@ -29,14 +34,19 @@ onMounted(() => {
       store[data.id || data.name] = data;
     }
   });
+  style.value.zIndex = useZIndex().nextZIndex();
 });
 </script>
 
 <template>
   <teleport to="body">
-    <div class="system_background-task">
+    <div
+      class="system_background-task"
+      v-if="Object.keys(store).length > 0"
+      :style="style"
+    >
       <div v-for="item in store" class="system_background-task-item">
-        <div style="font-size: 12px">{{ item.name }}:</div>
+        <div style="font-size: 12px; margin-bottom: 5px">{{ item.name }}：</div>
         <div class="system_background-task-item_progress">
           <el-progress
             style="width: 240px"
@@ -46,7 +56,7 @@ onMounted(() => {
             :text-inside="item.textInside || false"
             :stroke-width="item.strokeWidth || 15"
           />
-          <div style="margin-left: 8px">
+          <div>
             <el-button
               icon="CircleClose"
               circle
@@ -61,7 +71,6 @@ onMounted(() => {
 
 <style lang="scss">
 .system_background-task {
-  z-index: 99;
   position: fixed;
   right: 10px;
   bottom: 10px;