添加动态Blob背景效果

src/layout/index.vue

@@ -36,6 +36,13 @@
 
 <template>
   <div class="wrapper" :class="{ fluid: isFluid }">
+    <!-- 动态 Blob 背景 -->
+    <div class="blob-container">
+      <div class="blob blob-1"></div>
+      <div class="blob blob-2"></div>
+      <div class="blob blob-3"></div>
+    </div>
+    
     <sidebar v-if="isMenusShow && !isHorizontalMenu" />
     <div class="right" :class="{ flex: isTopbarFixed }">
       <div class="top">
@@ -106,30 +113,94 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .wrapper {
+  position: relative;
   display: flex;
   margin: 0 auto;
   width: 1440px;
-  height: 100%;
+  height: 100vh;
+  overflow: hidden;
+  background: hsl(var(--background));
+  
   &.fluid {
     width: 100%;
   }
+  
+  // Blob 容器
+  .blob-container {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+    z-index: 0;
+  }
+  
+  .blob {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(100px);
+    opacity: 0.4;
+    pointer-events: none;
+  }
+  
+  .blob-1 {
+    width: 800px;
+    height: 800px;
+    background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(34, 211, 238, 0.2));
+    top: -300px;
+    right: -300px;
+    animation: blob-float 20s ease-in-out infinite;
+  }
+  
+  .blob-2 {
+    width: 700px;
+    height: 700px;
+    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.25));
+    bottom: -250px;
+    left: -250px;
+    animation: blob-float-2 25s ease-in-out infinite;
+  }
+  
+  .blob-3 {
+    width: 600px;
+    height: 600px;
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(96, 165, 250, 0.18));
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    animation: blob-float-3 30s ease-in-out infinite;
+  }
 
   .right {
+    position: relative;
+    z-index: 1;
     flex: 1;
     overflow: auto;
+    background: transparent;
+    
     &.flex {
       overflow: hidden;
       display: flex;
       flex-direction: column;
     }
+    
     .top {
-      background: #fff;
+      position: relative;
+      z-index: 10;
+      background: rgba(255, 255, 255, 0.4);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+      box-shadow: 0 2px 16px rgba(0, 0, 0, 0.03);
     }
+    
     .main {
+      position: relative;
+      z-index: 1;
       flex: 1;
-      background: #f5f5f5;
+      background: transparent;
       padding: 16px;
       overflow: auto;
+      
       &.pt0 {
         padding-top: 0;
       }