| | |
| | | justify-content: center; |
| | | align-items: center; |
| | | height: 100vh; |
| | | |
| | | background: linear-gradient(135deg, #e6f7ff 0%, #f0f8ff 100%); |
| | | overflow: hidden; |
| | | position: relative; |
| | | } |
| | | .tech-background { |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | z-index: -1; |
| | | pointer-events: none; |
| | | } |
| | | |
| | | .grid-overlay { |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | background-image: |
| | | linear-gradient(rgba(66, 134, 244, 0.1) 1px, transparent 1px), |
| | | linear-gradient(90deg, rgba(66, 134, 244, 0.1) 1px, transparent 1px); |
| | | background-size: 30px 30px; |
| | | perspective: 1000px; |
| | | transform-style: preserve-3d; |
| | | transform: perspective(500px) rotateX(60deg); |
| | | } |
| | | |
| | | .glow-effect { |
| | | position: absolute; |
| | | width: 100%; |
| | | height: 100%; |
| | | top: 0; |
| | | left: 0; |
| | | background: |
| | | radial-gradient(circle at 20% 30%, rgba(41, 128, 185, 0.2) 0%, transparent 40%), |
| | | radial-gradient(circle at 80% 70%, rgba(46, 204, 113, 0.2) 0%, transparent 40%); |
| | | filter: blur(10px); |
| | | } |
| | | |
| | | .particles-container { |
| | | position: absolute; |
| | | width: 100%; |
| | | height: 100%; |
| | | top: 0; |
| | | left: 0; |
| | | } |
| | | |
| | | .particle { |
| | | position: absolute; |
| | | background-color: rgba(255, 255, 255, 0.5); |
| | | border-radius: 50%; |
| | | animation: float 15s infinite ease-in-out; |
| | | } |
| | | |
| | | @keyframes float { |
| | | 0%, 100% { |
| | | transform: translateY(0) translateX(0); |
| | | opacity: 0.2; |
| | | } |
| | | 50% { |
| | | transform: translateY(-20px) translateX(20px); |
| | | opacity: 0.6; |
| | | } |
| | | } |
| | | |
| | | header { |
| | | background-color: #2196F3; |
| | | color: white; |
| | |
| | | } |
| | | </style> |
| | | </head> |
| | | <body id="app1"> |
| | | <body > |
| | | |
| | | <!-- 科技感背景元素 --> |
| | | <div class="tech-background"> |
| | | <div class="grid-overlay"></div> |
| | | <div class="glow-effect"></div> |
| | | <div class="particles-container" id="particles-container"></div> |
| | | </div> |
| | | <!--<header>--> |
| | | <!-- 环形穿梭车智能系统--> |
| | | <!--</header>--> |
| | |
| | | </div> |
| | | |
| | | <script> |
| | | // 在Vue实例外添加粒子生成函数 |
| | | function createParticles() { |
| | | const container = document.getElementById('particles-container'); |
| | | const particleCount = 30; |
| | | |
| | | for (let i = 0; i < particleCount; i++) { |
| | | const particle = document.createElement('div'); |
| | | particle.classList.add('particle'); |
| | | |
| | | // 随机大小和位置 |
| | | const size = Math.random() * 3 + 1; |
| | | const posX = Math.random() * 100; |
| | | const posY = Math.random() * 100; |
| | | const delay = Math.random() * 15; |
| | | |
| | | particle.style.width = `${size}px`; |
| | | particle.style.height = `${size}px`; |
| | | particle.style.left = `${posX}vw`; |
| | | particle.style.top = `${posY}vh`; |
| | | particle.style.animationDelay = `${delay}s`; |
| | | |
| | | container.appendChild(particle); |
| | | } |
| | | } |
| | | |
| | | // 页面加载完成后创建粒子 |
| | | document.addEventListener('DOMContentLoaded', createParticles); |
| | | // 在Vue实例外获取body尺寸 |
| | | function getBodySize() { |
| | | return { |