<template>
    <!-- 中一 ---- 自巡检视角 -->
    <div class="center-one child-container">
        <div class="view-title">自巡检视角</div>
        <div class="video-container">
            <video controls style="width: 100%; height: 100%; border-radius: 12px" autoplay>
                <source src="@/assets/video/测试.mp4" type="video/mp4" autoplay />
            </video>
        </div>
    </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.center-one {
    display: flex; /* 新增：启用flex布局 */
    flex-direction: column; /* 新增：垂直排列 */
    height: 100%; /* 新增：确保容器有高度 */

    > .view-title {
        width: 70%;
        height: 42px;
        margin: 0 auto;
        background: url('@/assets/home-imgs/center-bg.png') no-repeat center center;
        background-size: 100% 100%;
        line-height: 36px;
        text-align: center;
        color: #b9e8fe;
        font-size: 17px;
        font-family: 'SourceHanSansCN-Medium';
        flex-shrink: 0; /* 新增：防止标题被压缩 */
    }

    > .video-container {
        flex: 1; /* 新增：占据剩余空间 */
        min-height: 0; /* 新增：允许内容压缩 */
        position: relative; /* 新增：为video定位提供基准 */
        margin-top: 12px; /* 调整间距 */

        video {
            position: absolute; /* 新增：绝对定位填满容器 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* 保持视频比例 */
        }
    }
}
</style>
