feat:交接

背景/3.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="background" ref="background">
+      <div v-for="star in stars" :key="star.id" class="star" :style="{ left: star.x + 'vw', top: star.y + 'vh', width: star.size + 'px', height: star.size + 'px' }"></div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: 'BackgroundUI',
+    data() {
+      return {
+        stars: []
+      };
+    },
+    mounted() {
+      this.generateStars();
+    },
+    methods: {
+      generateStars() {
+        const numberOfStars = 100;
+        for (let i = 0; i < numberOfStars; i++) {
+          this.stars.push({
+            id: i,
+            x: Math.random() * 100,
+            y: Math.random() * 100,
+            size: Math.random() * 2 + 1
+          });
+        }
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  .background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: linear-gradient(to bottom, #4b0082, #8a2be2, #483d8b);
+    overflow: hidden;
+    z-index: -1;
+  }
+  
+  .star {
+    position: absolute;
+    background-color: #ffff99;
+    border-radius: 50%;
+    opacity: 0.7;
+    animation: twinkle 2s infinite alternate, move 5s infinite ease-in-out;
+  }
+  
+  @keyframes twinkle {
+    from { opacity: 0.7; }
+    to { opacity: 0.3; }
+  }
+  
+  @keyframes move {
+    0% { transform: translateY(0); }
+    50% { transform: translateY(-5px); }
+    100% { transform: translateY(0); }
+  }
+  </style>