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 | 101 +++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 95 insertions(+), 6 deletions(-)
diff --git a/src/main/webapp/views/index.html b/src/main/webapp/views/index.html
index f7170a1..0ba63d4 100644
--- a/src/main/webapp/views/index.html
+++ b/src/main/webapp/views/index.html
@@ -35,6 +35,7 @@
height: 100%;
z-index: -1;
pointer-events: none;
+ opacity: 0.6;
}
.grid-overlay {
@@ -44,9 +45,9 @@
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;
+ 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);
@@ -59,8 +60,8 @@
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%);
+ 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);
}
@@ -278,6 +279,89 @@
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 >
@@ -320,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>
--
Gitblit v1.9.1