From b588383f2d3517c84a4c9cc25c2a0bed085db978 Mon Sep 17 00:00:00 2001
From: lsh <lsh@163.com>
Date: 星期四, 04 九月 2025 08:50:55 +0800
Subject: [PATCH] #
---
src/main/webapp/views/index.html | 196 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 193 insertions(+), 3 deletions(-)
diff --git a/src/main/webapp/views/index.html b/src/main/webapp/views/index.html
index e415f32..0ba63d4 100644
--- a/src/main/webapp/views/index.html
+++ b/src/main/webapp/views/index.html
@@ -22,7 +22,75 @@
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;
+ opacity: 0.6;
+ }
+
+ .grid-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-image:
+ linear-gradient(rgba(66, 134, 244, 0.08) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(66, 134, 244, 0.08) 1px, transparent 1px);
+ background-size: 40px 40px;
+ 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.3) 0%, transparent 40%),
+ radial-gradient(circle at 80% 70%, rgba(46, 204, 113, 0.3) 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;
@@ -211,10 +279,100 @@
left: 1000px;
text-align: center;
}
+
+ /* 鏂拌璁＄殑绔欑偣鏍峰紡 - 鍩轰簬绗簩寮犲浘鐗� */
+ .station {
+ position: absolute;
+ width: 24px;
+ height: 24px;
+ text-align: center;
+ line-height: 24px;
+ font-size: 10px;
+ font-weight: bold;
+ transition: all 0.3s ease;
+ background-color: #ab1839;
+ border-radius: 4px;
+ color: white;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+ transform: scale(1);
+ z-index: 10;
+ /* 宓屽鏁堟灉 */
+ border: 2px solid white;
+ }
+
+ .station::before {
+ content: '';
+ position: absolute;
+ top: 3px;
+ left: 3px;
+ right: 3px;
+ bottom: 3px;
+ border: 1px solid rgba(255, 255, 255, 0.8);
+ border-radius: 2px;
+ pointer-events: none;
+ }
+
+ /* 鍥涗釜瑙掔殑涓夎褰㈡寚绀哄櫒 */
+ .station::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ pointer-events: none;
+ }
+
+ .station .corner {
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 0 4px 4px 0;
+ border-color: transparent #ffffff transparent transparent;
+ }
+
+ .station .corner-tl {
+ top: -2px;
+ left: -2px;
+ transform: rotate(0deg);
+ }
+
+ .station .corner-tr {
+ top: -2px;
+ right: -2px;
+ transform: rotate(90deg);
+ }
+
+ .station .corner-bl {
+ bottom: -2px;
+ left: -2px;
+ transform: rotate(270deg);
+ }
+
+ .station .corner-br {
+ bottom: -2px;
+ right: -2px;
+ transform: rotate(180deg);
+ }
+
+ /* 绔欑偣鎮仠鏁堟灉 */
+ .station:hover {
+ transform: scale(1.6);
+ z-index: 999;
+ box-shadow: 0 0 15px rgba(171, 24, 57, 0.8);
+ }
</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">
@@ -246,7 +404,12 @@
<div v-for="station in tableDataDev" class="station" :style="{
top: convertToCSSPosition(station.valueX, station.valueY).y + 'px',
left: convertToCSSPosition(station.valueX, station.valueY).x + 'px',
- backgroundColor: station.modeColor}">{{ station.index }}
+ backgroundColor: station.modeColor}">
+ <div class="corner corner-tl"></div>
+ <div class="corner corner-tr"></div>
+ <div class="corner corner-bl"></div>
+ <div class="corner corner-br"></div>
+ {{ station.index }}
</div>
<div>
@@ -478,6 +641,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