From a2a7e38cd24b61533a5407074071a6f994ab3442 Mon Sep 17 00:00:00 2001
From: lsh <lsh@163.com>
Date: 星期四, 04 九月 2025 08:43:34 +0800
Subject: [PATCH] #
---
src/main/webapp/views/index.html | 105 +++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 103 insertions(+), 2 deletions(-)
diff --git a/src/main/webapp/views/index.html b/src/main/webapp/views/index.html
index e415f32..f7170a1 100644
--- a/src/main/webapp/views/index.html
+++ b/src/main/webapp/views/index.html
@@ -22,7 +22,74 @@
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;
@@ -213,8 +280,15 @@
}
</style>
</head>
-<body id="app1">
- <!--<header>-->
+<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 id="app">
@@ -478,6 +552,33 @@
</div>
<script>
+ // 鍦╒ue瀹炰緥澶栨坊鍔犵矑瀛愮敓鎴愬嚱鏁�
+ 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);
// 鍦╒ue瀹炰緥澶栬幏鍙朾ody灏哄
function getBodySize() {
return {
--
Gitblit v1.9.1