52 lines
1.6 KiB
Vue
52 lines
1.6 KiB
Vue
|
<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>
|