You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
143 lines
3.3 KiB
143 lines
3.3 KiB
{% extends 'base.html' %}
|
|
|
|
{% block title %}ZFBOX{% endblock %}
|
|
|
|
{% block style %}
|
|
.nav-scroller {
|
|
position: relative;
|
|
z-index: 2;
|
|
height: 2.75rem;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.nav-scroller .nav {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
padding-bottom: 1rem;
|
|
margin-top: -1px;
|
|
overflow-x: auto;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.blue-svg {
|
|
color: blue; /* 这将影响所有使用currentColor的fill属性 */
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tree-view {
|
|
border-right: 1px solid #ddd;
|
|
padding: 10px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.video-frame {
|
|
position: relative;
|
|
width: calc(50% - 10px); /* 默认4画面布局，每行2个视频框架 */
|
|
margin: 5px;
|
|
float: left;
|
|
background-color: #ccc; /* 默认灰色填充 */
|
|
border: 1px solid #000; /* 边框 */
|
|
}
|
|
.video-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #2c3e50;
|
|
color: #fff;
|
|
padding: 5px;
|
|
}
|
|
.video-area {
|
|
width: 100%;
|
|
padding-bottom: 75%; /* 4:3 比例 */
|
|
background-color: #000; /* 默认灰色填充 */
|
|
position: relative;
|
|
border: 1px solid #ddd; /* 视频区域边框 */
|
|
}
|
|
|
|
.video-area canvas {
|
|
display: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.video-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.video-buttons button {
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.video-buttons button:hover {
|
|
color: #f39c12;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
min-width: 100px;
|
|
}
|
|
|
|
|
|
#videoGrid.four .video-frame {
|
|
width: calc(50% - 10px); /* 每行4个视频框架 */
|
|
}
|
|
#videoGrid.eight .video-frame {
|
|
width: calc(12.5% - 10px); /* 每行8个视频框架 */
|
|
}
|
|
#videoGrid.nine .video-frame {
|
|
width: calc(33.33% - 10px); /* 每行3个视频框架，9画面布局 */
|
|
}
|
|
.toggle-buttons {
|
|
margin-bottom: 5px;
|
|
}
|
|
.btn-small {
|
|
font-size: 0.75rem;
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
.error-message {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: red;
|
|
background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container d-flex flex-wrap" >
|
|
<div id="treeView" class="tree-view col-md-3 ">
|
|
<!-- 动态树视图 -->
|
|
</div>
|
|
|
|
<div class="video-content col-md-9">
|
|
<div id="videoGrid" class="row four">
|
|
<!-- 动态视频节点 -->
|
|
</div>
|
|
<div class="toggle-buttons">
|
|
<button id="fourView" class="btn btn-primary btn-small">四画面</button>
|
|
<button id="nineView" class="btn btn-secondary btn-small">九画面</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block script %}
|
|
<script src="{{ url_for('main.static', filename='scripts/aiortc-client-new.js') }}"></script>
|
|
{% endblock %}
|
|
|