feat:交接

背景/1.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="starry-bg">
+      <!-- 星空层 -->
+      <div class="stars"></div>
+      <div class="twinkling"></div>
+      <div class="gradient-overlay"></div>
+    </div>
+  </template>
+  
+  <script setup>
+  // 无需脚本逻辑，这个是纯背景效果
+  </script>
+  
+  <style scoped>
+  /* 全屏容器 */
+  .starry-bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+  }
+  
+  /* 背景渐变层（以紫色为主） */
+  .gradient-overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at center, #a48cf2 0%, #5b34b1 50%, #1a093f 100%);
+    z-index: 1;
+  }
+  
+  /* 星星层（淡黄色点点） */
+  .stars {
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    background-image: radial-gradient(#fff7b3 1px, transparent 1px),
+                      radial-gradient(#fff7b3 1px, transparent 1px);
+    background-size: 2px 2px, 3px 3px;
+    background-position: 0 0, 50px 50px;
+    animation: moveStars 200s linear infinite;
+    z-index: 0;
+    opacity: 0.7;
+  }
+  
+  /* 闪烁层 */
+  .twinkling {
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    background-image: radial-gradient(#fff9c4 1px, transparent 1px),
+                      radial-gradient(#fff7b3 1px, transparent 1px);
+    background-size: 3px 3px, 2px 2px;
+    animation: twinkle 3s infinite ease-in-out alternate;
+    z-index: 2;
+    opacity: 0.5;
+  }
+  
+  /* 星星轻微移动模拟流动的感觉 */
+  @keyframes moveStars {
+    from { background-position: 0 0, 50px 50px; }
+    to { background-position: 10000px 10000px, 10050px 10050px; }
+  }
+  
+  /* 闪烁动画 */
+  @keyframes twinkle {
+    from { opacity: 0.3; }
+    to { opacity: 0.7; }
+  }
+  </style>
+