<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>紫色星空渐变背景</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      overflow: hidden;
      font-family: 'Arial', sans-serif;
    }
    
    .starry-sky {
      position: relative;
      width: 100vw;
      height: 100vh;
      background: linear-gradient(135deg, #1a0b2e, #4a1e6d, #6b2c9c);
      overflow: hidden;
    }
    
    .star {
      position: absolute;
      background-color: #f9e076;
      border-radius: 50%;
      animation: twinkle 4s infinite ease-in-out;
    }
    
    .star.small {
      width: 2px;
      height: 2px;
    }
    
    .star.medium {
      width: 3px;
      height: 3px;
    }
    
    .star.large {
      width: 4px;
      height: 4px;
    }
    
    .star.x-large {
      width: 5px;
      height: 5px;
      box-shadow: 0 0 10px 2px rgba(249, 224, 118, 0.7);
    }
    
    @keyframes twinkle {
      0%, 100% {
        opacity: 0.3;
      }
      50% {
        opacity: 1;
      }
    }
    
    .content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      text-align: center;
      z-index: 10;
      text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    
    .content h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      color: #f9e076;
    }
    
    .content p {
      font-size: 1.2rem;
      max-width: 600px;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="starry-sky">
      <div 
        v-for="(star, index) in stars" 
        :key="index"
        class="star"
        :class="star.size"
        :style="{
          left: star.x + 'vw',
          top: star.y + 'vh',
          animationDelay: star.delay + 's'
        }"
      ></div>
      
      <div class="content">
        <h1>紫色星空</h1>
        <p>这是一个使用Vue实现的紫色渐变星空背景，带有闪烁的淡黄色星光点缀。</p>
      </div>
    </div>
  </div>

  <script>
    const { createApp } = Vue;
    
    createApp({
      data() {
        return {
          stars: []
        }
      },
      mounted() {
        this.generateStars();
      },
      methods: {
        generateStars() {
          const starCount = 150;
          const sizes = ['small', 'medium', 'large', 'x-large'];
          
          for (let i = 0; i < starCount; i++) {
            this.stars.push({
              x: Math.random() * 100,
              y: Math.random() * 100,
              size: sizes[Math.floor(Math.random() * sizes.length)],
              delay: Math.random() * 4
            });
          }
        }
      }
    }).mount('#app');
  </script>
</body>
</html>