54 lines
1.8 KiB
HTML
54 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>环视系统</title>
|
||
<link rel="stylesheet" href="/static/layui/css/layui.css">
|
||
<style>
|
||
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
|
||
#app { display: flex; height: 100vh; }
|
||
#sidebar { width: 200px; background: #393D49; color: white; padding: 20px 0; }
|
||
#main { flex: 1; position: relative; background: black; }
|
||
#video { width: 100%; height: 100%; object-fit: contain; }
|
||
.menu-item { padding: 12px 20px; cursor: pointer; }
|
||
.menu-item:hover { background: #4B515D; }
|
||
.active { background: #009688 !important; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<div id="sidebar">
|
||
<div class="menu-item active" data-view="all">全景鸟瞰</div>
|
||
<div class="menu-item" data-view="front">前视</div>
|
||
<div class="menu-item" data-view="back">后视</div>
|
||
<div class="menu-item" data-view="left">左视</div>
|
||
<div class="menu-item" data-view="right">右视</div>
|
||
<hr style="border-color:#5a5e6a;margin:15px 10px">
|
||
<div class="menu-item" onclick="logout()">退出登录</div>
|
||
</div>
|
||
<div id="main">
|
||
<img id="video" src="/video_feed" />
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/static/layui/layui.js"></script>
|
||
<script>
|
||
// 切换视图（可选：后续通过 WebSocket 或 REST API 控制后端 current_view）
|
||
document.querySelectorAll('.menu-item[data-view]').forEach(item => {
|
||
item.addEventListener('click', function() {
|
||
document.querySelector('.active').classList.remove('active');
|
||
this.classList.add('active');
|
||
const view = this.getAttribute('data-view');
|
||
// TODO: 发送 AJAX 请求通知后端切换 current_view
|
||
// fetch('/api/set_view?view=' + view);
|
||
});
|
||
});
|
||
|
||
function logout() {
|
||
if (confirm('确定退出？')) {
|
||
window.location.href = '/logout';
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |