将背景图像移动到::after伪元素中,避免z-index冲突问题
This commit is contained in:
@@ -2,32 +2,41 @@
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
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");
|
||||
background-position: top,
|
||||
top,
|
||||
center,
|
||||
bottom,
|
||||
bottom,
|
||||
left top,
|
||||
left top,
|
||||
right top,
|
||||
right top;
|
||||
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
|
||||
no-repeat, no-repeat;
|
||||
background-size: 100%,
|
||||
100%,
|
||||
100% 100%,
|
||||
100%,
|
||||
100%,
|
||||
auto,
|
||||
auto,
|
||||
auto,
|
||||
auto;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
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");
|
||||
background-position: top,
|
||||
top,
|
||||
center,
|
||||
bottom,
|
||||
bottom,
|
||||
left top,
|
||||
left top,
|
||||
right top,
|
||||
right top;
|
||||
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
|
||||
no-repeat, no-repeat;
|
||||
background-size: 100%,
|
||||
100%,
|
||||
100% 100%,
|
||||
100%,
|
||||
100%,
|
||||
auto,
|
||||
auto,
|
||||
auto,
|
||||
auto;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "管廊巡检机器人综合管理平台";
|
||||
@@ -38,7 +47,10 @@
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-family: YouSheBiaoTiHei, system-ui;
|
||||
font-size: 42px;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -48,8 +60,9 @@
|
||||
}
|
||||
|
||||
.background {
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
@@ -57,6 +70,7 @@
|
||||
|
||||
.main {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
|
||||
@@ -284,14 +284,11 @@ const streamLoading = ref(false);
|
||||
const streamError = ref("");
|
||||
const controlWsStatus = ref("未连接");
|
||||
const controlError = ref("");
|
||||
const controlReconnectLimit = 5;
|
||||
const controlReconnectDelay = 2000;
|
||||
let streamPeerConnection = null;
|
||||
let streamRequestId = 0;
|
||||
let controlSocket = null;
|
||||
let controlRequestSeed = 0;
|
||||
let controlReconnectTimer = null;
|
||||
let controlReconnectAttempts = 0;
|
||||
let controlSocketManualClose = false;
|
||||
let chassisControlTimer = null;
|
||||
let ptzControlTimer = null;
|
||||
@@ -629,17 +626,11 @@ function scheduleControlReconnect() {
|
||||
if (controlSocketManualClose || controlReconnectTimer !== null) {
|
||||
return;
|
||||
}
|
||||
if (controlReconnectAttempts >= controlReconnectLimit) {
|
||||
controlWsStatus.value = "连接失败";
|
||||
controlError.value = "控制 WebSocket 连接失败,请检查 /ws/ros 服务或登录状态";
|
||||
return;
|
||||
}
|
||||
controlReconnectAttempts += 1;
|
||||
controlWsStatus.value = `重连中(${controlReconnectAttempts}/${controlReconnectLimit})`;
|
||||
controlWsStatus.value = "重连中";
|
||||
controlReconnectTimer = window.setTimeout(() => {
|
||||
controlReconnectTimer = null;
|
||||
connectControlSocket();
|
||||
}, controlReconnectDelay);
|
||||
}, 2e3);
|
||||
}
|
||||
function connectControlSocket() {
|
||||
if (controlSocket && (controlSocket.readyState === WebSocket.OPEN || controlSocket.readyState === WebSocket.CONNECTING)) {
|
||||
@@ -648,17 +639,13 @@ function connectControlSocket() {
|
||||
controlSocketManualClose = false;
|
||||
controlError.value = "";
|
||||
controlWsStatus.value = "连接中";
|
||||
const socket = new WebSocket(buildControlWsUrl());
|
||||
controlSocket = socket;
|
||||
socket.onopen = () => {
|
||||
controlReconnectAttempts = 0;
|
||||
controlSocket = new WebSocket(buildControlWsUrl());
|
||||
controlSocket.onopen = () => {
|
||||
controlWsStatus.value = "已连接";
|
||||
};
|
||||
socket.onmessage = (event) => {
|
||||
controlSocket.onmessage = (event) => {
|
||||
if (event.data === "ping") {
|
||||
if (socket.readyState === WebSocket.OPEN) {
|
||||
socket.send("pong");
|
||||
}
|
||||
controlSocket?.send("pong");
|
||||
return;
|
||||
}
|
||||
if (event.data === "pong") {
|
||||
@@ -689,27 +676,18 @@ function connectControlSocket() {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
socket.onerror = () => {
|
||||
if (socket === controlSocket) {
|
||||
controlError.value = "控制 WebSocket 连接异常";
|
||||
}
|
||||
controlSocket.onerror = () => {
|
||||
controlError.value = "控制 WebSocket 连接异常";
|
||||
};
|
||||
socket.onclose = (event) => {
|
||||
if (socket !== controlSocket) {
|
||||
return;
|
||||
}
|
||||
controlSocket = null;
|
||||
controlSocket.onclose = () => {
|
||||
controlWsStatus.value = "未连接";
|
||||
if (controlSocketManualClose || event.code === 1000) {
|
||||
return;
|
||||
}
|
||||
controlSocket = null;
|
||||
scheduleControlReconnect();
|
||||
};
|
||||
return socket;
|
||||
return controlSocket;
|
||||
}
|
||||
function closeControlSocket() {
|
||||
controlSocketManualClose = true;
|
||||
controlReconnectAttempts = 0;
|
||||
if (controlReconnectTimer !== null) {
|
||||
window.clearTimeout(controlReconnectTimer);
|
||||
controlReconnectTimer = null;
|
||||
@@ -718,10 +696,8 @@ function closeControlSocket() {
|
||||
controlWsStatus.value = "未连接";
|
||||
return;
|
||||
}
|
||||
const socket = controlSocket;
|
||||
controlSocket.close();
|
||||
controlSocket = null;
|
||||
socket.onclose = null;
|
||||
socket.close(1000, "manual close");
|
||||
controlWsStatus.value = "未连接";
|
||||
}
|
||||
function sendControlMessage(type, data) {
|
||||
@@ -729,7 +705,6 @@ function sendControlMessage(type, data) {
|
||||
controlError.value = "当前机器人缺少设备标识";
|
||||
return;
|
||||
}
|
||||
controlReconnectAttempts = 0;
|
||||
const socket = connectControlSocket();
|
||||
const payload = {
|
||||
type,
|
||||
|
||||
Reference in New Issue
Block a user