将背景图像移动到::after伪元素中,避免z-index冲突问题

This commit is contained in:
2026-07-02 19:00:28 +08:00
parent 1db8bac454
commit cb8f2ae26e
2 changed files with 54 additions and 65 deletions

View File

@@ -2,7 +2,15 @@
width: 1920px; width: 1920px;
height: 1080px; height: 1080px;
position: relative; position: relative;
z-index: 0;
overflow: hidden; overflow: hidden;
&:after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background-image: url("./assets/头部动画.webp"), url("./assets/头部动画.png"), background-image: url("./assets/头部动画.webp"), url("./assets/头部动画.png"),
url("./assets/整体边框_静态图片.png"), url("./assets/底部动画.webp"), url("./assets/整体边框_静态图片.png"), url("./assets/底部动画.webp"),
url("./assets/底部动画.png"), url("./assets/头部动画_左侧点.webp"), url("./assets/底部动画.png"), url("./assets/头部动画_左侧点.webp"),
@@ -28,6 +36,7 @@
auto, auto,
auto, auto,
auto; auto;
}
&:before { &:before {
content: "管廊巡检机器人综合管理平台"; content: "管廊巡检机器人综合管理平台";
@@ -38,7 +47,10 @@
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
font-family: YouSheBiaoTiHei, system-ui; font-family: YouSheBiaoTiHei, system-ui;
font-size: 42px; font-size: 42px;
position: relative; position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 2; z-index: 2;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -48,8 +60,9 @@
} }
.background { .background {
position: relative; position: absolute;
z-index: -1; inset: 0;
z-index: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
@@ -57,6 +70,7 @@
.main { .main {
position: absolute; position: absolute;
z-index: 2;
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0; top: 0;

View File

@@ -284,14 +284,11 @@ const streamLoading = ref(false);
const streamError = ref(""); const streamError = ref("");
const controlWsStatus = ref("未连接"); const controlWsStatus = ref("未连接");
const controlError = ref(""); const controlError = ref("");
const controlReconnectLimit = 5;
const controlReconnectDelay = 2000;
let streamPeerConnection = null; let streamPeerConnection = null;
let streamRequestId = 0; let streamRequestId = 0;
let controlSocket = null; let controlSocket = null;
let controlRequestSeed = 0; let controlRequestSeed = 0;
let controlReconnectTimer = null; let controlReconnectTimer = null;
let controlReconnectAttempts = 0;
let controlSocketManualClose = false; let controlSocketManualClose = false;
let chassisControlTimer = null; let chassisControlTimer = null;
let ptzControlTimer = null; let ptzControlTimer = null;
@@ -629,17 +626,11 @@ function scheduleControlReconnect() {
if (controlSocketManualClose || controlReconnectTimer !== null) { if (controlSocketManualClose || controlReconnectTimer !== null) {
return; return;
} }
if (controlReconnectAttempts >= controlReconnectLimit) { controlWsStatus.value = "重连中";
controlWsStatus.value = "连接失败";
controlError.value = "控制 WebSocket 连接失败,请检查 /ws/ros 服务或登录状态";
return;
}
controlReconnectAttempts += 1;
controlWsStatus.value = `重连中(${controlReconnectAttempts}/${controlReconnectLimit})`;
controlReconnectTimer = window.setTimeout(() => { controlReconnectTimer = window.setTimeout(() => {
controlReconnectTimer = null; controlReconnectTimer = null;
connectControlSocket(); connectControlSocket();
}, controlReconnectDelay); }, 2e3);
} }
function connectControlSocket() { function connectControlSocket() {
if (controlSocket && (controlSocket.readyState === WebSocket.OPEN || controlSocket.readyState === WebSocket.CONNECTING)) { if (controlSocket && (controlSocket.readyState === WebSocket.OPEN || controlSocket.readyState === WebSocket.CONNECTING)) {
@@ -648,17 +639,13 @@ function connectControlSocket() {
controlSocketManualClose = false; controlSocketManualClose = false;
controlError.value = ""; controlError.value = "";
controlWsStatus.value = "连接中"; controlWsStatus.value = "连接中";
const socket = new WebSocket(buildControlWsUrl()); controlSocket = new WebSocket(buildControlWsUrl());
controlSocket = socket; controlSocket.onopen = () => {
socket.onopen = () => {
controlReconnectAttempts = 0;
controlWsStatus.value = "已连接"; controlWsStatus.value = "已连接";
}; };
socket.onmessage = (event) => { controlSocket.onmessage = (event) => {
if (event.data === "ping") { if (event.data === "ping") {
if (socket.readyState === WebSocket.OPEN) { controlSocket?.send("pong");
socket.send("pong");
}
return; return;
} }
if (event.data === "pong") { if (event.data === "pong") {
@@ -689,27 +676,18 @@ function connectControlSocket() {
console.error(error); console.error(error);
} }
}; };
socket.onerror = () => { controlSocket.onerror = () => {
if (socket === controlSocket) {
controlError.value = "控制 WebSocket 连接异常"; controlError.value = "控制 WebSocket 连接异常";
}
}; };
socket.onclose = (event) => { controlSocket.onclose = () => {
if (socket !== controlSocket) {
return;
}
controlSocket = null;
controlWsStatus.value = "未连接"; controlWsStatus.value = "未连接";
if (controlSocketManualClose || event.code === 1000) { controlSocket = null;
return;
}
scheduleControlReconnect(); scheduleControlReconnect();
}; };
return socket; return controlSocket;
} }
function closeControlSocket() { function closeControlSocket() {
controlSocketManualClose = true; controlSocketManualClose = true;
controlReconnectAttempts = 0;
if (controlReconnectTimer !== null) { if (controlReconnectTimer !== null) {
window.clearTimeout(controlReconnectTimer); window.clearTimeout(controlReconnectTimer);
controlReconnectTimer = null; controlReconnectTimer = null;
@@ -718,10 +696,8 @@ function closeControlSocket() {
controlWsStatus.value = "未连接"; controlWsStatus.value = "未连接";
return; return;
} }
const socket = controlSocket; controlSocket.close();
controlSocket = null; controlSocket = null;
socket.onclose = null;
socket.close(1000, "manual close");
controlWsStatus.value = "未连接"; controlWsStatus.value = "未连接";
} }
function sendControlMessage(type, data) { function sendControlMessage(type, data) {
@@ -729,7 +705,6 @@ function sendControlMessage(type, data) {
controlError.value = "当前机器人缺少设备标识"; controlError.value = "当前机器人缺少设备标识";
return; return;
} }
controlReconnectAttempts = 0;
const socket = connectControlSocket(); const socket = connectControlSocket();
const payload = { const payload = {
type, type,